/* Design system: pure black canvas, one typeface, hierarchy from scale not
   weight, ultra-light body, pill actions, no cards/shadows. The only colour on
   the page is the video and the disc; --accent echoes them and is used only
   for small labels and the progress line. */
:root {
  --void: #000000;
  --white: #ffffff;
  --ash: #9a9a9a;
  --silver: #bdbdbd;
  --hair: rgba(255, 255, 255, 0.14);
  --accent: #7fe9e2;
  --cyan: #00e5ff;                       /* disc only */
  --cyan-glow: rgba(0, 229, 255, 0.55);  /* disc only */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --page: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--white);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  /* `hidden` here would disable position:sticky on descendants; `clip` does not. */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }

/* ============== TYPE ============== */

.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.h-hero {
  font-weight: 400;
  font-size: clamp(30px, min(4vw, 6.4vh), 60px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.9);
}
.h-hero.dim { color: var(--ash); margin-top: 6px; }

.h-cta {
  font-weight: 400;
  font-size: clamp(24px, 2.7vw, 38px);
  letter-spacing: -0.03em;
  text-shadow: 0 2px 24px #000, 0 0 40px #000;
}

.h-display {
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.h-mega {
  font-weight: 400;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.h-sub {
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.body {
  font-weight: 200;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--silver);
}

.body-lg {
  font-weight: 200;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ============== ACTIONS ============== */

.pill {
  display: inline-block;
  border-radius: 75px;
  padding: 13px 30px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, letter-spacing 0.8s var(--ease);
}
.pill-solid { background: var(--white); color: var(--void); border: 1px solid var(--white); }
.pill-solid:hover { background: transparent; color: var(--white); letter-spacing: 0.04em; }
.pill-ghost { border: 1px solid rgba(255,255,255,0.3); color: var(--white); }
.pill-ghost:hover { border-color: var(--white); letter-spacing: 0.04em; }

.textlink { font-size: 14px; color: var(--ash); transition: color 0.4s ease; }
.textlink:hover { color: var(--white); }
.textlink.arrow { color: var(--white); display: inline-block; margin-top: 30px; }
.textlink.arrow::after { content: '→'; display: inline-block; margin-left: 8px; transition: transform 0.8s var(--ease); }
.textlink.arrow:hover::after { transform: translateX(8px); }

/* ============== TOP BAR ============== */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
}

.brand { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }

.topnav { display: flex; gap: 34px; }
.topnav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.4s ease;
}
.topnav a:hover { color: var(--white); }

.topactions { display: flex; align-items: center; gap: 22px; }
.topactions .pill { padding: 9px 20px; font-size: 13px; }
/* nothing in the top bar ever wraps onto two lines ("Sign / in", "Genai / Applied") */
.topbar { gap: 14px; }
.topbar .brand, .topactions > * { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 600px) {
  .topbar { padding-top: 16px; padding-bottom: 16px; }
  .topbar .brand { font-size: 21px; }
  .topactions { gap: 12px; }
  .topactions .pill { padding: 8px 13px; font-size: 12px; }
  .topactions .textlink { font-size: 13px; }
  /* helper text, not actions: the account email and "Already have an account?" */
  .topactions span.textlink, .topactions #who { display: none; }
}
/* very small phones: only the main button (sign-in stays reachable from signup and the footer) */
@media (max-width: 380px) {
  .topactions a.textlink:not(:only-child) { display: none; }
}

.progress-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ============== HERO ============== */

.hero { position: relative; height: 900vh; }

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.video-frame { position: absolute; inset: 0; z-index: 0; }

#hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.65) 100%),
    linear-gradient(to bottom, transparent 80%, #000 100%);
}

/* ---- hero copy bands ----
   Each beat is a full-width, mostly transparent band. Choreography, in order:
   1. the band wipes across from the side its text sits on
   2. the label fades up
   3. the headline rises word by word out of a mask, going from blurred to sharp
   4. the supporting line fades up
   On exit the words lift away and the band wipes off through the far side. */
.beat { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.beat.on { pointer-events: auto; }

.card { position: relative; padding: clamp(20px, 3.4vh, 40px) var(--gutter); }
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.26) 55%, rgba(0,0,0,0.05) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1);
}
.beat.on .card::before { transform: scaleX(1); }
.beat.was-on:not(.on) .card::before { transform-origin: right center; transition-duration: 0.6s; }

.card-inner { max-width: min(780px, 58vw); }

/* right-hand bands mirror everything */
.pos-tr .card::before { background: linear-gradient(270deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.26) 55%, rgba(0,0,0,0.05) 100%); transform-origin: right center; }
.pos-tr.was-on:not(.on) .card::before { transform-origin: left center; }
.pos-tr .card-inner { margin-left: auto; text-align: right; }

/* the closing band is centred and wipes open from the middle */
.pos-bc .card { padding-top: 20px; padding-bottom: 22px; text-align: center; }
.pos-bc .card::before { background: linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.1)); transform-origin: center; }
.pos-bc.was-on:not(.on) .card::before { transform-origin: center; }
.pos-bc .card-inner { max-width: none; }
.pos-bc .pill { margin-top: 16px; }

.pos-tl { top: 13vh; }
.pos-tr { top: 14vh; }
.pos-bc { bottom: 3vh; }

/* label, supporting line and button: fade up, timed around the headline */
.card .label, .card .body, .card .pill {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.beat.on .card .label, .beat.on .card .body, .beat.on .card .pill {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease), transform 1s var(--ease);
}
.beat.on .card .label { transition-delay: 0.3s; }
.beat.on .card .body, .beat.on .card .pill { transition-delay: 0.85s; }
.beat .body { margin-top: 16px; font-size: clamp(16px, 1.45vw, 21px); text-shadow: 0 1px 12px rgba(0,0,0,0.9); }

/* headline words: rise out of the mask, blurred to sharp */
.beat .w > span {
  transform: translateY(-45%);
  opacity: 0;
  filter: blur(8px);
  transition: transform 0.35s ease-in, opacity 0.3s ease, filter 0.3s ease;
  transition-delay: 0s;
}
.beat:not(.was-on) .w > span, .sub-beat:not(.on) .w > span { transform: translateY(115%); }
.beat.on :not(.sub-beat) > .w > span,
.beat.on .sub-beat.on > .w > span {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition: transform 1.1s var(--ease), opacity 0.7s ease, filter 0.9s ease;
  transition-delay: calc(0.4s + var(--i) * 55ms);
}
.beat.on .sub-beat.on > .w > span { transition-delay: calc(var(--i) * 55ms); }

.bracket-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bracket-label {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.bracket-labels.on .bracket-label { opacity: 1; }
.bracket-labels.on .bracket-label:nth-child(2) { transition-delay: 0.1s; }
.bracket-labels.on .bracket-label:nth-child(3) { transition-delay: 0.2s; }
.bracket-labels.on .bracket-label:nth-child(4) { transition-delay: 0.3s; }
@media (max-aspect-ratio: 4/3) { .bracket-labels { display: none; } }

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: var(--gutter);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ash);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-hint.done .scroll-line { opacity: 0; animation: none; }
.scroll-line {
  width: 36px;
  height: 1px;
  background: var(--white);
  transform-origin: left center;
  animation: scroll-line-move 2.4s var(--ease) infinite;
}
@keyframes scroll-line-move {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ============== IDENTITY DISC (voice agent) — unchanged ============== */

.identity-disc {
  position: fixed;
  bottom: 36px;
  right: 36px;
  width: 76px;
  height: 76px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disc-ticks {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--cyan) 0deg 2.2deg, transparent 2.2deg 15deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 2px));
  opacity: 0.75;
  animation: disc-rotate 16s linear infinite;
}
@keyframes disc-rotate { to { transform: rotate(360deg); } }

.disc-ring-outer {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.3);
}

.disc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 16px var(--cyan-glow), inset 0 0 16px var(--cyan-glow);
  animation: disc-pulse 2.4s ease-in-out infinite;
}

.disc-core {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan), 0 0 24px var(--cyan-glow);
}

@keyframes disc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.75; }
}

.identity-disc:hover .disc-ring { animation-duration: 1s; }
.identity-disc:hover .disc-ticks { animation-duration: 4s; }

/* ============== SECTIONS ============== */

.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(90px, 14vh, 160px) var(--gutter);
}

.section-head { margin-bottom: clamp(48px, 8vh, 96px); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.split-head { position: sticky; top: 16vh; }
.split-head .body { margin-top: 28px; max-width: 420px; }

.section, .rows, .steps, .plans, .faq, .prose { perspective: 1200px; }
.reveal { opacity: 0; transform-origin: 50% 100%; transform: translate3d(-120px, 0, -200px) rotateX(80deg); }
.reveal.in { animation: card-in-flat 1.5s var(--ease) forwards; }
@keyframes card-in-flat {
  0%   { opacity: 0; transform: translate3d(-120px, 0, -200px) rotateX(80deg); }
  40%  { opacity: 1; transform: translate3d(0, 0, -200px) rotateX(80deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0deg); }
}

/* domain rows: an editorial list, no card chrome */
.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--hair);
}
.row:last-child { border-bottom: 1px solid var(--hair); }
.row-num { font-size: 12px; color: var(--ash); font-weight: 400; }
.row-name {
  font-weight: 400;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.04em;
  line-height: 1.1;
  transition: transform 1s var(--ease);
}
.row-hook { display: block; margin-top: 8px; font-weight: 200; font-size: 15px; letter-spacing: 0; color: var(--ash); transition: color 0.4s ease; }
.row-arrow { font-size: 22px; font-weight: 200; color: var(--ash); transition: transform 1s var(--ease), color 0.4s ease; }
.row:hover .row-name { transform: translateX(14px); }
.row:hover .row-hook { color: var(--white); }
.row:hover .row-arrow { transform: translateX(8px); color: var(--white); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 5vw, 72px); }
.step-num { display: block; font-weight: 200; font-size: clamp(56px, 7vw, 113px); letter-spacing: -0.05em; line-height: 1; color: var(--ash); margin-bottom: 30px; }
.step .body { margin-top: 14px; }
.step:nth-child(2) { animation-delay: 0.15s; }
.step:nth-child(3) { animation-delay: 0.3s; }

/* playbook list */
.plain { margin-top: 48px; }
.plain li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--hair);
  font-weight: 200;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--silver);
}
.plain li span { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); padding-top: 5px; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 8vw, 120px); }
.plan-price { font-weight: 400; font-size: clamp(64px, 9vw, 113px); letter-spacing: -0.05em; line-height: 1; margin-bottom: 24px; }
.plan .body { margin: 12px 0 30px; max-width: 420px; }
.plan .textlink.arrow { margin-top: 0; }
.plan:nth-child(2) { animation-delay: 0.15s; }
.plan:nth-child(2) .plan-price { color: var(--ash); }

/* faq */
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 26px 0;
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 24px);
  letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 200; font-size: 26px; color: var(--ash); transition: transform 0.8s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details .body { padding: 0 60px 30px 0; max-width: 620px; }

/* final */
.final { text-align: center; padding-top: clamp(120px, 22vh, 240px); padding-bottom: clamp(120px, 22vh, 240px); }
.final .body-lg { margin: 36px 0 42px; color: var(--silver); }

.footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 36px var(--gutter) 60px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 36px;
  font-size: 12px;
  color: var(--ash);
}
.footer nav { display: flex; gap: 28px; }
.footer nav a:hover { color: var(--white); }
.footer .brand { color: var(--white); font-size: clamp(30px, 3.4vw, 46px); }

/* ============== RESPONSIVE ============== */

