/* ============================================================
   CAPACITY · waitlist — SigIQ-inspired
   Unbounded (display) + DM Sans (body). Electric blue + playful cards.
   ============================================================ */
:root {
  --bg: #06070B;
  --bg-2: #0B0D14;
  --surface: #11131C;
  --surface-2: #181B26;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.15);
  --text: #F4F6FB;
  --dim: rgba(244,246,251,0.62);
  --faint: rgba(244,246,251,0.40);

  /* playful card palette (cohesive, no clashing) */
  --blue: #4C7DFF;
  --violet: #9B6CFF;
  --cyan: #22CBE0;
  --green: #3FCF8E;

  --accent: #4C7DFF;              /* students — electric blue */
  --accent-2: #7AA0FF;
  --accent-rgb: 76,125,255;
  --on-accent: #FFFFFF;

  --display: "Unbounded", "DM Sans", sans-serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.3,.4,1);
}
html[data-audience="professors"] {
  --accent: #9B6CFF;              /* professors — violet */
  --accent-2: #BD9BFF;
  --accent-rgb: 155,108,255;
  --on-accent: #FFFFFF;
}
/* ---------- light theme (default) ---------- */
html[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-2: #F4F6FB;
  --surface: #F6F7FB;
  --surface-2: #ECEFF6;
  --line: rgba(12,16,34,0.10);
  --line-2: rgba(12,16,34,0.17);
  --text: #0C0E16;
  --dim: rgba(14,17,28,0.66);
  --faint: rgba(14,17,28,0.44);
}
html[data-theme="light"] body::after { opacity:.018; }
html[data-theme="light"] .nav::before { background:rgba(255,255,255,0.80); }
html[data-theme="light"] .hero-3d { mix-blend-mode:normal; }
/* prism on the apply card: screen-blend vanishes on white — show it on its own dark vignette */
html[data-theme="light"] .apply-3d { mix-blend-mode:normal; opacity:.92; }
/* LIGHT THEME: the premium cards use dark gradients for the dark look — give them light
   backgrounds in light mode so they don't render as muddy grey on white. */
