/* GENERATED by marketing/site/build.mjs: the tokens from Design/css/colors_and_type.css, then marketing/site/base.css + year/year.css + year/theater.css.
   Edit those, then npm run build:site. */
:root {
  --bg-0: oklch(0.178 0.014 52);
  --bg-1: oklch(0.232 0.018 52);
  --bg-2: oklch(0.285 0.020 50);
  --bg-3: oklch(0.350 0.022 50);
  --bg-grad: radial-gradient(125% 82% at 50% -6%,
    oklch(0.250 0.028 56) 0%,
    oklch(0.182 0.015 52) 54%,
    oklch(0.150 0.012 46) 100%);
  --bg-grad-warm: radial-gradient(130% 88% at 50% -4%,
    oklch(0.275 0.045 60) 0%,
    oklch(0.190 0.020 50) 52%,
    oklch(0.150 0.012 44) 100%);
  --line-1: oklch(0.46 0.020 55 / 0.18);
  --line-2: oklch(0.58 0.020 55 / 0.22);
  --ink-0: oklch(0.958 0.012 78);
  --ink-1: oklch(0.800 0.016 72);
  --ink-2: oklch(0.662 0.016 66);
  --ink-3: oklch(0.520 0.014 60);
  --accent:       oklch(0.800 0.125 188);
  --accent-soft:  oklch(0.800 0.125 188 / 0.16);
  --accent-line:  oklch(0.800 0.125 188 / 0.42);
  --accent-ink:   oklch(0.210 0.045 195);
  --accent-bold:  oklch(0.865 0.145 186);
  --accent-deep:  oklch(0.630 0.120 192);
  --accent-glow:  oklch(0.820 0.140 188 / 0.48);
  --gold:       #E5CC85;
  --gold-soft:  rgba(229, 204, 133, 0.16);
  --gold-line:  rgba(229, 204, 133, 0.45);
  --gold-glow:  rgba(229, 204, 133, 0.46);
  --gold-ink:   #2A1F08;
  --alert:        oklch(0.800 0.130 62);
  --alert-soft:   oklch(0.800 0.130 62 / 0.16);
  --alert-line:   oklch(0.800 0.130 62 / 0.45);
  --alert-ink:    oklch(0.245 0.050 50);
  --alert-bold:   oklch(0.865 0.150 65);
  --alert-deep:   oklch(0.660 0.140 55);
  --alert-glow:   oklch(0.820 0.150 62 / 0.48);
  --font-wordmark: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-display:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:       "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono:     "Hanken Grotesk", ui-monospace, "SF Mono", monospace;
  --t-display-xl: 88px;
  --t-display-l:  52px;
  --t-display-m:  34px;
  --t-display-s:  24px;
  --t-body-l:     17px;
  --t-body:       15px;
  --t-body-s:     13px;
  --t-mono:       12px;
  --t-eyebrow:    11px;
  --t-micro:      10px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 28px; --s-7: 36px; --s-8: 48px;
  --glass:        linear-gradient(180deg, oklch(0.98 0.02 72 / 0.10), oklch(0.98 0.02 72 / 0.05));
  --glass-strong: linear-gradient(180deg, oklch(0.98 0.02 72 / 0.11), oklch(0.98 0.02 72 / 0.035));
  --glass-border: oklch(0.92 0.03 66 / 0.12);
  --glass-blur:   16px;
  --shadow-1:     0 1px 0 oklch(1 0 0 / 0.05) inset, 0 0 0 1px oklch(1 0 0 / 0.04);
  --shadow-raise: 0 12px 28px -16px oklch(0 0 0 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.06);
  --shadow-card:  0 24px 48px -24px oklch(0 0 0 / 0.66), inset 0 1px 0 oklch(1 0 0 / 0.06);
  --shadow-sheet: 0 -24px 60px oklch(0 0 0 / 0.55);
  --shadow-glow:       0 0 0 1px var(--accent-glow), 0 14px 40px -10px var(--accent-glow);
  --shadow-glow-alert: 0 0 0 1px var(--alert-glow),  0 14px 40px -10px var(--alert-glow);
  --shadow-glow-gold:  0 0 0 1px var(--gold-glow),   0 14px 44px -10px var(--gold-glow);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    300ms;
  --dur-slow:    900ms;
  --dur-celebrate: 1100ms;
  --nim-time-tint: oklch(0.800 0.125 188);
  --nim-time-glow: oklch(0.800 0.125 188 / 0.22);
}

/* ===================================================================
   Paff · what every home-page design shares (marketing/site): the type,
   the ground, the material, the header, the call to action, the pieces
   each chapter is built from (the chat, the plan cards, the medal labels,
   the kit) and the footer. A design lays its chapters out on top
   (classic.css, year.css).
   The brand's tokens sit above this (build.mjs copies them from
   Design/css/colors_and_type.css). The laws hold here as in the app:
   warm and deep, never a flat void; Fraunces leads with its real italic
   for the punchline; teal and honey-amber; numbers lead; Nim is the
   hero and moves inside his own SVGs.
   =================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/fraunces-400.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hanken-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hanken-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hanken-600.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --page: 1200px;
  --gut: clamp(16px, 4.4vw, 56px);
  --sec: clamp(96px, 12vw, 176px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* the coach's three facts (marketing/store/know.js): the hard moment, what helps, the reason */
  --fact-m: var(--alert);
  --fact-h: var(--accent-bold);
  --fact-r: var(--gold);
  /* a check drawn as a mask, so it takes the colour of whatever paints it */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3 3L12.8 4.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg-0); }
body {
  margin: 0; min-height: 100vh; background: var(--bg-0); color: var(--ink-0);
  font: 400 17px/1.6 var(--font-ui); letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-bold); }
:focus-visible { outline: 2px solid var(--accent-bold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); color: var(--ink-0); }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.skip { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--bg-2); color: var(--ink-0); font-weight: 600; }
.skip:focus { top: 16px; }