@media (max-width: 900px) {
  .topnav { display: none; }
  .split, .steps, .plans { grid-template-columns: 1fr; }
  .split-head { position: static; }
  .card-inner { max-width: none; }
  .pos-tr .card-inner { text-align: left; }
  .plain li { grid-template-columns: 1fr; gap: 6px; }
  .identity-disc { width: 60px; height: 60px; bottom: 20px; right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sub-beat, .bracket-label { transition: none; }
  .reveal { animation: none !important; transform: none; }
  .reveal.in { opacity: 1; }
  .card::before, .card .label, .card .body, .card .pill, .beat .w > span { transition: none !important; filter: none; }
  .scroll-line, .disc-ticks, .disc-ring { animation: none; }
}

/* ============== NAV TRANSITION: DISC IRIS ==============
   A black circle with a glowing rim grows out of the identity disc until it
   covers the screen, the destination's name shows, then it shrinks back in. */
.iris {
  position: fixed;
  right: 74px;   /* disc centre: 36px offset + half of 76px */
  bottom: 74px;
  width: 0;
  height: 0;
  z-index: 45;   /* under the disc (50), over everything else on the page */
  pointer-events: none;
}
.iris::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300vmax;
  height: 300vmax;
  margin: -150vmax 0 0 -150vmax;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 2px var(--cyan), 0 0 60px 6px var(--cyan-glow), 0 0 160px 30px rgba(0, 229, 255, 0.18);
  transform: scale(0);
  transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1);
}
.iris.on { pointer-events: auto; }
.iris.on::before { transform: scale(1); }

.iris-title {
  position: fixed;
  inset: 0;
  z-index: 46;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease);
}
.iris-title.on { opacity: 1; transform: translateY(0); }
.iris-title .label { margin-bottom: 14px; }
.iris-title .name { font-weight: 400; font-size: clamp(48px, 9vw, 130px); letter-spacing: -0.05em; line-height: 1; }

/* the disc spins up while it is "working" */
.identity-disc.busy .disc-ticks { animation-duration: 1.2s; }
.identity-disc.busy .disc-ring { animation-duration: 0.5s; }

@media (max-width: 900px) { .iris { right: 50px; bottom: 50px; } }
@media (prefers-reduced-motion: reduce) { .iris::before, .iris-title { transition: none; } }

/* ============== 3D LAYER ============== */

/* particle field: fixed behind the sections, shown only once the hero has passed */
.particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero, main, .footer { position: relative; z-index: 1; }

/* ============== KINETIC HEADLINES ==============
   script.js splits display headlines into words; each rises out of a mask. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.w > span { display: inline-block; transform: translateY(115%); transition: transform 1.25s var(--ease); transition-delay: calc(var(--i) * 75ms); }
.kinetic.in .w > span { transform: translateY(0); }
.reveal.kinetic { opacity: 1; transform: none; animation: none; }
.reveal.kinetic > :not(.h-display):not(.lp-h1) { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease) 0.25s, transform 1.1s var(--ease) 0.25s; }
.reveal.kinetic.in > :not(.h-display):not(.lp-h1) { opacity: 1; transform: translateY(0); }

/* ============== PINNED STEPS ============== */
.step-ticks { display: none; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  #how.pinned { height: 340vh; max-width: none; padding: 0; }
  .how-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    max-width: var(--page);
    margin: 0 auto;
    padding: 13vh var(--gutter) 6vh;
    display: flex;
    flex-direction: column;
  }
  .how-sticky .section-head { margin-bottom: 0; }
  .pinned .steps { display: block; position: relative; flex: 1; }
  .pinned .step {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    column-gap: 6vw;
    row-gap: 14px;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s var(--ease), transform 1.1s var(--ease);
    pointer-events: none;
  }
  .pinned .step.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .pinned .step.past { transform: translateY(-60px); }
  .pinned .step-num { grid-row: 1 / span 2; align-self: center; margin: 0; font-size: clamp(140px, min(22vw, 38vh), 320px); color: var(--white); }
  .pinned .step .h-sub { align-self: end; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -0.03em; }
  .pinned .step .body { align-self: start; margin-top: 0; max-width: 520px; font-size: clamp(16px, 1.5vw, 21px); }
  .step-ticks { display: flex; gap: 10px; }
  .step-ticks span { width: 54px; height: 2px; background: var(--hair); transition: background 0.6s ease; }
  .step-ticks span.on { background: var(--white); }
}

/* ============== AUTH PAGES ============== */

.auth-page .topbar { background: none; }

.auth {
  min-height: 100vh;
  max-width: var(--page);
  margin: 0 auto;
  padding: 18vh var(--gutter) 10vh;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: start;
}

.auth-side .body { margin-top: 26px; }
.auth-points { margin-top: 44px; }
.auth-points li { padding: 16px 0; border-top: 1px solid var(--hair); font-weight: 200; font-size: clamp(16px, 1.4vw, 19px); color: var(--silver); }
.auth-points li:last-child { border-bottom: 1px solid var(--hair); }

.auth-form { display: flex; flex-direction: column; align-items: flex-start; }
.auth-form[hidden], .auth-done[hidden] { display: none; }

.field { display: block; width: 100%; margin-bottom: 34px; }
.field > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); transition: color 0.4s ease; }
.field > span em { font-style: normal; font-weight: 400; letter-spacing: 0.04em; text-transform: none; margin-left: 8px; }
.field input {
  width: 100%;
  margin-top: 10px;
  padding: 8px 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  color: var(--white);
  font: inherit;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  outline: none;
  transition: border-color 0.4s ease;
}
.field input:focus { border-bottom-color: var(--white); }
/* show / hide password */
.field.has-eye { position: relative; }
.field.has-eye input { padding-right: 46px; }
.field .eye { position: absolute; right: 0; bottom: 9px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ash); cursor: pointer; transition: color 0.3s ease, background 0.3s ease; }
.field .eye:hover, .field .eye[aria-pressed="true"] { color: var(--white); }
.field .eye:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }
.field:focus-within > span { color: var(--white); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--white); box-shadow: 0 0 0 100px #000 inset; caret-color: var(--white); }

.check { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 34px; font-weight: 200; font-size: 15px; line-height: 1.45; color: var(--silver); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; }
.check input:checked { background: var(--white); border-color: var(--white); }
.check input:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
.check a { color: var(--white); border-bottom: 1px solid var(--hair); }

