/* =========================================================================
   OPERATION FUTURES — DESIGN SYSTEM v2  "The Dossier"

   The product diagnoses you and assigns you a room. So the site reads like a
   precise briefing document: editorial serif, monospace instrumentation,
   hairline rules, and a lot of quiet space. Cyan is the signal colour. The
   warm sand accent is reserved for ONE thing — the verdict — so it never
   loses meaning.

   Fonts are self-hosted. No external requests anywhere.
   ========================================================================= */

@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight:600 900; font-style:normal; font-display:swap;
}

:root{
  /* canvas — very slightly blue, never pure black */
  --bg:#06070B;
  --surface:#0A0C12;
  --surface-2:#0F1118;
  --surface-3:#151822;

  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);

  --ink:#F5F6FA;
  --ink-soft:#9AA0B5;
  --ink-dim:#7C839C;   /* AA-safe on every surface: 5.35 on bg, 4.71 on the raised card */

  /* signal */
  --accent:#4FD8FF;
  --accent-deep:#12A9D6;
  --accent-ink:#04121A;
  --accent-tint:rgba(79,216,255,.09);
  --accent-line:rgba(79,216,255,.32);

  /* the verdict — used ONLY for the survey result. Nowhere else. */
  --gold:#E8B87A;
  --gold-tint:rgba(232,184,122,.09);
  --gold-line:rgba(232,184,122,.30);

  --green:#5BD48D;
  --green-tint:rgba(91,212,141,.07);
  --green-line:rgba(91,212,141,.24);

  --danger:#FF6B70;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --wrap:1140px;
  --pad:110px;
  --nav-h:68px;
}
@media (max-width:760px){ :root{ --pad:64px; --nav-h:58px; } }

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

/* Very fine grain, so large dark areas never look like flat plastic.
   SVG data URI — no image request, ~1px cost. */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
body > *{ position:relative; z-index:2; }

/* ---------- type ---------- */
h1,h2{ font-family:var(--display); font-weight:740; margin:0; text-wrap:balance; font-optical-sizing:auto; }
h1{ font-size:clamp(38px,6.6vw,70px); letter-spacing:-.028em; line-height:1.02; }
/* em-based so the measure scales with the headline itself. Never use `ch`
   here — ch resolves against the body font, not the display size. */
.hero h1{ max-width:12em; }
.hero .lede{ max-width:46ch; }
h2{ font-size:clamp(27px,4vw,44px); letter-spacing:-.022em; line-height:1.08; }
h3,h4{ font-family:var(--sans); margin:0; font-weight:650; letter-spacing:-.012em; }
h3{ font-size:19px; line-height:1.35; }
h4{ font-size:16.5px; line-height:1.4; }
p{ margin:0; }
img,video{ max-width:100%; display:block; }

/* the accented word inside a headline */
h1 em, h2 em, .accent-word{
  font-style:normal; color:var(--accent); font-weight:860;
}

a{ color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--accent); color:var(--accent-ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink); padding:12px 18px;
  border-radius:0 0 10px 0; font-weight:800;
}
.skip:focus{ left:0; }

/* ---------- primitives ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:28px; }
@media (max-width:760px){ .wrap{ padding-inline:20px; } }

section{ padding-block:var(--pad); }
.rule{ border-top:1px solid var(--line); }

.measure{ max-width:66ch; }
.measure-tight{ max-width:52ch; }
.center{ text-align:center; margin-inline:auto; }

.muted{ color:var(--ink-soft); }
.small{ font-size:15px; }
.tiny{ font-size:13.5px; }
.lede{ font-size:19.5px; color:var(--ink-soft); line-height:1.68; letter-spacing:0; }
@media (max-width:760px){ .lede{ font-size:17.5px; } }

/* ---------- instrumentation: mono labels + numbered section heads ------- */
.label{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-dim);
}
.label-accent{ color:var(--accent); }
.label-gold{ color:var(--gold); }
.label-dot::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:currentColor; margin-right:10px; vertical-align:middle;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

/* section header: mono index, hairline rule, then the heading */
.sec-head{ display:grid; gap:22px; margin-bottom:44px; }
.sec-index{
  display:flex; align-items:center; gap:16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-dim);
}
.sec-index::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent);
}
.sec-index b{ color:var(--accent); font-weight:600; }

.stack{ display:grid; gap:16px; }
.stack-lg{ display:grid; gap:32px; }
.stack-sm{ display:grid; gap:10px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:700; text-decoration:none; cursor:pointer;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  letter-spacing:-.01em;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease,
             background .16s ease, border-color .16s ease, color .16s ease;
}
@media (prefers-reduced-motion:reduce){ .btn{ transition:none; } }

.btn-primary{
  background:linear-gradient(180deg,#6FE2FF,var(--accent));
  color:var(--accent-ink); border-color:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 30px -12px rgba(79,216,255,.65);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 16px 40px -14px rgba(79,216,255,.8); }
.btn-primary:active{ transform:translateY(0); }

.btn-secondary{ background:transparent; border-color:var(--line-2); color:var(--ink); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }

.btn-lg{ padding:18px 36px; font-size:17px; }
.btn-block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.35; cursor:not-allowed; }
.btn[disabled]:hover{ transform:none; box-shadow:none; }

.textlink{ color:var(--accent); font-weight:600; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(6,7,11,.72);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--wrap); margin:0 auto; padding:0 28px;
  height:var(--nav-h); display:flex; align-items:center; gap:16px;
}
@media (max-width:760px){ .nav-in{ padding:0 16px; gap:10px; } }

.wordmark{
  font-family:var(--sans); font-weight:700; letter-spacing:.01em; font-size:14px;
  color:var(--ink); text-decoration:none; white-space:nowrap; flex:none;
  text-transform:uppercase;
}
.nav-links{ display:flex; gap:2px; margin-inline:auto; }
.nav-links a{
  color:var(--ink-soft); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:8px 15px; border-radius:8px; transition:color .14s ease, background .14s ease;
}
.nav-links a:hover{ background:var(--surface-2); color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); background:var(--surface-2); }

.nav-right{ display:flex; align-items:center; gap:10px; flex:none; margin-left:auto; }
.nav-links + .nav-right{ margin-left:0; }
.btn-join{
  padding:9px 22px; font-size:14px; border-radius:999px; font-weight:700;
  background:linear-gradient(180deg,#6FE2FF,var(--accent));
  border-color:var(--accent); color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 18px -8px rgba(79,216,255,.65);
}
.btn-join:hover{ transform:translateY(-1px); }

.hamburger{
  display:none; width:40px; height:40px; padding:0; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--line-2); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.hamburger span{ display:block; width:15px; height:1.5px; background:var(--ink); border-radius:2px; }
.nav-menu{ border-top:1px solid var(--line); background:var(--surface); padding:8px 16px 14px; }
.nav-menu a{
  display:block; padding:15px 8px; color:var(--ink); text-decoration:none;
  font-weight:600; border-bottom:1px solid var(--line);
}
.nav-menu a:last-child{ border-bottom:0; }

@media (max-width:760px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  /* .btn-join stays visible on purpose */
}
@media (min-width:761px){ .nav-menu{ display:none !important; } }

/* ---------- hero ---------- */
.hero{ position:relative; padding-block:clamp(64px,11vw,132px) var(--pad); overflow:hidden; }
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-30%; left:-10%; width:70%; height:120%;
  background:radial-gradient(closest-side, rgba(79,216,255,.14), transparent 70%);
  filter:blur(20px);
}
.hero > *{ position:relative; z-index:1; }

