/* Fonts extracted VERBATIM from App Shell (Standalone).html — identical
   rendering to the mockup (same files, same unicode-range subsets),
   self-hosted, zero external calls. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-4b175383.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-560d9f41.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-2cba32d0.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-38c3847f.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-4b175383.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-560d9f41.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-2cba32d0.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-38c3847f.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-4b175383.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-560d9f41.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-2cba32d0.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-38c3847f.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-4b175383.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-560d9f41.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-2cba32d0.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-38c3847f.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-c40fec4c.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-1742d56d.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-c0781ea2.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-c40fec4c.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-1742d56d.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-c0781ea2.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-c40fec4c.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-1742d56d.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-c0781ea2.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-c40fec4c.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-1742d56d.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-c0781ea2.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-4e8fa4bb.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bt-0309594d.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-4e8fa4bb.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/bt-0309594d.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-4e8fa4bb.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/bt-0309594d.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-4e8fa4bb.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bt-0309594d.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;
}

/*
 * BuildTrade design tokens — VERBATIM copy of the design-system's
 * colors_and_type.css (v3 Voltage, locked). Fonts are self-hosted via
 * src/mockup/fonts.css (identical files to the mockup bundle) — the
 * Google Fonts @import is the only removed line.
 * Legacy compatibility aliases are appended below for the pre-v3
 * components that still exist until Phase C cleanup.
 */
/* ============================================================
   BuildTrade™ — Colors, Type & Tokens  (v3 · Voltage system)
   LOCKED 2026-06-17. Source of truth for every color/font/space.
   Reference via CSS custom properties. Never hardcode a color.

   Decision: Voltage (electric cyan) · Balanced presence · Cool
   graphite · Grotesk type · Spline Sans Mono numerals · Dark default.
   See research/ dossiers + MOCKUP_ROADMAP.md decision log.
   ============================================================ */


/* ============================================================
   THEME: DARK ("Graphite") — default
   ============================================================ */
:root {
  /* ─── Surfaces (cool graphite, layered for depth — never #000) ─ */
  --color-bg-primary:    #0b0c11;   /* app background */
  --color-bg-secondary:  #0f1016;   /* nav / panel backgrounds */
  --color-bg-tertiary:   #15161c;   /* nested containers, hover wells */
  --color-surface:       #15161c;   /* cards, elevated surfaces */
  --color-surface-2:     #1a1c24;   /* surface raised one more level */
  --color-surface-hover: #1f2230;   /* interactive surface hover */
  --color-bg-elevated:   #1c1e27;   /* floating menus / popovers over the chart (G11c: was undefined → transparent menus) */

  /* ─── Borders ─────────────────────────────────────────────── */
  --color-border:        #1e2027;   /* default hairline */
  --color-border-strong: #2a2d38;   /* dividers w/ more presence */
  --color-border-active: #343a4a;   /* focused/active */

  /* ─── Text (off-white, never #fff) ────────────────────────── */
  --color-text-primary:   #e8e9ee;
  --color-text-secondary: #979aa5;
  --color-text-muted:     #828694;   /* V16 a11y: was #585b66 (2.7:1) — lifted to 4.97:1 (WCAG AA); owner may tune hue, keep ≥4.5 */
  --color-text-faint:     #7b7f8d;   /* dimmest tier — section labels, hints. V16 a11y: was #44474f (~1.9:1) — now 4.52:1, the AA floor */

  /* ─── Brand: VOLTAGE (electric cyan) ──────────────────────── */
  /* `accent` = the SIGNAL hue: lines, active states, primary CTA, links.
     `accent-muted` = desaturated, for LARGE fills (eye-comfort).        */
  --color-accent:        #1fd4cf;
  --color-accent-hover:  #3ee0db;
  --color-accent-press:  #17b3af;
  --color-accent-muted:  #1a8e8b;   /* large fills / big areas */
  --color-accent-ink:    #042a27;   /* text/icon ON accent */
  --color-accent-soft:   rgba(31, 212, 207, 0.14);   /* tints, active wells */
  --color-accent-line:   rgba(31, 212, 207, 0.30);   /* faint dividers/rings */
  /* Balanced data ramp (in-family tonal steps; grey is structure-only) */
  --ramp-1: #1fd4cf;
  --ramp-2: color-mix(in srgb, var(--color-accent) 60%, var(--color-surface));
  --ramp-3: color-mix(in srgb, var(--color-accent) 38%, var(--color-surface));
  --ramp-4: color-mix(in srgb, var(--color-accent) 22%, var(--color-text-muted)); /* brand-tinted neutral (cash) */

  /* ─── Trading semantics (reserved — never brand) ──────────── */
  --color-long:   #2ec27e;
  --color-short:  #f0556b;
  --color-signal-ink: #000000; /* V16 a11y: text on long/short fills — white failed AA on both */
  --color-long-bg:  rgba(46, 194, 126, 0.12);
  --color-short-bg: rgba(240, 85, 107, 0.12);
  --color-pnl-positive: #2ec27e;
  --color-pnl-negative: #f0556b;
  --color-liquidation:  #f0556b;

  /* ─── Reward layer (gamification ONLY — amber) ────────────── */
  --color-reward:      #e0b341;
  --color-reward-soft: rgba(224, 179, 65, 0.14);

  /* ─── Status / feedback ───────────────────────────────────── */
  --color-warning:  #e0b341;
  --color-warning-soft: rgba(224, 179, 65, 0.13);
  --color-error:    #f0556b;
  --color-success:  #2ec27e;
  --color-info:     var(--color-accent);
  --color-live:     #2ec27e;        /* LIVE mode */
  --color-paper:    #9d90f4;         /* PAPER mode — distinct violet, far from green/cyan/red. V16 a11y: was #8b7bf0 (4.3:1 on paper-soft) */
  --color-paper-soft: rgba(139, 123, 240, 0.16);
  --color-paper-line: rgba(139, 123, 240, 0.40);
  --color-scrim:      rgba(4, 5, 10, 0.62);     /* G-AUDIT: the one modal / palette backdrop */
  --color-track:      #606578;                  /* G-AUDIT (🗣️107): empty slider track / toggle-off pill — 3.1:1 on bg-tertiary, 3.3:1 on panels */

  /* ─── Chart ───────────────────────────────────────────────── */
  --color-chart-grid: rgba(255, 255, 255, 0.045);
  --color-chart-bg:   #0e0f14;
  --color-chart-axis: #585b66;
  /* G-INDICATORS-2: the study palette — a new indicator takes the next free one (hex, so the chart can fade it) */
  --ind-1: #1fd4cf;
  --ind-2: #e0b341;
  --ind-3: #9d90f4;
  --ind-4: #4f8cff;
  --ind-5: #ff8a4c;
  --ind-6: #e46fd0;
  --ind-7: #8fd14f;
  --ind-8: #c9ccd6;

  /* ─── Elevation shadows (depth on dark) ───────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.75);
  --shadow-pop: 0 16px 40px -14px rgba(0,0,0,.7);
  --ring-focus: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-accent);
}

/* ============================================================
   THEME: LIGHT ("Paper")
   ============================================================ */
[data-theme="light"] {
  --color-bg-primary:    #f4f5f8;
  --color-bg-secondary:  #ffffff;
  --color-bg-tertiary:   #eef0f4;
  --color-surface:       #ffffff;
  --color-surface-2:     #fafbfd;
  --color-surface-hover: #f0f2f6;
  --color-bg-elevated:   #ffffff;

  --color-border:        #e5e6ec;
  --color-border-strong: #d6d8e0;
  --color-border-active: #b9bcc8;

  --color-text-primary:   #15161c;
  --color-text-secondary: #5a5c68;
  --color-text-muted:     #64676f;   /* V16 a11y: was #9a9ca8 (2.5:1) — lifted to 4.96:1 (WCAG AA); owner may tune hue, keep ≥4.5 */
  --color-text-faint:     #6a6d7a;   /* dimmest tier — section labels, hints. V16 a11y: was #bcbec8 (~1.6:1) — now 4.51:1, the AA floor */

  --color-accent:        #0a90ac;   /* Voltage, light-tuned (clearly cyan) */
  --color-accent-hover:  #0b9fbe;
  --color-accent-press:  #087b93;
  --color-accent-muted:  #15c2d6;
  --color-accent-ink:    #ffffff;
  --color-accent-soft:   rgba(10, 144, 172, 0.11);
  --color-accent-line:   rgba(10, 144, 172, 0.26);
  --ramp-1: #0a90ac;
  --ramp-2: color-mix(in srgb, var(--color-accent) 58%, var(--color-surface));
  --ramp-3: color-mix(in srgb, var(--color-accent) 36%, var(--color-surface));
  --ramp-4: color-mix(in srgb, var(--color-accent) 20%, var(--color-text-muted));

  --color-long:   #0a9e66;
  --color-short:  #de2f49;
  --color-signal-ink: #000000;
  --color-long-bg:  rgba(10, 158, 102, 0.12);
  --color-short-bg: rgba(222, 47, 73, 0.12);
  --color-pnl-positive: #0a9e66;
  --color-pnl-negative: #de2f49;
  --color-liquidation:  #de2f49;

  --color-reward:      #b8860b;   /* golden honey — warm, premium, distinct from warning */
  --color-reward-soft: rgba(184, 134, 11, 0.12);

  --color-warning:  #d97706;      /* apricot amber (light) — clear, warm, alive; no mustard */
  --color-warning-soft: rgba(217, 119, 6, 0.10);
  --color-error:    #de2f49;
  --color-success:  #0a9e66;
  --color-live:     #0a9e66;
  --color-paper:    #5d4fd0;   /* V16 a11y: was #6d5fe0 (4.1:1 on paper-soft) */
  --color-paper-soft: rgba(109, 95, 224, 0.13);
  --color-paper-line: rgba(109, 95, 224, 0.38);
  --color-scrim:      rgba(20, 24, 40, 0.35);
  --color-track:      #85899a;                  /* 3.05:1 on bg-tertiary, 3.5:1 on white */

  --color-chart-grid: rgba(10, 20, 40, 0.05);
  --color-chart-bg:   #fbfcff;
  --color-chart-axis: #9a9ca8;
  --ind-1: #0a90ac;
  --ind-2: #b7791f;
  --ind-3: #5d4fd0;
  --ind-4: #2563eb;
  --ind-5: #ea580c;
  --ind-6: #c026d3;
  --ind-7: #4d7c0f;
  --ind-8: #4b5563;

  --shadow-sm: 0 1px 2px rgba(20,24,40,.06);
  --shadow-md: 0 8px 24px -8px rgba(20,24,40,.12);
  --shadow-lg: 0 24px 60px -20px rgba(20,24,40,.16);
  --shadow-pop: 0 16px 40px -14px rgba(20,24,40,.18);
}

/* ============================================================
   SHARED TOKENS (theme-independent)
   ============================================================ */
:root {
  /* ─── Typography ──────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;   /* headings, wordmark, buttons */
  --font-sans:    'Hanken Grotesk', system-ui, sans-serif;        /* body, labels — readability workhorse */
  --font-mono:    'Spline Sans Mono', ui-monospace, monospace; /* ALL numerals: price, PnL, %, qty */

  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:13px;   /* trading-density default */
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 46px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-label: 0.13em;   /* eyebrows / mono labels */

  /* ─── Spacing (4px base) ──────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ─── Radius ──────────────────────────────────────────────── */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 11px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-full: 9999px;

  /* ─── Motion ──────────────────────────────────────────────── */
  --transition-fast: 110ms cubic-bezier(.3,.6,.4,1);
  --transition-normal: 190ms cubic-bezier(.3,.6,.4,1);
  --transition-slow: 320ms cubic-bezier(.3,.6,.4,1);

  /* ─── Z-index scale ───────────────────────────────────────── */
  --z-base: 0;     --z-panel: 10;   --z-sticky: 20;  --z-dropdown: 30;
  --z-overlay: 40; --z-modal: 50;   --z-toast: 60;   --z-command: 70;
}

/* ─── Base document ───────────────────────────────────────────── */
html, body {
  margin: 0; padding: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Numerals: always mono + tabular lining (correctness) ────── */
.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.01em;
}
.pnl-pos { color: var(--color-pnl-positive); }
.pnl-neg { color: var(--color-pnl-negative); }

/* ─── Eyebrow / mono section label ────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

/* ─── Display heading helper ──────────────────────────────────── */
.display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
}

/* ─── Status dots ─────────────────────────────────────────────── */
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-running { background: var(--color-success); }
.status-paused  { background: var(--color-warning); }
.status-stopped { background: var(--color-text-muted); }
.status-error   { background: var(--color-error); }