/* ── type ───────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink-0); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent-bold); letter-spacing: -0.014em; }
h1 { font-size: min(clamp(42px, 1.4rem + 5vw, 96px), 8svh + 12px); line-height: 1.02; }
/* the hero's first line: the app's icon and what it is, a quiet pill over the meadow */
.hero-id { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 5px 15px 5px 5px; border-radius: var(--r-pill); background: oklch(0.16 0.012 50 / 0.5); border: 1px solid oklch(0.92 0.03 66 / 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 15px/1 var(--font-ui); letter-spacing: 0.01em; color: var(--ink-0); }
.hero-id img { width: 30px; height: 30px; border-radius: 7px; }
h2 { font-size: clamp(36px, 1.2rem + 3.4vw, 68px); line-height: 1.05; }
h3 { font-size: clamp(23px, 1rem + 0.9vw, 30px); line-height: 1.18; letter-spacing: -0.012em; }
.split h2 { font-size: clamp(34px, 1.1rem + 2.6vw, 58px); }
.eyebrow { margin: 0 0 20px; font: 600 13px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.eyebrow-warm { color: var(--alert); }
.lede { font-size: clamp(18px, 1rem + 0.3vw, 21px); line-height: 1.55; color: var(--ink-1); }
.body { margin-top: 24px; color: var(--ink-1); max-width: 34em; }
.center { text-align: center; }
.center .lede, .center .body { margin-inline: auto; }

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: calc(760px + 2 * var(--gut)); }
.sec { position: relative; padding-block: var(--sec); isolation: isolate; }
.split { display: grid; gap: clamp(48px, 7vw, 112px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split.rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .split.rev > :first-child { order: 2; }
  .split-top { align-items: start; }
}

/* the light each section stands in: one warm or teal glow, never a flat band */
.sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.coach::before { background: radial-gradient(50% 46% at 72% 52%, oklch(0.80 0.125 188 / 0.10), transparent 72%); }
.money::before { background: radial-gradient(46% 50% at 26% 48%, oklch(0.80 0.130 62 / 0.11), transparent 72%); }
.medals::before { background: radial-gradient(54% 60% at 50% 62%, oklch(0.85 0.09 90 / 0.08), transparent 72%); }
.kit::before { background: radial-gradient(48% 40% at 50% 26%, oklch(0.80 0.130 62 / 0.12), transparent 72%); }
.slip::before { background: radial-gradient(40% 50% at 50% 30%, oklch(0.80 0.125 188 / 0.07), transparent 72%); }

/* ── material ───────────────────────────────────────────────────────── */
.glass {
  background: var(--glass), oklch(0.21 0.016 52 / 0.72);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}

/* a phone: the capture with its own rounded screen, the bezel drawn by the shadow's spread */
.device { width: min(100%, 330px); justify-self: center; container-type: inline-size; }
.device img {
  width: 100%; height: auto; border-radius: 13.6cqi;
  box-shadow: 0 0 0 2.7cqi #0c0a08, 0 0 0 calc(2.7cqi + 1px) oklch(1 0 0 / 0.11), 0 50px 90px -40px oklch(0 0 0 / 0.85), 0 30px 60px -30px oklch(0.80 0.130 62 / 0.10);
}

/* ── header ─────────────────────────────────────────────────────────── */
.site-head { position: absolute; inset: 0 0 auto; z-index: 10; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.brand { display: block; color: var(--ink-0); }
.brand svg { height: 25px; width: auto; }
.wm-ink { fill: currentColor; }
.wm-dot { fill: var(--accent); }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font: 500 15px/1 var(--font-ui); }
.nav a { color: oklch(0.93 0.012 75 / 0.86); padding-block: 8px; }
.nav a:hover { color: var(--ink-0); }

/* ── the call to action: the date until launch, then the App Store ─── */
.cta { display: grid; justify-items: center; gap: 12px; }
.launch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px 0 20px; border-radius: var(--r-pill);
  background: oklch(0.19 0.02 55 / 0.62); border: 1px solid oklch(0.92 0.03 66 / 0.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 600 16px/1.2 var(--font-ui); color: var(--ink-0); box-shadow: 0 18px 40px -20px oklch(0 0 0 / 0.6);
}
.launch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bold); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px var(--accent-glow); }
.store {
  display: inline-flex; align-items: center; min-height: 54px; padding: 0 30px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent-bold), var(--accent-deep)); color: var(--accent-ink);
  font: 600 17px/1 var(--font-ui); box-shadow: var(--shadow-glow); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.store:hover { color: var(--accent-ink); transform: translateY(-1px); }
.store:active { opacity: 0.82; transform: scale(0.985); }
.cta-meta { font: 500 13px/1.3 var(--font-ui); letter-spacing: 0.02em; color: var(--ink-2); }
.hero .cta-meta { display: none; }

/* ── the coach ──────────────────────────────────────────────────────── */
.meet { display: flex; align-items: center; gap: 10px; margin-top: 32px; max-width: 32em; }
/* every Nim SVG is framed alike (nim.mjs FRAME): the cloud is a third of its image, so the sizes here are the cloud × 3 */
.meet-nim { width: 200px; height: 200px; flex: none; margin: -40px -16px -40px -38px; }
.meet figcaption { font: 400 16px/1.5 var(--font-ui); color: var(--ink-2); }
.chat { display: grid; gap: 12px; padding: clamp(22px, 3vw, 34px); width: 100%; max-width: 560px; justify-self: end; }
.chat-who { margin-bottom: 6px; font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.msg { max-width: 88%; padding: 12px 17px; border-radius: 22px; }
.msg.me { justify-self: end; border-bottom-right-radius: 7px; background: oklch(0.33 0.018 58 / 0.9); color: var(--ink-0); font: 500 16px/1.4 var(--font-ui); }
.msg.coach-says {
  justify-self: start; border-bottom-left-radius: 7px; background: oklch(0.225 0.03 192 / 0.92); border: 1px solid oklch(0.80 0.125 188 / 0.32);
  font: 400 clamp(18px, 0.9rem + 0.4vw, 21px)/1.38 var(--font-display); letter-spacing: -0.008em; color: var(--ink-0);
}
mark { background: none; color: inherit; font-style: italic; }
mark.f-m { color: var(--fact-m); }
mark.f-h { color: var(--fact-h); }
mark.f-r { color: var(--fact-r); }
.knew { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--line-1); }
.knew .eyebrow { margin-bottom: 14px; font-size: 12px; color: var(--ink-2); }
.knew dl { display: grid; gap: 10px; }
.fact { display: flex; align-items: baseline; gap: 12px; font-size: 15px; }
.fact::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.fact dt { color: var(--ink-2); min-width: 9.5em; }
.fact dd { color: var(--ink-0); font-weight: 500; }
.fact.f-m { color: var(--fact-m); } .fact.f-h { color: var(--fact-h); } .fact.f-r { color: var(--fact-r); }
/* the line the chat lands on: the difference, said in the brand's voice */
.method { margin-top: 18px; font: 500 clamp(19px, 0.95rem + 0.45vw, 22px)/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--ink-0); }
.method em { font-style: italic; color: var(--accent-bold); }

/* ── the plan ───────────────────────────────────────────────────────── */
.tactics { padding: clamp(24px, 3vw, 36px); max-width: 520px; width: 100%; }
.tactics .eyebrow { margin-bottom: 6px; font-size: 12px; color: var(--ink-2); }
.tactics h3 { margin-bottom: 22px; }
.tactics ol { display: grid; gap: 12px; }
.tactic { padding: 18px 20px; border-radius: var(--r-md); background: oklch(0.255 0.02 52 / 0.9); border: 1px solid var(--line-1); }
.tactic-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.tactic-when { font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--alert); }
.tactic-tag { font: 500 12px/1 var(--font-ui); padding: 6px 10px; border-radius: var(--r-pill); color: var(--accent); background: var(--accent-soft); }
.tactic-move { font: 400 19px/1.36 var(--font-display); letter-spacing: -0.008em; color: var(--ink-0); }
.tactic-proof { margin-top: 8px; font-size: 14px; color: var(--ink-2); }