.form-aside { margin: -14px 0 34px; }
.form-error { margin-bottom: 24px; font-size: 15px; font-weight: 300; color: #ff8f8f; }
.mode-note { margin-bottom: 34px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.auth-form .pill { cursor: pointer; font-family: inherit; }
.auth-form .pill:disabled { opacity: 0.5; cursor: default; }
.auth-done .body { margin-top: 26px; }
.auth-done .pill { margin-top: 30px; }

/* "Check your inbox": shown after signup, and when someone signs in before verifying */
.verify-panel[hidden] { display: none; }
.verify-panel .body { margin-top: 26px; }
.verify-panel .verify-email { color: var(--white); font-weight: 400; overflow-wrap: anywhere; }
.verify-steps { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: v; }
.verify-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 14px 0; border-top: 1px solid var(--hair); font-weight: 300; color: var(--silver); counter-increment: v; }
.verify-steps li:last-child { border-bottom: 1px solid var(--hair); }
.verify-steps li::before { content: counter(v, decimal-leading-zero); font-size: 12px; color: var(--ash); padding-top: 4px; }
.resend { margin-top: 30px; }
.resend .pill { cursor: pointer; font-family: inherit; }
.resend .pill:disabled { opacity: 0.5; cursor: default; }
.resend-msg { margin: 14px 0 0; font-size: 15px; font-weight: 300; color: var(--accent); }
.resend-msg[hidden] { display: none; }

/* ============== ASSESSMENT MODE CHOOSER ==============
   Opens inside the disc iris: two full-height halves, one per way of taking
   the assessment. */
.chooser {
  position: fixed;
  inset: 0;
  z-index: 47;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 15vh var(--gutter) 9vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.chooser.on { opacity: 1; pointer-events: auto; transition-delay: 0.45s; }
.chooser-head .h-display { font-size: clamp(34px, 4.4vw, 62px); }
.chooser-options { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6vh; border-top: 1px solid var(--hair); }
.option {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6vh clamp(20px, 3.4vw, 54px) 30px 0;
  transform: translateY(40px);
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}
.option + .option { padding-left: clamp(20px, 3.4vw, 54px); border-left: 1px solid var(--hair); }
.chooser.on .option { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.chooser.on .option + .option { transition-delay: 0.72s; }
.option-num { font-weight: 200; font-size: clamp(56px, 8vw, 120px); letter-spacing: -0.05em; line-height: 1; color: var(--ash); transition: color 0.5s ease; }
.option-name { margin-top: 20px; font-weight: 400; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.04em; line-height: 1.05; transition: transform 1s var(--ease); }
.option .body { margin-top: 14px; max-width: 420px; }
.option-meta { margin-top: 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); transition: color 0.5s ease; }
.option:hover .option-num, .option:focus-visible .option-num { color: var(--white); }
.option:hover .option-name, .option:focus-visible .option-name { transform: translateX(14px); }
.option:hover .option-meta, .option:focus-visible .option-meta { color: var(--accent); }
.option:focus-visible { outline: none; }
.chooser[hidden] { display: none; }
.chooser .w > span { transition-delay: calc(0.45s + var(--i) * 75ms); }
.chooser.on .w > span { transform: translateY(0); }
.chooser-close { position: absolute; top: 15vh; right: var(--gutter); background: none; border: 0; color: var(--ash); font: inherit; font-size: 14px; cursor: pointer; }
.chooser-close:hover { color: var(--white); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; padding-top: 14vh; }
  .chooser-options { grid-template-columns: 1fr; }
  .option + .option { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .option-num { font-size: 48px; }
}

/* ============== ASSESSMENT ============== */

.assess { max-width: 980px; margin: 0 auto; padding: 19vh var(--gutter) 14vh; min-height: 100vh; }
.view[hidden] { display: none; }
.view > .body, .view > .body-lg { margin-top: 26px; max-width: 620px; }
.view > .pill { margin-top: 40px; cursor: pointer; font-family: inherit; }

.q-text { font-weight: 400; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -0.04em; }
.q-options { margin-top: 6vh; }
.q-option {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hair);
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.q-option:last-child { border-bottom: 1px solid var(--hair); }
.q-option-text { font-weight: 400; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.15; transition: transform 1s var(--ease); }
.q-option:hover .q-option-text, .q-option:focus-visible .q-option-text { transform: translateX(14px); }
.q-option:hover .row-arrow, .q-option:focus-visible .row-arrow { transform: translateX(8px); color: var(--white); }
.q-option:focus-visible { outline: none; }
.q-free { margin-top: 6vh; max-width: 620px; }
.q-free .pill { cursor: pointer; font-family: inherit; }
.q-free .pill:disabled { opacity: 0.5; cursor: default; }
#q-error { margin-top: 24px; }

/* each new question fades and rises in; while a request is in flight the view dims */
#view-question.enter .label, #view-question.enter .q-text, #view-question.enter .q-option, #view-question.enter .q-free {
  animation: q-in 1.1s var(--ease) both;
}
#view-question.enter .q-text { animation-delay: 0.08s; }
#view-question.enter .q-option { animation-delay: calc(0.2s + var(--i) * 70ms); }
#view-question.enter .q-free { animation-delay: 0.55s; }
@keyframes q-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
#view-question.busy { opacity: 0.45; pointer-events: none; transition: opacity 0.4s ease; }

#b-percent { margin-top: 10px; font-variant-numeric: tabular-nums; }

.playbook { margin: 10px 0 60px; font-weight: 200; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--silver); }
.playbook h2 { margin: 2.2em 0 0.5em; font-weight: 400; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.04em; color: var(--white); }
.playbook h2:first-child { margin-top: 0; }
.playbook h3 { margin: 2em 0 0.5em; font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.03em; line-height: 1.15; color: var(--white); }
.playbook h4 { margin: 1.8em 0 0.4em; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.playbook p { margin: 0 0 1em; }
.playbook strong { font-weight: 400; color: var(--white); }
.playbook ul, .playbook ol { margin: 0 0 1.2em; }
.playbook li { padding: 12px 0; border-top: 1px solid var(--hair); }
.playbook li:last-child { border-bottom: 1px solid var(--hair); }
.playbook ol { counter-reset: n; }
.playbook ol li { counter-increment: n; display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.playbook ol li::before { content: counter(n, decimal-leading-zero); font-size: 12px; font-weight: 400; color: var(--ash); padding-top: 5px; }
/* a list item with more under it: its description and sub-points stay inside the item */
.playbook .li-body { min-width: 0; }
.playbook .li-main { display: block; }
.playbook .li-sub { margin: 6px 0 0; }
.playbook .li-list { margin: 8px 0 2px; counter-reset: none; }
.playbook .li-list li,
.playbook ol .li-list li { display: block; position: relative; padding: 3px 0 3px 18px; border: 0; counter-increment: none; font-size: 0.94em; }
.playbook .li-list li::before,
.playbook ol .li-list li::before { content: ''; position: absolute; left: 2px; top: 0.92em; width: 6px; height: 1px; padding: 0; background: var(--ash); }
.playbook hr { border: 0; border-top: 1px solid var(--hair); margin: 2.4em 0; }
.playbook code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; color: var(--white); }
/* Wide tables break out of the reading column instead of scrolling sideways:
   up to the page width, columns share the space equally and long words wrap. */
.table-wrap { --w: min(1180px, calc(100vw - 2 * var(--gutter))); width: var(--w); margin: 0 0 1.4em calc((100% - var(--w)) / 2); }
.playbook table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 0.86em; line-height: 1.5; }
.playbook th, .playbook td { overflow-wrap: break-word; }
/* 6+ columns: smaller type and tighter gaps, so whole words fit in each column */
.playbook table.dense { font-size: 0.76em; }
.playbook table.dense th, .playbook table.dense td { padding-right: 12px; }
.playbook table.dense th { font-size: 11px; letter-spacing: 0.08em; }
.playbook th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); padding: 12px 18px 12px 0; border-bottom: 1px solid var(--white); }
.playbook td { padding: 12px 18px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }

/* ============== TRACKS ============== */
.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(30px, 5vw, 80px); }
.track { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 18px; padding: 28px 0; border-top: 1px solid var(--hair); }
.track-name { font-weight: 400; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.04em; line-height: 1.1; transition: transform 1s var(--ease); }
.track-for { display: block; margin-top: 8px; font-weight: 200; font-size: 15px; letter-spacing: 0; line-height: 1.45; color: var(--ash); transition: color 0.4s ease; }
.track:hover .track-name { transform: translateX(14px); }
.track:hover .track-for { color: var(--white); }
.track:hover .row-arrow { transform: translateX(8px); color: var(--white); }
.track.spot .row-num { color: var(--accent); }
.track.spot { border-top-color: var(--accent); }
@media (max-width: 900px) { .tracks { grid-template-columns: 1fr; } }

button.pill-ghost { background: none; color: var(--white); font-family: inherit; cursor: pointer; }
.assess-page .topbar { background: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0)); }
.section-head .body { margin-top: 26px; max-width: 560px; }

/* On narrow screens each table row becomes a labelled block. */
@media (max-width: 900px) {
  .table-wrap { width: auto; margin-left: 0; }
  .playbook table, .playbook tbody, .playbook tr, .playbook td { display: block; width: auto; }
  .playbook thead, .playbook colgroup { display: none; }
  .playbook table.dense { font-size: 0.86em; } /* stacked rows have the full width, so no need for small type */
  .playbook tr { padding: 14px 0; border-top: 1px solid var(--white); }
  .playbook td { padding: 6px 0; border: 0; }
  .playbook td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
}

/* ============== PLAYBOOK ============== */

.assess.wide { max-width: var(--page); }
.pb { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); }

.pb-toc { position: sticky; top: 15vh; align-self: start; }
.pb-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hair); }
.pb-toc a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
  margin-left: -1px;
  padding: 9px 0 9px 16px;
  border-left: 1px solid transparent;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ash);
  transition: color 0.4s ease, border-color 0.4s ease;
}
.pb-toc a span { font-size: 11px; padding-top: 2px; }
.pb-toc a:hover { color: var(--white); }
.pb-toc a.active { color: var(--white); border-left-color: var(--accent); }
.pb-toc a.active span { color: var(--accent); }

.pb-hero { padding-bottom: clamp(40px, 7vh, 80px); }
.pb-hero .body { margin-top: 26px; }
.pb-hint { margin-top: 30px; max-width: 560px; padding-left: 18px; border-left: 2px solid var(--accent); font-weight: 200; font-size: 15px; line-height: 1.5; color: var(--silver); }
.pb-intro { font-size: clamp(18px, 1.6vw, 22px); color: var(--white); padding-bottom: 20px; }

.chapter { position: relative; padding: clamp(64px, 10vh, 110px) 0 clamp(24px, 4vh, 44px); border-top: 1px solid var(--hair); scroll-margin-top: 80px; }
.chapter-head { display: grid; grid-template-columns: clamp(56px, 6vw, 92px) minmax(0, 1fr); align-items: baseline; margin-bottom: 34px; }
.chapter-num { font-weight: 200; font-size: clamp(36px, 4vw, 60px); letter-spacing: -0.04em; line-height: 1; color: var(--ash); }
.playbook .chapter-title { margin: 0; font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.04em; color: var(--white); }
.chapter-note { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.chapter-body, .chapter .score, .chapter .refine { margin-left: clamp(56px, 6vw, 92px); }
.playbook .chapter-body > h3:first-child, .playbook .chapter-body > p:first-child { margin-top: 0; }
.chapter .table-wrap { width: 100%; margin-left: 0; }

.score { display: flex; align-items: center; gap: clamp(20px, 4vw, 64px); margin: 0 0 34px; }
.score-num { font-weight: 200; font-size: clamp(88px, 11vw, 170px); letter-spacing: -0.06em; line-height: 0.9; color: var(--white); }
.score-num small { margin-left: 6px; font-size: 0.36em; letter-spacing: 0; color: var(--ash); }
.score-bar { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--hair); }
.score-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); box-shadow: 0 0 14px var(--accent); transition: width 1.8s var(--ease) 0.3s; }
.chapter.in .score-bar span { width: var(--score); }

