/* ═══════════════════════════════════════════════════════════════════
   Awesome Downloader — "AURORA" v7
   Blue frosted glass. Every panel is a real refracting surface: there is
   a grid and defined colour behind it, so the blur has structure to
   soften. Glass over a flat ground is just a translucent rectangle.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ TYPE — self-hosted (OFL), latin + latin-ext ═════════════════ */

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-normal-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-normal-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── GROUND — deep blue-black, cool all the way down */
  --bg:     #050A18;
  --bg-2:   #070E22;
  --bg-3:   #0A1430;

  /* ── GLASS — a light tint over dark reads as glass catching light,
        never a dark fill, which reads as a hole. */
  --g-fill:    rgba(255,255,255,0.050);
  --g-fill-2:  rgba(255,255,255,0.085);
  --g-nav:     rgba(9,17,42,0.55);
  --g-brd:     rgba(255,255,255,0.11);
  --g-brd-lit: rgba(255,255,255,0.16);
  --g-rim:     rgba(255,255,255,0.22);   /* top edge highlight */
  --g-under:   rgba(0,0,0,0.28);         /* bottom inner shade = thickness */

  --blur-sm: 12px;
  --blur-md: 22px;
  --blur-lg: 30px;

  /* ── INK — cool white on cool ground */
  --ink:   #EAF2FF;
  --ink-2: rgba(234,242,255,0.72);
  --ink-3: rgba(234,242,255,0.50);
  --ink-4: rgba(234,242,255,0.28);       /* non-text only */

  /* ── ACCENT */
  --accent:      #38BDF8;
  --accent-lift: #7DD3FC;
  --accent-deep: #0EA5E9;
  --accent-wash: rgba(56,189,248,0.14);
  --accent-line: rgba(56,189,248,0.38);
  --accent-glow: rgba(56,189,248,0.40);

  --violet: #818CF8;

  /* ── ACTION — the app's ember: Download, Play, the playhead, "live".
        Sky names things; ember does things. */
  --ember:      #FF6A13;
  --ember-top:  #FF8B47;
  --ember-text: #170B04;
  --ember-wash: rgba(255,106,19,0.09);
  --ember-line: rgba(255,106,19,0.42);
  --ember-glow: rgba(255,106,19,0.36);

  /* ── SIGNAL — semantic only */
  --ok:      #4ADE80;
  --warn:    #FCD34D;
  --support: #FCD34D;                    /* donate path only */

  /* ── TYPE */
  --display: 'Instrument Serif', Georgia, serif;
  --ui:      'Archivo', -apple-system, "Helvetica Neue", sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --t-3xl:  clamp(3.2rem, 8vw, 6rem);
  --t-2xl:  clamp(2.2rem, 5.5vw, 4rem);
  --t-xl:   clamp(1.6rem, 3.2vw, 2.4rem);
  --t-lg:   1.3rem;
  --t-md:   1.0625rem;
  --t-base: 1rem;
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;

  /* ── SPACE — 4px base */
  --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: 128px;

  /* ── RADIUS — glass wants generous curvature */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px;
  --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  /* ── ELEVATION — glass floats; shadow is cool, never neutral black */
  --e1: 0 10px 30px rgba(2,7,24,.50);
  --e2: 0 22px 60px rgba(2,7,24,.62);
  --e3: 0 32px 90px rgba(2,7,24,.78);

  /* ── MOTION */
  --dur-1: 130ms;
  --dur-2: 260ms;
  --dur-3: 700ms;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --press: 0.97;

  --wrap:    1140px;
  --wrap-sm: 720px;
  --nav-h:   70px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden forces overflow-y to `auto`, which makes
     <body> the scroll container and breaks window.scrollY + scroll-spy. */
  overflow-x: clip;
  min-height: 100vh;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--accent-lift); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

.wrap    { max-width: var(--wrap);    margin-inline: auto; padding-inline: var(--s-6); }
.wrap-sm { max-width: var(--wrap-sm); margin-inline: auto; padding-inline: var(--s-6); }

/* ═══ THE BACKDROP ═══════════════════════════════════════════════════ *
 * This exists to be refracted. Colour fields give the blur something to
 * smear; the grid gives it something to soften. Without both, frosted
 * glass is indistinguishable from a flat translucent fill.
 * ═══════════════════════════════════════════════════════════════════ */

.scene {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background:
    radial-gradient(90% 62% at 50% -8%,  rgba(56,189,248,.16) 0%, transparent 60%),
    radial-gradient(70% 55% at 88% 22%, rgba(129,140,248,.14) 0%, transparent 62%),
    radial-gradient(80% 60% at 6% 72%,  rgba(14,165,233,.11) 0%, transparent 64%),
    var(--bg);
  contain: layout paint;
}

/* The grid — the single detail that makes the frost legible */
.scene::after {
  content: "";
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(125% 95% at 50% 0%, #000 18%, transparent 78%);
          mask-image: radial-gradient(125% 95% at 50% 0%, #000 18%, transparent 78%);
}

.blob {
  position: absolute; border-radius: 50%;
  filter: blur(24px); will-change: transform;
}
.blob-1 {
  width: 150px; height: 150px; left: 50%; top: -60px; margin-left: -75px;
  background: rgba(56,189,248,.30);
  animation: drift1 32s ease-in-out infinite alternate;
}
.blob-2 {
  width: 130px; height: 130px; left: 8%; top: 24%;
  background: rgba(129,140,248,.26);
  animation: drift2 26s ease-in-out infinite alternate;
}
.blob-3 {
  width: 140px; height: 140px; right: 6%; top: 58%;
  background: rgba(14,165,233,.20);
  animation: drift3 38s ease-in-out infinite alternate;
}
.blob-4 {
  width: 110px; height: 110px; left: 34%; bottom: 8%;
  background: rgba(99,102,241,.18);
  animation: drift4 30s ease-in-out infinite alternate;
}
@keyframes drift1 { from{transform:translate(0,0) scale(5)}   to{transform:translate(90px,70px) scale(5.7)} }
@keyframes drift2 { from{transform:translate(0,0) scale(4.6)} to{transform:translate(-70px,100px) scale(4.1)} }
@keyframes drift3 { from{transform:translate(0,0) scale(4.4)} to{transform:translate(60px,-80px) scale(5.1)} }
@keyframes drift4 { from{transform:translate(0,0) scale(4.2)} to{transform:translate(-50px,-60px) scale(4.8)} }

/* Page content stacks above the backdrop.
   :where() contributes ZERO specificity, so this whole rule scores 0,0,1
   and any component that declares its own `position` simply wins. Written
   with plain :not() it scored 0,5,1 and silently dragged fixed overlays
   into normal flow — which cost layout space AND made them translate in
   document coordinates instead of viewport coordinates. Do not "simplify"
   this back to bare :not(). */
body > *:where(:not(.scene):not(.grain):not(.theatre):not(.pay-chooser):not(.scrub)) {
  position: relative; z-index: 1;
}

/* Frosted surfaces are never perfectly smooth — grain sells the texture */
.grain {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ═══ GLASS ══════════════════════════════════════════════════════════ *
 * Four parts make a pane read as glass, not as a translucent box:
 *   1 a light tint          — it catches light rather than absorbing it
 *   2 a top rim highlight   — the lit edge of a physical sheet
 *   3 a bottom inner shade  — implies thickness
 *   4 saturation in the blur— colour behind blooms through the frost
 * ═══════════════════════════════════════════════════════════════════ */

.glass {
  position: relative;
  background: var(--g-fill);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border: 1px solid var(--g-brd);
  box-shadow:
    inset 0 1px 0 var(--g-rim),
    inset 0 -1px 0 var(--g-under),
    var(--e1);
}

.glass-pill {
  position: relative;
  background: var(--g-fill);
  backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 var(--g-rim);
  border-radius: var(--r-full);
}

/* ═══ SCRUB — thin progress playhead ═════════════════════════════════ */

.scrub {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 300; pointer-events: none;
}
.scrub i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--sp, 0)); transform-origin: left;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--violet));
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ═══ SCROLL REVEAL ══════════════════════════════════════════════════ *
 * Additive: .js-reveal is set by main.js only once the observer is
 * wired, so a blocked script can never leave content invisible.
 * ═══════════════════════════════════════════════════════════════════ */