html[data-theme="light"] .stats-row li { background:linear-gradient(162deg,#ffffff,#eef1fb); border-color:var(--line); box-shadow:0 18px 40px -28px rgba(12,16,34,.25); }
html[data-theme="light"] .stats-row li:hover { box-shadow:0 30px 60px -30px rgba(12,16,34,.3), 0 0 50px -26px rgba(var(--accent-rgb),.35); }
html[data-theme="light"] .pcard { background:#ffffff; }
html[data-theme="light"] .pcard:hover { box-shadow:0 40px 80px -44px rgba(12,16,34,.35), 0 0 60px -28px rgba(var(--accent-rgb),.3); }
html[data-theme="light"] .apply-card { background:linear-gradient(180deg,#ffffff,#f2f5fc); border-color:rgba(var(--accent-rgb),.28); box-shadow:0 50px 110px -55px rgba(12,16,34,.35); }
html[data-theme="light"] .field input, html[data-theme="light"] .field select { background:#fbfcff; }
/* dark imagery (atom, scenes) is designed for a dark backdrop — give it one in light mode */
html[data-theme="light"] .hero-visual::before {
  content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #0B0D14 38%, transparent 72%);
}
html[data-theme="light"] .uni-chip { box-shadow:0 6px 18px -10px rgba(12,16,34,.4); border:1px solid var(--line); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-font-smoothing: antialiased; }
/* NOTE: the previous Lenis+GSAP smooth-scroll/pin engine was removed (see app.js) after it caused
   stale pins / black frames on the audience toggle. Motion is now native CSS scroll-driven
   animations (animation-timeline) + a thin idempotent JS layer. Do NOT reintroduce Lenis/GSAP. */
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; overflow-x: hidden; letter-spacing: -0.01em; }
/* film grain: no mix-blend-mode (it re-blended the whole viewport every scroll frame — a measured
   ~2ms/frame + most of the sustained jank). A faint plain-alpha noise reads the same and is ~free. */
body::after { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
.kicker { display:inline-block; font-family:var(--sans); font-size:0.76rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
h1 em, h2 em, h3 em { font-style:normal; color:var(--accent); }
section { padding: 0 28px; position: relative; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:700; font-size:0.98rem; border:0; border-radius:12px; cursor:pointer; text-decoration:none; transition:transform .14s var(--ease), box-shadow .3s, filter .2s; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); padding:14px 26px; box-shadow:0 10px 40px -12px rgba(var(--accent-rgb),.8); }
.btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 16px 50px -10px rgba(var(--accent-rgb),.95); }
.btn-primary:active { transform:translateY(0) scale(.98); }
.btn-sm { padding:9px 17px; font-size:0.9rem; border-radius:10px; }
.btn-lg { padding:16px 32px; font-size:1.05rem; }

/* ---------- nav ---------- */
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:17px 28px; }
.nav::before { content:""; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100vw; z-index:-1; background:rgba(6,7,11,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-size:1.24rem; font-weight:700; letter-spacing:-0.02em; color:var(--text); text-decoration:none; }
.brand-mark { width:15px; height:15px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 18px rgba(var(--accent-rgb),.7); transition:background .4s, box-shadow .4s; }
.nav-right { display:flex; align-items:center; gap:14px; }
.toggle { position:relative; display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px; }
.toggle-thumb { position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px); background:rgba(var(--accent-rgb),.18); border:1px solid var(--accent); border-radius:999px; transition:transform .4s var(--spring), background .4s, border-color .4s; }
html[data-audience="professors"] .toggle-thumb { transform:translateX(100%); }
.toggle-opt { position:relative; z-index:1; border:0; background:transparent; font-family:var(--sans); font-weight:600; font-size:0.86rem; color:var(--dim); padding:7px 18px; border-radius:999px; cursor:pointer; transition:color .35s; }
.toggle-opt.is-active { color:var(--accent); }
.theme-btn { display:inline-grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; font-size:0.98rem; line-height:1; transition:background .25s, border-color .25s, transform .15s; }
.theme-btn:hover { border-color:var(--line-2); transform:translateY(-1px); }

/* ---------- hero (one viewport, logos pinned to fold bottom) ---------- */
.hero { max-width:var(--maxw); margin:0 auto; min-height:calc(100svh - 72px); display:flex; flex-direction:column; padding-bottom:30px; }
.hero-main { flex:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center; }
.hero-copy { max-width:600px; min-width:0; }
.hero-copy, .row-text, .row-visual, .proof-text, .hero-visual { min-width:0; }
.hero h1 { overflow-wrap:break-word; }
.pill { display:inline-flex; align-items:center; gap:9px; font-size:0.84rem; color:var(--dim); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 16px; margin-bottom:26px; }
.pill-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.9); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.hero h1 { font-size:clamp(2.3rem,4.4vw,3.6rem); font-weight:700; margin-bottom:20px; }
.hero h1 .hl { color:var(--accent); }
.lede { font-size:clamp(1.05rem,1.4vw,1.28rem); line-height:1.55; color:var(--dim); max-width:50ch; margin-bottom:34px; }
.lede strong { color:var(--text); font-weight:600; }
.hero-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.seats { display:inline-flex; align-items:center; gap:11px; font-size:0.85rem; color:var(--dim); }
.seats-bar { width:92px; height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.seats-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
/* professors apply by invitation — the seat-fill bar is meaningless, hide it so the text aligns */
html[data-audience="professors"] .seats-bar { display:none; }
.hero-visual { position:relative; display:grid; place-items:center; min-height:380px; }
.hero-glow { position:absolute; width:70%; height:70%; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.4),transparent 65%); filter:blur(30px); transition:background .6s; }
.hero-3d { position:relative; width:100%; max-width:460px; aspect-ratio:1; object-fit:contain; mix-blend-mode:screen; }
/* rebuilt hero visual: a full brand illustration (student gazing into a swirl of knowledge + AI) */
.hero-art { position:relative; width:100%; max-width:580px; aspect-ratio:16/10; object-fit:cover; object-position:right center;
  border-radius:22px; box-shadow:0 50px 120px -50px #000, 0 0 0 1px rgba(150,170,255,.10); }
.hero-3d, .proof-3d, .apply-3d { -webkit-mask-image:radial-gradient(closest-side, #000 66%, transparent 100%); mask-image:radial-gradient(closest-side, #000 66%, transparent 100%); }

/* logos */
.logos { margin-top:auto; padding-top:34px; }
.logos-label { font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:22px; text-align:center; }
.marquee { position:relative; display:flex; overflow:hidden; width:100vw; margin-left:50%; transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee-track { display:flex; align-items:center; gap:50px; padding-right:50px; flex-shrink:0; animation:scroll 52s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes scroll { to { transform:translateX(-100%); } }
.uni { display:inline-flex; align-items:center; gap:13px; transition:transform .3s var(--ease); }
.uni:hover { transform:translateY(-2px); }
.uni-chip { width:50px; height:50px; flex-shrink:0; background:#fff; border-radius:13px; display:grid; place-items:center; padding:8px; box-shadow:0 6px 22px -10px rgba(0,0,0,.8); }
.uni-chip img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.uni-chip.noimg { display:none; }
.uni-name { font-size:1.04rem; font-weight:600; color:var(--text); white-space:nowrap; letter-spacing:-0.02em; }

/* ---------- story: pinned cinematic CAMERA ----------
   A sticky full-screen stage. JS (storyCamera) writes per-beat --o (opacity, crossfade) and
   --z (scale, the zoom push) from scroll progress through the tall .story track. The pin is pure
   CSS sticky → it can never go stale; JS only writes vars → idempotent + reduced-motion safe. */
.story { position:relative; height:1020vh; }
.story-pin { position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
.story-stage { position:absolute; inset:0; }
/* will-change is applied by JS to only the 1-2 LIVE beats (storyCinema), not all 9 at once —
   holding 9 full-screen layers blew up GPU memory (tab crash) at Retina DPR. */
.beat { position:absolute; inset:0; opacity:var(--o,0); }
.beat-scene { position:absolute; inset:0; overflow:hidden; transform:scale(var(--z,1.12)); transform-origin:50% 50%; }
.beat-scene img { width:100%; height:100%; object-fit:cover; }
.beat-scene picture { display:contents; }   /* let the <img> (responsive desktop/mobile source) fill the scene */
/* readability wash so the right-hand panel always reads over the scene */
.beat-scene::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.34) 46%, color-mix(in srgb,var(--bg) 88%, transparent) 100%); }
html[data-theme="light"] .beat-scene::after { background:linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.46) 46%, color-mix(in srgb,var(--bg) 92%, transparent) 100%); }
.beat-scene-sigma { background:radial-gradient(80% 80% at 45% 42%, rgba(var(--accent-rgb),.12), var(--bg)); display:grid; place-items:center; }
.beat-scene-sigma::after { display:none; }
/* text panel — right column (SigIQ-style) */
/* panel fades faster than the scene so only the DOMINANT beat's headline shows during a dissolve */
.beat-panel { position:absolute; right:clamp(26px,6vw,92px); top:50%; transform:translateY(-50%); z-index:3; width:min(440px,44vw); text-align:left;
  opacity:clamp(0, calc((var(--o,0) - 0.5) * 3), 1); }
.beat-tag { display:inline-block; font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.3); border-radius:999px; padding:6px 14px; margin-bottom:20px; }
.beat-text .eyebrow-n { display:none; }
.beat-text h2 { font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.08; letter-spacing:-.025em; margin-bottom:18px; }
.beat-text h2 em { font-style:normal; color:var(--accent); }
.beat-text p { font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.6; color:var(--dim); max-width:40ch; }
.story-hint { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.story-hint span { display:inline-block; animation:hintBob 1.8s var(--ease) infinite; }
@keyframes hintBob { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(5px);opacity:1} }

/* 2-sigma chart (centered card in its scene) */
.sigma-card { position:relative; width:min(560px,82vw); aspect-ratio:16/10; display:grid; place-items:center; border-radius:22px; border:1px solid var(--line); background:radial-gradient(80% 80% at 50% 30%, rgba(var(--accent-rgb),.10), var(--surface)); overflow:hidden; box-shadow:0 50px 120px -60px #000; }
.sigma-watermark { position:absolute; font-family:var(--display); font-weight:800; font-size:clamp(7rem,16vw,13rem); color:rgba(var(--accent-rgb),.08); letter-spacing:-.05em; user-select:none; }
.sigma-chart { position:relative; width:86%; max-width:460px; }
.sg-axis { stroke:var(--line-2); stroke-width:1.5; }
.sg-curve { fill:none; stroke-width:3; }
.sg-base { stroke:var(--faint); fill:color-mix(in srgb, var(--text) 5%, transparent); }
.sg-hi { stroke:var(--accent); fill:rgba(var(--accent-rgb),.14); filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.5)); }
.sg-label { font-family:var(--sans); font-size:13px; text-anchor:middle; }
.sg-label-b { fill:var(--accent); font-weight:600; }
.sg-label-base { fill:var(--dim); font-weight:500; }
.story-progress { display:none; }

/* ---------- Cinematic stage (theme-independent dark island, abstract canvas scenes) ----------
   The narrative journey is always the immersive dark experience regardless of the page light/dark
   theme. Local CSS vars re-skin every story descendant to read on near-black; the audience accent
   (--accent / --accent-rgb, blue↔violet) is intentionally NOT overridden so the toggle still flows
   through. Scenes are <canvas> drawn by app.js storyCinema() — no photos, no illustration art. */
.story-cinema {
  --text:#eef1fb; --dim:#aab3d4; --faint:#6b7494;
  --surface:#0c1020; --surface-2:#121733; --line:rgba(150,170,255,.12); --line-2:rgba(150,170,255,.22);
}
.story-cinema .story-pin {
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(76,125,255,.10), transparent 60%),
    radial-gradient(90% 70% at 70% 100%, rgba(155,108,255,.08), transparent 60%),
    #06070B;
  color:var(--text);
}
.story-cinema .beat-scene { background:transparent; transform:scale(var(--z,1.06)); }
.story-cinema .beat-scene canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* full-bleed generated illustration scenes (Gemini): the cohesive character sits in the left two-thirds
   of each 16:9 frame, so keep the left anchored when the cover-crop trims for tall viewports. */
.story-cinema .beat-scene img { object-position:left center; }
/* CONSISTENT FRAME: image full-bleed on the left, the story text in a clean glass BOX on the right.
   Identical every beat → the camera feels like one continuous canvas, and text never sits on a face. */
.story-cinema .beat-panel {
  right:clamp(20px,5vw,72px); width:min(430px,42vw);
  padding:clamp(26px,3vw,40px) clamp(24px,2.4vw,34px);
  background:linear-gradient(160deg, rgba(18,23,45,.82), rgba(10,13,26,.8));
  border:1px solid rgba(150,170,255,.18); border-radius:24px;
  box-shadow:0 40px 110px -45px #000, inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px) saturate(1.1); -webkit-backdrop-filter:blur(20px) saturate(1.1);
}
@media (max-width:760px){
  .story-cinema .beat-panel{ right:auto; left:16px; width:auto; top:auto;
    bottom:calc(18px + env(safe-area-inset-bottom)); transform:none;
    background:linear-gradient(160deg, rgba(18,23,45,.92), rgba(10,13,26,.92)); padding:20px 18px; }
}
/* readability wash so the right-hand panel always reads over a scene (dark, theme-independent) */
.story-cinema .beat-scene::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(6,7,11,0) 0%, rgba(6,7,11,.18) 42%, rgba(6,7,11,.82) 100%); }
html[data-theme="light"] .story-cinema .beat-scene::after {
  background:linear-gradient(90deg, rgba(6,7,11,0) 0%, rgba(6,7,11,.18) 42%, rgba(6,7,11,.82) 100%); }