/* ============================================================
   LEGACY COMPATIBILITY ALIASES — remove in Phase C
   ============================================================ */
:root {
  --ink-rgb: 232, 233, 238;
  --long-rgb: 46, 194, 126;
  --short-rgb: 240, 85, 107;
  --accent-rgb: 31, 212, 207;
  --warning-rgb: 224, 179, 65;
  --color-on-accent: var(--color-accent-ink);
  --color-accent-disabled: color-mix(in srgb, var(--color-accent) 34%, var(--color-surface));
  --color-on-long: #062418;
  --color-on-short: #ffffff;
  --color-funding-positive: var(--color-pnl-positive);
  --color-funding-negative: var(--color-pnl-negative);
  --color-tier-a: rgba(var(--long-rgb), 0.15);
  --color-tier-b: rgba(var(--warning-rgb), 0.12);
  --color-tier-c: rgba(var(--short-rgb), 0.1);
  --color-backdrop: rgba(0, 0, 0, 0.6);
  --chart-grid: var(--color-chart-grid);
  --chart-axis-text: var(--color-chart-axis);
  --chart-crosshair: rgba(var(--ink-rgb), 0.35);
  --chart-watermark: rgba(var(--ink-rgb), 0.04);
  --z-command-palette: var(--z-command);
}
[data-theme='light'] {
  --ink-rgb: 21, 22, 28;
  --long-rgb: 10, 158, 102;
  --short-rgb: 222, 47, 73;
  --accent-rgb: 10, 144, 172;
  --warning-rgb: 217, 119, 6;
  --color-on-long: #ffffff;
  --color-backdrop: rgba(21, 22, 28, 0.4);
}


/* ============================================================
   DESIGN LANGUAGE v2 — 2026-10-18 (67 G-POLISH, decision Z70)
   Theme-neutral sizing + motion tokens. The rules that say when
   each one applies live in src/tokens/DESIGN_LANGUAGE.md; the
   shared primitives (.ux-*) in src/mockup/shell.css. The locked
   v3 blocks above are untouched — this block only adds names.
   ============================================================ */
:root {
  /* row density — one class per screen (DESIGN_LANGUAGE §3) */
  --row-dense:   24px;   /* order book, tape, ticket key/value rows */
  --row-list:    32px;   /* watchlists, positions, orders, result tables */
  --row-comfort: 44px;   /* display screens: Markets, Rewards, Portfolio, Settings */

  /* control heights (§4.1) */
  --control-sm: 28px;    /* inline actions, chips, tab hit area */
  --control-md: 34px;    /* default button, inputs, segmented controls */
  --control-lg: 40px;    /* the one primary action of a view */

  /* page gutters (§3.2, §6.1) */
  --gutter-page:  clamp(16px, 2.5vw, 48px);
  --gutter-phone: 16px;

  /* the one hairline (§1.3) */
  --hairline: 1px solid var(--color-border);

  /* motion (§5.1) — aliases of the v3 transitions, named by what they are for */
  --ease-out:      cubic-bezier(0.3, 0.6, 0.4, 1);
  --motion-colour: 110ms;
  --motion-reveal: 190ms;
  --motion-move:   320ms;
}

/* BuildTrade public website — page styles.
   Colours, fonts, spacing and radii come from src/tokens/tokens.css (inlined
   before this file at build time), so both themes are the app's own: no hex
   values here, only tokens and color-mix() of tokens. The site reads at 15–18px
   (a reading site), not the app's 13px trading density.
   Order: site tokens · base · layout · buttons · nav · footer · home (hero, demo,
   figures, marquee, calculator, screens, before/after, stages, security, learn,
   pricing teaser, final, the grid's pulses + light) · security · pricing · articles (guides + help) ·
   guides index · help index · FAQ · 404 · search · palette · reveal · feature
   pages (loops, hover cards, scroll-driven reveal, view transitions) ·
   breakpoints · motion preferences. */

/* ─── Site tokens ─────────────────────────────────────────── */
:root {
  --site-link: color-mix(in srgb, var(--color-accent) 75%, var(--color-text-primary));
  --site-cta: var(--color-accent);
  --site-cta-hover: var(--color-accent-hover);
  --site-cta-glow: color-mix(in srgb, var(--color-accent) 35%, transparent);
  --site-glow: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --site-grid-lit: color-mix(in srgb, var(--color-accent) 55%, transparent);
  --site-max: 1248px;
  --site-gutter: 24px;
  --site-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* the browser's own scrollbars and form fields match the page, never the device setting */
  color-scheme: dark;
}
/* Light: the accent is a mid cyan, so buttons use the pressed shade (white text
   stays above 4.5:1) and links mix toward the text colour. */
[data-theme="light"] {
  color-scheme: light;
  --site-cta: var(--color-accent-press);
  --site-cta-hover: color-mix(in srgb, var(--color-accent-press) 85%, var(--color-text-primary));
  --site-cta-glow: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --site-glow: color-mix(in srgb, var(--color-accent) 16%, transparent);
  --site-grid-lit: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* ─── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { font-size: 15px; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1; padding-bottom: 120px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: var(--weight-semibold); }
.ic { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -0.2em; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--color-accent-line); }
:where(p, dd, .keypts li, .notes li, .mistakes li, .steps li, .none, .k-empty) a:not(.btn) {
  color: var(--site-link);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}
:where(p, dd, .keypts li, .notes li, .mistakes li, .steps li, .none, .k-empty) a:not(.btn):hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--color-text-muted); }

/* Gradient words: plain accent where text clipping is missing. */
.grad { color: var(--color-accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad {
    background-image: linear-gradient(100deg, var(--color-accent-hover), var(--color-accent) 45%, var(--color-accent-muted));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  /* Light: no pale cyan, so the words keep their contrast on a light page. */
  [data-theme="light"] .grad { background-image: linear-gradient(100deg, var(--color-accent-press), var(--color-accent)); }
}

/* ─── Layout ──────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--site-max); margin-left: auto; margin-right: auto; padding-left: var(--site-gutter); padding-right: var(--site-gutter); }
.narrow { max-width: 868px; }
.section { padding-top: 120px; }
.doc { padding-top: 56px; }
.eyebrow {
  display: block;
  margin: 0;
  font: var(--weight-semibold) 13px/1.2 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--site-link);
}
.page-head { padding-top: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.page-head h1 { font-size: clamp(40px, 5.2vw, 68px); letter-spacing: -0.03em; line-height: 1.04; }
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--color-text-secondary); max-width: 62ch; }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1.06; }
.sec-head.center { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
.sec-head.center .lede { margin-left: auto; margin-right: auto; }
.sec-head.row { max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; }
.sec-head.row > div { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.sec-head.row > .btn { flex: none; }

/* ─── Buttons and small parts ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: var(--weight-semibold) 15px/1 var(--font-display);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-normal);
}
.btn:hover { border-color: var(--color-border-active); background: var(--color-surface-hover); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.btn:hover .ic { transform: translateX(2px); }
.btn.primary { background: var(--site-cta); border-color: transparent; color: var(--color-accent-ink); box-shadow: 0 8px 24px -10px var(--site-cta-glow); }
.btn.primary:hover { background: var(--site-cta-hover); box-shadow: 0 12px 32px -10px var(--site-cta-glow); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--color-surface); border-color: var(--color-border-strong); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn.lg { height: 52px; padding: 0 26px; font-size: 16px; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.center-cta { display: flex; justify-content: center; margin-top: 40px; }
.ticks { display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; color: var(--color-text-secondary); font-size: 16px; line-height: 1.5; }
.ticks .ic { color: var(--site-link); margin-top: 2px; }
.more-link { display: inline-flex; align-items: center; gap: 8px; font: var(--weight-semibold) 15px/1.3 var(--font-display); color: var(--site-link); }
.more-link .ic { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.more-link:hover .ic { transform: translateX(3px); }
.ex-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--color-border-active);
  color: var(--color-text-muted);
  font: var(--weight-medium) 12px/1 var(--font-sans);
  white-space: nowrap;
}
.ex-tag .ic { width: 13px; height: 13px; }
kbd { font: var(--weight-medium) 12px/1.4 var(--font-sans); }
kbd.k {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ─── Nav ─────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg-primary) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}
.nav.is-scrolled, .nav.is-open { border-bottom-color: var(--color-border); background: color-mix(in srgb, var(--color-bg-primary) 86%, transparent); }
.nav-in { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); height: 68px; display: flex; align-items: center; gap: 40px; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; font: var(--weight-semibold) 17px/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.logo > svg { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.links { display: flex; align-items: center; gap: 4px; }
.links a { padding: 8px 14px; border-radius: var(--radius-full); font: var(--weight-medium) 15px/1 var(--font-display); color: var(--color-text-secondary); transition: color var(--transition-fast), background-color var(--transition-fast); }
.links a:hover { color: var(--color-text-primary); background: var(--color-surface); }
.links a[aria-current="page"] { color: var(--color-text-primary); background: var(--color-surface); }
.right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-width: 196px;
  padding: 0 6px 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 14px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.kbar:hover { border-color: var(--color-border-active); color: var(--color-text-secondary); }
.kbar .ic { width: 16px; height: 16px; }
.kbar span { margin-right: auto; }
.kbar kbd { padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text-muted); font-size: 11px; }
.theme, .burger {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.theme:hover, .burger:hover { color: var(--color-text-primary); background: var(--color-surface); border-color: var(--color-border-strong); }
.theme .sun, .theme .moon, .burger .open, .burger .close { grid-area: 1 / 1; }
[data-theme="dark"] .theme .sun { display: none; }
[data-theme="light"] .theme .moon { display: none; }
.burger { display: none; }
.burger .close { display: none; }
.burger[aria-expanded="true"] .open { display: none; }
.burger[aria-expanded="true"] .close { display: block; }
.menu { display: none; flex-direction: column; padding: 8px var(--site-gutter) 20px; border-top: 1px solid var(--color-border); background: var(--color-bg-primary); }
.menu a, .menu .menu-search { display: flex; align-items: center; gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--color-border); font: var(--weight-medium) 17px/1.2 var(--font-display); color: var(--color-text-primary); text-align: left; }
.menu a[aria-current="page"] { color: var(--site-link); }
.menu .menu-search { color: var(--color-text-secondary); }
.menu .menu-search .ic { width: 18px; height: 18px; }
.menu .btn { margin-top: 16px; padding: 0 20px; border-bottom: 1px solid transparent; justify-content: center; }
.nav.is-open .menu { display: flex; }
@media (min-width: 961px) { .nav.is-open .menu { display: none; } }

/* ─── Footer ──────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--color-border); background: var(--color-bg-secondary); }
.foot-in { max-width: var(--site-max); margin: 0 auto; padding: 72px var(--site-gutter) 48px; display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 40px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.foot-brand p { max-width: 340px; color: var(--color-text-secondary); font-size: 15px; line-height: 1.6; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.foot-col b { font: var(--weight-semibold) 14px/1.3 var(--font-display); color: var(--color-text-primary); margin-bottom: 4px; }
.foot-col a { color: var(--color-text-secondary); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; transition: color var(--transition-fast); }
.foot-col a:hover { color: var(--color-text-primary); }
.foot-base {
  width: calc(100% - 2 * var(--site-gutter));
  max-width: calc(var(--site-max) - 2 * var(--site-gutter));
  margin: 0 auto;
  padding: 24px 0 40px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.55;
}
.foot-base p { max-width: 560px; }

/* ─── Home: hero ──────────────────────────────────────────── */
.hero { position: relative; padding-top: 88px; isolation: isolate; }
.hero-bg { position: absolute; inset: -68px 0 auto; height: 980px; z-index: -1; pointer-events: none; overflow: hidden; --cell: 56px; --gmask: radial-gradient(ellipse 70% 62% at 50% 28%, black 20%, transparent 75%); }
/* A faint construction grid. In mask-image, black only means "fully shown". The
   same mask (--gmask) fades the pulses and the light at the grid's edge. */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: center -1px;
  -webkit-mask-image: var(--gmask);
  mask-image: var(--gmask);
}
.hero-bg::after { content: ''; position: absolute; left: 50%; top: 360px; width: 1200px; height: 760px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--site-glow), transparent); }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  color: var(--color-text-secondary);
  font-size: 14px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.hero-pill:hover { border-color: var(--color-border-active); color: var(--color-text-primary); }