.js-reveal .v {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-reveal .v.is-in { opacity: 1; transform: none; }

/* ═══ NAVIGATION — the heaviest frost, because real content passes
      behind it ══════════════════════════════════════════════════════ */

.nav-wrap {
  position: sticky; top: 0; z-index: 200;
  background: var(--g-nav);
  backdrop-filter: blur(var(--blur-lg)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(190%);
  border-bottom: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.nav {
  display: flex; align-items: center; gap: var(--s-5);
  height: var(--nav-h);
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--s-6);
}

/* The brand leads the bar — it should read first, before the links or the
   CTA. Sized and weighted accordingly. */
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; min-width: 0;
  font-family: var(--ui); font-size: 1.14rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.02em;
}
.nav-brand img { flex-shrink: 0; border-radius: var(--r-xs); width: 28px; height: 28px; }
.nav-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-brand b { color: var(--accent); font-weight: 600; }
.nav-brand:hover { color: var(--ink); }

.nav-links { display: flex; gap: var(--s-1); margin-right: auto; min-width: 0; }
.nav-links a {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs); white-space: nowrap; position: relative;
  transition: color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.nav-links a:hover { color: var(--ink-2); background: rgba(255,255,255,.05); }
.nav-links a.is-active { color: var(--ink); background: rgba(255,255,255,.07); }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 2px; width: 14px; height: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}

.nav-right { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }

/* the web music player: new, so it says so */
.nav-links a.nav-music { color: var(--ink); display: inline-flex; align-items: center; gap: 7px; }
.nav-new {
  display: inline-block; padding: 1px 6px; border-radius: 99px; background: #FF7A2E; color: #120800;
  font: 600 9px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 12px rgba(255,122,46,.45);
}
.hero-new {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 14px; padding: 7px 14px 7px 8px;
  border-radius: 99px; text-decoration: none; color: var(--ink-2); font-size: 14px;
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.hero-new:hover { color: var(--ink); transform: translateY(-1px); }
.nav-plain { color: var(--ink-3); text-decoration: none; font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.nav-plain:hover { color: var(--ink); }

.nav-stats {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--ink-3); white-space: nowrap;
}
.nav-stat-item { display: flex; align-items: center; gap: 5px; }
.nav-stat-item svg { opacity: .45; }
.nav-stat-item strong { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-stat-sep { color: var(--ink-4); }

/* Donate — quiet here; it is the secondary ask */
.btn-coffee {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--support);
  background: rgba(252,211,77,.07);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  padding: 7px var(--s-3); border-radius: var(--r-full);
  border: 1px solid rgba(252,211,77,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.btn-coffee:hover  { background: rgba(252,211,77,.14); border-color: rgba(252,211,77,.5); color: var(--support); }
.btn-coffee:active { transform: scale(var(--press)); }
.btn-coffee svg { flex-shrink: 0; }

/* Download — the loud ask. Solid, so it reads through the glass. */
.btn-dl {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  color: var(--ember-text);
  background: linear-gradient(180deg, var(--ember-top), var(--ember) 62%);
  padding: 9px var(--s-4); border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 20px var(--ember-glow);
  white-space: nowrap; flex-shrink: 0;
  transition: filter var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.btn-dl:hover  { color: var(--ember-text); filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px var(--ember-glow); }
.btn-dl:active { transform: scale(var(--press)); }
.btn-dl svg { flex-shrink: 0; }
.btn-dl-ver {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  opacity: .72; padding-left: 6px; margin-left: 2px;
  border-left: 1px solid rgba(23,11,4,.3);
  font-variant-numeric: tabular-nums;
}

/* ═══ WORKS WITH ═════════════════════════════════════════════════════ *
 * The platform list, moved from above the navigation (where it read as
 * decoration and cost the most valuable 40px on a phone) to under the
 * app window, where it reads as a credit roll: proof, not ornament.
 * ═══════════════════════════════════════════════════════════════════ */

.works {
  border-block: 1px solid var(--g-brd);
  background: rgba(255,255,255,.025);
}
.works-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: var(--s-5);
  /* the label lines up with the page's content column */
  padding: var(--s-4) 0 var(--s-4)
           max(var(--s-6), calc((100% - var(--wrap)) / 2 + var(--s-6)));
}
.works-k {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.works-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.works-track {
  display: flex; width: max-content;
  animation: marquee 48s linear infinite;
}
.works-track span {
  padding: 0 var(--s-5);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
@media (hover: hover) { .works:hover .works-track { animation-play-state: paused; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══ HERO ═══════════════════════════════════════════════════════════ */

.hero { padding: clamp(28px, 3.5vw, 52px) 0 0; }
.hero-inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* The tagline is the positioning line, so it is sized to be read rather
   than scanned — larger, brighter and less tracked than the mono labels
   elsewhere, but still short enough to sit on one line. */
.hero-kicker {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: clamp(.82rem, 1.15vw, .95rem);
  font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  padding: 10px var(--s-5); margin-bottom: var(--s-4);
  border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 var(--g-rim), 0 4px 20px rgba(56,189,248,.10);
}
.kicker-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(74,222,128,.18), 0 0 10px rgba(74,222,128,.7);
  animation: pulse-dot 2.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 3px rgba(74,222,128,.18), 0 0 10px rgba(74,222,128,.7); }
  50%     { box-shadow: 0 0 0 7px rgba(74,222,128,.04), 0 0 14px rgba(74,222,128,.4); }
}

.hero-hed {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-3xl); line-height: .92; letter-spacing: -.02em;
  margin-bottom: var(--s-4); text-wrap: balance;
}
.gradient-text {
  font-style: italic;
  background: linear-gradient(102deg, var(--accent-lift) 0%, var(--accent) 42%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-sub {
  font-size: var(--t-md); color: var(--ink-2);
  line-height: 1.72; max-width: 46ch; margin-bottom: var(--s-4);
}

.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-bottom: var(--s-4); }

/* The spec facts the kicker used to carry, demoted so the tagline can
   hold the top slot on its own. */
.hero-facts {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s-5);
  text-wrap: balance;
}
.hero-facts span { white-space: nowrap; }

/* App preview — the deepest pane in the stack */
.app-shell {
  width: 100%; max-width: 1000px;
  border: 1px solid var(--g-brd-lit);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  background: var(--g-fill);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--g-rim),
    0 -2px 60px rgba(56,189,248,.20),
    var(--e3);
}
.app-titlebar {
  display: flex; align-items: center; gap: 7px;
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid var(--g-brd);
}
.app-title-label {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  letter-spacing: .06em;
}
.app-screenshot img { width: 100%; display: block; }

/* Hero dock — the pane settles into place as you scroll */
.js-scroll .app-shell {
  transform:
    perspective(1800px)
    rotateX(var(--dock-rx, 8deg))
    scale(var(--dock-s, .93))
    translateY(var(--dock-y, 28px));
  transform-origin: 50% 0%;
  will-change: transform;
}

/* ═══ SECTIONS — cadence by beat weight ══════════════════════════════ */

.section { padding: var(--beat) 0; --beat: clamp(36px, 4vw, 60px); }
.section-stats    { --beat: clamp(20px, 2.2vw, 32px); }
.support-section  { --beat: clamp(44px, 5.5vw, 76px); }

.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-4);
}
.eyebrow i { font-style: normal; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.eyebrow::after {
  content: ""; flex: 1; height: 1px; max-width: 220px;
  background: linear-gradient(90deg, var(--accent-line), transparent);
}

.section-hed {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-2xl); line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance; margin-bottom: var(--s-6); max-width: 18ch;
}

/* Timecode — the one scroll-linked moment. --p is driven by main.js. */
.tc-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.tc {
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 500;
  color: var(--accent-lift); background: var(--accent-wash);
  padding: 6px var(--s-3); border-radius: var(--r-xs);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  font-variant-numeric: tabular-nums;
}
.tc-line {
  flex: 1 1 80px; min-width: 64px; max-width: 240px;
  height: 3px; border-radius: var(--r-full);
  background: rgba(255,255,255,.09);
  position: relative; overflow: hidden;
}
.tc-line::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-lift));
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
.tc-meta {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* ═══ SHOWCASE — "the scroll is the playhead" ════════════════════════ *
 * The editor's own furniture, doing the job of a feature list:
 *   · a program monitor that holds the current shot
 *   · a timeline of four clips with a playhead that follows the scroll
 *   · cuts between shots, wiped across by an edit line
 * Phones get the same chapters stacked, each shot "rendering" in as it
 * enters — a curtain in the monitor's own colour, led by a glowing line.
 * Everything that moves is transform, opacity or clip-path.
 * ═══════════════════════════════════════════════════════════════════ */

.section-show .section-hed { margin-bottom: var(--s-3); }
.show-intro {
  color: var(--ink-2); font-size: var(--t-md); line-height: 1.6;
  max-width: 48ch; margin-bottom: var(--s-7);
}

.show { display: grid; grid-template-columns: minmax(0, 1fr); }
.show-list { list-style: none; display: grid; gap: var(--s-8); }
.show-stage { display: none; }

/* ── Chapter text ───────────────────────────────────────────────────── */

.chap-k {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-3);
}
.chap-k span {
  padding: 4px 9px; border-radius: var(--r-full);
  border: 1px solid var(--g-brd); background: rgba(255,255,255,.035);
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.chap-h {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-xl); line-height: 1.06; letter-spacing: -.015em;
  text-wrap: balance; max-width: 18ch; margin-bottom: var(--s-4);
}
.chap-p {
  color: var(--ink-2); line-height: 1.75; max-width: 50ch;
  margin-bottom: var(--s-4);
}
.chap .tc-row { margin: var(--s-2) 0 var(--s-5); }
.chap-specs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chap-specs li {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
  padding: 6px 11px; border-radius: var(--r-full);
  border: 1px solid var(--g-brd); background: rgba(255,255,255,.035);
}