.story-cinema .beat-scene-sigma { background:transparent; }
.story-cinema .beat-scene-sigma::after { display:none; }
.story-cinema .beat-text h2 { color:var(--text); }
.story-cinema .sigma-card { background:radial-gradient(80% 80% at 50% 25%, rgba(var(--accent-rgb),.16), #0a0e1e); border-color:var(--line-2); box-shadow:0 60px 140px -60px #000, 0 0 0 1px rgba(150,170,255,.06); }
.story-cinema .story-hint { color:var(--faint); }

/* mobile: panel drops to the bottom over a gradient */
@media (max-width:760px) {
  .beat-panel { right:auto; left:0; width:100%; top:auto; bottom:0; transform:none;
    padding:20px 20px calc(28px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--bg) 34%, transparent); }
  .beat-text p { max-width:none; }
}

/* ---------- stats band ---------- */
.stats { max-width:var(--maxw); margin:0 auto; padding-top:150px; }
.stats-row { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0; }
.stats-row li { position:relative; text-align:center; padding:40px 18px; border-radius:22px; overflow:hidden;
  background:linear-gradient(162deg, rgba(22,27,48,.55), rgba(12,15,26,.55)); border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.stats-row li::before { content:""; position:absolute; top:-45%; left:50%; transform:translateX(-50%); width:140%; height:90%;
  background:radial-gradient(closest-side, rgba(var(--accent-rgb),.20), transparent 70%); pointer-events:none; }
.stats-row li:hover { transform:translateY(-5px); border-color:rgba(var(--accent-rgb),.4);
  box-shadow:0 34px 66px -32px #000, 0 0 60px -26px rgba(var(--accent-rgb),.55); }
.stats-row b { position:relative; display:block; font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,4.4vw,3.8rem); letter-spacing:-.03em; line-height:1; margin-bottom:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),.4)); }
.stats-row span { position:relative; font-size:.92rem; color:var(--dim); line-height:1.4; }

