/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 */
/* Hallmark · genre: playful · macrostructure: Narrative Workflow · theme: preserved ASTRA · enrichment: edited photographic plates · nav: preserved · footer: preserved */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: clip; scroll-behavior: auto; background: var(--color-paper); }
body { color: var(--color-ink); font-family: var(--font-body); }
a { color: inherit; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2 { overflow-wrap: anywhere; min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-nav {
  position: fixed; inset: 0 0 auto; z-index: 20; min-height: 76px;
  display: flex; align-items: center; gap: 28px; padding: 0 18px 0 20px;
  border: 0; border-radius: 0; background: var(--color-white);
  box-shadow: 0 2px 14px var(--color-shadow-soft); transform: none;
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.site-nav.is-visible { box-shadow: 0 12px 30px var(--color-shadow); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 850; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.brand-logo { display: block; width: auto; height: 58px; }
nav { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; }
.nav-link { position: relative; padding: 8px 12px; font-size: .82rem; text-decoration: none; opacity: .82; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--color-accent); opacity: 1; }
.nav-signin { margin-inline-start: 12px; border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-pill); opacity: 1; }
.nav-link.active::after { content: ""; position: absolute; inset: auto 12px 0; height: 2px; border-radius: var(--radius-pill); background: var(--color-accent); }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: .8em; min-height: 44px; white-space: nowrap; text-decoration: none; font-weight: 750; }
.nav-cta { padding: 12px 20px; border-radius: var(--radius-pill); color: var(--color-accent-ink); background: var(--color-accent); font-size: .82rem; }
.menu-button { display: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--color-ink); font-size: 1.35rem; cursor: pointer; }