/* ── Monitor — shared by the inline shots and the pinned stage ─────── */

.mon {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; overflow: hidden; isolation: isolate;
  /* the film's own ground, so a loading shot never flashes grey */
  background: #050B1C;
  border: 1px solid var(--g-brd);
  border-radius: var(--r-md);
  cursor: pointer;
}
.mon picture { position: absolute; inset: 0; }
.mon img { width: 100%; height: 100%; object-fit: cover; }

/* ── Inline shots (phones, tablets) ─────────────────────────────────── */

.chap-shot {
  margin: var(--s-2) 0 var(--s-5);
  padding: var(--s-2);
  border-radius: var(--r-lg);
  background: var(--g-fill);
  border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-under), var(--e1);
}

/* The render sweep. Off by default, so a failed script or an old browser
   simply shows the picture; switched on only where something will lift it. */
.mon-wipe {
  display: none;
  position: absolute; inset: 0; z-index: 2;
  background: #050B1C;
  pointer-events: none;
}
.mon-wipe::before {
  content: "";
  position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--accent-lift);
  box-shadow: 0 0 16px 2px var(--accent-glow);
}
/* fallback: lifts once, when the shot is well into view */
.js-reveal .chap-shot .mon-wipe {
  display: block;
  transform: translateX(0);
  transition: transform 1200ms var(--ease-out) 80ms;
}
.js-reveal .chap-shot.is-in .mon-wipe { transform: translateX(101%); }

/* where the browser can tie animation to scroll, the sweep follows the
   reader's thumb instead — no script, off the main thread */
@supports (animation-timeline: view()) {
  .chap-shot { view-timeline: --shot block; }
  .chap-shot .mon-wipe,
  .js-reveal .chap-shot .mon-wipe {
    display: block;
    transition: none;
    animation: wipe-off linear both;
    animation-timeline: --shot;
    animation-range: entry 20% cover 42%;
  }
}
@keyframes wipe-off {
  from { transform: translateX(0); }
  to   { transform: translateX(101%); }
}

/* ── Pinned stage (desktop) ─────────────────────────────────────────── */

.stage {
  padding: var(--s-3);
  border-radius: var(--r-xl);
  background: var(--g-fill);
  border: 1px solid var(--g-brd);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--g-rim),
    inset 0 -1px 0 var(--g-under),
    0 40px 90px -34px rgba(56,189,248,.38),
    var(--e2);
}

/* slides stack; the incoming one is wiped in over the outgoing one */
.mon-slide { opacity: 0; }
.mon-slide.is-under { opacity: 1; z-index: 1; }
.mon-slide.is-on    { opacity: 1; z-index: 2; }
.mon-slide.is-on.cut-l { animation: cut-l 760ms var(--ease-out) both; }
.mon-slide.is-on.cut-r { animation: cut-r 760ms var(--ease-out) both; }
@keyframes cut-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cut-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* the edit line rides the wipe's leading edge, same curve, same length */
.mon-cut {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: 0;
}
.mon-cut::before {
  content: "";
  position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--accent-lift);
  box-shadow: 0 0 18px 3px var(--accent-glow);
}
.mon-cut.go-l { animation: sweep-l 760ms var(--ease-out) both; }
.mon-cut.go-r { animation: sweep-r 760ms var(--ease-out) both; }
@keyframes sweep-l {
  0%   { opacity: 1; transform: translateX(0); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
@keyframes sweep-r {
  0%   { opacity: 1; transform: translateX(100%); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(0); }
}

/* The monitor's title bar: which monitor, and what is on it. Kept out of
   the picture so it never sits on a screenshot's own heading. */
.stage-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: 2px var(--s-2) var(--s-3);
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.stage-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.stage-rec i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 8px var(--ember-glow);
  animation: rec-blink 2.4s var(--ease-out) infinite;
}
@keyframes rec-blink { 50% { opacity: .35; } }
.stage-name { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* how to see it bigger — shown on hover and keyboard focus */
.mon-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-full);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
  background: rgba(5,10,24,.7);
  border: 1px solid var(--g-brd);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.mon-main:hover .mon-zoom,
.mon-main:focus-visible .mon-zoom { opacity: 1; transform: none; }

/* ── Timeline ───────────────────────────────────────────────────────── */

.tl {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-1) var(--s-1);
}
.tl-track {
  position: relative; flex: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  padding: 5px; border-radius: 10px; gap: 2px;
  background: rgba(0,0,0,.32);
  border: 1px solid var(--g-brd);
}
/* each chapter drawn as a clip on a video track: a tinted bar with the
   faint frame lines an editor's eye reads as footage */
.tl-clip {
  height: 30px; padding: 0 6px; min-width: 0;
  display: flex; align-items: center;
  font-family: var(--mono); font-size: .56rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); text-align: left;
  border-radius: 6px;
  border: 1px solid rgba(125,211,252,.16);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(56,189,248,.15), rgba(56,189,248,.05));
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.tl-clip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-clip:hover { color: var(--ink-2); border-color: var(--accent-line); }
.tl-clip.is-on {
  color: var(--ink);
  border-color: var(--accent-line);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(56,189,248,.36), rgba(129,140,248,.2));
}

/* The playhead. A box as wide as the track, moved by a fraction of its
   own width, with the line drawn on its left edge — so the whole thing
   is one compositor-only transform per frame. */
.tl-head {
  position: absolute; top: -7px; bottom: -7px; left: 5px; right: 5px;
  pointer-events: none;
  transform: translateX(calc(var(--p, 0) * 100%));
}
.tl-head::before {
  content: "";
  position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  border-radius: 2px;
  background: var(--ember);
  box-shadow: 0 0 12px var(--ember-glow);
}
.tl-head::after {
  content: "";
  position: absolute; left: -6px; top: -3px; width: 12px; height: 9px;
  background: var(--ember);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tl-count {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-count b { color: var(--ink); font-weight: 500; }

/* ── Also in the box ────────────────────────────────────────────────── */

.box {
  margin-top: var(--s-8);
  padding: var(--s-6);
  border-radius: var(--r-xl);
}
.box-k {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-5);
}
.box-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
}
.box-grid li { display: flex; flex-direction: column; gap: 4px; }
.box-grid b {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--t-sm); color: var(--ink);
}
.box-grid b::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}
.box-grid span { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }

@media (max-width: 900px) { .box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .box { padding: var(--s-5); }
  .box-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* ── Desktop: pin the monitor, let the chapters scroll past it ─────── */

@media (min-width: 1000px) {
  .show {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
  .show-list { gap: 0; }
  .chap {
    /* equal heights, so the playhead crosses a clip boundary exactly as
       the next chapter reaches the middle of the screen */
    min-height: 60svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--s-6);
    transition: opacity 500ms var(--ease-out);
  }
  /* dimming waits for the script, so without it everything stays readable */
  .show.is-live .chap { opacity: .36; }
  .show.is-live .chap.is-active { opacity: 1; }
  .chap-shot { display: none; }
  .show-stage {
    display: block;
    position: sticky; top: calc(var(--nav-h) + 5svh);
  }
  /* never taller than the screen: shrink the monitor on short displays */
  .mon-main {
    width: min(100%, calc((100svh - var(--nav-h) - 280px) * 1.7778));
    margin-inline: auto;
  }
}

/* ═══ STATS ══════════════════════════════════════════════════════════ */

.stats-strip {
  display: flex; max-width: var(--wrap-sm); margin-inline: auto;
  border-radius: var(--r-lg); overflow: hidden;
}
.stat { flex: 1; padding: var(--s-6) var(--s-5); text-align: center; }
.stat + .stat { border-left: 1px solid var(--g-brd); }
.stat strong {
  display: block; font-family: var(--mono); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.03em;
  color: var(--ink); margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-family: var(--mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3);
}
.stat-sep { display: none; }

/* ═══ REQUIREMENTS ═══════════════════════════════════════════════════ */

.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-5); }
.req {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); border-radius: var(--r-md);
}
.req-ico {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-lift);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.req strong {
  display: block; font-size: var(--t-base); font-weight: 600;
  margin-bottom: 5px; letter-spacing: -.01em;
}
.req p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.65; max-width: 42ch; }

.notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-md);
  background: rgba(252,211,77,.06);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid rgba(252,211,77,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--ink-2); font-size: var(--t-sm); line-height: 1.65;
}
.notice svg { color: var(--warn); flex-shrink: 0; margin-top: 3px; }
.notice strong { color: var(--ink); font-weight: 600; }

.cta-block { text-align: center; padding-top: var(--s-6); }
.cta-note {
  margin-top: var(--s-4); font-family: var(--mono);
  font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .04em;
}

/* ═══ BUTTONS ════════════════════════════════════════════════════════ */

.btn-primary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--ui); font-size: var(--t-base); font-weight: 600;
  color: var(--ember-text); letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--ember-top), var(--ember) 62%);
  padding: 14px var(--s-6); border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), 0 12px 34px var(--ember-glow);
  cursor: pointer; white-space: nowrap;
  transition: filter var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.btn-primary:hover  { color: var(--ember-text); filter: brightness(1.07); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), 0 16px 46px var(--ember-glow); }
.btn-primary:active { transform: scale(var(--press)); }
.btn-primary.btn-lg { padding: var(--s-4) var(--s-8); font-size: var(--t-md); }

.btn-glass {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--ui); font-size: var(--t-base); font-weight: 500;
  color: var(--ink-2);
  background: var(--g-fill);
  backdrop-filter: blur(var(--blur-md)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(170%);
  padding: 14px var(--s-5); border-radius: var(--r-full);
  border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 var(--g-rim);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.btn-glass:hover  { color: var(--ink); background: var(--g-fill-2); }
.btn-glass:active { transform: scale(var(--press)); }


/* No button may be wider than its container. .btn-lg carries 64px of
   horizontal padding, which on a 360px phone made it 387px wide and pushed
   the document sideways. */
.btn-primary, .btn-glass, .btn-coffee-lg, .btn-dl, .btn-upi {
  max-width: 100%;
}
.btn-primary { white-space: normal; }

/* ═══ SUPPORT ════════════════════════════════════════════════════════ */

/* The one warm moment on a cool page — it should feel like an invitation,
   not an invoice. Amber is fenced to this card and the nav donate pill. */
.support-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-7); padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 130% at 12% 0%, rgba(252,211,77,.14) 0%, transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(240,168,30,.08) 0%, transparent 62%),
    var(--g-fill);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border: 1px solid rgba(252,211,77,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 var(--g-under),
    0 20px 60px rgba(2,7,24,.5);
}
/* warm bloom behind the cup */
.support-card::before {
  content: ""; position: absolute; left: -50px; top: -50px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(252,211,77,.13), transparent 68%);
  pointer-events: none;
}

/* flex:1 so the copy claims the free space instead of being squeezed to
   its shrink-to-fit width beside the button */
.support-left { display: flex; align-items: center; gap: var(--s-5); flex: 1; min-width: 0; }

.coffee-emoji { position: relative; flex-shrink: 0; }
.coffee-emoji .cup {
  display: block; font-size: 2.1rem; line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(252,211,77,.34));
  animation: float-coffee 4.5s ease-in-out infinite;
}
@keyframes float-coffee { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Steam — three strands, offset so they never pulse in unison */
.steam {
  position: absolute; left: 50%; top: -14px;
  transform: translateX(-50%);
  display: flex; gap: 7px; pointer-events: none;
}
.steam i {
  display: block; width: 3px; height: 16px; border-radius: 999px;
  background: linear-gradient(to top, rgba(252,211,77,.55), transparent);
  animation: steam 3.2s ease-in-out infinite;
  opacity: 0;
}
.steam i:nth-child(2) { animation-delay: .5s;  height: 21px; }
.steam i:nth-child(3) { animation-delay: 1.1s; height: 14px; }
@keyframes steam {
  0%   { opacity: 0; transform: translateY(4px) scaleY(.6); }
  35%  { opacity: .85; }
  100% { opacity: 0; transform: translateY(-16px) scaleY(1.25); }
}

.support-eyebrow {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--support); margin-bottom: var(--s-2);
}
.support-hed {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  letter-spacing: -.015em; margin-bottom: var(--s-2); color: var(--ink);
  line-height: 1.12; text-wrap: balance;
}
.support-body {
  color: var(--ink-2); font-size: var(--t-sm);
  line-height: 1.65; max-width: 52ch;
}

/* One quiet line, not a row of chips — chips wrapped to two rows and
   made the card read as a form. */
.support-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.support-facts span { color: var(--support); opacity: .55; }

.btn-coffee-lg {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center;
  font-family: var(--ui); font-weight: 700; font-size: var(--t-base);
  letter-spacing: -.01em; color: #1A1206;
  background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 50%, #F0A81E 100%);
  padding: var(--s-3) var(--s-6); border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.34);
  cursor: pointer; flex-shrink: 0; line-height: 1.15;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 12px 34px rgba(252,211,77,.26);
  transition: filter var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.btn-coffee-lg:hover  { filter: brightness(1.06); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 16px 44px rgba(252,211,77,.38); color: #1A1206; }
.btn-coffee-lg:active { transform: scale(var(--press)); }
.coffee-sub {
  font-family: var(--mono); font-size: .68rem;
  opacity: .68; letter-spacing: .1em; text-transform: uppercase;
}

/* ═══ FAQ ════════════════════════════════════════════════════════════ */

.faq { border-radius: var(--r-lg); overflow: hidden; }
.qa { border-bottom: 1px solid var(--g-brd); }
.qa:last-child { border-bottom: 0; }

.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  font-size: var(--t-md); font-weight: 500; letter-spacing: -.01em;
  cursor: pointer; list-style: none; color: var(--ink-2);
  transition: color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.qa[open] summary { color: var(--ink); }

.qa summary i { width: 18px; height: 18px; flex-shrink: 0; position: relative; }
.qa summary i::before, .qa summary i::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px; background: var(--ink-4); border-radius: 2px;
  transform: translate(-50%,-50%);
  transition: transform var(--dur-2) var(--ease-out),
              opacity var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.qa summary i::after { transform: translate(-50%,-50%) rotate(90deg); }
.qa[open] summary i::after { transform: translate(-50%,-50%) rotate(0); opacity: 0; }
.qa[open] summary i::before { background: var(--accent); }

.qa-body {
  padding: 0 var(--s-6) var(--s-5); color: var(--ink-2);
  font-size: var(--t-sm); line-height: 1.8; max-width: 64ch;
}
.qa-body strong { color: var(--ink); font-weight: 600; }
.qa-body em { color: var(--ink); font-style: italic; }

/* ═══ STORY ══════════════════════════════════════════════════════════ *
 * The one first-person moment on the page, so it is set apart from the
 * marketing voice: serif, larger, quieter chrome, and no numbered eyebrow.
 * ═══════════════════════════════════════════════════════════════════ */

.section-story { --beat: clamp(36px, 4vw, 60px); }

.story {
  position: relative;
  padding: var(--s-7) var(--s-7);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(56,189,248,.07) 0%, transparent 58%),
    var(--g-fill);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-under), var(--e1);
}

/* an actual quote mark, set large and faint behind the opening line */
.story::before {
  content: "\201C";
  position: absolute; top: 4px; left: 20px;
  font-family: var(--display); font-size: 7rem; line-height: 1;
  color: var(--accent); opacity: .13; pointer-events: none;
}

.story-kicker {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-5);
  position: relative;
}

.story-body { margin: 0; border: 0; padding: 0; position: relative; }
.story-body p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.12rem, 1.9vw, 1.4rem);
  line-height: 1.55; letter-spacing: -.01em;
  color: var(--ink-2); margin-bottom: var(--s-4); max-width: 58ch;
}
.story-body .story-last { color: var(--ink); margin-bottom: 0; }

.story-sign {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--g-brd);
}
.story-sign img { border-radius: var(--r-xs); flex-shrink: 0; }
.story-sign span {
  display: flex; flex-direction: column;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .06em; color: var(--ink-3); line-height: 1.6;
}
.story-sign b {
  font-family: var(--ui); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: -.01em; color: var(--ink);
}

/* ═══ REVIEWS ════════════════════════════════════════════════════════ *
 * Sits directly under the hero, so it has to earn its height: one row of
 * cards, the composer folded away behind "Write a review", everything
 * else a click away. On phones the row becomes a swipeable carousel
 * rather than a tall stack that pushes the product off the screen.
 * ═══════════════════════════════════════════════════════════════════ */