/* ---------- section heads ---------- */
.sec-head { max-width:720px; margin:0 auto; text-align:center; }
.sec-head h2 { font-size:clamp(1.9rem,3.8vw,3rem); margin-bottom:18px; }
.sec-sub { color:var(--dim); font-size:1.08rem; max-width:52ch; margin:0 auto; }

/* ---------- mobile-only "best on desktop" note — FIXED at the very top, above the nav ---------- */
.mnote { display:none; }
@media (max-width:760px){
  .mnote { display:flex; align-items:center; justify-content:center; gap:10px;
    position:fixed; top:0; left:0; right:0; z-index:200;            /* always pinned on top, above the nav */
    padding:10px 38px 10px 16px; text-align:center; font-size:.78rem; line-height:1.35; color:var(--text);
    background:linear-gradient(90deg, #1a2444, #221a40);            /* opaque so content can't show through */
    border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .mnote b { color:var(--accent); font-weight:700; }
  .mnote.hide { display:none; }
  .mnote-x { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0;
    color:var(--dim); font-size:1.25rem; line-height:1; cursor:pointer; padding:4px 8px; }
  /* make room for the fixed note: push the page down and stick the nav just below it */
  body { padding-top:var(--mnh, 0px); }
  .nav { top:var(--mnh, 0px); }
}

/* ---------- "What is Capacity" intro band (bridges the story into the product) ---------- */
.intro { max-width:880px; margin:0 auto; padding:140px 24px 0; text-align:center; }
.intro-inner h2 { font-size:clamp(2rem,4.4vw,3rem); letter-spacing:-.03em; margin:14px 0 18px; }
.intro-sub { color:var(--dim); font-size:clamp(1.05rem,1.6vw,1.24rem); line-height:1.6; max-width:60ch; margin:0 auto; }
.intro-chips { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:32px 0 0; padding:0; }
.intro-chips li { font-size:.86rem; font-weight:600; color:var(--text); background:rgba(var(--accent-rgb),.10);
  border:1px solid rgba(var(--accent-rgb),.3); border-radius:999px; padding:8px 16px; }
@media (max-width:600px){ .intro{ padding-top:90px; } }
.faculty, .show, .how, .faq { max-width:var(--maxw); margin:0 auto; }
.faculty, .show, .how { padding-top:150px; }

/* ---------- faculty: vertical card-by-card stack ---------- */
.fac-list { max-width:840px; margin:52px auto 0; display:flex; flex-direction:column; gap:18px; }
.pcard { display:grid; grid-template-columns:160px 1fr; gap:26px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; text-decoration:none; color:var(--text); transition:transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.pcard { position:relative; background:linear-gradient(158deg, rgba(22,27,48,.66), rgba(12,15,26,.72)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.pcard::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s;
  background:linear-gradient(150deg, rgba(var(--accent-rgb),.65), rgba(var(--accent-rgb),0) 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
.pcard:hover { transform:translateY(-5px); border-color:transparent; box-shadow:0 44px 90px -44px #000, 0 0 70px -26px rgba(var(--accent-rgb),.5); }
.pcard:hover::before { opacity:1; }
.pcard-photo { position:relative; width:160px; height:160px; border-radius:16px; overflow:hidden; background:var(--surface-2); }
.pcard-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(1.04); transition:filter .4s, transform .5s var(--ease); }
.pcard:hover .pcard-photo img { filter:grayscale(0); transform:scale(1.05); }
.pcard-no { position:absolute; top:10px; left:12px; font-family:var(--display); font-weight:700; font-size:.8rem; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.8); opacity:.85; }
.pcard-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pcard-head h3 { font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.1vw,1.7rem); letter-spacing:-.02em; }
.pcard-inst { display:inline-flex; align-items:center; gap:7px; font-size:.84rem; color:var(--faint); }
.inst-logo { display:inline-grid; place-items:center; width:22px; height:22px; flex-shrink:0; background:#fff; border-radius:6px; padding:2px; box-shadow:0 1px 5px rgba(0,0,0,.18); }
.inst-logo img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.fac-course { display:inline-block; margin-top:11px; font-size:.78rem; font-weight:600; color:var(--accent); background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.3); border-radius:999px; padding:4px 13px; }
.pcard-intro { margin-top:12px; font-size:.98rem; line-height:1.55; color:var(--dim); }
.pcard-intro strong { color:var(--text); font-weight:600; }
.fac-note { text-align:center; color:var(--faint); font-size:0.8rem; margin-top:24px; }
/* AI tutor card — the other half of the solution */
.pcard-ai { background:linear-gradient(120deg, rgba(var(--accent-rgb),.14), var(--surface) 60%); border-color:rgba(var(--accent-rgb),.35); }
.pcard-photo-ai { background:#04050a; display:grid; place-items:center; }
.pcard-photo-ai img { object-fit:contain; mix-blend-mode:screen; filter:none; }
/* recruit card (professors) */
.pcard-cta { border-style:dashed; border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.05); }
.pcard-cta:hover { border-color:var(--accent); background:rgba(var(--accent-rgb),.1); }
.pcard-photo-cta { display:grid; place-items:center; background:rgba(var(--accent-rgb),.08); border:1px dashed rgba(var(--accent-rgb),.35); }
.cta-plus { font-size:3.4rem; font-weight:300; line-height:1; color:var(--accent); transition:transform .35s var(--ease); }
.pcard-cta:hover .cta-plus { transform:scale(1.1) rotate(90deg); }
.pcard-cta .fac-course { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ---------- product showcase rows ---------- */
.row { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:54px 0; }
.row + .row { border-top:1px solid var(--line); }
.row:first-of-type { margin-top:34px; }
.row.flip .row-visual { order:-1; }
.row-eyebrow { font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--c,var(--accent)); margin-bottom:14px; }
.row-text h3 { font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:600; margin-bottom:15px; max-width:16ch; }
.row-text p { color:var(--dim); font-size:1.08rem; line-height:1.65; max-width:42ch; }
.row-visual { aspect-ratio:4/3; border-radius:22px; background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--c,var(--accent)) 14%, var(--surface)), var(--bg-2)); border:1px solid var(--line); padding:26px; overflow:hidden; position:relative; }

/* mockups */
.mk-chat { display:flex; flex-direction:column; gap:12px; height:100%; justify-content:center; }
.bubble { max-width:80%; padding:13px 16px; border-radius:16px; line-height:1.45; font-size:0.92rem; }
.bubble.you { align-self:flex-end; background:var(--surface-2); border:1px solid var(--line); color:var(--text); border-bottom-right-radius:5px; }
.bubble.ai { align-self:flex-start; background:color-mix(in srgb,var(--c,var(--accent)) 18%, transparent); border:1px solid color-mix(in srgb,var(--c,var(--accent)) 40%, transparent); color:var(--text); border-bottom-left-radius:5px; }
.bubble .eq { color:var(--c,var(--accent)); font-weight:600; }
.mk-steps { display:flex; flex-direction:column; gap:13px; height:100%; justify-content:center; }
.step-line { display:flex; align-items:center; gap:13px; }
.step-badge { width:26px; height:26px; flex-shrink:0; border-radius:8px; display:grid; place-items:center; font-size:0.78rem; font-weight:700; background:color-mix(in srgb,var(--c,var(--accent)) 20%, transparent); border:1px solid color-mix(in srgb,var(--c,var(--accent)) 42%, transparent); color:var(--c,var(--accent)); }
.step-bar { height:11px; border-radius:6px; background:var(--surface-2); flex:0 0 auto; }
.step-bar.lit { background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--accent)) 70%, transparent),color-mix(in srgb,var(--c,var(--accent)) 18%, transparent)); }
.mk-courses { display:flex; flex-direction:column; gap:11px; height:100%; justify-content:center; }
.course-row { display:flex; align-items:center; gap:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:10px 13px; }
.course-av { width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; border:1px solid var(--line-2); }
.course-meta b { display:block; font-size:0.9rem; font-weight:600; } .course-meta span { font-size:0.75rem; color:var(--faint); }
.mk-exam { display:flex; flex-direction:column; gap:16px; height:100%; justify-content:center; align-items:center; }
.ring { position:relative; width:118px; height:118px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--c,var(--accent)) calc(var(--p,86)*1%), var(--surface-2) 0); }
.ring::before { content:""; position:absolute; width:88px; height:88px; border-radius:50%; background:var(--bg-2); }
.ring b { position:relative; font-family:var(--display); font-size:1.7rem; font-weight:700; }
.exam-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.exam-tags span { font-size:0.76rem; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }

/* ---------- how ---------- */
.how-row { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px; }
.how-step { border-top:2px solid var(--line); padding-top:22px; }
.how-n { font-family:var(--display); font-size:0.85rem; font-weight:700; letter-spacing:0.06em; color:var(--accent); }
.how-step h3 { font-family:var(--display); font-size:1.3rem; font-weight:600; margin:12px 0 8px; }
.how-step p { color:var(--dim); font-size:0.98rem; }

/* ---------- apply ---------- */
.apply-sec { max-width:780px; margin:0 auto; padding-top:160px; }
.apply-card { background:linear-gradient(180deg, rgba(22,27,48,.62), rgba(11,13,20,.82)); border:1px solid rgba(var(--accent-rgb),.28); border-radius:26px; padding:56px 50px; text-align:center; position:relative; overflow:hidden;
  box-shadow:0 70px 150px -60px #000, inset 0 1px 0 rgba(255,255,255,.06); }
.apply-card::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:70%; height:180px; pointer-events:none;
  background:radial-gradient(62% 100% at 50% 0%, rgba(var(--accent-rgb),.30), transparent 72%); }
.field input:focus, .field select:focus { box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22), 0 0 26px -6px rgba(var(--accent-rgb),.5); }
.apply-3d { position:absolute; top:-60px; right:-40px; width:240px; opacity:.6; mix-blend-mode:screen; pointer-events:none; }
.apply-card > * { position:relative; }
.apply-card h2 { font-size:clamp(1.9rem,4vw,2.8rem); }
.apply-sub { color:var(--dim); font-size:1.04rem; margin:15px auto 32px; max-width:46ch; }
.apply { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.apply .btn { grid-column:1 / -1; }
.field { position:relative; text-align:left; }
.field input, .field select { width:100%; height:56px; background:var(--bg); border:1px solid var(--line); border-radius:12px; color:var(--text); font-family:var(--sans); font-size:0.98rem; padding:22px 15px 7px; outline:none; transition:border-color .2s, box-shadow .2s; appearance:none; }
.field select { cursor:pointer; }
.field input:focus, .field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); }
.field label { position:absolute; left:15px; top:18px; pointer-events:none; color:var(--faint); font-size:0.95rem; transition:all .18s var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field select:focus + label, .field select:valid + label { top:9px; font-size:0.68rem; color:var(--accent); }
.field select:not(:focus):invalid + label { top:18px; font-size:0.95rem; color:var(--faint); }
.field:has(select)::after { content:""; position:absolute; right:17px; top:50%; width:8px; height:8px; border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.apply-fine { color:var(--faint); font-size:0.8rem; margin-top:18px; }
.apply-success { font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--accent); margin-top:10px; }

/* honeypot — off-screen, never shown to humans */
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* form errors + loading */
.field.has-error input, .field.has-error select { border-color:#FF6B6B; box-shadow:0 0 0 3px rgba(255,107,107,.18); }
.field-err { display:block; margin-top:6px; font-size:0.74rem; color:#FF8585; text-align:left; }
.apply-error { color:#FF8585; font-size:0.86rem; margin-top:14px; text-align:left; }
.apply button[disabled] { opacity:.65; cursor:progress; }

/* ---------- faq ---------- */
.faq { padding-top:160px; padding-bottom:140px; }
.faq-list { max-width:820px; margin:50px auto 0; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; background:none; border:0; cursor:pointer; color:var(--text); font-family:var(--display); font-weight:500; font-size:1.16rem; letter-spacing:-0.02em; text-align:left; padding:25px 44px 25px 0; position:relative; transition:color .2s; }
.faq-q:hover { color:var(--accent); }
.faq-q::after { content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--sans); font-size:1.5rem; color:var(--accent); transition:transform .3s var(--spring); }
.faq-item.open .faq-q::after { transform:translateY(-50%) rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; color:var(--dim); transition:max-height .4s var(--spring), padding .4s; font-size:1rem; line-height:1.65; }
.faq-item.open .faq-a { max-height:280px; padding-bottom:25px; }

/* ---------- footer ---------- */
.foot { border-top:1px solid var(--line); padding:44px 28px; margin-top:40px; }
.foot-inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; }
.foot .brand { font-size:1.1rem; }
.foot-tag { color:var(--dim); font-size:0.85rem; }
.foot-legal { color:var(--faint); font-size:0.76rem; margin-left:auto; }

/* ---------- reveal (SigIQ-style: translateY + scale, no blur) ---------- */
.reveal { opacity:0.001; transform:translateY(20px) scale(.92);
  transition:opacity .7s var(--ease), transform .85s var(--spring); transition-delay:var(--d,0s); will-change:transform,opacity; }
.reveal.in { opacity:1; transform:none; }
/* staggered children inside a revealed group */
.stagger > * { opacity:0.001; transform:translateY(18px) scale(.93);
  transition:opacity .65s var(--ease), transform .8s var(--spring); transition-delay:var(--d,0s); }
.stagger.in > * { opacity:1; transform:none; }
.parallax { will-change:transform; }
[data-swap] { transition:opacity .22s var(--ease); }
.swapping [data-swap] { opacity:0; }

/* ============================================================
   SCROLL ENGINE — native CSS scroll-driven animations (primary),
   IntersectionObserver .reveal (fallback). The browser owns the
   timeline so a re-deck / toggle can never leave a stale pin.
   Convention: motion vars
     --sg   0..1 sigma-chart scroll progress  (written by initMotion JS)
   Real keyframes/timelines are added in the narrative phase. This block
   only establishes the @supports split so later phases slot into it.
   ============================================================ */
:root { --motion-engine: legacy; }            /* overwritten to "native" when supported */

/* ---- kinetic headline (word-by-word rise; JS splits .hero h1 into .kw spans) ---- */
.hero h1 .kw { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.04em; }
.hero h1 .kw > span { display:inline-block; transform:translateY(112%); }
.hero h1 .kw-em > span { color:var(--accent); font-style:normal; }
@keyframes kwRise { from { transform:translateY(112%); } to { transform:translateY(0); } }

/* ---- 2σ chart scrub: --sg (0..1) is written by initMotion's sigmaScrub; default full so a
        no-JS / unsupported render still shows the complete curve ---- */
.sg-hi { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--sg, 1)); fill-opacity:var(--sg, 1);
         transform:translateX(calc((1 - var(--sg, 1)) * -22px)); transform-box:fill-box; transform-origin:center; }
