/* ============================================================
   SPOUDI LANDING
   Structure after Brilliant's "Learn by doing" homepage (2024).
   Tokens copied by value from the app's design system so this
   page stands alone: indigo #1E0BB8 on white, Figtree for UI,
   Instrument Serif for display, Pacifico for the $poudi mark.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  color-scheme: light;
  --brand:        #1E0BB8;
  --brand-deep:   #140682;
  --brand-lift:   #2D1AD6;
  --brand-soft:   #5B76E8;
  --brand-100:    #DCE4FB;
  --brand-050:    #EFF3FE;

  --ink:          #111827;
  --ink-2:        #4B5675;
  --ink-3:        #7A85A0;
  --ink-4:        #AEB6C9;
  --line:         #E3E8F2;
  --line-strong:  #CBD3E4;
  --surface:      #FFFFFF;
  --surface-sunk: #EFF2F8;
  --bg:           #F5F7FC;

  --safe:   #12A150;  --safe-bg:   #E6F7EC;
  --warn:   #E8A317;  --warn-bg:   #FDF3DE;
  --danger: #E0263C;  --danger-bg: #FCE9EB;
  --gold:   #E0A31B;

  --sans:   "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:  "Instrument Serif", ui-serif, Georgia, serif;
  --script: "Pacifico", var(--sans);

  --r-sm: 5px; --r-md: 9px; --r-lg: 13px; --r-xl: 16px; --r-pill: 999px;
  --wrap: 1216px;
  --gutter: 24px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* depth and texture for the cards and stages */
  --shadow-card: 0 1px 2px rgba(20,6,130,.05), 0 14px 34px -16px rgba(20,6,130,.2);
  --shadow-float: 0 2px 4px rgba(20,6,130,.06), 0 20px 40px -14px rgba(20,6,130,.32);
  --dots: radial-gradient(circle, rgba(30,11,184,.16) 1.1px, transparent 1.7px);
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.55;
  color: var(--ink); background: var(--surface);
  -webkit-font-smoothing: antialiased; font-synthesis-weight: none;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -.022em; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid color-mix(in oklab, var(--brand) 45%, transparent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* hidden until GSAP runs the entrance; head script clears it after 3s regardless */
.js-anim .hero__w, .js-anim .hero__sub, .js-anim .hero__cta, .js-anim .cast, .js-anim .cat { visibility: hidden; }

/* section titles split into words that rise out of a mask (landing.js, data-split) */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw > span { display: inline-block; }

/* ---------- 3. WORDMARK ---------- */
.wordmark {
  font-family: var(--script); font-size: 2.125rem; line-height: 1; color: var(--brand);
  padding-block: .12em; user-select: none; display: inline-block;
}
.wordmark--invert { color: #fff; }

/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--r-md); font-weight: 700; font-size: 1rem; white-space: nowrap;
  padding: .75rem 1.375rem; min-height: 46px;
  transition: transform .12s ease, background-color .16s ease, box-shadow .12s ease, color .16s;
}
.btn--sm { min-height: 44px; padding: .5rem 1.25rem; font-size: 1rem; }
.btn--xl { min-height: 56px; min-width: 264px; font-size: 1.125rem; border-radius: 12px; }

/* the one forward action: indigo with a pressed-key edge */
.btn--brand {
  background: var(--brand); color: #fff;
  box-shadow: 0 4px 0 var(--brand-deep);
}
.btn--brand:hover { background: var(--brand-lift); }
.btn--brand:active { transform: translateY(4px); box-shadow: 0 0 0 var(--brand-deep); }
.btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); border-radius: var(--r-pill); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: color-mix(in oklab, var(--ink) 84%, var(--brand)); }
.nav .btn--brand { border-radius: var(--r-pill); box-shadow: 0 3px 0 var(--brand-deep); }

/* ---------- 5. NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
/* reading progress: a thin line under the nav that fills as you scroll (native scroll timeline; absent where unsupported) */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), #7B6CFF 60%, var(--gold));
}
@supports (animation-timeline: scroll()) {
  .nav::after { animation: read-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes read-progress { to { transform: scaleX(1); } }
.nav__in { height: 96px; display: flex; align-items: center; justify-content: space-between; transition: height .25s var(--ease-out); }
.nav.is-scrolled .nav__in { height: 72px; }
.nav__act { display: flex; align-items: center; gap: 12px; }
.nav__act { gap: 0; }
.nav__cta { max-width: 0; padding-inline: 0; margin-left: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-width .3s var(--ease-out), padding .3s var(--ease-out), margin .3s var(--ease-out), opacity .2s ease; }
.nav.show-cta .nav__cta { max-width: 180px; padding-inline: 1.25rem; margin-left: 12px; opacity: 1; pointer-events: auto; }
/* one rounding style across the nav and the hero button */
.nav .btn { border-radius: 12px; }   /* same radius as the hero's Get started */

/* ---------- 6. HERO ---------- */
.hero { position: relative; isolation: isolate; padding-top: 40px; }
.hero__in { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 500px); justify-content: center; align-items: center; gap: clamp(48px, 8vw, 120px); }
.hero__stage { order: -1; }   /* the cast leads, the copy follows */
.hero__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(3.5rem, 6.4vw, 6rem);
  line-height: .98; letter-spacing: -.018em; color: var(--ink);
}
.hero__title em { font-style: italic; color: var(--brand); padding-right: .04em; }
.hero__w { display: inline-block; }
.hero__sub { margin-top: 28px; font-size: 1.25rem; line-height: 1.55; color: var(--ink); max-width: 30rem; text-wrap: pretty; }
/* Duolingo's hero: centred copy, then the two buttons stacked at one width */
.hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__ctas { margin-top: 40px; display: grid; gap: 14px; width: min(100%, 340px); }
.hero__cta { width: 100%; min-width: 0; }
.hero .btn--ghost { border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line-strong), 0 3px 0 var(--line-strong); }
.hero .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 0 3px 0 var(--ink); }

/* the cast: sprites placed by their centre (--x, --y) and width (--w) in % of a square stage. The wrapper
   is the layout and GSAP's flight out of the phone; the .cast__bob inside bobs on CSS once they've landed,
   so the two never fight. Layers under a body (trident, waving hand) share its box */
