/* ==========================================================================
   Juggler: Floodlight
   Night training under a floodlight. The page is a dark pitch; the only
   luminous things are the brand's neon (the logo bars, the ball and its
   trail, the counting moment). Everything else is cream type on graphite.
   ========================================================================== */

@font-face { font-family: "Montserrat"; src: url("assets/fonts/Montserrat-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("assets/fonts/Figtree-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("assets/fonts/Figtree-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Ground: a night pitch. Graphite with the faintest cool turf in it, never purple. */
  --night:   #0A0C0C;
  --night-2: #111414;   /* the one raised surface (FAQ rows, legal summary) */
  --night-3: #181C1C;
  --light:   255 239 214; /* floodlight: warm white, used only as low-alpha light */

  /* Type: warm cream */
  --cream:   #F3EADB;   /* headings, numerals, primary button */
  --cream-2: #C9C2B6;   /* body (11.6:1) */
  --cream-3: #8D877F;   /* captions and meta (5.4:1) */
  --line:    rgb(243 234 219 / .09);
  --line-2:  rgb(243 234 219 / .2);

  /* The one quiet accent: mint, tiny details only */
  --mint: #A8E6C9;

  /* The glow: logo bars, ball trail, the counting moment. Never a fill. */
  --sky: #39E4F2; --amber: #FFB547; --flame: #FF2E88; --paper: #F7F3FA;

  --display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --text: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --t-cap:  0.8125rem;                                  /* 13 */
  --t-sm:   0.9375rem;                                  /* 15 */
  --t-base: 1.0625rem;                                  /* 17 */
  --t-lead: clamp(1.0625rem, 0.97rem + 0.4vw, 1.25rem); /* 17 to 20 */
  --t-h3:   1.1875rem;                                  /* 19 */
  --t-h2:   clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem);   /* 30 to 44 */
  --t-h1:   clamp(1.95rem, 1.45rem + 2.6vw, 3.375rem);  /* 31 to 54 */
  --t-rec:  clamp(2.25rem, 1.6rem + 2vw, 3.25rem);      /* 36 to 52 */
  --t-count: clamp(7rem, 4rem + 9vw, 12rem);           /* 112 to 192: the spoken count, the one big number */

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --section: clamp(96px, 7vw + 48px, 168px);
  --gutter: clamp(16px, 5vw, 56px);
  --measure: 34rem;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-draw: cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--night); color-scheme: dark; }
body {
  margin: 0; background: var(--night); color: var(--cream-2);
  font: 400 var(--t-base)/1.6 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; position: relative;
}
/* Film grain: keeps the dark gradients from banding */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045;
  background-image: url("assets/grain.svg");
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; color: var(--cream); margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
strong { color: var(--cream); font-weight: 600; }
::selection { background: rgb(168 230 201 / .28); color: var(--cream); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 120; transform: translateY(-160%);
  background: var(--cream); color: var(--night); padding: var(--s-2) var(--s-4); border-radius: 999px; font-weight: 600; text-decoration: none;
}
.skip:focus { transform: none; }

/* Links and buttons */
.link {
  color: var(--cream); text-decoration: underline; text-decoration-color: var(--line-2);
  text-underline-offset: .28em; text-decoration-thickness: 1px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  background: var(--cream); color: #141716;
  font: 600 var(--t-base)/1 var(--text); letter-spacing: -0.005em; text-decoration: none;
}
.press { transition: transform 160ms var(--ease-out); }
.press:active { transform: scale(0.97); }
.caption { font-size: var(--t-cap); color: var(--cream-3); letter-spacing: .01em; }

