/* =========================================================
   Nexus Education
   Theme: locked dark (brand mark's primary form is dark)
   Accent: #ff2e63 only. Lighter tints of it appear in one headline gradient,
   and a plum glow sits behind the hero; nothing else is coloured.
   Radius system: 10px on controls, 16px on cards, 14px on product frames
   Fonts: self-hosted variable files. Latin, plus a tiny macron-only
   file per family (see tools/vendor.mjs)
   ========================================================= */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/archivo-macrons.woff2") format("woff2");unicode-range:U+0100-0101,U+0112-0113,U+012A-012B,U+014C-014D,U+016A-016B}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/assets/fonts/manrope-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/assets/fonts/manrope-macrons.woff2") format("woff2");unicode-range:U+0100-0101,U+0112-0113,U+012A-012B,U+014C-014D,U+016A-016B}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/assets/fonts/jetbrains-mono-macrons.woff2") format("woff2");unicode-range:U+0100-0101,U+0112-0113,U+012A-012B,U+014C-014D,U+016A-016B}

:root{
  --void:#0b0912;
  --surface:#120f20;
  --surface-2:#171326;
  --line:rgba(244,241,250,.10);
  --line-strong:rgba(244,241,250,.18);

  --accent:#ff2e63;
  --accent-deep:#942045;
  --accent-dim:rgba(255,46,99,.14);

  --text:#eceaf4;
  --muted:#9d96b0;
  --muted-2:#8f87a6;

  --r:10px;
  --r-lg:16px;
  --r-frame:14px;
  --maxw:1320px;
  --gutter:clamp(20px,5vw,72px);

  --ease:cubic-bezier(.16,1,.3,1);

  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-padding-top:72px;background:var(--void)}

body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(15px,.45vw + 14px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}
p{margin:0}

::selection{background:var(--accent);color:#fff}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r);
}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--accent);color:#fff;padding:12px 18px;border-radius:var(--r);
  font-weight:600;text-decoration:none;transition:top .2s;
}
.skip:focus{top:16px}

.accent{color:var(--accent)}

.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin:0 0 20px;
}