/* ── money ──────────────────────────────────────────────────────────── */
.figure { margin-top: 36px; }
.figure-num {
  display: block; font: 500 clamp(96px, 3rem + 9vw, 188px)/0.92 var(--font-display); letter-spacing: -0.035em;
  color: var(--alert-bold); text-shadow: 0 0 0.4em oklch(0.82 0.15 62 / 0.22);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
/* a figure with a separator and a currency after it ("3.895 ₺") runs nearly twice as wide as "$304" */
.figure-num.figure-long { font-size: clamp(64px, 2rem + 6.2vw, 148px); }
.figure-note { display: block; margin-top: 14px; font: 500 16px/1.4 var(--font-ui); color: var(--ink-1); }

/* ── medals ─────────────────────────────────────────────────────────── */
.medals .lede { max-width: 30em; margin-top: 22px; }
.medal-row { margin-top: 64px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2.4vw, 36px); align-items: end; }
.medal-row li { display: grid; justify-items: center; }
.medal-row img { width: 100%; max-width: 184px; height: auto; filter: drop-shadow(0 22px 26px oklch(0 0 0 / 0.5)); }
.medal-row li:nth-child(3) img, .medal-row li:nth-child(5) img { filter: drop-shadow(0 22px 26px oklch(0 0 0 / 0.5)) drop-shadow(0 0 34px oklch(0.85 0.09 90 / 0.22)); }
.medal-metal { margin-top: 18px; font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-1); }
.medal-when { margin-top: 4px; font: 500 15px/1.3 var(--font-display); color: var(--ink-2); }
@media (max-width: 640px) {
  .medal-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 36%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gut)); padding: 8px var(--gut) 12px; scrollbar-width: none; }
  .medal-row::-webkit-scrollbar { display: none; }
  .medal-row li { scroll-snap-align: center; }
}

/* ── three ways in ──────────────────────────────────────────────────── */
.roads h2 { max-width: 14em; }
.road-list { margin-top: 56px; display: grid; gap: 18px; }
@media (min-width: 900px) { .road-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.road { padding: 10px 30px 32px; }
.road-nim { width: 250px; height: 250px; margin: -6px auto -18px; }
.road h3 { margin-bottom: 10px; }
.road p { color: var(--ink-1); font-size: 16px; }

/* ── the slip ───────────────────────────────────────────────────────── */
.slip-nim { width: 290px; height: 290px; margin: -60px auto -36px; }
.slip .lede { max-width: 28em; margin-top: 22px; }
.ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 34px; }
.ticks li { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.4 var(--font-ui); color: var(--ink-0); }
.ticks li::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--accent-bold); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }

/* ── built for iPhone ───────────────────────────────────────────────── */
.features { margin-top: 36px; display: grid; gap: 4px; }
.features div { padding: 18px 0; border-top: 1px solid var(--line-1); }
.features div:last-child { border-bottom: 1px solid var(--line-1); }
.features dt { font: 500 20px/1.3 var(--font-display); color: var(--ink-0); }
.features dd { margin-top: 4px; color: var(--ink-1); font-size: 16px; }

/* ── privacy ────────────────────────────────────────────────────────── */
.privacy h2 { max-width: 18em; }
.facts { margin-top: 52px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.facts li {
  display: flex; align-items: flex-end; min-height: 128px; padding: 22px 24px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, oklch(0.24 0.018 52), oklch(0.21 0.016 52)); border: 1px solid var(--line-1);
  font: 500 clamp(22px, 0.9rem + 0.9vw, 28px)/1.15 var(--font-display); letter-spacing: -0.012em;
}
.privacy .body { margin-top: 32px; max-width: 40em; }

/* ── the Quit Kit ───────────────────────────────────────────────────── */
.kit-nim { width: 310px; height: 310px; margin: -64px auto -30px; }
.ticks-grid { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 14px 40px; text-align: left; }
@media (max-width: 560px) { .ticks-grid { grid-template-columns: max-content; } }
.kit-foot { margin-top: 30px; color: var(--ink-1); }
.price { margin-top: 40px; font: 500 clamp(28px, 1rem + 1.8vw, 40px)/1.15 var(--font-display); letter-spacing: -0.016em; color: var(--alert-bold); }
.price span { display: block; margin-top: 8px; font: 500 14px/1.4 var(--font-ui); letter-spacing: 0; color: var(--ink-2); }
.app-row { display: inline-flex; align-items: center; gap: 16px; margin: 48px auto 26px; text-align: left; }
.app-icon { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 14px 30px -14px oklch(0 0 0 / 0.7); }
.app-name { font: 600 17px/1.3 var(--font-ui); color: var(--ink-0); }
.app-sub { font-size: 15px; color: var(--ink-2); }

/* ── questions ──────────────────────────────────────────────────────── */
.faq-list details { border-top: 1px solid var(--line-1); }
.faq-list details:last-child { border-bottom: 1px solid var(--line-1); }
.faq-list summary {
  position: relative; display: block; cursor: pointer; list-style: none; padding: 24px 48px 24px 0;
  font: 500 clamp(19px, 0.9rem + 0.5vw, 23px)/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--ink-0);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; border-radius: 1px; background: var(--accent);
  transition: transform var(--dur-base) var(--ease);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-list summary:hover { color: var(--accent-bold); }
.faq-list details p { padding: 0 48px 26px 0; max-width: 38em; color: var(--ink-1); }

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot { padding-block: 72px 48px; border-top: 1px solid var(--line-1); background: oklch(0.155 0.012 50); color: var(--ink-2); font-size: 15px; }
.foot-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 80px; } }
.foot-brand .brand svg { height: 22px; margin-bottom: 18px; }
.foot-brand p + p { margin-top: 6px; }
.crisis { padding: 22px 24px; border-radius: var(--r-md); border: 1px solid var(--line-1); background: oklch(0.19 0.014 52); }
.crisis .eyebrow { margin-bottom: 10px; font-size: 12px; }
.crisis p { color: var(--ink-1); line-height: 1.55; }
.crisis strong { color: var(--ink-0); font-weight: 600; white-space: nowrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-1); font-size: 14px; }
.foot-links a { color: var(--ink-1); }
.foot-links a:hover { color: var(--ink-0); }
.fine { margin-top: 22px; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 60em; }

/* ── phones ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-head .wrap { height: 68px; }
  .brand svg { height: 22px; }
  .nav { gap: 16px; font-size: 14px; }
  .chat { padding: 18px; }
  .msg { max-width: 92%; }
  .fact { flex-wrap: wrap; gap: 2px 12px; }
  .fact dt { min-width: 0; }
  .meet-nim { width: 172px; height: 172px; margin: -36px -14px -36px -34px; }
  .road { padding: 4px 22px 26px; }
}

/* ===================================================================
   Paff · the scroll page ("A year in one scroll", marketing/site/year).
   base.css carries the type, the ground and the pieces; this lays the
   chapters out twice: as a plain page (no script, or Reduce Motion),
   then, under .js, pinned to the screen and played by the scroll
   (year.js writes each chapter's progress as --p, 0 to 1).
   =================================================================== */