.sg-label-b { opacity:var(--sg, 1); transition:opacity .2s linear; }
.sigma-watermark { transform:scale(calc(.92 + var(--sg, 1) * .08)); opacity:calc(.5 + var(--sg, 1) * .5); }

@supports (animation-timeline: scroll()) {
  :root { --motion-engine: native; }

  /* HERO — visual drifts up + glow breathes as the hero scrolls out (parallax depth, FR-HERO-1) */
  .hero-visual { animation:heroPar linear both; animation-timeline:view(); animation-range:cover; }
  @keyframes heroPar { from { transform:translateY(-3%); } to { transform:translateY(10%); } }

  /* STORY camera is JS-driven (storyCamera writes --o/--z); see the .story block above. The pin is
     pure CSS sticky so it can't go stale; nothing scroll-driven to declare here. */

  /* FACULTY — curated card-by-card reveal as each scrolls in (direction-aware: alternate sides) */
  .fac-list .pcard { animation:pcardIn linear both; animation-timeline:view(); animation-range:entry 0% entry 55%; }
  .fac-list .pcard:nth-child(odd)  { --fx:-34px; }
  .fac-list .pcard:nth-child(even) { --fx:34px; }
  @keyframes pcardIn { from { opacity:0; transform:translate(var(--fx,0),34px) scale(.975); } to { opacity:1; transform:none; } }

  /* SECTION reveals — product rows + how-steps enter with a staggered rise */
  .show .row   { animation:secRise linear both; animation-timeline:view(); animation-range:entry 0% entry 50%; }
  .how-step    { animation:secRise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%; }
  @keyframes secRise { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }

  /* PARALLAX moment — the prism on the apply card drifts + rotates through its transit (FR-NARR-4) */
  .apply-3d.parallax { animation:applyPar linear both; animation-timeline:view(); animation-range:cover; }
  @keyframes applyPar { from { transform:translateY(-34px) rotate(-5deg); } to { transform:translateY(44px) rotate(5deg); } }

  /* under native motion the IntersectionObserver reveal would double up — neutralize it for these */
  .hero-visual.reveal, .fac-list .pcard.reveal { opacity:1; }
}