/* ---------- ambience ---------- */
/* a fixed wash of light behind everything, so the dark is never flat */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(64vw 56vh at 8% -10%,rgba(255,46,99,.13),transparent 64%),
    radial-gradient(56vw 60vh at 100% 0%,rgba(126,64,190,.14),transparent 62%),
    radial-gradient(70vw 50vh at 50% 110%,rgba(148,32,69,.12),transparent 66%);
}
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none;
  background:rgba(244,241,250,.06);
}
.progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 14px rgba(255,46,99,.65);
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--accent);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  white-space:nowrap;
  padding:15px 30px;
  border:1px solid var(--bg);
  border-radius:var(--r);
  background:var(--bg);
  /* Near-black on the brand crimson reaches 5.3:1. White would only reach
     3.6:1, so the accent itself stays exact and the label carries the contrast. */
  color:var(--void);
  font-family:var(--f-body);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-120%);
  transition:transform .6s var(--ease);
}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 40px -6px rgba(255,46,99,.5)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--sm{padding:11px 20px;font-size:13.5px}
.btn--ghost{
  --bg:transparent;
  border-color:var(--line-strong);
  color:var(--text);
  background:rgba(244,241,250,.03);
  box-shadow:none;
}
.btn--ghost:hover{border-color:var(--accent);color:#fff;box-shadow:none;background:var(--accent-dim)}
.btn:not(.btn--ghost) .btn__spin{border-color:rgba(11,9,18,.3);border-top-color:var(--void)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  height:72px;
}
.nav__in{
  position:relative;z-index:0;
  max-width:var(--maxw);margin:0 auto;height:100%;
  padding:0 var(--gutter);
  display:flex;align-items:center;gap:40px;
}
/* The bar is a layer behind the links that fades in, so nothing in the nav
   moves when it appears. */
.nav__in::before{
  content:"";position:absolute;inset:9px max(6px,calc(var(--gutter) - 20px));z-index:-1;
  border:1px solid var(--line-strong);border-radius:16px;
  background:rgba(18,15,32,.74);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;transition:opacity .35s var(--ease);
}
.nav.is-stuck .nav__in::before{opacity:1}
.nav__brand{flex:0 0 auto;line-height:0}
.nav__brand img{width:150px;height:auto}
.nav__links{
  display:flex;align-items:center;gap:30px;
  margin-left:auto;
  font-size:14px;font-weight:600;
}
.nav__links a{
  position:relative;text-decoration:none;color:var(--muted);
  transition:color .25s var(--ease);
  padding:6px 0;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover,.nav__links a.is-current,.nav__links a[aria-current]{color:var(--text)}
.nav__links a:hover::after,.nav__links a.is-current::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}

.nav__burger{
  display:none;margin-left:auto;
  width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav__burger span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .3s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:72px 0 auto;z-index:69;
  background:rgba(11,9,18,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:20px var(--gutter) 34px;
}
.mobilemenu nav{display:flex;flex-direction:column}
.mobilemenu a{
  padding:16px 0;text-decoration:none;font-family:var(--f-display);
  font-size:22px;font-weight:700;letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
}
.mobilemenu a:last-child{color:var(--accent);border-bottom:0}

/* =========================================================
   HERO  (headline, then the product itself, already in use)
   ========================================================= */
.hero{position:relative;padding:clamp(104px,8.6vw,128px) 0 0;overflow:hidden}
.hero__field{position:absolute;inset:0 0 auto;width:100%;height:min(100dvh,900px);opacity:.4;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 30%,#000 30%,transparent);mask-image:radial-gradient(70% 70% at 50% 30%,#000 30%,transparent)}

.hero__in{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.pill{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;
  padding:7px 14px 7px 12px;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(244,241,250,.04);
  font-size:13px;font-weight:600;color:var(--muted);
}
.pill i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pill i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}

.hero__h1{font-size:clamp(40px,7.4vw,112px);letter-spacing:-.045em;line-height:.98;margin:0 0 22px}
/* each line rises out of its own mask; the padding keeps descenders from being clipped */
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero__h1 .line > span{display:inline-block}
.js .hero__h1 .line > span{transform:translateY(108%);animation:lineup 1s var(--ease) .12s forwards}
.js .hero__h1 .line + .line > span{animation-delay:.24s}
@keyframes lineup{to{transform:none}}
.grad{
  background:linear-gradient(100deg,var(--accent) 12%,#ff6a8f 58%,#ffa9be);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{
  max-width:62ch;color:var(--muted);
  font-size:clamp(16px,.5vw + 15px,19.5px);
  margin-bottom:34px;text-wrap:pretty;
}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* the product, tilted back and brought flat as the page scrolls */
.hero__stage{
  position:relative;z-index:2;
  max-width:calc(1200px + var(--gutter) * 2);
  margin:clamp(40px,5vw,68px) auto 0;padding:0 var(--gutter);
  perspective:1800px;
}
.hero__stage::before{
  content:"";position:absolute;inset:-10% 2% 30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 60% at 30% 40%,rgba(255,46,99,.34),transparent 70%),
    radial-gradient(46% 60% at 74% 46%,rgba(126,64,190,.3),transparent 70%);
  filter:blur(50px);
}
.hero__frame{transform-origin:50% 0}
@media (prefers-reduced-motion:no-preference){
  .js .hero__frame{transform:rotateX(13deg) scale(.95);will-change:transform}
}
/* a phone leans on the frame: the same storehouse has a door for whānau */
.hero__phone{
  position:absolute;z-index:3;right:calc(var(--gutter) - 26px);bottom:-7%;
  width:clamp(150px,16.5vw,216px);max-width:none;margin:0;
}
.hero__phone .phone__screen img{will-change:auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   PRODUCT FRAME  (a quiet browser chrome around a real screen)
   ========================================================= */
.frame{
  margin:0;overflow:hidden;
  /* the border is a gradient: lit along the top edge, crimson where it meets the glow */
  border:1px solid transparent;border-radius:var(--r-frame);
  background:linear-gradient(#15121f,#15121f) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.07) 38%,rgba(255,46,99,.3)) border-box;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 50px 120px -40px rgba(0,0,0,.9),
    0 40px 110px -50px rgba(255,46,99,.5);
}
.frame__bar{
  height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(#1c1829,#15121f);
}
.frame__bar i{width:8px;height:8px;border-radius:50%;background:rgba(244,241,250,.16)}
.frame__bar i:first-child{background:var(--accent)}
.frame__url{
  margin-left:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted-2);
}
.frame__view{background:#f4f4f4;line-height:0}
.frame__view img{width:100%;height:auto}
.frame__cap{
  padding:13px 16px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--muted-2);
}
.frame--card{border-radius:18px}

/* =========================================================
   FACTS
   ========================================================= */
.facts{border-block:1px solid var(--line);background:var(--surface);margin-top:clamp(70px,9vw,120px)}
.facts__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.fact{padding:46px 28px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact strong{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(52px,6.4vw,92px);line-height:.88;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.fact__label{
  display:block;margin:16px 0 8px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.fact__note{display:block;color:var(--muted);font-size:14px;line-height:1.55;max-width:26ch}

/* =========================================================
   MANIFESTO (editorial)
   ========================================================= */
.manifesto{padding:clamp(110px,14vw,190px) 0}
.manifesto__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.manifesto__h{
  font-size:clamp(32px,5.4vw,76px);
  line-height:1.06;
  max-width:19ch;
  margin-bottom:64px;
}
.manifesto__h [data-word]{display:inline-block;will-change:transform,opacity}
.manifesto__body{
  display:grid;grid-template-columns:repeat(2,1fr);gap:48px;
  margin-left:auto;max-width:900px;
  color:var(--muted);
}
.manifesto__body p{font-size:16.5px}
.manifesto__note{
  grid-column:1/-1;padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:12px !important;letter-spacing:.06em;color:var(--muted-2);
}

/* =========================================================
   STUDENT PAGE  (the real page scrolls inside the frame as you read)
   ========================================================= */
.scrub{position:relative;height:440vh;background:var(--surface);border-block:1px solid var(--line)}
.scrub__pin{position:sticky;top:0;height:100dvh;overflow:hidden;display:flex;align-items:center}
.scrub__in{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:72px var(--gutter) 0;
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(32px,4.4vw,72px);align-items:start;
}
.scrub__copy h2{font-size:clamp(28px,3.4vw,48px);max-width:14ch;margin-bottom:16px}
.scrub__lead{color:var(--muted);max-width:46ch;margin-bottom:26px;font-size:15.5px}
.scrub__steps{list-style:none;margin:0;padding:0}
.scrub__steps li{
  padding:13px 0 13px 22px;border-left:1px solid var(--line);
  opacity:.4;transition:opacity .45s var(--ease),border-color .45s var(--ease);
}
.scrub__steps li.is-on{opacity:1;border-left-color:var(--accent)}
.scrub__steps h3{font-size:17px;letter-spacing:-.012em;line-height:1.25}
.scrub__steps p{
  color:var(--muted);font-size:14px;line-height:1.6;
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease);
}
.scrub__steps p > span{overflow:hidden;min-height:0}
.scrub__steps li.is-on p{grid-template-rows:1fr;opacity:1;margin-top:8px}

.scrub__stage{position:relative}
.frame--tall .frame__view{height:min(66dvh,640px);overflow:hidden}
.scrub__img{will-change:transform}
.scrub__rail{position:absolute;right:-16px;top:36px;bottom:0;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.scrub__rail i{display:block;width:100%;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top}

/* =========================================================
   A DAY  (horizontal pan through one Tuesday)
   ========================================================= */
/* The section is as tall as the pan is long (set in JS from the track's real
   width); its content is position: sticky, so nothing is ever re-parented or
   switched to fixed, and there is no layout shift when the pan starts or ends. */
.day{position:relative;height:760vh}
.day__pin{position:sticky;top:0;height:100dvh;overflow:hidden}
.day__track{
  display:flex;align-items:center;gap:clamp(22px,3vw,46px);
  height:100%;padding:72px var(--gutter) 0;
  will-change:transform;
}
.panel{flex:0 0 auto}
.day__intro{flex:0 0 min(460px,86vw)}
.day__intro h2{font-size:clamp(34px,4.6vw,62px)}
.day__lead{color:var(--muted);margin-top:16px;max-width:34ch}
.day__hint{
  display:flex;align-items:center;gap:14px;margin-top:34px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
}
.day__hint i{display:block;width:64px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}

.panel--step{
  flex:0 0 min(1060px,88vw);
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(22px,3vw,46px);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  padding:clamp(22px,2.6vw,38px);
}
.panel__copy{display:flex;flex-direction:column;gap:14px}
.panel__time{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.panel--step h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.022em;line-height:1.1}
.panel--step p{color:var(--muted);font-size:15px}
.panel__shot .frame__view{max-height:min(60dvh,540px);overflow:hidden}
.panel__shot--narrow{width:min(100%,330px);justify-self:center}
.panel__shot--narrow .frame__view{max-height:min(66dvh,600px)}

.panel--end{
  flex:0 0 min(430px,86vw);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  padding-right:var(--gutter);
}
.panel--end h3{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.025em}
.panel--end p{color:var(--muted);max-width:36ch}

.day__clock{
  position:absolute;left:var(--gutter);bottom:30px;z-index:3;
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--f-mono);pointer-events:none;
}
.day__clock span{font-size:clamp(26px,2.8vw,40px);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.day__clock small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.day__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);z-index:3}
.day__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));transform:scaleX(0);transform-origin:left}

/* =========================================================
   MODULES  (the shelf: every module, grouped the way staff see them)
   ========================================================= */
.modules{padding:clamp(100px,12vw,170px) 0}
.modules__head{max-width:var(--maxw);margin:0 auto 56px;padding:0 var(--gutter)}
.modules__head h2{font-size:clamp(30px,4.4vw,60px);max-width:16ch;margin-bottom:18px}
.modules__lead{color:var(--muted);max-width:62ch}

.shelf{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;
}
.shelf__col{display:grid;gap:14px;align-items:start}
.shelf__group{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.shelf__group::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(255,46,99,.14),transparent 62%);
  transition:opacity .45s var(--ease);
}
.shelf__group:hover::before{opacity:1}
.shelf__group summary{
  position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:22px 24px 16px;list-style:none;
}
.shelf__group summary::-webkit-details-marker{display:none}
.shelf__group[open] summary{border-bottom:1px solid var(--line)}
/* On wide screens the groups are simply open; on a phone they fold. */
@media (min-width:681px){.shelf__group summary{pointer-events:none}}
.shelf__group h3{font-size:18px;letter-spacing:-.015em}
.shelf__group summary span{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.shelf__group dl{position:relative;margin:0;padding:8px 0 10px}
.shelf__group dl > div{padding:11px 24px;transition:background .25s var(--ease)}
.shelf__group dl > div:hover{background:rgba(244,241,250,.035)}
.shelf__group dt{font-family:var(--f-display);font-weight:700;font-size:14.5px;letter-spacing:-.005em}
.shelf__group dt em{
  margin-left:8px;padding:2px 6px;vertical-align:1px;
  border:1px solid var(--line-strong);border-radius:3px;
  font:500 9.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}
.shelf__group dd{margin:3px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55}

.retired{
  max-width:var(--maxw);margin:56px auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px 60px;align-items:start;
}
.retired h3{font-size:clamp(24px,2.6vw,36px);letter-spacing:-.025em;grid-row:span 2}
.retired p{color:var(--muted);max-width:54ch}
.retired ul{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.retired li{
  padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted);
  text-decoration:line-through;text-decoration-color:rgba(255,46,99,.75);text-decoration-thickness:1.5px;
}

/* =========================================================
   PORTALS  (students and whānau, on a phone)
   ========================================================= */
.portals{padding:clamp(100px,12vw,170px) 0;background:var(--surface);border-block:1px solid var(--line);overflow:hidden}
.portals__head{max-width:var(--maxw);margin:0 auto clamp(56px,7vw,96px);padding:0 var(--gutter)}
.portals__head h2{font-size:clamp(30px,4.2vw,56px);max-width:17ch;margin-bottom:18px}
.portals__head > p:last-child{color:var(--muted);max-width:56ch}
.portals__grid{
  max-width:1160px;margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);align-items:start;
}
.portal{display:flex;flex-direction:column;gap:30px}
.portal--lift{margin-top:-34px}
.phone{
  position:relative;width:100%;max-width:290px;margin:0 auto;aspect-ratio:390/790;
  padding:9px;border-radius:38px;
  background:linear-gradient(160deg,#2c2540,#15121f 60%);
  border:1px solid var(--line-strong);
  box-shadow:0 44px 90px -34px rgba(0,0,0,.9),0 30px 80px -44px rgba(255,46,99,.45);
}
.phone__screen{height:100%;border-radius:30px;overflow:hidden;background:#fff;line-height:0;isolation:isolate}
.phone__screen img{width:100%;height:auto;will-change:transform}
.portal__copy h3{font-size:20px;letter-spacing:-.018em;margin-bottom:10px}
.portal__copy p{color:var(--muted);font-size:14.5px;line-height:1.65}
.portals__list{
  max-width:1160px;margin:clamp(48px,6vw,80px) auto 0;padding:0 var(--gutter);
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
}
.portals__list li{
  padding:9px 16px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--muted);
}

/* =========================================================
   ORBIT (integrations)
   ========================================================= */
.orbit{
  overflow:hidden; /* the rotating rings' corners must not widen the page */
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(100px,12vw,170px) var(--gutter);
  display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center;
}
.orbit__copy h2{font-size:clamp(30px,4.2vw,56px);max-width:15ch;margin-bottom:20px}
.orbit__copy > p{color:var(--muted);max-width:48ch;margin-bottom:40px}
.orbit__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.orbit__list li{
  display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline;
  padding:17px 0;border-top:1px solid var(--line);
}
.orbit__list li:last-child{border-bottom:1px solid var(--line)}
.orbit__list strong{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.orbit__list span{color:var(--muted);font-size:14.5px}

.orbit__vis{position:relative;aspect-ratio:1;display:grid;place-items:center}
.orbit__ring{
  position:absolute;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;
}
.orbit__ring--1{inset:30%;animation:spin 18s linear infinite}
.orbit__ring--2{inset:16%;border-color:rgba(255,46,99,.2);animation:spin 30s linear infinite reverse}
.orbit__ring--3{inset:2%;animation:spin 46s linear infinite}
.node{
  position:absolute;top:-5px;left:calc(50% - 5px);
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px rgba(255,46,99,.9);
}
.node--b{top:auto;bottom:-5px;background:var(--text);box-shadow:0 0 12px rgba(244,241,250,.6)}
.orbit__core{width:15%;filter:drop-shadow(0 0 34px rgba(255,46,99,.55))}

/* =========================================================
   SECURITY
   ========================================================= */
.sec{background:var(--surface);border-block:1px solid var(--line)}
.sec__in{
  max-width:var(--maxw);margin:0 auto;padding:clamp(90px,11vw,150px) var(--gutter);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;
}
.sec__lead h2{font-size:clamp(28px,3.6vw,48px);max-width:14ch}
.sec__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 40px}
.sec__item h3{font-size:17.5px;margin-bottom:12px;letter-spacing:-.01em}
.sec__item p{color:var(--muted);font-size:14.5px;line-height:1.68}

/* =========================================================
   ROLLOUT (sticky stack)
   ========================================================= */
.rollout{padding:clamp(100px,12vw,160px) 0 0}
.rollout__head{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  margin-bottom:40px;
}
.rollout__head h2{font-size:clamp(30px,4.4vw,60px);max-width:14ch;margin-bottom:16px}
.rollout__head p{color:var(--muted);max-width:46ch}

.stack{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.stack__card{
  position:sticky;top:12dvh;
  min-height:76dvh;
  display:flex;align-items:center;
  will-change:transform;
}
.stack__in{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,#1d1430,var(--surface) 70%);
  padding:clamp(34px,5vw,70px);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.stack__n{display:block;margin-bottom:18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--accent)}
.stack__in h3{font-size:clamp(26px,3.4vw,46px);margin-bottom:18px;max-width:18ch}
.stack__in p{color:var(--muted);max-width:60ch;font-size:16.5px}

/* =========================================================
   QUESTIONS
   ========================================================= */
.faq{padding:clamp(100px,12vw,160px) 0}
.faq__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start;
}
.faq__lead{position:sticky;top:120px}
.faq__lead h2{font-size:clamp(28px,3.6vw,48px);max-width:12ch}
.faq__list{margin:0}
.faq__list > div{padding:26px 0;border-top:1px solid var(--line)}
.faq__list > div:last-child{border-bottom:1px solid var(--line)}
.faq__list dt{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.015em;line-height:1.25;margin-bottom:10px}
.faq__list dd{margin:0;color:var(--muted);font-size:15px;max-width:62ch}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{padding:clamp(100px,12vw,170px) 0}
.contact__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start;
}
.contact__copy h2{font-size:clamp(30px,4.2vw,56px);max-width:12ch;margin-bottom:20px}
.contact__copy p{color:var(--muted);max-width:44ch;margin-bottom:28px}
.contact__mail{
  font-family:var(--f-mono);font-size:14px;color:var(--accent);
  text-decoration:none;border-bottom:1px solid rgba(255,46,99,.4);
  padding-bottom:3px;
}
.contact__mail:hover{border-bottom-color:var(--accent)}

.form{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--text)}
.field input,.field textarea{
  width:100%;
  font-family:var(--f-body);font-size:15px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  padding:14px 16px;
  transition:border-color .25s var(--ease),background .25s var(--ease);
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:hover,.field textarea:hover{border-color:rgba(244,241,250,.3)}
.field input:focus,.field textarea:focus{border-color:var(--accent);background:var(--surface-2);outline-offset:1px}
.field.is-bad input,.field.is-bad textarea{border-color:#ff5b5b}
.err{
  font-size:12.5px;color:#ff8080;min-height:0;
  opacity:0;transform:translateY(-3px);
  transition:opacity .2s,transform .2s;
}
.field.is-bad .err{opacity:1;transform:none}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.form__foot{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.form__status{font-size:13.5px;color:var(--muted)}
.form__status.is-ok{color:#5ce6a8}
.form__status.is-bad{color:#ff8080}

.btn__spin{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  display:none;animation:rot .7s linear infinite;
}
.btn.is-busy{pointer-events:none;opacity:.75}
.btn.is-busy .btn__spin{display:block}
@keyframes rot{to{transform:rotate(360deg)}}
.form__status a{color:var(--accent)}
.form__fine{flex-basis:100%;font-size:12.5px;color:var(--muted-2)}
.form__fine a{color:var(--muted);text-underline-offset:3px}
.form__fine a:hover{color:var(--text)}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{border-top:1px solid var(--line);background:var(--surface)}
.foot__in{
  max-width:var(--maxw);margin:0 auto;padding:60px var(--gutter);
  display:grid;grid-template-columns:auto 1fr;gap:28px 60px;align-items:center;
}
.foot__logo{width:160px}
.foot__nav{display:flex;gap:28px;justify-content:flex-end;flex-wrap:wrap;font-size:14px}
.foot__nav a{color:var(--muted);text-decoration:none;transition:color .25s}
.foot__nav a:hover{color:var(--text)}
.foot__meta{grid-column:1/-1;color:var(--muted-2);font-size:13px;line-height:1.7;max-width:96ch;padding-top:24px;border-top:1px solid var(--line)}

/* =========================================================
   LEGAL PAGE
   ========================================================= */
.legal{max-width:760px;margin:0 auto;padding:150px var(--gutter) 110px}
.legal h1{font-size:clamp(34px,5vw,58px);margin-bottom:14px}
.legal__meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--muted-2);margin-bottom:54px}
.legal h2{font-size:22px;letter-spacing:-.018em;margin:46px 0 12px}
.legal p,.legal li{color:var(--muted);font-size:16px}
.legal p + p{margin-top:14px}
.legal ul{margin:12px 0 0;padding-left:20px;display:grid;gap:8px}
.legal a{color:var(--text);text-decoration-color:rgba(255,46,99,.6);text-underline-offset:3px}
.legal a:hover{text-decoration-color:var(--accent)}
.legal__back{display:inline-block;margin-top:54px}

/* =========================================================
   NOT FOUND
   ========================================================= */
.nf{min-height:100dvh;display:grid;place-items:center;padding:40px var(--gutter);text-align:center}
.nf__in{max-width:52ch;display:grid;gap:26px;justify-items:center}
.nf__code{font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--accent)}
.nf h1{font-size:clamp(32px,5vw,58px)}
.nf p{color:var(--muted)}
.nf__mark{width:92px;opacity:.9;filter:drop-shadow(0 0 30px rgba(255,46,99,.45))}
.nav__back{margin-left:auto}

/* a quiet link inside running copy */
.textlink{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--text);font-weight:600;font-size:14px;text-decoration:none;
  border-bottom:1px solid rgba(255,46,99,.5);padding-bottom:2px;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.textlink::after{content:"";width:6px;height:6px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);transform:rotate(45deg);transition:transform .3s var(--ease)}
.textlink:hover{border-bottom-color:var(--accent);color:#fff}
.textlink:hover::after{transform:translateX(3px) rotate(45deg)}
.portal__more{margin-top:14px}
.row__copy > p:has(.textlink){margin-top:24px}

/* =========================================================
   CLIPS  (short recordings of the product in use)
   The still underneath is the real content and carries the alt
   text. The video is layered on top and only fetched when the
   clip is on screen, motion is welcome and data is not being saved.
   ========================================================= */
.clip{position:relative;line-height:0;background:#f4f4f4}
.clip > picture img{width:100%;height:auto}
.clip video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  opacity:0;transition:opacity .5s var(--ease);
}
.clip.is-live video{opacity:1}
.clip__btn{
  position:absolute;right:10px;bottom:10px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px 7px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  background:rgba(11,9,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font:600 11.5px/1 var(--f-body);letter-spacing:.02em;cursor:pointer;
  opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease),transform .25s var(--ease),background .25s;
}
.clip__btn::before{content:"";width:8px;height:9px;border-inline:2.5px solid currentColor}
.clip__btn[data-state="paused"]::before{width:0;height:0;border:0;border-left:8px solid currentColor;border-block:5px solid transparent}
.clip:hover .clip__btn,.clip__btn:focus-visible,.clip.is-paused .clip__btn{opacity:1;transform:none}
.clip__btn:hover{background:rgba(11,9,18,.9)}
@media (hover:none){.clip__btn{opacity:1;transform:none}}
.phone .clip{height:100%;background:#fff}
.phone .clip > picture img{height:100%;object-fit:cover;object-position:top}
.phone .clip__btn{right:50%;transform:translate(50%,4px);bottom:12px}
.phone .clip:hover .clip__btn,.phone .clip__btn:focus-visible,.phone .clip.is-paused .clip__btn{transform:translate(50%,0)}
@media (hover:none){.phone .clip__btn{transform:translate(50%,0)}}

/* =========================================================
   GO DEEPER  (the four parts that have their own page)
   ========================================================= */
.deeper{padding:clamp(100px,12vw,170px) 0 clamp(40px,5vw,70px)}
.deeper__head{max-width:var(--maxw);margin:0 auto clamp(40px,5vw,64px);padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:20px 60px;align-items:end}
.deeper__head .eyebrow{grid-column:1/-1;margin-bottom:0}
.deeper__head h2{font-size:clamp(30px,4.4vw,60px);max-width:14ch}
.deeper__head p:last-child{color:var(--muted);max-width:50ch;padding-bottom:6px}
.deeper__grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

.dcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  text-decoration:none;color:inherit;
  transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.dcard::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,46,99,.16),transparent 62%);
  transition:opacity .45s var(--ease);
}
.dcard:hover{border-color:rgba(255,46,99,.45);transform:translateY(-4px);box-shadow:0 34px 80px -40px rgba(255,46,99,.5)}
.dcard:hover::before{opacity:1}
.dcard__shot{
  position:relative;aspect-ratio:16/8.6;overflow:hidden;line-height:0;
  margin:14px 14px 0;border-radius:10px;border:1px solid var(--line);background:#f4f4f4;
}
.dcard__shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform 1.1s var(--ease)}
.dcard:hover .dcard__shot img{transform:scale(1.035)}
.dcard__shot--phones{background:radial-gradient(80% 90% at 50% 0%,#2a1a3d,#15121f);display:flex;justify-content:center;gap:5%;padding:6% 8% 0}
.dcard__shot--phones picture{flex:0 0 31%;border-radius:14px 14px 0 0;overflow:hidden;border:1px solid var(--line-strong);border-bottom:0;box-shadow:0 20px 40px -10px rgba(0,0,0,.7)}
.dcard__shot--phones picture:nth-child(2){transform:translateY(-6%)}
.dcard__copy{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:end;padding:22px 26px 26px}
.dcard h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.022em}
.dcard p{grid-column:1;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:46ch}
.dcard__go{
  grid-column:2;grid-row:1 / span 2;align-self:end;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;transition:background .35s var(--ease),border-color .35s var(--ease),transform .5s var(--ease);
}
.dcard__go::before{content:"";width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateX(-2px) rotate(45deg)}
.dcard:hover .dcard__go{background:var(--accent);border-color:var(--accent);color:var(--void);transform:translateX(4px)}

/* =========================================================
   MODULE PAGES  (/tracking, /exams, /trips, /portals)
   ========================================================= */
.shero{position:relative;padding:clamp(120px,12vw,168px) 0 clamp(60px,8vw,110px);overflow:hidden}
.shero::before{
  content:"";position:absolute;inset:0 0 auto;height:720px;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 60% at 78% 34%,rgba(255,46,99,.2),transparent 70%),radial-gradient(40% 60% at 96% 60%,rgba(126,64,190,.2),transparent 70%);
  filter:blur(30px);
}
.shero__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(34px,5vw,84px);align-items:center;
}
.crumb{display:flex;gap:10px;align-items:center;margin:0 0 22px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.crumb a{color:var(--muted-2);text-decoration:none;transition:color .25s}
.crumb a:hover{color:var(--text)}
.crumb span{color:var(--accent)}
.shero h1{font-size:clamp(34px,4.5vw,62px);letter-spacing:-.04em;line-height:1.02}
.shero__lead{color:var(--muted);font-size:clamp(16px,.5vw + 15px,19px);max-width:46ch;margin:24px 0 34px;text-wrap:pretty}
.shero__cta{display:flex;flex-wrap:wrap;gap:14px}
.shero__media{position:relative;min-width:0}
.shero__media .frame__cap{font-size:12px}
.duo{position:relative;padding-bottom:9%}
.duo .phone{position:absolute;right:-3%;bottom:0;width:clamp(140px,31%,210px);max-width:none;margin:0;z-index:2}
.pair{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3vw,34px)}
.pair .phone{flex:1 1 0;max-width:250px;margin:0}
.pair .phone:first-child{margin-top:44px}

