.login-screen {
  --site-surface: #fbfaf6;
  --site-surface-soft: #f3efe6;
  --site-border: rgba(23, 55, 67, .11);
  --site-card-shadow: 0 12px 34px rgba(23, 55, 67, .075);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  background: var(--site-surface);
}

.site-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding: 0 clamp(22px, 4.5vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  color: white;
  background: rgba(8, 30, 37, .82);
  box-shadow: 0 6px 24px rgba(5, 20, 25, .11);
  backdrop-filter: blur(18px);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-decoration: none;
}

.site-brand .brand-mark {
  width: 40px;
  color: #fff4d7;
  border-color: rgba(255, 255, 255, .48);
}

.site-topbar-portals {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
  padding: 0 18px;
}

.site-topbar-portals button {
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9px;
  color: white;
  background: rgba(255, 255, 255, .08);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.site-topbar-portals button { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.site-topbar-portals button:hover { border-color: rgba(255,255,255,.42); background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.site-topbar-portals .phase-test-link { border-color: #e6b84d; color: #49350c; background: var(--gold); }

.site-menu-toggle {
  display: grid;
  align-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}

.site-menu-toggle span {
  display: block;
  height: 2px;
  border-radius: 99px;
  background: white;
  transition: translate .2s ease;
}

.site-menu-toggle:hover span:nth-child(2) { translate: 4px 0; }
.site-menu-toggle:focus-visible, .site-menu a:focus-visible, .site-menu button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.site-menu-backdrop {
  position: fixed;
  z-index: 39;
  inset: 0;
  border: 0;
  background: rgba(4, 18, 23, .55);
  backdrop-filter: blur(4px);
}

.site-menu {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(430px, 92vw);
  height: 100%;
  padding: 30px clamp(25px, 5vw, 48px) 38px;
  overflow-y: auto;
  color: white;
  background: #103e46;
  box-shadow: -30px 0 80px rgba(3, 17, 21, .35);
  opacity: 0;
  transform: translateX(100%);
  transition: transform .3s ease, opacity .3s ease;
}

.menu-open .site-menu { opacity: 1; transform: translateX(0); }
.site-menu-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; color: #bcd6d1; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.site-menu-heading button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: white; background: transparent; font-size: 27px; font-weight: 300; line-height: 1; }
.site-menu > a { display: grid; grid-template-columns: 36px 1fr; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: white; font-family: Fraunces, serif; font-size: clamp(19px, 3vw, 25px); text-decoration: none; }
.site-menu > a span { color: var(--gold); font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; }

.site-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: calc(100vh - 72px);
  overflow: hidden;
  color: white;
  background: #081d24;
}

.site-hero .login-visual { z-index: -3; background-size: cover; }
.site-hero .login-shade { z-index: -2; background: linear-gradient(90deg, rgba(7, 29, 36, .94) 0%, rgba(7, 29, 36, .76) 45%, rgba(7, 29, 36, .25) 78%), linear-gradient(0deg, rgba(7,29,36,.7), transparent 45%); }
.site-hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(circle at 72% 45%, rgba(243,182,63,.17), transparent 29%); }

.site-hero-content {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1fr);
  align-items: center;
  gap: clamp(38px, 5vw, 72px);
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
  padding: 70px 0 115px;
}

.site-hero-copy { max-width: 650px; }
.site-hero-copy h1 { max-width: 10.5ch; font-size: clamp(50px, 6vw, 80px); letter-spacing: -.025em; }
.site-hero-copy .lead { max-width: 600px; margin: 25px 0 31px; color: rgba(255,255,255,.82); font-size: clamp(16px, 1.6vw, 20px); }
.site-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.site-primary-link, .site-secondary-link { min-height: 52px; padding: 15px 20px; border-radius: 13px; font-weight: 700; text-decoration: none; }
.site-primary-link { display: inline-flex; align-items: center; gap: 24px; color: #45320c; background: var(--gold); box-shadow: 0 15px 35px rgba(0,0,0,.18); }
.site-primary-link span { font-size: 19px; }
.site-secondary-link { border: 1px solid rgba(255,255,255,.42); color: white; background: rgba(8,29,36,.36); backdrop-filter: blur(8px); }
.site-primary-link, .site-secondary-link, .site-portal-grid button, .site-wide-cta { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.site-primary-link:hover, .site-secondary-link:hover, .site-portal-grid button:hover, .site-wide-cta:hover { transform: translateY(-3px); }

.site-hero-window {
  position: relative;
  margin: 0;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.43);
  border-radius: 28px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 28px 75px rgba(0,0,0,.34);
  transform: rotate(1deg);
  backdrop-filter: blur(8px);
  transition: width .28s ease, transform .28s ease, box-shadow .28s ease;
}
.site-hero-window-controls { position: absolute; z-index: 3; top: 17px; left: 19px; display: flex; align-items: center; gap: 7px; }
.site-hero-window-dot { display: block; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.site-hero-window-dot.gold { background: var(--gold); }
.site-hero-window-dot.orange { background: #e96f35; cursor: pointer; }
.site-hero-window-dot.green { background: #75aa94; cursor: pointer; }
.site-hero-window-dot:is(button):hover { transform: scale(1.25); }
.site-hero-window-dot:is(button):focus-visible { outline: 2px solid white; outline-offset: 3px; }
.site-hero-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: #061419; object-fit: cover; }
.login-screen.presentation-video-expanded { overflow: hidden; }
.site-hero-window.is-expanded { position: fixed; z-index: 50; top: 50%; left: 50%; width: min(1180px, calc(100vw - 40px)); max-width: none; margin: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 100vmax rgba(3,16,21,.78), 0 35px 100px rgba(0,0,0,.58); }
.site-hero-window.is-expanded .site-hero-video { max-height: calc(100vh - 72px); object-fit: contain; }
.site-scroll-cue { position: absolute; bottom: 24px; left: 50%; display: grid; justify-items: center; gap: 7px; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; translate: -50% 0; }
.site-scroll-cue span { width: 1px; height: 24px; background: linear-gradient(transparent, var(--gold)); }

.site-portal-section {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1.7fr);
  align-items: end;
  gap: clamp(35px, 7vw, 90px);
  padding: 75px max(24px, calc((100vw - 1180px) / 2)) 85px;
  color: var(--ink);
  background: #f8f3e9;
}
.site-section-intro h2, .site-section h2 { max-width: 17ch; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.site-section-intro > p:last-child { margin: 19px 0 0; color: #657473; line-height: 1.7; }
.site-portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.site-portal-grid button { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; min-height: 160px; padding: 24px; overflow: hidden; border: 1px solid #d8d2c4; border-radius: 22px; color: var(--ink); background: rgba(255,255,255,.72); text-align: left; box-shadow: 0 10px 30px rgba(23,55,67,.06); }
.site-portal-grid button::after { position: absolute; right: -20px; bottom: -35px; width: 110px; aspect-ratio: 1; border-radius: 50%; content: ""; background: rgba(21,123,125,.06); }
.site-portal-grid strong { grid-column: 1 / -1; align-self: end; font-family: Fraunces, serif; font-size: 24px; }
.site-portal-grid small { max-width: 300px; color: #687574; font-size: 12px; line-height: 1.55; }
.site-portal-grid i { z-index: 1; align-self: end; font-size: 23px; font-style: normal; }
.site-portal-number { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.site-portal-grid .phase-test-access { border-color: #e6b84d; color: #48330b; background: #f6c968; }
.site-portal-grid .phase-test-access small, .site-portal-grid .phase-test-access .site-portal-number { color: #6a4b0d; }

.site-content { background: var(--site-surface); }
.site-section { position: relative; width: min(1120px, calc(100% - 64px)); margin: 0 auto; padding: clamp(64px, 7vw, 96px) 0; }
.site-about { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: clamp(26px, 4vw, 48px); align-items: start; }
.site-section-marker { padding-top: 9px; color: #98a39e; font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; writing-mode: vertical-rl; }
.site-about-copy { width: min(100%, 920px); }
.site-about-copy h2 { margin-bottom: 24px; }
.site-about-copy p { margin: 14px 0 0; color: #5f706f; font-size: 15px; line-height: 1.7; }
.site-about-copy .site-large-copy { max-width: 780px; color: var(--ink); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.52; }
.site-about-copy ul { display: grid; gap: 8px; margin: 18px 0; padding-left: 22px; color: #5f706f; font-size: 15px; line-height: 1.65; }
.site-about-copy li::marker { color: var(--teal); }
.site-about-copy .site-about-emphasis { max-width: 860px; margin: 22px 0; padding: 17px 21px; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; color: var(--ink); background: var(--site-surface-soft); font-family: Fraunces, serif; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; }

.site-pedagogy { width: 100%; padding-right: max(32px, calc((100vw - 1120px) / 2)); padding-left: max(32px, calc((100vw - 1120px) / 2)); background: linear-gradient(180deg, #f0eadf 0%, #ece5d8 100%); }
.site-section-heading { display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, .62fr); align-items: center; gap: clamp(34px, 6vw, 72px); }
.site-section-heading > div { position: relative; padding-bottom: 18px; }
.site-section-heading > div::after { position: absolute; bottom: 0; left: 0; width: 44px; height: 3px; border-radius: 99px; content: ""; background: var(--gold); }
.site-section-heading > p { max-width: 510px; margin: 0; color: #60716f; font-size: 15px; line-height: 1.68; }
.site-principles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items:start; gap: 12px; margin-top: 40px; }
.site-principles article { grid-column: span 4; min-height: 218px; padding: 24px; border: 1px solid var(--site-border); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.55)); box-shadow: var(--site-card-shadow); }
.site-principles .approach-card-wide { grid-column: 1 / -1; }
.principle-symbol { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 27px; border-radius: 13px; color: #fff; background: var(--teal); box-shadow: 0 8px 18px rgba(21,123,125,.16); font-size: 21px; }
.site-principles strong { display: block; font-family: Fraunces, serif; font-size: 20px; line-height: 1.22; }
.site-principles p { margin: 9px 0 0; color: #637371; font-size: 14px; line-height: 1.6; }
.pronoun-principle-heading { display:grid; grid-template-columns:minmax(170px,220px) minmax(0,1fr); align-items:center; gap:clamp(18px,3vw,34px); }
.principle-rainbow-image { display:block; width:100%; aspect-ratio:16/9; border:1px solid rgba(23,55,67,.1); border-radius:14px; object-fit:cover; object-position:center top; box-shadow:0 8px 18px rgba(21,123,125,.13); }
.pronoun-principle-heading > div > p { margin-top:7px; }
.pronoun-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.pronoun-map section { padding: 17px; border: 1px solid rgba(23,55,67,.07); border-radius: 14px; background: rgba(255,255,255,.78); }
.pronoun-map h3 { margin: 0; color: var(--ink); font-family: Fraunces, serif; font-size: 18px; }
.pronoun-map section > p { margin-top: 5px; }
.pronoun-map ul { display: grid; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.pronoun-map li { display: grid; grid-template-columns: 12px minmax(74px, auto) 1fr; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; color: #5c6b69; background: #fffdf8; font-size: 12px; }
.pronoun-map li > i { width: 10px; height: 10px; border-radius: 50%; }
.pronoun-map li > b { color: var(--ink); }
.pronoun-red { background: #e74c3c; }.pronoun-orange { background: #f39c12; }.pronoun-yellow { background: #f4d03f; }.pronoun-green { background: #27ae60; }.pronoun-blue { background: #2980b9; }.pronoun-violet { background: #8e44ad; }
.verb-family-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.verb-family-gallery figure { display: grid; grid-template-rows: 185px auto; margin: 0; padding: 13px; overflow: hidden; border-radius: 16px; background: rgba(255,255,255,.72); }
.verb-family-gallery figure > img { align-self: end; width: 100%; height: 175px; object-fit: contain; object-position: center bottom; }
.verb-family-grandparents-visual { display: flex; align-items: end; justify-content: center; height: 175px; }
.verb-family-grandparents-visual img { width: 33.333%; height: 175px; object-fit: contain; object-position: center bottom; }
.verb-family-gallery figcaption { padding-top: 12px; border-top: 1px solid #e2ded4; text-align: center; }
.verb-family-gallery b, .verb-family-gallery span { display: block; }
.verb-family-gallery b { color: var(--ink); font-size: 12px; }
.verb-family-gallery span { margin-top: 3px; color: #647472; font-size: 11px; }
.site-principles .approach-spatial { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(24px, 5vw, 52px); }
.approach-spatial img { display: block; width: 100%; max-height: 400px; aspect-ratio: 4 / 3; border-radius: 16px; object-fit: cover; box-shadow: 0 14px 35px rgba(23,55,67,.13); }
.approach-list { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 18px; color: #637371; font-size: 14px; line-height: 1.6; }
.approach-list li::marker { color: var(--teal); }
.approach-learning-card { display:flex; flex-direction:column; }
.approach-travel-image { display:block; width:100%; aspect-ratio:16/9; margin-top:18px; border-radius:14px; object-fit:cover; object-position:center; box-shadow:0 10px 24px rgba(23,55,67,.13); }
.site-principles .approach-transversal { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 22px; min-height: 0; }
.approach-transversal .principle-symbol { margin-bottom: 0; }
.approach-transversal p { max-width: 900px; }

.site-adult-guide { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 62px); margin-top: 48px; padding: clamp(30px, 4vw, 44px); border: 1px solid var(--site-border); border-radius: 22px; background: #fffdf8; box-shadow: var(--site-card-shadow); }
.site-adult-guide h3, .site-practical-heading h3, .site-tracking-heading h3 { max-width: 18ch; margin: 0; font-family: Fraunces, serif; font-size: clamp(28px, 2.8vw, 37px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.site-adult-guide-copy { display: grid; align-content: center; gap: 16px; }
.site-adult-guide-copy p { margin: 0; color: #61726f; font-size: 14px; line-height: 1.68; }
.site-adult-guide-copy strong { color: var(--ink); }

.site-how-to { overflow: hidden; border-top: 1px solid rgba(23,55,67,.07); }
.site-discovery-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
.site-discovery-guide article { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 22px; border: 1px solid var(--site-border); border-radius: 18px; background: var(--site-surface-soft); box-shadow: 0 8px 24px rgba(23,55,67,.045); }
.site-discovery-guide article > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #fff; background: var(--teal); font-size: 19px; }
.site-discovery-guide strong { display: block; color: var(--ink); font-family: Fraunces, serif; font-size: 20px; line-height: 1.22; }
.site-discovery-guide p { margin: 8px 0 0; color: #637371; font-size: 14px; line-height: 1.62; }
.site-discovery-guide .site-guide-note { grid-column: 1 / -1; margin: 0; padding: 16px 20px; border-left: 4px solid var(--gold); color: #604d24; background: #fff3d2; font-size: 13px; font-style: italic; line-height: 1.6; }
.site-practical-heading { max-width: 760px; margin-top: 56px; }
.site-practical-heading > p:last-child { color: #61726f; font-size: 14px; line-height: 1.68; }
.site-play-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; margin-top: 32px; }
.site-play-path article { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 13px; min-height: 104px; padding: 16px 17px; border: 1px solid rgba(23,55,67,.11); border-radius: 16px; background: #f4f0e7; box-shadow: 0 8px 24px rgba(23,55,67,.06); }
.site-play-path article:not(:last-child)::after { position: absolute; top: 50%; right: -34px; color: var(--teal); content: "→"; font-size: 24px; font-weight: 700; line-height: 1; transform: translateY(-50%); }
.site-play-path article > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--teal); font-size: 16px; font-weight: 700; }
.site-play-path strong { display: block; font-family: Fraunces, serif; font-size: 17px; line-height: 1.18; }
.site-play-path p { margin: 5px 0 0; color: #637371; font-size: 12px; line-height: 1.5; }
.site-token-card { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 18px; margin-top: 28px; padding: 22px 25px; border-radius: 18px; color: #49350c; background: var(--gold); }
.site-token-card .conjukurios-coin { width: 48px; height: 48px; font-size: 23px; }
.site-token-card strong { display: block; font-family: Fraunces, serif; font-size: 21px; }
.site-token-card p { margin: 5px 0 0; font-size: 13px; line-height: 1.6; }
.site-tracking-guide { margin-top: 44px; padding: clamp(28px, 4vw, 42px); border-radius: 22px; background: linear-gradient(145deg, #123f46, #0d353d); box-shadow: 0 18px 45px rgba(15,59,67,.14); }
.site-tracking-heading h3 { color: #fff; }
.site-tracking-heading .eyebrow { color: #f5c65d; }
.site-status-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.site-status-legend > div { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #c9dcd9; background: rgba(255,255,255,.06); font-size: 13px; line-height: 1.5; }
.site-status-legend .mission-progress-dot { margin-top: 4px; }
.site-status-legend strong { display: block; margin-bottom: 2px; color: #fff; font-size: 13px; }
.site-tracking-details { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; margin-top: 12px; }
.site-tracking-details article { padding: 18px; border-radius: 13px; background: #fffdf8; }
.site-tracking-details strong { display: block; color: var(--teal); font-family: Fraunces, serif; font-size: 18px; }
.site-tracking-details p { margin: 8px 0 0; color: #627270; font-size: 13px; line-height: 1.58; }
.site-tracking-details code { display: block; margin-top: 11px; color: #425653; font-family: inherit; font-size: 13px; line-height: 1.5; }

.site-footer { color:white; background:linear-gradient(145deg,#123f47,#0c333b); }
.site-footer-contact { position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(34px,6vw,72px); width:min(1120px,calc(100% - 64px)); margin:auto; padding:clamp(48px,6vw,72px) 0; overflow:hidden; }
.site-footer-contact::after { position: absolute; right: -100px; bottom: -170px; width: 390px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; box-shadow: 0 0 0 45px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.025); }
.site-contact-copy { position: relative; z-index: 1; }
.site-contact-copy h2 { max-width:650px; font-size:clamp(36px,3.8vw,52px); line-height:1.04; letter-spacing:-.025em; text-wrap:balance; }
.site-contact-copy > p:last-child { max-width: 600px; color: #c2d8d4; font-size: 14px; line-height: 1.68; }
.site-contact-card { position: relative; z-index: 1; display: grid; grid-template-columns: 50px 1fr; gap: 16px; padding: 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 19px; background: rgba(255,255,255,.08); }
.site-contact-card > span { display: grid; place-items: center; width: 50px; aspect-ratio: 1; border-radius: 50%; color: #49350c; background: var(--gold); font-size: 20px; }
.site-contact-card strong { display: block; font-family: Fraunces, serif; font-size: 21px; }
.site-contact-card p { margin: 7px 0 0; color: #c2d8d4; font-size: 12px; line-height: 1.6; }
.site-contact-card a { color: #f7d47f; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }

.site-footer-bottom { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; padding:24px max(24px,calc((100vw - 1120px) / 2)); border-top:1px solid rgba(255,255,255,.12); background:rgba(4,25,30,.32); }

@media (hover: hover) {
  .site-principles article, .site-discovery-guide article, .site-adult-guide { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
  .site-principles article:hover, .site-discovery-guide article:hover { border-color: rgba(21,123,125,.22); box-shadow: 0 16px 38px rgba(23,55,67,.1); transform: translateY(-2px); }
}
.site-footer-bottom p { color:#a9c4bf; font-size:12px; text-align:center; }
.site-footer-bottom > a:last-child { justify-self:end; color:#f6ca6e; font-size:12px; font-weight:700; text-decoration:none; }

@media (min-width:901px) {
  .site-principles .approach-learning-card { grid-column:span 4; grid-row:span 2; align-self:stretch; }
  .site-principles .approach-media-card, .site-principles .approach-song-card { grid-column:span 4; align-self:stretch; }
  .site-principles .approach-transversal { grid-column:5 / -1; align-self:stretch; }
}

@media (max-width: 900px) {
  .site-topbar { display: grid; grid-template-columns: 1fr auto; height: auto; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
  .site-topbar-portals { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; padding: 9px 0 0; }
  .site-topbar-portals button { padding: 8px 5px; font-size: 10px; }
  .site-hero-content { grid-template-columns: 1fr; gap: 38px; padding-top: 55px; }
  .site-hero-copy { max-width: 720px; }
  .site-hero-window { width: min(620px, 100%); }
  .site-portal-section { grid-template-columns: 1fr; }
  .site-section-intro { max-width: 650px; }
  .site-about { grid-template-columns: 35px minmax(0, 1fr); }
  .site-section-heading { grid-template-columns: 1fr; gap: 18px; }
  .site-section-heading > p { max-width: 720px; }
  .site-principles article { grid-column: span 6; }
  .site-principles .approach-card-wide { grid-column: 1 / -1; }
  .site-principles .approach-transversal { grid-column:span 6; }
  .verb-family-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-principles .approach-spatial { grid-template-columns: 1fr; }
  .site-adult-guide { grid-template-columns: 1fr; }
  .site-tracking-details { grid-template-columns: 1fr; }
  .site-play-path { gap: 28px; }
  .site-play-path article { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .site-play-path article > span { width: 34px; height: 34px; }
  .site-play-path article:not(:last-child)::after { right: -24px; font-size: 20px; }
  .site-footer-contact { grid-template-columns:1fr; }
}

@media (max-width: 650px) {
  .site-topbar { min-height: 68px; padding: 9px 18px; }
  .site-brand { font-size: 11px; }
  .site-brand .brand-mark { width: 36px; }
  .site-topbar-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-hero { min-height: auto; }
  .site-hero-content { width: min(100% - 36px, 1180px); padding: 68px 0 94px; }
  .site-hero-copy h1 { font-size: clamp(43px, 12.5vw, 62px); }
  .site-hero-copy .lead { font-size: 16px; }
  .site-hero-actions { align-items: stretch; flex-direction: column; }
  .site-primary-link { justify-content: space-between; }
  .site-hero-window { border-radius: 22px; transform: none; }
  .site-hero-video { aspect-ratio: 16 / 9; }
  .site-scroll-cue { display: none; }
  .site-portal-section { padding: 65px 18px; }
  .site-portal-grid { grid-template-columns: 1fr; }
  .site-portal-grid button { min-height: 145px; }
  .site-section { width: min(100% - 36px, 1120px); padding: 58px 0; }
  .site-section-intro h2, .site-section h2 { font-size: clamp(34px, 10vw, 42px); }
  .site-about { display: block; }
  .site-section-marker { display: none; }
  .site-pedagogy { width: 100%; padding-right: 18px; padding-left: 18px; }
  .site-section-heading { gap: 16px; }
  .site-principles { grid-template-columns: 1fr; margin-top: 30px; }
  .site-principles article, .site-principles .approach-card-wide { grid-column: 1 / -1; min-height: auto; }
  .pronoun-principle-heading { grid-template-columns:1fr; gap:16px; }
  .principle-rainbow-image { width:min(220px,100%); }
  .pronoun-map { grid-template-columns: 1fr; }
  .pronoun-map li { grid-template-columns: 12px minmax(70px, auto) 1fr; }
  .verb-family-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verb-family-gallery figure { grid-template-rows: 160px auto; }
  .verb-family-gallery figure > img, .verb-family-grandparents-visual img { height: 150px; }
  .verb-family-grandparents-visual { height: 150px; }
  .principle-symbol { margin-bottom: 25px; }
  .site-principles .approach-transversal { grid-template-columns: 1fr; gap: 16px; }
  .site-adult-guide { margin-top: 38px; padding: 24px; border-radius: 18px; }
  .site-discovery-guide, .site-status-legend { grid-template-columns: 1fr; }
  .site-discovery-guide .site-guide-note { grid-column: auto; }
  .site-discovery-guide article { grid-template-columns: 1fr; }
  .site-practical-heading { margin-top: 46px; }
  .site-play-path { grid-template-columns: 1fr; gap: 32px; }
  .site-play-path article { min-height: 0; }
  .site-play-path article:not(:last-child)::after { top: auto; right: 50%; bottom: -27px; transform: translateX(50%) rotate(90deg); }
  .site-token-card { grid-template-columns: 1fr; }
  .site-tracking-guide { padding: 24px; border-radius: 18px; }
  .site-footer-contact { width:calc(100% - 36px); padding:42px 0; }
  .site-contact-card { grid-template-columns: 1fr; }
  .site-footer-bottom { grid-template-columns:1fr; justify-items:start; }
  .site-footer-bottom p { text-align:left; }
  .site-footer-bottom > a:last-child { justify-self:start; }
}

@media (prefers-reduced-motion: reduce) {
  .login-screen { scroll-behavior: auto; }
}