.section-reviews { --beat: clamp(40px, 4.5vw, 64px); }

.rv-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-5) var(--s-6);
  margin-bottom: var(--s-5);
}
.rv-title .eyebrow { margin-bottom: var(--s-3); }
.rv-hed {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-xl); line-height: 1.05; letter-spacing: -.015em;
  text-wrap: balance;
}
.rv-side { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }

/* ── Summary ────────────────────────────────────────────────────────── */

.rv-summary {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.rv-summary[hidden], .rv-score[hidden] { display: none; }
.rv-score { display: inline-flex; align-items: center; gap: var(--s-2); }
.rv-score strong {
  font-family: var(--ui); font-weight: 600; font-size: 1.35rem;
  letter-spacing: -.01em; color: var(--ink); text-transform: none;
  font-variant-numeric: tabular-nums;
}
/* five stars drawn twice: a dim row, and a gold row clipped to the score */
.rv-stars {
  --pct: 0%;
  position: relative; display: inline-block;
  font-size: .95rem; line-height: 1; letter-spacing: 2px; color: var(--ink-4);
}
.rv-stars::before { content: "★★★★★"; }
.rv-stars::after {
  content: "★★★★★";
  position: absolute; inset: 0; width: var(--pct);
  overflow: hidden; white-space: nowrap; color: var(--warn);
  transition: width 1200ms var(--ease-out);
}

/* ── Write button ───────────────────────────────────────────────────── */

.rv-write {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px var(--s-5);
  font-family: var(--ui); font-weight: 600; font-size: var(--t-sm);
  color: var(--ink);
  background: var(--g-fill-2);
  border: 1px solid var(--g-brd-lit);
  border-radius: var(--r-full);
  box-shadow: inset 0 1px 0 var(--g-rim);
  backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm));
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.rv-write svg { transition: transform var(--dur-2) var(--ease-spring); }
.rv-write:hover { background: var(--accent-wash); border-color: var(--accent-line); }
.rv-write:hover svg { transform: rotate(-14deg) translateY(-1px); }
.rv-write:active { transform: scale(var(--press)); }
.rv-write[aria-expanded="true"] {
  color: var(--accent-lift); background: var(--accent-wash); border-color: var(--accent-line);
}

/* ── Composer — folds open in place ─────────────────────────────────── */

.rv-compose {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transform: translateY(-6px);
  transition: grid-template-rows var(--dur-3) var(--ease-out),
              opacity var(--dur-2) var(--ease-out),
              transform var(--dur-3) var(--ease-out),
              margin var(--dur-3) var(--ease-out);
}
.rv-compose.is-open {
  grid-template-rows: 1fr; opacity: 1; transform: none;
  margin-bottom: var(--s-5);
}
.rv-compose-in { min-height: 0; overflow: hidden; }

.fb-new {
  display: flex; gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--g-fill);
  border: 1px solid var(--g-brd-lit);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-under);
}

/* ── Avatar ─────────────────────────────────────────────────────────── */