/* ---------- cards ---------- */
.card{
  position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:28px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
/* hairline highlight along the top edge */
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

a.card{ text-decoration:none; color:inherit; display:block; }
a.card:hover{ border-color:var(--accent-line); background:var(--surface-3); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ a.card:hover{ transform:none; } }
.card-more{ color:var(--accent); font-weight:600; font-size:14.5px; }

.monogram{
  width:46px; height:46px; border-radius:12px; flex:none;
  background:var(--accent-tint); color:var(--accent);
  border:1px solid var(--accent-line);
  display:grid; place-items:center;
  font-family:var(--display); font-weight:760; font-size:19px;
}

/* ---------- callouts ---------- */
.pull{
  position:relative; background:var(--green-tint); border:1px solid var(--green-line);
  border-radius:16px; padding:36px; color:var(--ink);
}
.pull .big{
  font-family:var(--display); font-size:clamp(22px,3vw,32px); font-weight:720;
  letter-spacing:-.025em; line-height:1.14; color:var(--ink);
}
.pull p{ color:var(--ink-soft); }
.pull strong{ color:var(--ink); }
@media (max-width:620px){ .pull{ padding:26px 22px; } }

.note{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:24px; }

.stamp{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-weight:500; letter-spacing:.26em; font-size:13px;
  color:var(--accent); text-transform:uppercase;
}
.stamp::before,.stamp::after{ content:""; width:52px; height:1px; background:var(--accent-line); }

/* the offer panel */
.dark{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 15% 0%, rgba(79,216,255,.09), transparent 55%), var(--surface-2);
  border:1px solid var(--line-2);
  border-radius:22px; padding:56px;
}
.dark::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-line),transparent);
}
.dark p{ color:var(--ink-soft); }
.dark strong{ color:var(--ink); }
@media (max-width:620px){ .dark{ padding:32px 24px; border-radius:18px; } }

.price-tag{
  font-family:var(--display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(40px,6.2vw,68px); line-height:1; color:var(--ink);
  display:flex; align-items:baseline; gap:2px;
}
/* The currency mark is set as an editorial superior — Fraunces's $ is too
   heavy to sit inline with the figures at this weight. */
.price-tag .cur{
  font-size:.42em; font-weight:700; color:var(--ink-soft);
  align-self:flex-start; margin-top:.22em; letter-spacing:0;
}
.price-tag .per{
  font-family:var(--sans); font-size:17px; font-weight:500;
  color:var(--ink-soft); letter-spacing:0; margin-left:8px;
}

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }
.step{
  position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:26px 24px;
}
.step .num{
  font-family:var(--mono); font-size:12px; letter-spacing:.15em;
  color:var(--accent); font-weight:600; display:block; margin-bottom:4px;
}

/* ---------- rows ---------- */
.rows{ display:grid; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface-2); }
.row{ display:grid; grid-template-columns:250px 1fr; gap:26px; padding:26px 28px; border-bottom:1px solid var(--line); transition:background .16s ease; }
.row:last-child{ border-bottom:0; }
.row:hover{ background:var(--surface-3); }
@media (max-width:700px){ .row{ grid-template-columns:1fr; gap:6px; padding:22px; } }

.list{ display:grid; gap:16px; padding:0; margin:0; list-style:none; }
.list li{ padding-left:30px; position:relative; color:var(--ink-soft); }
.list li strong{ color:var(--ink); }
.list li::before{
  content:""; position:absolute; left:0; top:11px; width:14px; height:1px;
  background:var(--accent);
}

/* ---------- FAQ ---------- */
.faq{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface-2); }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  cursor:pointer; padding:26px 28px; font-weight:600; font-size:18px;
  list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:flex-start;
  transition:color .14s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after{
  content:""; flex:none; width:11px; height:11px; margin-top:7px;
  border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .answer{ padding:0 28px 28px; color:var(--ink-soft); max-width:66ch; line-height:1.72; }
@media (max-width:620px){ .faq summary{ padding:22px; } .faq .answer{ padding:0 22px 22px; } }

/* ---------- reels ---------- */
.reel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:760px){ .reel-grid{ grid-template-columns:1fr; } }
/* Fixed height rather than an aspect ratio: Instagram's /embed/ view is a
   card (video + header + caption), not a bare 9:16 video, so a ratio either
   letterboxes it or leaves dead space. A set height also keeps all four
   cells identical whatever the column width. */
.reel{
  position:relative; height:640px; width:100%;
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  display:grid; place-items:center; overflow:hidden; padding:0;
  font:inherit; color:var(--ink-soft); text-align:center;
  transition:border-color .18s ease;
}
.reel:hover{ border-color:var(--accent-line); }

/* A live reel: our own video in our own box. `cover` crops to fill the tile
   so all four match regardless of the source aspect — no letterboxing, no
   third-party chrome, and it cannot collapse the way an embed can. */
.reel-live{ display:block; padding:0; background:#000; text-decoration:none; }
.reel-live video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.reel-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:5px 10px;
  opacity:0; transition:opacity .18s ease;
}
a.reel-live:hover .reel-badge{ opacity:1; }

/* Shown only while a clip is NOT rolling, so a refused autoplay still reads
   as a video rather than a dead image. */
.reel-cue{
  position:absolute; inset:0; margin:auto; width:54px; height:54px; z-index:2;
  border-radius:50%; background:rgba(0,0,0,.45); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25);
  transition:opacity .25s ease; pointer-events:none;
}
.reel-cue::after{
  content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:15px solid #fff; border-top:9px solid transparent;
  border-bottom:9px solid transparent; transform:translateX(2px);
}
.reel-live.is-playing .reel-cue{ opacity:0; }
@media (hover:none){ .reel-badge{ opacity:.9; } }
@media (max-width:760px){ .reel{ height:600px; } }
@media (max-width:400px){ .reel{ height:520px; } }
.reel .play{
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(180deg,#6FE2FF,var(--accent));
  display:grid; place-items:center; margin:0 auto 14px;
  box-shadow:0 10px 30px -10px rgba(79,216,255,.7);
}
.reel .play::after{
  content:""; border-left:16px solid var(--accent-ink);
  border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px;
}
.reel.loaded{ display:block; cursor:default; aspect-ratio:auto; }

/* ---------- survey ---------- */
.survey-shell{ min-height:calc(100vh - var(--nav-h)); display:grid; align-content:start; }
.progress-bar{
  position:sticky; top:var(--nav-h); z-index:50;
  background:rgba(6,7,11,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.progress-in{ max-width:760px; margin:0 auto; padding:15px 28px; display:grid; gap:10px; }
.progress-meta{ display:flex; justify-content:space-between; align-items:center; }
.progress-track{ height:2px; background:var(--line-2); border-radius:99px; overflow:hidden; }
.progress-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 12px rgba(79,216,255,.7);
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){ .progress-fill{ transition:none; } }

.q-wrap{ max-width:760px; margin:0 auto; padding:60px 28px 120px; }
@media (max-width:760px){ .q-wrap{ padding:36px 20px 90px; } }
.q-text{
  font-family:var(--display); font-weight:740;
  font-size:clamp(26px,4.4vw,38px); letter-spacing:-.025em; line-height:1.12; text-wrap:balance;
}

.options{ display:grid; gap:10px; margin-top:34px; }
.option{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); border-radius:13px;
  padding:19px 20px; font:inherit; font-size:16.5px; color:var(--ink); cursor:pointer;
  transition:border-color .14s ease, background .14s ease, transform .14s ease;
}
@media (prefers-reduced-motion:reduce){ .option{ transition:none; } }
.option:hover{ border-color:var(--line-2); background:var(--surface-3); transform:translateX(2px); }
.option[aria-pressed="true"],.option.selected{
  border-color:var(--accent); background:var(--accent-tint);
  box-shadow:0 0 0 1px var(--accent-line), 0 12px 34px -20px rgba(79,216,255,.9);
}
/* the key: a mono letter, replaced by a tick once chosen */
.option .tick{
  width:26px; height:26px; border-radius:8px; border:1px solid var(--line-2);
  background:transparent; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-dim);
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.option.selected .tick{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  font-family:var(--sans); font-size:14px; font-weight:800;
}

.q-actions{ display:flex; gap:16px; align-items:center; margin-top:30px; flex-wrap:wrap; }
.back-btn{ background:none; border:0; font:inherit; font-weight:500; color:var(--ink-dim); cursor:pointer; padding:10px 2px; }
.back-btn:hover{ color:var(--ink); }

textarea.field, input.field{
  width:100%; font:inherit; font-size:16.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:13px; padding:17px; resize:vertical;
  transition:border-color .14s ease, box-shadow .14s ease;
}
textarea.field::placeholder, input.field::placeholder{ color:var(--ink-dim); }
textarea.field:focus, input.field:focus{
  border-color:var(--accent); outline:none; box-shadow:0 0 0 4px var(--accent-tint);
}
input.field[aria-invalid="true"]{ border-color:var(--danger); }
.error-msg{ color:var(--danger); font-size:15px; font-weight:600; }

/* ---------- result: the verdict ---------- */
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border:1px solid var(--line-2); border-radius:16px; overflow:hidden;
  display:grid; place-items:center; text-align:center; padding:24px;
}
.video-frame .play{
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(180deg,#6FE2FF,var(--accent));
  display:grid; place-items:center; margin:0 auto 14px;
  box-shadow:0 14px 40px -12px rgba(79,216,255,.8);
}
.video-frame .play::after{
  content:""; border-left:19px solid var(--accent-ink);
  border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px;
}

/* The verdict card — the one place the warm accent is allowed. */
.verdict{
  position:relative; overflow:hidden;
  background:radial-gradient(110% 130% at 12% 0%, var(--gold-tint), transparent 58%), var(--surface-2);
  border:1px solid var(--gold-line); border-radius:22px; padding:44px;
}
.verdict::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}
@media (max-width:620px){ .verdict{ padding:28px 22px; } }
.verdict-track{
  font-family:var(--display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(34px,5.6vw,58px); line-height:1.02; color:var(--ink);
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-tint);
  border:1px solid var(--gold-line); border-radius:999px; padding:7px 14px;
}
.video-frame--poster{ padding:0; }
.video-frame--poster img{ width:100%; height:100%; object-fit:cover; }
.video-frame__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,9,8,.30), rgba(6,7,11,.72));
}
.video-frame__body{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  color:var(--ink); text-shadow:0 1px 12px rgba(0,0,0,.6);
}