/* ---------- chapter rail (desktop wayfinding) ---------- */
.chrail { position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:90;
  display:none; flex-direction:column; gap:15px; align-items:flex-end; padding:8px 6px 8px 0; }
@media (min-width:1101px) { .chrail:not(:empty) { display:flex; } }
.chrail-bar { position:absolute; right:6px; top:10px; bottom:10px; width:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.chrail-bar i { position:absolute; inset:0; transform-origin:top center; transform:scaleY(0);
  background:linear-gradient(var(--accent),var(--accent-2)); }
.chrail-dot { position:relative; display:flex; flex-direction:row-reverse; align-items:center; gap:10px; text-decoration:none; padding:1px 0; }
.chrail-tick { width:9px; height:9px; border-radius:50%; border:2px solid var(--line-2); background:var(--bg);
  transition:border-color .3s, background .3s, box-shadow .3s, transform .3s var(--spring); }
.chrail-label { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.01em; color:var(--dim);
  opacity:0; transform:translateX(8px); transition:opacity .25s, transform .25s var(--ease); white-space:nowrap; pointer-events:none; }
.chrail:hover .chrail-label, .chrail-dot.is-active .chrail-label { opacity:1; transform:none; }
.chrail-dot.is-active .chrail-tick { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16); transform:scale(1.05); }
.chrail-dot:hover .chrail-tick { border-color:var(--accent); }
.chrail-dot.is-active .chrail-label { color:var(--accent); }
@supports not (animation-timeline: scroll()) {
  /* fallback: the .reveal / .stagger IntersectionObserver path above stays the source of motion;
     the kinetic words still rise once on load via the animation below */
  .hero h1 .kw > span { animation:kwRise .9s var(--spring) both; animation-delay:calc(var(--kwi,0)*.05s + .12s); }
}
@supports (animation-timeline: scroll()) {
  .hero h1 .kw > span { animation:kwRise .9s var(--spring) both; animation-delay:calc(var(--kwi,0)*.05s + .12s); }
}
/* During an audience re-deck, freeze the story stage to a static end-state so the 200ms swap can
   never show overlap / a half-scrubbed beat. JS also zeroes --sg in initMotion() teardown. */
/* during a re-deck, blank the camera stage so the 200ms swap can't flash overlapping beats */
.swapping .story-stage { opacity: 0; }
.swapping .sigma-card { --sg: 0; }

/* ---------- more to come ---------- */
.more { max-width:var(--maxw); margin:0 auto; padding:120px 28px 40px; }
.more-inner { position:relative; text-align:center; max-width:680px; margin:0 auto; padding:56px 40px;
  background:radial-gradient(120% 140% at 50% 0%, rgba(var(--accent-rgb),.10), var(--surface) 70%);
  border:1px solid var(--line); border-radius:26px; overflow:hidden; }
.more-inner::before { content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:60%; height:80%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.18), transparent 70%); filter:blur(20px); pointer-events:none; }
.more-inner h2 { font-size:clamp(1.7rem,3.4vw,2.6rem); margin-bottom:14px; }
.more-sub { color:var(--dim); font-size:1.05rem; line-height:1.6; max-width:48ch; margin:0 auto 28px; }