@media (hover: hover) and (pointer: fine) {
  .link { transition: text-decoration-color 200ms var(--ease-out); }
  .link:hover { text-decoration-color: var(--mint); }
  .btn { transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out); }
  .btn:hover { background-color: #FFF8EC; }
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgb(10 12 12 / .78); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  transition: opacity 300ms var(--ease-out);
}
.nav.is-scrolled::before { opacity: 1; }
.nav-row { display: flex; align-items: center; gap: var(--s-6); height: 72px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--cream); text-decoration: none; font: 800 1.125rem/1 var(--display); letter-spacing: -0.02em;
}
.brand .mark-live { position: relative; display: block; flex: none; width: 36px; aspect-ratio: 876 / 713; }
.mark-live > * { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the one-colour mark (brand/slant mark-mono.svg) as a mask over currentColor: one cached file, tintable */
.ml-base, .mark-mono {
  display: block; background: currentColor;
  -webkit-mask: url("assets/brand/mark-mono.svg") center / contain no-repeat; mask: url("assets/brand/mark-mono.svg") center / contain no-repeat;
}
.ml-base { color: var(--cream); }
/* the colour layer waits, clipped to nothing, left of the mark; site.js sweeps it across now and then */
.ml-hue { clip-path: polygon(51% 0%, 51% 0%, 26% 100%, 26% 100%); max-width: none; }
.nav-links { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: var(--t-sm); color: var(--cream-2); text-decoration: none; }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--cream); text-decoration: none; font: 600 var(--t-sm)/1 var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a { transition: color 200ms var(--ease-out); }
  .nav-links a:hover { color: var(--cream); }
  .nav-cta { transition: transform 160ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out); }
  .nav-cta:hover { border-color: rgb(243 234 219 / .42); background-color: rgb(243 234 219 / .04); }
}

/* --------------------------------------------------------------------------
   Hero: the floodlight
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; text-align: center; padding: clamp(104px, 6vw + 64px, 136px) 0 clamp(72px, 6vw, 112px); }
.hero-light {
  position: absolute; inset: 0 0 -10%; z-index: -1; pointer-events: none; overflow: hidden;
  /* the light dies away into the pitch instead of stopping at the box edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
/* The pool: warm light falling on the pitch around the mark */
.pool {
  position: absolute; left: 50%; top: clamp(60px, 4vw + 40px, 110px); width: min(1300px, 190vw); aspect-ratio: 1.45;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgb(var(--light) / .12), rgb(var(--light) / .07) 30%, rgb(var(--light) / .025) 62%, transparent 100%);
}
/* The beam: from a mast above, raked at 18 degrees, the logo's slant. The shape is cut on the inside,
   the blur sits on the outside, so the edges stay soft. */
.beam {
  position: absolute; left: 50%; top: -34%; width: min(1000px, 150vw); height: 125%;
  transform: translateX(-60%) rotate(-18deg); transform-origin: 50% 0;
  filter: blur(36px);
}
.beam::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(var(--light) / .17), rgb(var(--light) / .06) 50%, transparent 90%);
  clip-path: polygon(45% 0, 55% 0, 92% 100%, 8% 100%);
}
.stage { position: relative; width: clamp(220px, 24vw, 340px); margin: 0 auto clamp(32px, 3vw, 48px); }
.film { width: 100%; height: auto; overflow: visible; position: relative; z-index: 1; transition: opacity 150ms var(--ease-out), filter 150ms var(--ease-out); }
.stage.is-rewinding .film { opacity: 0; filter: blur(2px); }
/* Rest glow: the bars give off a little light once the mark has landed */
.stage-glow {
  position: absolute; z-index: 0; left: 50%; top: 4%; width: 52%; height: 92%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 46 136 / .34), rgb(255 181 71 / .12) 60%, transparent);
  filter: blur(28px); opacity: 0;
  transition: opacity 1600ms var(--ease-out);
}
.hero.is-settled .stage-glow, .no-js .stage-glow { opacity: 1; }
.film-again {
  position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.film-again span {
  position: absolute; left: 50%; bottom: -28px; transform: translate(-50%, 4px); white-space: nowrap;
  font-size: var(--t-cap); color: var(--cream-3); opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.film-again:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
  .film-again:hover span { opacity: 1; transform: translate(-50%, 0); }
}
.hero-copy { position: relative; z-index: 3; }
.hero h1 { font-size: var(--t-h1); line-height: 1.04; max-width: 11em; margin-inline: auto; }
.hero .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--cream-2); max-width: 42rem; margin: var(--s-5) auto 0; text-wrap: balance; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--s-6); margin-top: var(--s-6); flex-wrap: wrap; }
.hero-actions .link { font-weight: 600; }
.avail { margin-top: var(--s-5); display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-cap); color: var(--cream-3); letter-spacing: .01em; }
.avail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgb(168 230 201 / .12); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section); position: relative; }
.section h2 { font-size: var(--t-h2); line-height: 1.08; }
.prose { margin-top: var(--s-5); max-width: var(--measure); }
.prose p + p { margin-top: var(--s-4); }