/* ── a chapter: a section on the plain page, a pinned stage under the script ── */
.scene { position: relative; isolation: isolate; }
.scene > .pin { position: relative; }
.scene:not(.hero) > .pin { padding-block: var(--sec); }
.js .scene { height: calc(var(--len, 1) * 100lvh); }
/* one column the width of the screen: a wide child (the body's track) runs past the edge instead of widening the grid */
.js .scene > .pin { position: sticky; top: 0; height: 100lvh; overflow: hidden; padding-block: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* an element with a threshold (--t, set from data-t) shows once its chapter passes it */
.js .scene [data-t] {
  --on: clamp(0, (var(--p, 0) - var(--t)) * 12, 1);
  opacity: var(--on);
  transform: translateY(calc((1 - var(--on)) * 18px));
}
/* blocks outside the chapters rise in once (year.js adds .in) */
.js .rise { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }

/* each chapter stands in its own light */
.scene > .pin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.money > .pin::before { background: radial-gradient(46% 52% at 30% 50%, oklch(0.80 0.130 62 / 0.12), transparent 72%); }
/* the jar's inside is pre-laid on --bg-0 (jar_web.py): nothing may glow behind it */
.money:has(.money-stage.has-jar) > .pin::before { display: none; }
.coach > .pin::before { background: radial-gradient(48% 50% at 72% 50%, oklch(0.80 0.125 188 / 0.10), transparent 72%); }
.plan > .pin::before { background: radial-gradient(44% 50% at 68% 50%, oklch(0.80 0.130 62 / 0.07), transparent 72%); }
.medals > .pin::before { background: radial-gradient(42% 54% at 66% 52%, oklch(0.85 0.09 90 / 0.10), transparent 72%); }
.privacy > .pin::before { background: radial-gradient(50% 50% at 30% 50%, oklch(0.80 0.125 188 / 0.06), transparent 72%); }

/* ── hero: the meadow alive; the words lift away as the page begins to move ── */
.hero > .pin { display: grid; min-height: max(660px, 100svh); overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -1; background: #1c1312; transform-origin: 50% 70%; }
.hero-art img, .hero-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, oklch(0.13 0.014 40 / 0.62) 0%, oklch(0.13 0.014 40 / 0.18) 34%, transparent 52%),
    linear-gradient(0deg, var(--bg-0) 0%, oklch(0.178 0.014 52 / 0) 16%);
}
.hero-copy { align-self: start; display: grid; justify-items: center; text-align: center; padding-top: clamp(112px, 13svh + 40px, 176px); padding-bottom: 56px; }
.hero h1 { max-width: 15em; font-size: min(clamp(40px, 1rem + 4.4vw, 84px), 6.6svh + 12px); text-shadow: 0 2px 28px oklch(0.12 0.014 40 / 0.55), 0 0 2px oklch(0.12 0.014 40 / 0.3); }
.hero .eyebrow { color: var(--accent-bold); text-shadow: 0 1px 12px oklch(0.12 0.014 40 / 0.6); }
.hero .lede { max-width: 29em; margin-top: 22px; color: oklch(0.90 0.014 75); text-shadow: 0 1px 16px oklch(0.12 0.014 40 / 0.7); }
.hero .cta { margin-top: 30px; }
.hero .cta-meta { display: none; }
.hero-chips { margin-top: 16px; font: 500 14px/1.4 var(--font-ui); letter-spacing: 0.01em; color: oklch(0.90 0.014 75 / 0.82); text-shadow: 0 1px 10px oklch(0.12 0.014 40 / 0.7); }
.hero-caption { position: absolute; left: var(--gut); bottom: 26px; font: 500 12px/1.3 var(--font-ui); letter-spacing: 0.04em; color: oklch(0.92 0.014 75 / 0.7); text-shadow: 0 1px 8px oklch(0.1 0.01 40 / 0.9); }
@media (max-aspect-ratio: 3/5) {
  .hero-art img, .hero-art video { object-position: 50% 0%; }
  .hero-copy { padding-top: 96px; }
  .hero h1 { font-size: clamp(36px, 9.8vw, 44px); }
  .hero .lede { margin-top: 18px; font-size: 16.5px; }
  .hero .cta { margin-top: 24px; }
  .hero-chips { display: none; }
  .hero-caption { left: 0; right: 0; text-align: center; }
}
@media (max-height: 820px) and (min-aspect-ratio: 1/1) { .hero-chips { display: none; } .hero-copy { padding-top: clamp(104px, 9svh + 48px, 140px); } }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.js .hero > .pin { min-height: 0; }
.js .hero .hero-copy { transform: translateY(calc(var(--p) * -10vh)); opacity: calc(1 - var(--p) * 1.9); }
.js .hero .hero-art { transform: scale(calc(1 + var(--p) * 0.07)); }
.js .hero .hero-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bg-0); opacity: calc(var(--p) * 0.45); }
.js .hero .hero-caption { opacity: calc(1 - var(--p) * 4); }

/* ── money: the number climbs while the jar fills, then the app's own home screen ── */
.money-grid { display: grid; gap: clamp(28px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .money-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.money h2 { font-size: clamp(34px, 1.1rem + 2.6vw, 58px); }
.tally { margin-top: clamp(22px, 4vh, 40px); }
.tally-label { font: 600 13px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--alert); }
.tally-num {
  margin-top: 6px; font: 500 clamp(84px, 2.4rem + 9vw, 180px)/0.94 var(--font-display); letter-spacing: -0.035em; white-space: nowrap;
  color: var(--alert-bold); text-shadow: 0 0 0.4em oklch(0.82 0.15 62 / 0.22); font-variant-numeric: tabular-nums lining-nums;
}
:lang(tr) .tally-num { font-size: clamp(60px, 2rem + 6.4vw, 140px); }
.tally-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; font: 500 16px/1.4 var(--font-ui); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.tally-dot { color: var(--ink-3); }
.money-note { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.money .price { margin-top: clamp(20px, 4vh, 36px); font: 500 clamp(24px, 0.9rem + 1.4vw, 34px)/1.15 var(--font-display); letter-spacing: -0.014em; color: var(--alert-bold); }
.money .price span { display: block; margin-top: 6px; font: 500 14px/1.4 var(--font-ui); letter-spacing: 0; color: var(--ink-2); }
.money-stage { position: relative; display: grid; justify-items: center; align-items: center; }
.money-stage .jar { display: none; }
.money-phone { width: min(100%, 300px); }
.money-live { margin-top: 18px; font-size: 15px; color: var(--ink-2); text-align: center; }
.js .money-grid { height: 100%; }
.js .money-stage.has-jar .jar { display: block; width: min(100%, 660px, 68vh); aspect-ratio: 4 / 5; opacity: 0; transition: opacity 0.6s; }
/* full once the count lands, a beat held, then gone before the phone reaches it (a filter, so the fade-in's transition
   never lags the scroll) */
.js .money-stage.has-jar .jar.ready { opacity: 1; --j: clamp(0, (var(--p) - 0.68) * 12.5, 1); filter: opacity(calc(1 - var(--j))); transform: scale(calc(1 - var(--j) * 0.1)); }
.js .money-stage.has-jar .money-phone, .js .money-stage.has-jar .money-live { position: absolute; }
.js .money-stage.has-jar .money-phone {
  width: min(100%, 290px, 33vh); --k: clamp(0, (var(--p) - 0.7) * 5, 1);
  opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 22vh)) rotate(calc((1 - var(--k)) * 4deg));
}
.js .money-stage.has-jar .money-live { bottom: -3.2em; opacity: clamp(0, (var(--p) - 0.8) * 8, 1); }
/* no jar: the persona's phone waits, dim, while the count runs and wakes as it lands on the phone's own figures */
.js .money-stage:not(.has-jar) { --k: clamp(0, (var(--p) - 0.5) * 9, 1); }
.js .money-stage:not(.has-jar) .money-phone { opacity: calc(0.28 + 0.72 * var(--k)); transform: translateY(calc((1 - var(--k)) * 18px)) scale(calc(0.965 + 0.035 * var(--k))); }
.js .money-stage:not(.has-jar) .money-live { opacity: var(--k); }
.js .money .money-note, .js .money .price { opacity: clamp(0, (var(--p) - 0.6) * 8, 1); }

