/* Finanflix · landing. Tokens first; every section reads from them. Mobile first. */
@font-face {
  font-family: "Sharp";
  src: url("https://finanflix-landing.vercel.app/_next/static/immutable/media/SharpGrotesk_Bold10.p.1mdtv2b15qfgn.otf") format("opentype");
  font-weight: 700; font-display: swap;
}
/* Metric stand-in while Sharp Grotesk loads: a narrowed Impact keeps line breaks close. */
@font-face { font-family: "Sharp Fallback"; src: local("Impact"), local("Arial Narrow Bold"); size-adjust: 78%; ascent-override: 118%; }

:root {
  --ink: #14131B;      /* page */
  --ink-2: #1D1C27;    /* surfaces */
  --ink-3: #2A2838;    /* raised */
  --line: rgba(246,245,248,.1);
  --paper: #F6F5F8;
  --paper-2: #DEDCE5;
  --mute: #B9B3C6;
  --orange: #FF3F00;   /* the hot colour: action, risk, the F */
  --orange-hi: #FF5E2B;
  --violet: #9166FF;   /* Finanflix IA */
  --lilac: #B5A0F1;
  --deep: #5328C1;     /* flat violet fields */
  --on-deep: #E7E0FF;
  --green: #00FF40;    /* live, only */
  --yellow: #FFC800;

  --display: "Sharp", "Sharp Fallback", Impact, "Arial Narrow", sans-serif;
  --text: Poppins, "Segoe UI", system-ui, sans-serif;
  --d1: clamp(76px, 20vw, 290px);
  --d2: clamp(58px, 15.5vw, 150px);

  --gut: clamp(16px, 4vw, 56px);
  --sec: clamp(96px, 11vw, 160px);
  --r-sm: 10px; --r-md: 16px; --r-lg: 28px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: linear(0, .42 9%, .84 21%, 1.02 33%, 1.05 41%, 1.01 55%, .99 70%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--ink); color: var(--paper); font: 400 16px/1.55 var(--text); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gut); }

/* ---------- type ---------- */
.d1, .d2, .hero-h { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; }
.d1 { font-size: var(--d1); line-height: .84; }
.d1, .d2, .hero-h { overflow-wrap: break-word; }
.d2 { font-size: var(--d2); line-height: .86; }
.kicker { font: 600 15px/1.3 var(--text); color: var(--mute); margin-bottom: 18px; }
.kicker.light { color: var(--on-deep); }
.lead { font-size: 18px; line-height: 1.55; color: var(--mute); max-width: 46ch; }
.fine { font-size: 13px; line-height: 1.5; color: var(--mute); }
.fine.light { color: var(--on-deep); }
.o { color: var(--orange); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 15px 22px;
  background: var(--orange); color: var(--ink); border-radius: var(--r-sm); font: 600 16px/1 var(--text); text-decoration: none;
  transition: background-color .16s, transform .16s var(--ease); }
.btn:hover { background: var(--orange-hi); }
.btn:active { transform: scale(.98); }
.btn .arr { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-lg { min-height: 58px; padding: 19px 28px; font-size: 17px; }
.btn-sm { min-height: 40px; padding: 11px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }
@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } }

/* ---------- strip + nav ---------- */
.strip { position: relative; z-index: 31; display: flex; justify-content: center; align-items: center; gap: 12px;
  padding: 9px var(--gut); background: var(--orange); color: var(--ink); font: 600 12.5px/1.3 var(--text); text-align: center; }