.hero-pill .ic { width: 14px; height: 14px; }
/* The ring grows from the dot to 8 px around it and fades. It is a layer that
   scales and fades (transform + opacity), so the browser's compositor draws it
   without repainting the page each frame. */
.live-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--color-live); }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-live) 55%, transparent); opacity: 0; animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(3); opacity: 0; }
}
.hero-h { font-size: clamp(44px, 6.4vw, 84px); letter-spacing: -0.035em; line-height: 1.02; }
.hero-lede { max-width: 660px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--color-text-secondary); }
.hero-in .ctas { justify-content: center; margin-top: 8px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; color: var(--color-text-muted); font-size: 15px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .ic { width: 16px; height: 16px; color: var(--site-link); }
.hero-shot { position: relative; margin-top: 72px; }
.hero-shot::before { content: ''; position: absolute; inset: 8% 6% -6%; z-index: -1; background: radial-gradient(closest-side, var(--site-glow), transparent); }

/* ─── Home: the grid comes alive (89) ─────────────────────────
   Pulses of accent light ride the grid lines: into the headline on the hero,
   up toward the heading on the final call. Each pulse is one <i class="gp">
   that home.mjs places — the line it rides (--ln: a row from the grid's top
   line for l / r, a column from the centre line for d / u), its delay (--dl)
   and its duration (--du) are utility classes the build writes, so the start
   cells are set once, never drawn at random. A pulse is a box that runs from
   the grid's edge to its stop (its own width or height), carrying the streak
   at its leading end; only transform and opacity animate, and the host's
   --gmask fades everything at the grid's edge. The light (.gl) is a brighter
   copy of the grid under a radial mask at --mx / --my, which site.js sets on
   pointer move (mouse only, 721 px and up); it fades out on leave. Reduced
   motion: neither exists. Off-screen or a hidden tab: paused (data-off). */
.hero-bg { --len: 112px; --stop: 5; }
.final { --cell: 48px; --len: 96px; --rise: 45%; --gmask: radial-gradient(ellipse 60% 70% at 50% 100%, black 10%, transparent 70%); }
.gfx { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: var(--gmask); mask-image: var(--gmask); }
.hero-bg .gfx { z-index: 1; }
.final .gfx { z-index: -1; }
.gl {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--site-ease);
  background-image: linear-gradient(var(--site-grid-lit) 1px, transparent 1px), linear-gradient(90deg, var(--site-grid-lit) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: center -1px;
  -webkit-mask-image: radial-gradient(circle 240px at var(--mx, -999px) var(--my, -999px), black, transparent);
  mask-image: radial-gradient(circle 240px at var(--mx, -999px) var(--my, -999px), black, transparent);
}
.final .gl { background-position: center center; }
.gfx[data-lit] .gl { opacity: 1; }
.gp { position: absolute; --from: -100%; animation: gp-x calc(var(--du, 7) * 1s) linear calc(var(--dl, 0) * 1s) infinite; }
.gp::after { content: ''; position: absolute; box-shadow: 0 0 8px var(--color-accent-line); }
.gp.l, .gp.r { top: calc(var(--ln) * var(--cell) - 1px); width: calc(50% - (var(--stop) + 0.5) * var(--cell)); height: 1px; }
.gp.l { left: 0; }
.gp.r { right: 0; --from: 100%; }
.gp.l::after, .gp.r::after { top: 0; width: var(--len); height: 1px; }
.gp.l::after { right: 0; background: linear-gradient(90deg, transparent, var(--color-accent)); }
.gp.r::after { left: 0; background: linear-gradient(270deg, transparent, var(--color-accent)); }
.gp.d, .gp.u { left: calc(50% + (var(--ln) + 0.5) * var(--cell)); width: 1px; animation-name: gp-y; }
.gp.d { top: 0; height: calc(3 * var(--cell) - 1px); }
.gp.u { bottom: 0; height: var(--rise); --from: 100%; }
.gp.d::after, .gp.u::after { left: 0; width: 1px; height: var(--len); }
.gp.d::after { bottom: 0; background: linear-gradient(transparent, var(--color-accent)); }
.gp.u::after { top: 0; background: linear-gradient(var(--color-accent), transparent); }
/* The streak travels for the first 45% of its cycle and rests for the other 55%: fewer pulses, not brighter. */
@keyframes gp-x { 0% { transform: translateX(var(--from)); opacity: 0; } 6% { opacity: 1; } 32% { opacity: 1; } 45%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes gp-y { 0% { transform: translateY(var(--from)); opacity: 0; } 6% { opacity: 1; } 32% { opacity: 1; } 45%, 100% { transform: translateY(0); opacity: 0; } }
.gfx[data-off] .gp { animation-play-state: paused; }
@media (hover: none) { .gl { display: none; } }

/* ─── Home: the trade-screen picture ──────────────────────── */
.demo { display: grid; gap: 20px; }
.app-win {
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-secondary);
  box-shadow: var(--shadow-lg), 0 48px 120px -48px var(--site-cta-glow);
}
.win-bar { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-primary); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.win-tabs { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.win-tabs span { padding: 5px 10px; border-radius: var(--radius-full); font: var(--weight-medium) 13px/1 var(--font-display); color: var(--color-text-muted); }
.win-tabs .on { background: var(--color-surface-2); color: var(--color-text-primary); }
.paper-pill, .mode {
  padding: 4px 9px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-paper-line);
  background: var(--color-paper-soft);
  color: var(--color-paper);
  font: var(--weight-semibold) 11px/1 var(--font-sans);
  letter-spacing: 0.1em;
}
.paper-pill { margin-left: auto; flex: none; }
.win-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.win-chart { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border-right: 1px solid var(--color-border); }
.win-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.win-chart-head b { font: var(--weight-semibold) 14px/1.2 var(--font-display); }
.win-chart .fig-chart { aspect-ratio: auto; flex: 1; min-height: 320px; }

/* The order ticket */
.tk { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--color-surface); font-size: 13px; line-height: 1.4; }
.tk > * { transition: opacity var(--transition-slow), box-shadow var(--transition-slow); }
.tk-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--radius-md); background: var(--color-bg-primary); border: 1px solid var(--color-border); }
.tk-seg span { padding: 7px 0; border-radius: 6px; text-align: center; font: var(--weight-semibold) 13px/1.2 var(--font-display); color: var(--color-text-muted); }
.tk-seg .on.long { background: var(--color-long-bg); color: var(--color-long); }
.tk-types { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); }
.tk-types span { margin-bottom: -1px; padding: 4px 8px 8px; border-bottom: 2px solid transparent; font: var(--weight-medium) 13px/1.2 var(--font-display); color: var(--color-text-muted); }
.tk-types .on { color: var(--color-text-primary); border-bottom-color: var(--color-accent); }
.tk-toggle { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); }
.sw { position: relative; flex: none; width: 28px; height: 16px; border-radius: var(--radius-full); background: var(--color-track); }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg-secondary); box-shadow: var(--shadow-sm); }
.sw.on { background: var(--color-accent); }
.sw.on::after { left: 14px; }
.tk-block, .tk-liq { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-secondary); }
/* A value too long for its row drops under the label, still right-aligned, instead of leaving the box. */
.tk-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; color: var(--color-text-secondary); }
.tk-row b { margin-left: auto; color: var(--color-text-primary); font-weight: var(--weight-medium); white-space: nowrap; }
.tk-row.neg b { color: var(--color-short); }
.tk-row.pos b { color: var(--color-long); }
.tk-row.neg[data-hl] { margin: 0 -8px; padding: 6px 8px; border-radius: var(--radius-md); }
.tk-size { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding-top: 8px; border-top: 1px dashed var(--color-border-strong); color: var(--color-text-secondary); }
.tk-size b { font-size: 16px; font-weight: var(--weight-semibold); color: var(--site-link); }
.tk-liq p { color: var(--color-long); font-size: 13px; }
.tk-sum { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.tk-go { margin-top: auto; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: var(--radius-md); background: var(--color-long); color: var(--color-signal-ink); font: var(--weight-semibold) 14px/1 var(--font-display); }

/* Steps under the picture light up the part they describe. */
.demo .fig-tag, .demo .fig-lvl, .demo .fig-zone { transition: opacity var(--transition-slow), stroke-width var(--transition-slow), fill var(--transition-slow), box-shadow var(--transition-slow); }
.demo[data-active] .tk > *, .demo[data-active] .fig-tag { opacity: 0.4; }
.demo[data-active="stop"] [data-hl="stop"],
.demo[data-active="size"] [data-hl="size"],
.demo[data-active="liq"] [data-hl="liq"] { opacity: 1; }
.demo[data-active="stop"] .tk [data-hl="stop"],
.demo[data-active="size"] .tk [data-hl="size"],
.demo[data-active="liq"] .tk [data-hl="liq"],
.demo[data-active="stop"] .fig-tag[data-hl="stop"],
.demo[data-active="size"] .fig-tag[data-hl="size"],
.demo[data-active="liq"] .fig-tag[data-hl="liq"] { box-shadow: 0 0 0 1.5px var(--color-accent), 0 0 0 6px var(--color-accent-soft); }
.demo[data-active="stop"] .fig-lvl[data-hl="stop"],
.demo[data-active="size"] .fig-lvl[data-hl="size"],
.demo[data-active="liq"] .fig-lvl[data-hl="liq"] { stroke-width: 2.5; stroke-dasharray: none; }
.demo[data-active="stop"] .fig-zone[data-hl="stop"] { fill: color-mix(in srgb, var(--color-short) 26%, transparent); }
.demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demo-steps button {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}
.demo-steps button:hover { border-color: var(--color-border-strong); }
.demo-steps button[aria-current="true"] { border-color: var(--color-accent-line); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); }
.demo-steps .n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); font-size: 13px; transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal); }
.demo-steps button[aria-current="true"] .n { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.demo-steps b { display: block; margin-bottom: 4px; font: var(--weight-semibold) 15px/1.3 var(--font-display); color: var(--color-text-primary); }
.demo-steps button > span:not(.n) > span { display: block; color: var(--color-text-secondary); font-size: 14px; line-height: 1.5; }
.demo-steps button::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.demo.cycling .demo-steps button[aria-current="true"]::after { animation: stepbar 5s linear forwards; }
@keyframes stepbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ─── Figures (lib/figures.mjs) ───────────────────────────── */
.fig-chart { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-chart-bg); }
.fig-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fig-grid line { stroke: var(--color-chart-grid); stroke-width: 1; }
.fig-c .up { stroke: var(--color-long); fill: var(--color-long); }
.fig-c .dn { stroke: var(--color-short); fill: var(--color-short); }
.fig-zone.reward { fill: color-mix(in srgb, var(--color-long) 12%, transparent); }
.fig-zone.risk { fill: color-mix(in srgb, var(--color-short) 12%, transparent); }
.fig-lvl { stroke-width: 1.25; stroke-dasharray: 5 4; }
.fig-lvl.tp { stroke: var(--color-long); }
.fig-lvl.entry { stroke: var(--color-text-secondary); }
.fig-lvl.stop { stroke: var(--color-short); }
.fig-lvl.liq { stroke: var(--color-liquidation); stroke-width: 2; stroke-dasharray: none; }
.fig-lvl.floor { stroke: color-mix(in srgb, var(--color-short) 60%, transparent); stroke-dasharray: 2 4; }
.fig-lvl.fill { stroke: var(--color-short); stroke-width: 1.75; stroke-dasharray: none; }
.fig-fade-a { stop-color: var(--color-short); stop-opacity: 0.1; }
.fig-fade-b { stop-color: var(--color-short); stop-opacity: 0; }
.fig-axis { position: absolute; left: 4px; transform: translateY(-50%); padding: 2px 4px; border-radius: 4px; background: var(--color-chart-bg); font: 11px/1 var(--font-mono); color: var(--color-chart-axis); pointer-events: none; }
.fig-tag {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font: var(--weight-semibold) 11px/1.3 var(--font-sans);
  white-space: nowrap;
}
.fig-tag b { font: var(--weight-medium) 11px/1.3 var(--font-mono); }
.fig-tag.tp { background: color-mix(in srgb, var(--color-long) 16%, var(--color-chart-bg)); border-color: color-mix(in srgb, var(--color-long) 35%, transparent); color: var(--color-long); }
.fig-tag.entry { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-text-primary); }
.fig-tag.stop { background: color-mix(in srgb, var(--color-short) 16%, var(--color-chart-bg)); border-color: color-mix(in srgb, var(--color-short) 35%, transparent); color: var(--color-short); }
.fig-tag.liq { background: color-mix(in srgb, var(--color-short) 28%, var(--color-chart-bg)); border-color: var(--color-short); color: var(--color-short); }
.fig-tag.floor { background: var(--color-chart-bg); border-color: color-mix(in srgb, var(--color-short) 30%, transparent); color: var(--color-text-secondary); }
.fig-tag.fill { background: color-mix(in srgb, var(--color-short) 22%, var(--color-chart-bg)); border-color: var(--color-short); color: var(--color-short); }
.fig-tag.above { transform: translateY(calc(-100% - 3px)); }
.fig-tag.below { transform: translateY(3px); }
.fig-line { padding: 20px 24px 40px 56px; }
.fig-plot { position: relative; aspect-ratio: 640 / 300; }
.fig-yt { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); font: 12px/1 var(--font-mono); color: var(--color-text-muted); white-space: nowrap; }
.fig-xt { position: absolute; top: calc(100% + 10px); transform: translateX(-50%); font: 12px/1 var(--font-mono); color: var(--color-text-muted); white-space: nowrap; }
.fig-band { fill: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.fig-band.risk, .fig-band.liq { fill: color-mix(in srgb, var(--color-short) 10%, transparent); }
.fig-band.safe { fill: color-mix(in srgb, var(--color-long) 8%, transparent); }
.fig-band.warn { fill: var(--color-warning-soft); }
.fig-vl { stroke: var(--color-border-active); stroke-width: 1.25; stroke-dasharray: 4 4; }
.fig-vl.entry { stroke: var(--color-text-secondary); }
.fig-vl.stop { stroke: var(--color-short); }
.fig-vl.liq { stroke: var(--color-liquidation); stroke-width: 2; stroke-dasharray: none; }
.fig-ln { stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fig-ln.alt, .fig-ln.naive { stroke: var(--color-text-faint); stroke-dasharray: 6 5; }
.fig-ln.long { stroke: var(--color-long); }
.fig-ln.short { stroke: var(--color-short); }
.fig-ln.mark { stroke: var(--color-text-primary); stroke-width: 1.5; }
.fig-sl, .fig-note { position: absolute; width: max-content; white-space: nowrap; pointer-events: none; }
.fig-sl { font: var(--weight-semibold) 12px/1.2 var(--font-sans); color: var(--site-link); }
.fig-sl.alt, .fig-sl.naive { color: var(--color-text-muted); }
.fig-sl.long { color: var(--color-long); }
.fig-sl.short { color: var(--color-short); }
/* Placements carry an "at-" prefix so they never pick up a page class like `.sw` (the toggle switch). */
.fig-sl.at-n { transform: translate(-50%, calc(-100% - 8px)); }
.fig-sl.at-s { transform: translate(-50%, 8px); }
.fig-sl.at-e { transform: translate(10px, -50%); }
.fig-sl.at-w { transform: translate(calc(-100% - 10px), -50%); }
.fig-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.fig-dot.liq, .fig-dot.stop, .fig-dot.short { background: var(--color-short); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-short) 20%, transparent); }
.fig-dot.entry { background: var(--color-text-primary); box-shadow: 0 0 0 4px var(--color-surface-2); }
.fig-note { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); font: var(--weight-medium) 12px/1.3 var(--font-sans); color: var(--color-text-primary); }
.fig-note.at-n { transform: translate(-50%, calc(-100% - 14px)); }
.fig-note.at-s { transform: translate(-50%, 14px); }
.fig-note.at-e { transform: translate(14px, -50%); }
.fig-note.at-w { transform: translate(calc(-100% - 14px), -50%); }
.fig-note.at-nw { transform: translate(calc(-100% - 6px), calc(-100% - 6px)); }
.fig-note.at-sw { transform: translate(calc(-100% - 6px), 6px); }
/* Phones: a line chart and a tight ladder of levels get a taller box, so notes and tags keep their air. */
@media (max-width: 480px) {
  .fig-plot, .fig-chart.dense { aspect-ratio: 4 / 3; }
}
.fig-note b, .fig-sl b { font: var(--weight-semibold) 12px/1.3 var(--font-mono); }
.fig-bars { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.fig-br { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
.fig-br .k { font: var(--weight-medium) 13px/1 var(--font-mono); color: var(--color-text-secondary); }
.fig-br .k.w { font-family: var(--font-sans); }
.fig-bars.wide-k .fig-br { grid-template-columns: 80px minmax(0, 1fr) 64px; }
.fig-br .trk { display: flex; flex-direction: column; gap: 3px; }
.fig-br .trk i { display: block; height: 8px; min-width: 2px; border-radius: var(--radius-full); }
.fig-br .v { font: var(--weight-semibold) 14px/1 var(--font-mono); text-align: right; }
.fig-bars i.naive, .fig-legend i.naive { background: color-mix(in srgb, var(--color-text-faint) 45%, transparent); }
.fig-bars i.real, .fig-legend i.real { background: var(--color-accent); }
.fig-bars i.stop, .fig-legend i.stop { background: var(--color-short); }
.fig-bars i.long, .fig-legend i.long { background: var(--color-long); }
/* A guide's process figure: numbered steps joined by a hairline, a column on phones. */
.fig-flow { list-style: none; margin: 0; padding: 28px 24px 24px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; counter-reset: fstep; }
.fig-flow li { position: relative; padding-top: 32px; counter-increment: fstep; }
.fig-flow li::before { content: counter(fstep); position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-soft); color: var(--site-link); font: var(--weight-semibold) 12px/22px var(--font-mono); text-align: center; }
.fig-flow li:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 30px; right: -8px; height: 1px; background: var(--color-border-strong); }
.fig-flow b { display: block; font: var(--weight-semibold) 15px/1.35 var(--font-sans); color: var(--color-text-primary); }
.fig-flow span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }
.fig-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 6px; color: var(--color-text-secondary); font-size: 13px; }
.fig-legend span { display: inline-flex; align-items: center; gap: 8px; }
.fig-legend i { display: block; width: 16px; height: 8px; border-radius: var(--radius-full); }
.fig-eq .fig-svg { position: static; width: 100%; height: auto; aspect-ratio: 640 / 200; }
.fig-dd { margin-top: 6px; border-top: 1px solid var(--color-border); }
.fig-dd .fig-svg { aspect-ratio: 640 / 70; }
.fig-eq-area { fill: var(--color-accent-soft); }
.fig-eq-ln { stroke: var(--color-accent); stroke-width: 1.75; }
.fig-dd-area { fill: color-mix(in srgb, var(--color-short) 22%, transparent); }
.fig { margin: 32px 0 8px; }
.fig-frame { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.fig-frame > .fig-chart { border: 0; border-radius: 0; }
.fig figcaption { margin-top: 12px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; }

/* ─── Home: what is in the app ────────────────────────────── */
.marquee {
  margin-top: 104px;
  padding: 20px 0;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.mq-track { display: flex; width: max-content; animation: mq 70s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-row { display: flex; gap: 12px; padding-right: 12px; }
.mq-row li { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: 15px; white-space: nowrap; }
.mq-row .ic { width: 16px; height: 16px; color: var(--site-link); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ─── Home: calculator ────────────────────────────────────── */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.calc-in { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-right: 1px solid var(--color-border); background: var(--color-bg-secondary); }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld-k { font-size: 14px; font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.inp { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.inp:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.inp i { font: normal 15px/1 var(--font-mono); color: var(--color-text-muted); }
.inp input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--color-text-primary); font: var(--weight-medium) 16px/1 var(--font-mono); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-bg-secondary); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: var(--radius-full); font: var(--weight-semibold) 14px/1 var(--font-display); color: var(--color-text-secondary); transition: background-color var(--transition-fast), color var(--transition-fast); }
.seg button:hover { color: var(--color-text-primary); }
.seg button[aria-pressed="true"] { background: var(--color-bg-elevated); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
.calc .seg { display: flex; background: var(--color-surface); }
.calc .seg button { flex: 1; }
/* One row of equal chips at every width (a lone "20×" on a second line read as an afterthought). */
.chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.chips button { height: 40px; min-width: 0; padding: 0 8px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-secondary); font: var(--weight-medium) 14px/1 var(--font-mono); transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast); }
.chips button:hover { color: var(--color-text-primary); border-color: var(--color-border-active); }
.chips button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-text-primary); }
.calc-out { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 32px; }
.co { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.co > span { color: var(--color-text-secondary); font-size: 14px; }
.co b { font: var(--weight-semibold) 20px/1.2 var(--font-mono); color: var(--color-text-primary); white-space: nowrap; }
.co.neg b { color: var(--color-short); }
.co.hero-o { padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.co.hero-o b { font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.02em; color: var(--site-link); }
.co-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
/* The ruler: entry at the left, the stop, then the cushion out to liquidation. */
.ruler { position: relative; padding: 30px 0; }
.ruler-trk { position: relative; height: 10px; border-radius: var(--radius-full); background: var(--color-bg-tertiary); overflow: hidden; }
.ruler-trk i { position: absolute; top: 0; bottom: 0; display: block; transition: width var(--transition-slow), left var(--transition-slow); }
.r-risk { left: 0; background: var(--color-short); }
.r-buf { background: color-mix(in srgb, var(--color-accent) 38%, transparent); }
.r-m { position: absolute; top: calc(30px + 10px + 10px); transform: translateX(-50%); font-size: 13px; font-weight: var(--weight-medium); line-height: 1; color: var(--color-text-secondary); white-space: nowrap; transition: left var(--transition-slow); }
.r-m::before { content: ''; position: absolute; left: 50%; top: -10px; width: 1px; height: 8px; background: currentColor; }
.r-m.stop { top: 0; color: var(--color-short); }
.r-m.stop::before { top: auto; bottom: -10px; }
.r-m.liq { color: var(--color-liquidation); }
.r-m.entry { left: 0; transform: none; }
.r-m.entry::before, .r-m.start::before { left: 0; }
.r-m.start { transform: none; }
.r-m.end { transform: translateX(-100%); }
.r-m.end::before { left: auto; right: 0; }
/* Liquidation inside the stop sits near the entry label: lift it to the top row. */
.r-m.liq.up { top: 0; }
.r-m.liq.up::before { top: auto; bottom: -10px; }
.calc-warn { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent); background: var(--color-warning-soft); color: var(--color-text-primary); font-size: 15px; line-height: 1.5; }
.calc-warn[hidden] { display: none; }
.calc-note { color: var(--color-text-muted); font-size: 14px; line-height: 1.55; }

/* ─── Home: the five screens ──────────────────────────────── */
.tabs { display: flex; flex-direction: column; gap: 32px; }
.tab-list { display: flex; gap: 4px; max-width: 100%; margin: 0 auto; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg-secondary); }
.tab-list::-webkit-scrollbar { display: none; }
.tab-list button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; flex: none; border-radius: var(--radius-full); font: var(--weight-medium) 15px/1 var(--font-display); color: var(--color-text-secondary); white-space: nowrap; transition: background-color var(--transition-fast), color var(--transition-fast); }
.tab-list button:hover { color: var(--color-text-primary); }
.tab-list button[aria-selected="true"] { background: var(--color-bg-elevated); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
.tab-list .ic { width: 16px; height: 16px; }
.tab-panel { display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; padding: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); }
.tab-panel.on { display: grid; animation: rise var(--transition-slow) var(--site-ease); }
.tab-stack { display: grid; gap: 24px; }
/* Two columns: the panels share one cell, so the box keeps the tallest panel's
   height and switching tabs never moves the page below. */