/* ── the coach: the chat types itself ── */
.coach-grid { display: grid; gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .coach-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .js .coach-grid { align-items: start; } }
.coach h2 { font-size: clamp(34px, 1.1rem + 2.6vw, 58px); }
.coach .body { max-width: 30em; }
/* the messages: one column; a typing bubble and the message that replaces it share one cell, so every child keeps
   column 1 (an item with a row and no column is placed beside whatever already fills that row) */
.chat-stack { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.chat-stack > * { grid-column: 1; }
.chat-stack > .r2 { grid-row: 2; } .chat-stack > .r3 { grid-row: 3; } .chat-stack > .r4 { grid-row: 4; } .chat-stack > .r5 { grid-row: 5; } .chat-stack > .r6 { grid-row: 6; } .chat-stack > .r7 { grid-row: 7; }
/* under the script the chat is a window that fills from the top like a thread; once full, the newest message keeps to
   its foot and the older ones climb out of the top (year.js) */
.js .chat-window { position: relative; height: min(540px, 64vh); overflow: hidden; }
.js .chat-window.over { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px); mask-image: linear-gradient(180deg, transparent 0, #000 44px); }
.js .chat-stack { position: absolute; left: 0; right: 0; top: 0; padding-top: 4px; transition: transform 0.55s var(--ease); }
/* the card's glass grows with the thread (year.js sets --card-h), so it never stands there empty; the box itself
   keeps its full size, so nothing around it moves */
.js .coach .chat.glass { position: relative; isolation: isolate; background: none; border-color: transparent; box-shadow: none; }
.js .coach .chat.glass::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; z-index: -1; height: calc(var(--card-h, 100%) + 2px);
  background: var(--glass), oklch(0.21 0.016 52 / 0.72); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-card);
  transition: height 0.55s var(--ease);
}
.typing { display: none; }
.js .scene .typing {
  display: flex; gap: 5px; width: fit-content; height: fit-content; align-self: start; padding: 14px 17px; border-radius: 22px; border-bottom-left-radius: 7px;
  background: oklch(0.225 0.03 192 / 0.92); border: 1px solid oklch(0.80 0.125 188 / 0.32);
  --on: min(clamp(0, (var(--p, 0) - var(--t)) * 14, 1), clamp(0, (var(--u) - var(--p, 0)) * 14, 1));
}
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.4; animation: typing 1.1s var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: 0.16s; } .typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.js .chat .fact { --on: clamp(0, (var(--p, 0) - var(--t)) * 12, 1); }
.js .chat .knew { transform: none; }
.js .coach-says mark { transition: text-shadow 0.4s; }
.js .coach-says mark.f-m { text-shadow: 0 0 calc(clamp(0, (var(--p, 0) - 0.68) * 12, 1) * 18px) oklch(0.80 0.130 62 / 0.55); }
.js .coach-says mark.f-h { text-shadow: 0 0 calc(clamp(0, (var(--p, 0) - 0.74) * 12, 1) * 18px) oklch(0.80 0.125 188 / 0.55); }
.js .coach-says mark.f-r { text-shadow: 0 0 calc(clamp(0, (var(--p, 0) - 0.80) * 12, 1) * 18px) oklch(0.85 0.09 90 / 0.55); }

/* ── the plan: a week of logs on a 24-hour ring, three hard moments, then the written plan ── */
.plan-grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .plan-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.plan h2 { font-size: clamp(34px, 1.1rem + 2.6vw, 58px); }
.plan-steps { margin-top: clamp(20px, 3.5vh, 36px); display: grid; gap: 14px; counter-reset: step; }
.plan-steps li { position: relative; padding-left: 40px; font: 400 clamp(18px, 0.9rem + 0.35vw, 21px)/1.45 var(--font-display); color: var(--ink-0); }
.plan-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0.1em; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--font-ui); color: var(--accent); border: 1px solid var(--accent-line); }
.plan-stage { position: relative; display: grid; justify-items: center; gap: 24px; }
.ring { width: min(100%, 600px); height: auto; overflow: visible; }
.ring-track { fill: none; stroke: var(--line-1); stroke-width: 46; }
.ring .hour { fill: var(--ink-3); font: 600 13px/1 var(--font-ui); letter-spacing: 0.06em; text-anchor: middle; }
.ring .dot { fill: var(--accent); opacity: 0.85; }
.ring .cluster path { fill: none; stroke: var(--alert-bold); stroke-width: 4; stroke-linecap: round; }
.ring .cluster text { fill: var(--ink-0); font: 500 17px/1 var(--font-display); }
.ring-center { fill: var(--ink-1); font: 500 15px/1 var(--font-ui); text-anchor: middle; }
.tactics-stack { display: grid; gap: 12px; width: min(100%, 460px); }
.js .plan-stage { width: 100%; height: min(78vh, 640px); }
/* --rx --ry --rs --ro: where the ring goes when the cards arrive, measured by year.js (plan) */
.js .ring { position: absolute; left: 50%; top: 50%; width: min(100%, 600px, 74vh); --k: clamp(0, (var(--p) - 0.6) * 6, 1);
  transform: translate(calc(-50% + var(--k) * var(--rx, 0) * 1px), calc(-50% + var(--k) * var(--ry, 0) * 1px)) scale(calc(1 - var(--k) * (1 - var(--rs, 0.54))));
  opacity: calc(1 - var(--k) * (1 - var(--ro, 1))); }
/* the cards name the three moments, so the ring's own labels step back as they arrive */
.js .ring .cluster text { opacity: calc(1 - var(--k)); }
.js .ring .dot { --on: clamp(0, (var(--p, 0) - var(--t)) * 40, 1); opacity: calc(var(--on) * 0.85); transform: none; transform-box: fill-box; transform-origin: center; }
.js .ring .cluster { transform: none; }
.js .ring .cluster path { stroke-dasharray: 200; stroke-dashoffset: calc(200 - var(--on) * 200); }
.js .ring-center { opacity: calc(clamp(0, (var(--p) - 0.3) * 8, 1) * (1 - clamp(0, (var(--p) - 0.6) * 8, 1))); }
.js .tactics-stack { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(62%, 440px); }
.js .tactics-stack .tactic { transform: translateX(calc((1 - var(--on)) * 48px)); }
@media (max-width: 899px) {
  .js .plan-grid { align-content: center; gap: 12px; }
  .js .plan-steps li { display: none; }
  .js .plan-steps li:nth-child(1) { display: block; opacity: calc(1 - clamp(0, (var(--p) - 0.4) * 12, 1)); }
  .js .plan-steps li:nth-child(2) { display: block; position: absolute; opacity: calc(clamp(0, (var(--p) - 0.42) * 12, 1) * (1 - clamp(0, (var(--p) - 0.64) * 12, 1))); }
  .js .plan-steps li:nth-child(3) { display: block; position: absolute; }
  .js .plan-steps { position: relative; min-height: 4.5em; }
  .js .plan-stage { height: 58vh; }
  .js .ring { width: min(100%, 58vh); }
  .js .tactics-stack { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; }
  .js .tactics-stack .tactic { padding: 14px 16px; transform: translateY(calc((1 - var(--on)) * 30px)); }
  .js .tactics-stack .tactic-move { font-size: 17px; }
}