.result-line{ display:grid; gap:6px; padding:24px 0; border-bottom:1px solid var(--line); }
.result-line:last-child{ border-bottom:0; }
.result-value{
  font-family:var(--display); font-size:clamp(22px,3vw,30px);
  font-weight:740; letter-spacing:-.02em; line-height:1.14; color:var(--ink);
}

.person{ display:flex; gap:18px; align-items:flex-start; }

/* ---------- dev warnings ---------- */
.devbar{
  background:#24090C; color:#FFB4B8; border-bottom:1px solid rgba(255,107,112,.35);
  font-family:var(--mono); font-size:12.5px; padding:10px 18px; line-height:1.55;
}
.devbar strong{ letter-spacing:.06em; color:#FF8A8F; }
.devbar ul{ margin:6px 0 0; padding-left:20px; }
.devbar summary::-webkit-details-marker{ display:none; }
.devbar summary{ list-style:none; }
.devbar summary::before{ content:"▸ "; }
.devbar[open] summary::before{ content:"▾ "; }
.dev-missing{
  display:inline-block; background:rgba(255,107,112,.10); border:1px dashed rgba(255,107,112,.45);
  color:#FF9DA1; font-family:var(--mono); font-size:12px; padding:2px 8px; border-radius:6px;
}

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); background:var(--surface); padding-block:64px 40px; margin-top:40px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:38px; }
.footer-brand{ display:grid; gap:10px; max-width:34ch; }
.footer-links{ display:flex; flex-wrap:wrap; gap:12px 26px; align-content:start; }
.footer-links a{ color:var(--ink-soft); text-decoration:none; font-size:14.5px; font-weight:500; }
.footer-links a:hover{ color:var(--accent); }
.disclaimer{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:24px 26px; }
.disclaimer p{ font-size:14px; line-height:1.7; color:var(--ink-soft); max-width:none; }
.copyright{ margin-top:26px; color:var(--ink-dim); }

/* ---------- motion ---------- */
.js-reveal .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.js-reveal .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- prelaunch / waitlist ---------- */
.prelaunch-box{
  background:linear-gradient(180deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--accent-line); border-radius:18px; padding:30px;
  box-shadow:0 24px 60px -34px rgba(79,216,255,.5);
  max-width:560px;
}
@media (max-width:620px){ .prelaunch-box{ padding:22px; } }
.prelaunch-blurb{ color:var(--ink-soft); margin:12px 0 20px; font-size:16.5px; }

.waitlist-form{ display:grid; gap:10px; }
.waitlist-row{ display:flex; gap:10px; }
.waitlist-row .field{ flex:1; min-width:0; }
.waitlist-row .btn{ flex:none; white-space:nowrap; }
@media (max-width:560px){
  .waitlist-row{ flex-direction:column; }
  .waitlist-row .btn{ width:100%; }
}
.waitlist-done{
  background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:12px; padding:20px;
}
.waitlist-done-line{ font-family:var(--display); font-weight:740; font-size:21px; color:var(--ink); letter-spacing:-.02em; }

/* the survey CTA steps down while the waitlist leads */
#heroCta.is-secondary{
  background:transparent; border-color:var(--line-2); color:var(--ink);
  box-shadow:none;
}
#heroCta.is-secondary:hover{ border-color:var(--accent); color:var(--accent); transform:none; }

/* =========================================================================
   MOBILE PASS
   Most traffic arrives from Instagram's in-app browser on a phone, so the
   touch targets and reading sizes below are treated as requirements rather
   than refinements.
   ========================================================================= */
@media (max-width:760px){

  /* 44px minimum touch target (WCAG 2.5.5 / Apple HIG). Footer links were
     25px tall — fine with a mouse, a coin-toss with a thumb. */
  .footer-links{ gap:2px 22px; }
  .footer-links a{
    display:inline-flex; align-items:center; min-height:44px; padding:2px 0;
  }
  .footer-brand{ max-width:none; }

  /* Inline text links inside paragraphs get a bigger hit area without
     disturbing the line box. */
  .textlink{ padding:6px 0; }

  /* Small print stays legible on a phone. */
  .tiny{ font-size:14px; }
  .small{ font-size:15.5px; }
  .disclaimer p{ font-size:14.5px; }

  /* The wordmark is the "home" button on mobile — make it thumb-sized. */
  .wordmark{ display:inline-flex; align-items:center; min-height:44px; }

  /* 40px was just under the 44px minimum. */
  .hamburger{ width:44px; height:44px; }

  /* Tighten the vertical rhythm so pages are not endless scrolls. */
  .sec-head{ margin-bottom:32px; gap:16px; }
  .stack-lg{ gap:26px; }
  .card{ padding:22px; }
  .dark{ padding:28px 22px; }
  .rows .row{ padding:20px; }

  /* Full-bleed primary actions read as buttons, not links, on a phone. */
  .hero .btn-lg, .waitlist-row .btn{ width:100%; }
  .q-actions .btn{ flex:1; }
}

/* Never let a long word or code string blow out the layout on a narrow screen. */
@media (max-width:480px){
  h1,h2,.q-text,.verdict-track,.result-value{ overflow-wrap:break-word; hyphens:auto; }
  .price-tag{ font-size:clamp(38px,13vw,56px); }
  code{ word-break:break-all; }
}

/* ==========================================================================
   2026-09 REBUILD. Hero effects, room + dossier cards, reel rail, and the
   motion layer. Everything here is CSS or an inline data URI: zero requests.
   Every animation is wrapped so it degrades to a static, readable page.
   ========================================================================== */

/* ---------- optical tightening ----------
   A consistent negative track on anything 14px+ is the single cheapest
   "designed" signal there is. Body copy keeps its normal spacing. */
h1,h2,h3,h4,.price-tag,.btn,.stamp{ letter-spacing:-.02em; }

/* ---------- gradient-clipped display type ----------
   Falls back to solid --ink anywhere background-clip is unsupported. */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero h1{
    background-image:linear-gradient(180deg,#EAF6FB 0%,#8FA3AE 92%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    /* descenders clip against the box without this pad/pull pair */
    margin:-.18em 0; padding:.18em 0;
  }
  .hero h1 em{
    background-image:linear-gradient(180deg,var(--accent) 0%,#2E9DBE 100%);
    -webkit-background-clip:text; background-clip:text; font-style:normal;
  }
}

/* ---------- hero effect layers ---------- */
.hero{ isolation:isolate; }
.hero > .hero-fx{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-glow{ position:absolute; display:block; border-radius:50%; filter:blur(48px); }
.hero-glow.g1{ width:62%; aspect-ratio:1; top:-30%; left:-14%;
  background:radial-gradient(closest-side,rgba(79,216,255,.26),transparent 70%); }
.hero-glow.g2{ width:46%; aspect-ratio:1; top:2%; right:-16%;
  background:radial-gradient(closest-side,rgba(79,216,255,.14),transparent 70%); }
.hero-glow.g3{ width:40%; aspect-ratio:1; bottom:-30%; left:26%;
  background:radial-gradient(closest-side,rgba(79,216,255,.10),transparent 70%); }
.hero-grid{
  position:absolute; inset:0; display:block;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 28% 34%,#000 28%,transparent 76%);
          mask-image:radial-gradient(ellipse 78% 68% at 28% 34%,#000 28%,transparent 76%);
}
/* cursor spotlight. Fine pointers only; --mx/--my are set in app.js */
.hero-spot{
  position:absolute; inset:0; display:block; opacity:0; transition:opacity .5s ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,38%),
             rgba(79,216,255,.15),transparent 66%);
}
@media (hover:hover) and (pointer:fine){ .hero:hover .hero-spot{ opacity:1; } }

@media (prefers-reduced-motion:no-preference){
  .hero-glow.g1{ animation:drift 26s ease-in-out infinite alternate; }
  .hero-glow.g2{ animation:drift 34s ease-in-out infinite alternate-reverse; }
  .hero-glow.g3{ animation:drift 30s ease-in-out infinite alternate; }
}
@keyframes drift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(4%,3%,0) } }