@media (min-width: 961px) {
  html.js .tab-stack > .tab-panel { display: grid; grid-area: 1 / 1; visibility: hidden; }
  html.js .tab-stack > .tab-panel.on { visibility: visible; }
}
html:not(.js) .tab-list { display: none; }
html:not(.js) .tab-panel { display: grid; }
html:not(.js) .kbar, html:not(.js) .menu-search { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tp-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tp-k { display: inline-flex; align-items: center; gap: 8px; font: var(--weight-semibold) 13px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--site-link); }
.tp-k .ic { width: 16px; height: 16px; }
.tp-copy h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.025em; }
.tp-copy > p { color: var(--color-text-secondary); font-size: 17px; line-height: 1.6; }
.tp-copy .more-link { margin-top: 4px; }
.tp-shot { min-width: 0; }

/* Screen pictures */
.mock { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-bg-secondary); box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.45; }
.mock-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.mock-head b { font: var(--weight-semibold) 15px/1.3 var(--font-display); }
.mock-head > .num { color: var(--site-link); font-weight: var(--weight-semibold); }
.mock-head .ex-tag { margin-left: auto; }
.chk { display: flex; flex-direction: column; gap: 8px; }
.chk li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); }
.chk li.yes { color: var(--color-text-primary); }
.chk em { flex: none; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-bg-tertiary); color: var(--color-text-muted); font: var(--weight-semibold) 11px/1 var(--font-sans); font-style: normal; letter-spacing: 0.08em; }
.chk li.yes em { background: var(--color-long-bg); color: var(--color-long); }
.mock-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface-2); color: var(--color-text-primary); font: var(--weight-semibold) 14px/1 var(--font-display); }
.mock-btn .ic { width: 15px; height: 15px; }
.mock-btn.off { border-style: dashed; background: var(--color-bg-tertiary); color: var(--color-text-muted); }
.mock-btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.mock-btn.ghost { background: transparent; }
.mock-btn.stop { border-color: color-mix(in srgb, var(--color-short) 40%, transparent); background: color-mix(in srgb, var(--color-short) 12%, transparent); color: var(--color-short); }
.mock-fine { text-align: center; color: var(--color-text-muted); font-size: 13px; text-decoration: underline dotted; text-underline-offset: 3px; }
.stepper { display: flex; flex-wrap: wrap; gap: 6px; }
.stepper span { padding: 5px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-muted); font: var(--weight-medium) 12px/1 var(--font-display); }
.stepper .done { color: var(--color-long); border-color: color-mix(in srgb, var(--color-long) 35%, transparent); }
.stepper .on { color: var(--color-text-primary); border-color: var(--color-accent-line); background: var(--color-accent-soft); }
.cond { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
.cond span { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface); font-weight: var(--weight-medium); }
.cond .op { border-color: var(--color-accent-line); background: var(--color-accent-soft); color: var(--site-link); }
.and { align-self: flex-start; padding-left: 12px; font: var(--weight-semibold) 12px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.summary { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); line-height: 1.55; }
.summary b { display: block; margin-bottom: 4px; font: var(--weight-semibold) 13px/1.3 var(--font-display); color: var(--color-text-primary); }
.mini-eq { padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-chart-bg); }
.mini-k { display: block; margin-bottom: 8px; font: var(--weight-medium) 12px/1 var(--font-display); color: var(--color-text-muted); }
.bot { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
.bot-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.bot-top b { flex-basis: 100%; font: var(--weight-semibold) 15px/1.3 var(--font-display); }
.st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); font: var(--weight-semibold) 12px/1 var(--font-display); }
.st.run { background: var(--color-long-bg); color: var(--color-long); }
.st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2.4s infinite; }
.bot-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bot-kpis div, .kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-bg-secondary); border: 1px solid var(--color-border); }
.bot-kpis span, .kpi span { color: var(--color-text-muted); font-size: 13px; }
.bot-kpis b, .kpi b { font: var(--weight-semibold) 17px/1.2 var(--font-mono); white-space: nowrap; }
.bot-lim { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px dashed var(--color-border-strong); color: var(--color-text-secondary); }
.bot-lim b { color: var(--color-warning); }
.bot-act { display: flex; gap: 8px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kpi { background: var(--color-surface); }
.edge { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
.edge-h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.edge-h b { font: var(--weight-semibold) 15px/1.3 var(--font-display); }
.edge-h span { color: var(--color-text-muted); font-size: 13px; }
.edge-r { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; }
.edge-r + .edge-r { border-top: 1px solid var(--color-border); }
.edge-r > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.edge-r > span b { font-weight: var(--weight-semibold); }
.edge-r small { color: var(--color-text-muted); font-size: 13px; }
.edge-r > b { font: var(--weight-semibold) 16px/1 var(--font-mono); }
.feel, .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.feel span { padding: 8px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.feel .on { border-color: var(--color-accent-line); background: var(--color-accent-soft); color: var(--color-text-primary); }
.mock-k { font: var(--weight-semibold) 13px/1.3 var(--font-display); color: var(--color-text-muted); }
.tags span { padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-size: 13px; }
.tags .on { border-color: color-mix(in srgb, var(--color-long) 35%, transparent); background: var(--color-long-bg); color: var(--color-long); }
.plan-check { display: flex; align-items: center; gap: 10px; }
.box { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--color-border-active); }
.box.on { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.box .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.days { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); }
.days b { font-size: 16px; color: var(--color-text-primary); }
.days .trk { display: block; height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-bg-tertiary); }
.days .trk i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-accent); }