.strip a { display: none; }
@media (min-width: 760px) { .strip { font-size: 13px; gap: 14px; } .strip a { display: inline; } }
.strip a { font-weight: 700; text-underline-offset: 3px; }
.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px; padding-inline: var(--gut); transition: background-color .3s, box-shadow .3s; }
.nav.is-stuck { background: rgba(20,19,27,.82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.logo svg { width: 132px; height: auto; }
@media (max-width: 359px) { .nav { gap: 10px; } .logo svg { width: 112px; } .nav .btn-sm { padding-inline: 12px; } }
.nav nav { display: none; }
.nav ul { display: flex; gap: 30px; font-size: 14px; font-weight: 500; }
.nav ul a { text-decoration: none; color: var(--paper-2); padding: 8px 0; }
.nav ul a:hover { color: #fff; }
@media (min-width: 1000px) { .nav nav { display: block; } .logo svg { width: 150px; } }

/* ---------- 1 · hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; margin-top: -64px; padding-top: 64px; }
.cast { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: 1fr 1fr; }
.cast figure { position: relative; overflow: hidden; }
.cast figure:nth-child(n+3) { display: none; }
.cast img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1) contrast(1.08) brightness(1.02); transform-origin: 50% 30%; }
.cast figure::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--deep); mix-blend-mode: multiply; opacity: .5; }
.cast figure::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(20,19,27,.55) 0%, rgba(20,19,27,0) 16%, rgba(20,19,27,0) 30%, rgba(20,19,27,.75) 52%, var(--ink) 74%); }
.cast { left: -6%; right: -6%; }
.cast figure { margin-inline: -7%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); }
.cast figure:first-child { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero-in { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(640px, calc(100svh - 34px)); padding: 150px var(--gut) 28px; max-width: 1600px; margin-inline: auto; }
.hero-h { font-size: clamp(64px, 20.5vw, 290px); line-height: .84; position: relative; z-index: 1; }
.hero-h span { display: block; }
.hero-h .l2 { color: var(--lilac); padding-left: .3em; }
.hero-in .ai-card { margin-top: -.2em; font-size: clamp(64px, 20.5vw, 290px); } /* em = headline size, so the overlap tracks it */
.hero-in .ai-card > * { font-size: 16px; }
.hero-in .ai-card .ai-f { display: none; }
@media (max-width: 759px) {
  .hero-in .ai-card { padding: 12px 14px 14px; border-radius: 22px; }
  .hero-in .ai-head { padding-bottom: 9px; margin-bottom: 10px; }
  .hero-in .ai-body { gap: 9px; }
  .hero-in .ai-q { font-size: 14px; padding: 8px 12px; }
  .hero-in .ai-a { font-size: 15px; }
  .hero-in .ai-status { font-size: 12px; }
}
.hero-sub { order: 5; margin-top: 18px; font-size: 16px; color: var(--paper-2); max-width: 40ch; }
.hero-cta { order: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.hero-cta .btn { width: 100%; }
.billing { order: 6; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.cred { font: 500 15px/1.4 var(--text); color: var(--mute); }
.cred b { color: var(--paper); font-weight: 600; }
.nums { display: flex; gap: 22px; }
.nums div { display: flex; flex-direction: column-reverse; }
.nums dt { font-size: 12px; color: var(--mute); line-height: 1.3; }
.nums dd { font: 700 32px/1 var(--display); }

@media (min-width: 760px) {
  .cast { grid-template-columns: repeat(4, 1fr); }
  .cast figure:nth-child(n+3) { display: block; }
  .hero-cta .btn { width: auto; }
  .hero-in .ai-card .ai-f { display: block; }
}
@media (min-width: 1100px) {
  .hero-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-content: end;
    min-height: max(720px, calc(100svh - 38px)); padding-top: 140px; padding-bottom: 32px; }
  .hero-h { grid-column: 1 / -1; grid-row: 1; font-size: clamp(150px, 14.8vw, 270px); }
  .hero-h .l2 { padding-left: .48em; }
  .hero-in .ai-card { grid-column: 8 / 13; grid-row: 1; align-self: end; margin: 0 0 .06em; font-size: clamp(150px, 14.8vw, 270px); max-width: 420px; justify-self: start; width: 100%; }
  .hero-sub { grid-column: 1 / 5; grid-row: 2; margin-top: 26px; font-size: 18px; }
  .hero-cta { grid-column: 5 / 9; grid-row: 2; align-self: start; margin-top: 30px; }
  .billing { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; align-items: end; margin-top: 28px; }
  .cred { font-size: 15px; }
}

@media (min-width: 1100px) and (max-height: 760px) {
  .hero-in { padding-top: 96px; min-height: calc(100svh - 34px); }
  .hero-h, .hero-in .ai-card { font-size: clamp(120px, 11.6vw, 210px); }
  .hero-sub, .hero-cta { margin-top: 16px; }
  .billing { margin-top: 16px; padding-top: 12px; }
  .hero-in .ai-card { grid-row: 1 / 3; margin: 0; max-width: 400px; }
  .hero-in .ai-card .ai-f { display: none; }
}

/* ---------- the AI card (hero + section 2) ---------- */
.ai-card { position: relative; z-index: 2; width: 100%; max-width: 460px; margin-left: auto; padding: 16px 18px 18px; border-radius: var(--r-lg);
  background-color: rgba(23,22,32,.78);
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(255,63,0,.14), transparent 62%);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(246,245,248,.13);
  box-shadow: 0 40px 80px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07); }
@media (forced-colors: active) { .ai-card, .tr-card, .plan, .person { border: 1px solid CanvasText; } }
.ai-head { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--text); padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ai-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--violet); }
.ai-mark svg { width: 11px; }
.ai-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--text); color: var(--mute); }
.ai-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.ai-body { display: grid; gap: 12px; min-height: 0; }
.ai-q { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink-3); font-size: 15px; line-height: 1.4; }
.ai-status, .ai-think { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.ai-status b { color: var(--paper); font-weight: 600; }
.ok { width: 14px; height: 14px; border-radius: 50%; background: var(--violet); position: relative; flex: none; }
.ok::after { content: ""; position: absolute; left: 4px; top: 3px; width: 4px; height: 6px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ai-think span { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.ai-a { font-size: 17px; line-height: 1.45; color: var(--paper-2); }
.ai-a b { color: #fff; font-weight: 600; }
.seg-bar { display: flex; gap: 3px; height: 8px; }
.seg-bar i { flex: var(--w) 1 0; background: var(--c); border-radius: 3px; transform-origin: 0 50%; }
.seg-bar.thin { height: 6px; }
.seg-legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--mute); }
.seg-legend li { display: flex; align-items: center; gap: 6px; }
.seg-legend b { color: var(--paper); font-weight: 600; }
.seg-legend span { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.ai-list { display: grid; gap: 6px; }
.ai-list li { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: rgba(246,245,248,.05); font-size: 14px; color: var(--mute); }
.ai-list b { color: var(--paper); font-weight: 600; }
.ai-list li:first-child b { color: var(--orange); }
.ai-f { font-size: 14px; color: var(--mute); padding-top: 12px; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: no-preference) {
  .anim-in { animation: fadeUp .45s var(--ease) both; animation-delay: var(--d, 0ms); }
  .anim-bar i { animation: grow .7s var(--spring) both; animation-timing-function: var(--spring); }
  .anim-bar i:nth-child(2) { animation-delay: .12s; }
  .anim-bar i:nth-child(3) { animation-delay: .24s; }
  .ai-think span { animation: blink 1s infinite both; }
  .ai-think span:nth-child(2) { animation-delay: .15s; }
  .ai-think span:nth-child(3) { animation-delay: .3s; }
  .w { display: inline-block; animation: word .35s var(--ease) both; animation-delay: var(--d); }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes word { from { opacity: 0; transform: translateY(.35em); filter: blur(3px); } }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: var(--sec); }

/* 2 · IA */
.ia { overflow-x: clip; }
.ia-grid { display: grid; gap: 48px; }
.ia-grid > *, .com-grid > *, .price-grid > *, .faq-grid > *, .rep-grid > * { min-width: 0; }
.ia-copy .lead { margin-top: 22px; }
.chips { display: grid; gap: 10px; margin-top: 30px; max-width: 520px; }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 18px; text-align: left;
  border: 1px solid rgba(246,245,248,.18); border-radius: 14px; background: transparent; font-size: 16px; font-weight: 500;
  transition: background-color .18s, color .18s, border-color .18s; }
.chip::after { content: "→"; font-size: 18px; color: var(--mute); transition: transform .2s var(--ease); }
.chip:hover { border-color: rgba(246,245,248,.4); }
.chip:hover::after { transform: translateX(3px); }
.chip[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: var(--ink); }
.chip[aria-pressed="true"]::after { color: var(--ink); content: "●"; font-size: 10px; }
.ia-stage { position: relative; display: grid; }
.ia-ghost { grid-area: 1 / 1; align-self: start; justify-self: start; font: 700 clamp(150px, 52vw, 480px)/.8 var(--display); color: var(--violet); letter-spacing: -.01em; margin-left: -.03em; transition: opacity .3s; }
.ai-big { grid-area: 1 / 1; align-self: end; max-width: 480px; margin-top: 140px; }
.ai-big .ai-body { min-height: 300px; align-content: start; }
@media (min-width: 1100px) {
  .ia-grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
  .ia-stage { min-height: 520px; }
  .ia-ghost { font-size: clamp(300px, 34vw, 500px); }
  .ai-big { justify-self: end; margin-top: 0; width: 100%; }
}

/* 3 · tracker */
.tr-head { display: grid; gap: 24px; align-items: end; }
@media (min-width: 1100px) { .tr-head { grid-template-columns: 8fr 4fr; } }
.tracker { overflow-x: clip; }
.tr-stage { position: relative; display: grid; margin-top: 36px; padding-block: 24px 40px; }
.tr-ghost { grid-area: 1 / 1; align-self: start; justify-self: center; white-space: nowrap; font: 700 clamp(120px, 27vw, 420px)/.85 var(--display);
  color: transparent; -webkit-text-stroke: 2px rgba(181,160,241,.42); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
@supports not (-webkit-text-stroke: 2px red) { .tr-ghost { color: var(--ink-3); } }
.tr-card { grid-area: 1 / 1; z-index: 1; width: min(540px, calc(100% - 2 * var(--gut))); justify-self: center; margin-top: clamp(70px, 15vw, 210px);
  padding: 22px; border-radius: var(--r-lg); background-color: var(--ink-2);
  background-image: radial-gradient(80% 50% at 0% 0%, rgba(255,63,0,.12), transparent 60%);
  border: 1px solid rgba(246,245,248,.12); box-shadow: 0 50px 90px -30px rgba(0,0,0,.9); }
@media (min-width: 1100px) { .tr-card { transform: translateX(22%); } }
.tr-label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--mute); }
.live-dot { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--text); color: var(--paper); }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
@media (prefers-reduced-motion: no-preference) { .live-dot::before { animation: pulse 2s infinite; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,64,.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(0,255,64,0); } }
.tr-total { margin: 8px 0 16px; font: 600 clamp(36px, 9vw, 52px)/1 var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tr-total small { font-size: 15px; color: var(--mute); font-weight: 500; letter-spacing: 0; }
.tr-rows { width: 100%; border-collapse: collapse; margin-top: 18px; font-variant-numeric: tabular-nums; }
.tr-rows tr + tr { border-top: 1px solid var(--line); }
.tr-rows th, .tr-rows td { padding: 12px 0; font-size: 15px; }
.tr-rows th { display: flex; align-items: center; gap: 12px; font-weight: 500; text-align: left; }
.tr-rows th img { width: 32px; height: 32px; border-radius: 50%; background: var(--ink-3); }
.tr-rows .qty { text-align: right; color: var(--mute); padding-right: 14px; }
.tr-rows .val { text-align: right; font-weight: 600; width: 104px; transition: color .6s; }
.tr-rows .val.up { color: var(--green); transition: none; }
.tr-rows .val.down { color: #FF7A4D; transition: none; }
.tag { display: inline-block; padding: 4px 8px; border-radius: 6px; background: rgba(145,102,255,.18); color: var(--lilac); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.tag.fut { background: rgba(255,63,0,.16); color: #FF8A63; }
.tag.acc { background: rgba(246,245,248,.1); color: var(--paper-2); }
.tr-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-top: 8px; }
@media (max-width: 420px) { .tr-rows td:nth-child(2) { display: none; } .tr-card { padding: 18px; } }

/* 4 · FOMO */
.fomo { background: var(--deep); color: #fff; overflow: hidden; }
.fomo .lead { color: var(--on-deep); margin-top: 22px; }
.fomo-head { text-align: left; }
.noise { position: relative; height: clamp(300px, 44vw, 560px); margin-top: 24px; --noise: 1; }
@media (min-width: 1100px) { .noise { margin-top: -220px; } .fomo-head { position: relative; z-index: 1; } }
.noise canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nq { position: absolute; left: min(var(--x), calc(100% - 130px)); top: var(--y); padding: 6px 12px; border-radius: 999px; background: rgba(20,19,27,.4); font: 600 14px/1 var(--text); white-space: nowrap;
  opacity: var(--noise); transform: translateY(calc((1 - var(--noise)) * 14px)) scale(calc(.9 + var(--noise) * .1)); }
.fomo-ctrl { display: grid; gap: 26px; }
.steps { max-width: 620px; width: 100%; }
.steps input { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; }
.steps input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); }
.steps input::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); }
.steps input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: var(--paper); border: 6px solid var(--orange); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.steps input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 6px solid var(--orange); }
.steps input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.step-names { display: flex; justify-content: space-between; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--on-deep); }
.state { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.4; color: var(--on-deep); max-width: 34ch; min-height: 2.8em; }
.state b { color: #fff; display: block; }
.fomo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
@media (min-width: 1100px) {
  .fomo-ctrl { grid-template-columns: 6fr 4fr; align-items: center; column-gap: 64px; }
  .fomo-cta { grid-column: 1 / -1; }
}

/* 5 · team */
.team-head { display: grid; gap: 22px; align-items: end; margin-bottom: 44px; }
@media (min-width: 1100px) { .team-head { grid-template-columns: 8fr 4fr; } }
.cast-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gut) 20px; scrollbar-width: none; position: relative; }
.cast-rail::-webkit-scrollbar { display: none; }
.person { flex: 0 0 min(78%, 340px); scroll-snap-align: center; position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-2);
  border: 1px solid rgba(246,245,248,.08); transform-style: preserve-3d; transition: transform .5s var(--ease); outline-offset: 4px; }