.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 30px; margin: 30px 0 26px; border-top: 1px solid var(--hair); }
.phase { position: relative; padding-top: 28px; }
.phase::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.playbook .phase h4 { margin-top: 0; }
.playbook .phase li { padding: 12px 0; font-size: 0.95em; }
.callout { margin-top: 36px; padding: 2px 0 2px 24px; border-left: 2px solid var(--accent); }
.playbook .callout h4 { margin-top: 0; }
.playbook .callout p { color: var(--white); }

.pb-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.25s var(--ease); }
.pb-reveal.in { opacity: 1; transform: none; }

/* ---- add to this section ---- */
.refine { margin-top: 40px; }
.refine-toggle { display: inline-flex; align-items: center; gap: 14px; padding: 0; background: none; border: 0; color: var(--ash); font: inherit; font-size: 14px; cursor: pointer; transition: color 0.4s ease; }
.refine-toggle[hidden] { display: none; }
.refine-toggle .plus { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; font-size: 17px; font-weight: 200; transition: border-color 0.4s ease, transform 0.9s var(--ease), background 0.4s ease, color 0.4s ease; }
.refine-toggle:hover, .refine-toggle:focus-visible { color: var(--white); outline: none; }
.refine-toggle:hover .plus, .refine-toggle:focus-visible .plus { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }
.refine-form { max-width: 660px; animation: q-in 0.9s var(--ease) both; }
.refine-form[hidden] { display: none; }
.refine .field { margin-bottom: 22px; }
.field textarea {
  display: block;
  width: 100%;
  min-height: 3.4em;
  margin-top: 12px;
  padding: 8px 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  color: var(--white);
  font: inherit;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45;
  resize: vertical;
  outline: none;
  transition: border-color 0.4s ease;
}
.field textarea:focus { border-bottom-color: var(--white); }
.field textarea::placeholder { color: #6a6a6a; }
.refine-actions { display: flex; align-items: center; gap: 22px; }
.refine-actions .pill { cursor: pointer; font-family: inherit; }
.refine-actions .pill:disabled { opacity: 0.5; cursor: default; }
.refine-cancel { padding: 0; background: none; border: 0; font: inherit; font-size: 14px; cursor: pointer; }
.refine .form-error { margin: 18px 0 0; }

/* while a section is being rewritten: dim it and run a scan line down it */
.chapter-body { transition: opacity 0.5s ease, filter 0.5s ease; }
.chapter.updating .chapter-body { opacity: 0.22; filter: blur(2px); }
.chapter.updating::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 18px var(--accent); animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { from { top: 8%; } to { top: 92%; } }
.chapter.updated .chapter-body { animation: updated-in 1.4s var(--ease); }
@keyframes updated-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.pb-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(60px, 12vh, 120px); padding-top: 40px; border-top: 1px solid var(--hair); }
.view .pb-end .pill { margin-top: 0; }

@media (max-width: 1100px) {
  .pb { grid-template-columns: 1fr; }
  .pb-toc { display: none; }
}
@media (max-width: 700px) {
  .chapter-body, .chapter .score, .chapter .refine { margin-left: 0; }
  .chapter-head { grid-template-columns: 48px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-reveal { opacity: 1; transform: none; transition: none; }
  .chapter.updating::after, .chapter.updated .chapter-body, .refine-form { animation: none; }
}

/* ============== SURVEY: MODE CHOICE, SECTIONS, VOICE ============== */

button.textlink { padding: 0; background: none; border: 0; font: inherit; font-size: 14px; cursor: pointer; }

.mode-options { display: grid; grid-template-columns: 1fr 1fr; margin-top: 7vh; border-top: 1px solid var(--hair); }
.mode-options .option { opacity: 1; transform: none; width: 100%; padding-top: 5vh; background: none; border: 0; color: var(--white); font: inherit; text-align: left; cursor: pointer; animation: q-in 1.1s var(--ease) both 0.15s; }
.mode-options .option + .option { border-left: 1px solid var(--hair); animation-delay: 0.27s; }
#view-mode > .h-display, #view-mode > .label, #view-mode > .body { animation: q-in 1.1s var(--ease) both; }
#view-mode > .body { margin-top: 26px; }

.view-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.view-center .body { margin-left: auto; margin-right: auto; }
.voice-orb { position: relative; width: 150px; height: 150px; margin: 2vh auto 8vh; display: flex; align-items: center; justify-content: center; }
.voice-orb .disc-ticks { inset: -30px; }
.voice-orb .disc-ring-outer { inset: -8px; }
.voice-orb .disc-core { width: 22px; height: 22px; }
.view-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; }
.view-actions .pill { cursor: pointer; font-family: inherit; }

.survey-steps { display: flex; gap: 8px; margin: 0 0 8vh; padding: 0; list-style: none; }
.survey-steps li { flex: 1; min-width: 0; }
.survey-steps .bar { display: block; height: 2px; background: var(--hair); transition: background 0.6s ease, box-shadow 0.6s ease; }
.survey-steps li.done .bar { background: var(--white); }
.survey-steps li.current .bar { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.survey-steps em { display: block; margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #5f5f5f; transition: color 0.6s ease; }
.survey-steps li.done em { color: var(--ash); }
.survey-steps li.current em { color: var(--white); }
@media (max-width: 700px) { .survey-steps em { display: none; } .survey-steps li.current em { display: block; overflow: visible; } }

.section-intro[hidden], #q-body[hidden] { display: none; }
.section-intro { padding-top: 2vh; }
.section-intro .label, .section-intro .h-display, .section-intro .body { animation: q-in 1.1s var(--ease) both; }
.section-intro .h-display { animation-delay: 0.08s; }
.section-intro .body { margin-top: 24px; animation-delay: 0.18s; }

/* ============== LEARNING PATH: MODULES AND WAITLIST ============== */

.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); margin: 6px 0 20px; }
.module { position: relative; padding: 30px 0 30px 60px; border-top: 1px solid var(--hair); }
.module-num { position: absolute; left: 0; top: 28px; font-weight: 200; font-size: 34px; letter-spacing: -0.04em; line-height: 1; color: var(--ash); transition: color 0.5s ease; }
.module:hover .module-num { color: var(--accent); }
.playbook .module h4 { margin: 0 0 10px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; text-transform: none; color: var(--white); }
.playbook .module p { margin: 0 0 14px; font-size: 0.95em; }
.playbook .module ul { margin: 0; }
.playbook .module li { position: relative; padding: 6px 0 6px 18px; border: 0; font-size: 0.92em; line-height: 1.45; color: var(--silver); }
.playbook .module li::before { content: ''; position: absolute; left: 0; top: 0.95em; width: 7px; height: 1px; background: var(--accent); }
.module-count { display: block; margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }

.waitlist { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin: 44px 0 0 clamp(56px, 6vw, 92px); padding: 40px 0 10px; border-top: 1px solid var(--accent); }
.waitlist-title { margin: 0 0 12px; font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.03em; line-height: 1.1; color: var(--white); }
.waitlist .body { margin: 0; }
.waitlist-action { text-align: right; }
.waitlist .pill { cursor: pointer; font-family: inherit; }
.waitlist .pill:disabled { opacity: 0.5; cursor: default; }
.waitlist-done { max-width: 300px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--accent); }
.waitlist .form-error { margin: 12px 0 0; }

@media (max-width: 900px) { .modules { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .mode-options { grid-template-columns: 1fr; }
  .mode-options .option + .option { border-left: 0; border-top: 1px solid var(--hair); padding-left: 0; }
  .waitlist { grid-template-columns: 1fr; margin-left: 0; }
  .waitlist-action { text-align: left; }
}

/* .pill sets display, which would otherwise override the hidden attribute */
.pill[hidden] { display: none; }

/* the waitlist in the playbook header */
.waitlist-top { margin: 40px 0 0; padding: 34px 0 30px; border-bottom: 1px solid var(--hair); }
.waitlist-top .waitlist-title { font-size: clamp(22px, 2.2vw, 30px); }
@media (max-width: 700px) { .waitlist-top { margin-left: 0; } }

/* ============== VOICE GUIDE ============== */

#view-voice .survey-steps { width: 100%; text-align: left; }
#view-voice .survey-steps:empty { display: none; }
.voice-orb { transform: scale(calc(1 + var(--lvl, 0) * 0.3)); transition: transform 0.09s linear; }
.voice-orb .disc-ring { transition: box-shadow 0.2s ease, border-color 0.4s ease; }
#view-voice[data-state="connecting"] .disc-ticks,
#view-voice[data-state="thinking"] .disc-ticks { animation-duration: 1.3s; }
#view-voice[data-state="thinking"] .disc-core { animation: core-think 0.9s ease-in-out infinite alternate; }
@keyframes core-think { from { opacity: 0.35; } to { opacity: 1; } }
#view-voice[data-state="speaking"] .disc-ring { box-shadow: 0 0 calc(16px + var(--lvl, 0) * 40px) var(--cyan-glow), inset 0 0 16px var(--cyan-glow); }
#view-voice[data-state="listening"] .disc-ring { border-color: var(--white); box-shadow: 0 0 calc(10px + var(--lvl, 0) * 34px) rgba(255, 255, 255, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.25); }
#view-voice[data-state="listening"] .disc-core { background: var(--white); box-shadow: 0 0 14px rgba(255, 255, 255, 0.8); }


.voice-name { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 6px; }
.voice-name span { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--white); }
.voice-name small { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
#voice-status { min-height: 1.2em; }
#voice-status:empty { visibility: hidden; }
#voice-intro { margin-top: 22px; }
.voice-title { max-width: 820px; margin: 0 auto; font-weight: 400; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -0.04em; }
#voice-intro .body { max-width: 560px; margin: 20px auto 0; }

/* the live transcript: newest line at the bottom, older lines fade out at the top */
.voice-feed { width: 100%; max-width: 720px; max-height: min(42vh, 380px); margin: 26px auto 0; padding: 40px 4px 4px; overflow-y: auto; scrollbar-width: none; text-align: left;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px); mask-image: linear-gradient(to bottom, transparent 0, #000 90px); }
.voice-feed::-webkit-scrollbar { display: none; }
.vline { margin: 0 0 18px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 300; line-height: 1.5; color: var(--silver); animation: q-in 0.6s var(--ease) both; }
.vline span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.vline.user { color: var(--white); }
.vline.user span { color: var(--ash); }
.vline:last-child { margin-bottom: 0; }
#view-voice .form-error { margin-top: 24px; }
/* while talking, everything fits one screen: the disc, the newest lines and the controls */
#view-voice:not([data-state="idle"]):not([data-state="error"]) .voice-orb { margin: 0 auto 3vh; }
#view-voice:not([data-state="idle"]):not([data-state="error"]) .voice-feed { max-height: max(180px, calc(100svh - 19vh - 430px)); }
#view-voice .view-actions { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .voice-orb { transform: none; } .vline { animation: none; } }
/* ============== COURSE PAGES (/learn) ============== */

/* same 3D flip-in as the home page's rows, per card */
.lp-hero-grid, .shift, .mods-list, .outcomes, .prose, .rows { perspective: 1200px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.learn-page main { overflow-x: clip; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; font-size: 13px; color: var(--ash); }
.crumbs a:hover { color: var(--white); }
.crumbs span:last-child { color: var(--silver); }

.lp-hero { padding-top: clamp(130px, 20vh, 200px); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.lp-h1 { margin: 22px 0 0; max-width: 900px; font-weight: 400; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.045em; }
.lp-lede { margin-top: 30px; max-width: 640px; color: var(--silver); }
.lp-alt { margin-top: 26px; }
.hub-hero .pill { margin-top: 40px; }
.lp-disc { display: flex; flex-direction: column; align-items: center; }
.lp-disc .voice-orb { width: 190px; height: 190px; margin: 30px auto 70px; }
.lp-disc .voice-orb .disc-ticks { inset: -36px; }
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 360px; margin: 0; text-align: center; }
.lp-stats div { border-top: 1px solid var(--hair); padding-top: 14px; }
.lp-stats dt { font-size: clamp(30px, 3vw, 42px); font-weight: 300; letter-spacing: -0.04em; color: var(--white); }
.lp-stats dd { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }

/* waitlist form: email and button on one line */
.wl-form { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; max-width: 560px; }
.wl-field { flex: 1 1 240px; }
.wl-form input { width: 100%; padding: 16px 22px; border: 1px solid var(--hair); border-radius: 75px; background: transparent; color: var(--white); font: inherit; font-size: 16px; font-weight: 300; outline: none; transition: border-color 0.4s ease; }
.wl-form input:focus { border-color: var(--white); }
.wl-form input:disabled { opacity: 0.6; }
.wl-form button { cursor: pointer; font-family: inherit; }
.wl-form button:disabled { cursor: default; }
.wl-form.done button { background: transparent; color: var(--accent); border-color: var(--accent); }
.wl-msg { flex-basis: 100%; margin: 0; font-size: 15px; font-weight: 300; color: #ff8f8f; }
.wl-msg.ok { color: var(--silver); }
.wl-msg a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.wl-center { margin: 44px auto 0; justify-content: center; }
.wl-center .wl-msg { text-align: center; }

/* what changes: tabs */
.sh-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--hair); }
.sh-tab { position: relative; padding: 0 12px 22px 0; border: 0; background: none; color: var(--ash); font: inherit; font-size: clamp(15px, 1.4vw, 19px); text-align: left; cursor: pointer; transition: color 0.4s ease; }
.sh-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
.sh-tab:hover, .sh-tab.on { color: var(--white); }
.sh-tab.on::after { transform: scaleX(1); }
.sh-count { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); }
.sh-panel { padding-top: 34px; }
.sh-note { margin: 0 0 18px; font-size: 14px; color: var(--ash); }
.sh-panel ul { margin: 0; padding: 0; list-style: none; }
.sh-panel li { padding: 18px 0; border-bottom: 1px solid var(--hair); font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; letter-spacing: -0.02em; }

/* modules: accordion with a progress rail */
.mods { display: grid; grid-template-columns: 2px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); }
.mods-rail { position: relative; background: var(--hair); }
.mods-rail span { position: absolute; left: 0; top: 0; width: 100%; height: calc((var(--open) + 1) * 10%); background: var(--accent); box-shadow: 0 0 12px var(--accent); transition: height 0.9s var(--ease); }
.mod { border-top: 1px solid var(--hair); }
.mod:last-child { border-bottom: 1px solid var(--hair); }
.mod summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; gap: 18px; padding: 26px 0; cursor: pointer; list-style: none; }
.mod summary::-webkit-details-marker { display: none; }
.mod-num { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--ash); transition: color 0.4s ease; }
.mod-title { font-size: clamp(20px, 2.2vw, 32px); font-weight: 400; letter-spacing: -0.03em; transition: transform 0.8s var(--ease); }
.mod-count { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.mod summary:hover .mod-title { transform: translateX(10px); }
.mod[open] .mod-num { color: var(--accent); }
.mod-body { padding: 0 0 34px 74px; animation: q-in 0.8s var(--ease) both; }
.mod-body .body { max-width: 640px; color: var(--silver); }
.mod-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: t; }
.mod-topics li { position: relative; padding-left: 40px; font-size: 16px; font-weight: 300; line-height: 1.45; color: var(--white); counter-increment: t; }
.mod-topics li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--ash); }