.points{border-block:1px solid var(--line);background:var(--surface)}
.points__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.point{padding:34px 28px;border-left:1px solid var(--line)}
.point:first-child{border-left:0;padding-left:0}
.point h2{font-size:17px;letter-spacing:-.012em;line-height:1.25;margin-bottom:8px}
.point p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:36ch}

.rows{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,4vw,60px) var(--gutter) clamp(50px,6vw,90px)}
.row{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,84px);align-items:center;
  padding:clamp(54px,7vw,104px) 0;border-top:1px solid var(--line);
}
.row:first-child{border-top:0}
.row:nth-child(even) .row__copy{order:2}
.row--phone{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.row__n{display:block;margin-bottom:18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--accent)}
.row h2{font-size:clamp(26px,3.1vw,42px);letter-spacing:-.03em;line-height:1.05;max-width:16ch;margin-bottom:18px}
.row__copy > p{color:var(--muted);max-width:50ch}
.row__copy > p + p{margin-top:14px}
.ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px;max-width:50ch}
.ticks li{position:relative;padding-left:24px;font-size:15px;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:2px;top:.52em;width:9px;height:5px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.row__media{min-width:0}
.row__media .frame__view{max-height:560px;overflow:hidden}
.row__media .phone{max-width:280px}

.caps{background:var(--surface);border-block:1px solid var(--line)}
.caps__in{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,10vw,140px) var(--gutter)}
.caps__in > h2{font-size:clamp(28px,3.6vw,48px);max-width:18ch;margin-bottom:clamp(36px,5vw,60px)}
.caps__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
.caps__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cap{padding:26px 0;border-top:1px solid var(--line)}
.cap h3{font-size:17px;letter-spacing:-.012em;line-height:1.25;margin-bottom:9px}
.cap p{color:var(--muted);font-size:14.5px;line-height:1.65}

