/* ==========================================================================
   SikaNest — shared stylesheet for sikanest.com
   Loaded by every page: /, /download/, /privacy/, /terms/,
   /delete-account/ and the /early-access/ redirect. Palette follows the
   app's constants/colors.ts.

   Two grounds, one brand:
   - `light` is the reading ground — every document page and the home page's
     content sections. Its greys are contrast-corrected (see Tokens).
   - `night` is the app's own sign-in ground (#11563E → #0B3D2E → #06251B).
     The home page uses it for the hero, the privacy band, the call to action
     and the footer, marked up with `.night`. Small text on night uses
     --night-ink-2 or brighter: --night-ink-3 is only for 18px+ labels.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted variable subsets from Google Fonts. The latin-ext faces are NOT
   optional: the cedi sign ₵ (U+20B5) lives in U+20AD-20C0 and appears in every
   currency figure on the page. Instrument Serif is the accent face for one or
   two words per headline; it never sets a figure, so latin is enough.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/sora-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: 'Sora';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/sora-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 Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-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 Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-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-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;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* light ground */
  --bg: #FBFCF9;
  --bg-tint: #F3F6F1;
  --card: #FFFFFF;
  --line: #E7ECE6;          /* decorative dividers */
  --line-strong: #D7DFD6;   /* card + control borders */
  --wash: #F6F8F5;          /* inset rows inside cards */

  /* ink — greys are contrast-corrected against the design's raw values:
     #8B988F (2.92) and #9AA79E (2.43) both fail AA as body text. */
  --ink: #0D1F17;
  --ink-2: #5B6B62;         /* 5.48 on --bg */
  --ink-3: #647268;         /* 4.92 on --bg — replaces #8B988F / #9AA79E for text */
  --ink-decor: #9AA79E;     /* rules and icon strokes ONLY, never text */

  /* brand */
  --green: #0E5940;
  --green-hover: #0B3D2E;
  --green-accent: #0E7A5A;
  --green-wash: #E9F3EE;
  --pine: #0B3D2E;
  --pine-2: #0E5940;
  --pine-ink: #EAF3EE;
  --pine-muted: #9DBFAF;    /* 6.10 on pine */
  --mint: #7FDCB4;

  --gold: #C9A227;          /* surfaces and borders */
  --gold-hi: #EBD48A;
  --gold-ink: #241C05;      /* text ON gold — 6.98 */
  --gold-text: #7A6114;     /* gold AS text on light — 5.75 */
  --gold-wash: #F5EEDA;

  --red: #B0483C;
  --red-wash: #FBF6F5;
  --red-line: #F0E2DF;

  /* night ground — ratios against --night (#06251B) */
  --night: #06251B;
  --night-2: #0B3D2E;
  --night-ink: #F2F7F4;     /* 15.3 */
  --night-ink-2: #B5CCC1;   /* 9.6, and 4.9 on the lightest hero/CTA glow */
  --night-ink-3: #8FB0A2;   /* 6.9 — 18px+ only; drops to 3.6 on the glow */
  --night-line: rgba(234, 243, 238, 0.12);
  --coral: #F2A99F;         /* "never" rows on night — 8.5 */

  /* focus — the old gold ring was 2.35 and failed WCAG 1.4.11 */
  --focus: #0B3D2E;
  --focus-on-pine: #EBD48A;

  /* geometry */
  --wrap: 1200px;
  --pad: 24px;
  --sec-y: 116px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --pill: 999px;
  --nav-h: 68px;

  --shadow: 0 24px 60px -28px rgba(13, 31, 23, 0.28);
  --shadow-soft: 0 14px 40px -24px rgba(13, 31, 23, 0.22);
  --shadow-card: 0 1px 2px rgba(11, 61, 46, 0.04), 0 24px 48px -36px rgba(13, 31, 23, 0.3);
  --shadow-lift: 0 1px 2px rgba(11, 61, 46, 0.04), 0 34px 60px -34px rgba(13, 31, 23, 0.38);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: 'Sora', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  color-scheme: light;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Decorative glows and floating cards may overhang their sections; `clip`
     (unlike `hidden`) keeps position: sticky working. */
  overflow-x: clip;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); }

::selection { background: #DCEEE4; }
.night ::selection { background: rgba(235, 212, 138, 0.35); color: #fff; }

/* The sticky nav would otherwise swallow every anchor target. */
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.4);
}
.on-pine :focus-visible,
.night :focus-visible,
.nav--night :focus-visible,
.announce :focus-visible {
  outline-color: var(--focus-on-pine);
  box-shadow: 0 0 0 5px rgba(235, 212, 138, 0.22);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--pine); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600; font-size: 15px;
}
.skip:focus { inset-inline-start: 0; color: #fff; }

/* The inline icon sprite: present for <use>, invisible and out of flow. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Stroke icons. Size follows font-size; colour follows `color`. */
.ico {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Demo controls do nothing without fx.js, so they only exist with JS on. */
html:not(.js) [data-js-only] { display: none; }

/* --- Layout utilities ---------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); width: 100%; }
.section { padding: var(--sec-y) 0; position: relative; }
.section--tint { background: var(--bg-tint); border-top: 1px solid #E9EEE8; border-bottom: 1px solid #E9EEE8; }
.section--narrow { max-width: 780px; margin: 0 auto; }
.center { text-align: center; }

.night { background-color: var(--night); color: var(--night-ink); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }

/* --- Public account-deletion page ---------------------------------------- */
.legal-body { min-height: 100vh; display: flex; flex-direction: column; }
.legal-main { flex: 1; padding: 76px 0 96px; }
.legal-wrap { max-width: 860px; }
.legal-heading { max-width: 720px; margin-bottom: 36px; }
.legal-heading h1 { margin-top: 14px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -0.04em; }
.legal-lede { color: var(--ink-2); font-size: 1.2rem; line-height: 1.55; margin-top: 18px; max-width: 640px; }
.legal-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow-soft); }
.legal-card + .legal-card { margin-top: 18px; }
.legal-card h2 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 14px; }
.legal-card p { color: var(--ink-2); }
.legal-card a { text-decoration: underline; text-underline-offset: 3px; }
.legal-steps { counter-reset: deletion-step; display: grid; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.legal-steps li { counter-increment: deletion-step; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--ink-2); }
.legal-steps li::before { content: counter(deletion-step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-wash); color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.legal-card--muted { background: var(--wash); box-shadow: none; }
.legal-card--support { border-color: var(--gold); background: var(--gold-wash); box-shadow: none; }
.legal-updated { color: var(--ink-3); font-size: 13px; margin-top: 24px; }

@media (max-width: 700px) {
  .legal-main { padding: 52px 0 72px; }
  .legal-grid { grid-template-columns: 1fr; }
}

/* --- Type utilities ------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--green-accent); text-transform: uppercase;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1.5px; border-radius: 2px;
  background: currentColor; flex: none;
}
.night .eyebrow { color: var(--gold-hi); }

.h2 {
  font-size: clamp(2rem, 4.3vw, 3.4rem); font-weight: 700;
  line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance;
}
.night .h2 { color: #fff; }
.h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.h4 { font-size: 16px; font-weight: 700; line-height: 1.35; }
.lede { font-size: 17.5px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; }
.night .lede { color: var(--night-ink-2); }
.fine { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* The accent word: Instrument Serif italic, filled with the brand gradient —
   green on light, gold on night. The plain `color` is the fallback where
   background-clip text is missing. */
.accent {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: 1.1em; line-height: 0.9; letter-spacing: -0.01em;
  color: var(--green-accent); padding-inline-end: 0.05em;
}
.night .accent { color: var(--gold-hi); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent {
    background-image: linear-gradient(100deg, #0E7A5A 0%, #0B3D2E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .night .accent { background-image: linear-gradient(100deg, #F8EBBE 0%, #EBD48A 45%, #D4AF3A 100%); }
}

/* Headline words (see Motion). Each word is its own box so it can rise alone;
   the accent stays inline because its gradient is clipped to its own text. */
.w { display: inline-block; }
.accent.w { display: inline; }
/* High-contrast modes drop backgrounds, which would take a clipped-text fill
   with them: give the word back its system text colour. */
@media (forced-colors: active) {
  .accent, .night .accent { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
}

.section-head { max-width: 720px; }
.section-head .h2 { margin-top: 16px; }
.section-head .lede { margin-top: 18px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.section-head--split {
  max-width: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px 64px; align-items: end;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.2;
  border-radius: var(--pill); padding: 14px 24px; border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.btn .ico { font-size: 17px; transition: transform 0.25s var(--ease-out); }
.btn:hover .ico { transform: translateX(3px); }
.btn--primary { background: var(--green); color: #fff; box-shadow: 0 10px 22px -12px rgba(14, 89, 64, 0.7); }
.btn--primary:hover { background: var(--green-hover); color: #fff; transform: translateY(-1px); }
.btn--outline { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--green); color: var(--green); }
.btn--gold {
  background: linear-gradient(180deg, #E6C65A 0%, #C9A227 100%); color: var(--gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 28px -12px rgba(201, 162, 39, 0.75);
}
/* A light sweep across gold buttons on hover; it sits between the fill and
   the label thanks to the button's own stacking context. */
.btn--gold::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 46%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease-out);
}
.btn--gold:hover {
  color: var(--gold-ink); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 36px -12px rgba(201, 162, 39, 0.9);
}
.btn--gold:hover::after { transform: translateX(120%); }
.btn--glass {
  background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.38); color: #fff; }
.btn--sm { font-size: 14px; padding: 10px 18px; }
.btn--lg { font-size: 16px; padding: 17px 28px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.65; cursor: default; transform: none; }
/* Magnetic buttons ease back when the pointer leaves (fx.js sets `translate`). */
[data-magnetic] {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s var(--ease-out), box-shadow 0.2s ease, translate 0.4s var(--ease-out);
}
/* The pressed ripple, between the fill and the label like the gold sweep. */
.ripple {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.42); transform: scale(0);
  animation: ripple 0.65s var(--ease-out) forwards;
}
.btn--outline .ripple, .btn--glass .ripple { background: rgba(14, 122, 90, 0.16); }
.btn--glass .ripple { background: rgba(255, 255, 255, 0.22); }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* --- Small components ---------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #DCE5DD; background: var(--card); border-radius: var(--pill);
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--green);
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }

/* The live dot: a slow sonar ping on the early-access pill. */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 11px; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(235, 212, 138, 0.3);
  color: var(--gold-hi); font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); flex: none; }

.badge {
  /* Above .tier--hi::after, which paints later and would run its light across the label. */
  position: absolute; top: -13px; inset-inline-start: 30px; z-index: 1;
  background: linear-gradient(180deg, #EBD48A, #C9A227); color: var(--gold-ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--pill); padding: 5px 12px;
  box-shadow: 0 8px 20px -10px rgba(201, 162, 39, 0.9);
}

.tag {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
  color: var(--gold-text); background: var(--gold-wash);
  border-radius: var(--pill); padding: 3px 8px;
}

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
}

.ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--ink-2); }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks .ico {
  width: 20px; height: 20px; padding: 4px; border-radius: 50%; stroke-width: 3;
  background: var(--green-wash); color: var(--green-accent);
}
.ticks--night { color: var(--night-ink-2); }
.ticks--night .ico { background: rgba(127, 220, 180, 0.14); color: var(--mint); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce {
  background: var(--night); color: #DFF0E8;
  font-size: 13px; font-weight: 500;
  border-bottom: 1px solid rgba(234, 243, 238, 0.07);
}
html[data-ann='off'] .announce { display: none; }
.announce__in {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 44px 9px 16px; text-align: center; position: relative;
}
.announce a { color: var(--gold-hi); font-weight: 700; }
.announce a:hover { color: #fff; }
.announce__x {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--pine-muted); cursor: pointer;
  width: 28px; height: 28px; line-height: 1; font-size: 17px; border-radius: 8px;
}
.announce__x:hover { color: #fff; }

/* ==========================================================================
   Nav — light by default (document pages); `.nav--night` on the home page
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 252, 249, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--bg); }
  .nav--night { background: var(--night); }
}
.nav__in { display: flex; align-items: center; gap: 24px; padding: 12px var(--pad); min-height: var(--nav-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 32px; width: auto; }
.nav__spacer { flex: 1; }
.nav__links { display: flex; align-items: center; gap: 2px; font-size: 14.5px; font-weight: 500; }
.nav__links a { color: #374842; padding: 8px 13px; border-radius: var(--pill); transition: color 0.2s, background-color 0.2s; }
.nav__links a:hover { color: var(--green); background: var(--green-wash); }
.nav__cta { flex: none; }
.nav__burger { display: none; }
.nav__back { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav__back:hover { color: var(--ink); }

/* Night: the bar reads as part of the hero at the top of the page, then as a
   dark glass rail over the light sections below. */
.nav--night { background: rgba(6, 37, 27, 0.74); border-bottom-color: rgba(234, 243, 238, 0.08); }
.nav--night.is-scrolled { background: rgba(6, 37, 27, 0.9); box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.7); }
.nav--night .nav__links a, .nav--night .langs--nav { color: rgba(242, 247, 244, 0.82); }
.nav--night .nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* Scrollspy: a pill that slides to the section being read (fx.js places it). */
.nav__links { position: relative; isolation: isolate; }
.nav__ink {
  position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; pointer-events: none;
  border-radius: var(--pill); background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(235, 212, 138, 0.32);
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.3s ease;
}
.nav__ink.is-on { opacity: 1; }
.nav--night .nav__links a[aria-current] { color: #fff; }

/* Reading progress, driven by the scroll timeline where supported. */
.nav__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--green-accent), var(--gold), var(--gold-hi));
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav__progress { animation: progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes progress { to { transform: scaleX(1); } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #0F4A36 0%, #0B3D2E 36%, #06251B 78%);
  padding: 64px 0 0;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Background film — `data-lazy` so fx.js only fetches it when motion is
   welcome and data isn't being saved; everyone else keeps the poster. */
.hero__video, .cta__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.62;
}
.hero__aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 34% at 74% 32%, rgba(235, 212, 138, 0.2), transparent 70%),
    radial-gradient(34% 40% at 18% 78%, rgba(127, 220, 180, 0.11), transparent 70%),
    radial-gradient(28% 30% at 94% 88%, rgba(201, 162, 39, 0.14), transparent 70%);
  filter: blur(16px);
}
/* A faint ledger grid, fading out towards the copy. */
.hero__lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(234, 243, 238, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 243, 238, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 72% 38%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 58% at 72% 38%, #000 10%, transparent 72%);
}
.hero__fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 37, 27, 0.78) 0%, rgba(6, 37, 27, 0.3) 45%, rgba(6, 37, 27, 0) 70%),
    linear-gradient(180deg, rgba(6, 37, 27, 0) 70%, var(--night) 100%);
}
.dust { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 40px; align-items: center;
  min-height: min(780px, calc(100svh - 120px)); padding-bottom: 40px;
}
.display {
  font-size: clamp(2.7rem, 5.7vw, 5.15rem); font-weight: 700; color: #fff;
  line-height: 1.02; letter-spacing: -0.047em; margin: 26px 0 22px;
  text-wrap: balance;
}
.hero__lede { font-size: 18.5px; line-height: 1.65; color: var(--night-ink-2); max-width: 540px; }
.hero__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero .ticks { margin-top: 26px; }