/* outcomes, tools, who */
.outcomes { margin-top: 0; }
.outcomes li { grid-template-columns: 60px minmax(0, 1fr); }
.lp-tools-label { margin-top: 56px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.chips li { padding: 9px 18px; border: 1px solid var(--hair); border-radius: 75px; font-size: 14px; font-weight: 300; color: var(--silver); transition: border-color 0.4s ease, color 0.4s ease; }
.chips li:hover { border-color: var(--white); color: var(--white); }
.lp-who { margin-top: 48px; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--silver); }
.lp-who .label { display: block; margin-bottom: 12px; }

.lp-waitlist { text-align: center; }
.lp-waitlist .body-lg { margin: 30px auto 0; max-width: 620px; color: var(--silver); }

/* legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(130px, 20vh, 200px) var(--gutter) 120px; }
.legal .h-display { margin-top: 20px; }
.legal-updated { margin: 18px 0 50px; font-size: 14px; color: var(--ash); }
.legal section { margin-top: 44px; }
.legal .body { margin: 14px 0 0; color: var(--silver); }
.legal-list { margin: 14px 0 0; padding-left: 20px; color: var(--silver); font-weight: 300; line-height: 1.7; }

@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
  .lp-disc { margin-top: 20px; }
  .lp-disc .voice-orb { width: 120px; height: 120px; margin: 10px auto 50px; }
  .learn-page .topbar .brand { white-space: nowrap; }
  .learn-page .topactions .textlink { display: none; }
  .learn-page .topactions .pill { padding: 10px 16px; font-size: 13px; white-space: nowrap; }
  .lp-disc .voice-orb .disc-ticks { inset: -24px; }
  .sh-tabs { grid-template-columns: 1fr; border-bottom: 0; }
  .sh-tab { padding: 16px 0; border-bottom: 1px solid var(--hair); }
  .sh-count { display: inline; margin: 0 12px 0 0; }
  .mods { grid-template-columns: 1fr; }
  .mods-rail { display: none; }
  .mod summary { grid-template-columns: 40px minmax(0, 1fr); }
  .mod-count { display: none; }
  .mod-body { padding-left: 0; }
  .mod-topics { grid-template-columns: 1fr; }
}