/* ---------- hero CTA row ---------- */
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn-ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line-2); border-radius:999px;
}
.btn-ghost:hover{ border-color:var(--accent-line); background:rgba(79,216,255,.06); }

/* ---------- primary button: rotating conic rim + bottom-lit sheen ---------- */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.55) 0deg, rgba(255,255,255,0) 60deg,
    rgba(255,255,255,0) 300deg, rgba(255,255,255,.55) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .btn-primary::before{ animation:rim 3.6s linear infinite; }
}
@keyframes rim{ to{ transform:rotate(1turn) } }
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(85% 120% at 50% 125%, rgba(255,255,255,.30), transparent 70%);
  opacity:0; transition:opacity .22s ease;
}
.btn-primary:hover::after{ opacity:1; }

/* ---------- nav underline, grown from nothing ---------- */
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{ transform:scaleX(1); }

/* ---------- launch banner ---------- */
.launch-bar{
  position:relative; z-index:60; display:none;
  background:linear-gradient(90deg,rgba(79,216,255,.14),rgba(79,216,255,.05));
  border-bottom:1px solid var(--accent-line);
}
.launch-bar.is-on{ display:block; }
.launch-bar p{
  margin:0; padding:9px 16px; text-align:center;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);
}
.launch-bar b{ color:var(--accent); font-weight:600; }

/* ---------- the four rooms ---------- */
.room-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.room{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(79,216,255,.10), transparent 62%),
    var(--surface-2);
  border:1px solid var(--line); border-radius:18px;
  transition:border-color .18s ease, transform .18s ease;
}
.room:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.room-shot{
  /* Four across, so the card is quarter width and this lands around 175px tall.
     The section used to be two rows of 332px photos and 2000px on its own. */
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  border-bottom:1px solid var(--line); background:var(--surface-3);
}
.room-shot.is-empty{
  display:grid; place-items:center;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:26px 26px;
}
.room-body{ display:flex; flex-direction:column; gap:9px; padding:18px 18px 20px; }
.room-body h3{ font-family:var(--display); font-weight:740; font-size:clamp(19px,2vw,22px); }
.room-body > .muted{ font-size:14.5px; line-height:1.55; }
.room-facts{ display:grid; grid-template-columns:1fr; gap:2px; margin:0;
  padding-top:12px; border-top:1px solid var(--line); }
.room-facts dt:not(:first-of-type){ margin-top:8px; }
.room-facts dt{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); }
.room-facts dd{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
.room-join{
  margin-top:2px; align-self:flex-start; font-weight:600; font-size:14.5px;
  color:var(--accent); text-decoration:none;
}
.room-join:hover{ text-decoration:underline; }

/* ---------- teacher dossiers ---------- */
.dossier-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.dossier{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  transition:border-color .18s ease;
}
.dossier:hover{ border-color:var(--accent-line); }
.dossier-photo{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(.35) contrast(1.05); background:var(--surface-3);
}
.dossier-photo.is-empty{
  display:grid; place-items:center;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(79,216,255,.12), transparent 70%),
    var(--surface-3);
}
.dossier-photo.is-empty span{
  font-family:var(--display); font-weight:740; font-size:52px; color:var(--ink-dim);
}
.dossier-body{ display:flex; flex-direction:column; gap:8px; padding:20px 22px 24px; }
.dossier-practice{
  margin-top:4px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; line-height:1.5;
  letter-spacing:.03em; color:var(--ink-dim);
}

/* ---------- reels as a snapping rail ----------
   Fixes the 33% crop the old fixed-height grid caused, and stops the wall
   eating three screens on mobile. */
.reel-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,300px);
  gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding-bottom:10px;
  scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 0 92%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0 92%,transparent 100%);
}
.reel-rail > *{ scroll-snap-align:start; }
.reel-rail video,.reel-rail img{
  width:100%; height:auto; aspect-ratio:9/16; object-fit:cover;
  border-radius:14px; border:1px solid var(--line); display:block;
}

/* ---------- reveal stagger ---------- */
.js-reveal .reveal > *{ transition-delay:calc(var(--i,0) * 60ms); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .dossier-grid{ grid-template-columns:repeat(2,1fr); }
  .room-grid{ grid-template-columns:repeat(2,1fr); }
}
/* Below this the two columns leave about 160px per card, which wraps the
   practice line to two words a line and makes the credentials unreadable.
   Everything else already drops to one column at 700px; this was missed. */
@media (max-width:620px){
  .dossier-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .grid-2{ grid-template-columns:1fr; }
  .room-body{ padding:22px 20px 24px; }
  .hero-cta .btn{ width:100%; }
  .hero-cta{ gap:10px; }
}

/* ---------- compact prelaunch note ---------- */
.prelaunch-note{
  display:flex; align-items:flex-start; gap:9px;
  font-size:14.5px; color:var(--ink-soft);
}
.prelaunch-note .dot{
  flex:0 0 auto; width:7px; height:7px; margin-top:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(79,216,255,.14);
}
/* keep the hero tight on a phone: the CTA must clear the fold */
@media (max-width:700px){
  .hero{ padding-block:34px 40px; }
  .hero h1{ font-size:clamp(33px,8.6vw,44px); }
  .hero .lede{ font-size:16.5px; }
  .room-shot{ aspect-ratio:16/9; }
}

/* ---------- result page: ruled-out rooms, weeks, numbered steps ---------- */
.ruled-out{ list-style:none; margin:0; padding:0; display:grid; gap:0;
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface-2); }
.ruled-out li{ padding:16px 20px; border-bottom:1px solid var(--line); opacity:.62; }
.ruled-out li:last-child{ border-bottom:0; }
.ruled-out h4{ font-size:15px; margin-bottom:3px; }

.weeks{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.weeks .week{
  position:relative; padding:20px 22px 20px 24px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
}
.weeks .week::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px; width:2px;
  border-radius:2px; background:var(--accent-line);
}
.weeks .week-n{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:5px;
}
.weeks .week h4{ font-size:16.5px; margin-bottom:5px; }

.steps-num{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.steps-num li{ display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--line); }
.steps-num li:last-child{ border-bottom:0; }
.steps-num b{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--accent-line); color:var(--accent);
  font-family:var(--mono); font-size:12px; font-weight:600;
}
.steps-num span{ color:var(--ink-soft); font-size:15.5px; line-height:1.6; }

.dossier--wide{ flex-direction:row; }
.dossier--wide .dossier-photo{ width:180px; flex:0 0 180px; aspect-ratio:4/5; }
.dossier--wide .dossier-body{ justify-content:center; }
@media (max-width:620px){
  .dossier--wide{ flex-direction:column; }
  .dossier--wide .dossier-photo{ width:100%; flex:none; aspect-ratio:16/10; }
}

/* ==========================================================================
   Button refinement. The old primary was a big bright pill in bold, which is
   the most generic shape on the internet. Restraint plus a moving rim reads
   far more considered: deep gradient fill, lighter weight, tighter padding,
   and a hairline of light that travels the rim.
   ========================================================================== */
.btn{ font-weight:600; padding:13px 26px; letter-spacing:-.015em; }
.btn-lg{ padding:16px 30px; font-size:16px; }

.btn-primary{
  background:linear-gradient(168deg,#5FDCFF 0%, #29B7E2 52%, #1795BE 100%);
  color:#04222C; border-color:rgba(255,255,255,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -10px 22px -12px rgba(0,0,0,.55) inset,
    0 12px 34px -16px rgba(41,183,226,.75);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -10px 22px -12px rgba(0,0,0,.5) inset,
    0 18px 42px -16px rgba(41,183,226,.9);
}
/* the travelling rim: cyan-white, thin, and slow */
.btn-primary::before{
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.85) 0deg, rgba(255,255,255,0) 55deg,
    rgba(255,255,255,0) 305deg, rgba(255,255,255,.85) 360deg);
}
.btn-primary::after{
  background:radial-gradient(80% 130% at 50% 128%, rgba(255,255,255,.38), transparent 68%);
}

/* ghost: gradient hairline rather than a flat grey border */
.btn-ghost{
  position:relative; background:rgba(255,255,255,.02); border-color:transparent;
  color:var(--ink); font-weight:600;
}
.btn-ghost::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.05));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.btn-ghost:hover{ background:rgba(79,216,255,.07); }
.btn-ghost:hover::before{
  background:linear-gradient(180deg, rgba(79,216,255,.55), rgba(79,216,255,.12));
}

/* arrow that steps forward on hover */
.btn .arw{ transition:transform .22s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .btn .arw{ transition:none; } }

/* ---------- hero: vertical guide rules + candlestick field ---------- */
.hero-rules{ position:absolute; inset:0; display:block; }
.hero-rules i{
  position:absolute; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.10) 22%,
                             rgba(255,255,255,.10) 72%, transparent);
}
.hero-rules i:nth-child(1){ left:12%; }
.hero-rules i:nth-child(2){ left:34%; }
.hero-rules i:nth-child(3){ left:63%; }
.hero-rules i:nth-child(4){ left:86%; }

.hero-chart{
  position:absolute; left:0; right:0; bottom:-6%; width:100%; height:56%;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 62%, #000 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 62%, #000 88%, transparent);
}
.hero-chart .bu{ fill:rgba(79,216,255,.30); }
.hero-chart .wu{ stroke:rgba(79,216,255,.30); stroke-width:1.4; }
.hero-chart .bd{ fill:rgba(255,255,255,.09); }
.hero-chart .wd{ stroke:rgba(255,255,255,.09); stroke-width:1.4; }

/* ---------- cards: gradient hairline + top bloom ---------- */
.card{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.055), transparent 60%),
    var(--surface-2);
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.03));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.room::after,.dossier::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.dossier{ position:relative; }

/* display type sits tighter, the way a set headline does */
.hero h1{ line-height:1.0; }

/* ---------- the Josh note ---------- */

/* chart sits low and quiet: it is texture, not content */
.hero-chart{ height:38%; bottom:-8%; opacity:.55; }
.hero-chart .bu{ fill:rgba(79,216,255,.26); }
.hero-chart .wu{ stroke:rgba(79,216,255,.26); }
.hero-chart .bd{ fill:rgba(255,255,255,.07); }
.hero-chart .wd{ stroke:rgba(255,255,255,.07); }

/* nav pill: restrained, the way a persistent button should be */
.btn-join{ padding:9px 18px; font-size:14px; font-weight:600; }

/* two buttons side by side wherever there is room for them */
@media (min-width:520px){
  .hero .btn-lg{ width:auto; }
  .hero-cta{ gap:12px; }
}

/* ==========================================================================
   Louder chart, one button language, and hover life on every card.
   ========================================================================== */

/* ---------- candlesticks: present, not whispered ---------- */
.hero-chart{ height:62%; bottom:-10%; opacity:1; }
.hero-chart .bu{ fill:rgba(79,216,255,.62); }
.hero-chart .wu{ stroke:rgba(79,216,255,.62); stroke-width:2; }
.hero-chart .bd{ fill:rgba(196,214,224,.30); }
.hero-chart .wd{ stroke:rgba(196,214,224,.30); stroke-width:2; }
/* a wash of accent behind the candles so they read as one object */
.hero-chart{
  filter:drop-shadow(0 0 18px rgba(79,216,255,.30));
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 46%, #000 84%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 46%, #000 84%, transparent);
}
@media (max-width:700px){ .hero-chart{ height:46%; opacity:.85; } }

/* ---------- one button language ----------
   Ghost, secondary and the nav pill now carry the same rim and sheen as the
   primary. Fill still separates them, so hierarchy survives. */
.btn-ghost, .btn-secondary, .btn-join{ position:relative; overflow:hidden; }
.btn-ghost::after, .btn-secondary::after, .btn-join::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(80% 130% at 50% 128%, rgba(79,216,255,.34), transparent 68%);
  opacity:0; transition:opacity .22s ease;
}
.btn-ghost:hover::after, .btn-secondary:hover::after, .btn-join:hover::after{ opacity:1; }

.btn-secondary::before, .btn-join::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.7) 0deg, rgba(255,255,255,0) 55deg,
    rgba(255,255,255,0) 305deg, rgba(255,255,255,.7) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .btn-secondary::before, .btn-join::before{ animation:rim 3.6s linear infinite; }
}
.btn-join{ background:linear-gradient(168deg,#5FDCFF 0%, #29B7E2 52%, #1795BE 100%);
  color:#04222C; border-color:rgba(255,255,255,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px -14px rgba(41,183,226,.8); }

/* ---------- cards come alive under the cursor ----------
   --cx/--cy are written by app.js on pointermove. No layout reads, so this
   cannot jank; the whole block is inert on coarse pointers. */
.room, .dossier, .card{ position:relative; overflow:hidden; }
.room::before, .dossier::before, .card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px circle at var(--cx,50%) var(--cy,0%),
             rgba(79,216,255,.16), transparent 62%);
  opacity:0; transition:opacity .28s ease; z-index:0;
}
@media (hover:hover) and (pointer:fine){
  .room:hover::before, .dossier:hover::before, .card:hover::before{ opacity:1; }
}
.room > *, .dossier > *, .card > *{ position:relative; z-index:1; }

.room{ transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, box-shadow .22s ease; }
.room:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(0,0,0,.9); }
.room-shot{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.room:hover .room-shot{ transform:scale(1.035); }
.room-join{ display:inline-flex; align-items:center; gap:6px; }
.room:hover .room-join{ text-decoration:underline; }

.dossier{ transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease; }
.dossier:hover{ transform:translateY(-3px); }
.dossier-photo{ transition:filter .3s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.dossier:hover .dossier-photo{ filter:grayscale(0) contrast(1.05); transform:scale(1.03); }

.reel-rail > *{ transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.reel-rail > *:hover{ transform:translateY(-4px) scale(1.01); }

@media (prefers-reduced-motion:reduce){
  .room,.dossier,.room-shot,.dossier-photo,.reel-rail > *{ transition:none; }
  .room:hover,.dossier:hover,.reel-rail > *:hover{ transform:none; }
}

/* ---------- placeholder art while real photography is pending ---------- */
.room-shot.is-empty, .dossier-photo.is-empty{ position:relative; }

/* The current stand-in is a tall phone screenshot in a landscape slot, so pin
   the crop to the chart body rather than letting it centre wherever. */
.room-shot{ object-position:50% 42%; }

/* Room shots sit under a tint so any source image, screenshot or photo, reads
   as part of the page rather than a bright rectangle pasted onto it. */
.room-shot{ filter:saturate(.82) contrast(1.04) brightness(.72); }
.room:hover .room-shot{ filter:saturate(.95) contrast(1.05) brightness(.86); }
.room{ position:relative; }
.room-media{ position:relative; display:block; overflow:hidden; }
.room-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,7,11,.10) 0%, rgba(6,7,11,.62) 78%, var(--surface-2) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(79,216,255,.16), transparent 62%);
}

/* ==========================================================================
   Corrections from the 2026-09-08 audit.
   ========================================================================== */

/* The survey focuses the question heading so screen readers announce it. That
   made :focus-visible draw a 2px cyan box round the headline after every tap,
   which reads as a validation error. Announce without the ring. */
.q-text:focus, .q-text:focus-visible{ outline:none; }

/* Multi-select: Continue sat below the fold and was disabled, so tapping an
   option appeared to do nothing. Pin the actions to the bottom of the screen. */
.q-actions.is-sticky{
  position:sticky; bottom:0; z-index:5;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, transparent, var(--bg) 38%);
}

/* A conic highlight rotating forever in the sticky nav on every page reads as
   a casino banner. Keep the travelling rim for the hero primary only. */
.btn-join::before{ animation:none !important; background:none; }

/* The cursor spotlight on ~14 small cards at once was noise. Rooms and
   teachers only, where the card is big enough for it to read. */
.card::before{ content:none; }

/* The h1 gradient bottomed out too dark, so the last line of the most
   important sentence on the site was measurably dimmer than the first. */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero h1{ background-image:linear-gradient(180deg,#F2F8FC 0%, #B4C4CE 94%); }
}

/* Room art is now dark on-brand SVG, so the heavy darkening that a bright
   screenshot needed is no longer appropriate. */
.room-shot{ filter:none; }
.room:hover .room-shot{ filter:none; }
.room-media::after{
  background:
    linear-gradient(180deg, rgba(6,7,11,0) 0%, rgba(6,7,11,.35) 72%, var(--surface-2) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(79,216,255,.12), transparent 62%);
}

/* Teacher placeholders looked like failed image loads. Make the empty state
   deliberate: a hatch, a mono strip, and the initial in accent. */
.dossier-photo.is-empty{
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 8px, transparent 8px 16px),
    radial-gradient(90% 70% at 50% 0%, rgba(79,216,255,.14), transparent 70%);
  background-color:var(--surface-3);
}
.dossier-photo.is-empty span{ color:var(--accent); opacity:.55; }
.dossier-photo.is-empty::after{
  content:"PHOTO PENDING"; position:absolute; left:0; right:0; bottom:10px;
  text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--ink-dim);
}
.dossier-photo.is-empty{ position:relative; }

/* ---------- phone corrections ---------- */
@media (max-width:760px){
  /* the candlestick field was running through the hero body copy and the
     secondary CTA, making both hard to read */
  .hero-chart{
    opacity:.38; height:40%;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 62%, transparent 96%);
            mask-image:linear-gradient(180deg, transparent, #000 62%, transparent 96%);
  }
  /* tap targets */
  .room-join{ min-height:44px; display:inline-flex; align-items:center; }
  .launch-bar a{ display:inline-block; padding:6px 0; min-height:34px; }
  .footer-links a, .foot a{ padding-inline:8px; }
  /* legibility floor */
  .label, .sec-index{ font-size:13px; }
  .reel-badge{ font-size:12px; }
  .room-facts dt{ font-size:12.5px; }
  .dossier-practice{ font-size:13px; }
  .disclaimer p{ font-size:15px; }
}

/* The room images are already dark and colour graded, so the veil only needs
   to carry the bottom edge into the card rather than darken the whole frame. */
.room-media::after{
  background:
    linear-gradient(180deg, rgba(6,7,11,0) 0%, rgba(6,7,11,.18) 62%, var(--surface-2) 100%);
}
.room-shot{ filter:saturate(.95); }
.room:hover .room-shot{ filter:saturate(1.08); }

/* ==========================================================================
   Rhythm, closure, and the last system violations.
   ========================================================================== */

/* The pull quote was the only green on the site, a third hue against a stated
   two-colour system. */
.pull{
  background:var(--accent-tint) !important;
  border-color:var(--accent-line) !important;
}
.pull .big{ color:var(--ink); }

/* Short pages let the footer float mid-viewport with dead black under it. */
main{ min-height:calc(100vh - 420px); }

/* Alternating ground so sections read as a rhythm rather than a list. The
   box-shadow trick paints full-bleed without leaving the container. */
section.band{
  background:var(--surface);
  box-shadow:0 0 0 100vmax var(--surface);
  clip-path:inset(0 -100vmax);
}

/* Section numerals ride their section on wide screens, which gives the page a
   spine instead of six identical openings. */
@media (min-width:1100px){
  .sec-index{ position:sticky; top:calc(var(--nav-h, 64px) + 14px); }
}

/* Four names, one row. Replaces a duplicated card grid that ran 3,465px on a
   phone for information already on the home page. */
.name-row{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.name-row li{
  display:flex; flex-direction:column; gap:3px;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2);
}
.name-row b{ font-family:var(--display); font-weight:740; font-size:18px; }
.name-row span{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
@media (max-width:700px){ .name-row{ grid-template-columns:repeat(2,1fr); } }

/* Real focus states per component. One global ring on everything is the
   templated tell, and it is also the least useful for a keyboard user. */
.option:focus-visible{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-line) inset, 0 0 0 3px rgba(79,216,255,.18);
}
.faq summary:focus-visible{
  outline:none; box-shadow:-14px 0 0 -11px var(--accent);
}
.nav-links a:focus-visible{ outline:none; }
.nav-links a:focus-visible::after{ transform:scaleX(1); }
.room:focus-within, .dossier:focus-within{ border-color:var(--accent-line); }

/* A closing band, so the page ends rather than stops. */
.colophon{
  margin-top:74px; padding:34px 0 30px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;
  justify-content:space-between;
}
.colophon ul{
  list-style:none; display:flex; flex-wrap:wrap; gap:18px; margin:0; padding:0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim);
}

/* ---------- survey motion ----------
   The question swap used to be an instant replaceChildren, so a 180ms pause
   happened with nothing in it. Now that pause carries a direction. */
#surveyRoot{ transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1); }
#surveyRoot.is-in-fwd{ opacity:0; transform:translateX(14px); }
#surveyRoot.is-in-back{ opacity:0; transform:translateX(-14px); }

/* Tapping an option should feel like it registered. The chosen row lights and
   the others step back, which also makes the 260ms pause read as intent. */
.options:has(.option[aria-pressed="true"]) .option:not([aria-pressed="true"]),
.options:has(.option.is-on) .option:not(.is-on){ opacity:.5; }
.option{ transition:opacity .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.option:active{ transform:scale(.995); }

/* progress fill gets a travelling highlight so it reads as alive */
.progress-fill{
  background-image:linear-gradient(90deg, var(--accent), #9BEBFF 55%, var(--accent));
  background-size:200% 100%;
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:no-preference){
  .progress-fill{ animation:sheen 2.6s linear infinite; }
}
@keyframes sheen{ to{ background-position:-200% 0 } }

@media (prefers-reduced-motion:reduce){
  #surveyRoot, #surveyRoot.is-in-fwd, #surveyRoot.is-in-back{
    transition:none; opacity:1; transform:none;
  }
}

/* ---------- the verdict arriving ----------
   Gold stays exclusive to this card. It scales up a touch and its hairline
   draws in, so the payoff has a moment rather than simply being present. */
@media (prefers-reduced-motion:no-preference){
  .verdict{ animation:verdict .55s cubic-bezier(.2,.7,.3,1) both; }
  .verdict .chip{ animation:chip .4s cubic-bezier(.2,.7,.3,1) both; }
  .verdict .chip:nth-of-type(1){ animation-delay:.30s; }
  .verdict .chip:nth-of-type(2){ animation-delay:.38s; }
}
@keyframes verdict{ from{ opacity:0; transform:scale(.975) translateY(8px) } to{ opacity:1; transform:none } }
@keyframes chip{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* ==========================================================================
   Audit round 3.
   ========================================================================== */

/* Owner-facing notes must never reach a visitor. Hidden unless app.js has
   confirmed we are on localhost, so they also stay hidden with JS off. */
.dev-note{ display:none; }
.is-dev .dev-note{ display:block; }

/* Reels had 183px of dead black under every tile: a fixed .reel height fought
   the rail's aspect-ratio and the fixed height won on source order. */
.reel-rail .reel{ height:auto; aspect-ratio:9/16; }

/* Stretched grid rows were distributing leftover height into the auto rows, so
   headings and links across a row sat at different baselines. */
.stack, .stack-sm, .stack-lg{ align-content:start; }

/* Teacher cards are screenshots from four different apps at four different
   background luminances. One monochrome cyan treatment plus a scrim makes
   them read as a set rather than four pasted rectangles. */
.dossier-photo{
  filter:grayscale(1) contrast(1.06) brightness(.82) sepia(.35) hue-rotate(150deg) saturate(1.6);
}
.dossier:hover .dossier-photo{
  filter:grayscale(.55) contrast(1.06) brightness(.95) sepia(.2) hue-rotate(150deg) saturate(1.4);
}
.dossier{ position:relative; }
.dossier > img.dossier-photo + .dossier-body::before,
.dossier-photo + .dossier-body::before{
  content:""; position:absolute; left:0; right:0; height:120px;
  margin-top:-120px; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,7,11,0), rgba(6,7,11,.55) 62%, var(--surface-2));
}
/* names line up across a row even when a room name wraps */
.dossier .label{ min-height:2.4em; }