.fb-av {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0; display: grid; place-items: center;
  font-family: var(--ui); font-weight: 600; font-size: .9rem;
  color: #04121F; text-transform: uppercase;
  /* hue is derived from the name in JS, so one person keeps one colour */
  background: linear-gradient(150deg,
    hsl(var(--av-h, 200) 90% 76%), hsl(calc(var(--av-h, 200) + 26) 80% 60%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  user-select: none;
}
.fb-av-me {
  background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color: var(--ink-3);
  border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* story-style ring around a reviewer's avatar, in the site's own hues */
.rv-ring {
  flex-shrink: 0; padding: 2px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--accent), var(--violet), var(--accent-lift), var(--accent));
}
.rv-ring .fb-av { width: 34px; height: 34px; border: 2px solid var(--bg-2); }

/* ── Composer fields ────────────────────────────────────────────────── */

.fb-new-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.fb-new-row  { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

.fb-name, .fb-body {
  width: 100%; color: var(--ink);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--g-brd);
  border-radius: var(--r-sm);
  padding: 9px var(--s-3);
  font-family: var(--ui); font-size: var(--t-sm);
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.fb-name { flex: 1; min-width: 140px; width: auto; }
.fb-body { resize: none; line-height: 1.6; min-height: 42px; overflow: hidden; }
.fb-name::placeholder, .fb-body::placeholder { color: var(--ink-3); }
.fb-name:focus, .fb-body:focus {
  outline: none; border-color: var(--accent-line);
  background: rgba(255,255,255,.07);
}

/* Stars — buttons, so they are keyboard reachable */
.fb-stars { display: flex; gap: 2px; }
.fb-stars button {
  background: none; border: 0; cursor: pointer; padding: 2px;
  font-size: 1.15rem; line-height: 1; color: var(--ink-4);
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.fb-stars button:hover { transform: scale(1.16); }
.fb-stars button.on { color: var(--warn); animation: star-pop 420ms var(--ease-spring) both; }
.fb-stars button:nth-child(2).on { animation-delay: 35ms; }
.fb-stars button:nth-child(3).on { animation-delay: 70ms; }
.fb-stars button:nth-child(4).on { animation-delay: 105ms; }
.fb-stars button:nth-child(5).on { animation-delay: 140ms; }
@keyframes star-pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.fb-new-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.fb-count {
  font-family: var(--mono); font-size: .66rem;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.fb-post {
  font-family: var(--ui); font-weight: 600; font-size: var(--t-sm);
  color: #04121F;
  background: linear-gradient(160deg, var(--accent-lift), var(--accent) 55%, var(--accent-deep));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  padding: 8px var(--s-5); border-radius: var(--r-full);
  cursor: pointer;
  transition: filter var(--dur-1) var(--ease-out),
              opacity var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.fb-post:hover:not(:disabled) { filter: brightness(1.08); }
.fb-post:active:not(:disabled) { transform: scale(var(--press)); }
.fb-post:disabled { opacity: .38; cursor: not-allowed; }

.fb-note {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  border: 1px solid var(--g-brd); border-radius: var(--r-sm);
  background: rgba(255,255,255,.03); color: var(--ink-2);
}
.fb-note[hidden] { display: none; }
.fb-note.is-bad  { color: #FCA5A5; background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.25); }
.fb-note.is-good { color: var(--ok); background: rgba(74,222,128,.07); border-color: rgba(74,222,128,.25); }

/* Honeypot — clipped rather than pushed off-canvas: `left:-9999px`
   widened the document on phones and shifted the whole page sideways.
   Still a real, fillable field in the DOM, which is the point. */
.fb-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────── */

.rv-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
/* collapsed: one row. "Show all" lifts the limit. */
.rv-list:not(.is-open) > .rv-card:nth-child(n+4) { display: none; }

.rv-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--g-fill);
  border: 1px solid var(--g-brd);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-under), var(--e1);
  transition: transform var(--dur-2) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.rv-card:hover {
  transform: translateY(-3px);
  background: var(--g-fill-2);
  border-color: var(--g-brd-lit);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-under), var(--e2);
}
/* a large, faint opening quote — the one ornament the card carries */
.rv-card::before {
  content: "\201C";
  position: absolute; top: 2px; right: 18px;
  font-family: var(--display); font-size: 4.2rem; line-height: 1;
  color: rgba(125,211,252,.13);
  pointer-events: none;
}

.rv-top { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.rv-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rv-who b {
  font-weight: 600; font-size: var(--t-sm); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-meta {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.rv-rate { color: var(--warn); font-size: .78rem; letter-spacing: 1px; }

.rv-text {
  margin: 0; font-size: var(--t-sm); line-height: 1.65;
  color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
.rv-card.is-expanded .rv-text { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.rv-more {
  align-self: flex-start;
  padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--ui); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3);
}
.rv-more:hover { color: var(--ink); }
.rv-more[hidden] { display: none; }

/* Entrance. `translate` and `opacity` only, so the hover lift — which
   uses `transform` — is never overridden by a finished animation. */
.rv-list .rv-card { opacity: 0; translate: 0 14px; }
.rv-list.is-live .rv-card {
  animation: rv-rise 800ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes rv-rise { to { opacity: 1; translate: 0 0; } }

/* a review someone just posted arrives with a brief glow */
.rv-list .rv-card.is-new { animation: rv-new 1400ms var(--ease-out) forwards; }
@keyframes rv-new {
  0%   { opacity: 0; translate: 0 -10px; box-shadow: 0 0 0 1px var(--accent-line), 0 0 40px var(--accent-glow); }
  30%  { opacity: 1; translate: 0 0; }
  100% { opacity: 1; translate: 0 0; box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-under), var(--e1); }
}

.fb-empty {
  padding: var(--s-7) var(--s-5); text-align: center;
  border: 1px dashed var(--g-brd); border-radius: var(--r-lg);
}
.fb-empty p {
  margin: 0; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.fb-empty[hidden] { display: none; }

.rv-foot { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); }
.rv-foot:not(:has(.rv-all:not([hidden]))) { display: none; }
.rv-all {
  padding: 9px var(--s-5);
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--g-brd); border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.rv-all:hover { background: rgba(255,255,255,.07); color: var(--ink); border-color: var(--g-brd-lit); }
.rv-all[hidden] { display: none; }

@media (max-width: 900px) {
  .rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-list:not(.is-open) > .rv-card:nth-child(3) { display: none; }
}

@media (max-width: 640px) {
  .rv-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .rv-side { width: 100%; justify-content: space-between; }

  /* one row that swipes, running to the screen edges; the next card
     peeks in so it reads as scrollable without an instruction */
  .rv-list {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 84%;
    align-items: start;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--s-4) * -1);
    padding: 4px var(--s-4) var(--s-3);
    scroll-padding-inline: var(--s-4);
  }
  .rv-list::-webkit-scrollbar { display: none; }
  .rv-list > .rv-card { scroll-snap-align: start; }
  .rv-list:not(.is-open) > .rv-card:nth-child(n+3) { display: flex; }
  .rv-foot { margin-top: var(--s-3); }
  .fb-new { padding: var(--s-4); gap: var(--s-3); }
  .fb-new > .fb-av-me { display: none; }
}

/* ═══ LEGAL PAGES ════════════════════════════════════════════════════ *
 * Long-form prose, so the measure is tighter than the marketing sections
 * and the type is set for reading rather than scanning.
 * ═══════════════════════════════════════════════════════════════════ */

.legal { padding: var(--s-8) 0 var(--s-9); }

.legal-back {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s-6);
  transition: color var(--dur-1) var(--ease-out);
}
.legal-back:hover { color: var(--accent-lift); }

.legal h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: -.02em; line-height: 1.05; margin-bottom: var(--s-3);
}
.legal-updated {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s-7);
}

.legal h2 {
  font-family: var(--ui); font-weight: 600; font-size: 1.12rem;
  letter-spacing: -.01em; color: var(--ink);
  margin: var(--s-7) 0 var(--s-3);
}
.legal p, .legal li {
  color: var(--ink-2); font-size: var(--t-sm);
  line-height: 1.8; max-width: 68ch;
}
.legal p { margin-bottom: var(--s-4); }
.legal ul { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.legal li { margin-bottom: var(--s-3); }
.legal li::marker { color: var(--accent); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal code {
  font-family: var(--mono); font-size: .84em;
  background: rgba(255,255,255,.06); color: var(--ink);
  padding: 2px 6px; border-radius: var(--r-xs);
  border: 1px solid var(--g-brd);
}

.legal-note {
  padding: var(--s-5); border-radius: var(--r-md);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  margin-bottom: var(--s-6);
}
.legal-note p { margin: 0; color: var(--ink-2); }
.legal-note p + p { margin-top: var(--s-3); }

/* ═══ FOOTER ═════════════════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--g-brd);
  padding: var(--s-8) 0 var(--s-6);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
}
.ft-inner {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--s-7);
}
.site-footer .nav-brand { font-size: 1rem; font-weight: 600; }
.site-footer .nav-brand img { width: 22px; height: 22px; }
.ft-brand p { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-3); max-width: 40ch; }
.ft-links { display: flex; gap: var(--s-5); align-items: center; }
.ft-links a {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  transition: color var(--dur-1) var(--ease-out);
}
.ft-links a:hover { color: var(--accent); }
.ft-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  border-top: 1px solid var(--g-brd); padding-top: var(--s-5);
}

/* ═══ PAY CHOOSER ════════════════════════════════════════════════════ */

.pay-chooser {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,7,20,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: var(--s-5);
}
.pay-chooser[hidden] { display: none !important; }
.pc-card {
  position: relative; width: 100%; max-width: 400px;
  padding: var(--s-7) var(--s-6); border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(var(--blur-lg)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(190%);
  border: 1px solid var(--g-brd-lit);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-under), var(--e3);
}
.pc-close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  background: rgba(255,255,255,.06); border: 1px solid var(--g-brd);
  border-radius: var(--r-full); width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.pc-close:hover { color: var(--ink); background: rgba(255,255,255,.12); }
.pc-title {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  color: var(--ink); margin-bottom: var(--s-2); letter-spacing: -.015em;
}
.pc-sub { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s-6); }
.pc-methods { display: flex; gap: var(--s-3); }
.pc-method {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-5) var(--s-3); border-radius: var(--r-md);
  background: rgba(255,255,255,.05); border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  color: var(--ink); cursor: pointer; font-family: var(--ui);
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.pc-method:hover { background: rgba(255,255,255,.11); border-color: var(--accent-line); transform: translateY(-2px); color: var(--ink); }
.pc-method strong { font-size: var(--t-sm); font-weight: 600; }
.pc-method span {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
  text-align: center; letter-spacing: .04em;
}
.pc-method svg { color: var(--accent-lift); }
.pc-step { display: flex; flex-direction: column; }
.pc-step[hidden] { display: none !important; }
.pc-back {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: none; border: none; color: var(--ink-3); cursor: pointer;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 0 0 var(--s-4) 0;
  transition: color var(--dur-1) var(--ease-out);
}
.pc-back:hover { color: var(--ink); }
.pc-qr {
  border-radius: var(--r-sm); background: #fff; padding: var(--s-2);
  align-self: center; margin: var(--s-4) 0 var(--s-3);
  box-shadow: 0 8px 24px rgba(2,7,24,.5);
}
.pc-qr-label {
  font-family: var(--mono); font-size: .7rem; color: var(--ink-3);
  text-align: center; margin-bottom: var(--s-5); letter-spacing: .04em;
}
.btn-upi {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--accent-lift), var(--accent) 55%, var(--accent-deep));
  color: #04121F; font-family: var(--ui); font-weight: 600; font-size: var(--t-sm);
  border-radius: var(--r-full); padding: var(--s-3) var(--s-5);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 8px 24px var(--accent-glow);
  transition: filter var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.btn-upi:hover  { color: #04121F; filter: brightness(1.08); }
.btn-upi:active { transform: scale(var(--press)); }

/* ═══ HANDOFF — phones get a way to send the link to their PC ════════ *
 * A 297 MB Windows installer is useless on a phone, and every tap on it
 * inflated the download count. On phones a download button opens this
 * sheet instead: share the link to yourself, or download anyway.
 * ═══════════════════════════════════════════════════════════════════ */

.lbl-phone, .for-phone, .for-other { display: none; }
[data-device="phone"] .lbl-desk,
[data-device="phone"] .for-win,
[data-device="other"] .for-win { display: none; }
[data-device="phone"] .lbl-phone,
[data-device="phone"] .for-phone,
[data-device="other"] .for-other { display: inline; }

.cta-meta {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .05em; color: var(--ink-3);
  margin: 0 0 var(--s-3); text-wrap: balance;
}

.handoff {
  position: fixed; inset: 0; z-index: 520;
  display: grid; align-items: end; justify-items: center;
  background: rgba(3,7,20,.66);
  opacity: 0; transition: opacity 260ms var(--ease-out);
}
.handoff[hidden] { display: none; }
.handoff.is-open { opacity: 1; }
.handoff-card {
  position: relative;
  width: min(100% - 24px, 440px);
  margin-bottom: calc(12px + env(safe-area-inset-bottom));
  padding: var(--s-6) var(--s-5) var(--s-4);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #11204a, #0a1430);
  border: 1px solid var(--g-brd-lit);
  box-shadow: inset 0 1px 0 var(--g-rim), var(--e3);
  transform: translateY(28px);
  transition: transform 480ms var(--ease-out);
}
.handoff.is-open .handoff-card { transform: none; }
.handoff-card h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 2rem; line-height: 1.02; letter-spacing: -.015em;
  margin-bottom: var(--s-3); padding-right: var(--s-7);
}
.handoff-card p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; margin-bottom: var(--s-5); }
.handoff-actions { display: grid; gap: var(--s-2); }
.handoff-actions .btn-primary { width: 100%; justify-content: center; }
.handoff-alt {
  display: block; text-align: center;
  padding: var(--s-3); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.handoff-x {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink); background: rgba(255,255,255,.07);
  border: 1px solid var(--g-brd); cursor: pointer;
}