/* ---------- emotional close (S10): the dark→light resolution ---------- */
.close { position:relative; padding:clamp(120px,16vh,210px) 24px; text-align:center; overflow:hidden;
  background:radial-gradient(125% 120% at 50% -12%, #EEF1FF 0%, #F5F7FE 52%, #FCFCFF 100%); color:#0C0E16; }
.close-glow { position:absolute; top:-28%; left:50%; transform:translateX(-50%); width:72%; height:72%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.20), transparent 66%); filter:blur(46px); pointer-events:none; }
.close-inner { position:relative; max-width:900px; margin:0 auto; }
.close-lines { list-style:none; margin:0 0 46px; padding:0; display:flex; flex-direction:column; gap:14px; }
.close-lines li { font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,2.9vw,2.05rem); line-height:1.25; letter-spacing:-.02em; color:#474d68; }
.close-lines li em { font-style:normal; background:linear-gradient(135deg,#4C7DFF,#9B6CFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.close-mark { display:inline-flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:1.5rem; color:#0C0E16; margin-bottom:16px; }
.close-h { font-family:var(--display); font-weight:800; font-size:clamp(2rem,5vw,3.4rem); line-height:1.12; letter-spacing:-.03em; margin:0 auto 34px; max-width:20ch; }
.close .btn-primary { box-shadow:0 18px 50px -12px rgba(var(--accent-rgb),.6); }
.close-foot { margin-top:28px; font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; color:#8089a6; }

/* ---------- responsive ---------- */
@media (max-width:920px) {
  .hero { text-align:center; padding-top:4vh; }
  .hero-main { grid-template-columns:1fr; gap:20px; }
  .hero-copy { max-width:none; }
  .lede { margin-inline:auto; } .hero-actions { justify-content:center; }
  .hero-visual { order:-1; min-height:200px; } .hero-3d { max-width:260px; }
  .stats-row { grid-template-columns:1fr 1fr; gap:30px 16px; }
  .row, .row.flip { grid-template-columns:1fr; gap:26px; }
  .row .row-visual, .row.flip .row-visual { order:2; }
  .how-row { grid-template-columns:1fr; gap:18px; }
}
@media (max-width:600px) {
  section { padding:0 18px; }
  .nav { padding:12px 18px; gap:10px; }
  .nav-right .btn-primary { display:none; }          /* hero already has the CTA */
  .nav-right { gap:0; }
  .toggle-opt { padding:7px 14px; font-size:0.82rem; }
  .brand { font-size:1.12rem; }
  .hero h1 { font-size:clamp(2rem,8.5vw,2.7rem); }
  .lede { font-size:1.02rem; }
  .uni-name { font-size:0.95rem; }
  .pcard { grid-template-columns:104px 1fr; gap:16px; padding:16px; border-radius:18px; }
  .pcard-photo { width:104px; height:104px; }
  .apply { grid-template-columns:1fr; } .apply-card { padding:40px 22px; }
  .faculty, .show, .how, .stats { padding-top:80px; } .apply-sec, .faq { padding-top:90px; }
  .foot-legal { margin-left:0; }
}
/* ---------- mobile sticky CTA ---------- */
.mcta { display:none; }
@media (max-width:760px) {
  .mcta {
    display:block;
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, var(--bg) 55%, rgba(6,7,11,.86) 85%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    transform:translateY(120%); transition:transform .35s var(--spring);
    pointer-events:none;
  }
  .mcta.show { transform:translateY(0); pointer-events:auto; }
  /* single centered button; scarcity sits inside it as a small second line */
  .mcta-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    width:100%; padding:9px 18px; line-height:1.16; text-align:center;
    box-shadow:0 10px 30px -8px rgba(var(--accent-rgb),.75);
  }
  .mcta-main { font-size:1rem; font-weight:700; }
  .mcta-sub { font-size:0.7rem; font-weight:500; opacity:.85; letter-spacing:.01em; }
  html[data-audience="professors"] .mcta-sub { display:none; }
  /* keep the footer clear of the fixed bar */
  .foot { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
  .marquee-track,.hero-3d{animation:none!important}
  .mcta{transition:none!important}
  /* static end-states for scroll-driven motion: full sigma curve, no scrub/parallax */
  .sigma-card{--sg:1}
  .parallax{transform:none!important}
  /* if reduced-motion is enabled at RUNTIME on an already-split headline, the killed kwRise would
     leave words at translateY(112%) inside .kw{overflow:hidden} → clipped. Pin them visible. */
  .hero h1 .kw>span{transform:none!important}
  /* STORY camera → readable stacked story (no pin, no zoom): each scene above its text panel */
  .story{height:auto}
  .story-pin{position:static;height:auto;overflow:visible}
  .story-stage{position:static}
  .beat{position:relative;inset:auto;opacity:1!important;border-bottom:1px solid var(--line)}
  .beat-scene{position:relative;height:42vh;transform:none!important}
  .beat-scene-sigma{height:auto;padding:34px 0}
  .beat-scene::after{display:none}
  .story-cinema .beat-scene::after{display:none}   /* cinema wash is more specific — kill it in stacked mode */
  .beat-panel{position:static;transform:none;width:auto;max-width:760px;margin:0 auto;padding:26px clamp(20px,5vw,40px) 46px}
  .story-hint{display:none}
}

/* =====================================================================
   MOBILE STORY = stacked static cards (no pinned camera, no scroll-jack).
   The cinematic scroll is desktop/laptop only; this leaves it untouched.
   Placed last so it wins the cascade over the pinned-layout rules above.
   ===================================================================== */
@media (max-width:760px){
  .story.story-cinema{ height:auto !important; }
  .story-cinema .story-pin{ position:static; height:auto; overflow:visible; background:#06070B; }
  .story-cinema .story-stage{ position:static; }
  .story-cinema .beat{ position:relative; inset:auto; display:block; opacity:1 !important;
    transform:none !important; border-bottom:1px solid var(--line); }
  .story-cinema .beat-scene{ position:relative; inset:auto; height:44vh; transform:none !important; }
  .story-cinema .beat-scene::after{ display:none; }
  .story-cinema .beat-scene img{ object-position:center; }
  .story-cinema .beat-scene canvas{ position:absolute; inset:0; }
  /* text sits below its image as a normal block, not a floating glass card */
  .story-cinema .beat-panel{ position:relative; right:auto; left:auto; top:auto; bottom:auto; width:auto;
    transform:none; background:none; border:none; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; padding:22px 20px 30px; opacity:1 !important; }
  .story-cinema .beat-tag{ margin-bottom:14px; }
  .story-cinema .story-hint{ display:none; }
}