/* ─── Home: before / after ────────────────────────────────── */
.ba { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); }
.ba-h, .ba-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 28px; }
.ba-h { border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary); font: var(--weight-semibold) 13px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.ba-h span:last-child { color: var(--site-link); }
.ba-row + .ba-row { border-top: 1px solid var(--color-border); }
.ba-row .b, .ba-row .a { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.4; }
.ba-row .b { color: var(--color-text-muted); }
.ba-row .b .ic { color: var(--color-short); }
.ba-row .a { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.ba-row .a .ic { color: var(--site-link); }
.ba-arrow { justify-self: center; color: var(--color-border-active); }

/* ─── Home: the six stages ────────────────────────────────── */
.section.stages-sec { margin-top: 120px; padding: 96px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary); }
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.timeline li { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); transition: border-color var(--transition-normal); }
.timeline li:hover { border-color: var(--color-border-strong); }
.timeline .n, .stage-h .n { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--color-accent-line); background: var(--color-accent-soft); color: var(--site-link); font-size: 16px; font-weight: var(--weight-semibold); }
.timeline li > div { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.timeline h3 { font-size: 22px; }
.timeline .plain, .stage-h .plain { font: var(--weight-medium) 15px/1.3 var(--font-display); color: var(--site-link); }
.timeline p:not(.plain) { color: var(--color-text-secondary); font-size: 15px; line-height: 1.6; }
.timeline .more-link { margin-top: auto; padding-top: 8px; }
.timeline li.rv:nth-child(3n + 2) { transition-delay: 70ms; }
.timeline li.rv:nth-child(3n) { transition-delay: 140ms; }

/* ─── Home + security: money flow ─────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.split-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.split-copy h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1.06; }
.flow, .sec-flow { position: relative; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.flow { display: flex; flex-direction: column; }
.node { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-secondary); }
.node-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.node-ic .ic { width: 20px; height: 20px; }
.node b { font: var(--weight-semibold) 16px/1.3 var(--font-display); }
.node > span:not(.node-ic) { color: var(--color-text-secondary); font-size: 14px; line-height: 1.4; }
.node.mid { border-color: var(--color-accent-line); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg-secondary)); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.node.mid .node-ic { background: var(--site-cta); color: var(--color-accent-ink); }
.wire { position: relative; display: block; width: 2px; height: 36px; margin-left: 38px; overflow: hidden; background: var(--color-border-strong); }
/* The light runs from just above the wire to just past its end: its own height
   is 40 % of the wire, so -100 % to 250 % of itself is -40 % to 100 % of the
   wire. Moved by transform, so the compositor draws it (no repaint per frame). */
.wire i { position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: linear-gradient(transparent, var(--color-accent)); animation: wire 1.8s linear infinite; }
@keyframes wire { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
.flow-badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 20px; padding: 8px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-accent-line); background: var(--color-accent-soft); color: var(--color-text-primary); font-size: 14px; line-height: 1.4; }
.flow-badge .ic { width: 16px; height: 16px; color: var(--site-link); }
.flow-badge.refuse { border-color: color-mix(in srgb, var(--color-short) 35%, transparent); background: color-mix(in srgb, var(--color-short) 10%, transparent); }
.flow-badge.refuse .ic { color: var(--color-short); }
.sec-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; margin-top: 40px; text-align: center; }
.sec-flow .node { height: 100%; grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; align-content: center; row-gap: 8px; }
.sec-flow .node-ic { grid-row: auto; }
.link-lbl { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 150px; padding: 0 12px; }
.link-lbl > span:first-child { color: var(--color-text-muted); font-size: 13px; white-space: nowrap; }
.sec-flow .wire { width: 100%; height: 2px; margin: 0; }
.sec-flow .wire i { top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--color-accent)); animation-name: wire-x; }
@keyframes wire-x { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.sec-flow .flow-badge { grid-column: 1 / -1; justify-self: center; margin-top: 24px; }

/* ─── Home: learn teaser, guide cards ─────────────────────── */
.learn-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.g-feat { display: grid; grid-template-rows: auto 1fr; gap: 24px; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); transition: border-color var(--transition-normal); }
.g-feat:hover { border-color: var(--color-border-strong); }
.g-feat-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.g-feat h2, .g-feat h3 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -0.025em; }
.g-feat-copy > p { color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }
.g-feat-fig { align-self: end; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-secondary); }
.g-stage { font: var(--weight-semibold) 13px/1.3 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--site-link); }
.g-meta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--color-text-muted); font-size: 14px; }
.g-meta .ic { width: 16px; height: 16px; transition: transform var(--transition-fast), color var(--transition-fast); }
a:hover .g-meta .ic { transform: translateX(3px); color: var(--site-link); }
.g-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.learn-grid .g-cards { grid-template-columns: 1fr; }
.g-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); transition: border-color var(--transition-normal), transform var(--transition-normal), background-color var(--transition-normal); }
.g-card:hover { border-color: var(--color-border-strong); background: var(--color-bg-elevated); transform: translateY(-2px); }
.g-card h3 { font-size: 20px; line-height: 1.25; }
.g-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; }

/* ─── Home: pricing teaser ────────────────────────────────── */
.pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pt { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.pt.hot, .plan.hot { border-color: var(--color-accent-line); background: linear-gradient(180deg, var(--color-accent-soft), transparent 55%), var(--color-surface); }
.pt-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pt-h b { font: var(--weight-semibold) 18px/1.3 var(--font-display); }
.pop { padding: 5px 10px; border-radius: var(--radius-full); background: var(--site-cta); color: var(--color-accent-ink); font: var(--weight-semibold) 11px/1 var(--font-sans); letter-spacing: 0.1em; white-space: nowrap; }
.pt-p { display: flex; align-items: baseline; gap: 6px; }
.pt-p b { font: var(--weight-semibold) 40px/1 var(--font-mono); letter-spacing: -0.02em; }
.pt-p span { color: var(--color-text-muted); }
.pt > p { color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; }

/* ─── Final call to action (every page) ───────────────────── */
.final { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 96px 32px; text-align: center; border: 1px solid var(--color-border); border-radius: 28px; background: var(--color-bg-secondary); }
.final::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: center center;
  -webkit-mask-image: var(--gmask);
  mask-image: var(--gmask);
}
.final-glow { position: absolute; left: 10%; right: 10%; bottom: -55%; height: 110%; z-index: -1; background: radial-gradient(closest-side, var(--site-glow), transparent); pointer-events: none; }
.final h2 { max-width: 18ch; font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -0.03em; line-height: 1.05; }
.final .lede { margin: 0 auto; }
.final .ctas { justify-content: center; }
.final-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 880px; margin: 8px 0; }
.final-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 85%, transparent); }
.final-steps .ic { width: 22px; height: 22px; color: var(--site-link); }
.final-steps b { font: var(--weight-semibold) 16px/1.3 var(--font-display); }
.final-steps span { color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }

/* ─── Security page ───────────────────────────────────────── */
.sec-hero { align-items: center; text-align: center; }
.sec-hero h1 { max-width: 16ch; }
.sec-hero .lede { margin: 0 auto; }
.facts, .principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact, .principle, .guard { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.fact-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--color-accent-line); background: var(--color-accent-soft); color: var(--site-link); }
.fact-ic .ic { width: 20px; height: 20px; }
.fact b, .principle b, .guard b { font: var(--weight-semibold) 18px/1.3 var(--font-display); }
.fact p, .principle p, .guard p { color: var(--color-text-secondary); font-size: 15px; line-height: 1.6; }
.keyp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.keyp-col { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.keyp-col.can { border-color: color-mix(in srgb, var(--color-long) 30%, transparent); background: color-mix(in srgb, var(--color-long) 5%, var(--color-surface)); }
.keyp-col.cannot { border-color: color-mix(in srgb, var(--color-short) 30%, transparent); background: color-mix(in srgb, var(--color-short) 5%, var(--color-surface)); }
.keyp-col > b { display: flex; align-items: center; gap: 10px; font: var(--weight-semibold) 17px/1.3 var(--font-display); }
.keyp-col ul { display: flex; flex-direction: column; gap: 12px; }
.keyp-col li { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }
.keyp-col li .ic { width: 16px; height: 16px; margin-top: 3px; }
.keyp-col.can .ic { color: var(--color-long); }
.keyp-col.cannot .ic { color: var(--color-short); }
.guards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.guard { padding: 24px; }
.guard > .ic { width: 24px; height: 24px; margin-bottom: 4px; color: var(--site-link); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.card h2 { font-size: 24px; }
.card p { color: var(--color-text-secondary); font-size: 16px; line-height: 1.65; }
.band { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 48px; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: radial-gradient(ellipse at 0% 0%, var(--color-accent-soft), transparent 60%), var(--color-surface); }
.band h2 { font-size: clamp(24px, 2.6vw, 32px); }
.band p { max-width: 560px; margin-top: 8px; color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }
.band .ctas { flex: none; }

/* ─── Pricing page ────────────────────────────────────────── */
.price-hero { padding-top: 88px; }
.price-head { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 56px; text-align: center; }
.price-head h1 { font-size: clamp(40px, 5.6vw, 72px); letter-spacing: -0.03em; line-height: 1.04; }
.price-head .lede { margin: 0 auto; }
.seg small { padding: 3px 8px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--site-link); font: var(--weight-semibold) 11px/1 var(--font-sans); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); }
.plan.hot { box-shadow: 0 0 0 1px var(--color-accent-line), 0 30px 80px -36px var(--site-cta-glow); }
.plan .pop { position: absolute; top: -12px; left: 32px; }
.plan h2 { font-size: 22px; }
.plan .tag { min-height: 3.1em; color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price .m, .price .y { display: inline-flex; align-items: baseline; gap: 6px; }
.price .num { font: var(--weight-semibold) 48px/1 var(--font-mono); letter-spacing: -0.03em; }
.price .unit { color: var(--color-text-muted); font-size: 16px; }
.per { margin-top: -6px; color: var(--color-text-muted); font-size: 14px; }
.plan .btn { width: 100%; }
.plan ul { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.plan li { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }
.plan li .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--site-link); }
.price-page[data-period="annual"] .m, .price-page[data-period="monthly"] .y { display: none; }
.tax { max-width: 760px; margin: 32px auto 0; text-align: center; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }
/* position: relative holds the hidden "Included" labels (.sr, absolutely placed)
   inside the box, so a phone scrolls the table, not the page. */
.cmp-wrap { position: relative; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--color-border); }
.cmp thead th { background: var(--color-bg-secondary); font: var(--weight-semibold) 15px/1.3 var(--font-display); }
.cmp thead th.hot { color: var(--site-link); }
.cmp tbody th { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.cmp td { color: var(--color-text-secondary); }
.cmp td.yes .ic { color: var(--site-link); }
.cmp td.no { color: var(--color-text-faint); }
.cmp td .n { font-family: var(--font-mono); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp tbody tr:hover { background: color-mix(in srgb, var(--color-surface-hover) 60%, transparent); }
/* Wide screens: the plan names stay under the header while the long table
   scrolls past (narrow screens scroll the table sideways instead). */
@media (min-width: 721px) {
  .cmp-wrap { overflow: visible; }
  .cmp thead th { position: sticky; top: 68px; z-index: 1; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--color-border); }
  .cmp thead th:first-child { border-top-left-radius: var(--radius-xl); }
  .cmp thead th:last-child { border-top-right-radius: var(--radius-xl); }
}

/* ─── Articles: guides and help ───────────────────────────── */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 64px; }
.art { min-width: 0; max-width: 760px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--color-text-muted); font-size: 14px; }
.crumbs a { transition: color var(--transition-fast); }
.crumbs a:hover { color: var(--color-text-primary); }
.crumbs .ic { width: 14px; height: 14px; }
.art-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
.art-head h1 { font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -0.03em; line-height: 1.08; }
.answer { padding: 20px 24px; border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--color-accent-soft); color: var(--color-text-primary); font-size: 18px; line-height: 1.6; }
.meta { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }
.meta .ic { width: 16px; height: 16px; }
.art > .meta { margin-top: 40px; align-items: flex-start; }
.art > .meta .ic { margin-top: 2px; }
.where { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--color-text-secondary); font-size: 15px; }
.where .ic { width: 16px; height: 16px; color: var(--site-link); }
.where span { padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: 14px; line-height: 1.3; }
.art h2 { margin: 48px 0 16px; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.025em; scroll-margin-top: 96px; }
.art section { scroll-margin-top: 96px; }
.art section > p { margin: 0 0 20px; color: var(--color-text-secondary); font-size: 18px; line-height: 1.7; }
.art section > p:last-child { margin-bottom: 0; }
.art section > p b, .art section > p strong { color: var(--color-text-primary); }
.nb { white-space: nowrap; }
.art .formula { padding: 2px 8px; border-radius: 6px; background: var(--color-bg-tertiary); color: var(--color-text-primary); font-size: 0.88em; white-space: nowrap; }
.keypts { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.keypts > b, .toc b, .sources > b { display: block; font: var(--weight-semibold) 13px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.keypts > b { margin-bottom: 14px; }
.keypts ul, .notes { display: flex; flex-direction: column; gap: 12px; }
.keypts li, .notes li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.6; }
.notes li { color: var(--color-text-secondary); }
.keypts .ic, .notes .ic { margin-top: 3px; color: var(--site-link); }
.worked { margin-top: 48px; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-secondary); }
.worked-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.art .worked-h h2 { margin: 0; }
.art .worked > p { font-size: 16px; line-height: 1.6; }
.worked dl { display: flex; flex-direction: column; overflow: hidden; margin: 0 0 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.worked dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 16px; }
.worked dl > div + div { border-top: 1px solid var(--color-border); }
.worked dt { color: var(--color-text-secondary); font-size: 15px; line-height: 1.45; }
.worked dd { font: var(--weight-semibold) 16px/1.45 var(--font-mono); color: var(--color-text-primary); text-align: right; white-space: nowrap; }
.worked dl > .neg dd { color: var(--color-short); }
.worked dl > .pos dd { color: var(--color-long); }
.worked dl > .hl { background: var(--color-accent-soft); }
.worked dl > .hl dd { color: var(--site-link); }
.worked-tbl { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.worked-tbl table { width: 100%; border-collapse: collapse; }
.worked-tbl th, .worked-tbl td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.worked-tbl thead th { color: var(--color-text-secondary); font: var(--weight-medium) 13px/1.3 var(--font-sans); border-bottom: 1px solid var(--color-border); }
.worked-tbl tbody tr + tr > * { border-top: 1px solid var(--color-border); }
.worked-tbl tbody th, .worked-tbl td { font: var(--weight-semibold) 16px/1.45 var(--font-mono); color: var(--color-text-primary); }
.worked-tbl tbody th { font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.worked-tbl .r { text-align: right; }
.worked-tbl .neg td:nth-last-child(-n+2) { color: var(--color-short); }
.art .worked > .worked-note { margin: 0; color: var(--color-text-secondary); font-size: 15px; }
.mistakes { display: flex; flex-direction: column; gap: 12px; }
.mistakes li { display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.mistakes li > .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--color-warning); }
.mistakes b { display: block; margin-bottom: 4px; font: var(--weight-semibold) 16px/1.4 var(--font-display); }
.mistakes p { color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }
.try { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding: 28px; border: 1px solid var(--color-accent-line); border-radius: var(--radius-xl); background: radial-gradient(ellipse at 100% 0%, var(--color-accent-soft), transparent 70%), var(--color-surface); }
.try-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.art .try-copy h2 { margin: 0; font-size: 24px; }
.try-copy > p { color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }
.try-k { display: inline-flex; align-items: center; gap: 8px; font: var(--weight-semibold) 13px/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--site-link); }
.try-k .ic { width: 16px; height: 16px; }
.try-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.try-links a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: 14px; transition: border-color var(--transition-fast); }
.try-links a:hover { border-color: var(--color-border-active); }
.try-links .ic { width: 15px; height: 15px; color: var(--site-link); }
.try .btn { flex: none; }
.sources { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; }
.sources > b { margin-bottom: 4px; }
.sources .indep { margin-top: 8px; color: var(--color-text-muted); font-size: 14px; }
.side { position: sticky; top: 96px; }
.side-in { display: flex; flex-direction: column; gap: 16px; }
.toc { display: flex; flex-direction: column; }
.toc b { margin-bottom: 10px; }
.toc a { padding: 6px 0 6px 14px; border-left: 2px solid var(--color-border); color: var(--color-text-secondary); font-size: 14px; line-height: 1.4; transition: color var(--transition-fast), border-color var(--transition-fast); }
.toc a:hover { color: var(--color-text-primary); }
.toc a.on { border-left-color: var(--color-accent); color: var(--color-text-primary); }
.side-box { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.side-box > b { font: var(--weight-semibold) 15px/1.3 var(--font-display); }
.side-box > p { color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; }
.side-box ul { display: flex; flex-direction: column; }
.side-box li a, .side-box li span { display: block; padding: 6px 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.4; transition: color var(--transition-fast); }
.side-box li a:hover { color: var(--color-text-primary); }
.side-box li span[aria-current] { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.side-box.sec-pill { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
.sec-pill a { font: var(--weight-semibold) 15px/1.3 var(--font-display); }
.sec-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--color-accent-line); background: var(--color-accent-soft); color: var(--site-link); }
.sec-ic .ic { width: 18px; height: 18px; }
.help-note { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); color: var(--color-text-muted); font-size: 14px; line-height: 1.55; }
.read-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--z-sticky) + 1); pointer-events: none; }
.read-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--color-accent-muted), var(--color-accent)); }
html:not(.js) .read-bar { display: none; }
/* Help: numbered steps, notes, keys */
.steps { display: flex; flex-direction: column; gap: 12px; counter-reset: step; }
.steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 18px 64px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 20px; top: 17px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-accent-line); background: var(--color-accent-soft); color: var(--site-link); font: var(--weight-semibold) 14px/1 var(--font-mono); }
.steps b { font: var(--weight-semibold) 17px/1.4 var(--font-display); color: var(--color-text-primary); }
.steps span { color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }
.keys { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.keys > div { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.keys > div + div { border-top: 1px solid var(--color-border); }
.keys dt { min-width: 160px; }
.keys dd { color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }

/* ─── Guides index ────────────────────────────────────────── */
.learn-hero h1 { max-width: 18ch; }
.stage-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stage-nav a { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 6px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font: var(--weight-medium) 15px/1 var(--font-display); color: var(--color-text-secondary); transition: color var(--transition-fast), border-color var(--transition-fast); }
.stage-nav a:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.stage-nav .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-tertiary); color: var(--color-text-primary); font-size: 13px; }
body.learn .g-feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 40px; padding: 40px; }
body.learn .g-feat-fig { align-self: center; }
body.learn .g-feat.solo { grid-template-columns: minmax(0, 1fr); } /* a featured guide without a cover picture */
body.learn .g-feat.solo .g-feat-copy > p { max-width: 68ch; }
.stage-block { padding-top: 88px; scroll-margin-top: 72px; }
.stage-h { display: flex; align-items: flex-start; gap: 20px; max-width: 760px; margin-bottom: 28px; }
.stage-h .n { width: 48px; height: 48px; border-radius: var(--radius-lg); font-size: 20px; }
.stage-h > div { display: flex; flex-direction: column; gap: 6px; }
.stage-h h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.025em; }
.stage-h p:not(.plain) { color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }
.empty { padding: 24px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text-muted); font-size: 15px; line-height: 1.6; }

/* ─── Help index ──────────────────────────────────────────── */
.help-head { align-items: center; text-align: center; }
.help-head .lede { margin: 0 auto; }
.help-head .search { margin: 12px auto 0; }
.popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.popular > span { margin-right: 4px; color: var(--color-text-muted); font-size: 14px; }
.popular a { padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: 14px; transition: color var(--transition-fast), border-color var(--transition-fast); }
.popular a:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.section.help-sections { padding-top: 72px; }
.sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sec-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); scroll-margin-top: 96px; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); }
.sec-card:target { border-color: var(--color-accent-line); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.sec-card-h { display: flex; align-items: center; gap: 14px; }
.sec-card-h > div { display: flex; flex-direction: column; gap: 2px; }
.sec-card h2 { font-size: 19px; }
.sec-n { color: var(--color-text-muted); font-size: 13px; }
.sec-card > p { color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; }
.sec-card ul { display: flex; flex-direction: column; }
.sec-card li a { display: block; padding: 9px 0; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 15px; line-height: 1.4; transition: color var(--transition-fast); }
.sec-card li a:hover { color: var(--site-link); }

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; list-style: none; cursor: pointer; font: var(--weight-semibold) 18px/1.35 var(--font-display); color: var(--color-text-primary); transition: color var(--transition-fast); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--site-link); }
.faq summary::after { content: '+'; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); font: 400 20px/1 var(--font-sans); transition: transform var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--site-link); border-color: var(--color-accent-line); }
.faq details p { padding: 0 48px 24px 0; color: var(--color-text-secondary); font-size: 16px; line-height: 1.65; }
/* Open questions (the FAQ page, pricing's billing questions): the question is a
   heading, the answer sits under it, one hairline between them. Nothing to open. */