/* ── the body: the milestones pass along a line ── */
.recovery .body-head h2 { max-width: 12em; }
.track { margin-top: 48px; display: grid; gap: 22px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .track { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.track li { position: relative; padding-top: 24px; border-top: 1px solid oklch(0.80 0.125 188 / 0.28); }
.track li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px oklch(0.80 0.125 188 / 0.16), 0 0 14px var(--accent-glow); }
.track .tl-when { display: block; font: 500 20px/1.25 var(--font-display); color: var(--accent-bold); }
.track .tl-what { display: block; margin-top: 2px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-1); }
.recovery .source { margin-top: 36px; font: 600 12px/1.5 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.recovery .source span { display: block; margin-top: 4px; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 14px; }
.js .recovery > .pin { align-content: center; gap: 0; }
.js .track-wrap { overflow: visible; padding-left: var(--gut); }
.js .track { display: flex; gap: 0; width: max-content; transform: translateX(calc(var(--p) * var(--shift, 0) * -1px)); }
.js .track li { width: clamp(230px, 26vw, 360px); flex: none; padding: 34px 28px 0 0; border-top-color: var(--line-1); }
.js .track li .tl-when { font-size: clamp(30px, 1.2rem + 2vw, 52px); line-height: 1.05; }
.js .track li .tl-what { font-size: clamp(16px, 0.9rem + 0.3vw, 19px); }
.js .track li::before { opacity: 0.35; transition: opacity 0.3s; }
.js .recovery .track-wrap::after { content: ""; position: absolute; left: 0; height: 2px; width: calc(var(--p) * 100%); margin-top: -1px; background: linear-gradient(90deg, transparent, var(--accent-bold)); box-shadow: 0 0 12px var(--accent-glow); }
.js .track-wrap { position: relative; }

/* ── the medals: one turning in the light, the metal climbing at each edge ── */
.medal-grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .medal-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.medals h2 { font-size: clamp(34px, 1.1rem + 2.6vw, 58px); }
.medals .lede { max-width: 28em; margin-top: 20px; }
.medal-names { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; }
.medal-names li { display: grid; }
.medal-names .medal-metal { font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-1); }
.medal-names .medal-when { margin-top: 3px; font: 500 15px/1.3 var(--font-display); color: var(--ink-2); }
.medal-stage { position: relative; display: grid; place-items: center; }
.medal-stage canvas { display: none; }
.medal-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 18px); width: 100%; }
.medal-row img { width: 100%; height: auto; filter: drop-shadow(0 18px 22px oklch(0 0 0 / 0.5)); }
.js .medal-stage canvas { display: block; width: min(100%, 560px, 64vh); aspect-ratio: 1; opacity: 0; transition: opacity 0.6s; filter: drop-shadow(0 30px 40px oklch(0 0 0 / 0.55)); }
.js .medal-stage canvas.ready { opacity: 1; }
.js .medal-stage canvas + .medal-row { display: none; }
.js .has-seq .medal-names li { opacity: 0.32; transition: opacity 0.35s var(--ease); }
.js .has-seq .medal-names li.on { opacity: 1; }
.js .has-seq .medal-names li.on .medal-metal { color: var(--gold); }