.p-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.p-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; filter: grayscale(1) contrast(1.1); transition: filter .6s var(--ease), transform .8s var(--ease); }
.p-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--deep); mix-blend-mode: multiply; opacity: .55; transition: opacity .6s var(--ease); }
.p-photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 50%, var(--ink-2) 98%); }
.person:hover .p-photo img, .person:focus-visible .p-photo img { filter: none; transform: scale(1.04); }
.person:hover .p-photo::before, .person:focus-visible .p-photo::before { opacity: 0; }
.p-info { position: relative; z-index: 3; margin-top: -58px; padding: 0 20px 20px; }
.p-info h3 { font: 700 clamp(46px, 5vw, 64px)/.86 var(--display); text-transform: uppercase; }
.p-info p { margin-top: 10px; font-size: 14px; color: var(--mute); }
.p-class { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--paper) !important; font-weight: 600; }
@media (min-width: 1100px) {
  .cast-rail { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; max-width: 1440px; margin-inline: auto; perspective: 1200px; }
  .person:nth-child(even) { margin-top: 56px; }
}
.edu { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; color: var(--mute); font-size: 14px; }
.edu img { width: min(200px, 100%); height: auto; opacity: .85; }

/* 6 · reports + media */
.reports { padding-top: 0; }
.rep-grid { display: grid; gap: 40px; align-items: center; }
.fan { position: relative; height: clamp(300px, 70vw, 440px); }
.fan img { position: absolute; top: 50%; left: 50%; width: clamp(150px, 38vw, 250px); height: auto; aspect-ratio: 80 / 113; object-fit: cover; border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); transition: transform .6s var(--ease); }
.fan img:nth-child(1) { transform: translate(-108%, -48%) rotate(-11deg); }
.fan img:nth-child(2) { transform: translate(8%, -48%) rotate(10deg); }
.fan img:nth-child(3) { transform: translate(-50%, -52%); z-index: 2; }
.rep-grid:hover .fan img:nth-child(1) { transform: translate(-128%, -46%) rotate(-15deg); }
.rep-grid:hover .fan img:nth-child(2) { transform: translate(28%, -46%) rotate(14deg); }
.rep-grid:hover .fan img:nth-child(3) { transform: translate(-50%, -56%) scale(1.04); }
.rep-copy .lead { margin-top: 22px; }
.rep-copy .l { color: var(--lilac); }
@media (min-width: 1100px) { .rep-grid { grid-template-columns: 6fr 6fr; } }
.media { margin-top: clamp(64px, 8vw, 120px); padding-top: 36px; border-top: 1px solid var(--line); text-align: center; }
.media p { font-size: 14px; color: var(--mute); }
.media ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 48px; margin-top: 26px; }
.media img { height: clamp(22px, 2.4vw, 32px); width: auto; opacity: .8; }