.qa { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.qa > div { padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.qa h2, .qa h3 { font: var(--weight-semibold) 18px/1.35 var(--font-display); letter-spacing: 0; color: var(--color-text-primary); }
.qa p { margin-top: 8px; color: var(--color-text-secondary); font-size: 16px; line-height: 1.65; max-width: 68ch; }
.more { margin-top: 24px; text-align: center; font-size: 15px; }
.faq-head h1 { max-width: 14ch; }
.qa > div { scroll-margin-top: 96px; } /* a link to one question or term lands under the sticky header */
.qa p b { color: var(--color-text-primary); }

/* ─── Glossary, how we write ──────────────────────────────── */
/* Letters to jump by, then one group per letter: the letter is a quiet heading,
   each term a question-style row (the .qa block) with its own anchor. */
.az { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.az a { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--radius-md); color: var(--color-text-secondary); font: var(--weight-semibold) 15px/1 var(--font-display); transition: color var(--transition-fast), background-color var(--transition-fast); }
.az a:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }
.gloss-group { scroll-margin-top: 80px; }
.gloss-group + .gloss-group { margin-top: 40px; }
.gloss-l { padding-bottom: 8px; color: var(--color-text-muted); font: var(--weight-semibold) 22px/1.2 var(--font-display); letter-spacing: 0; }
.qa dfn { font-style: normal; }
.hww .keypts { margin-bottom: 48px; }
/* A guide's glossary words: a hairline and a heading like Sources, the words as links. */
.g-words { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-border); scroll-margin-top: 96px; }
.g-words > b { display: block; margin-bottom: 4px; font: var(--weight-semibold) 13px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.g-words p { color: var(--color-text-secondary); font-size: 15px; line-height: 1.9; }
.g-words + .sources { margin-top: 32px; }

/* ─── 404 ─────────────────────────────────────────────────── */
/* The brand mark as an unbuilt lot: the tallest column has only its foundation. */
.lost { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 64px; padding-top: 96px; }
.lost-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lost h1 { font-size: clamp(40px, 5.2vw, 64px); letter-spacing: -0.03em; line-height: 1.04; }
.lost .search { max-width: 560px; }
.lost .ctas { margin-top: 4px; }
.lost-note { color: var(--color-text-muted); font-size: 15px; line-height: 1.55; }
.lot { position: relative; justify-self: end; width: 100%; max-width: 420px; padding: 56px 24px 20px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-bg-secondary); box-shadow: var(--shadow-md); }
.lot .lbl { position: absolute; left: 16px; top: 16px; font: var(--weight-semibold) 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.lot .cols { display: flex; justify-content: center; align-items: flex-end; gap: 22px; }
.lot .col { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; width: 58px; }
.lot .col i { display: block; height: 52px; border-radius: 4px; background: var(--color-border-active); }
.lot .col i:first-child { border-radius: 18px 18px 4px 4px; }
.lot .col i.f { background: var(--color-accent); }
.lot .col i.g { background: transparent; border: 1.5px dashed var(--color-border-active); }
.lot .ground { display: block; margin-top: 14px; border-top: 1px solid var(--color-border-strong); }

/* ─── Help search box ─────────────────────────────────────── */
.search { position: relative; width: 100%; max-width: 640px; text-align: left; }
.search input { width: 100%; height: 56px; padding: 0 52px 0 50px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-primary); font: 17px var(--font-sans); box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--color-text-muted); }
.search input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.search > .ic { position: absolute; left: 18px; top: 19px; color: var(--color-text-muted); pointer-events: none; }
.search > kbd { position: absolute; right: 16px; top: 16px; padding: 1px 8px; border: 1px solid var(--color-border-strong); border-radius: 5px; color: var(--color-text-muted); }
.results { position: absolute; left: 0; right: 0; top: 64px; z-index: 5; max-height: 440px; overflow: auto; padding: 6px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-elevated); box-shadow: var(--shadow-lg); }
.results[hidden] { display: none; }
.results a { display: block; padding: 10px 14px; border-radius: var(--radius-md); }
.results a:hover, .results a[aria-selected="true"] { background: var(--color-surface-hover); }
.results span { display: block; }
.results .sec { margin-bottom: 2px; font: var(--weight-semibold) 12px/1.3 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--site-link); }
.results b { display: block; font-size: 15px; line-height: 1.4; color: var(--color-text-primary); }
.results a > span:last-child { color: var(--color-text-muted); font-size: 14px; line-height: 1.45; }
.results .none { padding: 14px; color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }
.results .none a { display: inline; padding: 0; }

/* ─── Search palette (one-dialog rule) ────────────────────── */
dialog.k-dlg {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: min(560px, calc(100vh - 96px));
  margin: 12vh auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}
dialog.k-dlg::backdrop { background: var(--color-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.k-dlg[open] { animation: rise var(--transition-normal) var(--site-ease); }
.k-in { display: flex; flex-direction: column; max-height: inherit; }
.k-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--color-border); }
.k-field > .ic { color: var(--color-text-muted); }
.k-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--color-text-primary); font: 17px var(--font-sans); }
.k-field input::placeholder { color: var(--color-text-muted); }
.k-x { height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); font-size: 12px; }
.k-x:hover { color: var(--color-text-primary); }
.k-results { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; }
.k-g { padding: 12px 12px 6px; font: var(--weight-semibold) 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.k-results a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); }
.k-results a[aria-selected="true"] { background: var(--color-surface-hover); }
.k-results a .ic { margin-top: 2px; color: var(--color-text-muted); }
.k-results a[aria-selected="true"] .ic { color: var(--site-link); }
.k-results a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-results b { font-size: 15px; line-height: 1.4; }
.k-results a > span > span { overflow: hidden; color: var(--color-text-muted); font-size: 14px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.k-empty { padding: 24px 12px; text-align: center; color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }
.k-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 24px; border-top: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text-muted); font-size: 13px; }
.k-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.k-foot kbd { min-width: 20px; padding: 0 5px; border: 1px solid var(--color-border-strong); border-radius: 4px; background: var(--color-surface); text-align: center; }
.k-foot a { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--site-link); font-weight: var(--weight-medium); }
.k-foot .ic { width: 14px; height: 14px; }

/* ─── Reveal on scroll ────────────────────────────────────── */
html.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--site-ease), transform 0.7s var(--site-ease); }
html.js .rv.in { opacity: 1; transform: none; }
@media print { html.js .rv { opacity: 1; transform: none; } .nav, .read-bar, .foot { display: none; } }

/* ─── Feature pages: loops, hover cards, the extras ───────── */
/* Head: the breadcrumb sits above the eyebrow; the two calls side by side. */
.feat-head .crumbs { margin-bottom: 8px; }
.feat-head .eyebrow { margin-bottom: 4px; }
/* The loop: a short recording of the screen, in the app window's own frame.
   Never autoplays; site.js plays it while in view and the button pauses it.
   Without script, and under reduced motion, the poster alone shows. */
.feat-loop { margin-top: 40px; }
.loop { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.loop-win { position: relative; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-2xl); background: var(--color-bg-secondary); box-shadow: var(--shadow-lg); }
.loop-win::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: radial-gradient(60% 50% at 50% 0%, var(--color-accent-soft), transparent 70%); pointer-events: none; }
.loop video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--color-bg-secondary); }
.loop-btn { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: color-mix(in srgb, var(--color-surface) 88%, transparent); color: var(--color-text-primary); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); }
.loop-btn:hover { background: var(--color-surface); transform: scale(1.04); }
.loop-btn .ic { width: 18px; height: 18px; }
.loop-btn .ic-play, .loop[data-paused] .loop-btn .ic-pause { display: none; }
.loop[data-paused] .loop-btn .ic-play { display: block; }
html:not(.js) .loop-btn { display: none; }
.loop figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }
/* Copy beside the feature lines. */
.feat-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; }
.feat-copy { display: flex; flex-direction: column; gap: 18px; }
.feat-copy p { font-size: 18px; line-height: 1.65; color: var(--color-text-secondary); }
.feat-copy p:first-child { color: var(--color-text-primary); }
.feat-ticks { gap: 16px; }
.feat-ticks li { font-size: 17px; }
/* Something to try: the walk-through at full width, the drawn screen in its frame. */
.feat-demo { margin: 0; }
.feat-shot { max-width: 960px; margin: 0 auto; }
/* The other four screens: one row each, the whole row clickable. */
.feat-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feat-links a { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.feat-links a:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.feat-links a > .ic { flex: none; width: 22px; height: 22px; color: var(--site-link); }
.feat-links a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feat-links b { font: var(--weight-semibold) 16px/1.3 var(--font-display); color: var(--color-text-primary); }
.feat-links a > span > span { color: var(--color-text-secondary); font-size: 15px; line-height: 1.4; }
.feat-links a > .ic:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--color-text-muted); transition: transform var(--transition-fast); }
.feat-links a:hover > .ic:last-child { transform: translateX(3px); }
/* Hover cards on a feature line or a plan line: a title, two sentences, Learn
   more. A pointer opens one by hovering the line; a keyboard or a touch by the
   small help button (also what a screen reader lands on). One is open at a time;
   Escape and a click elsewhere close it. Under 720 px the card sits in the flow
   under its line instead of floating, so a thumb never covers it. */
.hc-host { position: relative; flex-wrap: wrap; }
.hc-host > span { flex: 1 1 0; min-width: 0; }
.hc-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--color-text-muted); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.hc-btn .ic { width: 15px; height: 15px; margin: 0; color: inherit; }
.hc-btn:hover, .hc-btn:focus-visible, .hc-host[data-open] .hc-btn { color: var(--site-link); border-color: var(--color-border-strong); background: var(--color-surface); }
.hc { display: none; position: absolute; left: 36px; top: calc(100% + 8px); z-index: 20; width: min(340px, calc(100vw - 2 * var(--site-gutter) - 36px)); padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-lg); color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; text-align: left; }
.hc b { display: block; margin-bottom: 6px; color: var(--color-text-primary); font: var(--weight-semibold) 16px/1.3 var(--font-display); }
.hc p { margin: 0; }
.hc a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--site-link); font-weight: var(--weight-medium); }
.hc a .ic { width: 14px; height: 14px; margin: 0; }
.hc-host[data-open] .hc, .hc-host:focus-within .hc { display: block; }
@media (hover: hover) and (min-width: 721px) { .hc-host:hover .hc { display: block; } }
.hc-host:not([data-open]) .hc-btn:focus-visible ~ .hc { display: block; }
@media (max-width: 720px) {
  .hc { position: static; width: 100%; margin: 4px 0 4px 36px; width: calc(100% - 36px); box-shadow: none; background: var(--color-bg-secondary); }
  .hc-host:focus-within:not([data-open]) .hc { display: none; }
  .hc-host:not([data-open]) .hc-btn:focus-visible ~ .hc { display: none; }
}
/* Scroll-driven reveal where the browser has it: the same .rv entrance, run
   by the scroll position instead of an observer, so it also plays backwards.
   The observer's .in still lands (harmless), and the fallback stays as it was. */