/* Phones: an illustrated iPhone 17 Pro, screen inline */
.phone { position: relative; width: 100%; }
.phone-svg { width: 100%; height: auto; position: relative; z-index: 1; }
/* contact shadow and a little floodlight on the ground under the phone (no filter on the phone itself) */
.phone::before {
  content: ""; position: absolute; left: 50%; bottom: -5%; width: 120%; height: 16%; transform: translateX(-50%); z-index: 0;
  background: radial-gradient(closest-side, rgb(var(--light) / .07), transparent);
}
.phone::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -1.5%; height: 5%; z-index: 0;
  background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent); filter: blur(6px);
}
.jg-num { font-variant-numeric: tabular-nums; }

/* The count ----------------------------------------------------------------- */
.count-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.count-copy h2 { max-width: 11em; }
.count-fig { margin: 0; }
.count-stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.count-stage::before { /* the floodlight the phone is filming under */
  content: ""; position: absolute; left: -12%; top: -14%; width: 80%; height: 128%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--light) / .06), transparent);
}
.phone-live { width: clamp(220px, 21vw, 300px); }
/* The readout: the number it says, big, beside the phone. The neon glow is a blurred copy that pulses on each count. */
.readout { min-width: 0; }
.numeral-wrap { position: relative; display: block; width: max-content; }
.numeral, .numeral-glow { display: block; font: 800 var(--t-count)/.86 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.numeral { position: relative; color: var(--cream); }
.numeral-glow {
  position: absolute; inset: 0; pointer-events: none; color: transparent;
  background: linear-gradient(100deg, var(--amber), var(--flame) 70%); -webkit-background-clip: text; background-clip: text;
  filter: blur(22px); opacity: .22;
}
.said-line { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; margin-top: var(--s-5); font: 600 1.25rem/1 var(--text); color: var(--cream-2); letter-spacing: -0.01em; }
.said-word { display: inline-block; transition: opacity 200ms var(--ease-out); }
.readout.is-quiet .said-word { opacity: .4; }
.voice { display: inline-flex; align-items: center; gap: 3px; height: 16px; flex: none; }
.voice i { display: block; width: 3px; height: 16px; border-radius: 2px; background: var(--mint); transform: scaleY(.3); transition: transform 180ms var(--ease-out); }
.readout.is-speaking .voice i:nth-child(1) { transform: scaleY(.55); }
.readout.is-speaking .voice i:nth-child(2) { transform: scaleY(1); }
.readout.is-speaking .voice i:nth-child(3) { transform: scaleY(.7); }
.readout.is-speaking .voice i:nth-child(4) { transform: scaleY(.4); }
.count-fig .caption { margin-top: var(--s-7); }

/* live.svg hooks */
.jg-ladder .jg-tick { fill: #705480; }
.jg-ladder .jg-tick.is-on { fill: #F7F3FA; }
.phone-live.is-running .jg-grain { opacity: 0; }
/* once the loop has run, the designed still trail gives way to the live one (built in site.js) */
.phone-live.has-run .jg-trail-seg { opacity: 0; }
.phone-live .jg-contact, .phone-replay .jg-contact { transform-box: fill-box; transform-origin: center; }

/* A session ----------------------------------------------------------------- */
.steps-wrap { position: relative; margin-top: var(--s-8); --gap: var(--s-6); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.step-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--night); border: 1px solid var(--line-2); margin-bottom: var(--s-5);
  font: 600 var(--t-cap)/1 var(--text); color: var(--mint); font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
.step p { margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.6; max-width: 17rem; }
/* the run: one trail from the first step to the last, drawn once on reveal */
.run { position: absolute; left: 17px; top: 17px; height: 2px; width: calc((100% + var(--gap)) * .75); pointer-events: none; }
.run::before { content: ""; position: absolute; inset: 0; top: .5px; height: 1px; background: var(--line-2); }
.run-line {
  position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), var(--amber) 55%, var(--flame));
  box-shadow: 0 0 10px rgb(255 46 136 / .35);
}

.modes { margin-top: clamp(96px, 8vw, 144px); }
.modes-title { font-size: var(--t-h3); letter-spacing: -0.015em; }
.mode-list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.mode { border-top: 1px solid var(--line-2); padding-top: var(--s-5); }
.mode h4 { font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }
.mode .spec { margin-top: var(--s-3); color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
.mode p:last-child { margin-top: var(--s-2); font-size: var(--t-sm); max-width: 19rem; }

/* Afterwards ------------------------------------------------------------------ */
.after-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.after-phones { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 44px); max-width: 640px; }
.after-fig { margin: 0; }
.after-fig-2 { margin-top: clamp(32px, 6vw, 88px); }
.after-fig .caption { margin-top: var(--s-5); text-align: center; }
.after-copy h2 { max-width: 9em; }

/* after.svg / replay.svg hooks: only hidden when the page can play them in */
.jg-bar { transform-box: fill-box; transform-origin: 50% 100%; }

.records { margin-top: clamp(96px, 8vw, 144px); }
.records-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4) var(--s-6); flex-wrap: wrap; }
.records-head h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }
.record-list { margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.record { border-top: 1px solid var(--line-2); padding-top: var(--s-5); }
.record dt { font-weight: 600; color: var(--cream); font-size: var(--t-sm); }
.record dd { margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.record-n { font: 800 var(--t-rec)/1 var(--display); color: var(--cream); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.record-note { font-size: var(--t-sm); color: var(--cream-3); }

/* Privacy: type only ------------------------------------------------------------ */
.privacy-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
.privacy h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); line-height: 1.02; max-width: 7em; }
.privacy h2::after { content: ""; display: block; width: 56px; height: 2px; margin-top: var(--s-6); background: var(--cream); opacity: .5; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { padding-block: var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-lead); line-height: 1.6; }
.ledger li:first-child { border-top: 0; padding-top: 0; }
.privacy .more { margin-top: var(--s-6); }

/* Beta ------------------------------------------------------------------------- */
.beta { text-align: center; }
.beta-mark { width: 96px; height: auto; margin: 0 auto var(--s-6); }
.beta p.body { max-width: 30rem; margin: var(--s-5) auto 0; font-size: var(--t-lead); }
.beta-btn { position: relative; margin-top: var(--s-7); display: inline-block; isolation: isolate; }
.beta-btn::before {
  content: ""; position: absolute; inset: -4px -12px; z-index: -1; border-radius: 999px;
  background: linear-gradient(90deg, var(--sky), var(--amber) 50%, var(--flame));
  filter: blur(24px); opacity: .3;
}
.beta .caption { margin-top: var(--s-5); text-wrap: balance; }

/* FAQ --------------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.faq-head .caption { margin-top: var(--s-4); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: 22px 0; font: 600 1.125rem/1.35 var(--text); color: var(--cream); -webkit-tap-highlight-color: transparent;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 14px; height: 14px; opacity: .7;
  background:
    linear-gradient(var(--cream), var(--cream)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--cream), var(--cream)) center / 1.5px 14px no-repeat;
  transition: transform 220ms var(--ease-out);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:focus-visible { outline-offset: 4px; }
.answer { padding: 0 var(--s-7) 24px 0; max-width: 40rem; }
.faq-list details[open] .answer { animation: answer-in 260ms var(--ease-out); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine) {
  .faq-list summary::after { transition: transform 220ms var(--ease-out), opacity 200ms var(--ease-out); }
  .faq-list summary:hover::after { opacity: 1; }
}

/* Footer ---------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-7); font-size: var(--t-sm); color: var(--cream-3); }
.foot-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6) var(--s-8); align-items: start; }
.brand-foot { color: var(--cream-2); font-size: 1rem; }
.brand-foot .mark-mono { flex: none; width: 30px; aspect-ratio: 876 / 713; color: #7F7973; }
.foot-made { margin-top: var(--s-3); }
.foot-links { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.foot-links a { color: var(--cream-2); text-decoration: none; text-underline-offset: .25em; }
@media (hover: hover) and (pointer: fine) {
  .foot-links a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--mint); }
}
.foot-base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: var(--t-cap); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Motion. Hidden start states only apply when site.js is running (html.js),
   so without JavaScript everything is simply there.
   -------------------------------------------------------------------------- */
/* Page load: the copy enters with the mark, blur to sharp and a short rise (the only blurred entrance on the page).
   intro-safe: if the script stops before it can show the copy, the copy appears anyway after 4 s. */
.js .intro { opacity: 0; transform: translateY(14px); filter: blur(6px); animation: intro-safe 1ms 4s forwards; }
.js .intro.is-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out), filter 600ms var(--ease-out);
}
.js .nav { opacity: 0; animation: intro-safe 1ms 4s forwards; }
.js .nav.is-in { opacity: 1; transition: opacity 600ms var(--ease-out); }
.js .hero-light { opacity: 0; animation: intro-safe 1ms 4s forwards; }
.js .hero-light.is-on { opacity: 1; transition: opacity 1400ms var(--ease-out); }
@keyframes intro-safe { to { opacity: 1; transform: none; filter: none; } }