.cast { position: relative; aspect-ratio: 1 / 1; }
.cast__s { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translate(-50%, -50%); }   /* GSAP takes this over as xPercent/yPercent */
.cast__bob { display: block; position: relative; isolation: isolate; }
.cast__bob img { display: block; width: 100%; height: auto; }
.cast__bob .cast__under { position: absolute; inset: 0; height: 100%; z-index: -1; }
/* idle: a slow, small bob like the coins', each at its own pace */
.cast.is-idle .cast__bob { animation: cast-bob var(--t, 5s) ease-in-out var(--dl, 0s) infinite; }
@keyframes cast-bob { 50% { translate: 0 var(--dy, -3%); } }
.cast__s[data-n="poseidon"]   { --t: 4.6s; }
.cast__s[data-n="zeus"]       { --t: 5.4s; --dy: -3.5%; --dl: .3s; }
.cast__s[data-n="apollo"]     { --t: 4.2s; --dy: -4%; --dl: .6s; }
.cast__s[data-n="demeter"]    { --t: 5s; --dy: -3.5%; --dl: .2s; }
.cast__s[data-n="hades"]      { --t: 5.8s; --dl: .8s; }
.cast__s[data-n="hephaestus"] { --t: 4.8s; --dl: .4s; }
.cast__s[data-n="mascot"]     { --t: 3.8s; --dy: -1.2%; --dl: .5s; }
.cast__s[data-n="phone"] .cast__bob { animation: none; }
/* coins: a float, then a hop with a coin-flip spin and a little bounce, like the spray they came in on;
   staggered so they never hop together */
.cast.is-idle .cast__s--coin .cast__bob { animation: coin-hop 4.2s linear var(--dl, 0s) infinite; }
.cast.is-idle .cast__s--coin img { animation: coin-spin 4.2s linear var(--dl, 0s) infinite; }
@keyframes coin-hop {
  0%   { translate: 0 0; animation-timing-function: ease-in-out; }
  22%  { translate: 0 -12%; animation-timing-function: ease-in-out; }
  44%  { translate: 0 0; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  58%  { translate: 0 -55%; animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  70%  { translate: 0 0; animation-timing-function: ease-out; }
  76%  { translate: 0 -12%; animation-timing-function: ease-in; }
  82%, 100% { translate: 0 0; }
}
@keyframes coin-spin { 0%, 44% { transform: perspective(240px) rotateY(0deg); animation-timing-function: ease-in-out; } 70%, 100% { transform: perspective(240px) rotateY(360deg); } }
/* each god's own loop: a canvas laid over the sprite inside its bob (landing.js sets the box), cross-faded in
   once it has drawn. Opacity transitions on these children only: GSAP owns the wrappers */
.cast__live { position: absolute; display: block; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.cast__live canvas { display: block; width: 100%; height: 100%; }
.cast__bob > img:not(.cast__under) { transition: opacity .6s ease; }
.cast__bob.is-live .cast__live { opacity: 1; }
.cast__bob.is-live > img:not(.cast__under) { opacity: 0; }
/* Poseidon's trident slides up and down its shaft through his fist (50px of the 1744px source, along the shaft) */
.cast__trident { animation: cast-trident 3.4s ease-in-out infinite; }
@keyframes cast-trident { 50% { translate: 1.86% -2.24%; } }
/* the mascot's hand waves at the wrist, three swings then a rest; it sits under the wristband so the joint never shows */
.cast__hand { transform-origin: 91.9% 17.6%; animation: cast-wave 3.2s ease-in-out infinite; }
@keyframes cast-wave { 0%, 58%, 100% { rotate: 0deg; } 10% { rotate: 8deg; } 22% { rotate: -7deg; } 34% { rotate: 8deg; } 46% { rotate: -6deg; } }

/* sliders: indigo track, white thumb with an indigo ring */
.slide { display: block; margin-top: 18px; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: grab; margin: 0;
  --fill: 10%;
}
input[type=range]:active { cursor: grabbing; }
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand) var(--fill), var(--line) var(--fill));
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--brand); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--ink); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--brand), 0 2px 6px rgba(20,6,130,.25);
  transition: transform .12s ease;
}
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--brand); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--brand), 0 0 0 7px rgba(30,11,184,.2); }

/* category row */
.cats { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 72px; padding-bottom: 60px; }   /* above the cloud bank's back layer */
.cat { display: inline-flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; transition: color .15s; }
.cat img { flex: none; width: 56px; height: 56px; object-fit: contain; transition: transform .25s var(--ease-out); }
.cat:hover { color: var(--brand); }
.cat:hover img { transform: translateY(-3px) rotate(-4deg); }

/* ---------- 7. PROOF BAND ---------- */
/* Real risk scores copied from the app's hustle data. Every column gets the same gauge,
   a serif score coloured by risk band (amber darkened so it clears 3:1 on the tint),
   the hustle's name and its start-up cost. */