@supports (animation-timeline: view()) {
  html.js .rv { opacity: 1; transform: none; transition: none; animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes rv-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
/* A soft cross-fade between pages where the browser has it (nothing to script). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
  .nav { view-transition-name: site-nav; }
}
@media (max-width: 960px) {
  .feat-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feat-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .feat-loop { margin-top: 28px; }
  .loop-win { border-radius: var(--radius-xl); }
  .loop-btn { right: 10px; bottom: 10px; width: 36px; height: 36px; }
  .feat-copy p { font-size: 17px; }
  .feat-links a { padding: 14px 16px; }
}

/* ─── Breakpoints ─────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav-in { gap: 24px; }
  .kbar { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .kbar span, .kbar kbd { display: none; }
  .principles, .guards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .links, .right .ghost { display: none; }
  .burger { display: inline-grid; }
  .right { gap: 6px; }
  .win-body { grid-template-columns: minmax(0, 1fr) 270px; }
  .tab-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .facts, .timeline, .g-cards, .sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-grid { grid-template-columns: minmax(0, 1fr); }
  .learn-grid .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.learn .g-feat { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .side { position: static; }
  .toc { display: none; }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-in { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .pts, .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .plan .tag { min-height: 0; }
  .sec-flow { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .sec-flow .node { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; row-gap: 2px; }
  .sec-flow .node-ic { grid-row: 1 / 3; }
  .link-lbl { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 16px; min-width: 0; padding: 0 0 0 38px; }
  .sec-flow .wire { width: 2px; height: 44px; }
  .sec-flow .wire i { left: 0; top: 0; width: 100%; height: 40%; background: linear-gradient(transparent, var(--color-accent)); animation-name: wire; }
  .sec-flow .flow-badge { justify-self: start; }
  .lost { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lot { justify-self: start; max-width: 380px; }
}
@media (max-width: 720px) {
  :root { --site-gutter: 16px; }
  body { font-size: 16px; }
  main { padding-bottom: 80px; }
  .section { padding-top: 72px; }
  .page-head, .price-hero { padding-top: 48px; }
  .doc { padding-top: 32px; }
  .sec-head { margin-bottom: 32px; }
  .sec-head.row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .nav-in { gap: 12px; height: 60px; }
  .hero { padding-top: 48px; }
  .hero-shot { margin-top: 48px; }
  /* phones: three pulses, shorter, stopping one cell from the centre; no cursor light */
  .hero-bg { --len: 64px; --stop: 1; }
  .final { --len: 64px; }
  .gp:nth-of-type(n+4), .gl { display: none; }
  .trust { flex-direction: column; align-items: center; gap: 8px; }
  .win-tabs span:not(.on) { display: none; }
  .win-body { grid-template-columns: minmax(0, 1fr); }
  .win-chart { border-right: 0; border-bottom: 1px solid var(--color-border); padding: 12px; }
  .win-chart .fig-chart { min-height: 260px; }
  .tk-types, .tk-toggle, .tk-sum, .tk-go { display: none; }
  .demo-steps { grid-template-columns: minmax(0, 1fr); }
  .marquee { margin-top: 72px; }
  .calc-in, .calc-out { padding: 20px; }
  .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tab-list { margin: 0; justify-content: flex-start; }
  .tab-panel { padding: 20px; }
  .mock { padding: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bot-kpis b, .kpi b { font-size: 15px; }
  .cond { grid-template-columns: minmax(0, 1fr); }
  .ba-h { display: none; }
  .ba-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 20px; }
  .ba-arrow { display: none; }
  .ba-row .b, .ba-row .a { font-size: 16px; }
  .section.stages-sec { margin-top: 72px; padding: 64px 0; }
  .facts, .timeline, .g-cards, .learn-grid .g-cards, .sections, .principles, .guards, .keyp, .two, .final-steps { grid-template-columns: minmax(0, 1fr); }
  .fact, .principle, .guard, .card { padding: 22px; }
  /* One column: the six stages read as a timeline, numbers joined by a line, no boxes. */
  .timeline { gap: 0; }
  .timeline li { position: relative; flex-direction: row; padding: 0 0 32px; border: 0; background: none; }
  .timeline li::before { content: ""; position: absolute; left: 20px; top: 48px; bottom: 8px; width: 1px; background: var(--color-accent-line); }
  .timeline li:last-child { padding-bottom: 0; }
  .timeline li:last-child::before { display: none; }
  .timeline li > div { padding-top: 6px; }
  .timeline h3 { font-size: 20px; }
  .g-feat, body.learn .g-feat { padding: 22px; }
  .flow, .sec-flow { padding: 20px; }
  .band { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
  .final { padding: 56px 20px; border-radius: var(--radius-2xl); }
  .final-steps { gap: 8px; }
  .final-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 14px; row-gap: 2px; padding: 16px; text-align: left; }
  .final-steps .ic { grid-row: span 2; margin-top: 1px; }
  .plan { padding: 24px; }
  .plan .pop { left: 24px; }
  .price .num { font-size: 40px; }
  table.cmp { min-width: 600px; }
  .cmp th, .cmp td { padding: 12px 14px; }
  .cmp th:first-child, .cmp td:first-child { min-width: 150px; }
  .answer { padding: 16px 18px; font-size: 17px; }
  .art section > p { font-size: 17px; }
  .art h2 { margin-top: 40px; }
  .worked, .try { padding: 22px; }
  .worked dl > div { flex-direction: column; gap: 2px; }
  .worked dd { text-align: left; white-space: normal; }
  /* Five columns of figures fit a 375 px phone without a sideways scroll. */
  .worked-tbl th, .worked-tbl td { padding: 12px 6px; font-size: 14px; }
  .worked-tbl thead th { font-size: 13px; white-space: normal; vertical-align: bottom; }
  .worked-tbl tr > :first-child { padding-left: 12px; }
  .worked-tbl tr > :last-child { padding-right: 12px; }
  .fig-flow { grid-auto-flow: row; gap: 20px; padding: 24px 20px; }
  .fig-flow li { padding: 0 0 0 36px; }
  .fig-flow li:not(:last-child)::after { top: 30px; left: 11px; right: auto; bottom: -14px; width: 1px; height: auto; }
  .try { flex-direction: column; align-items: flex-start; }
  .steps li { padding: 16px 16px 16px 56px; }
  .steps li::before { left: 16px; top: 15px; }
  .keys > div { flex-direction: column; align-items: flex-start; gap: 6px; }
  .stage-block { padding-top: 64px; }
  .stage-h { gap: 14px; }
  .faq summary { font-size: 17px; padding: 18px 0; }
  .faq details p { padding-right: 0; }
  .qa > div { padding: 20px 0; }
  .qa h2, .qa h3 { font-size: 17px; }
  .gloss-group + .gloss-group { margin-top: 32px; }
  .az a { min-width: 40px; height: 40px; }
  .search > kbd { display: none; }
  .search input { padding-right: 16px; }
  .lot { padding: 48px 16px 16px; }
  .lot .cols { gap: 16px; }
  .lot .col { width: 50px; }
  .lot .col i { height: 44px; }
  .foot-in { padding-top: 48px; gap: 32px 24px; }
  .foot-base { flex-direction: column; gap: 12px; }
  .k-field { padding-left: 16px; }
  .k-results { padding: 8px; }
  .k-foot { padding: 12px 16px; }
  .k-foot > span { display: none; }
  dialog.k-dlg { margin-top: 16px; }
}
@media (max-width: 480px) {
  .kbar { display: none; }
  .right { gap: 4px; }
  .logo { font-size: 16px; gap: 8px; }
  .btn.sm { padding: 0 12px; }
  .ctas .btn.lg { width: 100%; }
  .hero-pill .pill-more { display: none; }
  /* Phones: every screen tab in view at once, icon over label, like an app's tab bar. */
  .tab-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; border-radius: var(--radius-xl); }
  .tab-list button { flex-direction: column; justify-content: center; gap: 6px; height: 58px; padding: 0 2px; font-size: 13px; border-radius: var(--radius-lg); }
  .tab-list .ic { width: 18px; height: 18px; }
  /* Phones: the six stage links read as one contents list instead of ragged pills. */
  .stage-nav { align-self: stretch; flex-direction: column; flex-wrap: nowrap; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); overflow: hidden; }
  .stage-nav a { height: 50px; padding: 0 18px 0 12px; border: 0; border-radius: 0; background: none; }
  .stage-nav a + a { border-top: 1px solid var(--color-border); }
  .stage-nav a::after { content: ""; width: 7px; height: 7px; margin: -4px 0 0 auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0.6; }
  /* Phones: a guide's help links stack as one list instead of wrapping pills. */
  .try-links { flex-direction: column; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
  .try-links a { display: flex; align-items: flex-start; padding: 12px 14px; border: 0; border-radius: 0; background: none; font-size: 15px; line-height: 1.4; }
  .try-links .ic { flex: none; margin-top: 2px; }
  .try-links li + li a { border-top: 1px solid var(--color-border); }
}
@media (max-width: 360px) {
  .tab-list { gap: 2px; padding: 3px; }
  .tab-list button { padding: 0; font-size: 12px; }
}
@media (min-width: 481px) { .menu .menu-search { display: none; } }

/* ─── Motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  html.js .rv { opacity: 1; transform: none; animation: none; }
  /* The loops stay on their poster: site.js never plays them, and the button goes. */
  .loop-btn { display: none; }
  .mq-track { width: auto; animation: none; }
  .mq-row { flex-wrap: wrap; justify-content: center; padding: 0 var(--site-gutter); }
  .mq-row[aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .wire i { display: none; }
  /* The grid stands still: no pulses, no cursor light (site.js never starts it either). */
  .gp, .gl { display: none; }
}

/* figure positions, generated */
.fp-l12_4{left:12.4%}
.fp-l89_3{left:89.3%}
.fp-t12_2{top:12.2%}
.fp-t19_0{top:19.0%}
.fp-t20_6{top:20.6%}
.fp-t24_2{top:24.2%}
.fp-t25_0{top:25.0%}
.fp-t31_7{top:31.7%}
.fp-t34_6{top:34.6%}
.fp-t35_3{top:35.3%}
.fp-t38_1{top:38.1%}
.fp-t39_4{top:39.4%}
.fp-t43_9{top:43.9%}
.fp-t44_2{top:44.2%}
.fp-t5_8{top:5.8%}
.fp-t5_9{top:5.9%}
.fp-t51_2{top:51.2%}
.fp-t54_5{top:54.5%}
.fp-t57_1{top:57.1%}
.fp-t57_4{top:57.4%}
.fp-t63_5{top:63.5%}
.fp-t64_7{top:64.7%}
.fp-t69_7{top:69.7%}
.fp-t7_3{top:7.3%}
.fp-t70_7{top:70.7%}
.fp-t73_5{top:73.5%}
.fp-t76_2{top:76.2%}
.fp-t81_0{top:81.0%}
.fp-t81_6{top:81.6%}
.fp-t82_7{top:82.7%}
.fp-t84_8{top:84.8%}
.fp-t9_1{top:9.1%}
.fp-t9_5{top:9.5%}
.fp-t90_2{top:90.2%}
.fp-t91_5{top:91.5%}
.fp-t93_8{top:93.8%}
.fp-t94_0{top:94.0%}
.fp-t94_1{top:94.1%}
.fp-t95_2{top:95.2%}
.fp-vdl0{--dl:0}
.fp-vdl0_9{--dl:0.9}
.fp-vdl1_1{--dl:1.1}
.fp-vdl1_3{--dl:1.3}
.fp-vdl2_2{--dl:2.2}
.fp-vdl2_4{--dl:2.4}
.fp-vdl2_9{--dl:2.9}
.fp-vdl3_3{--dl:3.3}
.fp-vdl3_9{--dl:3.9}
.fp-vdl4_6{--dl:4.6}
.fp-vdl5_1{--dl:5.1}
.fp-vdl5_8{--dl:5.8}
.fp-vdl6_7{--dl:6.7}
.fp-vdu6{--du:6}
.fp-vdu6_5{--du:6.5}
.fp-vdu7{--du:7}
.fp-vdu7_5{--du:7.5}
.fp-vdu8{--du:8}
.fp-vdu8_5{--du:8.5}
.fp-vdu9{--du:9}
.fp-vln1{--ln:1}
.fp-vln2{--ln:2}
.fp-vln3{--ln:3}
.fp-vln4{--ln:4}
.fp-vln5{--ln:5}
.fp-vln6{--ln:6}
.fp-vln7{--ln:7}
.fp-vlnm2{--ln:-2}
.fp-vlnm4{--ln:-4}
.fp-vlnm7{--ln:-7}
.fp-w10_0{width:10.0%}
.fp-w100_0{width:100.0%}
.fp-w12_4{width:12.4%}
.fp-w12_5{width:12.5%}
.fp-w15_4{width:15.4%}
.fp-w17_9{width:17.9%}
.fp-w20_0{width:20.0%}
.fp-w23_1{width:23.1%}
.fp-w33_3{width:33.3%}
.fp-w35_9{width:35.9%}
.fp-w40_0{width:40.0%}
.fp-w48_7{width:48.7%}
.fp-w5_0{width:5.0%}
.fp-w5_1{width:5.1%}
.fp-w50_0{width:50.0%}
.fp-w59_5{width:59.5%}
.fp-w63_2{width:63.2%}
.fp-w66_7{width:66.7%}
.fp-w74_4{width:74.4%}
.fp-w76_8{width:76.8%}
.fp-w97_4{width:97.4%}