.toast {
  position: fixed; left: 50%; z-index: 600;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: var(--r-full);
  font-size: var(--t-sm); color: var(--ink); text-align: center;
  background: #10214a; border: 1px solid var(--g-brd-lit);
  box-shadow: var(--e2);
  opacity: 0; transform: translate(-50%, 16px);
  transition: opacity 240ms var(--ease-out), transform 360ms var(--ease-out);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }


/* ═══════════════════════════════════════════════════════════════════
   LIGHT PLAY
   Six micro-interactions, all in the same register as the theme: what
   light does when it meets glass. Nothing here moves layout, and all of
   it is decorative — the page is complete without any of it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 02 · Sliding nav indicator — one pill that glides ──────────────── */

.nav-links { position: relative; }
.nav-ind {
  position: absolute; bottom: 2px; left: 0;
  height: 2px; width: var(--iw, 0px); border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: translateX(var(--ix, 0px));
  opacity: 0; pointer-events: none;
  transition: transform var(--dur-2) var(--ease-out),
              width var(--dur-2) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}
.nav-ind.is-on { opacity: 1; }
/* the old per-link dash is superseded by the sliding pill */
.nav-links a.is-active::after { content: none; }

/* ── 04 · FAQ opens smoothly instead of snapping ────────────────────── */
/* Progressive: browsers without ::details-content keep the instant
   toggle they have today. */

@supports selector(::details-content) {
  .qa { interpolate-size: allow-keywords; }
  .qa::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-2) var(--ease-out),
                content-visibility var(--dur-2) allow-discrete;
  }
  .qa[open]::details-content { block-size: auto; }
}

/* ── 05 · Hero gradient drifts, very slowly ─────────────────────────── */

.gradient-text {
  background-size: 220% 100%;
  animation: hue-drift 14s ease-in-out infinite alternate;
}
@keyframes hue-drift {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ── 06 · Specular sweep across the primary CTAs on hover ───────────── */

.btn-primary, .btn-dl, .btn-coffee-lg, .btn-upi { overflow: hidden; position: relative; }
.btn-primary::after, .btn-dl::after, .btn-coffee-lg::after, .btn-upi::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 34%, rgba(255,255,255,.42) 50%, transparent 66%);
  transform: translateX(-130%);
}
.btn-primary:hover::after, .btn-dl:hover::after,
.btn-coffee-lg:hover::after, .btn-upi:hover::after {
  animation: sweep 720ms var(--ease-out);
}
@keyframes sweep { to { transform: translateX(130%); } }

/* ═══ THE FILM ═══════════════════════════════════════════════════════ *
 * Every app shot on this page is cut from the showcase film
 * (assets/media, made by _dev/cut-media.py). The hero's app window plays
 * the film's tour; each chapter below plays its own moment; any monitor
 * opens the whole film at that moment. Loops have no sound, start only
 * when seen, and stay posters under Reduce motion or Save-Data.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Hero: the app window is the program monitor ───────────────────── */
.film-shell .app-titlebar { justify-content: space-between; gap: var(--s-4); }
.film-shell .stage-rec,
.film-tc {
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
.film-tc { letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.film-shell .app-title-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .film-shell .app-title-label { visibility: hidden; } }

.film-screen {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; padding: 0; border: 0;
  background: #050B1C; cursor: pointer; overflow: hidden;
}
.film-screen img,
.film-loop,
.mon-loop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* a loop fades in over its poster once it has a frame, never before */
.film-loop, .mon-loop { opacity: 0; transition: opacity 420ms var(--ease-out); }
.film-loop.is-ready, .mon-loop.is-ready { opacity: 1; }

.film-cta {
  position: absolute; left: 50%; bottom: clamp(12px, 3%, 22px); z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  background: rgba(5,10,24,.78);
  border: 1px solid var(--g-brd-lit);
  box-shadow: inset 0 1px 0 var(--g-rim), var(--e1);
  opacity: 0; transform: translate(-50%, 6px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.film-cta b { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--ink-3); }
.film-screen:hover .film-cta,
.film-screen:focus-visible .film-cta { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .film-cta { opacity: 1; transform: translate(-50%, 0); } }

.film-dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; padding-left: 2px;
  background: linear-gradient(180deg, var(--ember-top), var(--ember));
  color: var(--ember-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px var(--ember-glow);
}
.film-len { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.btn-film { padding-left: var(--s-2); }

/* one tick per scene of the film; the ember head is where the loop is */
.film-ruler {
  position: relative; height: 26px;
  border-top: 1px solid var(--g-brd);
  background: rgba(255,255,255,.025);
}
.film-ruler button {
  position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.film-ruler button::before {
  content: ""; position: absolute; left: 7px; top: 8px; width: 2px; height: 10px;
  border-radius: 2px; background: var(--ink-4);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.film-ruler button:hover::before,
.film-ruler button:focus-visible::before { background: var(--accent-lift); transform: scaleY(1.4); }
.film-ruler-fill {
  position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px;
  left: calc(var(--rp, .11) * 100%);
  background: var(--ember); box-shadow: 0 0 10px var(--ember-glow);
  border-radius: 2px; pointer-events: none;
}
.film-ruler-tip {
  position: absolute; bottom: 30px; z-index: 3; transform: translateX(-50%);
  padding: 6px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--ink);
  background: rgba(5,10,24,.92); border: 1px solid var(--g-brd-lit);
  opacity: 0; transition: opacity var(--dur-1) var(--ease-out);
}
.film-ruler-tip.is-on { opacity: 1; }

/* ── Showcase additions ────────────────────────────────────────────── */
.section-show .show-intro { margin-bottom: var(--s-5); }
.show-film { margin-bottom: var(--s-7); }

.chap-k em {
  margin-left: auto; font-style: normal; letter-spacing: .04em;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.show.is-live .chap.is-active .chap-k span { color: var(--ember-top); border-color: var(--ember-line); background: var(--ember-wash); }
.chap-specs li.is-new { color: var(--ember-top); border-color: var(--ember-line); background: var(--ember-wash); }

.mon-slide { position: absolute; inset: 0; }
.mon > img, .mon-slide > img { position: absolute; inset: 0; display: block; }
.stage-tc { color: var(--ink-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.mon-keys {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
}
.mon-keys kbd {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px;
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)), rgba(5,10,24,.82);
  border: 1px solid var(--g-rim); border-bottom-width: 3px; border-radius: 9px;
  box-shadow: 0 6px 18px rgba(2,7,24,.6);
}
.mon-keys .plus { color: var(--ink-2); font-size: var(--t-sm); text-shadow: 0 1px 6px #000; }
.mon-keys.go kbd { animation: key-pop var(--dur-2) var(--ease-spring) both; }
.mon-keys.go kbd:nth-of-type(2) { animation-delay: 70ms; }
.mon-keys.go kbd:nth-of-type(3) { animation-delay: 140ms; }
@keyframes key-pop { from { transform: scale(.8); opacity: .2; } to { transform: none; opacity: 1; } }

.mon-pal {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink);
  background: rgba(5,10,24,.8); border: 1px solid var(--g-brd-lit);
}
.mon-pal i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.mon-pal span { color: var(--ink-3); font-weight: 500; }
.mon-keys[hidden], .mon-pal[hidden] { display: none; }

.mon-cap {
  margin-top: var(--s-3); padding: 10px var(--s-4);
  min-height: 42px; text-align: center;
  font-size: var(--t-sm); line-height: 1.45; color: var(--ink);
  border-radius: 12px;
  background: rgba(2,6,18,.5);
  border: 1px solid var(--g-brd);
}

/* ── The two scroll moments ────────────────────────────────────────── *
 * Private tabs: the app turns its whole window black and white, so the
 * page does too while that chapter is on air. A filter on the root
 * element does not disturb fixed or sticky positioning. Themes: main.js
 * sets the accent tokens to each palette's colour in turn. */
html { transition: filter 700ms var(--ease-out); }
html.is-private { filter: grayscale(1); }

/* ── The theatre: the whole film, with its scenes ──────────────────── */
.theatre {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  padding: max(var(--s-5), env(safe-area-inset-top, 0px)) var(--s-5) max(var(--s-5), env(safe-area-inset-bottom, 0px));
  background: rgba(3,7,20,.92);
}
.theatre[hidden] { display: none !important; }
.th-box {
  width: min(1240px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-4);
  align-items: start;
}
.th-video {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  background: #000; border-radius: var(--r-md);
  border: 1px solid var(--g-brd-lit); box-shadow: var(--e3);
}
.th-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-3); max-height: min(70vh, 700px); min-height: 0; }
.th-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.th-top b {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.th-close {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: rgba(255,255,255,.07); border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 var(--g-rim);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.th-close:hover { background: rgba(255,255,255,.14); }
.th-close:active { transform: scale(var(--press)); }
.th-list {
  list-style: none; overflow-y: auto; min-height: 0;
  border-radius: var(--r-sm); border: 1px solid var(--g-brd);
  background: rgba(255,255,255,.03);
}
.th-list button {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-2);
  padding: 9px var(--s-3); text-align: left; cursor: pointer;
  font-family: var(--ui); font-size: var(--t-sm); color: var(--ink-2);
  background: none; border: 0; border-bottom: 1px solid var(--g-brd);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.th-list li:last-child button { border-bottom: 0; }
.th-list button span { font-family: var(--mono); font-size: .72rem; color: var(--ink-4); font-variant-numeric: tabular-nums; padding-top: 2px; }
.th-list button:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.th-list button.is-on { color: var(--ink); background: var(--ember-wash); }
.th-list button.is-on span { color: var(--ember-top); }
@media (max-width: 860px) {
  .theatre { place-items: start center; overflow-y: auto; }
  .th-box { grid-template-columns: minmax(0, 1fr); }
  .th-side { max-height: none; }
  .th-top { order: -1; }
  .th-list { max-height: 42vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
  .stage-rec i { animation: none; }
  .mon-keys.go kbd { animation: none; }
  .film-loop, .mon-loop, .film-cta { transition: none; }
}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-stats { display: none; }
  .nav-brand { margin-right: auto; }
  .section-hed { max-width: none; }
}

@media (max-width: 640px) {
  .wrap, .wrap-sm, .nav, .hero-inner { padding-inline: var(--s-4); }
  .nav { gap: var(--s-2); }
  .nav-brand { flex-shrink: 1; }
  /* Donate stays reachable on mobile — reduced to the cup, not removed */
  .btn-coffee { padding: 7px; border-radius: 50%; }
  .btn-coffee span { display: none; }
  .btn-coffee svg { width: 15px; height: 15px; }
  .btn-dl { font-size: var(--t-xs); padding: 8px var(--s-3); }
  .btn-dl-ver { display: none; }

  .hero { padding: var(--s-7) 0 0; }
  .hero-sub br { display: none; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: var(--s-1); }
  .hero-ctas .btn-primary { width: 100%; justify-content: center; }
  /* the secondary action becomes a quiet link: as a second full-width
     pill it pushed the product image below the fold */
  .hero-ctas .btn-glass {
    align-self: center; padding: 10px var(--s-4); font-size: var(--t-sm);
    background: none; border-color: transparent; box-shadow: none;
  }
  .app-shell { border-radius: var(--r-md) var(--r-md) 0 0; }

  .req-grid   { grid-template-columns: 1fr; }
  /* one compact row, not three tall stacked tiles: the numbers are the
     point and they fit side by side at phone width */
  .stat { padding: var(--s-5) var(--s-2); }
  .stat strong { font-size: 1.4rem; }
  .stat span { font-size: .58rem; letter-spacing: .1em; }
  .qa summary { padding: var(--s-4); }
  .qa-body { padding: 0 var(--s-4) var(--s-4); }

  /* Full-width CTAs on phones: they fit by construction and give a much
     larger tap target than a centred pill. */
  .btn-primary, .btn-primary.btn-lg {
    width: 100%; justify-content: center;
    padding: var(--s-4) var(--s-4); font-size: var(--t-base);
  }
  .cta-block .btn-primary, .guide-cta .btn-primary { width: 100%; }

  .support-card { flex-direction: column; text-align: center; padding: var(--s-7) var(--s-5); gap: var(--s-6); }
  .support-left { flex-direction: column; align-items: center; gap: var(--s-5); }
  .support-body { max-width: none; }
  .support-hed br { display: none; }
  .support-facts { justify-content: center; }
  .btn-coffee-lg { width: 100%; }

  .ft-inner { flex-direction: column; gap: var(--s-5); }
}

@media (max-width: 420px) {
  .btn-dl-free { display: none; }
  .nav-brand span { font-size: .88rem; }
}

@media (max-width: 360px) {
  .btn-dl svg { display: none; }
}

/* ═══ PHONE PERFORMANCE ══════════════════════════════════════════════ *
 * backdrop-filter re-blurs whatever is behind it on every frame, and the
 * colour fields behind this page drift. With a dozen frosted panes on a
 * phone screen that is the difference between 60fps and a stutter on a
 * mid-range Android. So on phones: one live blur (the navigation), and
 * every other pane becomes a tinted sheet — which at arm's length reads
 * as the same glass, and costs nothing per frame.
 * ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  :root {
    --g-fill:   rgba(17, 30, 64, .74);
    --g-fill-2: rgba(23, 39, 82, .82);
    --blur-lg:  16px;
  }
  body *:not(.nav-wrap):not(.theatre):not(.pay-chooser) {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .grain { display: none; }
  .blob { animation-play-state: paused; }

  /* iOS zooms the whole page into any field set below 16px */
  .fb-name, .fb-body { font-size: 16px; }
}

/* ═══ REDUCED MOTION — proportional, not blanket ═════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .blob, .works-track, .coffee-emoji, .kicker-dot, .gradient-text { animation: none; }
  .works-rail { overflow-x: auto; }
  .steam i { animation: none; opacity: 0; }
  .v { opacity: 1; transform: none; transition: none; }
  .pc-method:hover, .rv-card:hover { transform: none; }
  .rv-list .rv-card, .rv-list.is-live .rv-card, .rv-list .rv-card.is-new {
    animation: none; opacity: 1; translate: none;
  }
  .rv-compose, .chap, .rv-stars::after { transition: none; }
  .fb-stars button.on, .mon-slide.is-on, .mon-cut { animation: none !important; }
  .mon-wipe { display: none !important; }
  .js-scroll .app-shell { transform: none; }
  html { scroll-behavior: auto; }

  /* Light play is decoration; none of it survives the preference. */
  .btn-primary:hover::after, .btn-dl:hover::after,
  .btn-coffee-lg:hover::after, .btn-upi:hover::after { animation: none; }
  .nav-ind { transition: none; }
}

/* Visually hidden but present for screen readers and crawlers. Used to
   complete the hero heading, which reads "Download anything." on screen
   and needs to say what the product actually is to anyone who cannot see
   the page. Clip-based, so the text is never announced as empty. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══ GUIDE / LANDING PAGES ══════════════════════════════════════════ *
 * Long-form keyword pages. They reuse .legal for prose rhythm and add
 * the bits a marketing page needs that a policy page does not.
 * ═══════════════════════════════════════════════════════════════════ */

.guide h1 { max-width: 20ch; }
.guide-intro {
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55; color: var(--ink-2);
  max-width: 58ch; margin: var(--s-4) 0 var(--s-6);
}
.guide h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  letter-spacing: -.015em; line-height: 1.15;
  color: var(--ink); margin: var(--s-8) 0 var(--s-4);
}

.guide-cta {
  padding: var(--s-6); border-radius: var(--r-lg); text-align: center;
  background: var(--g-fill);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 var(--g-rim);
  margin: var(--s-6) 0;
}
.guide-cta .cta-note { margin-top: var(--s-3); }
.guide-cta-end { margin-top: var(--s-8); }

.guide-shot { margin: var(--s-6) 0 var(--s-7); }
.guide-shot img {
  width: 100%; border-radius: var(--r-md);
  border: 1px solid var(--g-brd); box-shadow: var(--e2);
}

.guide-faq { margin-bottom: var(--s-7); }
.guide-faq .qa summary { padding: var(--s-4) 0; font-size: var(--t-base); }
.guide-faq .qa-body { padding: 0 0 var(--s-4); }

.guide-more {
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--g-brd);
}
.guide-more-h {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-4);
}
.guide-more ul, .guide-links ul { list-style: none; padding: 0; margin: 0; }
.guide-more li, .guide-links li { margin: 0; border-top: 1px solid var(--line-soft, rgba(255,255,255,.06)); }
.guide-more li:first-child, .guide-links li:first-child { border-top: 0; }
.guide-more a, .guide-links a {
  display: block; padding: var(--s-4) 0;
  font-family: var(--ui); font-size: var(--t-md); font-weight: 500;
  color: var(--ink-2); letter-spacing: -.01em;
  transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}
.guide-more a::after, .guide-links a::after { content: " →"; color: var(--accent); opacity: .6; }
.guide-more a:hover, .guide-links a:hover { color: var(--ink); padding-left: var(--s-2); }

.guide-links {
  padding: var(--s-5) var(--s-6); border-radius: var(--r-lg);
  background: var(--g-fill);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border: 1px solid var(--g-brd);
  box-shadow: inset 0 1px 0 var(--g-rim);
}