/* Scroll: text fades up into place once, in groups (heading, then its body). No blur below the hero. */
.js .reveal { opacity: 0; transform: translateY(10px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
/* the steps only fade, so their markers stay on the run line while it draws */
.js .steps.reveal { transform: none; }

/* Phones: the screen wakes from the bottom edge up. The clip sits on the drawing and follows the frame's
   corner (77 on 438 x 904), so it ends exactly on the phone's outline; the shadows only fade. */
.js .reveal-fig { opacity: 0; transform: translateY(24px); }
.js .reveal-fig > .phone-svg { clip-path: inset(18% 0 0 0 round 17.6% / 8.5%); }
.js .reveal-fig.is-in {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal-fig.is-in > .phone-svg {
  clip-path: inset(0 round 17.6% / 8.5%);
  transition: clip-path 800ms var(--ease-out); transition-delay: var(--d, 0ms);
}

/* The session run draws from step 1 to step 4 at a steady speed (linear), so it reaches step k at 150 + 500k ms,
   exactly when site.js lights that marker. */
.js .run-line { clip-path: inset(0 100% 0 0); }
.js .run.is-in .run-line { clip-path: inset(0 0 0 0); transition: clip-path 1500ms linear 150ms; }
.step-n::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--mint); box-shadow: 0 0 12px rgb(168 230 201 / .25);
  opacity: 0; transform: scale(.96);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.no-js .step-n::after, .step-n.is-lit::after { opacity: .8; transform: none; }

/* after.svg: the sheet comes up over the dimmed camera, the bars grow (starts once the phone has woken) */
.js .phone-after .jg-dim { opacity: 0; }
.js .phone-after .jg-sheet { opacity: 0; transform: translateY(24px); }
.js .phone-after .jg-bar { transform: scaleY(0); }
.js .phone-after .jg-recline { opacity: 0; }
.js .phone-after.is-played .jg-dim { opacity: 1; transition: opacity 600ms var(--ease-out); }
.js .phone-after.is-played .jg-sheet { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out) 100ms, transform 700ms var(--ease-out) 100ms; }
.js .phone-after.is-played .jg-bar { transform: none; transition: transform 600ms var(--ease-out); transition-delay: var(--d, 450ms); }
.js .phone-after.is-played .jg-recline { opacity: 1; transition: opacity 400ms var(--ease-out) 1000ms; }

/* replay.svg: the height trace draws like a pen (linear); each touch, the playhead and the amber tick appear as the
   line reaches them (delays measured along the path in site.js); then the leader grows up from the tick and the
   question opens upward out of it. */
.jg-ask-leader { transform-box: fill-box; transform-origin: 50% 100%; }
.js .phone-replay .jg-height, .js .phone-replay .jg-height-ahead { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .phone-replay .jg-touch, .js .phone-replay .jg-checktick, .js .phone-replay .jg-playhead { opacity: 0; }
.js .phone-replay .jg-ask-leader { transform: scaleY(0); }
.js .phone-replay .jg-ask-card { clip-path: inset(100% 0 0 0); }
.js .phone-replay.is-played .jg-height,
.js .phone-replay.is-played .jg-height-ahead { stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms linear 350ms; }
.js .phone-replay.is-played .jg-touch,
.js .phone-replay.is-played .jg-playhead,
.js .phone-replay.is-played .jg-checktick { opacity: 1; transition: opacity 250ms var(--ease-out); transition-delay: var(--d, 600ms); }
.js .phone-replay.is-played .jg-ask-leader { transform: none; transition: transform 200ms var(--ease-out) 2200ms; }
.js .phone-replay.is-played .jg-ask-card { clip-path: inset(0 0 0 0); transition: clip-path 300ms var(--ease-out) 2400ms; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .after-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .after-phones { max-width: 600px; margin-inline: auto; width: 100%; }
  .after-copy { max-width: var(--measure); order: -1; } /* single column: the heading leads, as in the count */
}
@media (max-width: 960px) {
  .count-grid, .privacy-grid, .faq-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-8); }
  .run { display: none; }
  .record-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .mode-list { grid-template-columns: 1fr; gap: var(--s-5); }
  .count-stage { gap: clamp(14px, 4vw, 24px); }
  .phone-live { width: min(52vw, 230px); }
  .numeral, .numeral-glow { font-size: clamp(4.5rem, 21vw, 7rem); }
  .numeral-glow { filter: blur(16px); }
  .said-line { margin-top: var(--s-4); font-size: 1rem; gap: var(--s-2); }
  .count-fig .caption { margin-top: var(--s-6); }
  /* Afterwards: the two phones become a row you swipe, each big enough to read, snapping to centre */
  .after-phones {
    display: flex; gap: 16px; width: auto; max-width: none; margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 28px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .after-phones::-webkit-scrollbar { display: none; }
  .after-phones:focus-visible { outline-offset: -2px; border-radius: 0; }
  .after-fig { flex: none; width: min(78vw, 300px); scroll-snap-align: center; }
  .after-fig-2 { margin-top: 0; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .nav-row { gap: var(--s-4); height: 64px; }
  .steps { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .step { display: grid; grid-template-columns: 34px 1fr; column-gap: var(--s-4); }
  .step-n { margin-bottom: 0; grid-row: span 2; }
  .step p { margin-top: var(--s-2); }
  .hero-actions { flex-direction: column; gap: var(--s-5); }
  .hero-actions .btn { width: 100%; max-width: 320px; }
  .record-list { gap: var(--s-5); }
  .answer { padding-right: 0; }
}
@media (max-width: 360px) {
  .nav-cta { padding: 0 14px; }
  .brand { font-size: 1rem; }
  .record-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Reduced motion: opacity only, static frames
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .intro, .js .reveal, .js .reveal-fig { transform: none; filter: none; }
  .js .reveal-fig > .phone-svg, .js .reveal-fig.is-in > .phone-svg { clip-path: none; transition: none; }
  .js .intro.is-in, .js .reveal.is-in, .js .reveal-fig.is-in { transition: opacity 400ms linear; transition-delay: 0ms; }
  /* the run fades in whole instead of drawing; the markers fade on */
  .js .run-line { clip-path: none; opacity: 0; }
  .js .run.is-in .run-line { opacity: 1; transition: opacity 400ms linear; }
  .step-n::after { transform: none; transition: opacity 300ms linear; }
  /* Afterwards: the finished screens */
  .js .phone-after .jg-sheet, .js .phone-after .jg-bar, .js .phone-replay .jg-ask-leader { transform: none; }
  .js .phone-after .jg-dim, .js .phone-after .jg-sheet, .js .phone-after .jg-recline { opacity: 1; }
  .js .phone-replay .jg-height, .js .phone-replay .jg-height-ahead { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .phone-replay .jg-touch, .js .phone-replay .jg-checktick, .js .phone-replay .jg-playhead { opacity: 1; }
  .js .phone-replay .jg-ask-card { clip-path: none; }
  .js .phone-after.is-played *, .js .phone-replay.is-played * { transition: none !important; }
  .said-word, .voice i, .film-again span, .press, .stage-glow, .film { transition: opacity 200ms linear; }
  .voice i { transform: scaleY(.3) !important; }
  .press:active { transform: none; }
  .faq-list details[open] .answer { animation: answer-fade 200ms linear; }
  .faq-list summary::after { transition: none; }
}
@keyframes answer-fade { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   Legal pages and 404
   -------------------------------------------------------------------------- */
.legal main { padding-top: 72px; }
.legal-hero { padding-block: clamp(64px, 6vw + 32px, 120px) clamp(40px, 4vw, 64px); }
.legal-hero h1 { font-size: var(--t-h1); line-height: 1.04; }
.legal-hero h1 + p { margin-top: var(--s-5); font-size: var(--t-lead); max-width: 36rem; }
.legal-meta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-cap); color: var(--cream-3); }
.legal-meta span + span::before { content: "·"; margin-right: var(--s-5); color: var(--line-2); }
.legal-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-8); align-items: start; padding-bottom: var(--section); padding-top: var(--s-7);
  /* the divider spans the text column only, not the gutters */
  background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.legal-nav { position: sticky; top: 104px; display: grid; gap: var(--s-1); font-size: var(--t-sm); }
.legal-nav span { font: 600 var(--t-cap)/1.4 var(--text); letter-spacing: .08em; color: var(--cream-3); margin-bottom: var(--s-3); }
.legal-nav a { color: var(--cream-2); text-decoration: none; padding: 5px 0; }
@media (hover: hover) and (pointer: fine) {
  .legal-nav a { transition: color 200ms var(--ease-out); }
  .legal-nav a:hover { color: var(--cream); }
}
.legal-content { max-width: 42rem; }
.legal-content section { padding-top: var(--s-7); scroll-margin-top: 96px; }
.legal-content h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.legal-content h3 { font-size: var(--t-h3); margin-top: var(--s-6); }
.legal-content p, .legal-content li { font-size: var(--t-base); line-height: 1.7; }
.legal-content p { margin-top: var(--s-4); }
.legal-content ul { margin: var(--s-4) 0 0; padding-left: 1.2em; }
.legal-content li + li { margin-top: var(--s-2); }
.legal-content li::marker { color: var(--cream-3); }
.legal-content a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .25em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) {
  .legal-content a:hover { text-decoration-color: var(--mint); }
}
.legal-summary { background: var(--night-2); border: 1px solid var(--line); border-radius: 16px; padding: var(--s-5) var(--s-6); }
.legal-summary p { margin: 0; font-size: var(--t-lead); line-height: 1.6; }
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .legal-nav { position: static; padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
}

.lost { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 120px var(--gutter) 96px; position: relative; isolation: isolate; }
.lost .pool { top: 0; }
.lost img { width: 88px; height: auto; margin: 0 auto var(--s-6); }
.lost h1 { font-size: var(--t-h1); line-height: 1.04; max-width: 10em; margin-inline: auto; }
.lost p { margin-top: var(--s-5); font-size: var(--t-lead); }
.lost .btn { margin-top: var(--s-7); }