.scene { position: relative; width: 100%; overflow: hidden; background: var(--color-paper); scroll-margin-top: 82px; }
.scene-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 0; user-select: none; pointer-events: none; }
.scene > :not(.scene-art) { position: relative; z-index: 2; }
.eyebrow { color: var(--color-teal); font-size: clamp(.65rem, 1.05vw, 1.1rem); font-weight: 650; letter-spacing: .26em; text-transform: uppercase; }
.eyebrow.pill { display: inline-block; padding: .62em 1.2em; border-radius: var(--radius-pill); letter-spacing: 0; text-transform: none; color: var(--color-accent); background: var(--color-pill-warm); }
.eyebrow.teal { color: var(--color-ink); background: var(--color-pill-teal); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow.orange { color: var(--color-accent); }
.intro h2, .center-head h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.06; letter-spacing: -.035em; }
.intro p, .center-head p { color: var(--color-muted); font-size: var(--text-body); line-height: 1.48; }
.button { padding: .85em 1.7em; border: var(--rule-thin) solid var(--color-ink); border-radius: var(--radius-pill); font-size: clamp(.78rem, 1.2vw, 1.25rem); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.button.primary { color: var(--color-accent-ink); border-color: transparent; background: var(--color-accent); }
.button:hover { transform: translateY(-2px); }
.button.primary:hover { background: var(--color-accent-hover); }
.button:active, .nav-cta:active { transform: translateY(1px); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
a:active { color: var(--color-accent); }
.button[aria-disabled="true"], a[aria-disabled="true"], button:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.hero-copy h1 { margin-bottom: 2%; font-size: var(--text-display); line-height: 1.06; letter-spacing: -.04em; }
.hero-copy h1 em { color: var(--color-accent); font-style: normal; }
.hero-copy p { max-width: 33ch; margin-bottom: 5%; color: var(--color-muted); font-size: var(--text-body); line-height: 1.45; }
.actions { display: flex; gap: 1.3vw; }
.hub-sign { color: var(--color-ink); font-weight: 850; line-height: 1.05; text-align: center; text-transform: uppercase; }
.hub-sign small { display: block; margin-top: .3em; font-size: .44em; font-weight: 700; letter-spacing: .06em; }
.hero-orbit, .hero-strip, .step-row, .scholar-steps, .career-steps { margin: 0; padding: 0; list-style: none; }
.continuity .intro h2 { font-family: var(--font-body); font-weight: 800; }
.passport h3, .next-action h3, .opportunity-passport h3, .grounded h3, .journey-labels h3 { margin-bottom: .45em; font-size: var(--text-h3); }
.passport p, .grounded p, .opportunity-passport p, .journey-labels p, .next-action p, .offline-request, .mentor-features span, .mentor-card span, .saved-card span { color: var(--color-muted); line-height: 1.45; }
.center-head { text-align: center; }
.center-head p { margin: 0; }
.journey-ui .quiz i { font-style: normal; }
.support-options > span { display: block; }
.scholar-steps strong, .career-steps strong, .match-title { font-family: var(--font-display); }
.footer-cta h2 { margin: 0; font-family: var(--font-body); }
.footer-links { display: grid; }
.footer-links h3 { margin-bottom: .2em; font-size: var(--text-h3); }
.footer-links a { text-decoration: none; white-space: nowrap; }
.footer-links a:hover { color: var(--color-accent); }

.back-top { position: fixed; right: 22px; bottom: 20px; z-index: 21; display: grid; place-items: center; width: 44px; height: 44px; border: var(--rule-thin) solid var(--color-line); border-radius: 50%; color: var(--color-ink); background: var(--color-glass); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }.back-top.show { opacity: 1; pointer-events: auto; }.back-top:hover { transform: translateY(-3px); }

/* Desktop plates: every overlay is placed in plate pixels (1672 × 941).
   --u is one plate pixel at the current width, so boxes and type scale with the artwork. */
@media (min-width: 60.0625rem) {
  .scene { aspect-ratio: 1672 / 941; container-type: inline-size; --u: calc(100cqw / 1672); }
  .scene > :not(.scene-art) { position: absolute; }

  /* Fixed boxes: --x/--y/--w/--h in plate px; unset --w/--h fall back to auto. */
  .hero-copy, .hero-orbit li, .hub-sign, .hero-strip,
  .continuity .intro, .passport,
  .opportunity .center-head, .journey-ui .quiz, .journey-ui .support-options, .journey-ui .scholarship-offer,
  .tutor .intro, .grounded, .chat-copy > *, .sources > *,
  .scholarships .center-head, .verified, .opportunity-passport, .scholarship-cta,
  .mentors .intro, .match-title, .offline-request, .mentor-cta, .mentor-card, .saved-card,
  .career .intro, .career-cta, .student-built,
  .footer-button, .language-choice, .footer-note, .copyright {
    position: absolute; margin: 0;
    left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  }
  /* Full-plate layers whose children are positioned individually. */
  .hero-orbit, .step-row, .journey-labels, .journey-ui, .next-action, .chat-copy, .sources,
  .scholar-steps, .mentor-features, .career-steps, .footer-cta, .footer-brand, .footer-links {
    inset: 0; pointer-events: none;
  }
  .hero-orbit *, .step-row *, .journey-labels *, .journey-ui *, .next-action *, .chat-copy *, .sources *,
  .scholar-steps *, .mentor-features *, .career-steps *, .footer-cta *, .footer-brand *, .footer-links * { pointer-events: auto; }
  /* Vertically centred text inside a painted box. */
  .hero-orbit li, .step-row b, .step-row strong, .passport, .grounded, .chat-copy > *, .sources > *,
  .verified, .scholar-steps b, .scholar-steps strong, .opportunity-passport, .offline-request,
  .mentor-card, .saved-card, .student-built, .next-action strong, .language-choice, .footer-note, .copyright {
    display: flex; flex-direction: column; justify-content: center;
  }

  .scene .button { padding: .85em 1.7em; font-size: calc(20 * var(--u)); }
  .scene .plate-button { min-height: 0; padding: 0; border: 0; border-radius: var(--radius-pill); font-size: calc(22 * var(--u)); background: transparent; }
  .scene .plate-button:hover { transform: none; background: var(--color-shadow); }
  .scene .plate-button:active { transform: none; }

  /* Home */
  .hero-copy { --x: 70; --y: 236; --w: 720; }
  .hero-copy h1 { margin-bottom: calc(22 * var(--u)); font-size: calc(68 * var(--u)); }
  .hero-copy p { margin-bottom: calc(40 * var(--u)); font-size: calc(22 * var(--u)); }
  .actions { gap: calc(22 * var(--u)); }
  .hero-orbit li { align-items: center; padding-inline: calc(6 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.15; text-align: center; }
  .hero-orbit li:nth-child(1) { --x: 985; --y: 257; --w: 93; --h: 60; }
  .hero-orbit li:nth-child(2) { --x: 1311; --y: 258; --w: 100; --h: 53; }
  .hero-orbit li:nth-child(3) { --x: 912; --y: 441; --w: 80; --h: 53; }
  .hero-orbit li:nth-child(4) { --x: 1379; --y: 441; --w: 77; --h: 53; }
  /* Painted on the hub wall: multiply lets the plaster texture show through the letters. */
  .hub-sign { --x: 1436; --y: 200; --w: 200; font-size: calc(58 * var(--u)); letter-spacing: .02em; opacity: .9; mix-blend-mode: multiply; filter: blur(.4px); transform: rotate(-7deg) skewX(-3deg); }
  .hub-sign small { font-size: .38em; letter-spacing: .07em; white-space: nowrap; }
  .hero-strip { --x: 236; --y: 840; --w: 1200; --h: 56; display: flex; align-items: center; justify-content: center; font-size: calc(21 * var(--u)); white-space: nowrap; }
  .hero-strip li { padding-inline: calc(40 * var(--u)); }
  .hero-strip li + li { border-left: var(--rule-thin) solid var(--color-line); }

  /* Learning continuity */
  .continuity .intro { --x: 69; --y: 151; --w: 540; }
  .continuity .eyebrow.pill { display: flex; align-items: center; justify-content: center; width: calc(273 * var(--u)); height: calc(52 * var(--u)); padding: 0; font-size: calc(19 * var(--u)); background: transparent; }
  .continuity .intro h2 { margin: calc(40 * var(--u)) 0 calc(28 * var(--u)); font-size: calc(56 * var(--u)); line-height: 1.08; letter-spacing: -.03em; }
  .continuity .intro p { font-size: calc(22 * var(--u)); line-height: 1.45; }
  .step-row li { position: absolute; top: calc(171 * var(--u)); height: calc(359 * var(--u)); }
  .step-row li:nth-child(1) { left: calc(617 * var(--u)); width: calc(219 * var(--u)); }
  .step-row li:nth-child(2) { left: calc(880 * var(--u)); width: calc(217 * var(--u)); }
  .step-row li:nth-child(3) { left: calc(1140 * var(--u)); width: calc(215 * var(--u)); }
  .step-row li:nth-child(4) { left: calc(1400 * var(--u)); width: calc(216 * var(--u)); }
  .step-row b { position: absolute; top: 0; left: 50%; width: calc(56 * var(--u)); height: calc(56 * var(--u)); align-items: center; color: var(--color-white); font-size: calc(26 * var(--u)); translate: -50% 0; }
  .step-row strong { position: absolute; inset: auto 0 0; height: calc(58 * var(--u)); align-items: center; font-size: calc(22 * var(--u)); }
  .passport { --x: 940; --y: 600; --w: 640; --h: 175; }
  .passport h3 { font-size: calc(28 * var(--u)); }
  .passport p { margin: 0; font-size: calc(22 * var(--u)); }

  /* From learning to opportunity */
  .opportunity .center-head { --x: 150; --y: 50; --w: 1372; }
  .center-head .eyebrow { font-size: calc(17 * var(--u)); }
  .opportunity .center-head h2 { margin: calc(10 * var(--u)) 0; font-size: calc(62 * var(--u)); }
  .center-head p { font-size: calc(22 * var(--u)); line-height: 1.5; }
  .journey-labels > div { position: absolute; top: calc(634 * var(--u)); width: calc(320 * var(--u)); text-align: center; }
  .journey-labels > div:nth-child(1) { left: calc(120 * var(--u)); }
  .journey-labels > div:nth-child(2) { left: calc(677 * var(--u)); }
  .journey-labels > div:nth-child(3) { left: calc(1229 * var(--u)); }
  .journey-labels h3 { margin-bottom: calc(6 * var(--u)); font-size: calc(26 * var(--u)); }
  .journey-labels p { margin: 0; font-size: calc(20 * var(--u)); }
  .journey-ui { font-size: calc(13 * var(--u)); }
  .journey-ui .quiz { --x: 310; --y: 328; --w: 259; --h: 206; }
  .journey-ui .quiz > * { position: absolute; }
  .journey-ui .quiz strong { top: calc(18 * var(--u)); left: calc(20 * var(--u)); }
  .journey-ui .quiz small { top: calc(18 * var(--u)); right: calc(22 * var(--u)); font-size: 1em; color: var(--color-muted); }
  .journey-ui .quiz i { left: calc(23 * var(--u)); display: grid; place-items: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(11 * var(--u)); }
  .journey-ui .quiz i:nth-of-type(1) { top: calc(56 * var(--u)); }
  .journey-ui .quiz i:nth-of-type(2) { top: calc(91 * var(--u)); }
  .journey-ui .quiz i:nth-of-type(3) { top: calc(127 * var(--u)); }
  .journey-ui .quiz i:nth-of-type(4) { top: calc(162 * var(--u)); }
  .journey-ui .support-options { --x: 893; --y: 398; --w: 209; --h: 159; }
  /* Labels cover the placeholder bars (x 957–1045) painted in the card. */
  .support-options > span { position: absolute; left: calc(55 * var(--u)); display: flex; align-items: center; width: max-content; min-width: calc(98 * var(--u)); max-width: calc(148 * var(--u)); height: calc(24 * var(--u)); padding-right: calc(4 * var(--u)); font-size: calc(12.5 * var(--u)); white-space: nowrap; background: var(--color-card); }
  .support-options > span:nth-child(1) { top: calc(26 * var(--u)); }
  .support-options > span:nth-child(2) { top: calc(68 * var(--u)); }
  .support-options > span:nth-child(3) { top: calc(108 * var(--u)); }
  .journey-ui .scholarship-offer { --x: 1414; --y: 466; --w: 135; --h: 24; display: flex; align-items: center; }
  .next-action > * { position: absolute; margin: 0; }
  .next-action h3 { top: calc(758 * var(--u)); left: calc(293 * var(--u)); font-size: calc(30 * var(--u)); }
  .next-action p { top: calc(806 * var(--u)); left: calc(293 * var(--u)); width: calc(760 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.4; }
  .next-action strong { top: calc(768 * var(--u)); left: calc(1298 * var(--u)); width: calc(196 * var(--u)); height: calc(93 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.2; }

  /* Local AI tutor */
  .tutor .intro { --x: 84; --y: 99; --w: 700; }
  .tutor .eyebrow.pill { display: flex; align-items: center; justify-content: center; width: calc(229 * var(--u)); height: calc(42 * var(--u)); padding: 0; font-size: calc(17 * var(--u)); background: transparent; }
  .tutor .intro h2 { margin: calc(30 * var(--u)) 0 calc(74 * var(--u)); font-size: calc(80 * var(--u)); line-height: 1.04; }
  .tutor .intro p { max-width: calc(610 * var(--u)); font-size: calc(23 * var(--u)); line-height: 1.5; }
  .grounded { --x: 231; --y: 636; --w: 430; --h: 170; }
  .grounded h3 { margin-bottom: calc(10 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.25; }
  .grounded p { margin: 0; font-size: calc(19 * var(--u)); }
  .chat-copy > * { font-size: calc(20 * var(--u)); }
  .chat-copy .language { --x: 1098; --y: 83; --w: 92; --h: 56; align-items: center; }
  .chat-copy .question { --x: 936; --y: 193; --w: 360; --h: 107; line-height: 1.4; }
  .chat-copy .answer { --x: 930; --y: 338; --w: 365; --h: 138; line-height: 1.45; }
  .chat-copy small { --x: 972; --y: 479; --w: 280; --h: 40; font-size: calc(15 * var(--u)); }
  .chat-copy .follow { --x: 852; --y: 594; --w: 390; --h: 67; color: var(--color-muted); }
  .sources strong { --x: 1409; --y: 153; --w: 197; --h: 63; align-items: center; font-size: calc(15 * var(--u)); }
  .sources span { --x: 1514; --w: 88; --h: 70; font-size: calc(13 * var(--u)); line-height: 1.3; }
  .sources span:nth-of-type(1) { --y: 232; }
  .sources span:nth-of-type(2) { --y: 313; }
  .sources span:nth-of-type(3) { --y: 394; }

  /* Scholarships */
  .scholarships .center-head { --x: 250; --y: 68; --w: 1172; }
  .scholarships .center-head h2 { margin: calc(12 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(68 * var(--u)); line-height: 1.02; }
  .verified { --x: 1344; --y: 369; --w: 196; --h: 63; font-size: calc(15 * var(--u)); font-weight: 700; }
  .scholar-steps li { position: absolute; top: calc(418 * var(--u)); width: calc(230 * var(--u)); height: calc(76 * var(--u)); }
  .scholar-steps li:nth-child(1) { left: calc(402 * var(--u)); }
  .scholar-steps li:nth-child(2) { left: calc(625 * var(--u)); }
  .scholar-steps li:nth-child(3) { left: calc(863 * var(--u)); }
  .scholar-steps li:nth-child(4) { left: calc(1116 * var(--u)); }
  .scholar-steps b { position: absolute; top: 0; left: 50%; width: calc(37 * var(--u)); height: calc(37 * var(--u)); align-items: center; color: var(--color-white); font-size: calc(18 * var(--u)); translate: -50% 0; }
  .scholar-steps strong { position: absolute; inset: calc(48 * var(--u)) 0 auto; height: calc(28 * var(--u)); align-items: center; font-size: calc(22 * var(--u)); white-space: nowrap; }
  .opportunity-passport { --x: 412; --y: 790; --w: 600; --h: 115; }
  .opportunity-passport h3 { font-size: calc(30 * var(--u)); }
  .opportunity-passport p { margin: 0; font-size: calc(19 * var(--u)); }
  .scholarship-cta { --x: 1152; --y: 797; --w: 373; --h: 74; }

  /* Mentors */
  .mentors .intro { --x: 69; --y: 83; --w: 760; }
  .mentors .eyebrow { display: block; margin-left: calc(75 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); }
  .mentors .intro h2 { margin: calc(30 * var(--u)) 0 calc(28 * var(--u)); font-size: calc(74 * var(--u)); line-height: 1.03; }
  .mentors .intro p { max-width: calc(720 * var(--u)); font-size: calc(23 * var(--u)); }
  .match-title { --x: 73; --y: 460; --w: 700; font-size: calc(32 * var(--u)); }
  .mentor-features > div { position: absolute; top: calc(604 * var(--u)); display: grid; gap: calc(6 * var(--u)); width: calc(250 * var(--u)); text-align: center; }
  .mentor-features > div:nth-child(1) { left: calc(31 * var(--u)); }
  .mentor-features > div:nth-child(2) { left: calc(284 * var(--u)); }
  .mentor-features > div:nth-child(3) { left: calc(536 * var(--u)); }
  .mentor-features strong { font-size: calc(22 * var(--u)); }
  .mentor-features span { font-size: calc(17 * var(--u)); }
  .offline-request { --x: 193; --y: 692; --w: 500; --h: 86; font-size: calc(18 * var(--u)); line-height: 1.4; }
  .mentor-cta { --x: 101; --y: 802; --w: 418; --h: 70; }
  .mentor-card { --x: 1333; --y: 136; --w: 160; --h: 80; gap: calc(6 * var(--u)); font-size: calc(21 * var(--u)); }
  .mentor-card span { font-size: calc(19 * var(--u)); }
  .saved-card { --x: 1052; --y: 668; --w: 255; --h: 84; gap: calc(6 * var(--u)); font-size: calc(17 * var(--u)); }

  /* Career pathways */
  .career .intro { --x: 154; --y: 82; --w: 760; }
  .career .eyebrow { font-size: calc(17 * var(--u)); }
  .career .intro h2 { margin: calc(24 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(70 * var(--u)); line-height: 1.04; }
  .career .intro p { max-width: calc(660 * var(--u)); margin: 0; font-size: calc(22 * var(--u)); }
  .career-cta { --x: 154; --y: 390; --w: 256; --h: 56; }
  .scene .career-cta { font-size: calc(19 * var(--u)); }
  .student-built { --x: 1300; --y: 118; --w: 220; --h: 104; align-items: center; font-size: calc(20 * var(--u)); text-align: center; }
  .career-steps li { position: absolute; display: grid; gap: calc(2 * var(--u)); justify-items: center; width: calc(220 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); text-align: center; background: var(--color-glass); }
  .career-steps li:nth-child(1) { left: calc(417 * var(--u)); top: calc(568 * var(--u)); }
  .career-steps li:nth-child(2) { left: calc(695 * var(--u)); top: calc(538 * var(--u)); }
  .career-steps li:nth-child(3) { left: calc(999 * var(--u)); top: calc(469 * var(--u)); }
  .career-steps li:nth-child(4) { left: calc(1311 * var(--u)); top: calc(404 * var(--u)); }
  .career-steps strong { font-size: calc(26 * var(--u)); }
  .career-steps span { font-size: calc(16 * var(--u)); line-height: 1.3; }

  /* Footer */
  .footer-cta h2 { position: absolute; top: calc(190 * var(--u)); left: calc(260 * var(--u)); display: flex; align-items: center; height: calc(80 * var(--u)); font-size: calc(58 * var(--u)); letter-spacing: -.02em; }
  .footer-button { --x: 988; --y: 184; --w: 318; --h: 87; }
  .scene .footer-button { font-size: calc(24 * var(--u)); }
  .footer-brand > * { position: absolute; margin: 0; }
  .footer-brand img { top: calc(448 * var(--u)); left: calc(72 * var(--u)); width: calc(222 * var(--u)); height: auto; }
  .footer-brand p { top: calc(612 * var(--u)); left: calc(75 * var(--u)); font-size: calc(25 * var(--u)); line-height: 1.45; }
  .footer-links > div, .footer-links { gap: calc(22 * var(--u)); }
  .footer-links { inset: calc(436 * var(--u)) auto auto; align-content: start; }
  .footer-links.explore { left: calc(744 * var(--u)); }
  .footer-links.support { left: calc(1060 * var(--u)); }
  .footer-links h3 { margin: 0 0 calc(6 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.2; }
  .footer-links a { font-size: calc(22 * var(--u)); line-height: 1.2; }
  .language-choice { --x: 1398; --y: 625; --w: 156; --h: 62; align-items: center; font-size: calc(21 * var(--u)); }
  .footer-note { --x: 72; --y: 830; --h: 36; font-size: calc(19 * var(--u)); }
  .copyright { --x: 1100; --y: 830; --w: 504; --h: 36; align-items: flex-end; font-size: calc(19 * var(--u)); }
}

/* Tablet and phone: the plates cannot hold overlays at this width, so each section
   becomes a normal column: heading, a cropped photo from its plate, then cards. */
@media (max-width: 60rem) {
  .site-nav { inset: 10px 12px auto; min-height: 56px; gap: 8px; padding: 0 6px 0 12px; border: var(--rule-thin) solid var(--color-white); border-radius: 18px; background: var(--color-glass); backdrop-filter: blur(18px); }
  nav { position: absolute; inset: 64px 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 2px; max-height: calc(100svh - 90px); overflow-y: auto; padding: 10px; border: var(--rule-thin) solid var(--color-line); border-radius: 16px; background: var(--color-white); box-shadow: 0 14px 28px var(--color-shadow); }
  nav.open { display: flex; }
  .nav-link { width: 100%; padding: 12px 14px; font-size: .95rem; }
  .nav-link.active::after { display: none; }
  .nav-signin { margin: 6px 0 0; text-align: center; }
  .brand-logo { height: 42px; }
  .nav-cta { min-height: 40px; margin-inline-start: auto; padding: 8px 16px; }
  .menu-button { display: block; }

  .scene { display: flex; flex-direction: column; gap: 1.25rem; padding: 3.5rem clamp(1rem, 5vw, 2.5rem); scroll-margin-top: 76px; }
  .scene.hero { padding-top: 6.25rem; }
  .scene > * { order: 2; width: 100%; max-width: 40rem; margin-inline: auto; }
  .scene > .hero-copy, .scene > .intro, .scene > .center-head { order: 0; }
  .scene > .button { order: 3; }
  .scene + .scene { border-top: var(--rule-thin) solid var(--color-line); }

  /* Plate photo, cropped to the part that reads without its overlays. object-view-box
     does the crop where supported (Chrome/Android); elsewhere cover + object-position. */
  .scene-art { position: static; order: 1; width: 100%; max-width: 40rem; height: auto; margin-inline: auto; aspect-ratio: var(--ar, 16 / 10); object-fit: cover; object-position: var(--pos, center); object-view-box: var(--crop, none); border-radius: 20px; box-shadow: 0 10px 30px var(--color-shadow); }
  .hero .scene-art { --crop: inset(36% 0 12% 60%); --ar: 669 / 489; --pos: 88% 62%; }
  .continuity .scene-art { --crop: inset(17% 2% 43% 36%); --ar: 1037 / 376; --pos: 75% 35%; box-shadow: none; }
  .opportunity .scene-art { --crop: inset(19% 36% 31% 0); --ar: 1070 / 470; --pos: 15% 45%; }
  .tutor .scene-art { --crop: inset(50% 0 0 70%); --ar: 502 / 470; --pos: 100% 100%; }
  .scholarships .scene-art { --crop: inset(15% 60% 17% 0); --ar: 669 / 640; --pos: 0% 50%; }
  .mentors .scene-art { --crop: inset(10% 0 0 47%); --ar: 886 / 847; --pos: 90% 60%; }
  .career .scene-art { --crop: inset(47% 8% 0 0); --ar: 1538 / 499; --pos: 30% 80%; }
  .footer .scene-art { display: none; }

  .eyebrow { font-size: .72rem; }
  .intro h2, .center-head h2 { margin-block: .6rem .75rem; font-size: clamp(1.75rem, 7.4vw, 2.6rem); line-height: 1.1; }
  .intro p, .center-head p, .hero-copy p { margin: 0; font-size: 1rem; line-height: 1.55; }
  .center-head { text-align: left; }
  .center-head br, .opportunity-passport br, .offline-request br, .career-steps br { display: none; }
  .hero-copy h1 { margin-bottom: .9rem; font-size: clamp(2.1rem, 9vw, 3.4rem); line-height: 1.08; }
  .hero-copy p { max-width: 36ch; margin-bottom: 1.5rem; }
  .actions { flex-wrap: wrap; gap: .75rem; }
  .button { font-size: .95rem; }

  .hero-orbit, .hub-sign, .sources, .mentor-card, .saved-card, .student-built, .journey-ui { display: none; }
  .hero-strip { display: flex; flex-wrap: wrap; gap: .5rem; }
  .hero-strip li { padding: .45rem .85rem; border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-pill); font-size: .85rem; background: var(--color-white); }

  /* Shared card look */
  .step-row li, .scholar-steps li, .career-steps li, .journey-labels > div, .mentor-features > div,
  .passport, .next-action, .grounded, .opportunity-passport, .offline-request, .chat-copy {
    padding: 1rem; border: var(--rule-thin) solid var(--color-line); border-radius: 16px; background: var(--color-white);
  }
  .passport h3, .next-action h3, .opportunity-passport h3, .grounded h3, .journey-labels h3 { margin-bottom: .35rem; font-size: 1.1rem; }
  .passport p, .grounded p, .opportunity-passport p, .next-action p, .journey-labels p, .offline-request { margin: 0; font-size: .95rem; }

  .step-row, .scholar-steps, .career-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .step-row li, .scholar-steps li { display: flex; align-items: center; gap: .65rem; }
  .step-row b, .scholar-steps b { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--color-white); font-size: .9rem; background: var(--color-accent); }
  .step-row li:nth-child(even) b, .scholar-steps li:nth-child(odd) b { background: var(--color-teal); }
  .step-row strong, .scholar-steps strong { font-size: .95rem; line-height: 1.25; }
  .career-steps li { display: grid; align-content: start; gap: .25rem; }
  .career-steps strong { font-size: 1.1rem; }
  .career-steps span { color: var(--color-muted); font-size: .9rem; line-height: 1.35; }

  .journey-labels { display: grid; gap: .75rem; counter-reset: journey; }
  .journey-labels > div { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; counter-increment: journey; }
  .journey-labels > div::before { content: counter(journey); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--color-white); font-weight: 750; font-size: .9rem; background: var(--color-teal); }
  .journey-labels h3 { margin: 0; }
  .next-action strong { display: inline-block; margin-top: .85rem; padding: .35rem .8rem; border-radius: var(--radius-pill); color: var(--color-ink); font-size: .85rem; background: var(--color-pill-teal); }
  .next-action strong br { display: none; }

  /* AI tutor example conversation, shown as a real chat card */
  .chat-copy { display: grid; gap: .7rem; }
  .chat-copy .language { justify-self: start; padding: .3rem .8rem; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 700; background: var(--color-pill-teal); }
  .chat-copy .question, .chat-copy .answer { margin: 0; padding: .75rem .9rem; border-radius: 14px; font-size: .95rem; line-height: 1.45; }
  .chat-copy .question { justify-self: end; max-width: 88%; border-bottom-right-radius: 4px; background: var(--color-pill-warm); }
  .chat-copy .answer { max-width: 92%; border-bottom-left-radius: 4px; background: var(--color-pill-teal); }
  .chat-copy small { color: var(--color-muted); font-size: .8rem; }
  .chat-copy .follow { padding: .7rem .9rem; border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-muted); font-size: .9rem; }

  .scene > .verified { width: auto; align-self: flex-start; margin-inline: 0; padding: .4rem .9rem; border-radius: var(--radius-pill); color: var(--color-ink); font-size: .85rem; font-weight: 700; background: var(--color-pill-teal); }
  .verified::before { content: "✓ "; color: var(--color-teal); }

  .match-title { margin: .5rem auto 0; font-size: 1.3rem; }
  .mentor-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .mentor-features > div { display: grid; align-content: start; gap: .25rem; padding: .8rem .6rem; text-align: center; }
  .mentor-features strong { font-size: .92rem; }
  .mentor-features span { font-size: .8rem; line-height: 1.3; }
  .offline-request { border-color: transparent; background: var(--color-pill-teal); }

  .scene > .button { width: auto; align-self: flex-start; margin-inline: 0; }

  /* Footer: two link columns side by side */
  .footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; padding-bottom: 5rem; }
  .footer > * { grid-column: 1 / -1; margin: 0; }
  .footer > .footer-links { grid-column: auto; }
  .footer-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; border-radius: 20px; background: var(--color-pill-warm); }
  .footer-cta h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .footer-brand img { display: block; width: 8rem; height: auto; }
  .footer-brand p { margin: .5rem 0 0; color: var(--color-muted); }
  .footer-links { gap: .15rem; align-content: start; }
  .footer-links h3 { margin-bottom: .35rem; font-size: 1.05rem; }
  .footer-links a { padding: .45rem 0; }
  .footer > .language-choice { justify-self: start; width: auto; padding: .55rem 1rem; border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-white); }
  .footer-note, .copyright { color: var(--color-muted); font-size: .85rem; }
  .footer-note { padding-top: 1rem; border-top: var(--rule-thin) solid var(--color-line); }
  .back-top { right: 16px; bottom: 16px; }
}
/* Between phone and desktop the column is capped at 40rem; keep left-aligned pills and buttons on it. */
@media (min-width: 40.0625rem) and (max-width: 60rem) {
  .scene > .verified, .scene > .button { margin-inline-start: calc((100% - 40rem) / 2); }
  .footer { padding-inline: max(clamp(1rem, 5vw, 2.5rem), calc((100% - 40rem) / 2)); }
  .footer > * { max-width: none; }
}
@media (max-width: 40rem) {
  .actions { display: grid; grid-template-columns: 1fr; }
  .actions .button, .scene > .button { width: 100%; }
}
@media (max-width: 26rem) {
  .step-row, .scholar-steps { grid-template-columns: 1fr; }
  .mentor-features { grid-template-columns: 1fr; }
  .mentor-features > div { grid-template-columns: auto 1fr; align-items: baseline; gap: .6rem; text-align: left; }
}
@media (max-width: 21rem) {
  .nav-cta { display: none; }
  .menu-button { margin-inline-start: auto; }
}
@media (hover: hover) and (pointer: fine) { .nav-cta:hover { background: var(--color-accent-hover); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }