/* Altitude · home page ("The Session")
   Styles for `/` only. /start and /support keep css/site.css.

   Two render modes, both complete:
   · static  — no JS, or prefers-reduced-motion: every scene in its finished state, normal flow.
   · motion  — html.motion: pinned, scroll-scrubbed scenes driven by js/home.js.

   Device screens are drawn on a virtual canvas: inside a .vscreen, `--u` is one
   virtual pixel (the container's width / the canvas width), so the depicted app
   scales like a real screenshot while staying live, crisp text. */

/* ───────────────────────── Fonts ─────────────────────────
   Self-hosted Latin subsets (assets/fonts, SIL OFL 1.1, see OFL.txt there).
   Each face mirrors what Google Fonts declared: one face per weight, all
   pointing at the same variable file (the browser downloads it once). The
   fixed weights matter: the 650 headlines match the 700 face, as before.
   Geist is preloaded at high priority (index.html); the rest are used only
   inside the depicted screens and are preloaded at low priority. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-latin-var.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: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/geist-latin-var.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: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/geist-latin-var.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: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/geist-latin-var.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: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-var.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: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-var.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: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-var.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-400.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-500.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: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/space-grotesk-latin-var.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: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/space-grotesk-latin-var.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: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-grotesk-latin-var.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: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/figtree-latin-var.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: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/figtree-latin-var.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: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/figtree-latin-var.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: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/figtree-latin-var.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: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/figtree-latin-var.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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-latin-normal.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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-latin-italic.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; }
/* Metric-matched stand-in while Geist loads (Arial resized to Geist's average
   width and line metrics), so the swap barely moves anything. */
@font-face { font-family: "Geist Fallback"; font-weight: 100 500; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica Neue"); size-adjust: 104.27%; ascent-override: 96.38%; descent-override: 28.29%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Neue Bold"); size-adjust: 103.34%; ascent-override: 97.25%; descent-override: 28.55%; line-gap-override: 0%; }

:root {
  --bg: #07090D;
  --bg-2: #0A0D14;
  --bg-3: #0E1119;
  --navy: #12151F;
  --navy-2: #171B26;
  --navy-3: #1F2433;
  --ink: #F4F5F8;
  --ink-2: #C9CFDA;
  --mute: #8E97A8;
  --dim: #5F6879;
  --line: rgba(223, 228, 236, .08);
  --line-2: rgba(223, 228, 236, .13);
  --gold: #DFAE7B;
  --gold-hi: #F4E3CF;
  --gold-lo: #B98650;
  --gold-wash: rgba(223, 174, 123, .08);
  --gold-edge: rgba(223, 174, 123, .38);
  --font: "Geist", "Geist Fallback", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* the product's own type, used only inside depicted screens */
  --app-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --app-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 52px;
  --gutter: clamp(20px, 5vw, 64px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
html:not(.motion) { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
img { max-width: 100%; display: block; }
p { margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
figure { margin: 0; }
code, pre { font-family: var(--mono); }
pre { margin: 0; white-space: pre; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
summary::-webkit-details-marker { display: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gold); color: #12151F; padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.skip:focus { top: 12px; color: #12151F; }

.br-d { display: none; }
@media (min-width: 900px) { .br-d { display: inline; } }

/* ───────────────────────── Launch banner ───────────────────────── */

.live {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 16px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: linear-gradient(90deg, rgba(223,174,123,0) 0%, rgba(223,174,123,.10) 50%, rgba(223,174,123,0) 100%), #0B0D13;
  border-bottom: 1px solid rgba(223, 174, 123, .16);
  text-align: center;
}
.live strong { color: var(--ink); font-weight: 600; }
.live__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #E5484D; flex: none;
  box-shadow: 0 0 0 0 rgba(229, 72, 77, .5);
  animation: livepulse 2.2s ease-out infinite;
}
.live__link { color: var(--gold); font-weight: 500; white-space: nowrap; }
.live--replay .live__dot { display: none; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 70%,100% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } }
@media (max-width: 520px) { .live { font-size: 12.5px; gap: 4px 8px; } .live__when { display: block; } }

/* ───────────────────────── Nav ───────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(7, 9, 13, .72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav__inner {
  max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__word { font: 700 14px/1 var(--font); letter-spacing: .16em; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { color: var(--ink-2); font-size: 13.5px; transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
.nav__cta {
  font-size: 13.5px; font-weight: 600; color: #15120E; background: var(--gold);
  padding: 7px 15px; border-radius: 999px; transition: background .2s, transform .2s var(--ease);
}
.nav__cta:hover { background: var(--gold-hi); color: #15120E; }
@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
}

/* ───────────────────────── Type + buttons ───────────────────────── */

.eyebrow { font-size: 17px; font-weight: 600; color: var(--gold); letter-spacing: -.005em; margin-bottom: 14px; }
.h2 {
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 650;
  color: var(--ink);
  text-wrap: balance;
}
.h2--sm { font-size: clamp(34px, 4.4vw, 56px); }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--mute); margin-top: 20px; max-width: 640px; text-wrap: pretty; letter-spacing: -.01em; }
.section-head { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.section-head .lead { margin-left: auto; margin-right: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 17px/1 var(--font); letter-spacing: -.01em;
  border-radius: 999px; padding: 15px 26px; transition: background .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn--gold { background: var(--gold); color: #15120E; box-shadow: 0 10px 40px -12px rgba(223,174,123,.55); }
.btn--gold:hover { background: var(--gold-hi); color: #15120E; transform: translateY(-1px); }
.btn--lg { font-size: 18px; padding: 17px 32px; }
.btn--link { padding: 15px 6px; color: var(--gold); }
.btn--link:hover { color: var(--gold-hi); }

.caret { display: inline-block; width: .55em; height: 1.15em; vertical-align: -.2em; margin-left: 1px; background: var(--gold); border-radius: 1px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ───────────────────────── Hero → session ───────────────────────── */

.hero { position: relative; }
.hero__stage { position: relative; padding: clamp(56px, 9vh, 104px) var(--gutter) 64px; overflow: hidden; }
.hero__sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* The world (ported from "The Climb"): contour terrain in depth bands, stars,
   a dashed gold route with camps, the summit glow. Plain <img>/SVG, no library. */
.world__sky, .world__glow, .world__haze, .world__stars { position: absolute; inset: 0; }
.world__sky {
  background:
    radial-gradient(120% 70% at 70% 0%, rgba(34, 44, 68, .5), transparent 60%),
    linear-gradient(180deg, #04060A 0%, #070A10 40%, #0E1320 74%, #121827 100%);
}
.world__stars { width: 100%; height: 100%; opacity: .85; }
.world__glow { background: radial-gradient(30% 26% at 81% 36%, rgba(223, 174, 123, .10), transparent 70%); }
.world__box {
  --W: max(140vw, 172svh, 1180px);
  position: absolute; width: var(--W); height: calc(var(--W) * .625);
  left: calc(max(81%, 50% + 460px) - var(--W) * .6225);
  top: calc(36% - var(--W) * .0929);
}
.band { position: absolute; inset: 0; }
.band img, .route { position: absolute; inset: 0; width: 100%; height: 100%; }
.world__haze { background: linear-gradient(0deg, var(--bg) 0%, rgba(7, 9, 13, .82) 16%, rgba(7, 9, 13, .2) 42%, transparent 58%); }
.hero__glow {
  position: absolute; left: 50%; top: 62%; width: 140vw; height: 80vh; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(223,174,123,.12) 0%, rgba(223,174,123,.04) 35%, rgba(7,9,13,0) 70%);
}
.route { overflow: visible; }
.route__trail { fill: none; stroke: rgba(223, 174, 123, .38); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.route__line { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: .75; }
.route__glow { fill: none; stroke: rgba(240, 190, 130, .16); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: .75; }
.camp__halo { fill: rgba(223, 174, 123, .14); }
.camp__ring { fill: #0B0E16; stroke: rgba(223, 174, 123, .55); stroke-width: 1.5; }
.camp--done .camp__ring, .camp--now .camp__ring, .camp--summit .camp__ring { stroke: var(--gold); stroke-width: 1.7; }
.camp__dot { fill: var(--gold); }
.camp--now .camp__halo { fill: rgba(223, 174, 123, .22); }
.summit-beacon { transform-box: fill-box; transform-origin: center; animation: beacon 5s ease-in-out infinite; }
@keyframes beacon { 50% { opacity: .55; transform: scale(.86); } }
@media (max-width: 760px) {
  .world__box { --W: max(100vw, 150svh); left: calc(84% - var(--W) * .6225); top: calc(47% - var(--W) * .0929); }
  .world__glow { background: radial-gradient(50% 24% at 84% 47%, rgba(223, 174, 123, .10), transparent 70%); }
}

.hero__copy { position: relative; z-index: 2; text-align: center; max-width: 980px; margin: 0 auto; }
.hero__copy::before { /* a soft night behind the words, so they stay crisp over the terrain */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 120%; height: 130%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5, 7, 11, .62), rgba(5, 7, 11, .34) 55%, transparent); pointer-events: none;
}
.hero__title {
  font-size: clamp(44px, 6.6vw, 92px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 650;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, #FBEBD8 0%, #E8BC8B 38%, #DFAE7B 60%, #A9763F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .04em;
}
.hero__sub { margin: 26px auto 0; max-width: 640px; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.42; color: var(--mute); letter-spacing: -.012em; text-wrap: pretty; }
.hero__ctas { display: flex; gap: 10px 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 34px; }
/* The free-to-start line: quiet microcopy tied to the primary button. It sits
   in the button row on a row of its own: straight under the button on phones
   (before "See how it works"), under both buttons on wider screens. */
.hero__free { flex: 0 0 100%; order: 2; margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: #B0B8C4; letter-spacing: -.005em; text-wrap: balance; }
.hero__free strong { font-weight: 500; color: #DCE0E7; }
@media (max-width: 760px) {
  .hero__free { order: 0; margin: -2px auto 2px; max-width: 300px; font-size: 14px; }
}

.hero__device { --lw: min(1040px, calc(100vw - 2 * var(--gutter))); position: relative; z-index: 1; margin: clamp(48px, 7vh, 80px) auto 0; perspective: 2400px; perspective-origin: 50% 0%; }
.hero__beats {
  position: relative; z-index: 2; list-style: none; margin: 36px auto 0; padding: 0;
  display: flex; justify-content: center; gap: 10px 34px; flex-wrap: wrap;
  font-size: 15px; color: var(--mute);
}
.hero__beats li { display: flex; align-items: center; gap: 10px; }
.hero__beats li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ───────────────────────── Laptop ───────────────────────── */

.laptop {
  --lw: min(1040px, calc(100vw - 2 * var(--gutter)));
  position: relative;
  width: var(--lw);
  margin: 0 auto;
  transform-origin: 50% 100%;
}
.laptop__lid {
  position: relative;
  border-radius: calc(var(--lw) * .028) calc(var(--lw) * .028) calc(var(--lw) * .012) calc(var(--lw) * .012);
  padding: calc(var(--lw) * .016);
  background: linear-gradient(180deg, #23262E 0%, #15171C 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(0,0,0,.6);
}
.laptop__lid::before { /* camera */
  content: ""; position: absolute; top: calc(var(--lw) * .006); left: 50%; width: calc(var(--lw) * .005); height: calc(var(--lw) * .005);
  transform: translateX(-50%); border-radius: 50%; background: #2A2F3A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.laptop__screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--lw) * .01);
  background: #000;
}
.laptop__screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(122deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 34%); }
.laptop__power {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.07) 46%, rgba(255,255,255,0) 60%),
    #050608;
}
.laptop__base {
  position: relative;
  width: 114%;
  margin-left: -7%;
  height: calc(var(--lw) * .024);
  border-radius: 0 0 calc(var(--lw) * .04) calc(var(--lw) * .04) / 0 0 calc(var(--lw) * .02) calc(var(--lw) * .02);
  background: linear-gradient(180deg, #3A3E47 0%, #23262D 40%, #16181D 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 0 rgba(0,0,0,.6);
}
.laptop__base span {
  position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%);
  border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #1A1C21, #2A2D35);
}
.laptop__shadow {
  position: absolute; left: 4%; right: 4%; bottom: -26px; height: 40px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.75), rgba(0,0,0,0));
  filter: blur(6px); z-index: -1;
}

/* ───────────────────────── Virtual screens ───────────────────────── */

.vscreen { position: relative; container: vscreen / inline-size; width: 100%; overflow: hidden; }
.vscreen > * { --u: calc(100cqi / 1120); }

/* ─── Editor + agent terminal (journey step 03, the learner's own tools) ─── */
.ses { height: 100%; display: flex; flex-direction: column; min-height: 0; font-family: var(--mono); color: #C6D0DE; background: #0F121A; }
.ses__tabs { flex: none; display: flex; height: calc(var(--u) * 28); background: #0B0E15; border-bottom: 1px solid rgba(223,228,236,.06); }
.ses__tab { display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 13); font-size: calc(var(--u) * 10.5); color: #6B7689; border-right: 1px solid rgba(223,228,236,.05); }
.ses__tab--on { background: #0F121A; color: #E7ECF5; box-shadow: inset 0 calc(var(--u) * 2) 0 var(--gold); }
.ses__code { flex: 1; min-height: 0; padding: calc(var(--u) * 12) 0; font-size: calc(var(--u) * 11.5); line-height: calc(var(--u) * 21); overflow: hidden; }
.cl > span { white-space: pre; }
.cl { display: flex; position: relative; }
.cl b { flex: none; width: calc(var(--u) * 38); padding-right: calc(var(--u) * 13); text-align: right; color: #3D4763; font-weight: 400; }
.cl--todo span { color: #6B7689; }
.cl--you { background: linear-gradient(90deg, rgba(223,174,123,.10), rgba(223,174,123,0) 70%); }
.cl--you::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 2.5); background: var(--gold); }
.cl--you b { color: var(--gold); }
.ses__typed { color: #F4E3CF; }
.ses .k { color: #8FA3C2; } .ses .f { color: #E7ECF5; } .ses .s { color: #D9B88F; } .ses .c { color: #6B7689; font-style: italic; }
.ses__termhead { flex: none; display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 10); color: #6B7689; background: #0B0D13; border-top: 1px solid rgba(223,228,236,.08); border-bottom: 1px solid rgba(223,228,236,.05); }
.ses__termhead span:first-child { color: #C6D0DE; }
.ses__termhead span:first-child::before { content: ""; display: inline-block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #8BC49A; margin-right: calc(var(--u) * 7); vertical-align: calc(var(--u) * 1); }
.ses__log { flex: none; background: #0B0D13; padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); line-height: 1.55; }
.tl { margin: 0 0 calc(var(--u) * 5); color: #C6D0DE; }
.tl u { text-decoration: none; color: #8FA3C2; }
.tl--you { color: #F4F5F8; }
.tl--dim { color: #6B7689; }
.tl__p { color: var(--gold); }
.tl__dot2 { display: inline-block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #C6D0DE; margin-right: calc(var(--u) * 7); vertical-align: calc(var(--u) * 1); }
.tl--dim .tl__dot2 { background: #8BC49A; }

/* step 03: two windows side by side, the editor and the lesson page */
.win--duo { background: #07090D; padding: calc(var(--u) * 10); }
.duo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(var(--u) * 10); }
.duo__ed, .duo__page { display: flex; flex-direction: column; min-height: 0; border-radius: calc(var(--u) * 9); overflow: hidden; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 30) calc(var(--u) * -14) rgba(0,0,0,.8); }
.duo .win__bar { height: calc(var(--u) * 26); }
.duo .win__url { transform: none; font-size: calc(var(--u) * 10); padding: calc(var(--u) * 2) calc(var(--u) * 8); }
.duo .win__dots i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.duo__ed .ses { flex: 1; }
.lsn--mini { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #10131B; }
.lsn--mini .lp-top { height: calc(var(--u) * 36); }
.lsn--mini .lp-status { margin-left: auto; }
.lsn__mini { flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--u) * 8) calc(var(--u) * 16); display: flex; flex-direction: column; justify-content: flex-end; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 30)); mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 30)); }
.lsn__mini > * { flex: none; }
.lp-block--watch .lp-bhead { color: #C6D0DE; }
.lp-block--past { border-color: rgba(223,228,236,.1); box-shadow: none; }
.lp-watch { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12); font-weight: 500; color: #E7ECF5; }
.lp-pulse { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #8BC49A; box-shadow: 0 0 0 calc(var(--u) * 3) rgba(139,196,154,.18); }
.lp-mono { font: 400 calc(var(--u) * 11) var(--mono); color: #C6D0DE; margin-top: calc(var(--u) * 6) !important; }
.lp-small { font-size: calc(var(--u) * 10.5); color: #9AA5B8; line-height: 1.5; margin-top: calc(var(--u) * 5) !important; }
.lp-saves { font-size: calc(var(--u) * 10); color: #6B7689; margin: calc(var(--u) * 6) 0 calc(var(--u) * 8); }

/* ─── The lesson page. Recreated from the real page bundle
       (content/lesson-page/p1/page.html): same tokens, blocks and wording. ─── */
.vscreen--lesson { position: absolute; inset: 0; background: #10131B; }
.lsn { position: relative; height: 100%; display: flex; flex-direction: column; font-family: var(--app-sans); color: #E7ECF5; line-height: 1.55; }
.lsn__chrome { flex: none; height: calc(var(--u) * 30); display: flex; align-items: center; gap: calc(var(--u) * 14); padding: 0 calc(var(--u) * 12); background: #0A0C12; border-bottom: 1px solid rgba(223,228,236,.07); }
.lsn__tab { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 6); background: #12151F; font-size: calc(var(--u) * 10.5); color: #C6D0DE; white-space: nowrap; }
.lsn__tab b { color: var(--gold); font-weight: 400; }
.lsn__url { flex: 1; max-width: calc(var(--u) * 360); margin: 0 auto; transform: translateX(calc(var(--u) * -80)); text-align: center; font-size: calc(var(--u) * 10.5); color: #7B8597; background: #12151F; border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 2) calc(var(--u) * 10); }
.lp-top { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 14); background: #12151F; border-bottom: 1px solid rgba(223,228,236,.1); white-space: nowrap; }
.lp-brand { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); color: var(--gold); font-size: calc(var(--u) * 10.5); }
.lp-brand b { color: #E7ECF5; letter-spacing: .1em; font-weight: 700; font-size: calc(var(--u) * 11); }
.lp-proj { padding-left: calc(var(--u) * 16); border-left: 1px solid rgba(223,228,236,.1); font-size: calc(var(--u) * 11.5); color: #E7ECF5; }
.lp-proj i { font-style: normal; font-size: calc(var(--u) * 9); letter-spacing: .14em; text-transform: uppercase; color: #6B7689; margin-right: calc(var(--u) * 8); }
.lp-segs { display: flex; gap: calc(var(--u) * 4); margin-left: auto; }
.lp-segs i { width: calc(var(--u) * 26); height: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #2A3145; transition: background-color .4s, box-shadow .4s; }
.lp-segs i.d { background: #A88458; }
.lp-segs i.c { background: var(--gold); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(223,174,123,.12); }
.lp-step { font-size: calc(var(--u) * 11); color: #C6D0DE; }
.lp-status { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: 999px; border: 1px solid rgba(223,228,236,.12); font-size: calc(var(--u) * 10.5); color: #C6D0DE; }
.lp-status i { width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); border-radius: 50%; background: #8BC49A; transition: background-color .4s; }
.lp-status.closed i { background: #5C6B85; }
.lsn__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 38) minmax(0, 1fr) calc(var(--u) * 420); }
.lsn__rail { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 18); padding-top: calc(var(--u) * 18); background: #12151F; border-right: 1px solid rgba(223,228,236,.07); }
.lsn__rail i { font-style: normal; font-size: calc(var(--u) * 10.5); color: #6B7689; line-height: 1; }
.lsn__rail i.on { color: #C6D0DE; }
.lsn__convo { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(223,228,236,.1); }
/* Fills from the top. Once full, the filler (::after) collapses and
   justify-content: flex-end pushes older entries up and out of the top. */
.lsn__stream {
  flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--u) * 16) calc(var(--u) * 44) calc(var(--u) * 6);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 26));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 26));
}
.lsn__stream::after { content: ""; flex: 1 0 0; }
.lsn__stream > * { flex: none; }
/* the entries sit in one column; flex keeps their margins from collapsing */
.lsn__track { display: flex; flex-direction: column; }
.lsn__track > * { flex: none; }
.lp-stepm { display: flex; align-items: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 4) 0 calc(var(--u) * 14); font-size: calc(var(--u) * 9.5); letter-spacing: .12em; text-transform: uppercase; color: #9AA5B8; font-weight: 600; white-space: nowrap; }
.lp-stepm::before, .lp-stepm::after { content: ""; flex: 1; height: 1px; background: rgba(223,228,236,.1); }
.lp-stepm span { font: 400 calc(var(--u) * 9.5) var(--mono); letter-spacing: .02em; text-transform: none; color: #C6D0DE; padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: 999px; border: 1px solid rgba(223,228,236,.16); }
.lp-msg { margin-bottom: calc(var(--u) * 14); font-size: calc(var(--u) * 12.5); line-height: 1.6; color: #E7ECF5; }
.lp-msg p + p { margin-top: calc(var(--u) * 7); }
.lp-msg b { font-weight: 600; color: #F4F5F8; }
.lsn code { font-family: var(--mono); font-size: .86em; background: rgba(223,228,236,.06); border: 1px solid rgba(223,228,236,.08); border-radius: calc(var(--u) * 5); padding: 0 calc(var(--u) * 4); color: #C6D0DE; }
.lp-who { display: block; font-size: calc(var(--u) * 10); color: #9AA5B8; margin-bottom: calc(var(--u) * 2); }
.lp-block { margin-bottom: calc(var(--u) * 14); border: 1px solid rgba(223,174,123,.35); background: #1A1E2B; border-radius: calc(var(--u) * 11); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(223,174,123,.04); }
.lp-bhead { padding: calc(var(--u) * 8) calc(var(--u) * 14); border-bottom: 1px solid rgba(223,228,236,.07); font-size: calc(var(--u) * 9.5); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.lp-bhead--bare { padding: 0; border: 0; margin-bottom: calc(var(--u) * 6); }
.lp-bbody { padding: calc(var(--u) * 12) calc(var(--u) * 14); }
.lp-bq { font-size: calc(var(--u) * 12.5); line-height: 1.5; color: #E7ECF5; margin-bottom: calc(var(--u) * 10) !important; }
.lp-answered { background: #12151F; border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 8) calc(var(--u) * 11); font-size: calc(var(--u) * 12); color: #E7ECF5; }
.lp-meta { display: block; margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 9.5); color: #6B7689; }
.lp-lab { display: block; font-size: calc(var(--u) * 10); color: #9AA5B8; margin-bottom: calc(var(--u) * 4); }
.lp-input { min-height: calc(var(--u) * 46); background: #12151F; border: 1px solid rgba(223,174,123,.4); border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 8) calc(var(--u) * 10); font-size: calc(var(--u) * 12); color: #E7ECF5; }
.lp-input .caret { width: calc(var(--u) * 1.5); height: calc(var(--u) * 14); vertical-align: calc(var(--u) * -2.5); }
.lp-editor .caret { display: none; width: calc(var(--u) * 1.5); height: calc(var(--u) * 13); vertical-align: calc(var(--u) * -2.5); }
.lp-row { display: flex; justify-content: flex-end; margin-top: calc(var(--u) * 8); }
.lp-hint { font-size: calc(var(--u) * 10); color: #6B7689; }
.lsn .btn-mini--tint { background: rgba(223,174,123,.12); border-color: rgba(223,174,123,.35); color: var(--gold); }
.lp-compose { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 44); background: #12151F; border-top: 1px solid rgba(223,228,236,.1); font-size: calc(var(--u) * 11.5); color: #6B7689; }
.lp-compose span { flex: 1; background: #10131B; border: 1px solid rgba(223,228,236,.12); border-radius: calc(var(--u) * 9); padding: calc(var(--u) * 9) calc(var(--u) * 12); }
/* answered vs waiting: static shows the answered state */
[data-pred-open], [data-check-field] { display: none !important; }

.lsn__work { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: #10131B; }
.lp-tabs { display: flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 8) calc(var(--u) * 10); border-bottom: 1px solid rgba(223,228,236,.1); }
.lp-tabs span { padding: calc(var(--u) * 5) calc(var(--u) * 11); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 11); color: #9AA5B8; transition: background-color .3s, color .3s; }
.lp-tabs span.on { background: rgba(223,174,123,.12); color: var(--gold); }
.lp-tabs b { margin-left: auto; font-weight: 400; color: #6B7689; font-size: calc(var(--u) * 11); padding-right: calc(var(--u) * 4); }
.lp-pane { grid-row: 2; grid-column: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12) calc(var(--u) * 14); transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.lp-pane--target { opacity: 0; visibility: hidden; }
.lsn__work.show-target .lp-pane--target { opacity: 1; visibility: visible; transition-delay: 0s; }
.lsn__work.show-target .lp-pane--drill { opacity: 0; visibility: hidden; }
.lp-file { font: 400 calc(var(--u) * 11) var(--mono); color: #C6D0DE; }
.lp-code { margin: 0; background: #12151F; border: 1px solid rgba(223,228,236,.08); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 11) calc(var(--u) * 13); font-size: calc(var(--u) * 11.5); line-height: 1.7; color: #C6D0DE; }
.lp-code .k { color: #8FA3C2; } .lp-code .s { color: #D9B88F; } .lp-code .n { color: #8BC49A; } .lp-code .f { color: #E7ECF5; }
.lp-editor { flex: 1 1 auto; min-height: calc(var(--u) * 100); }
.lp-pv { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.lp-pv > div { background: #12151F; border: 1px solid rgba(223,228,236,.08); border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 7) calc(var(--u) * 10); }
.lp-pv > div + div { border-color: rgba(223,228,236,.18); }
.lp-pv code { background: none !important; border: 0 !important; padding: 0 !important; font-size: calc(var(--u) * 11) !important; color: #E7ECF5 !important; line-height: 1.6; }
.lp-predict { border: 1px solid rgba(223,174,123,.35); background: #1A1E2B; border-radius: calc(var(--u) * 11); padding: calc(var(--u) * 11) calc(var(--u) * 13); }
.lp-predict .lp-bq { margin-bottom: calc(var(--u) * 8) !important; }
.lp-input--pred { min-height: calc(var(--u) * 38); }
.lp-runrow { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 9); }
.lsn .lp-run { background: var(--gold); border-color: var(--gold); color: #171B26; transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, transform .2s; }
.lsn .lp-run.locked { background: transparent; border-color: rgba(223,228,236,.12); color: #55607E; }
.lsn .lp-run.ready { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(223,174,123,.16), 0 0 calc(var(--u) * 18) rgba(223,174,123,.45); }
.lsn .lp-run.press { transform: scale(.94); }
/* target view: the prototype part today's task builds, highlighted */
.lp-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid rgba(223,228,236,.1); border-radius: calc(var(--u) * 10); overflow: hidden; }
.lp-fhead { flex: none; padding: calc(var(--u) * 7) calc(var(--u) * 11); font-size: calc(var(--u) * 10.5); background: #171B26; border-bottom: 1px solid rgba(223,228,236,.08); }
.lp-fhead b { font-weight: 500; color: #E7ECF5; }
/* lesson complete */
.lp-cele { display: none; }

/* the learner's agent, beside the page (hero) */
/* static (no JS / reduced motion): a small card under the laptop */
.glimpse { display: block; width: min(340px, 100%); margin: 30px auto 0; border-radius: 10px; overflow: hidden; background: #0B0D13; border: 1px solid rgba(255,255,255,.1); font: 400 12px/1.55 var(--mono); color: #C6D0DE; text-align: left; }
html:not(.motion) .lsn .caret, html:not(.motion) .every .caret { display: none; }
html.motion .glimpse { display: none; }
@media (min-width: 1100px) {
  html.motion .glimpse {
    display: block; position: absolute; z-index: 3; margin: 0;
    --gw: clamp(236px, 18vw, 270px);
    width: var(--gw); left: max(14px, calc(50% - var(--lw, 1040px) / 2 - var(--gw) + 84px)); top: calc(var(--lw, 1040px) * .44);
    border-radius: 10px; overflow: hidden; background: #0B0D13;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5);
    font: 400 12px/1.55 var(--mono); color: #C6D0DE;
  }
}
.glimpse__bar { display: flex; align-items: center; gap: 12px; height: 26px; padding: 0 10px; background: #0A0C12; border-bottom: 1px solid rgba(223,228,236,.07); font-size: 10.5px; color: #6B7689; }
.glimpse__bar .win__dots i { width: 8px; height: 8px; }
.glimpse__body { padding: 10px 12px 12px; }
.glimpse__you { color: #F4F5F8; }
.glimpse__out { margin-top: 6px !important; color: #C6D0DE; }
.glimpse__out u { text-decoration: none; color: #8FA3C2; }
.glimpse__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #C6D0DE; margin-right: 7px; vertical-align: 1px; }

/* Phone-sized lesson page: the page's own narrow layout, on its own virtual canvas. */
@container (max-width: 560px) {
  .vscreen--lesson > * { --u: calc(100cqi / 400); }
  .lsn__chrome { display: none; }
  .lp-top { height: calc(var(--u) * 44); gap: calc(var(--u) * 10); }
  .lp-proj, .lp-segs { display: none; }
  .lp-step { margin-left: auto; }
  .lsn__cols { grid-template-columns: minmax(0, 1fr); position: relative; }
  .lsn__rail, .lp-compose { display: none; }
  .lsn__convo { border-right: 0; }
  .lsn__stream { padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 6); }
  .lp-msg, .lp-bq { font-size: calc(var(--u) * 13); }
  .lsn__work { display: none; }
}

/* ───────────────────────── Statement ───────────────────────── */

.statement { padding: clamp(120px, 22vh, 240px) var(--gutter); max-width: 1180px; margin: 0 auto; }
.statement__text {
  font-size: clamp(30px, 4.3vw, 58px);
  line-height: 1.14;
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: pretty;
}
.statement__text .w { transition: color .35s var(--ease); }
html.motion .statement__text .w { color: #2A2F3B; }
html.motion .statement__text .w.on { color: var(--ink); }
html.motion .statement__text .w.on.g { color: var(--gold); }

/* ───────────────────────── Journey ───────────────────────── */

.journey { padding: clamp(80px, 12vh, 140px) 0 clamp(100px, 14vh, 160px); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 18%, var(--bg-2) 82%, var(--bg) 100%); }
.journey__grid {
  max-width: 1320px; margin: clamp(56px, 9vh, 100px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
}
.jstep { order: calc(var(--row) * 2 - 1); max-width: 560px; }
.jscreen { order: calc(var(--row) * 2); margin-bottom: 64px; }
.jdevice { display: contents; }
.jdevice__laptop { display: none; }
.jstep__body code { font-size: .88em; color: var(--gold-hi); background: rgba(223,174,123,.08); border-radius: 5px; padding: 0 5px; }
.jroute, .jprogress { display: none; }
.jstep__num { font: 500 13px/1 var(--mono); color: var(--gold); letter-spacing: .02em; margin-bottom: 16px; }
.jstep__title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -.04em; font-weight: 650; text-wrap: balance; }
.jstep__body { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--mute); text-wrap: pretty; }

@media (min-width: 1024px) {
  .journey__grid { max-width: 1440px; grid-template-columns: 330px minmax(0, 1fr); column-gap: 56px; row-gap: 120px; align-items: center; }
  .jstep { grid-column: 1; grid-row: var(--row); order: 0; }
  .jscreen { grid-column: 2; grid-row: var(--row); order: 0; margin: 0; }
}

/* Motion + desktop: the device pins, steps scroll past it, screens swap. */
@media (min-width: 1024px) {
  html.motion .journey__grid { row-gap: 0; align-items: stretch; }
}
/* the route in the margin (wide screens): five camps, one per step, lighting as you pass them */
@media (min-width: 1200px) {
  html.motion .journey__grid { padding-left: calc(var(--gutter) + 72px); }
  html.motion .jdevice { --route: 72px; }
  html.motion .jroute {
    display: block; position: sticky; grid-column: 1; grid-row: 1 / span 5; align-self: start; justify-self: start;
    top: calc(var(--nav-h) + (100svh - var(--nav-h)) / 2 - 230px);
    width: 44px; height: 460px; margin-left: -76px; z-index: 2; pointer-events: none;
  }
  .jroute__read { position: absolute; left: 4px; top: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
  .jroute__foot { position: absolute; left: 4px; bottom: 0; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
  .jroute__svg { position: absolute; left: 0; top: 20px; width: 44px; height: 420px; overflow: visible; }
  .jroute__trail { fill: none; stroke: rgba(223, 174, 123, .3); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
  .jroute__line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(223,174,123,.5)); }
  .jroute__camps { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 20px; width: 44px; height: 420px; }
  .jroute__camps li { position: absolute; left: var(--x, 22px); top: var(--y); width: 0; height: 0; }
  .jroute__camps i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #0B0E16; border: 1.5px solid rgba(223,174,123,.4); transition: border-color .4s, background-color .4s, box-shadow .5s; }
  .jroute__camps b { display: none; }
  .jroute__camps li.passed i { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 2.6px, #0B0E16 3.2px); }
  .jroute__camps li.on i { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 3px, #0B0E16 3.6px); box-shadow: 0 0 0 6px rgba(223,174,123,.16), 0 0 18px rgba(223,174,123,.55); }
}
@media (min-width: 1024px) {
  html.motion .jstep { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; opacity: .22; transition: opacity .5s var(--ease); }
  html.motion .jstep.is-active { opacity: 1; }
  html.motion .jdevice {
    --dw: min(900px, calc(min(100vw, 1440px) - 2 * var(--gutter) - var(--route, 0px) - 330px - 56px - 60px), calc((100svh - var(--nav-h) - 72px) * 1.5));
    display: block; position: sticky; grid-column: 2; grid-row: 1 / span 5; width: var(--dw); justify-self: center;
    top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--dw) * .66) / 2);
    height: calc(var(--dw) * .66); align-self: start;
  }
  html.motion .jdevice__laptop { display: block; position: absolute; left: 0; top: 0; width: var(--dw); transition: opacity .6s var(--ease), transform .8s var(--ease-out); }
  html.motion .jdevice__laptop .laptop { --lw: var(--dw); }
  html.motion .jdevice .vscreen { container-name: vdevice; }
  html.motion .jdevice.on-phone .jdevice__laptop { opacity: 0; transform: scale(.94) translateY(20px); }
  html.motion .jscreen {
    position: absolute; z-index: 2;
    left: calc(var(--dw) * .016); top: calc(var(--dw) * .016);
    width: calc(var(--dw) * .968);
    opacity: 0; visibility: hidden; transform: scale(.985); filter: blur(2px);
    transition: opacity .55s var(--ease), transform .7s var(--ease-out), filter .55s var(--ease), visibility 0s linear .6s;
    border-radius: calc(var(--dw) * .01); overflow: hidden;
  }
  html.motion .jscreen.is-active { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
  html.motion .jscreen .win { border: 0; border-radius: 0; box-shadow: none; }
  html.motion .jscreen--phone { left: 50%; top: 0; width: auto; height: calc(var(--dw) * .66); margin-left: calc(var(--dw) * -.16); border-radius: 0; overflow: visible; transform: translateY(30px) scale(.96); }
  html.motion .jscreen--phone .phone { width: calc(var(--dw) * .32); }
  html.motion .jscreen--phone.is-active { transform: none; }
}

/* ─── Window chrome around each app screen ─── */
.win {
  --u: calc(100cqi / 1040);
  border-radius: 14px; overflow: hidden; background: #10131B;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  aspect-ratio: 16 / 10;
  font-family: var(--app-sans); color: #E7ECF5;
}
.win__bar { flex: none; height: calc(var(--u) * 34); display: flex; align-items: center; gap: calc(var(--u) * 14); padding: 0 calc(var(--u) * 14); background: #0A0C12; border-bottom: 1px solid rgba(223,228,236,.07); }
.win__url { flex: 1; max-width: calc(var(--u) * 420); margin: 0 auto; transform: translateX(calc(var(--u) * -30)); text-align: center; font: 400 calc(var(--u) * 12) var(--app-sans); color: #7B8597; background: #12151F; border-radius: calc(var(--u) * 7); padding: calc(var(--u) * 4) calc(var(--u) * 10); }
.app { flex: 1; min-height: 0; display: grid; }

/* tiny UI atoms shared by screens */
.mono-eyebrow { font: 500 calc(var(--u) * 10.5) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.mono-dim { font: 400 calc(var(--u) * 10.5) var(--mono); color: #6B7689; }
.btn-mini { font-style: normal; display: inline-flex; align-items: center; justify-content: center; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 8); font: 600 calc(var(--u) * 12) var(--app-sans); color: #C6D0DE; border: 1px solid rgba(223,228,236,.16); white-space: nowrap; }
.btn-mini--gold { background: var(--gold); border-color: var(--gold); color: #171B26; }
.bdg { display: inline-flex; align-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 9); border-radius: 999px; font: 500 calc(var(--u) * 11) var(--mono); }
.bdg--acc { border: 1px solid rgba(223,174,123,.4); background: rgba(223,174,123,.12); color: var(--gold); }

/* ─── S1 onboarding: interview + cards ─── */
.app--onboard { grid-template-columns: calc(var(--u) * 360) 1fr; }
.ob-chat { display: flex; flex-direction: column; min-height: 0; background: #171B26; border-right: 1px solid rgba(223,228,236,.08); }
.ob-chat__head { padding: calc(var(--u) * 18) calc(var(--u) * 22); border-bottom: 1px solid rgba(223,228,236,.07); display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.ob-chat__h { font: 600 calc(var(--u) * 20) / 1.15 var(--app-display); color: #E7ECF5; margin-top: calc(var(--u) * 8); letter-spacing: -.01em; }
.ob-chat__p { font-size: calc(var(--u) * 12.5); color: #9AA5B8; margin-top: calc(var(--u) * 4); line-height: 1.45; }
.ob-chat__log { flex: 1; min-height: 0; overflow: hidden; background: #12151F; padding: calc(var(--u) * 18) calc(var(--u) * 18); display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.bub { max-width: 88%; padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 16); font-size: calc(var(--u) * 12.5); line-height: 1.5; }
.bub--t { align-self: flex-start; border: 1px solid rgba(223,228,236,.08); background: #171B26; color: #C6D0DE; border-bottom-left-radius: calc(var(--u) * 6); }
.bub--y { align-self: flex-end; background: rgba(223,174,123,.12); color: #E7ECF5; border-bottom-right-radius: calc(var(--u) * 6); }
.ob-chat__compose { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); margin: calc(var(--u) * 14); padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 14); border: 1px solid rgba(223,228,236,.12); border-radius: calc(var(--u) * 10); background: #12151F; font-size: calc(var(--u) * 12); color: #6B7689; }
.ob-cards { padding: calc(var(--u) * 26) calc(var(--u) * 32); display: flex; flex-direction: column; gap: calc(var(--u) * 12); background: #10131B; min-height: 0; overflow: hidden; }
.ob-cards__head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 4); }
.ob-cards__head h4 { font: 600 calc(var(--u) * 19) var(--app-display); color: #E7ECF5; }
.ob-cards__head span { font: 400 calc(var(--u) * 10.5) var(--mono); color: #6B7689; }
.cand { border: 1px solid rgba(223,228,236,.08); border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 16) calc(var(--u) * 22); transition: border-color .5s, background .5s; }
.cand p { font-size: calc(var(--u) * 12.5); color: #9AA5B8; line-height: 1.5; margin-top: calc(var(--u) * 6); }
.cand__top { display: flex; align-items: baseline; gap: calc(var(--u) * 10); flex-wrap: wrap; }
.cand__top b { font: 600 calc(var(--u) * 16) var(--app-display); color: #E7ECF5; }
.cand__fit { border: 1px solid rgba(223,174,123,.4); background: rgba(223,174,123,.12); color: var(--gold); border-radius: 999px; padding: calc(var(--u) * 2) calc(var(--u) * 8); font: 400 calc(var(--u) * 10) var(--mono); }
.cand__meta { margin-left: auto; font: 400 calc(var(--u) * 11) var(--mono); color: #6B7689; }
.cand__stack { display: flex; gap: calc(var(--u) * 10); align-items: center; margin-top: calc(var(--u) * 10); font: 400 calc(var(--u) * 11) var(--mono); color: var(--gold); }
.cand__lbl { font-size: calc(var(--u) * 9.5); letter-spacing: .08em; text-transform: uppercase; color: #6B7689; }
.cand__tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 10); }
.cand__tags span { border: 1px solid rgba(223,228,236,.14); border-radius: 999px; padding: calc(var(--u) * 3) calc(var(--u) * 10); font: 400 calc(var(--u) * 10.5) var(--mono); color: #9AA5B8; }
.cand__why { font-size: calc(var(--u) * 11.5) !important; color: #6B7689 !important; margin-top: calc(var(--u) * 10) !important; }
.cand--on { border-color: var(--gold); background: rgba(223,174,123,.07); }
.cand:not(.cand--on) { opacity: .8; }

/* ─── S2 prototype studio ─── */
.app--proto { grid-template-columns: calc(var(--u) * 250) 1fr calc(var(--u) * 256); }
.ob-chat--slim .ob-chat__h { font-size: calc(var(--u) * 17); }
.ob-divider { display: flex; align-items: center; gap: calc(var(--u) * 6); font: 400 calc(var(--u) * 9) var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.ob-divider::before, .ob-divider::after { content: ""; flex: 1; height: 1px; background: rgba(223,174,123,.35); }
.ob-divider span { text-align: center; max-width: 75%; }
.proto { padding: calc(var(--u) * 20) calc(var(--u) * 22); min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 12); background: #10131B; }
.proto__title { font: 600 calc(var(--u) * 17) var(--app-display); color: #E7ECF5; letter-spacing: -.01em; }
/* the learner's own app: deliberately its own look (light, bookish) */
.pside { padding: calc(var(--u) * 20) calc(var(--u) * 18); display: flex; flex-direction: column; gap: calc(var(--u) * 8); background: #10131B; border-left: 1px solid rgba(223,228,236,.06); min-height: 0; }
.pside__build { display: flex; align-items: center; justify-content: center; height: calc(var(--u) * 42); border-radius: calc(var(--u) * 8); background: var(--gold); color: #171B26; font: 600 calc(var(--u) * 14) var(--app-sans); }
.pside__est { font: 400 calc(var(--u) * 10) / 1.5 var(--mono); color: #6B7689; }
.feat { margin-top: calc(var(--u) * 8); border: 1px solid rgba(223,228,236,.08); background: #1F2433; border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 14); }
.feat__head { display: flex; justify-content: space-between; font: 400 calc(var(--u) * 10.5) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #C6D0DE; }
.feat__head b { font-weight: 400; color: var(--gold); letter-spacing: 0; }
.feat__hint { font-size: calc(var(--u) * 10.5); line-height: 1.45; color: #9AA5B8; margin: calc(var(--u) * 6) 0 calc(var(--u) * 10) !important; }
.feat__sub { display: block; font: 400 calc(var(--u) * 9) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6B7689; }
.feat__sub--lot { margin-top: calc(var(--u) * 12); padding-top: calc(var(--u) * 10); border-top: 1px dashed rgba(223,228,236,.14); }
.feat ul { list-style: none; margin: calc(var(--u) * 4) 0 0; padding: 0; display: grid; gap: calc(var(--u) * 2); }
.feat li { position: relative; padding: calc(var(--u) * 6) calc(var(--u) * 8) calc(var(--u) * 6) calc(var(--u) * 22); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 12); color: #E7ECF5; border: 1px solid transparent; }
.feat li::before { content: ""; position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 13); width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--gold); }
.feat li i { font-style: normal; margin-left: calc(var(--u) * 6); white-space: nowrap; border: 1px solid rgba(223,174,123,.35); border-radius: calc(var(--u) * 4); padding: 0 calc(var(--u) * 4); font: 400 calc(var(--u) * 8.5) var(--mono); color: var(--gold); vertical-align: calc(var(--u) * 1); }
.feat li.hl { border-color: rgba(223,174,123,.35); background: rgba(223,174,123,.07); }
.feat__lot { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 6); }
.feat__lot span { border: 1px dashed rgba(223,228,236,.14); border-radius: 999px; padding: calc(var(--u) * 3) calc(var(--u) * 9); font-size: calc(var(--u) * 10.5); color: #9AA5B8; }

/* ─── The learner's prototype: "Tuesday Readers" (Book Club Organizer) ───
   Drawn the way the real studio frames a prototype: a mobile website in a
   phone's browser (390×740 viewport, status bar, address bar, home bar).
   Inside .pf, --p is one CSS pixel of that 390px-wide phone viewport.
   Type comes from the real prototype font menu (Instrument Serif + Figtree). */
.pf {
  container: pf / inline-size;
  position: relative; flex: none;
  aspect-ratio: 410 / 882;
  padding: 2.439%;
  border-radius: 12.68% / 5.9%;
  background: #1B1F27;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.85);
}
.pf__screen {
  --p: calc(100cqi / 390);
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: calc(var(--p) * 42); background: #F6F6F7; color: #111318;
  font-family: "Figtree", var(--app-sans);
}
.pf__status { flex: none; height: calc(var(--p) * 44); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--p) * 28); font: 600 calc(var(--p) * 15) / 1 -apple-system, "Geist", sans-serif; color: #111318; }
.pf__island { width: calc(var(--p) * 96); height: calc(var(--p) * 26); border-radius: 999px; background: #1B1F27; }
.pf__sys { display: flex; align-items: center; gap: calc(var(--p) * 6); }
.pf__bars { display: flex; align-items: flex-end; gap: calc(var(--p) * 2); }
.pf__bars i { display: block; width: calc(var(--p) * 3); border-radius: calc(var(--p) * 1); background: #111318; }
.pf__bars i:nth-child(1) { height: calc(var(--p) * 5); } .pf__bars i:nth-child(2) { height: calc(var(--p) * 7); }
.pf__bars i:nth-child(3) { height: calc(var(--p) * 9); } .pf__bars i:nth-child(4) { height: calc(var(--p) * 11); }
.pf__batt { width: calc(var(--p) * 22); height: calc(var(--p) * 11); padding: calc(var(--p) * 1); border-radius: calc(var(--p) * 3); border: 1px solid rgba(17,19,24,.5); }
.pf__batt i { display: block; width: 72%; height: 100%; border-radius: calc(var(--p) * 1.5); background: #111318; }
.pf__addr { flex: none; height: calc(var(--p) * 52); display: flex; align-items: center; padding: 0 calc(var(--p) * 12); border-bottom: 1px solid #DCDDE1; }
.pf__addr > span { flex: 1; height: calc(var(--p) * 36); display: flex; align-items: center; justify-content: center; gap: calc(var(--p) * 6); border-radius: calc(var(--p) * 12); background: #E4E5E9; font: 400 calc(var(--p) * 14) / 1 -apple-system, "Geist", sans-serif; color: #2B2F38; }
.pf__addr svg { width: calc(var(--p) * 12); height: calc(var(--p) * 12); color: #5B6070; }
.pf__view { flex: none; height: calc(var(--p) * 740); overflow: hidden; position: relative; }
.pf__home { flex: none; height: calc(var(--p) * 26); display: flex; align-items: center; justify-content: center; background: #F5F0E8; }
.pf__home i { width: calc(var(--p) * 134); height: calc(var(--p) * 5); border-radius: 999px; background: #111318; }

/* the app */
.tr {
  min-height: 100%; display: flex; flex-direction: column; gap: calc(var(--p) * 12);
  padding: 0 calc(var(--p) * 18) calc(var(--p) * 18);
  background: #F5F0E8; color: #1D1A17;
  font: 400 calc(var(--p) * 15) / 1.35 "Figtree", var(--app-sans);
  letter-spacing: -.005em;
}
.pf [data-part] { outline: calc(var(--p) * 3) solid transparent; outline-offset: calc(var(--p) * 2); transition: outline-color .35s var(--ease), box-shadow .45s var(--ease); }
.tr__top { flex: none; height: calc(var(--p) * 54); display: flex; align-items: center; gap: calc(var(--p) * 10); margin-bottom: calc(var(--p) * -4); }
.tr__mark { display: grid; place-items: center; width: calc(var(--p) * 32); height: calc(var(--p) * 32); border-radius: 50%; background: #8E3B2B; color: #F8E9D8; }
.tr__mark svg { width: calc(var(--p) * 18); height: calc(var(--p) * 18); }
.tr__name { font: 400 calc(var(--p) * 25) / 1 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; color: #1D1A17; }
.tr__faces { margin-left: auto; display: flex; padding-left: calc(var(--p) * 8); }
.av {
  display: grid; place-items: center; flex: none;
  width: calc(var(--p) * 28); height: calc(var(--p) * 28); margin-left: calc(var(--p) * -8); border-radius: 50%;
  border: calc(var(--p) * 2) solid #F5F0E8; font: 700 calc(var(--p) * 11.5) / 1 "Figtree", sans-serif; font-style: normal; color: #fff;
}
.av--m { background: #C9704F; } .av--d { background: #4F7A6A; } .av--a { background: #6C6FA8; }
.av--j { background: #C29A3A; } .av--r { background: #3F6D8C; }
.av--more { background: #E7DFD2; color: #6F665C; font-size: calc(var(--p) * 10.5); }
.tr__tabs { flex: none; display: flex; padding: calc(var(--p) * 4); border-radius: calc(var(--p) * 13); background: #EAE2D5; }
.tr__tabs span { flex: 1; text-align: center; padding: calc(var(--p) * 8) 0; border-radius: calc(var(--p) * 10); font-size: calc(var(--p) * 14); font-weight: 600; color: #7A7066; }
.tr__tabs .on { background: #FFFDF9; color: #1D1A17; box-shadow: 0 1px 2px rgba(60,40,20,.12), 0 calc(var(--p) * 2) calc(var(--p) * 8) rgba(60,40,20,.06); }

/* now reading: the cover's own night-blue, Apple Music style */
.tr__now {
  position: relative; flex: none; padding: calc(var(--p) * 16) calc(var(--p) * 18) calc(var(--p) * 14);
  border-radius: calc(var(--p) * 22); color: #F7F0E6; isolation: isolate;
  background:
    radial-gradient(90% 75% at 100% 0%, rgba(98, 172, 182, .5), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(223, 174, 123, .2), transparent 70%),
    linear-gradient(160deg, #1E4862 0%, #12304A 48%, #0B1D2E 100%);
  box-shadow: 0 calc(var(--p) * 16) calc(var(--p) * 30) calc(var(--p) * -14) rgba(12, 30, 46, .6);
}
.tr__nowmain { display: flex; align-items: flex-end; gap: calc(var(--p) * 16); }
.tr .tr__nowcv { flex: none; width: calc(var(--p) * 92); transform: rotate(-3deg) translateY(calc(var(--p) * -2)); box-shadow: 0 calc(var(--p) * 14) calc(var(--p) * 24) calc(var(--p) * -6) rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.tr__nowtx { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-bottom: calc(var(--p) * 2); }
.tr__eye { font-size: calc(var(--p) * 11); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #F2CF9A; }
.tr__nowt { margin-top: calc(var(--p) * 6); font: 400 calc(var(--p) * 42) / .95 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; color: #FFF8EE; }
.tr__nowa { margin-top: calc(var(--p) * 5); font-size: calc(var(--p) * 14); color: #C4D3DA; }
.tr__mine { display: inline-flex; align-items: center; gap: calc(var(--p) * 5); margin-top: calc(var(--p) * 12); padding: calc(var(--p) * 6) calc(var(--p) * 11) calc(var(--p) * 6) calc(var(--p) * 8); border-radius: 999px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font-size: calc(var(--p) * 12.5); font-weight: 600; color: #FFF8EE; }
.tr__mine svg { width: calc(var(--p) * 14); height: calc(var(--p) * 14); color: #9EE2B4; }
.tr__prog { display: flex; flex-wrap: wrap; align-items: center; margin-top: calc(var(--p) * 12); padding-top: calc(var(--p) * 12); border-top: 1px solid rgba(255,255,255,.12); }
.tr__faces--sm { margin-left: 0; }
.tr__faces--sm .av { width: calc(var(--p) * 24); height: calc(var(--p) * 24); border-color: #133149; font-size: calc(var(--p) * 10); }
.tr__progl { margin-left: calc(var(--p) * 10); font-size: calc(var(--p) * 13.5); color: #D2DEE3; }
.tr__progl b { color: #FFF8EE; font-weight: 700; }
.tr__meter { flex: 1 0 100%; display: flex; gap: calc(var(--p) * 4); margin-top: calc(var(--p) * 11); }
.tr__meter i { flex: 1; height: calc(var(--p) * 5); border-radius: 999px; background: rgba(255,255,255,.15); }
.tr__meter i.f { background: linear-gradient(90deg, #F2CF9A, #E9B87E); box-shadow: 0 0 calc(var(--p) * 8) rgba(242, 207, 154, .35); }

/* next meeting */
.tr__meet { flex: none; display: flex; align-items: center; gap: calc(var(--p) * 14); padding: calc(var(--p) * 10) calc(var(--p) * 14) calc(var(--p) * 10) calc(var(--p) * 10); border-radius: calc(var(--p) * 18); background: #FFFDF9; border: 1px solid #ECE3D6; box-shadow: 0 calc(var(--p) * 8) calc(var(--p) * 20) calc(var(--p) * -12) rgba(60,40,20,.3); }
.tr__date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(var(--p) * 54); padding: calc(var(--p) * 6) 0 calc(var(--p) * 7); border-radius: calc(var(--p) * 13); background: linear-gradient(170deg, #9C4532, #7E3324); color: #FBEBDD; }
.tr__date span { font-size: calc(var(--p) * 10.5); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.tr__date b { font-size: calc(var(--p) * 25); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.tr__meettx { display: flex; flex-direction: column; gap: calc(var(--p) * 1); min-width: 0; }
.tr__k { font-size: calc(var(--p) * 11); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8E3B2B; }
.tr__meettx b { font-size: calc(var(--p) * 17); font-weight: 700; letter-spacing: -.015em; color: #1D1A17; }
.tr__meettx > span:last-child { font-size: calc(var(--p) * 13.5); color: #7A7066; }
.tr__chev { margin-left: auto; font-size: calc(var(--p) * 26); line-height: 1; color: #B5AA9C; }

/* the shelf */
.tr__shelf { flex: none; display: flex; flex-direction: column; gap: calc(var(--p) * 11); }
.tr__sh { display: flex; align-items: baseline; }
.tr__sh b { font: 400 calc(var(--p) * 27) / 1 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; }
.tr__sh span { margin-left: auto; font-size: calc(var(--p) * 13); font-weight: 600; color: #8A8073; }
.tr__row { display: flex; gap: calc(var(--p) * 14); margin-right: calc(var(--p) * -18); overflow: hidden; }
.tr__bk { flex: none; width: calc(var(--p) * 106); margin: 0; }
.tr__bk figcaption { margin-top: calc(var(--p) * 8); }
.tr__bk b { display: block; font-size: calc(var(--p) * 13.5); font-weight: 700; line-height: 1.25; color: #1D1A17; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__st { display: block; margin-top: calc(var(--p) * 2); font-size: calc(var(--p) * 12); color: #8A8073; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__st--up { display: inline-block; margin-top: calc(var(--p) * 4); padding: calc(var(--p) * 2) calc(var(--p) * 8); border-radius: 999px; background: #F4DDD3; color: #8E3B2B; font-weight: 700; }
.tr__add { display: flex; align-items: center; gap: calc(var(--p) * 10); margin-top: calc(var(--p) * 4); padding: calc(var(--p) * 6) calc(var(--p) * 6) calc(var(--p) * 6) calc(var(--p) * 15); border-radius: calc(var(--p) * 14); background: #FFFDF9; border: 1px solid #E3D9CB; }
.tr__add span { flex: 1; font-size: calc(var(--p) * 15); color: #A39686; }
.tr__add i { font-style: normal; padding: calc(var(--p) * 9) calc(var(--p) * 17); border-radius: calc(var(--p) * 10); background: #8E3B2B; color: #FFF6EC; font-size: calc(var(--p) * 14); font-weight: 700; }

.tr__fab { position: absolute; right: calc(var(--p) * 16); bottom: calc(var(--p) * 18); display: inline-flex; align-items: center; gap: calc(var(--p) * 7); padding: calc(var(--p) * 13) calc(var(--p) * 19) calc(var(--p) * 13) calc(var(--p) * 15); border-radius: 999px; background: #8E3B2B; color: #FFF6EC; font: 700 calc(var(--p) * 15) / 1 "Figtree", sans-serif; box-shadow: 0 calc(var(--p) * 12) calc(var(--p) * 24) calc(var(--p) * -8) rgba(90, 30, 18, .6), inset 0 1px 0 rgba(255,255,255,.18); }
.tr__fab svg { width: calc(var(--p) * 18); height: calc(var(--p) * 18); }

/* pointing at a feature outlines it in the prototype (the studio's real highlight) */
[data-hl="shelf"] [data-part="shelf"], [data-hl="add"] [data-part="add"],
[data-hl="now"] [data-part="now"], [data-hl="meet"] [data-part="meet"] {
  outline-color: #D9822B; box-shadow: 0 0 0 calc(var(--p) * 7) rgba(217, 130, 43, .28);
}
[data-hl="now"] [data-part="now"] { box-shadow: 0 0 0 calc(var(--p) * 7) rgba(217, 130, 43, .28), 0 calc(var(--p) * 16) calc(var(--p) * 30) calc(var(--p) * -14) rgba(12, 30, 46, .6); }
.feat li { transition: border-color .35s var(--ease), background-color .35s var(--ease); }

/* the lesson page's staged picture: later parts are labelled boxes, today's part is outlined */
.tr__ph {
  flex: none; min-height: calc(var(--p) * 40); display: grid; place-items: center; padding: calc(var(--p) * 9) calc(var(--p) * 10);
  border: calc(var(--p) * 1.5) dashed #8A93A3; border-radius: calc(var(--p) * 6); background: #F1F3F6; color: #4A5262;
  font: 600 calc(var(--p) * 13) / 1.1 -apple-system, "Geist", system-ui, sans-serif; text-align: center;
}
.tr__shelf--now { outline: calc(var(--p) * 3) solid #D9822B; outline-offset: calc(var(--p) * 3); border-radius: calc(var(--p) * 4); box-shadow: 0 0 0 calc(var(--p) * 9) rgba(217, 130, 43, .22); }
.tr__shelf--now .tr__row { margin-right: 0; gap: calc(var(--p) * 13); }

/* ─── Book covers: drawn in CSS, each sized by its own width (cqi) ─── */
.cv {
  container-type: inline-size; position: relative; isolation: isolate; overflow: hidden;
  width: 100%; aspect-ratio: 2 / 3; display: flex; flex-direction: column;
  border-radius: 3% / 2%; color: #fff; text-align: center;
  box-shadow: 0 1px 1px rgba(40,25,10,.18), 0 10px 18px -8px rgba(40,25,10,.5);
}
.cv::after { /* spine crease + a little sheen */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(255,255,255,.2) 2.6%, rgba(0,0,0,.1) 5.5%, rgba(0,0,0,0) 10%),
    linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%);
}
.cv__art { position: absolute; z-index: 0; }
.cv__t, .cv__a { position: relative; z-index: 2; display: block; margin-left: 10cqi; margin-right: 10cqi; }
.cv__t { margin-top: 12cqi; font: 400 15cqi / 1 "Instrument Serif", Georgia, serif; }
.cv__a { margin-top: auto; margin-bottom: 9cqi; font: 600 5.6cqi / 1.2 "Figtree", sans-serif; letter-spacing: .2em; text-transform: uppercase; }

/* Piranesi: a lit hall arch over the tide */
.cv--piranesi { background: radial-gradient(60% 38% at 50% 44%, rgba(132, 196, 206, .38), transparent 70%), linear-gradient(180deg, #23506E 0%, #163650 52%, #0C2234 100%); }
.cv--piranesi .cv__t { letter-spacing: .16em; text-transform: uppercase; font-size: 13.5cqi; color: #F0E4C8; }
.cv--piranesi .cv__a { color: rgba(240, 228, 200, .78); }
.cv--piranesi .cv__art { left: 50%; top: 31%; width: 46cqi; height: 58cqi; transform: translateX(-50%); border: 1.8cqi solid rgba(240, 228, 200, .88); border-bottom: 0; border-radius: 23cqi 23cqi 0 0; box-shadow: inset 0 0 0 4cqi rgba(240,228,200,.06), 0 0 10cqi rgba(160, 214, 222, .25); }
.cv--piranesi .cv__art::before { content: ""; position: absolute; left: 50%; top: -16cqi; width: 1.4cqi; height: 12cqi; transform: translateX(-50%); background: rgba(240,228,200,.6); border-radius: 1cqi; }
.cv--piranesi::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 66%; height: 22%; background: repeating-linear-gradient(180deg, rgba(170, 220, 228, .42) 0 .9cqi, transparent .9cqi 4.2cqi); -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }

/* Tomorrow, and Tomorrow, and Tomorrow: bright pixel-era waves */
.cv--tomorrow { background: #E8573E; text-align: left; }
.cv--tomorrow .cv__t { font: 800 10.4cqi / .98 "Figtree", sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: #FFF4E4; }
.cv--tomorrow .cv__a { margin-top: 5cqi; margin-bottom: 0; color: #FFE0C8; letter-spacing: .14em; }
.cv--tomorrow .cv__art { left: -20%; right: -20%; bottom: 0; height: 47%; background: repeating-radial-gradient(circle at 50% 118%, #F6C548 0 5cqi, #E8573E 5cqi 10cqi, #1F8A7E 10cqi 15cqi, #F4EBDD 15cqi 20cqi); }

/* The Remains of the Day: a low sun over the estate */
.cv--remains { background: linear-gradient(180deg, #F4E8D4 0%, #EBD3B0 100%); color: #3A2A1E; }
.cv--remains .cv__t { font-style: italic; font-size: 14cqi; color: #3A2A1E; }
.cv--remains .cv__a { color: #EADCC4; }
.cv--remains .cv__art { left: 50%; top: 42%; width: 48cqi; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 38%, #E9824F, #C2502C 70%); box-shadow: 0 0 14cqi rgba(226, 119, 74, .45); }
.cv--remains::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 36%; background: repeating-linear-gradient(180deg, transparent 0 3.4cqi, rgba(0,0,0,.18) 3.4cqi 4cqi), linear-gradient(180deg, #46543F, #2D382B); }

/* Station Eleven: a night sky and a ring of light */
.cv--station { background: radial-gradient(80% 55% at 50% 42%, #22314F 0%, #0D1220 72%); color: #E8BE78; justify-content: flex-end; }
.cv--station .cv__t { order: 2; margin-top: auto; font: 700 8.6cqi / 1.1 "Figtree", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #E8BE78; }
.cv--station .cv__a { order: 3; margin-top: 3cqi; color: rgba(232, 190, 120, .7); letter-spacing: .16em; }
.cv--station .cv__art { inset: 0; background:
  radial-gradient(circle at 18% 16%, #fff 0 .7cqi, transparent 1.1cqi), radial-gradient(circle at 74% 11%, #fff 0 .5cqi, transparent .9cqi),
  radial-gradient(circle at 86% 30%, #fff 0 .8cqi, transparent 1.2cqi), radial-gradient(circle at 30% 34%, rgba(255,255,255,.7) 0 .45cqi, transparent .8cqi),
  radial-gradient(circle at 62% 22%, rgba(255,255,255,.8) 0 .5cqi, transparent .9cqi), radial-gradient(circle at 10% 52%, rgba(255,255,255,.6) 0 .5cqi, transparent .9cqi),
  radial-gradient(circle at 90% 58%, rgba(255,255,255,.7) 0 .6cqi, transparent 1cqi), radial-gradient(circle at 46% 8%, rgba(255,255,255,.6) 0 .4cqi, transparent .8cqi); }
.cv--station::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 40%; width: 54cqi; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: .9cqi solid rgba(232, 190, 120, .85); box-shadow: 0 0 9cqi rgba(232, 190, 120, .35), inset 0 0 9cqi rgba(232, 190, 120, .2); }

/* The Overstory: the rings of a felled tree */
.cv--overstory { background: linear-gradient(180deg, #2F604A 0%, #234A38 100%); color: #F1E8D2; }
.cv--overstory .cv__t { font-size: 14.5cqi; color: #F3EAD3; }
.cv--overstory .cv__a { color: rgba(243, 234, 211, .75); }
.cv--overstory .cv__art { left: 50%; top: 56%; width: 88cqi; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #C79A5B 0 2.4cqi, transparent 2.6cqi), repeating-radial-gradient(circle, #B88A50 0 1cqi, #8F6A3C 1cqi 1.6cqi, #A57A45 1.6cqi 3.4cqi); box-shadow: 0 0 0 2.4cqi #5A4128, 0 2cqi 6cqi rgba(0,0,0,.35); }

/* where the prototype sits in the studio */
.proto__stage { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.proto__stage::before { /* a soft light under the phone */
  content: ""; position: absolute; left: 50%; top: 46%; width: calc(var(--u) * 420); height: calc(var(--u) * 420); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(223, 174, 123, .14), rgba(223, 174, 123, 0)); pointer-events: none;
}
.proto .pf { width: calc(var(--u) * 252); }
.lp-stage { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; padding: calc(var(--u) * 12) 0 0; background: radial-gradient(60% 50% at 50% 40%, rgba(223,174,123,.07), transparent 70%), #0E1118; }
.lp-stage .pf { width: calc(var(--u) * 226); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.5), 0 calc(var(--u) * 16) calc(var(--u) * 30) calc(var(--u) * -12) rgba(0,0,0,.8); }

/* ─── S4 map ─── */
.app--map { grid-template-columns: calc(var(--u) * 168) 1fr calc(var(--u) * 312); background: #10131B; }
.side { display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 18) calc(var(--u) * 10); background: #12151F; border-right: 1px solid rgba(223,228,236,.08); font-size: calc(var(--u) * 12.5); color: #9AA5B8; }
.side span { padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); display: flex; justify-content: space-between; align-items: center; }
.side .side__brand { color: var(--gold); padding-bottom: calc(var(--u) * 18); justify-content: flex-start; gap: calc(var(--u) * 6); } .side__brand b { color: #E7ECF5; letter-spacing: .12em; font-size: calc(var(--u) * 12.5); }
.side span.on { background: #1F2433; color: #E7ECF5; }
.side span i { font-style: normal; font: 500 calc(var(--u) * 10) var(--mono); background: var(--gold); color: #171B26; border-radius: 999px; padding: 0 calc(var(--u) * 6); }
.mapc { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: calc(var(--u) * 16) calc(var(--u) * 18); }
.mapc__head { display: flex; justify-content: space-between; align-items: center; }
.mapc__head > div:first-child { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.mapc__head b { font: 600 calc(var(--u) * 16) var(--app-display); color: #E7ECF5; }
.mapc__head span { font: 400 calc(var(--u) * 10.5) var(--mono); color: #6B7689; }
.mapc__filters { display: flex; gap: calc(var(--u) * 6); }
.mapc__filters span { font: 400 calc(var(--u) * 10.5) var(--app-sans); color: #9AA5B8; border: 1px solid rgba(223,228,236,.12); padding: calc(var(--u) * 5) calc(var(--u) * 10); border-radius: 999px; }
.mapc__filters span.on { background: rgba(223,174,123,.12); color: var(--gold); border-color: transparent; }
.mapc__field { position: relative; flex: 1; min-height: 0; margin-top: calc(var(--u) * 12); border-radius: calc(var(--u) * 14); background: radial-gradient(60% 60% at 40% 45%, #1B2030 0%, #0D1017 70%); border: 1px solid rgba(223,228,236,.06); overflow: hidden; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.field__edges path { fill: none; }
.field__edges--dim path { stroke: rgba(154,165,184,.16); stroke-width: 1; }
.field__edges--lit path { stroke: rgba(223,174,123,.65); stroke-width: 1.3; }
.nd--u circle:last-child { fill: #F4E3CF; }
.nd--p circle:last-child { fill: none; stroke: var(--gold); stroke-width: 2; }
.nd--p.nd--sel circle:last-child { fill: var(--gold); }
.nd__ring { fill: none; stroke: rgba(223,174,123,.8); stroke-width: 1.4; }
.nd--i circle { fill: #5C6B85; }
.nd--n circle { fill: #2A3145; }
.field__labels text { font: 400 10.5px var(--mono); fill: #9AA5B8; }
.field__labels .sec { font: 600 12px var(--mono); letter-spacing: .16em; fill: #E7ECF5; }
.field__labels .sec--dim { fill: #55607E; }
.field__labels .lbl--sel { fill: var(--gold); font-weight: 500; }
.mapc__legend { position: absolute; left: 50%; bottom: calc(var(--u) * 12); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 12); padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: calc(var(--u) * 8); border: 1px solid rgba(223,228,236,.1); background: rgba(18,21,31,.85); font-size: calc(var(--u) * 10.5); color: #9AA5B8; white-space: nowrap; }
.mapc__legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); }
.lg { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; }
.lg--u { background: var(--gold); box-shadow: 0 0 calc(var(--u) * 6) var(--gold); } .lg--p { border: calc(var(--u) * 2) solid var(--gold); } .lg--i { background: #5C6B85; } .lg--n { background: #2A3145; }
.evp { padding: calc(var(--u) * 20) calc(var(--u) * 18); background: #171B26; border-left: 1px solid rgba(223,228,236,.08); min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.evp__name { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.evp__name b { font: 500 calc(var(--u) * 16) var(--mono); color: #E7ECF5; }
.st { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; }
.st--p { border: calc(var(--u) * 2) solid var(--gold); }
.evp__def { font-size: calc(var(--u) * 12.5); line-height: 1.55; color: #C6D0DE; margin-top: calc(var(--u) * 4) !important; }
.evp__lbl { font: 400 calc(var(--u) * 10.5) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6B7689; margin-top: calc(var(--u) * 6); }
.evc { border: 1px solid rgba(223,228,236,.1); background: #1F2433; border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 13); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * -14) rgba(0,0,0,.7); }
.evc__top { display: flex; justify-content: space-between; align-items: center; }
.chipk { font: 400 calc(var(--u) * 10.5) var(--mono); color: #C6D0DE; border: 1px solid rgba(223,228,236,.14); background: rgba(198,208,222,.04); padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: 999px; }
.evc time { font: 400 calc(var(--u) * 10) var(--mono); color: #6B7689; }
.evc__lbl { display: block; margin-top: calc(var(--u) * 10); font: 500 calc(var(--u) * 9) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6B7689; }
.evc__asked { font-size: calc(var(--u) * 11.5); color: #9AA5B8; line-height: 1.5; margin-top: calc(var(--u) * 3) !important; }
.evc__asked code { font-size: .92em; background: rgba(42,49,69,.7); padding: 0 calc(var(--u) * 3); border-radius: calc(var(--u) * 3); }
.evc__ans { margin-top: calc(var(--u) * 5) !important; font-size: calc(var(--u) * 11.5); line-height: 1.5; color: #E7ECF5; background: #12151F; border: 1px solid rgba(223,228,236,.07); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 7) calc(var(--u) * 9); }
.evc__ans--code { font-family: var(--mono); color: #C6D0DE; }
.evc__link { display: inline-block; margin-top: calc(var(--u) * 8); font: 400 calc(var(--u) * 10) var(--mono); color: var(--gold); }
.evr { border: 1px dashed rgba(223,228,236,.14); border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 10) calc(var(--u) * 12); font-size: calc(var(--u) * 11.5); color: #9AA5B8; line-height: 1.5; }
.evr span { display: block; margin-top: calc(var(--u) * 5); font: 400 calc(var(--u) * 10) var(--mono); color: #6B7689; }

/* ─── S5 phone + review ─── */
.jscreen--phone { display: flex; justify-content: center; }
.phone {
  --pw: 300px;
  width: min(var(--pw), 78vw);
  aspect-ratio: 9 / 19.2;
  border-radius: 13% / 6.2%;
  padding: 3.2%;
  background: linear-gradient(160deg, #3A3E47, #1A1C22 40%, #2A2D35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.9);
  position: relative;
}
.phone__screen { position: relative; height: 100%; border-radius: 10.5% / 5%; overflow: hidden; background: #10131B; container-type: inline-size; }
.phone__screen > * { --u: calc(100cqi / 390); }
.phone__island { position: absolute; z-index: 4; top: calc(var(--u) * 11); left: 50%; transform: translateX(-50%); width: calc(var(--u) * 120); height: calc(var(--u) * 34); border-radius: 999px; background: #000; }
.phone__lock {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--u) * 92);
  background: radial-gradient(120% 70% at 50% 100%, #3B2E22 0%, #171B26 55%, #0B0D13 100%);
  font-family: var(--font); color: #F4F5F8;
}
.phone__time { font-size: calc(var(--u) * 84); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.phone__date { font-size: calc(var(--u) * 17); color: rgba(244,245,248,.75); order: -1; margin-bottom: calc(var(--u) * 4); font-weight: 500; }
.notif { margin-top: calc(var(--u) * 220); width: calc(100% - var(--u) * 24); padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 22); background: rgba(40,44,56,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0,0,0,.3); }
.notif__top { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 6); font-size: calc(var(--u) * 13); color: rgba(244,245,248,.7); }
.notif__app { display: inline-flex; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 6); background: #12151F; color: var(--gold); align-items: center; justify-content: center; font-size: calc(var(--u) * 12); }
.notif__app--mail { background: linear-gradient(180deg, #3DA0FF, #1A6DF0); color: #fff; }
.notif__app--mail svg { width: 64%; height: 64%; }
.notif__from { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: calc(var(--u) * 11.5); color: rgba(244,245,248,.7); }
.notif__sender { display: block; font-size: calc(var(--u) * 15); font-weight: 600; color: #F4F5F8; }
.notif__ago { margin-left: auto; }
.notif b { font-size: calc(var(--u) * 14.5); font-weight: 500; display: block; }
.notif p { font-size: calc(var(--u) * 14); color: rgba(244,245,248,.8); line-height: 1.35; margin-top: calc(var(--u) * 2); }
.phone__app { position: absolute; inset: 0; padding-top: calc(var(--u) * 58); font-family: var(--app-sans); color: #E7ECF5; background: #171B26; display: flex; flex-direction: column; }
.rv-head { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 12) calc(var(--u) * 18); border-bottom: 1px solid rgba(223,228,236,.07); font: 400 calc(var(--u) * 11) var(--mono); color: #6B7689; }
.rv-dots { display: flex; gap: calc(var(--u) * 6); }
.rv-dots i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #2A3145; }
.rv-dots i.d { background: var(--gold); } .rv-dots i.c { border: calc(var(--u) * 1.5) solid var(--gold); background: transparent; }
.rv-body { padding: calc(var(--u) * 18); display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.rv-eye { font: 400 calc(var(--u) * 11) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.rv-title { font: 600 calc(var(--u) * 24) / 1.15 var(--app-display); letter-spacing: -.01em; color: #E7ECF5; }
.rv-code { background: #12151F; border: 1px solid rgba(223,228,236,.08); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 14); font-size: calc(var(--u) * 13); line-height: 1.65; color: #C6D0DE; }
.rv-code .k { color: #8FA3C2; } .rv-code .s { color: #D9B88F; } .rv-code .f { color: #E7ECF5; }
.rv-lbl { font: 400 calc(var(--u) * 11) var(--mono); color: #6B7689; margin-top: calc(var(--u) * 2); }
.rv-ans { background: #1F2433; border: 1px solid rgba(223,228,236,.08); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 12); font-size: calc(var(--u) * 14); line-height: 1.5; }
.rv-ans code { font-size: .9em; color: #F4E3CF; }
.rv-grade { border: 1px solid rgba(223,174,123,.35); background: rgba(223,174,123,.07); border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); }
.rv-grade > div { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.rv-grade .bdg { height: calc(var(--u) * 24); font-size: calc(var(--u) * 12); padding: 0 calc(var(--u) * 10); }
.rv-honest { font-size: calc(var(--u) * 12); color: #9AA5B8; }
.rv-grade p { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 13.5); line-height: 1.5; color: #C6D0DE; }

/* In the static layout the phone shows the review itself (the notification is the moment before). */
.phone__lock { opacity: 0; visibility: hidden; }
html.motion .jscreen--phone .phone__lock { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) 1.4s, visibility 0s linear 2s; }
html.motion .jscreen--phone .notif { transform: translateY(calc(var(--u) * -40)) scale(.9); opacity: 0; transition: transform .8s var(--ease-out) .25s, opacity .5s var(--ease) .25s; }
html.motion .jscreen--phone.is-active .notif { transform: none; opacity: 1; }
html.motion .jscreen--phone.is-active .phone__lock { opacity: 0; visibility: hidden; }
html.motion .jscreen--phone:not(.is-active) .phone__lock { transition: none; }
/* on phones (stacked layout) the lock screen plays once when the phone scrolls in */
html.motion .jscreen--phone.is-in .phone__lock { animation: lockout 3.4s var(--ease) forwards; }
html.motion .jscreen--phone.is-in .notif { animation: notifin .9s var(--ease-out) .3s both; }
@keyframes lockout { 0%, 70% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes notifin { from { transform: translateY(calc(var(--u) * -40)) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1024px) { html.motion .jscreen--phone.is-in .phone__lock, html.motion .jscreen--phone.is-in .notif { animation: none; } }

/* ─── Screens at phone width: the same app, its responsive layout ─── */
@container vscreen (max-width: 700px) {
  .win { --u: calc(100cqi / 420); aspect-ratio: auto; }
  .app--onboard, .app--proto, .app--map { grid-template-columns: 1fr; }
  .app--onboard .ob-chat__compose, .app--proto .ob-chat__compose { display: none; }
  .app--onboard .ob-chat__head { display: none; }
  .app--onboard .ob-chat__log .bub:first-child { display: none; }
  .app--onboard .ob-chat__log { padding: calc(var(--u) * 14) calc(var(--u) * 16); }
  .ob-cards { padding: calc(var(--u) * 16); }
  .ob-cards__head span { display: none; }
  .cand:nth-child(n+3) { display: none; }
  .cand { padding: calc(var(--u) * 14) calc(var(--u) * 16); }
  .app--proto .ob-chat, .pside__est { display: none; }
  .proto { padding: calc(var(--u) * 14); }
  .pside { border-left: 0; padding: 0 calc(var(--u) * 14) calc(var(--u) * 16); }
  .proto .pf { width: calc(var(--u) * 336); }
  .proto__stage { padding: calc(var(--u) * 4) 0 calc(var(--u) * 8); }
  .feat__hint { display: none; }
  .win--duo { padding: calc(var(--u) * 8); }
  .duo { grid-template-columns: 1fr; gap: calc(var(--u) * 8); }
  .duo__ed .ses__tab:nth-child(n+2) { display: none; }
  .duo__ed .ses__code { flex: none; padding: calc(var(--u) * 8) 0; font-size: calc(var(--u) * 11); line-height: calc(var(--u) * 19); }
  .duo__ed .cl:nth-child(-n+2), .duo__ed .cl:nth-child(n+9) { display: none; }
  .duo__ed .cl b { width: calc(var(--u) * 28); padding-right: calc(var(--u) * 9); }
  .duo__ed .tl:nth-child(n+3) { display: none; }
  .lsn__mini { padding: calc(var(--u) * 12); }
  .lsn__mini > .lp-block--past, .lsn__mini > .lp-stepm, .lsn__mini > .lp-msg:nth-child(3) { display: none; }
  .lsn__mini .lp-small { display: none; }
  .side { display: none; }
  .mapc { padding: calc(var(--u) * 12); }
  .mapc__filters span:not(.on) { display: none; }
  .mapc__field { flex: none; aspect-ratio: 640 / 470; }
  .mapc__legend { display: none; }
  .evp { border-left: 0; border-top: 1px solid rgba(223,228,236,.08); padding: calc(var(--u) * 16); }
  .evc:nth-of-type(2), .evr { display: none; }
  .win__url { transform: none; }
}

/* ───────────────────────── Levels ───────────────────────── */

.levels { padding: clamp(90px, 14vh, 160px) 0 clamp(40px, 8vh, 90px); position: relative; }
.levels::before { /* a low gold dawn behind the cards. The box stays inside the
     page width (a wider box made phones scroll sideways); the ellipse keeps
     its old size, min(1400px, 140vw) across, and the page edge crops it. */
  content: ""; position: absolute; left: 0; right: 0; top: 42%; height: 70%; pointer-events: none;
  background: radial-gradient(min(700px, 70vw) 50% at 50% 50%, rgba(223,174,123,.07), rgba(223,174,123,0) 70%);
}
.levels__grid {
  position: relative; max-width: 1200px; margin: clamp(48px, 8vh, 80px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 900px) { .levels__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lvl--adv { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .levels__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.08fr) minmax(0, .74fr); } .lvl--adv { grid-column: auto; } }

.lvl {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 30px 28px 28px; border-radius: 28px;
  background: linear-gradient(180deg, #10131B 0%, #0B0D13 100%);
  border: 1px solid rgba(255,255,255,.07);
}
.lvl::before { /* a hairline of light along the top edge */
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(223,174,123,0), rgba(223,174,123,.55), rgba(223,174,123,0));
}
.lvl__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lvl__peaks { display: inline-flex; align-items: flex-end; gap: 3px; }
.lvl__peaks i { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #2A303D; }
.lvl__peaks i:nth-child(2) { border-bottom-width: 15px; } .lvl__peaks i:nth-child(3) { border-bottom-width: 18px; }
.lvl__peaks i.on { border-bottom-color: var(--gold); }
.lvl__name { font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -.04em; line-height: 1; font-weight: 650; }
.lvl__badge { position: absolute; top: 24px; right: 24px; font: 500 12px/1 var(--mono); letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; color: var(--gold); border: 1px solid rgba(223,174,123,.35); background: rgba(223,174,123,.08); }
.lvl__badge--soon { color: var(--ink-2); border-color: rgba(223,228,236,.16); background: rgba(223,228,236,.04); }
.lvl__tag { margin-top: 14px; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -.025em; font-weight: 600; color: var(--gold-hi); text-wrap: balance; }
.lvl__body { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--mute); text-wrap: pretty; }
.lvl__body code, .lvl__list code { font-size: .88em; color: var(--gold-hi); background: rgba(223,174,123,.08); border-radius: 5px; padding: 0 5px; }
.lvl__art { margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; font-family: var(--app-sans); }
.lvl__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.lvl__list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lvl__list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(-45deg); }
.lvl__note { margin-top: auto; padding-top: 18px; font-size: 13.5px; color: var(--dim); }

/* the little editor and check, in the lesson page's palette */
.lv-ed { border-radius: 14px; overflow: hidden; background: #0F121A; border: 1px solid rgba(223,228,236,.08); box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
.lv-ed__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: #0B0E15; border-bottom: 1px solid rgba(223,228,236,.06); font: 400 12px/1 var(--mono); color: #C6D0DE; }
.lv-ed__bar em { font-style: normal; font-size: 11px; color: var(--gold); }
.lv-ed__bar em.lv-agent { color: #9AA5B8; }
.lv-ed__code { margin: 0; padding: 12px 0; font: 400 clamp(11.5px, .9vw, 12.5px)/1.65 var(--mono); color: #C6D0DE; overflow: hidden; white-space: pre; }
.lv-ed__code > * { white-space: pre; }
.lv-ed__code { padding-left: 14px; }
.lv-ed .k { color: #8FA3C2; } .lv-ed .f { color: #E7ECF5; } .lv-ed .c { color: #6B7689; font-style: italic; }
.lv-you { display: inline-block; width: calc(100% + 14px); margin-left: -14px; padding-left: 14px; position: relative; color: #F4E3CF; background: linear-gradient(90deg, rgba(223,174,123,.13), rgba(223,174,123,0) 80%); box-shadow: inset 2.5px 0 0 var(--gold); }
.lv-caret { display: none; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: var(--gold); animation: blink 1.1s steps(1) infinite; }
.lv-check { border-radius: 14px; border: 1px solid rgba(223,174,123,.35); background: #1A1E2B; padding: 13px 15px 14px; }
.lv-check__h { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.lv-check p { margin-top: 7px; font-size: 14px; line-height: 1.5; color: #E7ECF5; }
.lv-check code, .lv-check__a code { font-size: .88em; color: #C6D0DE; background: rgba(223,228,236,.06); border: 1px solid rgba(223,228,236,.08); border-radius: 5px; padding: 0 4px; }
.lv-check__a { margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: #12151F; font-size: 13.5px; color: #E7ECF5; }

/* Advanced: a quiet summit, not yet open */
.lvl--adv { background: linear-gradient(180deg, rgba(16,19,27,.6) 0%, rgba(11,13,19,.6) 100%); border-style: dashed; border-color: rgba(223,228,236,.12); }
.lvl--adv::before { opacity: .35; }
.lvl--adv .lvl__name { color: var(--ink-2); }
.lvl--adv .lvl__peaks i.on { border-bottom-color: rgba(223,174,123,.45); }
.lvl--adv .lvl__tag { color: var(--mute); }
.lvl__summit { margin: auto -28px -28px; padding-top: 30px; }
.lvl__summit svg { display: block; width: 100%; height: auto; max-height: 220px; }
.lvl__ridge { fill: #0E1119; stroke: rgba(223,174,123,.22); stroke-width: 1; }
.lvl__trail { fill: none; stroke: rgba(223,174,123,.5); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.lvl__beacon { fill: rgba(223,174,123,.12); transform-box: fill-box; transform-origin: center; animation: beacon 5s ease-in-out infinite; }
.lvl__top { fill: var(--gold); }
@media (min-width: 900px) and (max-width: 1099px) { .lvl--adv { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 24px; } .lvl--adv .lvl__tag { margin-top: 0; } .lvl__summit { display: none; } }
.levels__foot { position: relative; max-width: 1200px; margin: 28px auto 0; padding: 0 var(--gutter); text-align: center; font-size: 15px; color: var(--dim); }
@media (max-width: 760px) {
  .lvl { padding: 28px 22px 26px; border-radius: 24px; }
  .lvl__summit { margin: 6px -22px -26px; padding-top: 10px; }
  .lvl__summit svg { max-height: 120px; }
  .lv-ed__code { font-size: 12px; }
}
@media (max-width: 389px) { .lvl__badge { position: static; margin-left: auto; } }

/* motion: the cards rise in turn; Beginner's line types itself, Intermediate's answer arrives */
html.motion .levels__grid .lvl:nth-child(2) { transition-delay: .1s; }
html.motion .levels__grid .lvl:nth-child(3) { transition-delay: .2s; }
html.motion .lvl.is-typing .lv-caret { display: inline-block; }
html.motion .lvl--int [data-lv-answer] { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .8s var(--ease-out); }
html.motion .lvl--int.is-answered [data-lv-answer] { opacity: 1; transform: none; }

/* ───────────────────────── Testimonials ─────────────────────────
   Rendered by js/home.js from window.ALTITUDE_TESTIMONIALS (in index.html).
   Hidden entirely while that list is empty. */

.voices { padding: clamp(70px, 11vh, 130px) 0 clamp(40px, 6vh, 70px); }
.voices[hidden] { display: none; }
.voices__wrap { max-width: 1200px; margin: clamp(40px, 7vh, 70px) auto 0; padding: 0 var(--gutter); }
.voices__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.voices__note { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--mute); text-align: center; }
/* two or more voices: one side-scrolling row at every width. The row runs to the
   screen edges so the next card peeks in; its first card lines up with the page column. */
.voices { --edge: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); }
.voices:not(.voices--1) .voices__wrap { max-width: none; padding: 0; }
.voices__rail { position: relative; --fade-l: var(--edge); --fade-r: max(var(--edge), 170px); }
/* fades on both sides: the cards scroll under them, and the arrows sit on top,
   so an arrow never lands on readable text */
.voices__rail::before, .voices__rail::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 14px; pointer-events: none; transition: opacity .25s;
}
.voices__rail::before { left: 0; width: var(--fade-l); background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 45%, rgba(7,9,13,0) 100%); }
.voices__rail::after { right: 0; width: var(--fade-r); background: linear-gradient(270deg, var(--bg) 0%, var(--bg) 45%, rgba(7,9,13,0) 100%); }
.voices__rail.is-start::before, .voices__rail.is-end::after, .voices--1 .voices__rail::before, .voices--1 .voices__rail::after { opacity: 0; }
.voices:not(.voices--1) .voices__grid {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px var(--edge) 18px; scroll-padding: 0 var(--edge); scrollbar-width: none;
}
.voices:not(.voices--1) .voices__grid::-webkit-scrollbar { display: none; }
.voices:not(.voices--1) .voices__grid:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 26px; }
/* wide enough that the last visible card is cut off at the screen edge: there is more to see */
.voices:not(.voices--1) .tm { flex: 0 0 clamp(300px, 34vw, 460px); scroll-snap-align: start; margin: 0; }
.voices:not(.voices--1) .voices__note { padding: 0 var(--gutter); }
/* arrows on the sides of the row, centred on the cards */
.voices__btn {
  position: absolute; z-index: 2; top: calc(50% - 7px); transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--gold-hi); background: rgba(12,14,20,.88); border: 1px solid rgba(223,174,123,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.9), 0 0 0 6px rgba(223,174,123,.06);
  transition: border-color .2s, background-color .2s;
}
.voices__btn[hidden] { display: none; }
.voices__btn--prev { left: max(10px, calc(var(--fade-l) / 4 - 27px)); } /* inside the solid part of each fade */
.voices__btn--next { right: max(10px, calc(var(--fade-r) / 4 - 27px)); }
.voices__btn:hover { border-color: var(--gold); background: rgba(30,26,22,.92); }
.voices__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tm {
  position: relative; margin: 0; display: flex; flex-direction: column; gap: 22px;
  padding: 70px 30px 28px; border-radius: 26px;
  background: linear-gradient(180deg, #10131B 0%, #0B0D13 100%);
  border: 1px solid rgba(255,255,255,.07);
}
.tm::before { /* the opening mark */
  content: "\201C"; position: absolute; top: 18px; left: 26px; font: 600 72px/1 var(--font); color: rgba(223,174,123,.32); pointer-events: none;
}
.tm__q { margin: 0; }
.tm__q p { font-size: 19px; line-height: 1.5; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.tm--short .tm__q p { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.35; letter-spacing: -.022em; font-weight: 500; }
.tm--long .tm__q p { font-size: 18px; line-height: 1.55; }
.tm__by { margin-top: auto; display: flex; align-items: center; gap: 13px; }
.tm__face { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(223,174,123,.35), 0 0 0 5px rgba(223,174,123,.06); }
.tm__init { display: grid; place-items: center; font: 600 15px/1 var(--font); letter-spacing: .02em; color: var(--gold-hi); background: radial-gradient(circle at 35% 30%, #2A2F3D, #171B26); }
.tm__who { display: flex; flex-direction: column; min-width: 0; }
.tm__name { font-size: 15.5px; font-weight: 600; color: var(--ink); font-style: normal; }
.tm__ctx { font-size: 14px; color: var(--mute); }
/* one voice: a single large quote, centred */
.voices--1 .voices__grid { max-width: 880px; margin: 0 auto; }
.voices--1 .tm { align-items: center; text-align: center; padding: clamp(84px, 9vw, 110px) clamp(28px, 5vw, 60px) clamp(36px, 5vw, 60px); gap: 30px; }
.voices--1 .tm::before { left: 50%; right: auto; top: 22px; transform: translateX(-50%); font-size: 110px; }
.voices--1 .tm__q p { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.03em; font-weight: 500; }
.voices--1 .tm--long .tm__q p { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; }
.voices--1 .tm__by { margin-top: 0; }
.voices--1 .tm__who { text-align: left; }
/* preview placeholders (?preview-testimonials): obviously not real */
.tm--placeholder { border-style: dashed; border-color: rgba(223,174,123,.3); }
.tm--placeholder .tm__q p { color: var(--mute); }
.tm__flag { position: absolute; top: 22px; right: 22px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.voices--1 .tm__flag { left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: 14px; }
/* phones: two or more voices become a swipeable row */
@media (max-width: 760px) {
  .voices:not(.voices--1) .voices__grid { gap: 12px; }
  .voices:not(.voices--1) .tm { flex-basis: 84%; }
  .voices__btn { width: 40px; height: 40px; box-shadow: 0 8px 22px -8px rgba(0,0,0,.9); }
  .voices__rail { --fade-l: calc(var(--edge) + 22px); --fade-r: 64px; }
  .voices__btn--prev { left: 4px; }
  .voices__btn--next { right: 6px; }
  .tm { padding: 64px 24px 24px; border-radius: 22px; }
  .tm::before { left: 22px; }
}
html.motion .voices__grid .tm:nth-child(2) { transition-delay: .08s; }
html.motion .voices__grid .tm:nth-child(3) { transition-delay: .16s; }

/* ───────────────────────── Bento ───────────────────────── */

.bento-sec { padding: clamp(100px, 16vh, 180px) 0 clamp(80px, 12vh, 140px); }
.bento {
  max-width: 1200px; margin: clamp(48px, 8vh, 80px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px;
}
.tile {
  grid-column: span 6;
  position: relative; overflow: hidden;
  border-radius: 28px; padding: 34px 34px 0;
  background: linear-gradient(180deg, #0F121A 0%, #0B0D13 100%);
  border: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 26px;
  min-height: 380px;
  transition: border-color .4s var(--ease), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.tile::before { /* light that follows the pointer */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(223,174,123,.10), transparent 60%);
}
.tile:hover { border-color: rgba(223,174,123,.22); transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.tile:hover::before { opacity: 1; }
.tile h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.035em; line-height: 1.1; font-weight: 650; }
.tile__copy p { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--mute); max-width: 440px; }
.tile__art { margin-top: auto; position: relative; display: flex; justify-content: center; align-items: flex-end; font-family: var(--app-sans); }
@media (min-width: 900px) {
  .tile--predict { grid-column: span 4; }
  .tile--drill { grid-column: span 2; }
  .tile--check { grid-column: span 2; }
  .tile--route { grid-column: span 4; }
  .tile--files { grid-column: span 3; }
  .tile--settings { grid-column: span 3; }
  .tile--predict { flex-direction: row; gap: 40px; padding-bottom: 0; }
  .tile--predict .tile__copy { flex: 0 0 34%; padding-bottom: 34px; }
  .tile--predict .tile__art { flex: 1; align-items: flex-end; align-self: stretch; }
  .tile--route .tile__copy p { max-width: 520px; }
  .tile--route .tile__art { margin-left: -34px; margin-right: -34px; }
  .tile--route .trail { aspect-ratio: 520 / 170; }
}

.mini-lab { display: block; font-size: 12px; color: #6B7689; margin-bottom: 6px; }
.mini-pred { width: 100%; max-width: 460px; background: #171B26; border: 1px solid rgba(223,228,236,.09); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 22px 22px 26px; }
.mini-pred__text { background: #12151F; border: 1px solid rgba(223,174,123,.4); border-radius: 10px; padding: 11px 13px; font-size: 15px; color: #E7ECF5; min-height: 46px; }
.mini-pred__text .caret { width: 2px; height: 17px; vertical-align: -3px; }
.mini-pred__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.mini-run { white-space: nowrap; background: var(--gold); color: #171B26; font-weight: 600; font-size: 13.5px; border-radius: 9px; padding: 8px 14px; transition: opacity .4s, filter .4s; }
.mini-lock { font-size: 12px; color: #6B7689; }
.mini-pred__out { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-pred__out > div { background: #12151F; border: 1px solid rgba(223,228,236,.08); border-radius: 10px; padding: 9px 12px; }
.mini-pred__out > div + div { border-color: rgba(223,228,236,.18); }
.mini-pred__out .mini-lab { margin-bottom: 3px; }
.mini-pred__out code { color: #E7ECF5; font-size: 13.5px; line-height: 1.5; }

.mini-files { width: 100%; max-width: 280px; display: flex; flex-direction: column; padding: 18px 0 30px; font: 400 14.5px/1 var(--mono); color: #9AA5B8; }
.mf { padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.mf::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid #3D4763; flex: none; }
.mf--dir::before { border-radius: 2px 4px 4px 4px; background: rgba(223,228,236,.06); }
.mf--in { margin-left: 22px; } .mf--in2 { margin-left: 44px; }
.mf--on { background: rgba(223,174,123,.12); color: var(--gold); }
.mf--on::before { border-color: var(--gold); }

.mini-check { width: 100%; background: #171B26; border: 1px solid rgba(223,174,123,.35); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 0 0 26px; box-shadow: 0 0 0 4px rgba(223,174,123,.04); }
.mini-check__h { display: block; padding: 11px 18px; border-bottom: 1px solid rgba(223,228,236,.07); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.mini-check p { padding: 14px 18px 0; font-size: 15px; line-height: 1.45; color: #E7ECF5; }
.mini-check code { font-size: 13px; background: rgba(223,228,236,.06); border-radius: 5px; padding: 0 4px; color: #C6D0DE; }
.mini-check__a { margin: 12px 18px 0; background: #12151F; border: 1px solid rgba(223,228,236,.12); border-radius: 10px; padding: 11px 13px; font-size: 14px; line-height: 1.45; color: #C6D0DE; }

.trail { position: relative; width: 100%; aspect-ratio: 520 / 220; margin-bottom: -1px; }
.trail__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trail__path { stroke: rgba(198,208,222,.28); stroke-width: 1.6; stroke-dasharray: 3 5; }
.trail__done { stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; }
html.motion .trail__done { stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 1.6s var(--ease-out) .4s; }
html.motion .is-in .trail__done { stroke-dashoffset: 0; }
.trail__pt { position: absolute; left: var(--x); top: var(--y); display: grid; grid-template-columns: 14px auto; column-gap: 9px; align-items: center; transform: translate(-7px, -7px); font-size: 13px; color: #8E97A8; white-space: nowrap; pointer-events: none; }
.trail__pt i { grid-row: 1; width: 14px; height: 14px; border-radius: 50%; background: #12151F; border: 1.5px solid #3D4763; }
.trail__pt b { grid-row: 1; font-weight: 500; text-shadow: 0 1px 8px #0B0D13, 0 0 2px #0B0D13; }
.trail__pt em { grid-column: 2; font: 400 10.5px var(--mono); font-style: normal; color: #55607E; margin-top: 2px; }
.trail__pt.done { color: #C6D0DE; } .trail__pt.done i { background: var(--gold); border-color: var(--gold); }
.trail__pt.now { color: var(--gold-hi); } .trail__pt.now i { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(223,174,123,.16), 0 0 18px rgba(223,174,123,.5); }
.trail__pt.now em { color: var(--gold); }
.trail__pt.summit i { border-style: dashed; border-color: #8E97A8; }
@media (max-width: 620px) { .trail__pt { font-size: 11px; column-gap: 6px; } .trail__pt em { display: none; } .trail__pt:nth-of-type(3) b, .trail__pt:nth-of-type(4) b, .trail__pt:nth-of-type(5) b { visibility: hidden; } }

.mini-map { list-style: none; margin: 0; padding: 0 0 34px; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.mini-map li { display: flex; align-items: baseline; gap: 14px; padding: 12px 14px; border-radius: 12px; background: #12151F; border: 1px solid rgba(223,228,236,.07); }
.mini-map code { font-size: 13.5px; color: #F4E3CF; flex: none; min-width: 112px; }
.mini-map span { font-size: 14px; color: #9AA5B8; }

.mini-set { width: 100%; padding: 0 0 34px; }
.mini-set .mini-lab { margin-top: 14px; font-size: 12.5px; color: #9AA5B8; }
.seg4, .seg3 { display: grid; gap: 4px; padding: 4px; background: #12151F; border: 1px solid rgba(223,228,236,.08); border-radius: 12px; position: relative; }
.seg4 { grid-template-columns: repeat(4, 1fr); } .seg3 { grid-template-columns: repeat(3, 1fr); }
.seg4 span, .seg3 span { text-align: center; padding: 9px 0; border-radius: 9px; font-size: 14px; color: #9AA5B8; transition: background .4s, color .4s; }
.seg4 span.on, .seg3 span.on { background: rgba(223,174,123,.14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(223,174,123,.3); }

/* ───────────────────────── Agents ───────────────────────── */

.agents { padding: clamp(100px, 16vh, 180px) 0; border-top: 1px solid rgba(255,255,255,.05); background: radial-gradient(60% 50% at 50% 40%, rgba(223,174,123,.06), transparent 70%); }
.agents__row {
  list-style: none; margin: clamp(48px, 8vh, 80px) auto 0; padding: 0; width: min(1200px, calc(100% - 2 * var(--gutter)));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.06); border-radius: 24px; overflow: hidden;
}
.wm {
  background: var(--bg); padding: clamp(28px, 5vh, 48px) 16px; text-align: center;
  font-size: clamp(20px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.035em; color: var(--ink);
  position: relative;
}
.wm span { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.wm::before { content: ""; position: absolute; left: 50%; top: 0; width: 40px; height: 2px; margin-left: -20px; background: var(--gold); border-radius: 0 0 2px 2px; opacity: 0; transform: scaleX(.2); transition: opacity .6s var(--ease), transform .9s var(--ease-out); }
.wm:hover::before, html:not(.motion) .wm::before { opacity: .8; transform: none; }
html.motion .wm.is-in::before { opacity: .8; transform: none; transition-delay: .5s; }
.agents__copy { max-width: 720px; margin: 48px auto 0; padding: 0 var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.agents__copy p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--mute); text-wrap: pretty; }
.agents__copy p:first-child { color: var(--ink-2); }
@media (max-width: 760px) {
  .agents__row { grid-template-columns: 1fr 1fr; }
}

/* ───────────────────────── Every line ───────────────────────── */

.every { position: relative; background: var(--bg); }
.every__stage { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 120px var(--gutter); overflow: hidden; }
.every__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(223,174,123,.14), rgba(223,174,123,.03) 45%, transparent 70%); pointer-events: none; }
.every__rain { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.every__rain span { position: absolute; left: var(--x); top: calc(6% + var(--d) * 88%); font: 400 clamp(12px, 1.05vw, 15px) var(--mono); color: rgba(198,208,222,.075); white-space: nowrap; }
.every__rain span.r { left: auto; right: var(--x); }
.every__inner { position: relative; z-index: 1; text-align: center; max-width: 1100px; }
.every__line { font: 500 clamp(26px, 5.4vw, 84px)/1 var(--mono); color: var(--gold-hi); letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 0 60px rgba(223,174,123,.35); }
.every__pair { display: flex; flex-direction: column; align-items: center; }
.every__why {
  margin-top: clamp(22px, 3.4vh, 34px); width: min(560px, 100%); text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 20px 18px; border-radius: 16px;
  border: 1px solid rgba(223,174,123,.32); background: rgba(23,27,38,.72);
  box-shadow: 0 0 0 4px rgba(223,174,123,.04), 0 30px 60px -30px rgba(0,0,0,.8);
}
.every__q { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold); font-family: var(--app-sans); }
.every__a { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; color: var(--ink); min-height: 2.9em; }
.caret--big { width: .08em; height: .95em; vertical-align: -.1em; margin-left: .06em; }
/* motion: the not-yet-typed rest of a line, laid out but unseen, so typing never reflows */
.ghost { color: transparent !important; text-shadow: none !important; }
.every__title { margin-top: clamp(30px, 5vh, 56px); font-size: clamp(40px, 6.4vw, 96px); line-height: 1; letter-spacing: -.055em; font-weight: 650; text-wrap: balance; }
.every__sub { margin: 26px auto 0; max-width: 620px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--mute); text-wrap: pretty; }

/* ───────────────────────── Founder ───────────────────────── */

.founder { padding: clamp(80px, 12vh, 140px) var(--gutter); }
.founder__card { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 160px 1fr; gap: 48px; align-items: start; padding: 48px; border-radius: 32px; background: linear-gradient(180deg, #0F121A, #0B0D13); border: 1px solid rgba(255,255,255,.06); }
.founder__card > picture { display: block; }
.founder__img { display: block; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 1px rgba(223,174,123,.3), 0 0 0 8px rgba(223,174,123,.06); }
.founder__name { font-size: clamp(30px, 3vw, 40px); letter-spacing: -.04em; font-weight: 650; }
.founder__role { margin-top: 8px; font-size: 17px; color: var(--mute); }
.founder__yt { margin-top: 4px; margin-left: 0; padding-left: 0; }
.founder__quote { margin: 26px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--gold-edge); }
.founder__quote p { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 760px) {
  .founder__card { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .founder__img { width: 112px; height: 112px; }
}

/* ───────────────────────── Pricing ───────────────────────── */

.pricing { position: relative; overflow: hidden; padding: clamp(100px, 16vh, 180px) 0 clamp(80px, 12vh, 140px); }
/* the summit at dawn, behind the founding price (from "The Climb"); restrained so the card stays the hero */
.pricing__sky { position: absolute; inset: 0; pointer-events: none; }
.pricing__dawn {
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 30% at 50% 47%, rgba(255, 196, 132, .20), rgba(223, 150, 95, .07) 48%, transparent 75%),
    linear-gradient(180deg, rgba(7,9,13,0) 0%, rgba(26,30,46,.55) 30%, rgba(59,51,65,.38) 46%, rgba(120,88,70,.16) 60%, rgba(7,9,13,0) 82%);
}
.pricing__stars { position: absolute; left: 0; top: 0; width: 100%; height: 70%; object-fit: cover; object-position: 50% 100%; opacity: .45; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.pricing .section-head, .buy-wrap { position: relative; z-index: 1; }
.buy-wrap { position: relative; display: flow-root; }
.pricing .buy { margin-top: clamp(120px, 17vh, 170px); }
.summit {
  --W: max(1500px, 135vw);
  position: absolute; z-index: 0; left: 50%; width: var(--W); height: calc(var(--W) * .625);
  margin-left: calc(var(--W) * -.6225);
  top: calc(clamp(120px, 17vh, 170px) - 96px - var(--W) * .0929);
  opacity: .8; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--W) * .16), transparent calc(var(--W) * .4));
  mask-image: linear-gradient(180deg, #000 calc(var(--W) * .16), transparent calc(var(--W) * .4));
}
.summit img, .summit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.summit__trail { fill: none; stroke: rgba(223, 174, 123, .3); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.buy { z-index: 1; }
.buy {
  max-width: 1080px; margin: clamp(48px, 8vh, 72px) auto 0;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  border-radius: 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
  background: #0B0D13;
  position: relative;
}
@media (min-width: 1081px) { .buy { margin-left: auto; margin-right: auto; } }
@media (max-width: 1140px) { .buy { margin-left: var(--gutter); margin-right: var(--gutter); } }
.buy::before { content: ""; position: absolute; left: -10%; top: -40%; width: 70%; height: 120%; background: radial-gradient(closest-side, rgba(223,174,123,.16), transparent 70%); pointer-events: none; }
.buy__main { position: relative; padding: 56px 52px; display: flex; flex-direction: column; align-items: flex-start; }
.buy__name { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.buy__price { margin-top: 26px; font-size: clamp(84px, 9vw, 128px); line-height: .9; font-weight: 650; letter-spacing: -.06em; color: var(--ink); display: flex; align-items: flex-start; }
.buy__cur { font-size: .42em; margin: .14em .06em 0 0; color: var(--ink-2); letter-spacing: 0; }
.buy__per { font-size: .2em; align-self: flex-end; margin: 0 0 .5em .4em; color: var(--mute); letter-spacing: -.01em; font-weight: 500; }
/* Two founding plans as two rows in the one card. Monthly is first and carries
   the big number; yearly is the quieter second row. Not a selector: the plan is
   picked at checkout in the app. */
.plans { list-style: none; margin: 26px 0 0; padding: 0; align-self: stretch; }
.plan { display: flex; flex-direction: column; align-items: flex-start; }
.plan + .plan { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.plan__k { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.plan__badge { display: inline-block; padding: 3px 9px; border: 1px solid var(--gold-edge); border-radius: 999px; background: var(--gold-wash); color: var(--gold); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; }
.plan .buy__price { margin-top: 12px; font-size: clamp(72px, 7.6vw, 108px); }
.plan__price { margin-top: 10px; font-size: clamp(36px, 3.4vw, 46px); line-height: 1; font-weight: 620; letter-spacing: -.04em; color: var(--ink); display: flex; align-items: flex-start; }
.plan__cur { font-size: .56em; margin: .1em .05em 0 0; color: var(--ink-2); letter-spacing: 0; }
.plan__per { font-size: .42em; align-self: flex-end; margin: 0 0 .16em .3em; color: var(--mute); letter-spacing: -.01em; font-weight: 500; }
.plan__sub { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--mute); }
.buy__lock { margin-top: 18px; font-size: 19px; color: var(--ink-2); letter-spacing: -.01em; }
.plans + .buy__lock { margin-top: 22px; font-size: 17px; }
.buy__main .btn { margin-top: 32px; }
.buy__free { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: #C9D0DC; max-width: 400px; }
.buy__free + .buy__refund { margin-top: 12px; }
.buy__refund { margin-top: 22px; font-size: 15px; line-height: 1.55; color: var(--mute); max-width: 400px; }
.buy__refund b { color: var(--ink); font-weight: 600; }
.buy__list { position: relative; padding: 56px 48px; border-left: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.012); }
.buy__list h3 { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.buy__list ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; }
.buy__list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 16.5px; color: var(--ink); line-height: 1.4; }
.buy__list li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: rgba(223,174,123,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.4 5-5.2' fill='none' stroke='%23DFAE7B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.buy__list li:last-child { border-bottom: 0; }
.buy__main { grid-row: 1; grid-column: 1; }
.buy__list { grid-row: 1; grid-column: 2; }
.buy__also { grid-row: 2; grid-column: 1 / -1; position: relative; display: flex; gap: 24px; align-items: baseline; padding: 26px 52px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.buy__also-k { flex: none; font-size: 14px; font-weight: 600; color: var(--gold); }
.buy__also p { font-size: 15.5px; line-height: 1.55; color: var(--mute); }
@media (max-width: 860px) {
  .buy { grid-template-columns: 1fr; }
  .buy__main, .buy__also, .buy__list { grid-row: auto; grid-column: auto; } /* phones: the agent cost sits right under the price, before the list */
  .buy__main { padding: 40px 28px; }
  .buy__list { border-left: 0; border-top: 1px solid rgba(255,255,255,.06); padding: 36px 28px; }
  .buy__also { flex-direction: column; gap: 8px; padding: 24px 28px; }
  .buy__main .btn { align-self: stretch; }
}

/* ───────────────────────── FAQ ───────────────────────── */

.faq-sec { max-width: 860px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--gutter); }
.faq { margin-top: 40px; border-top: 1px solid rgba(255,255,255,.1); }
.faq details { border-bottom: 1px solid rgba(255,255,255,.1); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 0; font-size: clamp(18px, 1.7vw, 21px); font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.faq summary:hover { color: var(--gold-hi); }
.faq__i { flex: none; position: relative; width: 22px; height: 22px; }
.faq__i::before, .faq__i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; background: var(--gold); border-radius: 2px; transition: transform .35s var(--ease); }
.faq__i::after { transform: rotate(90deg); }
.faq details[open] .faq__i::after { transform: rotate(0deg); }
.faq__a { padding: 0 48px 26px 0; }
.faq__a p { font-size: 17px; line-height: 1.6; color: var(--mute); }
.faq__a p + p { margin-top: 12px; }
html.motion .faq details[open] .faq__a { animation: faqin .45s var(--ease-out); }
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } }
.faq details:target summary, .faq details.is-target summary { color: var(--gold-hi); }

/* ───────────────────────── Closing + footer ───────────────────────── */

.closing { position: relative; text-align: center; padding: clamp(120px, 20vh, 220px) var(--gutter) clamp(260px, 36vh, 340px); overflow: hidden; }
.closing__sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; --W: max(1200px, 135vw); }
.closing__sky::before { content: ""; position: absolute; left: 50%; bottom: clamp(150px, 22vh, 210px); width: 70vw; height: 40vw; transform: translate(-50%, 50%); background: radial-gradient(closest-side, rgba(223,174,123,.12), transparent 70%); }
.closing__sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(0deg, #0B0E15, transparent); }
.closing__box { position: absolute; left: 50%; width: var(--W); height: calc(var(--W) * .625); margin-left: calc(var(--W) * -.6225); bottom: calc(clamp(150px, 22vh, 210px) - var(--W) * .5321); opacity: .85; }
.closing__box img, .closing__box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.closing__title { position: relative; max-width: 1040px; margin: 0 auto; font-size: clamp(36px, 5.4vw, 76px); line-height: 1.04; letter-spacing: -.048em; font-weight: 650; text-wrap: balance; }
.closing__sub { position: relative; margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); color: var(--mute); }
.closing__ctas { position: relative; margin-top: 40px; }
.closing__fine { position: relative; margin-top: 16px; font-size: 13.5px; color: var(--mute); } /* --dim was 3.55:1 here; --mute clears AA */

.foot { border-top: 1px solid rgba(255,255,255,.06); background: #0B0E15; }
.foot__inner { max-width: 1200px; margin: 0 auto; padding: 36px var(--gutter) 48px; display: flex; align-items: center; gap: 18px 36px; flex-wrap: wrap; }
.brand--foot .brand__word { font-size: 12px; color: var(--ink-2); }
.foot__links, .foot__legal { display: flex; gap: 10px 24px; flex-wrap: wrap; }
.foot__legal { margin-left: auto; }
.foot a:not(.brand) { font-size: 13.5px; color: var(--mute); }
.foot a:not(.brand):hover { color: var(--ink); }
@media (max-width: 760px) { .foot__legal { margin-left: 0; } .foot__inner { flex-direction: column; align-items: flex-start; } }

/* ───────────────────────── Phone sign-up bar ─────────────────────────
   760px and narrower (where the nav links hide). The [hidden] attribute keeps it
   out without JS; js/home.js removes it and toggles .is-on. Hidden = visibility
   hidden too, so it is skipped by Tab and screen readers while off screen. */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(7, 9, 13, .8);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid rgba(255, 255, 255, .07);
  transform: translate3d(0, 110%, 0); visibility: hidden;
  transition: transform .4s var(--ease-out), visibility 0s linear .4s;
}
.mcta.is-on { transform: none; visibility: visible; transition: transform .4s var(--ease-out), visibility 0s; }
.mcta[hidden] { display: none; }
.mcta__btn { display: flex; width: 100%; max-width: 480px; min-height: 48px; margin: 0 auto; padding: 14px 24px; box-shadow: 0 8px 28px -12px rgba(223,174,123,.5); }
@media (min-width: 761px) { .mcta { display: none; } }
@media (max-width: 760px) {
  /* anchor jumps and focused elements land clear of the bar */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* reduced motion: it simply appears and disappears */
@media (prefers-reduced-motion: reduce) { .mcta, .mcta.is-on { transform: none; } }

/* ───────────────────────── Motion layer ─────────────────────────
   Everything below only applies with html.motion. js/home.js writes
   transforms/opacity per frame; CSS only sets up the pinned geometry. */

html.motion [data-reveal] { opacity: 0; transform: translateY(40px) scale(.985); transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }
html.motion .bento .tile:nth-child(2n) { transition-delay: .08s; }
html.motion .agents__row .wm:nth-child(2) { transition-delay: .08s; }
html.motion .agents__row .wm:nth-child(3) { transition-delay: .16s; }
html.motion .agents__row .wm:nth-child(4) { transition-delay: .24s; }

/* hero pin: the first screen plus about two screens of scrolling, which the
   intro and the lesson share (js/home.js paces the lesson to whatever this
   height gives it) */
html.motion .hero { height: 300vh; }
html.motion .hero__stage {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h)); padding: 0;
  display: block;
}
/* The headline and buttons stay on screen for the whole pinned hero. As the
   lesson starts they scale and lift into a compact header (transforms only);
   the eyebrow and subhead fade. js/home.js measures that header into --ht (its
   top) and --hh (its height), and the device is sized to fit the space below.
   The fallbacks follow the same formulas as the measurement (a three-line
   headline at clamp(34px, 4.6vh, 52px), line-height .98, then the gap and
   the 0.9-scale button), so the first frame already matches at any window
   height and nothing shifts when the measured values land. */
html.motion .hero__stage { --ht: clamp(14px, 2.6vh, 28px); --hh: calc(2.94 * clamp(34px, 4.6vh, 52px) + 56.3px); --beats: 84px; --hgap: 24px; }
/* between phone and 1318px wide the headline sets on two lines, not three */
@media (min-width: 761px) and (max-width: 1317px) { html.motion .hero__stage { --hh: calc(1.96 * clamp(34px, 4.6vh, 52px) + 56.3px); } }
html.motion .hero__copy { position: absolute; left: 0; right: 0; top: clamp(40px, 8.5vh, 96px); padding: 0 var(--gutter); }
html.motion .hero__copy > * { transform-origin: 50% 0; will-change: transform, opacity; }
html.motion .hero__copy::before { opacity: calc(1 - var(--hk, 0)); }
html.motion .hero__device {
  position: absolute; left: 0; right: 0; margin: 0; padding: 0 var(--gutter);
  --room: calc(100svh - var(--nav-h) - var(--ht) - var(--hh) - var(--hgap) - var(--beats));
  --hlw: min(1040px, 82vw, calc(var(--room) / .665));
  --lw: var(--hlw);
  --lh: calc(var(--hlw) * .665);
  top: calc(var(--ht) + var(--hh) + var(--hgap) + max(0px, (var(--room) - var(--lh)) / 2));
}
html.motion .hero__device .laptop { --lw: var(--hlw); will-change: transform; }
html.motion .hero__beats {
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 3.5vh, 40px); margin: 0;
  gap: 0 8px;
}
html.motion .hero__beats li { padding: 8px 14px; border-radius: 999px; color: var(--dim); transition: color .4s var(--ease), background .4s var(--ease); }
html.motion .hero__beats li::before { background: #2A2F3B; transition: background .4s, box-shadow .4s; }
html.motion .hero__beats li.on { color: var(--ink); background: rgba(255,255,255,.05); }
html.motion .hero__beats li.on::before { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
html.motion .hero__beats li.done::before { background: var(--gold-lo); }
@media (min-width: 761px) { html.motion .world__box .band, html.motion .world__stars { will-change: transform; } }
html.motion .world__box { will-change: transform, opacity; }
html.motion .glimpse { will-change: transform, opacity; }

/* the lesson, scrubbed. The track is top-anchored and home.js lifts it with a
   transform once it outgrows the stream, so older entries never reflow. */
html.motion .lsn__stream { justify-content: flex-start; }
html.motion .lsn__stream::after { display: none; }
html.motion .lsn__track { will-change: transform; }
html.motion .le:not(.on) { display: none; }
html.motion .le.on { animation: tlin .5s var(--ease-out); }
@keyframes tlin { from { opacity: 0; transform: translateY(calc(var(--u) * 12)); } }
html.motion .lp-block:not(.is-done) [data-pred-answered], html.motion .lp-block:not(.is-done) [data-check-answered] { display: none; }
html.motion .lp-block:not(.is-done) [data-pred-open] { display: inline-flex !important; }
html.motion .lp-block:not(.is-done) [data-check-field] { display: block !important; }
html.motion .lp-pv { opacity: 0; transform: translateY(calc(var(--u) * 8)); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
html.motion .lp-pv.on { opacity: 1; transform: none; }
html.motion .lp-cele {
  display: flex; position: absolute; inset: 0; z-index: 6; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
  background: rgba(9, 11, 16, .86); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
html.motion .lp-cele.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.lp-medal {
  display: grid; place-items: center; width: calc(var(--u) * 92); height: calc(var(--u) * 92); border-radius: 50%; margin-bottom: calc(var(--u) * 10);
  color: #171B26; background: radial-gradient(circle at 38% 32%, #F6DDBC 0%, #DFAE7B 48%, #A88458 100%);
  box-shadow: 0 0 0 1px rgba(223,174,123,.55), 0 0 calc(var(--u) * 60) rgba(223,174,123,.35);
  transform: scale(.6); transition: transform .9s var(--ease-out);
}
.lp-medal svg { width: 42%; height: 42%; }
.lp-cele.on .lp-medal { transform: none; }
.lp-reyebrow { font-size: calc(var(--u) * 9.5); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.lp-celet { font: 600 calc(var(--u) * 24) var(--app-sans); letter-spacing: -.01em; color: #F4F5F8; }
.lp-celed { font-size: calc(var(--u) * 11.5); color: #C6D0DE; margin-bottom: calc(var(--u) * 8); }
@container (max-width: 560px) {
  html.motion .lsn__work {
    display: grid; position: absolute; left: 0; right: 0; bottom: 0; height: 88%; z-index: 3; background: #10131B;
    border-top: 1px solid rgba(223,174,123,.3); border-radius: calc(var(--u) * 16) calc(var(--u) * 16) 0 0;
    box-shadow: 0 calc(var(--u) * -20) calc(var(--u) * 40) rgba(0,0,0,.6);
    transform: translateY(104%); transition: transform .7s var(--ease-out);
  }
  html.motion .lsn__work.up { transform: none; }
  html.motion .lp-tabs span:first-of-type { display: none; }
  html.motion .lp-editor { flex: none; min-height: 0; font-size: calc(var(--u) * 11); }
  html.motion .lp-pane .lp-hint:not([data-run-hint]) { display: none; }
  html.motion .lp-pane { padding: calc(var(--u) * 10) calc(var(--u) * 14); }
  html.motion .lp-pv code { line-height: 1.45; }
  html.motion .lp-predict { padding: calc(var(--u) * 10) calc(var(--u) * 12); }
}

/* phone-size hero: the screen itself, portrait */
@media (max-width: 760px) {
  .hero__stage { padding-top: 48px; }
  .laptop--hero-m, .hero .laptop { --lw: 100%; }
  .hero .laptop__lid { border-radius: 30px; padding: 9px; }
  .hero .laptop__lid::before { top: 3px; width: 4px; height: 4px; }
  .hero .laptop__screen { aspect-ratio: 400 / 600; border-radius: 22px; }
  .hero .laptop__base { display: none; }
  .hero__beats { gap: 6px 18px; font-size: 14px; }
  html.motion .hero__stage { --ht: 14px; --hh: 142px; --beats: 52px; --hgap: 16px; }
  html.motion .hero__copy { top: 28px; }
  html.motion .hero__device {
    --hlw: min(420px, 88vw, calc(var(--room) * .667));
    --lh: calc(var(--hlw) * 1.5 - 9px);
  }
  /* beats: a fixed row of dots; the current beat's words fade in above it
     (opacity only, so nothing around it moves) */
  html.motion .hero__beats { bottom: 14px; gap: 0 4px; }
  html.motion .hero__beats li { padding: 4px; background: none !important; }
  html.motion .hero__beats li::before { width: 7px; height: 7px; }
  html.motion .hero__beats li span {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); text-align: center;
    font-size: 15px; color: var(--ink); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
  }
  html.motion .hero__beats li.on span { opacity: 1; }
  .statement { padding-top: 110px; padding-bottom: 110px; }
  .every__rain span:nth-child(odd) { display: none; }
  .tile { min-height: 0; padding: 28px 24px 0; border-radius: 24px; }
  .jstep__body { font-size: 17px; }
}

/* narrow phones: the headline wraps to four lines, so the compact header is taller */
@media (max-width: 379px) { html.motion .hero__stage { --hh: 168px; } }

/* phones + tablets: The Climb's progress hairline under the header, through How it works */
@media (max-width: 1199px) {
  html.motion .jprogress { display: block; position: fixed; left: 0; right: 0; top: var(--nav-h); height: 2px; z-index: 49; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); }
  html.motion .jprogress.on { opacity: 1; }
  html.motion .jprogress span { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(223,174,123,.7); }
}

/* journey step 02 (desktop): the prototype lifts off the studio's screen toward you */
@media (min-width: 1024px) {
  html.motion .jscreen--proto, html.motion .jscreen--proto .vscreen, html.motion .jscreen--proto .win { overflow: visible; }
  html.motion .jscreen--proto .win__bar { border-radius: calc(var(--dw) * .01) calc(var(--dw) * .01) 0 0; }
  html.motion .jscreen--proto .ob-chat { border-bottom-left-radius: calc(var(--dw) * .01); }
  html.motion .jscreen--proto .pside { border-bottom-right-radius: calc(var(--dw) * .01); }
  html.motion .jscreen--proto .pf { transform-origin: 50% 0%; transition: transform 1.1s var(--ease-out), box-shadow 1.1s var(--ease-out); }
  html.motion .jscreen--proto.is-active .pf {
    transform: translateY(calc(var(--dw) * .012)) scale(1.3); transition-delay: .45s;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.5), 0 60px 90px -30px rgba(0,0,0,.95), 0 0 120px rgba(223,174,123,.12);
  }
}

/* every-line pin */
html.motion .every { height: 300vh; }
html.motion .every__stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0 var(--gutter); }
html.motion .every__title, html.motion .every__sub, html.motion .every__why { opacity: 0; transform: translateY(30px); will-change: transform, opacity; }
html.motion .every__rain span { will-change: transform; }

/* statement words */
html.motion .statement { min-height: 100svh; display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* small press states inside the depicted lesson page */
.btn-mini { transition: transform .2s var(--ease), filter .2s; }
.btn-mini.press { transform: scale(.93); filter: brightness(.9); }
.glimpse__out { transition: opacity .4s var(--ease); }

/* Founding window line on the price card (moved from the hero). */
.buy__window { margin: 6px 0 0; font-size: 14px; color: var(--gold); }

/* Keeps a short phrase on one line (the yearly sub-line on phones). */
.nowrap { white-space: nowrap; }