.proof { position: relative; isolation: isolate; background: var(--bg); padding: 80px 0 88px; }
.proof::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--dots); background-size: 22px 22px; opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 70%);
}
.proof__head { max-width: 44rem; margin-inline: auto; text-align: center; }
.proof__title { font-size: 2.25rem; font-weight: 800; }
.proof__sub { margin-top: 10px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.proof__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
/* each score on its own card, with a bar in its risk colour along the top */
.proof__item {
  --risk: var(--safe); --risk-ink: var(--safe); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 14px 26px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-card);
  transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out);   /* translate, so GSAP's entrance on transform is untouched */
}
.proof__item::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--risk); }
.proof__item:hover { translate: 0 -4px; box-shadow: 0 1px 2px rgba(20,6,130,.05), 0 24px 44px -18px rgba(20,6,130,.3); }
.proof__item.is-mid { --risk: var(--warn); --risk-ink: #B7790A; }
.proof__item.is-high { --risk: var(--danger); --risk-ink: var(--danger); }
.proof__gauge { flex: none; width: 93px; height: 56px; overflow: visible; }
.proof__track, .proof__arc { fill: none; stroke-width: 9; stroke-linecap: round; }
.proof__track { stroke: var(--line); }
.proof__arc { stroke: url(#proofRisk); }
.proof__needle { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.proof__hub { fill: var(--ink); }
.proof__fact { display: flex; flex-direction: column; align-items: center; margin-top: 12px; }
.proof__stat { order: -1; font-family: var(--serif); font-size: 4rem; font-weight: 400; line-height: 1; letter-spacing: -.01em; color: var(--risk-ink); }
.proof__name { margin-top: 6px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.proof__meta { display: flex; justify-content: center; gap: 6px; margin-top: 4px; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--ink-2); white-space: nowrap; }
.proof__band { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.proof__band::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--risk); }
.proof__cost::before { content: "\00B7"; margin-right: 6px; color: var(--ink-3); }

/* ---------- 8. WHY ---------- */
.why { padding: 104px 0 96px; }
.why__head { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.why__head h2 { font-size: 2.75rem; font-weight: 800; }
.why__head h2 + p { margin-top: 16px; font-size: 1.1875rem; color: var(--ink-2); line-height: 1.55; text-wrap: balance; }
/* each feature is a panel: the live demo on a tinted stage, the story beside it.
   On big screens the panels pin under the nav one after another and stack like
   a deck; landing.js sinks the one underneath back as the next slides over. */
.feat {
  --top: calc(92px + var(--i, 0) * 16px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: 64px;
  padding: 24px 56px 24px 24px; background: #fff; border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow-card);
  transform-origin: 50% 0;
}
.feat + .feat { margin-top: 32px; }
.feat--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); padding: 24px 24px 24px 56px; }
.feat--flip .feat__art { order: 2; }
.feat::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--bg); opacity: var(--dim, 0); pointer-events: none; }
@media (min-width: 861px) and (min-height: 720px) { .feat { position: sticky; top: var(--top); } }
/* the stage: tinted per feature, a dot grid and a glow */
.feat__art {
  --stage: linear-gradient(160deg, #F2F5FF, #E5EAFD);
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; min-height: 480px;
  padding: 64px 32px 36px; border-radius: 22px; background: var(--stage);
}
.feat__art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--dots); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 80%);
}
.feat__art::after { content: ""; position: absolute; inset: 15% 10%; z-index: -1; border-radius: 50%; background: rgba(255,255,255,.7); filter: blur(40px); }
.feat--sell .feat__art { --stage: linear-gradient(160deg, #F0FAF4, #E1F3E8); }
.feat--devices .feat__art { --stage: linear-gradient(160deg, #F5F2FF, #E8E3FF); }
.feat--streak .feat__art { --stage: linear-gradient(160deg, #FFF7F1, #FDE9DF); }
.feat__try {
  position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 99px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(20,6,130,.08); box-shadow: 0 2px 6px rgba(20,6,130,.08);
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand);
}
.feat__try svg { width: 12px; height: 14px; fill: #fff; stroke: var(--brand); stroke-width: 2.6; stroke-linejoin: round; }
.feat__txt { max-width: 460px; padding-block: 24px; }
.feat__num { margin-bottom: 12px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.feat__txt h3 { font-size: 2rem; font-weight: 800; }
.feat__txt h3 + p { margin-top: 14px; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.feat__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.feat__tags li { padding: 6px 13px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); font-size: .8125rem; font-weight: 700; color: var(--ink-2); }

/* row 1: sold listings, a sweet-spot box and your price. Same chip, coin and
   marble language as row 2 and the hero */
.sell { position: relative; width: 440px; max-width: 100%; }
.sell__plot { width: 100%; height: auto; overflow: visible; }
.sell__slab-top { fill: #EEF1F8; } .sell__slab-front { fill: #DCE2EF; } .sell__slab-side { fill: #C9D1E3; }
.sell__axis { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sell__box { fill: url(#sellBoxG); }
.sell__edge { fill: none; stroke: var(--safe); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .7; }
.sell__line { stroke: var(--brand); stroke-width: 2; stroke-dasharray: 4 5; }
.sell__cap { font: 600 13px var(--sans); fill: var(--ink-3); }
.sdot { transition: fill .25s; }
.sdot.is-in { fill: var(--safe); }
.sdot.is-out { fill: #C3CAD9; }
.chip__pill { fill: #fff; stroke: var(--line); filter: url(#sellSh); }
.chip__t { font: 800 13px var(--sans); fill: var(--ink); letter-spacing: -.005em; }
.chip__ic { fill: var(--safe); }
.chip__tick { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sell__sweet { transition: opacity .25s; }
.sell__sweet.is-off { opacity: 0; }
.sell__coin { fill: url(#coinG); stroke: #fff; stroke-width: 2.5; }
.sell__coin-s { font: 400 13px var(--script); fill: #fff; }
.sell__tag.is-slow .sell__coin { fill: url(#coinGold); }
.sell__tag.is-loss .sell__coin { fill: url(#coinRed); }
.sell__tag.is-loss .chip__t { fill: var(--danger); }
.sell__ctl { margin-top: 10px; display: grid; gap: 2px; }
/* the tracks span exactly the chart's $0-60 axis (x 64-424 of 440), so each thumb sits under its dollar value */
.knob { display: flex; align-items: center; }
.knob__k { flex: none; width: calc(64 / 440 * 100% - 12px); font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.knob input { flex: none; width: calc(360 / 440 * 100% + 24px); }
.sell__read { display: flex; justify-content: space-between; margin-top: 10px; padding-left: calc(64 / 440 * 100%); font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sell__read b { color: var(--ink); font-weight: 800; }
.hand { position: absolute; width: 34px; height: 38px; left: 0; top: 0; pointer-events: none; opacity: 0; }
.hand path { fill: #F4C9A6; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
/* why-section sliders: the hero's knob, solid indigo with a white ring and a soft halo */
.why input[type=range]::-webkit-slider-runnable-track { height: 4px; }
.why input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; background: var(--brand); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(30,11,184,.14), 0 2px 6px rgba(20,6,130,.35); }
.why input[type=range]::-moz-range-track, .why input[type=range]::-moz-range-progress { height: 4px; }
.why input[type=range]::-moz-range-thumb { width: 18px; height: 18px; background: var(--brand); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(30,11,184,.14), 0 2px 6px rgba(20,6,130,.35); }
.why input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(30,11,184,.16), 0 2px 6px rgba(20,6,130,.35); }
.why input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(30,11,184,.4), 0 2px 6px rgba(20,6,130,.35); }
.why input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(30,11,184,.4); }

/* row 2: age. Lesson islands climb like steps; the ones above your age limit go grey and sink */
.age { width: 440px; max-width: 100%; }
.age__art { width: 100%; height: auto; overflow: visible; }
.stp__bob { animation: bob 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 50% { transform: translateY(-5px); } }
.stp__isle { transition: transform .5s var(--ease-out), opacity .4s; }
.stp__on, .stp__off { transition: opacity .4s; }
.stp__off { opacity: 0; }
.stp__pill { fill: #fff; stroke: var(--line); filter: url(#stpSh); transition: fill .3s; }
.stp__ic { fill: var(--brand); transition: fill .3s; }
.stp__tag svg { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.stp__tag > text { font: 800 13px var(--sans); fill: var(--ink); letter-spacing: -.005em; transition: fill .3s; }
.stp__lock { opacity: 0; transition: opacity .25s; }
.stp__lock rect { fill: var(--danger); }
.stp__lock text { font: 800 10.5px var(--sans); fill: #fff; }
.stp.is-locked .stp__isle { transform: translateY(10px); opacity: .5; }
.stp.is-locked .stp__on { opacity: 0; }
.stp.is-locked .stp__off { opacity: 1; }
.stp.is-locked .stp__pill { fill: var(--bg); }
.stp.is-locked .stp__ic { fill: var(--ink-4); }
.stp.is-locked .stp__tag > text { fill: #5F6B85; }
.stp.is-locked .stp__lock { opacity: 1; }
.age__ctl { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; margin-top: 18px; }
.age__ctl .slide { margin: 0; }
.age__v { font-size: .9375rem; font-weight: 700; color: var(--ink-2); min-width: 4.2em; }
.age__v b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.age__note { margin-top: 8px; font-size: .875rem; color: var(--ink-3); min-height: 1.5em; }
.age__note.is-teen { color: var(--brand); }

/* row 3: devices. The laptop is zoomed onto the home screen's
   recommended-lesson card so it reads at thumbnail size. */
.devices { position: relative; width: 100%; max-width: 488px; padding: 0 44px 26px 26px; }
.laptop__screen {
  position: relative; border: 10px solid #1A1640; border-bottom-width: 14px; border-radius: 16px 16px 4px 4px; background: #F5F7FC; overflow: hidden;
  aspect-ratio: 16 / 10; box-shadow: 0 18px 40px -20px rgba(20,6,130,.45);
}
/* app-home.jpg is 2000x1250; show the region x810-1980, y4-735 (the recommended-lesson card) */
.laptop__screen img { position: absolute; width: 170.94%; max-width: none; height: auto; left: -69.23%; top: -.55%; }
.laptop__base { height: 12px; margin: 0 -26px; border-radius: 0 0 14px 14px; background: linear-gradient(#D8DDEA, #AEB6C9); position: relative; }
.laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 70px; height: 5px; margin-left: -35px; border-radius: 0 0 6px 6px; background: #9AA3B8; }
.phone {
  position: absolute; right: 0; bottom: 0; width: 26.5%; aspect-ratio: 9 / 19.5; border-radius: 24px;
  border: 5px solid #1A1640; background: #1A1640; overflow: hidden; box-shadow: 0 20px 36px -12px rgba(20,6,130,.5);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 18px; }

/* row 4: streak, and the app's daily quests under it */
.feat--streak .feat__art { gap: 8px; align-content: center; }
.streak { display: flex; align-items: flex-end; gap: 40px; padding: 30px 12px; }
.quests { width: 100%; max-width: 340px; padding: 16px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(20,6,130,.08); box-shadow: var(--shadow-card); }
.quests__head { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.quests__head b { letter-spacing: .02em; color: var(--brand); }
.quests ul { display: grid; gap: 12px; margin-top: 12px; }
.quests li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; column-gap: 10px; font-size: .9375rem; font-weight: 700; color: var(--ink); }
.quests li i { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-strong); }
.quests li b { font-size: .8125rem; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* a thin bar under each quest, filled to its progress */
.quests li::after { content: ""; grid-column: 2 / 4; height: 5px; margin-top: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--gold) calc(var(--p) * 100%), var(--surface-sunk) 0); }
.quests li.is-done i { border-color: var(--safe); background: var(--safe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.quests li.is-done span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.quests li.is-done b { color: var(--safe); }
.quests li.is-done::after { background: var(--safe); }
.streak__day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 80px; }
.streak__day > span { position: relative; z-index: 1; font-size: 1.25rem; line-height: 28px; font-weight: 700; color: var(--ink); }
.streak__day .flame { position: relative; z-index: 1; width: 54px; height: 64px; }
.streak__day.is-next > span { color: var(--ink-3); }
/* today: a closed 96x156 pill centred on the column; content is 102px tall, so it clears it by 27px */
.streak__ring { position: absolute; left: 50%; top: 50%; width: 96px; height: 156px; max-width: none; margin: -78px 0 0 -48px; overflow: visible; }
.streak__ring path { fill: var(--danger-bg); stroke: var(--danger); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.streak__coin {
  position: absolute; z-index: 2; left: calc(50% + var(--x)); top: calc(50% + var(--y));
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  display: grid; place-items: center; rotate: var(--r);
  background: radial-gradient(circle at 35% 30%, #4FD68A, #12A150 70%); color: #fff;
  font: normal 400 calc(var(--s) * .56)/1 var(--script); padding-bottom: 1px;
  box-shadow: 0 0 0 3px #fff, inset 0 -2px 0 rgba(0,0,0,.18), 0 4px 8px rgba(18,161,80,.3);
  animation: coin-bob 2.8s ease-in-out infinite;
}
.streak__coin:nth-of-type(2) { animation-delay: -.9s; animation-duration: 3.2s; }
.streak__coin:nth-of-type(3) { animation-delay: -1.7s; }
@keyframes coin-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.flame .flame__in, .flame use { transform-box: fill-box; transform-origin: 50% 100%; }
.streak__day:not(.is-next) .flame { animation: flicker 1.6s ease-in-out infinite; transform-origin: 50% 95%; }
.streak__day.is-today .flame { animation-duration: 1.2s; }
@keyframes flicker { 0%,100% { transform: scale(1) skewX(0); } 30% { transform: scale(1.04,.97) skewX(-2deg); } 60% { transform: scale(.97,1.04) skewX(2deg); } }

/* ---------- 9. PATHS ---------- */
.paths { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding: 104px 0 96px; }
.paths::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--dots); background-size: 22px 22px; opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 75%);
}
.paths__head { text-align: center; }
.paths__title { font-size: 2.75rem; font-weight: 800; }
/* a segmented control: the chosen course is a solid indigo pill */
.tabs {
  display: flex; gap: 4px; margin-top: 40px; padding: 6px; border-radius: 18px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.tab { flex: 1; padding: 12px; border-radius: 13px; font-size: 1rem; font-weight: 700; color: var(--ink-2); transition: color .15s, background-color .15s, box-shadow .15s; }
.tab:hover { color: var(--ink); background: var(--bg); }
.tab.is-on { color: #fff; background: var(--brand); box-shadow: 0 3px 0 var(--brand-deep); }
.paths__body { position: relative; display: grid; grid-template-columns: 272px 1fr; gap: 48px; align-items: start; margin-top: 44px; }
.paths__body::before {
  content: ""; position: absolute; top: 5%; right: -6%; width: 70%; height: 90%; z-index: -1; pointer-events: none; filter: blur(40px);
  background: radial-gradient(closest-side, rgba(91,118,232,.28), transparent);
}
.paths__list { padding: 24px 22px; border-radius: 22px; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.paths__kicker { font-size: 1.125rem; line-height: 1.3; color: var(--ink); }
.paths__kicker b { font-weight: 800; }
.paths__list ul { margin-top: 24px; display: grid; gap: 12px; }
.paths__list li { display: flex; align-items: center; gap: 12px; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.paths__list li .ico { width: 28px; height: 28px; flex: none; overflow: visible; }
.paths__list li.is-now { color: var(--brand); font-weight: 700; }
.paths__more { margin-top: 20px; display: inline-flex; gap: 10px; font-size: .9375rem; color: var(--ink-3); border-bottom: 1px dashed var(--ink-4); padding-bottom: 4px; }
.paths__more::before { content: "+"; font-weight: 700; }

.win { background: var(--surface); border: 2px solid var(--brand-deep); border-radius: 14px; box-shadow: 10px 12px 0 var(--brand-deep); overflow: hidden; }
.win__bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: var(--brand-deep); position: relative; }
.win__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); }
.win__label { position: absolute; left: 50%; transform: translateX(-50%); width: min(60%, 420px); text-align: center; padding: 4px 0; border-radius: 99px; background: rgba(255,255,255,.12); font-size: .6875rem; font-weight: 800; letter-spacing: .14em; color: #fff; }
.win__body { position: relative; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px 60px; min-height: 470px; }
.win__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.win__knob { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin-top: 10px; }
.win__knob i { font: italic 400 1rem/28px var(--serif); color: var(--ink-2); }
.win__cursor { position: absolute; left: 0; top: 0; width: 22px; height: 26px; pointer-events: none; z-index: 3; transition: opacity .3s; filter: drop-shadow(0 2px 3px rgba(17,24,39,.3)); }
.win__cursor path { fill: var(--ink); stroke: #fff; stroke-width: 2; stroke-linejoin: round; transform-origin: 3px 2px; transition: transform .15s; }
.win__cursor.is-drag path { transform: scale(.88); }
.win__cursor.is-off { opacity: 0; }
.win__q h3 { font-size: 1.5rem; font-weight: 800; }
.win__card { margin-top: 14px; padding: 20px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.win__card p { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.win__input { display: flex; align-items: center; gap: 8px; margin: 16px 0; font-weight: 400; font-size: .9375rem; color: var(--ink-2); }
.win__input span:empty { display: none; }
.win__input input { width: 104px; height: 42px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: #fff; font-weight: 700; font-size: 1.0625rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.win__input input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,11,184,.15); }
.win__fb { min-height: 1.4em; margin-top: 10px; font-size: .875rem; font-weight: 700; }
.win__fb.is-right { color: var(--safe); } .win__fb.is-wrong { color: var(--danger); }
.win__card.is-shake { animation: shake .4s ease; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
.fig-t { font: 700 13px var(--sans); fill: var(--ink-2); }
.fig-b { font: 800 17px var(--sans); fill: var(--ink); font-variant-numeric: tabular-nums; }
.fig-q { font: 800 17px var(--sans); fill: #fff; }
.fig-a { font: 800 15px var(--sans); fill: #fff; font-variant-numeric: tabular-nums; }
.fig-tot { font: 800 17px var(--sans); fill: var(--brand); }
.fig-ok { font: 800 17px var(--sans); fill: var(--safe); font-variant-numeric: tabular-nums; }
.fig-w { font: 800 16px var(--sans); fill: #fff; }
.fig-g { font: 800 15px var(--sans); fill: #5A3C00; }
.fig-up { font: 800 14px var(--sans); fill: var(--safe); }
.fig-in { font: 800 13px var(--sans); fill: var(--safe); }
.fig-out { font: 800 13px var(--sans); fill: var(--danger); }
.fig-lead { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.fig-brace { fill: none; stroke: var(--ink); stroke-width: 2; }
.fig-arrow { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fig-drop { stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 3 5; stroke-linecap: round; }
.fig-dash { fill: none; stroke-width: 2; stroke-dasharray: 6 5; }

.paths__foot { margin-top: 72px; text-align: center; text-wrap: balance; font-size: 1.125rem; color: var(--ink-2); }
.hustles { max-width: 1040px; margin: 20px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hustles li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); border: 1px solid color-mix(in oklab, var(--brand) 16%, var(--line)); background: var(--surface); font-size: .9375rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.hustles li[hidden] { display: none; }
.hustles .ico { width: 18px; height: 18px; flex: none; filter: grayscale(1); opacity: .6; }
.hustles b { font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hustles b.is-low { color: #0B7A3B; }
.hustles b.is-mid { color: #8A5D00; }
.hustles b.is-high { color: #B21A2E; }
.hustles .hustles__more { padding: 0; border: 0; background: none; }
.hustles__more button { height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px dashed var(--ink-4); font-size: .875rem; font-weight: 600; color: var(--ink-3); transition: color .15s, border-color .15s; }
.hustles__more button:hover { color: var(--brand); border-color: var(--brand-soft); }
.hustles__more button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- 10. CLOSER ---------- */
.closer { padding: 104px 0 112px; }
/* the last ask on a deep indigo card, lit by an indigo and a gold glow */
.closer__in {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px;
  padding: 80px 72px; border-radius: 36px; color: #fff;
  background: radial-gradient(55% 80% at 88% 10%, rgba(123,108,255,.55), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(91,118,232,.4), transparent 70%), var(--brand-deep);
  box-shadow: 0 40px 80px -40px rgba(20,6,130,.6);
}
.closer__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(255,255,255,.2) 1.1px, transparent 1.7px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 80% 30%, #000, transparent 75%);
}
.closer__copy h2 { font-size: 4rem; font-weight: 800; line-height: 1.12; letter-spacing: -.034em; max-width: 560px; color: #fff; }
/* the display moment, echoing the hero's "Earn by doing"; sized up so its x-height matches Figtree's */
.closer__copy h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.3em; line-height: 0;
  letter-spacing: -.01em; color: #FFD36B; padding-right: .04em;
}
.closer__copy .btn { margin-top: 40px; }
.closer .btn--brand { background: #fff; color: var(--brand-deep); box-shadow: 0 4px 0 #B3ABF2; }
.closer .btn--brand:hover { background: #F1EFFF; }
.closer .btn--brand:active { box-shadow: 0 0 0 #B3ABF2; }
.closer__apps { justify-self: end; width: 460px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
/* proof: a product-true streak week, no invented numbers */
.closer__proof {
  padding: 20px 28px 16px; border-radius: 20px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ministreak { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.ministreak li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,.7); }
.ministreak svg { width: 34px; height: 40px; }
.ministreak .is-today { color: #FF98A4; }
.ministreak .is-today svg { transform: scale(1.12); transform-origin: 50% 100%; }
.closer__proof p { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); text-align: center; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.closer__proof i { font-style: normal; margin-inline: 8px; color: rgba(255,255,255,.4); }
/* store badges: small black store-style marks, drawn glyphs; Get started stays the only indigo control */
.stores { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stores__soon { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.7); }
.stores__list { flex: 1 1 auto; display: flex; gap: 10px; }
.store {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 14px; text-align: left;
  border-radius: var(--r-md); background: #0B0620; color: #fff; border: 1px solid rgba(255,255,255,.14);
}
.store__glyph { width: 22px; height: 22px; flex: none; }
.store span { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

/* ---------- 11. FOOTER ---------- */
.foot { background: var(--brand-deep); color: #fff; padding: 72px 0 40px; }
/* two equal halves: brand left, link columns start at the centre line; legal row shares the grid */
.foot__top, .foot__legal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.foot__brand p { margin-top: 24px; max-width: 27rem; font-size: .9375rem; line-height: 1.5; color: #C9C4F5; text-wrap: pretty; }
.foot__right { display: flex; justify-content: space-between; align-items: start; gap: 32px; }
.foot__cols { display: grid; grid-template-columns: repeat(2, 200px); }
.foot__brand .wordmark { font-size: 3rem; }
.foot__cols h4 { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.72); margin-bottom: 18px; letter-spacing: 0; }
.foot__cols div { display: flex; flex-direction: column; gap: 12px; }
.foot__cols a { font-size: .9375rem; color: #fff; }
.foot__cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__social { display: flex; gap: 18px; }
.foot__social svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.foot__social .fill { fill: #fff; stroke: none; }
.foot__social a { padding: 8px; margin: -8px; border-radius: var(--r-md); } /* 38px tap target, same visual spacing */
.foot__social a:hover svg { opacity: 1; }
.foot__legal { margin-top: 96px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); font-size: .8125rem; color: #C9C4F5; }
.foot__legal nav { display: flex; gap: 20px; }
.foot__legal p { text-wrap: pretty; }
.foot__legal a:hover { color: #fff; }

/* ---------- 12. NARROW ---------- */
@media (max-width: 1100px) {
  .hero__in { grid-template-columns: 1fr; gap: 56px; }
  .hero__stage { max-width: 590px; width: 100%; margin-inline: auto; }
  .cats { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 18px 56px; }
  .proof__meta { flex-direction: column; align-items: center; gap: 0; }
  .proof__cost::before { content: none; }
  .closer__in { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 48px; text-align: center; padding: 64px 40px; }
  .closer__apps { justify-self: center; max-width: 100%; text-align: left; }
  .closer__copy { display: flex; flex-direction: column; align-items: center; }
  .foot__top, .foot__legal { grid-template-columns: 1fr; gap: 40px; }
  .foot__legal { gap: 12px; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .feat, .feat--flip { grid-template-columns: minmax(0, 1fr); gap: 4px; max-width: 600px; margin-inline: auto; padding: 12px 12px 18px; border-radius: 26px; }
  .feat--flip .feat__art { order: 0; }
  .feat__art { min-height: 0; padding: 60px 16px 24px; border-radius: 18px; }
  .feat__txt, .feat--flip .feat__txt { max-width: none; padding: 16px 10px 4px; }
  .cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
  .proof__row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .paths__body { grid-template-columns: 1fr; gap: 28px; }
  .tabs { overflow-x: auto; justify-content: flex-start; scrollbar-width: none;
    /* a fade at the right edge says the strip scrolls */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .tabs.is-end { -webkit-mask-image: none; mask-image: none; }
  .tab { flex: none; padding-inline: 18px; }
  .win__body { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px 28px; min-height: 0; }
  .closer__copy h2 { font-size: 3.5rem; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .nav__in { height: 68px; }
  .nav.is-scrolled .nav__in { height: 60px; }
  .wordmark { font-size: 1.75rem; }
  /* phones behave like desktop: a small Log in, and Get started joins it once the hero button scrolls away */
  .nav .btn { min-height: 40px; padding-block: .4rem; }
  .nav .btn--ghost { padding-inline: 1rem; }
  .nav.show-cta .nav__cta { padding-inline: 1.1rem; margin-left: 8px; }
  /* phones: the cast leads and the headline follows, as on Duolingo */
  .hero { padding-top: 36px; }
  .hero__in { gap: 44px; }
  .hero__title { font-size: 3.75rem; }
  .hero__sub { font-size: 1.0625rem; margin-top: 16px; max-width: 330px; text-wrap: balance; }
  .hero__ctas { margin-top: 28px; width: 100%; gap: 12px; }
  .hero__copy { padding-bottom: 4px; }   /* with the category row's own margin: about 48px under the button */
  .hero__br { display: none; }
  /* two even columns on a shared left edge, so rows don't wrap raggedly */
  /* 3 x 2 with each icon over its label, so all six fit the first screen */
  .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; margin-top: 36px; padding-bottom: 40px; }
  .cat { flex-direction: column; gap: 6px; font-size: .8125rem; font-weight: 600; text-align: center; white-space: normal; }
  .paths__foot { text-align: left; text-wrap: balance; }
  /* one tidy list beats a ragged pill cloud at phone width */
  .hustles { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .hustles li { padding: 8px 8px 8px 12px; border-radius: var(--r-md); }
  .hustles li b { margin-left: auto; }
  .hustles__more button { width: 100%; height: 40px; border-radius: var(--r-md); }
  .cat img { width: 48px; height: 48px; }
  .proof { padding: 60px 0 64px; }
  .proof__title { font-size: 1.75rem; }
  .proof__row { gap: 12px; }
  .proof__item { padding: 24px 8px 20px; border-radius: 18px; }
  .proof__sub { font-size: 1rem; }
  .proof__row { margin-top: 32px; }
  .proof__gauge { width: 80px; height: 48px; }
  .proof__fact { margin-top: 10px; }
  .proof__stat { font-size: 3.25rem; }
  .proof__name { font-size: 1rem; }
  .proof__meta { font-size: .875rem; }
  .why { padding-top: 72px; }
  .why__head h2, .paths__title { font-size: 2rem; }
  .feat__txt h3 { font-size: 1.625rem; }
  .why__head h2 + p { font-size: 1.0625rem; }
  .devices { width: 100%; max-width: 360px; }
  .sell__cap { font-size: 16px; }   /* the chart scales to ~0.81 here: renders at 13px */
  .chip__t { font-size: 15px; }
  .knob__k { font-size: .8125rem; }
  .devices { padding: 0 30px 18px 22px; }
  .phone { border-width: 4px; border-radius: 18px; }
  .phone img { border-radius: 14px; }
  .streak { gap: 18px; }
  .paths { padding: 72px 0; }
  .closer { padding: 64px 0 72px; }
  .closer__in { padding: 44px 20px 28px; border-radius: 28px; }
  .closer__copy h2 { font-size: 2.625rem; }
  .closer__copy .btn { width: 100%; min-width: 0; margin-top: 32px; }
  .closer__apps { width: 100%; gap: 18px; }
  .closer__proof { padding: 20px 16px 16px; }
  .ministreak svg { width: 28px; height: 34px; }
  .closer__proof p { font-size: 1rem; }
  .stores { flex-direction: column; gap: 10px; }
  .stores__list { width: 100%; }
  .store { flex: 1 1 0; min-width: 0; justify-content: center; }
  .foot__brand .wordmark { font-size: 2.625rem; }
  .foot__cols { grid-template-columns: 1fr 1fr; flex: 1 1 100%; }
  .foot__right { flex-wrap: wrap; gap: 40px; }
  .foot__legal { margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 13. GREEK ORNAMENT ----------
   The climb to Olympus, the victor's laurel and the stoa
   standing on top of the footer. The SVG is drawn in landing.js ("GREEK");
   the entrances live in MOTION. */

/* the climb to Olympus: six league shields on rising marble steps */
.olympus { position: relative; display: flex; align-items: flex-end; gap: 6px; margin: 26px 0 0; padding: 36px 0 0; }
.olympus li { display: flex; flex-direction: column; align-items: center; width: 56px; }
.olympus li:not(.olympus__you)::after {
  content: ""; display: block; width: 100%; height: calc(10px + var(--i) * 10px); margin-top: 6px; border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #FFFFFF 0%, #F1F3FA 55%, #E1E6F1 100%);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 #fff;
}
.olympus img { width: 56px; height: 56px; filter: grayscale(1) opacity(.4); transition: filter .45s ease, transform .45s var(--ease-out); }
.olympus li.is-lit img { filter: drop-shadow(0 3px 4px rgba(20,6,130,.22)); }
.olympus li.is-here img { transform: translateY(-3px) scale(1.1); }
.olympus__you {
  position: absolute; left: 0; top: 0; width: auto !important; padding: 3px 9px; border-radius: 99px;
  background: var(--brand); color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .02em; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(20,6,130,.25);
}
.olympus__you::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--brand); }
.feat__txt .olympus__cap { margin-top: 10px; font-size: .875rem; color: var(--ink-3); }

/* the victor's laurel that grows round a right answer */
.win__card { position: relative; }
/* sits in the empty space beside the problem's heading, clear of the question text */
.laurel { position: absolute; top: -92px; right: -6px; width: 84px; height: 84px; pointer-events: none; visibility: hidden; }
.laurel.is-on { visibility: visible; }
.laurel svg { width: 100%; height: 100%; overflow: visible; }
.laurel .stem { fill: none; stroke: #0B7A3B; stroke-width: 1.6; stroke-linecap: round; }
.laurel .lf { fill: #12A150; }
.laurel .lf.alt { fill: #2BC06F; }
.laurel .medal { fill: #fff; stroke: var(--gold); stroke-width: 3; }
.laurel .tick { fill: none; stroke: #12A150; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* the stoa: gold key frieze, marble columns, three steps */
.foot { padding-top: 56px; }
.temple { margin: 0 0 72px; }
.temple svg { display: block; width: 100%; height: auto; overflow: visible; }
.stoa__key { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: miter; stroke-linecap: square; }
.stoa__sign { font: 400 15px var(--script); fill: #5A3C00; text-anchor: middle; }

@media (max-width: 560px) {
  .olympus { gap: 4px; }
  .olympus li { width: 46px; }
  .olympus img { width: 46px; height: 46px; }
  .laurel { top: -78px; right: -4px; width: 70px; height: 70px; }
  .temple { margin-bottom: 48px; }
}

/* ============================================================
   THE CLOUD TRANSITION
   Between the hero and the proof band: the app's own cloud bank
   (assets/sky/bank.webp, made with Higgsfield) under the hero, its
   lavender fading into the band below, and the app's clouds waiting
   below the hero that rise past you faster than the page as you scroll
   on (landing.js). The hero stacks above the next section so they can
   cross the border.
   ============================================================ */
.hero { z-index: 2; }
/* the star field (after uiverse.io amir_6539/red-duck-82): three layers of dots drifting up at their own
   speeds, in a soft brand lavender, behind the content of each light section (landing.js adds the layers).
   Each layer is a repeating tile, a tile taller than its section, that slides up exactly one tile per lap
   on a transform, so the loop is seamless and runs on the compositor (animating background-position
   repainted the whole section every frame and made the page stutter) */
.stars { --star: rgb(30 11 184 / .3); position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stars i { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + var(--t)); background-size: var(--t) var(--t); will-change: transform; animation: stars-up var(--d) linear infinite; }
.stars i:nth-child(1) { --t: 233px; --d: 6s; background-image: radial-gradient(circle at 7% 12%, var(--star) 1px, transparent 1.6px), radial-gradient(circle at 23% 64%, var(--star) 1px, transparent 1.6px), radial-gradient(circle at 41% 31%, var(--star) 1px, transparent 1.6px), radial-gradient(circle at 58% 87%, var(--star) 1px, transparent 1.6px), radial-gradient(circle at 69% 8%, var(--star) 1px, transparent 1.6px), radial-gradient(circle at 81% 49%, var(--star) 1px, transparent 1.6px), radial-gradient(circle at 93% 76%, var(--star) 1px, transparent 1.6px), radial-gradient(circle at 34% 95%, var(--star) 1px, transparent 1.6px); }
.stars i:nth-child(2) { --t: 377px; --d: 19s; background-image: radial-gradient(circle at 14% 42%, var(--star) 1.5px, transparent 2.1px), radial-gradient(circle at 46% 7%, var(--star) 1.5px, transparent 2.1px), radial-gradient(circle at 63% 58%, var(--star) 1.5px, transparent 2.1px), radial-gradient(circle at 88% 22%, var(--star) 1.5px, transparent 2.1px), radial-gradient(circle at 29% 81%, var(--star) 1.5px, transparent 2.1px), radial-gradient(circle at 76% 93%, var(--star) 1.5px, transparent 2.1px); }
.stars i:nth-child(3) { --t: 521px; --d: 39s; background-image: radial-gradient(circle at 9% 73%, var(--star) 2px, transparent 2.6px), radial-gradient(circle at 52% 38%, var(--star) 2px, transparent 2.6px), radial-gradient(circle at 83% 66%, var(--star) 2px, transparent 2.6px), radial-gradient(circle at 37% 14%, var(--star) 2px, transparent 2.6px); }
@keyframes stars-up { to { transform: translateY(calc(-1 * var(--t))); } }
.hero .stars { -webkit-mask-image: linear-gradient(#000 55%, transparent 92%); mask-image: linear-gradient(#000 55%, transparent 92%); }   /* gone before the clouds */
.why, .closer { position: relative; isolation: isolate; }   /* so the stars sit above the section's background, under its content */
@media (prefers-reduced-motion: reduce) { .stars i { animation: none; } }
.hero__bank {
  --bank-h: clamp(100px, 14vh, 170px); --hang: 70px;
  position: absolute; z-index: 1; left: 0; right: 0; top: calc(100% - var(--bank-h) * .45); height: calc(var(--bank-h) + var(--hang)); pointer-events: none;
  background: linear-gradient(transparent calc(var(--bank-h) - 2px), #C0CCF5 calc(var(--bank-h) - 2px), var(--bg));
}
/* two banks: the front one, and a taller, paler one mirrored and offset behind it, so the puffs layer */
.hero__bank::before, .hero__bank::after { content: ""; position: absolute; left: 0; right: 0; background: url(assets/sky/bank.webp) 50% 100% / auto 100% repeat-x; }
.hero__bank::after { top: 0; height: var(--bank-h); }
.hero__bank::before { bottom: calc(100% - var(--bank-h) * .78); height: calc(var(--bank-h) * 1.4); background-position: 31% 100%; transform: scaleX(-1); filter: saturate(.7) brightness(1.05); }
.fall { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow-x: clip; overflow-y: visible; }
.fall__cloud { position: absolute; top: calc(100% + 40vh + var(--o, 0vh)); left: var(--x); width: var(--w); min-width: 200px; max-width: none; height: auto; will-change: transform; }   /* out of sight until you scroll: the hero is shorter than the screen */
.proof { padding-top: calc(80px + clamp(100px, 14vh, 170px) * .55 + 70px); }   /* room for the bank that hangs into it */
@media (prefers-reduced-motion: reduce) { .fall { display: none; } }

/* the cloud divider over the footer: the app's bank rising from the page above, and the same strip
   mirrored below it, so the band has soft puffs on both edges and the colonnade stands in the indigo
   underneath */
.foot { --cb: clamp(96px, 13vh, 150px); position: relative; }
.foot::before, .foot::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--cb); pointer-events: none;
  background: url(assets/sky/bank.webp) 50% 100% / auto 100% repeat-x;
}
.foot::before { bottom: calc(100% - 2px); }
.foot::after { top: -2px; height: calc(var(--cb) * .7); transform: scaleY(-1); }
/* room under the cloud divider for the colonnade */
.foot { padding-top: calc(var(--cb) * .7 + 40px); }