/* Selection dimming was permanent, leaving three of four options under AA on a
   revisited question. It now only reads during the pause before advancing. */
.options:has(.option[aria-pressed="true"]) .option:not([aria-pressed="true"]),
.options:has(.option.is-on) .option:not(.is-on){ opacity:1; }
.options.is-advancing .option:not([aria-pressed="true"]):not(.is-on){ opacity:.5; }

/* A progress bar that shimmers forever is a casino tell. It moves when it moves. */
.progress-fill{ animation:none; }

/* Bands were 1.5 ΔL* from the canvas, which is invisible. */
section.band{ background:#0E1017; border-block:1px solid var(--line); }

/* The hero effects are clipped to the container, which left two vertical
   seams against the full-bleed bands below. Bleed the hero's own ground to
   the viewport edge using the canvas colour, so there is no visible box. */
.hero{ box-shadow:0 0 0 100vmax var(--bg); clip-path:inset(0 -100vmax); }

/* The candlesticks were running through the desktop CTAs, not just mobile. */
.hero-chart{
  height:54%; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 58%, transparent 97%);
          mask-image:linear-gradient(180deg, transparent, #000 58%, transparent 97%);
}

/* Colophon room names become real links, so the close does something. */
.colophon a{ color:inherit; text-decoration:none; }
.colophon a:hover{ color:var(--accent); }

/* ==========================================================================
   Owner call: teacher shots in colour on arrival, not on hover.
   The four sources come from four apps at four background luminances, so
   instead of desaturating them we normalise brightness and let the scrim
   below carry each one into the card. Colour stays, the clash does not.
   ========================================================================== */
.dossier-photo{ filter:saturate(1.02) contrast(1.02); }
.dossier:hover .dossier-photo{ filter:saturate(1.1) contrast(1.04) brightness(1.04); }

/* The Amazon capture is white and would otherwise punch a hole in the page.
   A soft inner vignette seats it without touching the numbers. */
.dossier-media{ position:relative; display:block; overflow:hidden; }
.dossier-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,7,11,.06) 0%, rgba(6,7,11,.10) 58%, var(--surface-2) 100%),
    radial-gradient(130% 80% at 50% 0%, rgba(79,216,255,.10), transparent 64%);
}

/* ==========================================================================
   Regressions found in verification.
   ========================================================================== */

/* The band was two-tone: background was overridden to #0E1017 but the bleed
   shadow still pointed at var(--surface), so the centre 1140px and the gutters
   were different colours. Both must match. */
section.band{ box-shadow:0 0 0 100vmax #0E1017; }

/* The hero effect layer clips at the container edge, which drew two hard
   vertical seams against the full-bleed bands. Fade its contents out before
   the edge rather than repositioning anything inside it. */
.hero-fx{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* The candlesticks were running straight through the hero buttons at desktop.
   Move them into the empty right gutter instead of behind the copy. */
@media (min-width:900px){
  .hero-chart{ left:auto; right:0; width:56%; height:62%; bottom:-6%; opacity:.55; }
}

/* ==========================================================================
   Wordmark. Option 4: the owner's original layout with the padlock removed
   and no mark in its place. "Operation" in the sans over "Futures" in the
   display italic, cyan. Built by app.js from CONFIG.brand.name.
   ========================================================================== */
.wordmark{
  display:inline-grid; justify-items:start; line-height:.94;
  font-size:inherit; letter-spacing:normal; text-transform:none;
  text-decoration:none; white-space:nowrap; flex:none;
}
.wordmark .wm-a{
  font-family:var(--sans); font-weight:600; font-size:15px;
  letter-spacing:-.012em; color:var(--ink);
}
.wordmark .wm-b{
  font-family:var(--display); font-weight:740; font-style:italic;
  font-size:17px; letter-spacing:-.012em; color:var(--accent);
  margin-top:-1px;
}
.wordmark:hover .wm-b{ color:#7FE6FF; }

/* footer sits larger, it is the sign-off rather than a nav item */
.wordmark-lg .wm-a{ font-size:20px; }
.wordmark-lg .wm-b{ font-size:23px; }

/* the nav is 60px tall, so keep the lockup inside it */
@media (max-width:760px){
  .wordmark .wm-a{ font-size:14px; }
  .wordmark .wm-b{ font-size:16px; }
}

/* ==========================================================================
   Room photography is now natural-colour documentary work rather than
   cyan-graded renders, so it needs almost none of the treatment the old
   images did. Let the colour through and keep only enough of a bottom fade
   to carry the frame into the card.
   ========================================================================== */
.room-shot{ filter:none; }
.room:hover .room-shot{ filter:saturate(1.06) brightness(1.03); }
.room-media::after{
  background:linear-gradient(180deg, rgba(6,7,11,0) 0%, rgba(6,7,11,.10) 70%, var(--surface-2) 100%);
}

/* ---------- teacher credentials ----------
   Short checkable facts, one per line, ticked. Empty until the owner supplies
   them; nothing is ever invented into this list. */
.dossier-creds{
  list-style:none; margin:10px 0 0; padding:12px 0 0;
  border-top:1px solid var(--line); display:grid; gap:7px;
}
.dossier-creds li{
  position:relative; padding-left:18px;
  font-size:13.5px; line-height:1.5; color:var(--ink-soft);
}
.dossier-creds li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); opacity:.85;
}

/* ---------- teacher proof block ----------
   Names the outside party who vetted this person. Replaced an earnings-figure
   block on 2026-09-11: see CLAUDE.md. Cyan only, gold stays with the verdict. */
.dossier-proof{
  margin:14px 0 0; padding:13px 15px; border-radius:11px;
  background:linear-gradient(180deg, rgba(79,216,255,.09), rgba(79,216,255,.025));
  border:1px solid rgba(79,216,255,.20);
  /* The labels wrap to different line counts across the four cards. Without a
     floor, every row beneath them starts at a different height. Released below
     900px, where the cards stack and alignment stops mattering. */
  min-height:150px;
  display:flex; flex-direction:column; justify-content:center;
}
.dossier-proof-label{
  margin:0; display:flex; gap:8px; align-items:flex-start;
  font-family:var(--display); font-weight:740;
  font-size:17.5px; line-height:1.22; color:var(--accent); letter-spacing:-.008em;
}
/* Drawn, not a glyph: no font dependency and no emoji rendering surprises. */
.dossier-proof-tick{
  flex:0 0 auto; width:15px; height:15px; margin-top:3px; border-radius:50%;
  border:1.5px solid currentColor; position:relative;
}
.dossier-proof-tick::after{
  content:''; position:absolute; left:4px; top:2.5px; width:3.5px; height:6.5px;
  border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(42deg);
}
.dossier-proof-note{
  margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--ink-soft);
}
@media (max-width:900px){ .dossier-proof{ min-height:0; } }

/* Sits under the teacher grid. The point of the block above is that none of it
   rests on our word, so the line says exactly that. */
.figure-caveat{
  margin:18px 0 0; padding-top:15px; border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:76ch;
}

/* A screenshot of a real Discord room rather than a photo. Letterboxed so the
   whole channel list survives the card's wide crop. The Discord canvas is
   near-black already, so the bars read as part of the card. */
.room-shot.is-contain{
  object-fit:contain;
  background:#0b0c10;
  padding:10px 0;
}

/* ---------- mobile: swipe rails instead of stacked columns ----------
   Traffic is almost entirely phones arriving from a reel. Stacked one per row,
   the four room cards ran 3262px and the four teacher cards 5354px, which put
   the price at 12,282px: about screen 15 of 17. Turning both grids into the
   same scroll-snap rail the reels already use keeps every card full width and
   readable while collapsing each section to roughly one card tall.
   Desktop is untouched. */