/* 7 · courses rail */
.courses { overflow: hidden; background-color: var(--ink); background-image: radial-gradient(60% 40% at 50% 92%, rgba(255,63,0,.13), transparent 70%); }
.cur-head { display: grid; gap: 22px; align-items: end; }
@media (min-width: 1100px) { .cur-head { grid-template-columns: 8fr 4fr; } }
.rail { --pw: min(600px, 76vw); position: relative; height: calc(var(--pw) * .625 + 44px); margin-top: 48px; perspective: 1600px; touch-action: pan-y; user-select: none; }
.rail-track { position: absolute; left: 50%; top: 20px; transform-style: preserve-3d; }
.poster { position: absolute; top: 0; left: calc(var(--pw) / -2); width: var(--pw); aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 40px 70px -24px rgba(0,0,0,.9); transition: transform .9s var(--ease), filter .9s var(--ease), opacity .9s; will-change: transform; }
.poster img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.poster figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.poster.is-on { box-shadow: 0 40px 80px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(246,245,248,.2); }
/* no-JS: the rail is a plain scroll row */
.rail:not(.is-live) { height: auto; perspective: none; }
.rail:not(.is-live) .rail-track { position: static; display: flex; gap: 14px; overflow-x: auto; padding: 0 var(--gut) 20px; scroll-snap-type: x mandatory; }
.rail:not(.is-live) .poster { position: relative; left: 0; flex: none; scroll-snap-align: center; }
.rail-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; }
.rail-now { display: grid; gap: 6px; }
.rail-now .count { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rail-now #rail-name { font: 700 clamp(28px, 4vw, 48px)/.92 var(--display); text-transform: uppercase; }
.rail-btns { display: flex; gap: 10px; }
.round { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(246,245,248,.24); background: transparent; transition: background-color .16s, color .16s; }
.round svg { width: 20px; height: 20px; }
.round:hover { background: var(--paper); color: var(--ink); }

/* 8 · community */
.com-grid { display: grid; gap: 56px; }
.com-copy .lead { margin-top: 22px; }
.d2 .big { display: block; font-size: 1.4em; line-height: .84; color: var(--lilac); }
.online { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 16px; margin-top: 34px; padding: 18px 22px; max-width: 460px; text-decoration: none;
  border-radius: 20px; background: var(--ink-2); border: 1px solid rgba(246,245,248,.1); transition: border-color .2s; }
.online:hover { border-color: rgba(246,245,248,.32); }
.online img { width: 28px; height: auto; }
.on-n { display: flex; align-items: center; gap: 10px; font: 700 54px/1 var(--display); font-variant-numeric: tabular-nums; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
@media (prefers-reduced-motion: no-preference) { .pulse { animation: pulse 2s infinite; } }
.on-t { font-size: 14px; line-height: 1.35; color: var(--mute); }
.on-t u { color: var(--paper); text-underline-offset: 3px; }
.quotes { position: relative; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); background: var(--ink-2); border: 1px solid rgba(246,245,248,.08); overflow: hidden; }
.quotes::before { content: "“"; position: absolute; right: 18px; top: -40px; font: 700 300px/1 var(--display); color: var(--orange); pointer-events: none; }
.q-stage { position: relative; display: grid; }
.q { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.q.is-on { opacity: 1; visibility: visible; }
.q p { position: relative; font: 500 clamp(22px, 2.6vw, 32px)/1.35 var(--text); letter-spacing: -.01em; max-width: 24ch; }
.q-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.q-tabs button { position: relative; overflow: hidden; min-height: 40px; padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid rgba(246,245,248,.18); background: transparent; font-size: 14px; font-weight: 600; color: var(--mute); }
.q-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.q-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference) { .quotes.is-auto .q-tabs button[aria-selected="true"]::after { animation: prog 7s linear both; } }
@keyframes prog { to { transform: scaleX(1); } }
.q-role { margin-top: 14px; font-size: 13px; color: var(--mute); }
@media (min-width: 1100px) { .com-grid { grid-template-columns: 5fr 6fr; align-items: center; gap: 72px; } }

/* 9 · price */
.price { overflow: hidden; }
.price-grid { display: grid; gap: 40px; }
.timeline { position: relative; display: grid; gap: 22px; margin-top: 40px; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: rgba(246,245,248,.16); }
.timeline li { position: relative; display: grid; gap: 2px; }
.timeline li::before { content: ""; position: absolute; left: -30px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid rgba(246,245,248,.35); }
.timeline li:first-child::before { background: var(--orange); border-color: var(--orange); }
.timeline b { font-size: 18px; font-weight: 600; }
.timeline span { color: var(--mute); font-size: 15px; }
.price-stage { position: relative; min-height: calc(clamp(240px, 70vw, 600px) * .78 + 260px); }
.zero { position: absolute; right: 0; top: 0; display: flex; align-items: flex-start; font: 700 clamp(240px, 70vw, 600px)/.78 var(--display); color: var(--orange); letter-spacing: -.02em; margin-right: -.04em; }
.zero span { font-size: .26em; line-height: 1; margin: .12em .1em 0 0; }
.plan { position: relative; z-index: 1; margin-top: clamp(150px, 40vw, 300px); width: 100%; max-width: 440px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-2); border: 1px solid rgba(246,245,248,.1); box-shadow: 0 0 0 10px var(--ink), 0 50px 90px -30px rgba(0,0,0,.9); }
.plan header { padding: 22px 24px; background-color: var(--orange); background-image: radial-gradient(90% 120% at 100% 0%, rgba(255,140,90,.55), transparent 60%); color: var(--ink); }
.plan-name { font-size: 14px; font-weight: 700; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font: 700 42px/1 var(--text); letter-spacing: -.02em; }
.plan-price .when { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.plan-after { font-weight: 600; font-size: 15px; }
.incl { display: grid; gap: 12px; padding: 22px 24px 4px; }
.incl li { position: relative; padding-left: 28px; font-size: 15px; }
.incl li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 6px; height: 11px; border: solid var(--orange); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan .btn { margin: 20px 24px 0; width: calc(100% - 48px); }
.trust { display: flex; justify-content: space-between; gap: 8px; padding: 18px 24px 22px; font-size: 13px; color: var(--mute); }
.trust li { display: flex; align-items: center; gap: 6px; }
.trust svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1100px) {
  .price-grid { grid-template-columns: 5fr 7fr; align-items: center; }
  .price-stage { min-height: 820px; }
  .zero { font-size: clamp(480px, 46vw, 680px); }
  .plan { margin: 230px 0 0 auto; margin-right: clamp(56px, 5.5vw, 96px); }
}