.more{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,10vw,140px) var(--gutter) 0}
.more > h2{font-size:clamp(24px,2.8vw,36px);margin-bottom:30px}
.more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.more .dcard__copy{padding:26px 24px}
.more .dcard h3{font-size:20px}

.cta{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,10vw,140px) var(--gutter)}
.cta__in{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px 60px;align-items:center;
  padding:clamp(34px,5vw,72px);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:linear-gradient(140deg,#1d1430,var(--surface) 62%);
}
.cta__in::before{content:"";position:absolute;right:-10%;top:-60%;width:60%;aspect-ratio:1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,46,99,.3),transparent);filter:blur(20px)}
.cta h2{position:relative;font-size:clamp(28px,3.8vw,52px);max-width:16ch}
.cta p{position:relative;color:var(--muted);max-width:48ch;margin-top:14px}
.cta .btn{position:relative}

/* =========================================================
   REVEAL BASE (JS adds .is-in). Without JS everything stays visible.
   ========================================================= */
.js [data-rise],.js [data-cell]{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf__col:last-child{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .shero__in{grid-template-columns:1fr}
  .shero__media{max-width:760px}
  .caps__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deeper__head{grid-template-columns:1fr}
  .orbit,.sec__in,.contact__in,.faq__in{grid-template-columns:1fr;gap:52px}
  .faq__lead{position:static}
  .orbit__vis{max-width:420px;margin:0 auto;width:100%}
  .retired{grid-template-columns:1fr}
  .retired h3{grid-row:auto;margin-bottom:10px}
}
@media (max-width:980px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}
@media (max-width:900px){
  .hero__phone{display:none}
  .row,.row--phone{grid-template-columns:1fr;gap:30px}
  .row:nth-child(even) .row__copy{order:0}
  .row h2{max-width:22ch}
  .points__in{grid-template-columns:1fr}
  .point{border-left:0;border-top:1px solid var(--line);padding:26px 0}
  .point:first-child{border-top:0}
  .more__grid,.deeper__grid{grid-template-columns:1fr}
  .cta__in{grid-template-columns:1fr}
  /* the pinned student page becomes an ordinary section */
  .scrub{height:auto}
  .scrub__pin{position:static;height:auto;overflow:visible;display:block}
  .scrub__in{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:clamp(80px,12vw,110px)}
  .scrub__copy{display:contents}
  .scrub__stage{order:2;margin:8px 0 34px}
  .scrub__steps{order:3}
  .scrub__steps li{opacity:1;border-left-color:rgba(255,46,99,.5)}
  .scrub__steps p{grid-template-rows:1fr;opacity:1;margin-top:8px}
  .frame--tall .frame__view{height:auto}
  .scrub__rail{display:none}

  /* the pan becomes a column */
  .day{height:auto !important}
  .day__pin{position:static;height:auto;overflow:visible}
  .day__track{height:auto;flex-direction:column;align-items:stretch;gap:16px;padding-block:clamp(80px,12vw,110px)}
  .day__intro{flex:1 1 auto;padding-bottom:18px}
  .day__hint,.day__clock,.day__bar{display:none}
  .panel--step{flex:1 1 auto;grid-template-columns:1fr;gap:22px;padding:24px 20px}
  .panel__shot .frame__view,.panel__shot--narrow .frame__view{max-height:none}
  .panel__shot--narrow{width:min(100%,360px)}
  .panel--end{flex:1 1 auto;padding:30px 0 0}

  .facts__in{grid-template-columns:repeat(2,1fr)}
  .fact{padding:34px 22px}
  .fact:nth-child(odd){border-left:0;padding-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}

  /* phones swipe sideways */
  .portals__grid{
    display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .portals__grid::-webkit-scrollbar{display:none}
  .portal{flex:0 0 min(78vw,300px);scroll-snap-align:center}
  .portal--lift{margin-top:0}
}
@media (max-width:860px){
  .manifesto__body{grid-template-columns:1fr;gap:22px}
  .sec__grid{grid-template-columns:1fr;gap:34px}
  .foot__in{grid-template-columns:1fr;gap:24px}
  .foot__nav{justify-content:flex-start}
}
@media (max-width:680px){
  .hero{padding-top:104px}
  .pill{font-size:12px;margin-bottom:22px}
  .hero__sub{margin-bottom:28px}
  .hero__cta{gap:10px;align-self:stretch}
  .hero__cta .btn{flex:1 1 0;padding-inline:14px}
  .hero__stage{margin-top:40px}
  .shero{padding-top:108px}
  .shero__cta .btn{flex:1 1 0;padding-inline:14px}
  .caps__grid{grid-template-columns:1fr}
  .dcard__copy{padding:18px 20px 22px}
  .duo .phone{width:34%;right:-2%}
  .pair .phone:first-child{margin-top:28px}
  .frame__bar{height:28px;padding:0 10px;gap:5px}
  .frame__bar i{width:6px;height:6px}
  .frame__url{font-size:9px}
  /* phone-width captures are tall: show the top of each and fade the rest out */
  .panel__shot .frame__view,.frame--tall .frame__view,.hero__frame .frame__view,.row__media .frame__view,.shero__media .frame__view{position:relative;max-height:460px;overflow:hidden}
  .hero__frame .frame__view{max-height:520px}
  .panel__shot .frame__view::after,.frame--tall .frame__view::after,.hero__frame .frame__view::after,.row__media .frame__view::after,.shero__media .frame__view::after{
    content:"";position:absolute;inset:auto 0 0;height:70px;pointer-events:none;z-index:1;
    background:linear-gradient(transparent,rgba(21,18,31,.92));
  }
  .panel__shot--narrow .frame__view{max-height:none}
  .panel__shot--narrow .frame__view::after{display:none}
  .shelf,.shelf__col:last-child{grid-template-columns:1fr}
  .shelf__group summary{cursor:pointer;padding:20px 20px 18px;align-items:center}
  .shelf__group summary span{display:inline-flex;align-items:center;gap:12px}
  .shelf__group summary span::after{
    content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
    transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
  }
  .shelf__group[open] summary span::after{transform:rotate(-135deg) translateY(-2px)}
  .shelf__group dl > div{padding-inline:20px}
  .retired ul{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .orbit__list li{grid-template-columns:1fr;gap:4px}
  .stack__card{min-height:0;position:static;margin-bottom:14px}
  .rollout{padding-bottom:30px}
  .legal{padding-top:120px}
}
/* short, wide screens: keep the pinned sections inside the viewport */
@media (min-width:901px) and (max-height:740px){
  .scrub__lead{display:none}
  .scrub__steps li{padding-block:9px}
  .frame--tall .frame__view{height:62dvh}
}

/* =========================================================
   REDUCED MOTION  (everything collapses to a static, readable page)
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-rise],.js [data-cell]{opacity:1;transform:none}
  .orbit__ring{animation:none}
  .js .hero__h1 .line > span{transform:none;animation:none}
  .pill i::after{display:none}
  .dcard,.dcard__shot img{transition:none}
  .hero__field{display:none}
  .scrub{height:auto}
  .scrub__pin{position:static;height:auto;overflow:visible;display:block}
  .scrub__in{padding-block:clamp(80px,12vw,110px)}
  .scrub__steps li{opacity:1}
  .scrub__steps p{grid-template-rows:1fr;opacity:1;margin-top:8px}
  .frame--tall .frame__view{height:auto}
  .scrub__rail{display:none}
  .day{height:auto !important}
  .day__pin{position:static;height:auto;overflow:visible}
  .day__track{height:auto;flex-direction:column;align-items:stretch;gap:16px;padding-block:90px;transform:none !important}
  .day__hint,.day__clock,.day__bar{display:none}
  .panel--step{flex:1 1 auto}
  .stack__card{position:static;min-height:0;margin-bottom:14px;transform:none !important;opacity:1 !important}
}

@media (prefers-reduced-transparency:reduce){
  .nav__in::before{background:rgba(18,15,32,.98);backdrop-filter:none;-webkit-backdrop-filter:none}
  .clip__btn{background:#0b0912;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mobilemenu{backdrop-filter:none}
}