/* ── the garden: a year in one scroll ── */
.garden > .pin { display: grid; gap: 28px; }
.garden-still { display: block; order: 2; }
.garden-still img { width: 100%; height: auto; border-radius: var(--r-lg); }
.garden-seq { display: none; }
.garden-top { text-align: center; }
.garden-top h2 { max-width: 13em; margin-inline: auto; }
.garden-day { display: none; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; order: 3; }
.legend li { font: 500 15px/1.4 var(--font-ui); color: var(--ink-1); }
.legend li::before { content: "·"; margin-right: 10px; color: var(--accent); }
.garden-end { order: 4; text-align: center; font: 500 clamp(30px, 1rem + 2.4vw, 52px)/1.1 var(--font-display); letter-spacing: -0.016em; }
.garden-end em { font-style: italic; color: var(--accent-bold); }
.js .garden > .pin { display: block; }
.js .garden-still { display: none; }
.js .garden-seq { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s; }
.js .garden-seq.ready { opacity: 1; }
.js .garden > .pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, oklch(0.12 0.014 40 / 0.5) 0%, transparent 30%), linear-gradient(0deg, var(--bg-0) 0%, transparent 14%); }
.js .garden-top { position: absolute; left: 0; right: 0; top: clamp(90px, 13vh, 140px); z-index: 2; opacity: calc(1 - clamp(0, (var(--p) - 0.03) * 11, 1)); transform: translateY(calc(clamp(0, (var(--p) - 0.03) * 11, 1) * -6vh)); }
.js .garden-top h2 { text-shadow: 0 2px 24px oklch(0.10 0.02 220 / 0.6); }
.js .garden-day {
  display: block; position: absolute; left: 0; right: 0; top: clamp(84px, 14vh, 150px); z-index: 2; text-align: center;
  font: 500 clamp(64px, 2rem + 8vw, 168px)/1 var(--font-display); letter-spacing: -0.03em; color: oklch(0.96 0.02 80);
  text-shadow: 0 0 0.5em oklch(0.85 0.1 80 / 0.3), 0 2px 30px oklch(0.1 0.02 220 / 0.6); font-variant-numeric: tabular-nums lining-nums;
  opacity: calc(clamp(0, (var(--p) - 0.13) * 10, 1) * (1 - clamp(0, (var(--p) - 0.84) * 22, 1)));
}
.js .legend { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); z-index: 2; justify-content: flex-start; flex-direction: column; gap: 8px; opacity: calc(1 - clamp(0, (var(--p) - 0.84) * 22, 1)); }
.js .legend li { width: fit-content; padding: 8px 14px; border-radius: var(--r-pill); background: oklch(0.16 0.012 50 / 0.55); border: 1px solid oklch(0.92 0.03 66 / 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink-0); opacity: 0; transform: translateX(-12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .legend li.on { opacity: 1; transform: none; }
.js .garden-end { position: absolute; left: 0; right: 0; top: clamp(96px, 17vh, 170px); z-index: 2; padding-inline: var(--gut); font-size: clamp(38px, 1rem + 4.2vw, 92px); letter-spacing: -0.024em; text-shadow: 0 2px 30px oklch(0.12 0.014 40 / 0.7); opacity: clamp(0, (var(--p) - 0.89) * 16, 1); transform: translateY(calc((1 - clamp(0, (var(--p) - 0.89) * 16, 1)) * 18px)); }
@media (max-aspect-ratio: 3/5) { .js .garden-day { top: clamp(72px, 12vh, 120px); } .js .legend { bottom: 22vh; } .js .legend li { font-size: 13.5px; padding: 7px 12px; border-radius: 15px; max-width: calc(100vw - 2 * var(--gut)); } .js .garden-end { top: clamp(80px, 13vh, 130px); } }

/* ── built for iPhone: the widgets lift off the screen ── */
.iphone-grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .iphone-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); } .iphone-grid .iphone-stage { order: -1; } }
.iphone h2 { font-size: clamp(34px, 1.1rem + 2.6vw, 58px); }
.iphone-stage { position: relative; display: grid; justify-items: center; }
.iphone-phone { position: relative; width: min(100%, 300px); }
.iphone-phone .lift { position: absolute; left: 4.64%; width: 90.71%; height: auto; filter: drop-shadow(0 26px 30px oklch(0 0 0 / 0.55)); display: none; }
.iphone-phone .lift-1 { top: 8.24%; } .iphone-phone .lift-2 { top: 30.89%; } .iphone-phone .lift-3 { top: 53.62%; }
/* the screen with its widgets gone, under the lifted ones (media.mjs), so nothing shows twice */
.iphone-phone .bare { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 13.6cqi; }
.js .iphone-phone .bare { display: block; opacity: clamp(0, (var(--p) - 0.17) * 9, 1); }
.js .iphone-phone { width: min(100%, 300px, 36vh); }
.js .iphone-phone .lift { display: block; --l: clamp(0, (var(--p) - 0.18) * 3.2, 1); }
.js .iphone-phone .lift-1 { transform: translate(calc(var(--l) * -34%), calc(var(--l) * -10%)) scale(calc(1 + var(--l) * 0.1)) rotate(calc(var(--l) * -3deg)); }
.js .iphone-phone .lift-2 { --l: clamp(0, (var(--p) - 0.3) * 3.2, 1); transform: translate(calc(var(--l) * 36%), 0) scale(calc(1 + var(--l) * 0.1)) rotate(calc(var(--l) * 2deg)); }
.js .iphone-phone .lift-3 { --l: clamp(0, (var(--p) - 0.42) * 3.2, 1); transform: translate(calc(var(--l) * -30%), calc(var(--l) * 12%)) scale(calc(1 + var(--l) * 0.1)) rotate(calc(var(--l) * -2deg)); }
/* a phone's screen holds the heading, the phone and the four names; the descriptions are the plain page's */
@media (max-width: 899px) {
  .js .iphone-grid { gap: 14px; align-content: center; }
  .js .iphone-phone { width: min(54%, 32vh); }
  .js .features { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
  .js .features div { padding: 6px 12px; border: 1px solid var(--line-1); border-radius: var(--r-pill); }
  .js .features div:last-child { border-bottom: 1px solid var(--line-1); }
  .js .features dt { font: 500 14px/1.3 var(--font-ui); }
  .js .features dd { display: none; }
}

/* ── privacy: what other apps ask for, struck through one by one ── */
.privacy-wrap { max-width: calc(980px + 2 * var(--gut)); }
.strike { display: grid; gap: 0.04em; margin-top: 18px; }
.strike li { font: 500 clamp(48px, 1.6rem + 6vw, 128px)/1.02 var(--font-display); letter-spacing: -0.03em; color: var(--ink-3); }
.strike span { position: relative; display: inline-block; }
.strike span::after { content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: 0.07em; border-radius: 1em; background: var(--alert-bold); box-shadow: 0 0 0.3em oklch(0.82 0.15 62 / 0.35); transform-origin: left center; }
.none { margin-top: 0.3em; font: 500 clamp(48px, 1.6rem + 6vw, 128px)/1.02 var(--font-display); letter-spacing: -0.03em; }
.none em { font-style: italic; color: var(--accent-bold); }
.privacy .body { max-width: 40em; margin-top: 30px; }
.js .privacy-wrap { align-self: center; }
.js .scene .strike li { opacity: 1; transform: none; color: oklch(0.958 0.012 78 / calc(1 - var(--on) * 0.62)); }
.js .strike span::after { transform: scaleX(var(--on)); }
.js .privacy .body { opacity: clamp(0, (var(--p) - 0.8) * 8, 1); }

/* ── phones: chapters shorter (a thumb moves faster than a wheel), stages sized to the screen ── */
@media (max-width: 899px) {
  .js .money { --len: 2.5 !important; }
  .js .money-grid { align-content: center; gap: 8px; }
  .js .money .tally { margin-top: 10px; }
  .js .money-stage.has-jar .jar { width: min(92%, 46vh); }
  .js .money-stage.has-jar .money-phone { width: min(50%, 28vh); }
  .js .money-stage:not(.has-jar) .money-phone { width: min(46%, 26vh); }
  .js .money-live { display: none; }
  .js .money .price { margin-top: 10px; font-size: 22px; }
  .js .coach-grid { align-content: center; gap: 14px; }
  .js .coach .body, .js .coach .meet { display: none; }
  .js .coach .chat { padding: 16px; gap: 8px; }
  .js .coach .msg.coach-says { font-size: 16.5px; }
  .js .coach .knew { margin-top: 6px; padding-top: 12px; }
  .js .coach .method { font-size: 17px; margin-top: 8px; }
  .js .medal-grid { align-content: center; gap: 10px; }
  .js .medals .lede { display: none; }
  .js .medal-names { margin-top: 14px; }
  .js .medal-stage canvas { width: min(84%, 44vh); }
}
/* a short phone (SE-sized): the home screen gives way to the figures */
@media (max-width: 899px) and (max-height: 720px) {
  .js .money-stage:not(.has-jar) .money-phone { width: min(40%, 21vh); }
  .js .money .price { font-size: 20px; }
}
/* a narrow phone: the five metals keep one row */
@media (max-width: 400px) {
  .medal-names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .medal-names .medal-metal { font-size: 10px; letter-spacing: 0.04em; }
  .medal-names .medal-when { font-size: 13px; }
}

/* ── the phone's stage (year/theater.mjs, theater.js): one rendered iPhone pinned behind the money and coach chapters.
   It shows only once theater.js has it running (.theater-on); without it each chapter reads whole on its own ── */
.stage { display: none; }
/* the chapters ride up over the stage (a negative top margin, not the stage's bottom one: a sticky box is held by its
   margin box, so the stage leaves exactly as the coach chapter does) */
.theater-on .stage { display: block; position: sticky; top: 0; height: 100lvh; overflow: hidden; pointer-events: none; z-index: 0; }
.theater-on .chapters { position: relative; z-index: 1; margin-top: -100lvh; }
/* the stage light follows the phone, so the chapters' own glows step aside */
.theater-on .money > .pin::before, .theater-on .coach > .pin::before, .theater-on .iphone > .pin::before { display: none; }
.halo { position: absolute; inset: 0; width: 100%; height: 100%; }
.rig {
  --rig-h: min(94lvh, 1180px);
  position: absolute; left: 50%; top: 50%; height: var(--rig-h); width: calc(var(--rig-h) * 0.5625);
  margin-left: calc(var(--rig-h) * -0.28125); margin-top: calc(var(--rig-h) * -0.5); opacity: 0; will-change: transform, opacity;
}
.phone-seq { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the app's screen, 402 × 874 points, laid into the glass by a projective matrix per frame (theater.js) */
.scr {
  position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform-origin: 0 0; border-radius: 56px; overflow: hidden;
  background: #000; visibility: hidden; backface-visibility: hidden;
}
.scr.on { visibility: visible; }
.scr .s { position: absolute; inset: 0; width: 402px; height: 874px; opacity: 0; }
.scr .s > img, .scr img.s { display: block; width: 402px; height: 874px; max-width: none; }
.scr-sheen {
  position: absolute; inset: -10% -60%; pointer-events: none; will-change: transform;
  background: linear-gradient(112deg, transparent 38%, oklch(1 0 0 / 0.07) 47%, oklch(1 0 0 / 0.02) 53%, transparent 60%);
}
.scr-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* the coach screen's words, the app's own strings where its capture had them (phone.mjs paints them out), in its type */
.s-coach { color: #d6cdc2; font-family: var(--font-ui); }
.pc-head { position: absolute; left: 16px; top: 74px; margin: 0; display: grid; gap: 6px; font: 600 10px/10px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #9a9189; }
.pc-exit { position: absolute; left: 0; right: 0; top: 657px; margin: 0; text-align: center; font: 500 13px/1 var(--font-ui); color: #3fd7cd; }
.pc-tap { position: absolute; left: 16px; top: 695px; margin: 0; font: 600 10px/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #8a8179; }
.pc-chips { position: absolute; left: 16px; right: 0; top: 714px; margin: 0; display: flex; gap: 8px; overflow: hidden; white-space: nowrap; }
.pc-chips span { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 22px; background: #241b16; font: 400 15.5px/1 var(--font-ui); color: #d6cdc2; }
.pc-input { position: absolute; left: 33px; top: 786px; margin: 0; font: 400 16px/1.2 var(--font-ui); color: #6f6761; }
/* the chat, typed as the scroll goes (bubbles sampled from the app: #1c302a on #160f0b, a 1pt #395955 line) */
.pchat { position: absolute; left: 16px; right: 16px; top: 132px; display: flex; flex-direction: column; gap: 14px; }
.pmsg { margin: 0; opacity: 0; will-change: transform, opacity; }
.pmsg.me {
  align-self: flex-end; max-width: 80%; padding: 11px 16px 12px; border-radius: 15px 15px 5px 15px;
  background: #241b16; border: 1px solid #33291f; color: #c9c0b5; font: 400 15.5px/1.35 var(--font-ui);
}
.pmsg.ai {
  align-self: flex-start; width: 318px; max-width: 86%; padding: 14px 17px 16px; border-radius: 15px 15px 15px 5px;
  background: #1c302a; border: 1px solid #395955; color: #f3ede4; font: 500 18.5px/1.3 var(--font-display); letter-spacing: -0.004em;
}
.pmsg.typing { align-self: flex-start; display: flex; gap: 6px; padding: 15px 17px; border-radius: 15px 15px 15px 5px; background: #1c302a; border: 1px solid #395955; }
.pmsg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #7fd8cd; opacity: 0.35; animation: tdot 1.1s ease-in-out infinite; }
.pmsg.typing i:nth-child(2) { animation-delay: 0.16s; }
.pmsg.typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes tdot { 0%, 100% { opacity: 0.3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
.pmsg mark { background: none; color: inherit; font-style: italic; transition: color 0.5s var(--ease), text-shadow 0.5s var(--ease); }
.pmsg mark.on.f-m { color: var(--alert-bold); }
.pmsg mark.on.f-h { color: var(--accent-bold); }
.pmsg mark.on.f-r { color: #fff7ea; text-shadow: 0 0 18px oklch(1 0 0 / 0.35); }

/* ── the chapters around the phone (theater.js sets --tu, the stage's time: 0–1 money, 1–2 the swing, 2–3 coach) ── */
.phone-slot { display: none; }
.theater-on .money-stage .money-phone, .theater-on .money-stage .money-live, .theater-on .coach .chat { display: none; }
/* the words leave as the phone swings, and the next chapter's arrive once it has crossed */
.theater-on .money-copy { opacity: calc(1 - clamp(0, (var(--tu, 0) - 1.04) * 4, 1)); }
.theater-on .coach-copy { opacity: clamp(0, (var(--tu, 0) - 1.5) * 3.2, 1); }
.theater-on .coach .meet { margin-top: 26px; }
.theater-on .coach .knew { margin-top: 26px; padding-top: 22px; }
.theater-on .coach .knew .fact dd { font: 500 clamp(19px, 0.8rem + 0.7vw, 24px)/1.2 var(--font-display); letter-spacing: -0.01em; }
.theater-on .coach .method { margin-top: 18px; font: 500 clamp(19px, 0.8rem + 0.7vw, 24px)/1.25 var(--font-display); }
@media (min-width: 900px) {
  .theater-on .coach-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
  .theater-on .coach .phone-slot { display: block; order: -1; height: 60vh; }
}
/* a phone: each chapter's words hold the top band and the phone rises beneath them */
@media (max-width: 899px) {
  .rig { --rig-h: 88lvh; }
  .theater-on .stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
    background: linear-gradient(to bottom, oklch(0.165 0.012 50 / 0), var(--bg-0) 92%);
  }
  .theater-on .money-grid, .theater-on .coach-grid { height: 100%; align-content: start; padding-top: 7lvh; }
  /* the coach's words arrive in their band, not on their way up across the phone */
  .theater-on .coach-copy { opacity: clamp(0, (var(--tu, 0) - 1.86) * 7, 1); }
  .theater-on .money-stage { min-height: 46lvh; }
  /* the coach's band: the heading first, then the three things it knew in its place */
  .theater-on .coach-copy { display: grid; }
  .theater-on .coach-copy > * { grid-column: 1; }
  .theater-on .coach-copy > .eyebrow, .theater-on .coach-copy > h2 { grid-row: 1; }
  .theater-on .coach-copy > .eyebrow { align-self: start; }
  .theater-on .coach-copy > h2 { margin-top: 26px; }
  .theater-on .coach-copy > .eyebrow, .theater-on .coach-copy > h2 { opacity: calc(1 - clamp(0, (var(--p, 0) - 0.48) * 12, 1)); }
  .theater-on .coach .knew { grid-row: 1; margin-top: 0; padding-top: 0; border-top: 0; align-self: start; }
  .theater-on .coach .knew dl { gap: 6px; }
  .theater-on .coach .knew .fact { font-size: 14px; }
  .theater-on .coach .knew .fact dd { font-size: 18px; }
  .theater-on .coach .method { margin-top: 8px; font-size: 17px; }
}

/* "Built for iPhone": the rendered phone takes the flat one's place, on the left of the features */
.theater-on .iphone .iphone-stage { display: none; }
@media (min-width: 900px) { .theater-on .iphone .phone-slot { display: block; order: -1; height: 60vh; } }
@media (max-width: 899px) { .theater-on .iphone-grid { height: 100%; align-content: start; padding-top: 7lvh; } }