@media (max-width:620px){
  .room-grid,
  .dossier-grid{
    display:grid; grid-auto-flow:column;
    grid-auto-columns:88%;               /* next card peeks, so the swipe is discoverable */
    grid-template-columns:none;
    gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; padding-bottom:12px;
    scrollbar-width:none;
    /* Bleed to the screen edges so a card can sit flush while the page keeps
       its gutter. Matches the full-bleed technique used elsewhere. */
    margin-inline:calc(var(--gutter, 20px) * -1);
    padding-inline:var(--gutter, 20px);
  }
  .room-grid::-webkit-scrollbar,
  .dossier-grid::-webkit-scrollbar{ display:none; }
  .room-grid > *,
  .dossier-grid > *{ scroll-snap-align:center; }

  /* The cards are equal-height siblings in a row now, so the proof box no
     longer needs its alignment floor, and the media can breathe. */
  .dossier-proof{ min-height:0; }
  .room-shot{ aspect-ratio:16/10; }
}

/* A rail is only obvious if something tells you to push it. */
.rail-hint{
  display:none; margin:10px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);
}
@media (max-width:620px){ .rail-hint{ display:block; } }

/* A tall screenshot in a landscape card. Anchor to the top so the account
   header survives the crop instead of the middle of a chart. */
.room-shot.is-top{ object-fit:cover; object-position:50% 0%; }

/* A supplied graphic rather than a photograph of a screen. Letterbox it so the
   figures survive, and skip the grayscale wash that exists to calm photos. */
.dossier-photo.is-contain{
  object-fit:contain; filter:none; background:#0b0c10; padding:8px 0;
}
.dossier:hover .dossier-photo.is-contain{ filter:none; transform:none; }

/* A very tall screenshot in a 4/5 slot. Anchor to the top so the browser chrome
   and the most recent rows survive, rather than centre-cropping mid-table. */
.dossier-photo.is-top{ object-fit:cover; object-position:50% 0%; filter:none; }
.dossier:hover .dossier-photo.is-top{ filter:none; }

/* The survey's enter animation translates #surveyRoot 14px sideways, which at
   375px pushed scrollWidth to 389 and gave a sideways rubber-band on every one
   of the twelve-plus question transitions. Nothing on this site is ever meant
   to scroll the page horizontally; the rails handle their own overflow. */
/* MUST be `clip`, not `hidden`. `overflow-x:hidden` forces overflow-y to
   `auto`, which turns <body> into its own scroll container. Every
   `position:sticky` element inside it then sticks to a scrollport that never
   scrolls, so it just scrolls away: that kills the nav Join pill (.nav, and
   nav.html says it must stay visible at every scroll position) and the
   survey progress bar. Worst on iOS WebKit, which is the Instagram in-app
   browser, which is nearly all of the traffic. `clip` suppresses the sideways
   scroll without creating a scroll container, so sticky keeps working. */
html, body { overflow-x: clip; }


/* The launch bar link was 68x34, under the 44px tap minimum, and it is the
   first interactive thing on the page. */
.launch-bar a{ display:inline-block; min-height:44px; line-height:44px; padding-inline:6px; }
@media (max-width:620px){
  /* The hero button sat at 567px on a 610px Instagram in-app viewport, so it
     was never fully on screen. Tighten the block that sits above it. */
  .hero{ padding-block:18px 32px; }
  .hero .stack-lg{ gap:18px; }
}

/* The charge terms were muted 14px grey under the CTA. Someone about to hand
   over a card has to be able to read when they get charged without hunting
   for it, so this is a bordered block at body size rather than fine print. */
.charge-note{
  margin:14px 0 0; padding:12px 14px; border-radius:11px;
  background:rgba(79,216,255,.05); border:1px solid rgba(79,216,255,.18);
  font-size:14.5px; line-height:1.55; color:var(--ink-soft); max-width:46ch;
}
.charge-note strong{ color:var(--ink); }

/* The result page's only buy button sat at 3,900px, roughly six screens under
   the verdict, with nothing actionable in between. This is the door placed at
   the moment of peak intent: right under the room name the survey just gave. */
.verdict-offer{
  margin-top:20px; padding:18px; border-radius:16px;
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.verdict-offer-price{ margin:0; font-size:15px; color:var(--ink-soft); letter-spacing:.01em; }
.verdict-offer-price b{ font-size:30px; color:var(--ink); letter-spacing:-.02em; }
.verdict-offer .btn{ width:100%; justify-content:center; }
.verdict-offer .charge-note{ margin:0; }
.verdict-offer-inc{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.5; }
@media (min-width:620px){ .verdict-offer .btn{ width:auto; min-width:280px; } }

/* The room name is injected into the CTA, so the label must behave as one
   unit inside the button's flex row rather than as separate items. */
.btn-label{ white-space:normal; }
.btn-label b{ font-weight:inherit; }

/* Offer terms and per-room costs were prose runs. On a phone people skim for
   shape, not sentences, so both are ticked lists now. */
.offer-list, .answer-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.offer-list li, .answer-list li{
  position:relative; padding-left:26px; line-height:1.5; color:var(--ink-soft);
}
.offer-list li{ font-size:17px; color:var(--ink); }
.offer-list li::before, .answer-list li::before{
  content:""; position:absolute; left:2px; top:.58em; width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.answer-list li b{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   VISUAL CORRECTIONS
   Measured at 390px, the width almost all of this traffic arrives at.
   ========================================================================== */

/* The primary button carried a 168deg gradient, an inset white bevel, a
   diagonal sheen streak and an 40px cyan glow. It is the largest object on
   the first screen and it repeats six times, so that gloss was the first
   thing anyone read about the business. Flat, in the actual token colour. */
.btn-primary{
  background:var(--accent) !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#04222C;
}
.btn-primary::after, .btn-primary::before{ display:none !important; }
.btn-join{
  background:var(--accent) !important;
  background-image:none !important;
  box-shadow:none !important;
  border-color:var(--accent);
}
.btn-join::after, .btn-join::before{ display:none !important; }
.btn-join:hover{ background:#6FE1FF !important; transform:none; }
.btn-primary:hover{ background:#6FE1FF !important; box-shadow:none !important; }

/* .nav-in is a flex row whose only spacer was .nav-links, which is
   display:none under 900px. That left 104px of dead space to the right of
   the header on a 390px screen. Padding matched to .wrap so the wordmark
   lines up with the h1 instead of sitting 4px left of it. */
.nav-in{ padding-left:20px; padding-right:20px; }
@media (max-width:900px){
  .nav-links + .nav-right{ margin-left:auto; }
}

/* .dark p { color: var(--ink-soft) } was beating both of these on
   specificity, so the price and its label rendered in body grey. The price
   is the single number the whole page is arguing about. */
.dark .price-tag, #offer .price-tag{ color:var(--ink); }
.dark p.label-accent{ color:var(--accent); }

/* h1 was clamping to 33.5px at 390 against a 27px h2, a 1.24x step, which is
   not a hierarchy. line-height was exactly 1.0 so descenders collided. */
h1, .hero h1{ font-size:clamp(38px, 10.2vw, 48px); line-height:1.06; }
h1 em{ font-weight:740; }

/* Uppercase mono at 11-13px with 1.95px tracking is the hardest type on the
   site to read, and it was set in the lowest-contrast grey on the site
   (4.71:1). This is 7.74:1 on the same background. */
.label, .sec-index, .rail-hint{ color:#9AA0B5; }
.rail-hint{ font-size:13px; }

/* Footer room links were 58x13px. Apple and WCAG both want 44px. */
.footer a, footer a{ padding-block:12px; display:inline-block; }

/* A teacher card ran 1015px, 1.66x the viewport, so the payout screenshot and
   the proof line explaining it were never on screen together. */
@media (max-width:620px){
  .dossier-photo{ aspect-ratio:3/2; }
}

/* These transforms sat outside the hover guard, so on a touch screen they
   fire on tap and then stick until you touch something else. */
@media (hover:none){
  .room:hover, .dossier:hover{ transform:none !important; }
  .room:hover .room-shot, .dossier:hover .dossier-photo{ transform:none !important; }
}

/* The cap restates the launch bar on purpose, directly above the button where
   the decision happens. The number is set as a quantity, not as body copy. */
.hero-cap{
  margin:2px 0 0; padding:11px 14px; border-radius:12px; max-width:46ch;
  background:rgba(79,216,255,.06); border:1px solid rgba(79,216,255,.3);
  font-size:15px; line-height:1.5; color:var(--ink-soft);
}
/* Inline, so "50 spots" sits in the text flow and spaces like any other two
   words. Size and colour still make the number the first thing read. */
.hero-cap b{
  font-size:18px; font-weight:700; color:var(--accent); letter-spacing:-.01em;
}