/* 10 · FAQ */
.faq { background: var(--deep); color: #fff; }
.faq .lead { color: var(--on-deep); margin-top: 18px; }
.faq-grid { display: grid; gap: 44px; }
.faq-wa { margin-top: 32px; display: grid; gap: 14px; justify-items: start; color: var(--on-deep); }
.faq h2 { line-height: .98; }
.faq-list details { border-bottom: 1px solid rgba(255,255,255,.26); }
.faq-list details:first-child { border-top: 1px solid rgba(255,255,255,.26); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(#fff,#fff) center/14px 2px no-repeat, linear-gradient(#fff,#fff) center/2px 14px no-repeat; transition: transform .25s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { padding: 0 0 24px; max-width: 60ch; color: var(--on-deep); font-size: 16px; }
@media (min-width: 1100px) { .faq-grid { grid-template-columns: 5fr 7fr; gap: 72px; } .faq-copy { position: sticky; top: 110px; align-self: start; } }

/* 11 · finale */
.finale { min-height: min(86svh, 820px); display: grid; place-items: center; overflow: hidden; isolation: isolate; text-align: center; }
.wall { position: absolute; inset: -10% -20%; z-index: -1; display: grid; align-content: center; gap: 18px; transform: rotate(-7deg); opacity: .5; }
.wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, rgba(20,19,27,.86), rgba(20,19,27,.55) 60%, var(--ink) 92%); }
.wall-row { display: flex; gap: 18px; width: max-content; }
.wall-row img { width: clamp(220px, 26vw, 380px); height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.wall-row.r2 { margin-left: -160px; }
@media (prefers-reduced-motion: no-preference) {
  .wall-row { animation: drift 70s linear infinite alternate; }
  .wall-row.r2 { animation-direction: alternate-reverse; }
}
@keyframes drift { to { transform: translateX(-22%); } }
.fin-in { display: grid; justify-items: center; gap: 26px; }
.fin-in .lead { color: var(--paper-2); font-size: clamp(18px, 2vw, 22px); max-width: 30ch; }
.n1 { display: inline-block; padding: 0 .3em; border-radius: 6px; background: var(--orange); color: var(--ink); font: 700 1.2em/1.25 var(--display); }

/* footer */
.foot { position: relative; overflow: hidden; background: var(--ink-2); border-top: 1px solid var(--line); padding-top: 72px; }
.foot-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand { grid-column: 1 / -1; max-width: 420px; color: var(--mute); font-size: 15px; display: grid; gap: 14px; }
.foot-co { color: var(--paper); font-weight: 600; }
.foot-contact a { color: var(--paper); text-decoration: none; }
.foot-contact a:hover { text-decoration: underline; }
.foot-h { font-size: 14px; font-weight: 600; color: var(--mute); margin-bottom: 12px; }
.foot nav li a { display: inline-block; padding: 5px 0; text-decoration: none; font-size: 15px; }
.foot nav li a:hover { color: var(--orange-hi); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .foot-brand { grid-column: auto; } }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 56px; padding-block: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.foot-mark { color: var(--ink-3); padding: 0 var(--gut); margin-bottom: -1.6vw; }
.foot-mark svg { width: 100%; height: auto; }

/* sticky CTA on phones */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: rgba(20,19,27,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; }
.dock b { color: var(--paper); }
.dock.is-on { transform: none; visibility: visible; }
@media (min-width: 760px) { .dock { display: none; } }

/* entrances: decoration only, the content is already there */
@media (prefers-reduced-motion: no-preference) {
  .hero-h span { animation: slideIn 1.1s var(--ease) both; }
  .hero-h .l2 { animation-delay: .1s; }
  .hero > .cast img { animation: kenburns 22s ease-out both; }
  .hero > .cast figure:nth-child(2) img { animation-delay: -4s; }
  .hero > .cast figure:nth-child(3) img { animation-delay: -8s; }
  .hero-in > .ai-card { animation: drop 1s .45s var(--ease) both; }
  @supports (animation-timeline: view()) {
    .tr-ghost, .zero { animation: glide linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes slideIn { from { transform: translateX(-.18em); clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kenburns { from { transform: scale(1.14); } }
@keyframes drop { from { transform: translateY(-36px) scale(.97); opacity: 0; } }
@keyframes glide { from { translate: 6% 0; } to { translate: -6% 0; } }

/* ================= round 2 ================= */
.d3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(48px, 10vw, 88px); line-height: .88; overflow-wrap: break-word; }

/* the AI object glows from inside, in its own violet (a masked flat layer, not a gradient fill) */
.ai-card { isolation: isolate; box-shadow: 0 40px 80px -28px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.1); }
.ai-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-color: var(--violet); opacity: .3;
  -webkit-mask-image: radial-gradient(70% 55% at 28% 100%, #000, transparent 72%); mask-image: radial-gradient(70% 55% at 28% 100%, #000, transparent 72%); }

/* grain on the flat violet fields */
.fomo, .faq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); background-blend-mode: overlay; }

/* IA: the questions are the type */
.asks { margin-top: 34px; display: grid; gap: 4px; }
.ask { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 0 6px 22px; position: relative;
  font: 700 clamp(34px, 9.4vw, 74px)/.92 var(--display); text-transform: uppercase; color: rgba(246,245,248,.38); transition: color .25s var(--ease); }
.ask::before { content: ""; position: absolute; left: 0; top: .14em; bottom: .2em; width: 6px; border-radius: 3px; background: var(--violet); transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s var(--ease); }
.ask:hover { color: rgba(246,245,248,.72); }
.ask[aria-pressed="true"] { color: var(--paper); }
.ask[aria-pressed="true"]::before { transform: scaleY(1); }
.ask-hint { margin-top: 18px; font-size: 14px; color: var(--mute); }
.ia-stage { min-height: 0; }
.ai-big { margin-top: 0; }
@media (min-width: 1100px) {
  .ia-grid { grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: end; }
  .ia-copy { grid-column: 1 / 10; grid-row: 1; }
  .ia-stage { grid-column: 8 / 13; grid-row: 1; align-self: end; min-height: 0; z-index: 2; margin-bottom: -20px; }
  .ai-big { max-width: 470px; justify-self: end; }
  .ia-copy .lead { max-width: 40ch; }
}

/* tracker: a pinned card, three lines scroll past it */
.tr-scroll { display: grid; gap: 40px; margin-top: 48px; }
.tr-steps { display: grid; gap: 28px; order: 2; }
.tr-steps h3 { font: 700 clamp(40px, 9vw, 72px)/.9 var(--display); text-transform: uppercase; }
.tr-steps p { margin-top: 12px; color: var(--mute); max-width: 36ch; font-size: 17px; }
.tr-pin { display: grid; gap: 18px; justify-items: center; order: 1; }
.tr-pin .tr-card { margin: 0; transform: none; width: 100%; justify-self: stretch; }
.tr-label { gap: 10px; align-items: center; }
.ro { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px; font-size: 12px; color: var(--paper-2); background: rgba(246,245,248,.08); transition: background-color .4s, color .4s; }
.tr-card[data-focus="safe"] .ro { background: var(--paper); color: var(--ink); }
.tr-card[data-focus="live"] .tr-total { text-decoration: underline 3px var(--orange); text-underline-offset: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .tr-card[data-focus="rows"] tbody tr { animation: rowlit 2.4s var(--ease) both; animation-delay: calc(var(--i, 0) * 160ms); }
}
@keyframes rowlit { 0% { background: transparent; } 25% { background: rgba(255,63,0,.12); } 100% { background: transparent; } }
@media (min-width: 1100px) {
  .tr-scroll { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .tr-steps { order: 1; gap: 0; }
  .tr-steps li { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
  .tr-steps li:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 40px; }
  .tr-steps li:last-child { min-height: 48vh; }
  .js .tr-steps li { opacity: .3; transition: opacity .4s var(--ease); }
  .js .tr-steps li.is-on { opacity: 1; }
  .tr-pin { order: 2; position: sticky; top: max(88px, calc(50vh - 330px)); justify-items: start; }
  .tr-pin .tr-card { max-width: 600px; }
}

/* FOMO: centred poster heading, chips stay off the copy, the payoff is labelled */
.nlabel { position: absolute; right: 2%; top: 14%; padding: 7px 12px; border-radius: var(--r-sm); background: var(--orange); color: var(--ink); font: 700 14px/1 var(--text); opacity: var(--calm, 0); transform: translateY(calc((1 - var(--calm, 0)) * 10px)); }
.fomo-head { text-align: center; margin-inline: auto; }
.fomo-head .lead { margin-inline: auto; }
@media (min-width: 1100px) { .noise { margin-top: -40px; } }

/* courses: a centred title card */
.cur-head { text-align: center; justify-items: center; }
@media (min-width: 1100px) { .cur-head { grid-template-columns: 1fr; } }
.cur-head .lead { margin-inline: auto; }
.courses { padding-bottom: clamp(72px, 8vw, 120px); }

/* community: 469 at poster size */
.d2 .big { color: var(--paper); }
.online { grid-template-columns: 1fr auto; grid-template-areas: "k k" "n n" "t c"; gap: 6px 16px; padding: 24px 26px 22px; max-width: 520px; border-radius: var(--r-lg);
  background-color: var(--ink-2); background-image: radial-gradient(60% 80% at 0% 0%, rgba(0,255,64,.08), transparent 60%); }
.on-k { grid-area: k; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--paper-2); }
.on-n { grid-area: n; font: 700 clamp(120px, 30vw, 200px)/.84 var(--display); letter-spacing: -.01em; }
.on-t { grid-area: t; align-self: center; font-size: 16px; color: var(--paper-2); }
.on-cta { grid-area: c; display: inline-flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.on-cta img { width: 22px; height: auto; filter: brightness(0); }
.quotes { padding-top: clamp(84px, 9vw, 96px); }
.quotes::before { left: clamp(24px, 4vw, 44px); right: auto; top: -18px; font-size: 180px; }
/* contrast: dim only the step titles (large text), keep the copy readable */
@media (min-width: 1100px) {
  .js .tr-steps li { opacity: 1; }
  .js .tr-steps li h3 { color: #8F8C99; transition: color .4s var(--ease); }
  .js .tr-steps li.is-on h3 { color: var(--paper); }
}
@media (max-width: 759px) {
  .cast figure::after { background: linear-gradient(180deg, rgba(20,19,27,.55) 0%, rgba(20,19,27,0) 14%, rgba(20,19,27,.2) 28%, rgba(20,19,27,.86) 44%, var(--ink) 62%); }
}
@media (min-width: 1100px) {
  .ask { font-size: clamp(74px, 6.6vw, 100px); }
  .ia-stage { grid-column: 7 / 13; }
  .ai-big { justify-self: start; margin-left: 4%; }
}
.seg-legend { flex-wrap: wrap; row-gap: 4px; }
.ia-stage > *, .tr-scroll > * { min-width: 0; }
.ai-head { flex-wrap: wrap; row-gap: 6px; }
.ask { border: 1px solid transparent; }
@media (forced-colors: active) { .ask { border-color: ButtonText; } .ask[aria-pressed="true"] { border-width: 3px; } }
@media (min-width: 1100px) {
  .ia-copy { grid-column: 1 / 8; }
  .ask { font-size: clamp(56px, 5vw, 80px); padding-block: 8px; }
  .ia-stage { grid-column: 8 / 13; align-self: center; margin-bottom: 0; }
  .ai-big { justify-self: end; margin-left: 0; }
}
.reports { overflow-x: clip; }
@media (max-width: 420px) { .fan img { width: 33vw; } }

/* ================= round 3: one type scale, one section gap ================= */
:root {
  --fs-12: 12px; --fs-15: 15px; --fs-17: 17px;
  --fs-26: clamp(22px, 5.6vw, 26px);
  --fs-40: clamp(30px, 8.5vw, 40px);
  --fs-72: clamp(46px, 13vw, 72px);
  --fs-poster: clamp(64px, 20.5vw, 290px);
  --sec: clamp(48px, 5.6vw, 80px);
}
@media (min-width: 1100px) { :root { --fs-poster: clamp(150px, 14.8vw, 270px); } }
@media (min-width: 1100px) and (max-height: 760px) { :root { --fs-poster: clamp(120px, 11.6vw, 210px); } }

body { font-size: var(--fs-17); }
.hero-h, .hero-in .ai-card, .fomo .d2, .price .d2, .d1, .on-n, .d2 .big { font-size: var(--fs-poster); }
.d2 .big { line-height: .84; }
.d2, .d3, .faq h2, .p-info h3 { font-size: var(--fs-72); }
.fomo .d2, .price .d2 { font-size: var(--fs-poster); }
.ask, .tr-steps h3, .rail-now #rail-name, .plan-price, .tr-total, .nums dd { font-size: var(--fs-40); }
.q p, .state { font-size: var(--fs-26); }
.lead, .hero-sub, .ai-a, .tr-steps p, .faq-list p, .faq-list summary, .btn, .btn-lg, .timeline b, .fin-in .lead, .chip { font-size: var(--fs-17); }
.fine, .kicker, .ai-q, .ai-status, .ai-think, .ai-f, .ai-head, .seg-legend, .ask-hint, .cred, .strip, .nav ul, .btn-sm, .tr-label, .tr-rows th, .tr-rows td,
.p-info p, .edu, .media p, .rail-now .count, .on-k, .on-t, .on-cta, .q-tabs button, .q-role, .timeline span, .incl li, .trust, .plan-name, .plan-after,
.foot, .foot-brand, .foot-h, .foot nav li a, .foot-legal, .dock, .ai-list li, .step-names, .nq, .nlabel, .tr-total small, .plan-price .when, .q-hint { font-size: var(--fs-15); }
.tag, .ai-live, .live-dot, .ro, .nums dt { font-size: var(--fs-12); }
.n1 { font: 700 1em/1.3 var(--text); padding: .05em .35em; }
.hero-in .ai-card > * { font-size: var(--fs-15); }
.hero-in .ai-card .ai-a { font-size: var(--fs-17); }
.zero span { font-size: .26em; }

/* coloured fields keep a little more air than the ink sections */
.fomo, .faq { padding-block: clamp(80px, 8.5vw, 128px); }
.reports { padding-top: 0; }
.media { margin-top: var(--sec); }
.courses { padding-bottom: var(--sec); }
.tr-steps li:last-child { min-height: 36vh; }
.tr-scroll { margin-top: 32px; }

/* leads sit under their headlines */
.tr-head, .team-head { grid-template-columns: 1fr !important; gap: 22px; }

/* hero: billing row carries the numbers, tighter top */
@media (min-width: 1100px) {
  .hero-in { padding-top: 96px; padding-bottom: 22px; }
  .hero-sub { grid-column: 1 / 6; }
  .hero-cta { grid-column: 6 / 9; }
  .billing { margin-top: 22px; }
}
.hero-in .ai-card { background-color: rgba(23,22,32,.9); }
@keyframes drop { from { transform: translateY(-36px) scale(.97); } }

/* neutral light inside the other objects */
.tr-card, .online, .quotes { background-image: radial-gradient(70% 60% at 20% 0%, rgba(255,255,255,.07), transparent 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 50px 90px -30px rgba(0,0,0,.9); }

/* team: a credits wall, edge to edge */
.cast-rail { gap: 2px; padding: 0 0 8px; scroll-padding-inline: var(--gut); }
.person { flex: 0 0 80%; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.person:first-child { margin-left: 0; }
.p-photo { aspect-ratio: 3 / 4; }
.p-photo img { filter: grayscale(1) contrast(1.08) brightness(1.02); }
.p-photo::before { opacity: .5; }
.p-photo::after { background: linear-gradient(180deg, transparent 55%, rgba(20,19,27,.6) 78%, var(--ink) 100%); }
.p-info { margin-top: -.62em; font-size: var(--fs-72); padding: 0 var(--gut) 0; }
.p-info > * { font-size: var(--fs-15); }
.p-info h3 { font-size: var(--fs-72); }
.p-info p { margin-top: 12px; }
.p-class { border-top: 0; padding-top: 0; margin-top: 6px !important; }
@media (min-width: 1100px) {
  .cast-rail { display: grid; grid-template-columns: repeat(4, 1fr); max-width: none; perspective: none; padding: 0; }
  .person:nth-child(even) { margin-top: 0; }
  .p-info { padding: 0 24px; }
}
.person:hover, .person:focus-visible { transform: none; }

/* testimonials say they switch */
.q-hint { margin-top: 28px; color: var(--mute); }
.q-tabs { margin-top: 10px; }

/* phone dock: never wraps, steps aside when a section shows its own button */
.dock .btn { white-space: nowrap; }
.dock p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn { white-space: nowrap; }
@media (min-width: 1100px) { .hero-cta { grid-column: 6 / 10; } }
.tr-rows .val { width: auto; white-space: nowrap; padding-left: 8px; }
.tr-rows th { overflow-wrap: anywhere; }
.seg-legend { justify-content: flex-start; column-gap: 16px; }
@media (min-width: 420px) { .seg-legend { justify-content: space-between; } }
@media (max-width: 480px) { .tr-rows td:nth-child(2) { display: none; } .tr-rows th { font-size: var(--fs-15); } .tr-rows th img { width: 28px; height: 28px; } .tr-rows .qty { padding-right: 4px; } .tr-card { padding: 18px 16px; } }
.tr-label { flex-wrap: wrap; row-gap: 8px; }
.tr-pin > * { min-width: 0; max-width: 100%; }
/* the hero's own top padding (under the nav) counts against the first screen */
.hero-in { min-height: max(600px, calc(100svh - 98px)); }
@media (min-width: 1100px) { .hero-in { min-height: max(660px, calc(100svh - 98px)); } }
.person:nth-child(2) .p-photo img, .person:nth-child(3) .p-photo img { filter: grayscale(1) contrast(1.05) brightness(1.32); }

/* ================= round 4 ================= */
/* short laptop screens: the card crosses only the headline, never the button */
.hero-cta { position: relative; z-index: 3; }
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-in { padding-top: 72px; }
  .hero-h, .hero-in .ai-card { font-size: clamp(120px, 11.6vw, 210px); }
  .hero-h { align-self: end; }
  .hero-in .ai-card { grid-row: 1; grid-column: 7 / 13; justify-self: start; align-self: end; max-width: 400px; margin: 0 0 0 -60px; }
  .hero-in .ai-card .ai-f { display: none; }
  .hero-sub { grid-column: 1 / 6; }
  .hero-cta { grid-column: 6 / 10; }
}
/* price headline: two lines that never break inside */
.price .d2 span { display: block; text-wrap: balance; }
@media (min-width: 1100px) { .price .d2 { font-size: clamp(96px, 8.6vw, 124px); } }
/* trust row: wrap between items, never inside */
.trust { flex-wrap: wrap; justify-content: center; gap: 10px 16px; }
.trust li { white-space: nowrap; }
/* closing wall: lit posters, dark only behind the type */
.wall { opacity: .9; }
.wall::after { background: radial-gradient(900px 520px at 50% 50%, rgba(20,19,27,.92), rgba(20,19,27,.55) 62%, rgba(20,19,27,.35) 80%, var(--ink) 100%); }
@media (prefers-reduced-motion: no-preference) { .wall-row { animation-duration: 36s; } }
/* team photos stay black and white; violet belongs to the AI */
.p-photo::before { opacity: 0; }
/* the line names its own state */
.nlabel { opacity: 1; transform: none; background: rgba(20,19,27,.45); color: #fff; transition: background-color .4s, color .4s; }
.nlabel.is-signal { background: var(--orange); color: var(--ink); }