/* Stage — the phone plus its floating cards. The cards are pinned to
   .stage__inner (phone width), never to .stage, or they drift into the
   gutters at intermediate widths. fx.js moves `.device` and each `.float`
   for the pointer parallax; the cards' own animations live on
   `.float__card` so the two transforms never fight. */
.stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 660px; }
.stage__halo {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 560px;
  margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(235, 212, 138, 0.26) 0%, rgba(201, 162, 39, 0.08) 38%, transparent 68%);
}
.stage__inner { position: relative; width: 300px; }

.device {
  position: relative; padding: 9px; border-radius: 50px;
  background: linear-gradient(150deg, #34463E 0%, #0C1712 38%, #050A08 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 4px #050A08,
    0 0 0 1px rgba(235, 212, 138, 0.14),
    0 60px 110px -36px rgba(0, 0, 0, 0.85),
    0 30px 120px -30px rgba(201, 162, 39, 0.32);
  transition: transform 0.6s var(--ease-out);
}
.device img { width: 100%; height: auto; border-radius: 42px; }

.float { position: absolute; z-index: 3; transition: transform 0.6s var(--ease-out); }
.float__card {
  background: #fff; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 18px;
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(13, 31, 23, 0.04);
  padding: 13px 14px;
}
.float--sms { left: -150px; bottom: 112px; width: 290px; }
.float--sms .float__card { display: flex; align-items: center; gap: 10px; }
.float--budget { left: -104px; top: 64px; width: 212px; }
.float--coach { right: -132px; top: 236px; width: 244px; }

.float__ico {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-size: 16px;
  background: var(--green-wash); color: var(--green);
}
.float__body { flex: 1; min-width: 0; }
.float__t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.float__s { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; }
.float__tag {
  flex: none; background: var(--green-wash); color: var(--green-accent);
  font-size: 10px; font-weight: 700; border-radius: var(--pill); padding: 3px 8px;
}
.float__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.float__row .float__s { margin: 0; font-variant-numeric: tabular-nums; }
.mini-bar { height: 6px; border-radius: var(--pill); background: #EEF2EE; margin: 9px 0 7px; overflow: hidden; }
.mini-bar span {
  display: block; height: 100%; width: var(--w); border-radius: inherit;
  background: linear-gradient(90deg, #0E7A5A 55%, #E0B23E);
}
.float__head { display: flex; align-items: center; gap: 8px; }
.float__head img { height: 22px; width: 22px; border-radius: 7px; }
.float__head b { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.float__head span { font-size: 10.5px; color: var(--ink-3); margin-inline-start: auto; }
.float__msg { font-size: 12.5px; line-height: 1.5; color: #374842; margin-top: 8px; }
.float__acts { display: flex; gap: 8px; margin-top: 10px; }
.float__acts span { border-radius: var(--pill); padding: 6px 12px; font-size: 11.5px; font-weight: 700; }
.float__acts span:first-child { background: var(--green); color: #fff; }
.float__acts span:last-child { border: 1px solid var(--line-strong); color: var(--ink-2); font-weight: 600; }
/* The hero SMS card swaps between kinds of capture (fx.js toggles the class). */
.float__ico, .float__body { transition: opacity 0.28s ease, transform 0.28s var(--ease-out); }
.float__card.is-swapping .float__ico, .float__card.is-swapping .float__body { opacity: 0; transform: translateY(-6px); }

/* The pause control for everything that moves on its own. */
.motion-toggle {
  position: absolute; right: var(--pad); bottom: 22px; z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 16px; color: rgba(242, 247, 244, 0.85);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 0.2s, color 0.2s;
}
.motion-toggle:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.motion-toggle .ico { stroke-width: 2.4; }
/* Paused: loops freeze where they are. The cards keep their one-second
   entrance and only lose the endless drift — freezing the entrance would
   leave a visitor who paused on an earlier visit looking at empty space. */
html.motion-off .marquee__track,
html.motion-off .hero__aurora,
html.motion-off .pill__dot,
html.motion-off .vault__ring,
html.motion-off .cta__ring--1,
html.motion-off .tier--hi::after { animation-play-state: paused !important; }
html.motion-off .float__card { animation-name: floatIn; }
/* Paused visitors get the drawings' finished frames, never a build. */
html.motion-off .tool__art [data-beat] { animation: none !important; }

/* ==========================================================================
   Proof strip — the networks, on a slow marquee
   ========================================================================== */
.proof { padding: 0 0 64px; }
.proof__in {
  display: flex; align-items: center; gap: 32px;
  padding-top: 30px; border-top: 1px solid var(--night-line);
}
.proof__label {
  flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--night-ink-2);
}
.marquee {
  flex: 1; min-width: 0; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  flex: none; display: flex; align-items: center; gap: 44px; padding-right: 44px;
  min-width: 100%; justify-content: space-around;
}
.marquee__track li {
  display: flex; align-items: center; gap: 14px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: -0.01em; color: rgba(242, 247, 244, 0.8);
}
.marquee__track li::before {
  content: ''; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg);
  background: var(--gold); opacity: 0.85;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.proof__note { margin-top: 18px; font-size: 14px; color: var(--night-ink-2); }

/* ==========================================================================
   Features — bento
   ========================================================================== */
.bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px; margin-top: 60px;
}
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  grid-column: span 4; display: flex; flex-direction: column; gap: 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: 28px;
  padding: 30px; box-shadow: var(--shadow-card);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tile:hover { border-color: #D2DDD5; box-shadow: var(--shadow-lift); }
.tile--capture { grid-column: span 6; }
.tile--coach { grid-column: span 6; }
.tile__head { display: flex; flex-direction: column; gap: 10px; }
.tile__head .h3 { margin-top: 8px; }
.tile__head p { font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 48ch; }
.tile__icon {
  width: 46px; height: 46px; border-radius: 15px; font-size: 21px;
  display: grid; place-items: center;
  background: var(--green-wash); color: var(--green);
}

/* A soft light that follows the pointer across cards (fx.js sets --mx/--my). */
[data-spot]::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(14, 122, 90, 0.09), transparent 62%);
}
[data-spot]:hover::before { opacity: 1; }
/* On the night bands the light is gold and rides above the band's backdrop
   (::after comes after .hero__bg / .cta__bg in paint order) but under the copy. */
.night[data-spot]::before { display: none; }
.night[data-spot]::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(620px circle at var(--mx, 70%) var(--my, 30%), rgba(235, 212, 138, 0.1), transparent 62%);
}
.night[data-spot]:hover::after { opacity: 1; }

/* --- Capture demo -------------------------------------------------------- */
.sms { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.seg {
  align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px;
  background: var(--wash); border: 1px solid var(--line); border-radius: 22px;
}
.seg button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 0; border-radius: var(--pill); padding: 7px 14px;
  cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.seg button .ico { font-size: 15px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'] {
  background: var(--card); color: var(--green);
  box-shadow: 0 1px 2px rgba(13, 31, 23, 0.08), 0 6px 14px -8px rgba(13, 31, 23, 0.22);
}
.sms__stage { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.sms__in {
  position: relative; overflow: hidden; min-height: 196px;
  background: var(--wash); border: 1px solid var(--line);
  border-radius: 20px 20px 20px 6px; padding: 14px 16px;
}
.sms__src { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.sms__text { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.sms__text.is-typing::after {
  content: ''; display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px;
  vertical-align: -2px; background: var(--green-accent);
  animation: caret 0.8s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.sms__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 45%; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(201, 162, 39, 0), rgba(201, 162, 39, 0.18) 75%, rgba(201, 162, 39, 0.65));
}
.sms.is-scanning .sms__scan { animation: scan 0.8s var(--ease-out) both; }
@keyframes scan {
  0% { opacity: 0; transform: translateY(-100%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(240%); }
}
.sms__arrow {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-wash); color: var(--green); font-size: 18px;
}
.txn {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'icon body' 'icon foot';
  column-gap: 12px; row-gap: 12px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px; box-shadow: 0 22px 44px -28px rgba(13, 31, 23, 0.4);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.sms.is-busy .txn { opacity: 0.2; transform: translateY(8px) scale(0.97); }
.txn__icon {
  grid-area: icon; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--gold-wash); color: #7A6114;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.txn__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.txn__body b { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.txn__body span { font-size: 12.5px; color: var(--ink-3); }
.txn__foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.txn__amt { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.txn__tag {
  font-size: 10.5px; font-weight: 700;
  color: var(--green-accent); background: var(--green-wash);
  border-radius: var(--pill); padding: 3px 9px;
}

/* --- Coach demo ---------------------------------------------------------- */
.chat { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.chat__log {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  min-height: 196px; padding: 16px; border-radius: 22px;
  background: var(--wash); border: 1px solid var(--line);
}
.bubble { max-width: 88%; padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.bubble--me { align-self: flex-end; background: var(--green); color: #fff; border-radius: 18px 18px 6px 18px; }
.bubble--them {
  align-self: flex-start; background: var(--card); color: #2E3B34;
  border: 1px solid var(--line); border-radius: 18px 18px 18px 6px;
}
.bubble--typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-decor); animation: dots 1.1s ease-in-out infinite; }
.bubble--typing i:nth-child(2) { animation-delay: 0.15s; }
.bubble--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.bubble.is-new { animation: pop 0.4s var(--ease-out) both; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__chips button {
  min-height: 36px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--green);
  background: var(--green-wash); border: 1px solid transparent; border-radius: var(--pill);
  padding: 7px 12px; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chat__chips button:hover { border-color: rgba(14, 89, 64, 0.3); }
.chat__chips button[aria-pressed='true'] { background: var(--green); color: #fff; }
.chat__fine { font-size: 12px; color: var(--ink-3); }

/* --- Survival demo ------------------------------------------------------- */
.survive { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.survive__facts { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); }
.survive__facts b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.survive__label { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.survive__label output { font-family: var(--font-display); font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.survive__meter { position: relative; height: 12px; margin-top: 18px; border-radius: var(--pill); background: #EEF2EE; }
.survive__fill {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%);
  border-radius: inherit; background: linear-gradient(90deg, #E0B23E, #D9822B);
  transition: width 0.45s var(--ease-out);
}
.survive.is-safe .survive__fill { background: linear-gradient(90deg, #0E7A5A, #2FA37B); }
.survive__payday {
  position: absolute; inset-inline-end: 0; bottom: calc(100% + 6px);
  font-size: 11px; font-weight: 700; color: var(--ink-3);
}
.survive__msg { font-size: 14px; font-weight: 600; line-height: 1.5; min-height: 3em; color: #8A5A12; }
.survive.is-safe .survive__msg { color: var(--green); }

/* A native range input, restyled. The track fill follows --fill (fx.js). */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--green-accent) var(--fill, 65%), #DFE6DF var(--fill, 65%));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--gold);
  box-shadow: 0 4px 12px -2px rgba(13, 31, 23, 0.35);
}
.range::-moz-range-track { height: 6px; border-radius: var(--pill); background: #DFE6DF; }
.range::-moz-range-progress { height: 6px; border-radius: var(--pill); background: var(--green-accent); }
.range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--gold);
  box-shadow: 0 4px 12px -2px rgba(13, 31, 23, 0.35);
}

/* --- Budgets demo -------------------------------------------------------- */
.bars { margin-top: auto; display: flex; flex-direction: column; gap: 15px; }
.bars__row { display: grid; grid-template-columns: 1fr auto; row-gap: 7px; font-size: 13.5px; font-weight: 600; }
.bars__row span:nth-child(2) { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.bars__row i { grid-column: 1 / -1; position: relative; height: 8px; border-radius: var(--pill); background: #EEF2EE; overflow: hidden; }
.bars__row i::after {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: var(--w);
  border-radius: inherit; background: linear-gradient(90deg, #0E7A5A 55%, #E0B23E);
}
.bars__row--over i::after { background: linear-gradient(90deg, #0E7A5A 40%, #D64545); }

/* --- Leaks demo ---------------------------------------------------------- */
.leaks { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.leaks li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: 14px; background: var(--wash); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600;
}
.leaks em { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.leaks b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.leaks__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 14px; border-top: 1px dashed var(--line-strong);
  font-size: 13.5px; color: var(--ink-2);
}
.leaks__total b {
  font-family: var(--font-display); font-size: 28px; letter-spacing: -0.035em;
  color: var(--green); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   How it works — one phone, three steps. On wide screens the phone sticks
   and swaps screens as each step reaches the middle of the viewport.
   ========================================================================== */
.how__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px; margin-top: 56px; align-items: start;
}
.how__sticky { position: sticky; top: calc(var(--nav-h) + 48px); display: flex; justify-content: center; }
.device--light { width: 300px; height: 630px; }
.device--light img {
  position: absolute; left: 9px; top: 9px; width: calc(100% - 18px); height: calc(100% - 18px);
  object-fit: cover; object-position: top center; border-radius: 42px;
  opacity: 0; transform: scale(1.03);
  transition: opacity 0.6s ease, transform 0.8s var(--ease-out);
}
.device--light img.is-on { opacity: 1; transform: none; }
.how__steps { display: flex; flex-direction: column; }
.how__step {
  position: relative; min-height: 58vh; padding-block: 28px; padding-inline: 36px 0;
  display: flex; flex-direction: column; justify-content: center;
  border-inline-start: 2px solid var(--line-strong);
  transition: opacity 0.5s ease;
}
.how__step::before {
  content: ''; position: absolute; inset-inline-start: -2px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--green-accent), var(--gold));
  transform: scaleY(0); transform-origin: top; transition: transform 0.7s var(--ease-out);
}
.how__step.is-on::before { transform: scaleY(1); }
html.js .how__step { opacity: 0.42; }
html.js .how__step.is-on { opacity: 1; }
.how__n { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--gold-text); }
.how__step h3 { font-size: clamp(1.6rem, 2.7vw, 2.2rem); letter-spacing: -0.035em; line-height: 1.12; margin: 12px 0 14px; }
.how__step p { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 44ch; }
.how__shot { display: none; }

/* ==========================================================================
   Susu — a night band. A drawn circle plays out real rounds (fx.js, "Susu
   circle"), in the app's own ring language: seat 0 at 12 o'clock, a gold arc
   for the share of the cycle collected, a gold dot pointing at whoever
   collects. Classic circles only — members pay each other hand to hand and
   SikaNest keeps the record — so nothing here travels to or through a pot.
   The markup is a finished frame; motion only ever moves between frames.
   ========================================================================== */
.susu {
  overflow: hidden; isolation: isolate;
  background: radial-gradient(85% 80% at 10% 16%, #0F4A36 0%, #0B3D2E 34%, #06251B 74%);
  view-timeline-name: --susu;
}
.susu__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.susu .h2 { margin: 16px 0 18px; }

.susu__beats { display: grid; gap: 6px; margin-top: 30px; max-width: 540px; }
.susu__beat {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 3px 14px; align-items: start;
  padding: 14px 16px; border-radius: 18px; border: 1px solid transparent;
}
/* The beat being acted out on the ring: a gold rule, a lit icon, a white
   title. The others keep their full colour — never dimmed by opacity. */
.susu__beat::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px;
  background: var(--gold-hi); transform: scaleY(0);
}
.susu__beat-ico {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; font-size: 18px;
  display: grid; place-items: center; color: var(--gold-hi); background: rgba(235, 212, 138, 0.1);
}
.susu__beat b { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--night-ink); }
.susu__beat > span:last-child { font-size: 14.5px; line-height: 1.55; color: var(--night-ink-2); }
.susu__beat.is-lit { background: rgba(255, 255, 255, 0.05); border-color: var(--night-line); }
.susu__beat.is-lit::before { transform: none; }
.susu__beat.is-lit .susu__beat-ico { background: var(--gold-hi); color: var(--gold-ink); }
.susu__beat.is-lit b { color: #fff; }
.susu__note { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-inline-start: 16px; font-size: 14px; color: var(--night-ink-2); }
.susu__note .ico { font-size: 16px; color: var(--gold-hi); }

.susu__stage { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.susu__figure { position: relative; width: 100%; max-width: 520px; container-type: inline-size; }
.susu__dial { position: relative; aspect-ratio: 1; }
/* A slow dashed orbit behind the ring; scroll turns it (see Motion). */
.susu__orbit {
  position: absolute; inset: -16%; z-index: -1; border-radius: 50%;
  border: 1px dashed rgba(235, 212, 138, 0.16); pointer-events: none;
}
.susu__orbit::after { content: ''; position: absolute; inset: 13%; border-radius: 50%; border: 1px solid rgba(235, 212, 138, 0.07); }
.susu__svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }

.susu__track { fill: none; stroke: rgba(234, 243, 238, 0.12); stroke-width: 2; }
/* pathLength 1: the offset is 1 − collected/N. Empty, it is hidden rather
   than drawn at zero length, where a round cap would still paint a dot. */
.susu__arc { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 1; }
.susu__arc.is-empty { opacity: 0; }
.susu__dots { fill: none; stroke: rgba(234, 243, 238, 0.24); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 1; }
.susu__turn { transform: rotate(var(--turn, 0deg)); }
.susu__turn-dot { fill: var(--gold); stroke: var(--gold-hi); stroke-width: 3; }
.susu__hub { display: none; }
.susu__hub circle { fill: var(--gold); }
.susu__hub use { fill: none; stroke: var(--night); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* A seat: an outer <g> placed by fx.js (transform: translate), an inner one
   drawn round 0 0 so it can lift and its badges can pop about their centres. */
.susu__disc { fill: rgba(255, 255, 255, 0.07); stroke: rgba(234, 243, 238, 0.34); stroke-width: 1.5; }
.susu__init { font-family: var(--font-display); font-size: 22px; font-weight: 700; fill: var(--night-ink); text-anchor: middle; }
.susu__crown { fill: none; stroke: var(--gold-hi); opacity: 0; transform: scale(0.8); }
.susu__crown circle:first-child { stroke-width: 2.5; }
.susu__crown circle:last-child { stroke-width: 1.2; opacity: 0.5; }
.susu__seat.is-turn .susu__seat-in { transform: scale(1.1); }
.susu__seat.is-turn .susu__crown { opacity: 1; transform: none; }
.susu__seat.is-turn .susu__disc { fill: var(--gold-hi); stroke: var(--gold-hi); }
.susu__seat.is-turn .susu__init { fill: var(--gold-ink); }
.susu__seat.is-got .susu__disc, .susu__seat.is-got .susu__init { opacity: 0.55; }
.susu__seat.is-new { opacity: 0; }
.susu__badge { opacity: 0; transform: scale(0.4); }
.susu__badge circle, .susu__key circle { stroke: var(--night); stroke-width: 2.5; }
.susu__badge path, .susu__key path { fill: none; stroke: var(--night); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.susu__badge--paid circle { fill: var(--mint); }
.susu__badge--got circle { fill: var(--gold); }
.susu__seat.is-paid .susu__badge--paid, .susu__seat.is-got .susu__badge--got { opacity: 1; transform: none; }
.susu__tap, .susu__halo { fill: none; opacity: 0; }
.susu__tap { stroke: var(--mint); stroke-width: 2; }
.susu__halo { stroke: var(--gold-hi); stroke-width: 2.5; }

/* The ledger: a fixed box, tabular figures, so nothing shifts as it counts. */
.susu__ledger {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 28%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 3%; border-radius: 24px; text-align: center; font-variant-numeric: tabular-nums;
  background: #153229; border: 1px solid rgba(234, 243, 238, 0.1);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
}
/* Full-width lines: a name or tally changing length re-centres its text
   without moving the line's box (no layout shift). */
.susu__kicker, .susu__who, .susu__tally { width: 100%; }
.susu__kicker {
  font-size: 11px; font-size: clamp(11px, 2.25cqi, 12px);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-ink-2);
}
.susu__who {
  margin: 2px 0 6px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fff;
  font-size: 19px; font-size: clamp(16px, 4.1cqi, 22px);
}
.susu__tally { font-size: 13px; font-size: clamp(12px, 2.6cqi, 14px); color: var(--night-ink-2); }
.susu__bar { display: block; width: 62%; height: 5px; margin: 6px 0 8px; border-radius: 3px; background: rgba(234, 243, 238, 0.14); overflow: hidden; }
.susu__bar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(var(--p, 0)); }
.susu__due {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--pill);
  font-size: 12px; font-size: clamp(11px, 2.3cqi, 12.5px); font-weight: 700;
  color: var(--gold-hi); background: rgba(235, 212, 138, 0.12);
}
.susu__due .ico { font-size: 13px; transform-origin: 50% 2px; }
.susu__ledger.is-done .susu__who { font-size: 15px; font-size: clamp(14px, 3.1cqi, 17px); }
.susu__ledger.is-done .susu__tally,
.susu__ledger.is-done .susu__bar,
.susu__ledger.is-done .susu__due { display: none; }

.susu__controls {
  width: 100%; max-width: 520px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
}
.susu__size { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.susu__size-h { font-size: 13.5px; font-weight: 600; color: var(--night-ink-2); }
.susu .seg { background: rgba(255, 255, 255, 0.05); border-color: var(--night-line); }
.susu .seg button { min-width: 44px; justify-content: center; color: var(--night-ink-2); }
.susu .seg button:hover { color: #fff; }
.susu .seg button[aria-pressed='true'] { background: var(--gold-hi); color: var(--gold-ink); box-shadow: none; }
.motion-toggle--inline { position: relative; right: auto; bottom: auto; z-index: auto; }
.susu__key { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--night-ink-2); }
.susu__key li { display: inline-flex; align-items: center; gap: 8px; }
.susu__key svg { width: 18px; height: 18px; flex: none; overflow: visible; }
.susu__key .susu__key-turn circle:first-child { fill: none; stroke: var(--gold-hi); stroke-width: 2.5; }
.susu__key .susu__key-turn circle:last-child { fill: var(--gold-hi); stroke: none; }
/* High contrast drops backgrounds and paints every border: mark the beat
   being acted out, and any pressed segment, with the system highlight. */
@media (forced-colors: active) {
  .susu__beat { border-color: Canvas; }
  .susu__beat.is-lit { border-color: Highlight; }
  .seg button[aria-pressed='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ==========================================================================
   Tools — each card carries a small drawing of what it does. The markup is
   the drawing's last frame; on arrival it builds itself once (see Motion),
   using the app's welcome-tour beats and timings
   (artifacts/sikanest/constants/tourScenes.ts), and is still by 1.9s:
     fade 300 · pop 420 · rise 340 · drop 520 · grow 460 · draw 700 ·
     swing 560 · fan 420 · slide / enter / turn 420  (ms; --at = start,
     the 250ms lead included). A beat element is drawn round its own pivot
     at 0 0 and never carries a transform attribute.
   ========================================================================== */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.tool {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px;
  transition: transform 0.35s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.tool:hover, html.js .tool.rv.in:hover { transform: translateY(-4px); border-color: #D2DDD5; box-shadow: var(--shadow-lift); }
.tool h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 8px; }
.tool p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.tool.d1 { --rd: 90ms; }
.tool.d2 { --rd: 180ms; }
.tool.d3 { --rd: 270ms; }
.tools__hint { display: none; }

.tool__art {
  display: block; width: 100%; aspect-ratio: 2 / 1; max-height: 132px; margin-bottom: 20px;
  border-radius: 16px; background: var(--wash); border: 1px solid var(--line); overflow: hidden;
  transition: background-color 0.3s, border-color 0.3s;
}
.tool:hover .tool__art { background: #FBF8EE; border-color: #EEE4C6; }
.tool__art.is-replay { --rd: 0ms; }
.art { display: block; width: 100%; height: 100%; overflow: visible; }
.art text { font-family: var(--font-display); font-weight: 700; text-anchor: middle; }
.art [data-beat='draw'], .art [data-beat='grow'] { stroke-dasharray: 1 1; }
.art .a-paper { fill: #fff; stroke: var(--line-strong); stroke-width: 1.5; }
.art .a-faux { fill: rgba(13, 31, 23, 0.12); }
.art .a-gold { fill: var(--gold); }
.art .a-goldhi { fill: var(--gold-hi); }
.art .a-goldsoft { fill: var(--gold-wash); }
.art .a-goldink { fill: #8A6E14; }
.art .a-wash { fill: var(--green-wash); }
.art .a-mint { fill: var(--mint); }
.art .a-mintsoft { fill: #D8F3E6; }
.art .a-green { fill: var(--green); }
.art .a-em { fill: var(--green-accent); }
.art .a-sparkle { fill: var(--gold); }
.art .a-coinring { fill: none; stroke: var(--gold-hi); stroke-width: 1.8; }
.art .a-chk { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.art .a-ico { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.art .a-ico--gold { stroke: var(--gold-text); }
.art .a-ico--white { stroke: #fff; }
.art .a-ico--deep { stroke: var(--pine); }
.art .a-rule { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.art .a-track { fill: none; stroke: #E4EAE3; stroke-linecap: round; }
.art .a-pole { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.art .a-flag { fill: var(--gold); }
.art .a-hook { fill: none; stroke: #8A6E14; stroke-width: 2; stroke-linecap: round; }
/* Debt planner */
.art .a-num { font-size: 11px; fill: var(--green); }
.art .a-debt { fill: none; stroke: #F1D6D0; stroke-width: 10; stroke-linecap: round; }
.art .a-paid { fill: none; stroke: var(--green-accent); stroke-width: 10; stroke-linecap: round; }
.art .a-pellet { fill: var(--gold); stroke: #8A6E14; stroke-width: 1.5; }
.art .a-dotted { fill: none; stroke: var(--ink-decor); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.5 5; }
.art .a-band { fill: var(--green); }
.art .a-pip { fill: var(--line-strong); }
/* Business mode */
.art .a-note { fill: var(--green-accent); }
.art .a-notedot { fill: none; stroke: var(--mint); stroke-width: 1.6; }
.art .a-spark { fill: none; stroke: var(--green-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Susu circles */
.art .a-code { font-size: 13px; letter-spacing: 0.08em; fill: var(--gold-text); }
.art .a-ringline { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.art .a-open { fill: #fff; stroke: var(--ink-decor); stroke-width: 1.5; stroke-dasharray: 3 3; }
/* Subscriptions and What's coming */
.art .a-amber { fill: none; stroke: #B36E00; stroke-width: 3.5; stroke-linecap: round; }
.art .a-ambersoft { fill: #F7EDD2; }
.art .a-days { font-size: 9.5px; fill: #7A4E00; }
.art .a-amberline { fill: none; stroke: #B36E00; stroke-width: 2; }
.art .a-tick { fill: var(--ink-decor); }
.art .a-today { fill: none; stroke: var(--green-accent); stroke-width: 1.5; opacity: 0.4; }
/* Goals */
.art .a-fill { fill: none; stroke: var(--green-accent); stroke-width: 8; stroke-linecap: round; }
.art .a-nestline { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.art .a-weave { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
/* Group budgets */
.art .a-av { stroke: #fff; stroke-width: 3; }
.art .a-link { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.art .a-seg { fill: none; stroke-width: 14; stroke-linecap: butt; }
.art .a-seg--1 { stroke: var(--green-accent); stroke-linecap: round; }
.art .a-seg--2 { stroke: var(--gold); }
.art .a-seg--3 { stroke: var(--mint); }
.art .a-cap { fill: none; stroke: var(--gold-text); stroke-width: 2.5; stroke-linecap: round; }
/* Money Wrapped */
.art .a-boxline { stroke: var(--gold); stroke-width: 1.5; }

/* ==========================================================================
   Security — a night band
   ========================================================================== */
.security {
  overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 80% at 88% 18%, #0F4A36 0%, #0B3D2E 32%, #06251B 72%);
}
.security__glow {
  position: absolute; z-index: -1; left: -10%; bottom: -30%; width: 60%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(127, 220, 180, 0.1), transparent);
}
.security .h2 { margin: 16px 0 18px; }
.sec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.sec__tile {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px;
  border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--night-line);
}
.sec__tile .ico { font-size: 20px; color: var(--gold-hi); margin-top: 2px; }
.sec__tile span { font-size: 14px; line-height: 1.5; color: var(--night-ink-2); }
.sec__tile b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; }
.sec__tile a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.sec__tile a:hover { color: #fff; }

.vault { position: relative; display: flex; flex-direction: column; align-items: center; }
.vault__seal { position: relative; z-index: 2; width: 136px; height: 136px; display: grid; place-items: center; margin-bottom: -48px; }
.vault__seal::before {
  content: ''; position: absolute; inset: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #17614A, #0A2F22 70%);
  border: 1px solid rgba(235, 212, 138, 0.4);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.vault__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(235, 212, 138, 0.32); }
.vault__shield {
  position: relative; width: 52px; height: 52px;
  fill: none; stroke: var(--gold-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(235, 212, 138, 0.5));
}
.datacard {
  width: 100%; max-width: 470px; padding: 62px 26px 26px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(234, 243, 238, 0.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.datacard h3 {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint);
}
.datacard h3.is-deny { color: var(--coral); margin-top: 22px; }
.datacard ul { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.datarow {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(127, 220, 180, 0.07); border: 1px solid rgba(127, 220, 180, 0.18);
  font-size: 14.5px; font-weight: 500; color: var(--night-ink);
}
.datarow .ico {
  width: 24px; height: 24px; padding: 5px; border-radius: 50%; stroke-width: 3;
  background: rgba(127, 220, 180, 0.16); color: var(--mint);
}
.datarow--deny { background: rgba(242, 169, 159, 0.05); border-color: rgba(242, 169, 159, 0.18); color: var(--night-ink-2); }
.datarow--deny .ico { background: rgba(242, 169, 159, 0.14); color: var(--coral); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.billing {
  display: flex; gap: 4px; width: max-content; margin: 36px auto 0; padding: 5px;
  border-radius: var(--pill); background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.billing button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 0; border-radius: var(--pill); padding: 8px 18px;
  cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.billing button[aria-pressed='true'] { background: var(--pine); color: #fff; }
.billing__save {
  font-size: 11px; font-weight: 700; color: var(--gold-text); background: var(--gold-wash);
  border-radius: var(--pill); padding: 2px 8px;
}
.billing button[aria-pressed='true'] .billing__save { background: rgba(235, 212, 138, 0.2); color: var(--gold-hi); }
.tiers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 390px));
  justify-content: center; gap: 22px; margin-top: 36px;
}
.tier {
  position: relative; display: flex; flex-direction: column; text-align: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 30px;
  padding: 36px 32px 32px; box-shadow: var(--shadow-card);
}
.tier__name { font-size: 18px; font-weight: 700; }
.tier__price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 8px; }
.tier__price b {
  font-family: var(--font-display); font-weight: 700; font-size: 54px; line-height: 1;
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
}
.tier__price b.is-swap { animation: swap 0.45s var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tier__price > span { font-size: 15px; color: var(--ink-3); }
.tier__sub { font-size: 14px; color: var(--ink-3); min-height: 1.6em; }
.tier ul {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  margin: 26px 0 30px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 15px; color: #374842;
}
.tier li { display: flex; gap: 10px; align-items: flex-start; }
.tier li .ico {
  width: 21px; height: 21px; padding: 4.5px; margin-top: 1px; border-radius: 50%; stroke-width: 3;
  background: var(--green-wash); color: var(--green-accent);
}
.tier--hi {
  background: radial-gradient(120% 80% at 100% 0%, #125A43 0%, #0B3D2E 42%, #06251B 100%);
  border-color: rgba(235, 212, 138, 0.38); color: var(--night-ink);
  box-shadow: 0 50px 90px -46px rgba(6, 37, 27, 0.75);
}
.tier--hi .tier__price b { color: #fff; }
.tier--hi .tier__price > span, .tier--hi .tier__sub { color: var(--night-ink-2); }
.tier--hi ul { border-top-color: var(--night-line); color: var(--night-ink); }
.tier--hi li .ico { background: rgba(235, 212, 138, 0.16); color: var(--gold-hi); }
/* A light that runs around the Plus card's edge. Where @property is
   missing the angle stays put, which still reads as a gilded corner. */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tier--hi::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0deg, rgba(235, 212, 138, 0.95) 50deg,
    transparent 110deg, transparent 180deg, rgba(127, 220, 180, 0.7) 235deg, transparent 290deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.pricing__fine { margin-top: 26px; text-align: center; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-wrap__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-wrap__head .h2 { margin: 16px 0 18px; }
.faq-wrap__head a { text-decoration: underline; text-underline-offset: 3px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__item {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 0 24px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq__item[open] { border-color: #D2DDD5; box-shadow: var(--shadow-card); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.015em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__ind {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-wash); transition: background-color 0.25s;
}
.faq__ind::before, .faq__ind::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
  margin: -1px 0 0 -6px; border-radius: 2px; background: var(--green);
  transition: transform 0.3s var(--ease-out), background-color 0.25s;
}
.faq__ind::after { transform: rotate(90deg); }
.faq__item[open] .faq__ind { background: var(--green); }
.faq__item[open] .faq__ind::before, .faq__item[open] .faq__ind::after { background: #fff; }
.faq__item[open] .faq__ind::after { transform: rotate(0deg); }
.faq__a { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); padding: 0 0 22px; max-width: 62ch; }
/* Smooth open/close where the browser can animate to `height: auto`. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      height: 0; overflow: clip;
      transition: height 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
    }
    .faq__item[open]::details-content { height: auto; }
  }
}

/* ==========================================================================
   Call to action — a night band
   ========================================================================== */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 132px 0; text-align: center;
  background: radial-gradient(70% 90% at 50% 100%, #14573F 0%, #0B3D2E 42%, #06251B 82%);
}
.cta__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta__bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 70% at 50% 45%, rgba(6, 37, 27, 0.55), rgba(6, 37, 27, 0) 70%);
}
.cta__ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(235, 212, 138, 0.22);
  transform: translate(-50%, -50%);
}
.cta__ring--1 { width: 620px; height: 620px; border-style: dashed; }
.cta__ring--2 { width: 980px; height: 980px; border-color: rgba(235, 212, 138, 0.1); }
.cta__in { position: relative; max-width: 780px; }
.cta h2 {
  margin-top: 24px; font-size: clamp(2.2rem, 4.7vw, 3.7rem); font-weight: 700; color: #fff;
  line-height: 1.06; letter-spacing: -0.042em; text-wrap: balance;
}
.cta__lede { font-size: 17px; color: var(--night-ink-2); margin: 18px 0 34px; }
.cta__fine { font-size: 13px; color: var(--night-ink-2); margin-top: 28px; }

/* The way in: the stores' own badges, and on a computer a QR code that hands
   the visit to a phone. The badges are Apple's and Google's artwork, never
   redrawn, each cropped to the badge itself — so one height lines them up
   and the width follows. Apple asks for at least 40px on screen. */
.store-badges { --badge-h: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store-badges--lg { --badge-h: 52px; }
.store-badges--sm { --badge-h: 40px; gap: 10px; margin-top: 22px; }
.store-badge { display: inline-flex; border-radius: 11px; transition: transform 0.25s var(--ease-out), filter 0.25s; }
.store-badge img { display: block; height: var(--badge-h); width: auto; }
.store-badge:hover { transform: translateY(-2px); filter: brightness(1.15); }
.store-badge:focus-visible { outline-offset: 4px; }

.get { display: flex; align-items: center; justify-content: center; gap: 32px; }
.get .store-badges { justify-content: center; }
.get__rule { width: 1px; align-self: stretch; background: var(--night-line); }
.qr { display: flex; align-items: center; gap: 16px; text-align: start; }
/* White, with a quiet zone of ~3.5 modules: a scanner needs the contrast. */
.qr__code { flex: none; padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.6); }
.qr__code img { display: block; width: 120px; height: 120px; }
.qr__copy { max-width: 180px; font-size: 13.5px; line-height: 1.5; color: var(--night-ink-2); }
.qr__copy b { display: block; margin-bottom: 3px; font-size: 15px; color: #fff; }
/* A phone or tablet is already where the app goes: no code to scan. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .get__rule, .qr { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { border-top: 1px solid var(--night-line); }
.foot__in { padding: 72px var(--pad) 32px; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot__brand > img { height: 32px; width: auto; }
.foot__brand p { font-size: 14px; color: var(--night-ink-2); line-height: 1.6; max-width: 280px; margin-top: 16px; }
.foot__col h3 {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--night-ink-2); text-transform: uppercase;
}
.foot__col ul { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.foot__col a { font-size: 14.5px; color: rgba(242, 247, 244, 0.88); }
.foot__col a:hover { color: var(--gold-hi); }
.foot__base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--night-line);
  font-size: 13px; color: var(--night-ink-2);
}

/* ==========================================================================
   /download/ — the short link for bios, flyers and the QR code. A phone is
   sent straight on to its store; this is what a computer sees (and a phone
   without JS). /early-access/ forwards here.
   ========================================================================== */
.dl-body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: radial-gradient(70% 80% at 50% 100%, #14573F 0%, #0B3D2E 45%, #06251B 85%) var(--night);
}
.dl-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px var(--pad) 40px; text-align: center; }
.dl-card { max-width: 820px; }
.dl-card .brand { justify-content: center; }
.dl-card .brand img { height: 34px; }
.dl-card h1 {
  max-width: 620px; margin: 30px auto 0; font-size: clamp(2.1rem, 5.4vw, 3.3rem); font-weight: 700; color: #fff;
  line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance;
}
.dl-card p { margin: 16px auto 32px; max-width: 46ch; font-size: 17px; color: var(--night-ink-2); }
.dl-card .get { margin-top: 0; }
.dl-card p a { color: var(--gold-hi); font-weight: 600; }
.dl-card p a:hover { color: #fff; }
.dl-foot { padding: 22px var(--pad) 28px; text-align: center; font-size: 13px; color: var(--night-ink-2); }
.dl-foot a { color: var(--gold-hi); }
.dl-foot a:hover { color: #fff; }

/* ==========================================================================
   Motion — opt-in, and only when motion is welcome. Scroll reveals need the
   `js` class (set in the page head), so without JS everything renders
   visible. `.up` is a plain CSS entrance for the hero: it needs no script,
   so a failed script can never leave the headline invisible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  html.js .rv.in { opacity: 1; transform: none; }
  html.js .rv.d1 { transition-delay: 90ms; }
  html.js .rv.d2 { transition-delay: 180ms; }
  html.js .rv.d3 { transition-delay: 270ms; }

  .up { animation: up 0.9s var(--ease-out) both; animation-delay: var(--d, 0s); }
  @keyframes up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

  .hero__aurora { animation: aurora 26s ease-in-out infinite alternate; }
  @keyframes aurora {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
  }

  .pill__dot { animation: ping 2.4s var(--ease-out) infinite; }
  @keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(235, 212, 138, 0.55); }
    80%, 100% { box-shadow: 0 0 0 10px rgba(235, 212, 138, 0); }
  }

  /* The floating cards arrive one after another, then drift. */
  .float__card {
    animation: floatIn 0.9s var(--ease-out) both, bob 7s ease-in-out infinite;
    animation-delay: var(--d, 1s), calc(var(--d, 1s) + 0.9s);
  }
  .float--budget .float__card { animation-duration: 0.9s, 8s; }
  .float--coach .float__card { animation-duration: 0.9s, 9s; }
  @keyframes floatIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: none; } }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .mini-bar span { animation: grow 1.2s var(--ease-out) both; animation-delay: 2.1s; }
  @keyframes grow { from { width: 0; } }

  .marquee__track { animation: marquee 42s linear infinite; }
  @keyframes marquee { to { transform: translateX(-100%); } }

  html.js .rv .bars__row i::after { width: 0; transition: width 1.2s var(--ease-out); }
  html.js .rv.in .bars__row i::after { width: var(--w); }
  html.js .rv.in .bars__row:nth-child(2) i::after { transition-delay: 0.1s; }
  html.js .rv.in .bars__row:nth-child(3) i::after { transition-delay: 0.2s; }
  html.js .rv.in .bars__row:nth-child(4) i::after { transition-delay: 0.3s; }

  .vault__ring { animation: vault-ring 3.4s var(--ease-out) infinite; }
  .vault__ring--2 { animation-delay: 1.7s; }
  @keyframes vault-ring { from { transform: scale(0.72); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
  html.js .vault.rv .vault__shield path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out) 0.3s; }
  html.js .vault.rv.in .vault__shield path { stroke-dashoffset: 0; }

  /* Susu: the round loop (fx.js) only swaps classes; these carry it between
     frames. The one-shots restart by having their class put back. */
  .susu__beat, .susu__beat-ico { transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; }
  .susu__beat::before { transition: transform 0.45s var(--ease-out); }
  .susu__seat { transition: transform 0.8s var(--ease-out), opacity 0.45s ease; }
  .susu__seat-in { transition: transform 0.5s var(--ease-out); }
  .susu__disc { transition: fill 0.4s ease, stroke 0.4s ease, opacity 0.5s ease; }
  .susu__init { transition: fill 0.4s ease, opacity 0.5s ease; }
  .susu__crown { transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .susu__badge { transition: opacity 0.25s ease, transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .susu__turn { transition: transform 0.62s var(--ease-out); }
  .susu__arc { transition: stroke-dashoffset 0.9s var(--ease-out), opacity 0.5s ease; }
  .susu__bar i { transition: transform 0.4s var(--ease-out); }
  .susu__seat.is-tap .susu__tap { animation: susu-tap 0.6s var(--ease-out); }
  .susu__seat.is-halo .susu__halo { animation: susu-halo 0.95s var(--ease-out); }
  .susu__due.is-ring { animation: susu-chip 0.42s var(--ease-out); }
  .susu__due.is-ring .ico { animation: susu-bell 0.56s ease-in-out 0.12s; }
  .susu__arc.is-glint { animation: susu-glint 1.2s ease; }
  @keyframes susu-tap { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
  @keyframes susu-halo { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
  @keyframes susu-chip { 0% { opacity: 0.4; transform: scale(0.85); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
  @keyframes susu-bell { 0%, 100% { transform: none; } 25% { transform: rotate(-16deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } }
  @keyframes susu-glint { 40% { stroke: #F8EBBE; stroke-width: 9; } }

  /* Tool drawings: held at their first frame until app.js reveals the card
     (.in), then each beat plays once. Under reduced motion none of this
     applies, so the markup's last frame is simply there. */
  html.js .tool.rv .tool__art [data-beat] {
    animation: art-fade 420ms var(--ease-out) both paused;
    animation-delay: calc(var(--at, 0ms) + var(--rd, 0ms));
  }
  html.js .tool.rv .tool__art [data-beat='fade'] { animation-duration: 300ms; }
  html.js .tool.rv .tool__art [data-beat='pop'] { animation-name: art-pop; }
  html.js .tool.rv .tool__art [data-beat='rise'] { animation-name: art-rise; animation-duration: 340ms; }
  html.js .tool.rv .tool__art [data-beat='drop'] { animation-name: art-drop; animation-duration: 520ms; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  html.js .tool.rv .tool__art [data-beat='grow'] { animation-name: art-draw; animation-duration: 460ms; }
  html.js .tool.rv .tool__art [data-beat='draw'] { animation-name: art-draw; animation-duration: 700ms; }
  html.js .tool.rv .tool__art [data-beat='swing'] { animation-name: art-swing; animation-duration: 560ms; animation-timing-function: ease-in-out; }
  html.js .tool.rv .tool__art [data-beat='fan'] { animation-name: art-fan; }
  html.js .tool.rv .tool__art [data-beat='slide'] { animation-name: art-slide; }
  html.js .tool.rv .tool__art [data-beat='enter'] { animation-name: art-enter; }
  html.js .tool.rv .tool__art [data-beat='turn'] { animation-name: art-turn; }
  html.js .tool.rv.in .tool__art [data-beat] { animation-play-state: running; }
  /* fx.js replays a drawing by dropping every beat for one style flush. */
  html.js .tool.rv .tool__art.is-reset [data-beat] { animation: none; }
  @keyframes art-fade { from { opacity: 0; } }
  @keyframes art-pop { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 1; } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
  @keyframes art-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes art-drop { 0% { opacity: 0; transform: translateY(-40px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  /* A zero-length round-capped dash still paints a dot: hidden for the
     first moment instead. */
  @keyframes art-draw { 0% { opacity: 0; stroke-dashoffset: 1; } 6% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
  @keyframes art-swing { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
  @keyframes art-fan { 0% { opacity: 0; transform: rotate(var(--r, 0deg)); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  @keyframes art-slide { from { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
  @keyframes art-enter { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
  @keyframes art-turn { from { transform: rotate(var(--r, 0deg)); } }

  /* Headlines: the hero's words rise on load (pure CSS); section headings
     do the same when fx.js marks them `.words.is-in` on arrival. */
  .display .w { animation: wordUp 0.9s var(--ease-out) both; animation-delay: calc(0.12s + var(--i, 0) * 70ms); }
  .display .accent.w { animation-name: wordGlow; animation-duration: 1.1s; }
  @keyframes wordUp { from { opacity: 0; transform: translateY(0.5em) rotate(3deg); } to { opacity: 1; transform: none; } }
  @keyframes wordGlow { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
  html.js .words .w {
    opacity: 0; transform: translateY(0.45em) rotate(2deg);
    transition: opacity 0.6s ease, transform 0.9s var(--ease-out), filter 0.9s ease;
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  html.js .words .accent.w { transform: none; filter: blur(8px); }
  html.js .words.is-in .w { opacity: 1; transform: none; filter: none; }

  /* Eyebrow rules draw in with their section. */
  html.js .rv .eyebrow::before { width: 0; transition: width 0.9s var(--ease-out) 0.25s; }
  html.js .rv.in .eyebrow::before { width: 22px; }

  /* The hero as it scrolls away: --hp runs 0 → 1 (fx.js). */
  .hero .stage__inner { translate: 0 calc(var(--hp, 0) * -80px); scale: calc(1 - var(--hp, 0) * 0.08); }
  .hero .float--sms { translate: calc(var(--hp, 0) * -70px) calc(var(--hp, 0) * 50px); }
  .hero .float--budget { translate: calc(var(--hp, 0) * -60px) calc(var(--hp, 0) * -60px); }
  .hero .float--coach { translate: calc(var(--hp, 0) * 80px) calc(var(--hp, 0) * -30px); }
  .hero__copy { translate: 0 calc(var(--hp, 0) * 70px); opacity: calc(1 - var(--hp, 0) * 1.2); }

  /* Icons pop when their card is hovered. */
  .tile:hover .tile__icon .ico { animation: iconPop 0.6s var(--ease-out); }
  @keyframes iconPop { 35% { transform: scale(1.22) rotate(-10deg); } 65% { transform: scale(0.95) rotate(5deg); } }

  .tier--hi::after { animation: ring-spin 6s linear infinite; }
  @keyframes ring-spin { to { --spin: 360deg; } }


  .cta__ring--1 { animation: spin 90s linear infinite; }
  @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
}

/* The night bands open from a rounded card to the full width as they scroll
   in — scroll-driven, where the browser can tie an animation to the view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .security, .susu, .cta { animation: band-open linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes band-open { from { clip-path: inset(0 3.5% round 44px); } to { clip-path: inset(0 0 round 0px); } }
    /* The susu orbit turns as the band crosses the screen: scroll moves it,
       so it is not a loop and needs no pause. */
    .susu__orbit { animation: susu-orbit linear both; animation-timeline: --susu; animation-range: cover 0% cover 100%; }
    @keyframes susu-orbit { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-toggle { display: none; }
  .btn:hover, .store-badge:hover, .tool:hover, html.js .tool.rv.in:hover { transform: none; }
  .btn--gold::after { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { flex-wrap: wrap; justify-content: flex-start; row-gap: 12px; min-width: 0; }
  .marquee__track[aria-hidden='true'] { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Between the container's max width and the point where the hero stacks, the
   right column is narrower than the phone plus its floats. Pull them in
   rather than letting them spill out of the hero. */
@media (min-width: 1021px) and (max-width: 1240px) {
  .float--sms { left: -96px; }
  .float--budget { left: -74px; }
  .float--coach { right: -86px; }
}

@media (max-width: 1020px) {
  :root { --sec-y: 88px; }

  .hero { padding-top: 48px; }
  .hero__in { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding-bottom: 32px; }
  .hero__lede { max-width: 620px; }
  .stage { min-height: 0; padding: 36px 0 24px; }
  /* Stacked, the copy fills the top half at full width, so the side fade no
     longer covers it: hold a scrim over that half so the film's gold threads
     can't pass behind the paragraph at low contrast, then let it show round
     the phone. */
  .hero__fade { background: linear-gradient(180deg, rgba(6, 37, 27, 0.74) 0%, rgba(6, 37, 27, 0.7) 55%, rgba(6, 37, 27, 0) 70%, rgba(6, 37, 27, 0) 82%, var(--night) 100%); }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile--capture, .tile--coach { grid-column: span 1; }
  .tile--capture { grid-column: 1 / -1; }

  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px 24px; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Nav → drawer (only the home nav has links to fold away). */
  .nav__in { flex-wrap: wrap; column-gap: 12px; }
  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; cursor: pointer;
    background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink);
  }
  .nav--night .nav__burger { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
  .nav__links, .nav__cta { display: none; width: 100%; }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--line); padding-top: 6px;
    max-height: calc(100dvh - 140px); overflow-y: auto;
  }
  .nav.is-open .nav__links a { padding: 14px 4px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__links a:hover { background: none; }
  .nav.is-open .nav__cta { display: block; padding: 14px 0 8px; }
  .nav.is-open .nav__cta .btn { width: 100%; }
  .nav--night.is-open { background: rgba(6, 37, 27, 0.97); }
  .nav--night.is-open .nav__links { border-top-color: var(--night-line); }
  .nav--night.is-open .nav__links a { border-bottom-color: var(--night-line); }
  .nav__ink { display: none; }
  .nav--night .nav__links a[aria-current] { color: var(--gold-hi); }

  .section-head--split { grid-template-columns: 1fr; }

  /* One column: the sticky phone gives way to a screenshot under each step. */
  .how__grid { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .how__sticky { display: none; }
  .how__step { min-height: 0; padding: 26px 0 34px 28px; }
  html.js .how__step { opacity: 1; }
  .how__step::before { transform: scaleY(1); }
  .how__shot {
    display: block; width: 236px; margin-top: 24px; padding: 8px; border-radius: 40px;
    background: linear-gradient(150deg, #34463E 0%, #0C1712 38%, #050A08 100%);
    box-shadow: 0 30px 60px -30px rgba(13, 31, 23, 0.55);
  }
  .how__shot img { border-radius: 32px; }

  .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq-wrap__head { position: static; }
}

@media (max-width: 700px) {
  :root { --sec-y: 72px; --pad: 20px; }

  .display { font-size: clamp(2.35rem, 10.5vw, 3.4rem); }
  .hero__lede { font-size: 16.5px; }
  .hero__ctas .btn { flex: 1 1 auto; }

  .stage__inner { width: min(268px, 70vw); }
  .stage__halo { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .device { border-radius: 44px; padding: 8px; }
  .device img { border-radius: 36px; }
  .float--budget { display: none; }
  .float--sms { left: -34px; bottom: 40px; width: min(250px, 76vw); }
  .float--sms .float__tag { display: none; }
  .float--coach { right: -30px; top: 22%; width: min(222px, 64vw); }

  .proof__in { flex-direction: column; align-items: stretch; gap: 18px; }
  .marquee__track li { font-size: 16px; }

  .bento { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
  .tile, .tile--capture { grid-column: 1 / -1; padding: 24px 20px; border-radius: 24px; }
  .sms__stage { grid-template-columns: 1fr; }
  .sms__arrow { justify-self: center; transform: rotate(90deg); }
  .sms__in { min-height: 0; }

  /* Eight stacked cards get long on a phone: a swipeable row instead, the
     next card peeking in. Each drawing plays as its card is swiped into
     view — app.js's reveal is clipped by the row, so off-screen cards wait. */
  .tools {
    display: flex; gap: 12px; margin: 40px calc(var(--pad) * -1) 0; padding: 4px var(--pad) 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none;
  }
  .tools::-webkit-scrollbar { display: none; }
  .tool { flex: 0 0 min(80%, 320px); scroll-snap-align: start; padding: 18px; }
  .tool__art { margin-bottom: 16px; }
  .tools__hint {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px;
    font-size: 13px; font-weight: 600; color: var(--ink-3);
  }
  .sec { grid-template-columns: 1fr; }

  .tiers { grid-template-columns: minmax(0, 440px); gap: 28px; }
  .tier { padding: 32px 24px 26px; }

  .faq__item { padding: 0 18px; }
  .faq__q { font-size: 15.5px; }

  .cta { padding: 96px 0; }
  .cta__ring--1 { width: 440px; height: 440px; }
  .cta__ring--2 { width: 720px; height: 720px; }

  .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot__base { margin-top: 36px; }
}

@media (max-width: 480px) {
  .store-badges--lg { --badge-h: 46px; }
  .float--sms { left: 50%; bottom: 18px; margin-left: calc(min(250px, 84vw) / -2); width: min(250px, 84vw); }
  .float--coach { display: none; }

  /* The ring takes the full width; the ledger steps out from its centre to
     sit underneath, and the centre gets the turn's rotate mark instead. */
  .susu__hub { display: inline; }
  .susu__ledger {
    position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; min-height: 112px;
    align-items: flex-start; text-align: start; margin-top: 14px; padding: 16px 18px; border-radius: 20px;
  }
  .susu__bar { width: 100%; }
  .susu__due { position: absolute; top: 16px; inset-inline-end: 16px; }
  .susu .seg { display: inline-flex; align-self: auto; }
  .susu .seg button { padding: 7px 12px; }
  .seg { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; }
  .seg button { justify-content: center; padding: 7px 10px; font-size: 13px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Legal documents — /privacy/ and /terms/
   One long readable column with a sticky contents rail. Everything here is
   scoped under `.doc` so it cannot reach the marketing page, and it reuses the
   existing tokens rather than introducing a second palette.
   ========================================================================== */
.doc-body { min-height: 100vh; display: flex; flex-direction: column; }
.doc-main { flex: 1; padding: 40px 0 72px; }

/* --- Masthead ------------------------------------------------------------ */
.doc-head { max-width: 820px; }
.doc-head h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.08; margin-top: 14px; text-wrap: balance;
}
.doc-head .lede { font-size: clamp(1rem, 1.5vw, 1.1rem); margin-top: 16px; max-width: 68ch; }

/* Last-updated / version / effective-date strip. Definition list so the
   labels stay machine-readable rather than being bare styled spans. */
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.doc-meta div { display: flex; flex-direction: column; gap: 3px; }
.doc-meta dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--ink-3); text-transform: uppercase;
}
.doc-meta dd { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }

/* --- Body + contents rail ------------------------------------------------ */
.doc-layout {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px; align-items: start; margin-top: 48px;
}
.doc-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.doc-toc h2 {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase;
}
.doc-toc ol {
  margin-top: 14px; display: flex; flex-direction: column; gap: 2px;
  counter-reset: toc; list-style: none;
}
.doc-toc a {
  display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
  padding: 6px 10px; border-radius: 9px; border-inline-start: 2px solid transparent;
}
.doc-toc a:hover { color: var(--green); background: var(--wash); }
.doc-toc li { counter-increment: toc; }
.doc-toc a::before { content: counter(toc) ". "; color: var(--ink-decor); font-variant-numeric: tabular-nums; }

.doc-prose { max-width: 74ch; min-width: 0; }

/* scroll-margin keeps a linked heading clear of the sticky nav. */
.doc-prose section { scroll-margin-top: calc(var(--nav-h) + 20px); }
.doc-prose section + section { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
.doc-prose h2 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  line-height: 1.25; letter-spacing: -0.015em; display: flex; gap: 12px;
}
.doc-prose h2 .doc-n {
  color: var(--green-accent); font-variant-numeric: tabular-nums; flex: none;
}
.doc-prose h3 {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  margin-top: 26px; color: var(--ink);
}
.doc-prose p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.doc-prose h2 + p, .doc-prose h3 + p { margin-top: 12px; }
.doc-prose strong { color: var(--ink); font-weight: 700; }
.doc-prose a:not(.btn) { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.doc-prose a:not(.btn):hover { color: var(--green-hover); }

.doc-prose ul, .doc-prose ol.doc-num {
  margin-top: 14px; display: grid; gap: 10px; padding-inline-start: 0; list-style: none;
}
.doc-prose ul > li {
  position: relative; padding-inline-start: 22px;
  font-size: 15.5px; line-height: 1.65; color: var(--ink-2);
}
.doc-prose ul > li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-decor);
}
.doc-prose ol.doc-num { counter-reset: dn; }
.doc-prose ol.doc-num > li {
  position: relative; padding-inline-start: 30px; counter-increment: dn;
  font-size: 15.5px; line-height: 1.65; color: var(--ink-2);
}
.doc-prose ol.doc-num > li::before {
  content: counter(dn); position: absolute; inset-inline-start: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--green-wash); color: var(--green);
  font-size: 11.5px; font-weight: 700; line-height: 21px; text-align: center;
}

/* Callout for the things a reader must not miss (custody, not-advice). */
.doc-note {
  margin-top: 18px; border-inline-start: 3px solid var(--gold);
  background: var(--gold-wash); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 18px;
}
.doc-note p { margin-top: 0; color: #3D3108; font-size: 15px; }
.doc-note p + p { margin-top: 10px; }

/* --- Tables (processors, retention, legal bases) ------------------------- */
/* The wrapper scrolls, not the page: a 3-column table cannot fit 360px. */
.doc-table-wrap {
  margin-top: 18px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
}
.doc-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.doc-table caption { text-align: start; padding: 14px 16px 0; font-size: 12.5px; color: var(--ink-3); }
.doc-table th, .doc-table td {
  text-align: start; padding: 12px 16px; font-size: 14px; line-height: 1.55;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.doc-table thead th {
  background: var(--wash); color: var(--ink-3); font-size: 11.5px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.doc-table tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.doc-table td { color: var(--ink-2); }
.doc-table tbody tr:last-child th, .doc-table tbody tr:last-child td { border-bottom: 0; }

/* --- Contact block + cross-link ----------------------------------------- */
.doc-contact { margin-top: 18px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.doc-contact p { margin-top: 0; }
.doc-contact p + p { margin-top: 8px; }

.doc-jump {
  margin-top: 56px; display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); padding-top: 26px;
}
.doc-jump p { margin: 0; font-size: 14px; color: var(--ink-3); }

/* A placeholder the founder must replace before publishing. Deliberately
   conspicuous so it cannot ship unnoticed. */
.doc-fill {
  background: var(--gold-wash); border-bottom: 1px dashed var(--gold);
  color: var(--gold-text); font-weight: 700; padding: 0 3px;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1020px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* Unsticks and becomes a collapsed index above the text. */
  .doc-toc {
    position: static; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px;
  }
  .doc-toc ol { margin-top: 12px; }
}

@media (max-width: 700px) {
  .doc-main { padding: 28px 0 56px; }
  .doc-meta { gap: 12px 22px; }
  .doc-prose { max-width: none; }
  .doc-prose section + section { margin-top: 34px; padding-top: 34px; }
  .doc-prose h2 { font-size: 1.2rem; gap: 9px; }
  .doc-prose p, .doc-prose ul > li, .doc-prose ol.doc-num > li { font-size: 15px; }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .nav, .doc-toc, .doc-jump, .skip { display: none !important; }
  .doc-layout { display: block; }
  .doc-main { padding: 0; }
  .doc-prose { max-width: none; }
  .doc-prose section { break-inside: auto; }
  .doc-prose h2, .doc-prose h3 { break-after: avoid; }
  .doc-note, .doc-contact, .doc-table-wrap { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

/* --- Languages and regions -------------------------------------------------
   One region's money and words: dollars and the international copy unless
   js/locale.js found the visitor in Ghana (it sets html[data-region] before
   paint). With no script at all the page is the international edition. */
/* An amount is one unit in any direction: "406 $" must not come apart
   inside an Arabic sentence. */
.money { unicode-bidi: isolate; }
html:not([data-region="gh"]) [data-region-only="gh"],
html[data-region="gh"] [data-region-only="intl"] { display: none !important; }
.fx-copy[hidden], [data-legal-notice][hidden] { display: none !important; }
/* Plus with no price on sale in the visitor's currency (fx.js): the plan,
   without a dash for a number or a monthly/yearly switch with nothing to switch. */
html.plus-unpriced .tier--hi .tier__price, html.plus-unpriced .tier--hi .tier__sub, html.plus-unpriced .billing { display: none; }

/* The language switcher: a <details>, so it opens without script too. */
.langs { position: relative; font-size: 13.5px; }
.langs__btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
  border-radius: var(--pill); cursor: pointer; list-style: none; user-select: none;
  color: inherit; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 28%, transparent);
}
.langs__btn::-webkit-details-marker { display: none; }
.langs__btn:hover, .langs[open] .langs__btn { border-color: color-mix(in srgb, currentColor 55%, transparent); }
.langs__ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.langs__list {
  position: absolute; z-index: 60; inset-inline-end: 0; top: calc(100% + 8px); margin: 0; padding: 6px;
  min-width: 200px; max-height: min(420px, 70vh); overflow-y: auto; list-style: none;
  background: #fff; color: var(--ink); border-radius: 14px; box-shadow: 0 18px 50px rgba(6, 37, 27, 0.22);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.langs__list a { display: block; padding: 8px 10px; border-radius: 9px; color: inherit; text-decoration: none; white-space: nowrap; }
.langs__list a:hover, .langs__list a:focus-visible { background: var(--green-wash); }
.langs__list a[aria-current="true"] { font-weight: 700; color: var(--green); }
.langs--foot .langs__list { top: auto; bottom: calc(100% + 8px); inset-inline-end: auto; inset-inline-start: 0; }
.nav__cta { display: flex; align-items: center; gap: 10px; }
@media (max-width: 720px) {
  .langs--nav .langs__btn span:not(.sr-only) { display: none; }
  .langs--nav .langs__btn { padding: 7px; }
  .langs__list { grid-template-columns: 1fr; min-width: 170px; }
}

/* Scripts the brand fonts cannot draw. Sora and Instrument Sans carry Latin
   only (their @font-face unicode-range says so), so each language names the
   system faces that draw its script next; Latin letters inside still come
   out in the brand fonts. */
html:lang(ja) { --font-display: 'Sora', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif; --font-body: 'Instrument Sans', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif; }
html:lang(ko) { --font-display: 'Sora', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif; --font-body: 'Instrument Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif; }
html:lang(zh-Hans) { --font-display: 'Sora', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif; --font-body: 'Instrument Sans', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif; }
html:lang(hi) { --font-display: 'Sora', 'Kohinoor Devanagari', 'Nirmala UI', 'Noto Sans Devanagari', system-ui, sans-serif; --font-body: 'Instrument Sans', 'Kohinoor Devanagari', 'Nirmala UI', 'Noto Sans Devanagari', system-ui, sans-serif; }
html:lang(ar) { --font-display: 'Sora', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', system-ui, sans-serif; --font-body: 'Instrument Sans', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', system-ui, sans-serif; }
html:lang(ru) { --font-display: 'Sora', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif; }
/* Letter-spacing pulls Arabic letters apart and breaks Devanagari conjuncts;
   the accent face is a Latin italic that other scripts would only fake. */
html:lang(ar) *, html:lang(hi) * { letter-spacing: 0 !important; }
html:is(:lang(ja), :lang(ko), :lang(zh-Hans), :lang(hi), :lang(ar)) .accent { font-family: var(--font-display); font-style: normal; }
html:is(:lang(ja), :lang(ko), :lang(zh-Hans)) body { line-break: strict; word-break: normal; overflow-wrap: anywhere; }

/* Right to left (Arabic). The layout above uses logical properties where
   reading direction matters; what is left is what points somewhere. */
[dir="rtl"] .susu__bar i { transform-origin: right; }
[dir="rtl"] .sms__arrow .ico, [dir="rtl"] .tools__hint .ico, [dir="rtl"] .btn .ico { transform: scaleX(-1); }
[dir="rtl"] .marquee__track { direction: ltr; }