/* ============================================================
   VideoDoc — Node × Matrix identity (Designesh house brand)
   Blue #0B84E3 accent · calm blue-grey/navy neutrals · never pure black
   JetBrains Mono (display/labels/data) + IBM Plex Sans (body)
   Light + dark theme via :root[data-theme="dark"].
   Shared by / and /try — the legacy shim section near the end keeps
   the /try demo page (which links ../style.css) working untouched.

   NOTE ON THE --orange-* TOKEN NAMES.
   The brand moved from orange to blue as a pure hue rotation: every
   token kept its NAME and its ROLE, and only its VALUE changed. The
   names are deliberately not renamed because /mac, /support and /try
   reference --orange-line (and --accent, --accent-text, --grad, --glow,
   …) directly from their inline <style> blocks. Renaming here would
   silently fall back to the orange literals still sitting in those
   files' var() fallbacks. Read --orange-* as "the brand accent".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;0,800;1,500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   1. TOKENS — Designesh design system (colors / type / spacing)
   ============================================================ */
:root {
  /* — Base neutrals — */
  --ink:        #0F1B2D;   /* 15.82:1 on --page, 17.28:1 on --card */
  --ink-2:      #1C2A40;
  --ink-bg:     #0D1524;
  --ink-bg-0:   #070C16;   /* deepest band (dark theme) */
  --ink-bg-2:   #1B2A46;   /* dark-theme card surface. 1.28:1 off --ink-bg: a
                              card should not lean on its hairline alone to be
                              seen, so the fill does part of the work too.
                              The source palette's #152036 is only 1.12:1 off
                              the page — invisible — so the fill is lifted. */
  --ink-bg-3:   #213152;   /* dark-theme inset well — 1.41:1 off the page,
                              1.11:1 off the card */

  --page:       #F2F5FA;
  --card:       #FFFFFF;

  /* — Blue-grey ramp (was the slate ramp) —
     Every value that carries body text clears 4.5:1 on --card, on --page
     AND on --surface-sunk, so a token can move between them safely.
     The source palette's --faint #8A94A6 is 2.80:1 on --page and 3.06:1 on
     white, so it is NOT used for anything that carries information; the
     compliant --slate-faint below stands in for it everywhere. */
  --slate:      #6B7A93;   /* spare — not referenced */
  --slate-deep: #5A667B;   /* spare — not referenced */
  --slate-soft: #535E72;   /* 5.98 / 6.54 / 5.64 on page / card / sunk */
  --slate-muted:#586479;   /* palette --soft. 5.47 / 5.98 / 5.16 */
  --slate-faint:#5D6A80;   /* 5.01 / 5.47 / 4.72 — the compliant --faint */
  --slate-solid:#4F5A6D;   /* blue-grey surface that CARRIES white text — 6.96:1 */

  /* — Hairlines — */
  --line:       #E1E7F0;
  --line-2:     #CFD8E6;

  /* — Blue: the one accent —
     --orange (#0B84E3, the palette's --acc) is DECORATION ONLY: halos,
     hairlines, hover borders, the caret, gradients. It is 3.87:1 against
     white and must never sit under white text. --orange-solid is the blue
     that carries text, and it deepens on hover/press rather than
     lightening — lightening is what breaks the ratio. */
  --orange:       #0B84E3;        /* palette --acc   */
  --orange-light: #2A9BF5;        /* palette --acc-h */
  --orange-press: #0866B4;        /* palette --acc-ink */
  --orange-solid:       #0866B4;  /* white text 5.88:1 */
  --orange-solid-hover: #075799;  /* white text 7.41:1 */
  --orange-solid-press: #064982;  /* white text 9.20:1 */
  --orange-ink:         #04121F;  /* dark text set ON vivid blue — 7.38:1 on
                                     #3FA9F5, 8.73:1 on #5FB8F8, 4.88:1 on
                                     #0B84E3 (the tightest, the pressed band) */
  --orange-text-lg:#0B84E3;       /* large text only — 3.54:1 on --page */
  --orange-text:   #0866B4;       /* 5.38 page / 5.88 card / 5.08 sunk */
  --orange-wash:  #E3F3FD;        /* palette --acc-tint */
  --orange-line:  #AFD9F6;        /* palette --acc-line */
  --orange-grad-a: #0866B4;       /* large-text gradient, 5.38:1 on --page */
  --orange-grad-b: #0B84E3;       /* large-text gradient, 3.54:1 on --page */

  /* — Green: verified / live / terminal ONLY —
     The palette's --ok #12855A is 4.64:1 on white but only 4.00:1 on
     --surface-sunk and 4.06:1 on --green-wash, so it fails as text on the
     surfaces this site actually puts it on. --green-deep is the same hue
     taken down until it clears 4.5:1 everywhere, the same relationship
     --acc-ink has to --acc. */
  --green:      #45C07D;          /* palette dark --ok — decoration only */
  --green-deep: #107952;          /* 5.41 card / 4.95 page / 4.74 wash / 4.67 sunk */
  --green-wash: #E2F4EC;          /* palette --ok-tint */

  /* — Matrix field — */
  --field-dark: rgba(15,27,45,.09);
  --field-light:rgba(255,255,255,.12);
  --grid-light: rgba(15,27,45,.045);

  /* ===== Semantic aliases (light) ===== */
  --bg:            var(--page);
  --surface:       var(--card);
  --surface-sunk:  #E8EFF7;   /* palette --band */
  --surface-dark:  var(--ink-bg);
  --band-edge:     transparent;   /* dark bands need no edge on a light page */

  --text:          var(--ink);
  --text-secondary:var(--slate-soft);
  --text-muted:    var(--slate-muted);
  --text-faint:    var(--slate-faint);
  --text-accent:   var(--orange-text);
  --text-accent-lg:var(--orange-text-lg);
  --text-on-dark:  #FFFFFF;

  --border:        var(--line);
  --border-strong: var(--line-2);

  --accent:        var(--orange);
  --accent-hover:  var(--orange-light);
  --accent-press:  var(--orange-press);

  /* Blue surfaces that carry text. --on-accent-solid is the only colour
     ever set on top of them, so both themes stay legible from one rule. */
  --accent-solid:       var(--orange-solid);
  --accent-solid-hover: var(--orange-solid-hover);
  --accent-solid-press: var(--orange-solid-press);
  --on-accent-solid:    var(--text-on-dark);
  --neutral-solid:      var(--slate-solid);
  --on-neutral-solid:   var(--text-on-dark);

  --grad-accent: linear-gradient(120deg, var(--orange-grad-a) 0%, var(--orange-grad-b) 100%);

  /* 5.38:1 on --page, 5.88:1 on --surface, 5.08:1 on --surface-sunk */
  --focus:         var(--orange-text);

  /* Code blocks keep their own surface so they never collapse into --bg */
  --code-bg:       var(--ink-bg);
  --code-border:   #1C2942;
  --code-text:     #D4D4D4;          /* 12.32:1 on --code-bg */
  --code-chrome:   #131A28;          /* editor-mock title bar (fixed dark) */
  --code-fn:       #939FB5;          /* 6.52:1 on --code-chrome */

  --status-live:   var(--green);
  --status-live-text: var(--green-deep);

  /* — Families — */
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: var(--font-mono);
  --font-label:   var(--font-mono);
  --font-data:    var(--font-mono);
  --font-body:    var(--font-sans);

  /* — Weights — */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* — Type scale — */
  --fs-display:  52px;
  --fs-h1:       38px;
  --fs-h2:       28px;
  --fs-h3:       21px;
  --fs-h4:       17px;
  --fs-body-lg:  16px;
  --fs-body:     14.5px;
  --fs-sm:       13px;
  --fs-label:    12px;
  --fs-micro:    10.5px;

  /* — Line heights / letter spacing — */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-body:    1.6;
  --lh-relaxed: 1.7;
  --ls-display: -0.04em;
  --ls-heading: -0.02em;
  --ls-label:   0.16em;
  --ls-label-sm:0.1em;
  --ls-data:    0.01em;
  --fvn-tabular: tabular-nums;

  /* — Spacing (8px 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; --space-24:96px;
  --grid-module: 72px;

  /* — Radii — */
  --radius-xs:  4px;
  --radius-sm:  7px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill:999px;

  /* — Shadows — */
  --shadow-xs: 0 1px 2px rgba(15,40,90,.06);
  --shadow-sm: 0 6px 18px -12px rgba(15,40,90,.32);
  --shadow-md: 0 14px 40px -30px rgba(15,40,90,.40);
  --shadow-lg: 0 24px 60px -34px rgba(15,40,90,.50);
  --shadow-orange: 0 10px 30px -12px rgba(11,132,227,.45);
  --shadow-cta:       0 10px 24px -12px rgba(8,102,180,.55);
  --shadow-cta-hover: 0 16px 34px -14px rgba(8,102,180,.60);
  --ring: 0 0 0 3px rgba(11,132,227,.32);

  /* — Motion — */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.45,.05,.25,1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --cursor-blink: 1.15s;

/* — Layout — */
  --container:  1080px;
  --container-wide: 1280px;

  /* ============================================================
     DARK PALETTE — the single definition of every dark-theme value.
     These are inert until the mapping block below points a semantic
     token at one, so they can live safely in the light :root.
     ============================================================ */
  --dk-text-secondary: #AFBACC;   /* 9.32 / 7.31 / 6.59 on bg / card / well */
  --dk-text-muted:     #9DAAC0;   /* palette dark --soft. 7.78 / 6.10 / 5.50 */
  --dk-text-faint:     #93A0B5;   /* 6.90 / 5.41 / 4.88 on bg / card / well */
  /* 3.73:1 on the dark card, 3.36:1 on the dark well, 5.10:1 on the deepest
     band. A dark card sits only 1.28:1 off the page, so this hairline IS the
     card boundary and has to clear 3:1 on its own (WCAG 1.4.11). The source
     palette's --line2 #2E3F5E is 1.54:1 on its card — no boundary at all. */
  --dk-border:         #74839C;
  --dk-border-strong:  #8496AF;   /* 4.75 card / 4.28 well / 6.49 deepest band */
  --dk-code-bg:        #060B14;
  /* The block's fill is deliberately terminal-dark, so it sits 1.08:1 from
     the dark page — the border is the only thing separating them. It is
     pitched brighter than --dk-border-strong for exactly that reason, and
     now clears 3:1 both ways: 3.34:1 against the page, 3.60:1 against the
     block (it used to be 2.56 / 2.64). */
  --dk-code-border:    #556A8E;
  /* The vivid blue the dark theme uses where light uses --orange/-light/
     -press. Mapped in the two theme blocks below, never used directly. */
  --dk-acc:            #3FA9F5;   /* palette dark --acc   */
  --dk-acc-light:      #5FB8F8;   /* palette dark --acc-h */
  --dk-acc-press:      #0B84E3;
  --dk-orange-wash:    rgba(63,169,245,.16);
  --dk-orange-line:    rgba(63,169,245,.38);
  --dk-green-wash:     rgba(69,192,125,.14);
  --dk-field:          rgba(255,255,255,.10);
  /* Navy shadows are invisible on a near-black page — dark uses black. */
  --dk-shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --dk-shadow-sm: 0 6px 18px -10px rgba(0,0,0,.66);
  --dk-shadow-md: 0 14px 40px -26px rgba(0,0,0,.74);
  --dk-shadow-lg: 0 24px 60px -34px rgba(0,0,0,.80);
  --dk-shadow-cta:       0 10px 24px -12px rgba(63,169,245,.55);
  --dk-shadow-cta-hover: 0 16px 34px -14px rgba(63,169,245,.60);
}

/* ============================================================
   1b. DARK THEME
   Two triggers, one palette. The values themselves are defined
   exactly once, above, as --dk-*; what follows is only the mapping.

     · @media (prefers-color-scheme: dark) — a dark-OS visitor gets the
       dark site on first paint, before any toggle has been touched.
       Guarded with :not([data-theme="light"]) so an explicit light
       choice always wins over the OS.
     · :root[data-theme="dark"] — the explicit toggle. Both selectors
       compute to the SAME specificity (0,2,0), so this one wins purely
       because it comes later in the file. Do not reorder these two
       blocks: nothing else would stop the OS preference overriding an
       explicit choice.

   color-scheme is set alongside so form controls, scrollbars and the
   canvas follow the theme too.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            var(--ink-bg);
    --surface:       var(--ink-bg-2);
    --surface-sunk:  var(--ink-bg-3);
    --surface-dark:  var(--ink-bg-0);
    --band-edge:     var(--dk-border-strong);

    --text:          var(--text-on-dark);
    --text-secondary:var(--dk-text-secondary);
    --text-muted:    var(--dk-text-muted);
    --text-faint:    var(--dk-text-faint);
    --text-accent:   var(--orange-light);
    --text-accent-lg:var(--orange-light);

    --border:        var(--dk-border);
    --border-strong: var(--dk-border-strong);

    /* The decorative blue itself brightens on a dark page — the palette
       ships a separate dark --acc for exactly this. Everything downstream
       (--accent, --accent-hover, the gradient stops, the solid ramp) is
       declared as var(--orange…) and re-resolves off these three. */
    --orange:        var(--dk-acc);
    --orange-light:  var(--dk-acc-light);
    --orange-press:  var(--dk-acc-press);

    /* On a dark page the vivid blue is the readable one — it carries
       --orange-ink instead of white, at 7.38:1. */
    --accent-solid:       var(--orange);
    --accent-solid-hover: var(--orange-light);
    --accent-solid-press: var(--orange-press);
    --on-accent-solid:    var(--orange-ink);
    --orange-grad-a:      var(--orange);
    --orange-grad-b:      var(--orange-light);
    --focus:              var(--orange-light);

    --code-bg:       var(--dk-code-bg);
    --code-border:   var(--dk-code-border);

    --field-dark:    var(--dk-field);
    --orange-wash:   var(--dk-orange-wash);
    --orange-line:   var(--dk-orange-line);
    --green-wash:    var(--dk-green-wash);
    --green-deep:    var(--green);

    --shadow-xs: var(--dk-shadow-xs);
    --shadow-sm: var(--dk-shadow-sm);
    --shadow-md: var(--dk-shadow-md);
    --shadow-lg: var(--dk-shadow-lg);
    --shadow-cta:       var(--dk-shadow-cta);
    --shadow-cta-hover: var(--dk-shadow-cta-hover);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--ink-bg);
  --surface:       var(--ink-bg-2);
  --surface-sunk:  var(--ink-bg-3);
  --surface-dark:  var(--ink-bg-0);
  --band-edge:     var(--dk-border-strong);

  --text:          var(--text-on-dark);
  --text-secondary:var(--dk-text-secondary);
  --text-muted:    var(--dk-text-muted);
  --text-faint:    var(--dk-text-faint);
  --text-accent:   var(--orange-light);
  --text-accent-lg:var(--orange-light);

  --border:        var(--dk-border);
  --border-strong: var(--dk-border-strong);

  --orange:        var(--dk-acc);
  --orange-light:  var(--dk-acc-light);
  --orange-press:  var(--dk-acc-press);

  --accent-solid:       var(--orange);
  --accent-solid-hover: var(--orange-light);
  --accent-solid-press: var(--orange-press);
  --on-accent-solid:    var(--orange-ink);
  --orange-grad-a:      var(--orange);
  --orange-grad-b:      var(--orange-light);
  --focus:              var(--orange-light);

  --code-bg:       var(--dk-code-bg);
  --code-border:   var(--dk-code-border);

  --field-dark:    var(--dk-field);
  --orange-wash:   var(--dk-orange-wash);
  --orange-line:   var(--dk-orange-line);
  --green-wash:    var(--dk-green-wash);
  --green-deep:    var(--green);

  --shadow-xs: var(--dk-shadow-xs);
  --shadow-sm: var(--dk-shadow-sm);
  --shadow-md: var(--dk-shadow-md);
  --shadow-lg: var(--dk-shadow-lg);
  --shadow-cta:       var(--dk-shadow-cta);
  --shadow-cta-hover: var(--dk-shadow-cta-hover);
}

/* An explicit light choice must survive a dark OS. */
:root[data-theme="light"] { color-scheme: light; }

/* ============================================================
   2. LEGACY SHIM VARS — names the /try page + old markup expect.
   All mapped onto the new brand so /try restyles itself for free.
   ============================================================ */
:root {
  --bg-2:        var(--surface-sunk);
  --surface-2:   var(--surface-sunk);
  --surface-3:   var(--surface-sunk);
  --border-2:    var(--border-strong);
  --text-2:      var(--text-secondary);
  --text-3:      var(--text-muted);
  --accent-2:    var(--orange-light);
  --accent-deep: var(--orange-press);
  --accent-text: var(--text-accent);
  --accent-soft: var(--orange-wash);
  --mint:        var(--green);
  --mint-text:   var(--green-deep);
  /* --grad only ever fills the /try progress bar, which carries no text. */
  --grad:        linear-gradient(120deg, #0B84E3 0%, #2A9BF5 100%);
  --grad-btn:    var(--accent);
  --grad-soft:   linear-gradient(120deg, rgba(11,132,227,.9), rgba(42,155,245,.9));
  --glow:        radial-gradient(60% 60% at 50% 0%, rgba(11,132,227,.12), transparent 70%);
  --glow-tight:  radial-gradient(50% 80% at 50% 100%, rgba(11,132,227,.08), transparent 70%);
  --shadow-xl:   var(--shadow-lg);
  --shadow-glow: var(--shadow-orange);
  --panel:       var(--surface);
  --panel2:      var(--surface-sunk);
  --sunken:      var(--surface-sunk);
  --surface-sunken: var(--surface-sunk);
  --muted:       var(--text-muted);
  --accent2:     var(--accent);
  --ease:        var(--ease-inout);
  --spring:      cubic-bezier(.34,1.56,.64,1);
  --maxw:        var(--container);
}

/* ============================================================
   3. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--orange-wash); color: var(--text); }

a { color: var(--text-accent); text-decoration: none; }
img { max-width: 100%; display: block; }

code, kbd, .ds-data, .ds-num, .tnum {
  font-family: var(--font-data);
  font-variant-numeric: var(--fvn-tabular);
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
}

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent-solid); color: var(--on-accent-solid);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* Focus ring — WCAG 2.2 SC 1.4.11 / 2.4.11.
   The 3px offset means the ring's neighbours on both sides are the
   surface behind the control, not the control's own fill, so --focus
   only has to clear 3:1 against backgrounds. It does, on every one the
   site uses: --page 5.38, --surface 5.88, --surface-sunk 5.08,
   --orange-wash 5.18, --green-wash 5.15. The dark bands re-point
   --focus below (6.18:1 on the band in light, 9.04:1 in dark), as does
   the dark theme (8.43:1 on --bg). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 14px;
  height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base),
              background var(--dur-base), border-color var(--dur-base),
              color var(--dur-base), filter var(--dur-base);
}
.btn.small { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
.btn.big   { height: 54px; padding: 0 28px; font-size: 15.5px; border-radius: 13px; }
.btn.full  { width: 100%; }

/* The primary CTA. Fill and text move together as a pair, so the pressed
   and hovered states stay compliant too: white on 5.88 / 7.41 / 9.20:1 in
   light, --orange-ink on 7.38 / 8.73 / 4.88:1 on the vivid dark-theme fill.
   The hover DARKENS. No brightness filter here — lightening the fill at
   runtime is what broke the ratio before, and the palette's --acc-h
   #2A9BF5 is only 2.96:1 with white, so it can never carry the label. */
.btn.solid {
  color: var(--on-accent-solid); font-weight: var(--fw-bold);
  background: var(--accent-solid);
  box-shadow: var(--shadow-cta);
}
.btn.solid:hover {
  background: var(--accent-solid-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.btn.solid:active { transform: translateY(0); background: var(--accent-solid-press); }

.btn.ghost {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}
.btn.ghost:hover { border-color: var(--accent); color: var(--text-accent); }

/* on the dark CTA band */
.btn.onink {
  color: #fff; background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.2);
}
.btn.onink:hover { border-color: var(--accent); color: #fff; }

.btn.disabled, .btn[aria-disabled="true"] {
  opacity: .6; cursor: not-allowed; pointer-events: none;
  border-style: dashed;
}

/* ============================================================
   5. NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(16px, 4vw, 30px);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav.stuck { box-shadow: var(--shadow-xs); }

.brand { display: inline-flex; align-items: center; gap: 10px; }
/* Stays vivid --orange (#0B84E3) on purpose. The mark holds a decorative
   aria-hidden glyph, not text, and WCAG 1.4.3 / 1.4.11 both exempt
   logotypes — so this is where the brand blue survives at full
   strength. Same for .foot-brand .mark and .bio .avatar. */
.brand .mark {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(11,132,227,.7);
}
.brand .ico { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.brand .wm {
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: 20px; letter-spacing: -0.02em; color: var(--text);
}

.navlinks { display: flex; align-items: center; gap: 4px; }
/* Shown only inside the collapsed mobile menu; on desktop the real
   "Try free" button is already in the nav bar. Selector has to match
   .navlinks a's specificity (0,1,1) or the nav's own display wins. */
.navlinks a.mobonly { display: none; }

.navlinks a {
  font-family: var(--font-body); font-size: 14.5px; font-weight: var(--fw-medium);
  color: var(--text-muted); padding: 8px 12px; border-radius: 9px;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.navlinks a:hover { color: var(--text); background: var(--surface-sunk); }

.navspacer { flex: 1; }
.navcta { display: flex; align-items: center; gap: 12px; }

.themetoggle, .menutoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.themetoggle:hover, .menutoggle:hover { border-color: var(--accent); color: var(--text); }
.menutoggle { display: none; }

/* Sun by day, moon by night — including the OS-dark first visit, where
   no data-theme attribute exists yet and the icon used to lie. */
.themetoggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle .sun  { display: none; }
  :root:not([data-theme="light"]) .themetoggle .moon { display: block; }
}
:root[data-theme="dark"] .themetoggle .sun   { display: none; }
:root[data-theme="dark"] .themetoggle .moon  { display: block; }
:root[data-theme="light"] .themetoggle .sun  { display: block; }
:root[data-theme="light"] .themetoggle .moon { display: none; }

/* ============================================================
   6. SHARED SECTION BITS
   ============================================================ */
.section { padding: 96px 0 0; scroll-margin-top: 84px; }

.sechead { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.sechead .kicker {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-accent); margin-bottom: 14px;
}
.sechead h2 {
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.08; letter-spacing: -0.025em; color: var(--text);
}
.sechead p {
  margin: 16px auto 0; max-width: 560px;
  font-size: 16px; line-height: var(--lh-body); color: var(--text-secondary);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--green); box-shadow: 0 0 0 3px rgba(69,192,125,.2);
}
.eyebrow.onink {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12);
  box-shadow: none; color: #CFD8E6;
}

/* Hero accent word. Only ever used inside an <h1>, so the bar is 3:1 for
   large text: stops are 5.38:1 and 3.54:1 on --page, and the no-clip
   fallback colour is 3.54:1. Dark mode swaps the stops to the vivid
   pair (7.14:1 and 8.43:1 on --bg). */
.grad-text { color: var(--text-accent-lg); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text {
    background: var(--grad-accent);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* green check / faint cross rows (compare + pricing) */
.y, .n { flex: none; display: inline-flex; }
.y { color: var(--green-deep); }
.n { color: var(--text-faint); }

/* ============================================================
   7. HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; text-align: center; padding: 78px 0 0; }
.hero .halo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(11,132,227,.10), transparent 60%);
}
.hero h1 {
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1.0; letter-spacing: -0.035em;
  max-width: 860px; margin: 26px auto 0; color: var(--text);
}
.hero .lede {
  margin: 24px auto 32px; max-width: 600px;
  font-size: 17.5px; line-height: var(--lh-body); color: var(--text-secondary);
}
.cta-row { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.hero .microcopy { margin-top: 18px; font-size: 13px; color: var(--text-faint); }
.hero .microcopy.android { margin-top: 6px; }
.hero .microcopy a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.hero .microcopy a:hover { color: var(--text-accent); }

/* — hero product window: transcript + captured document — */
.appwin {
  position: relative; max-width: 1000px; margin: 56px auto 0; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden;
  transition: transform .5s var(--ease-out);
}
.appwin .bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.appwin .bar .d { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.appwin .bar .urlwrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
.appwin .bar .url {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: var(--radius-pill);
  background: var(--surface-sunk); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.appwin .bar .url b { color: var(--text-accent); font-weight: var(--fw-bold); }
.appwin .bar .url .arw { color: var(--text-faint); }

.appbody { display: grid; grid-template-columns: 1.35fr 1fr; }
.appbody .transcript {
  padding: 26px 28px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 18px;
}
.appbody .trow { display: flex; gap: 16px; }
.appbody .ts {
  flex: none; font-family: var(--font-mono); font-size: 13px;
  font-weight: var(--fw-bold); color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}
.appbody .tline { font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }

.appbody .side { padding: 24px; background: var(--surface-sunk); }
.appbody .lbl {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 14px;
}
.doccard {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; background: var(--surface); padding: 16px; box-shadow: var(--shadow-xs);
}
.doccard .k {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--fw-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
.doccard .t {
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 17px;
  color: var(--text); margin: 6px 0 12px;
}
.doccard .pts { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.doccard .pts div { display: flex; align-items: center; gap: 8px; }
.doccard .b {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--orange-wash); color: var(--text-accent);
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
}
.doccard .flow { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.doccard .flow .fl {
  flex: 1; text-align: center; font-family: var(--font-mono);
  font-size: 10px; font-weight: var(--fw-bold); color: var(--text-secondary);
  background: var(--surface-sunk); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 0;
}
/* A literal "→" character, so it is judged as text, not decoration:
   --text-accent is 5.88:1 on the card, vivid --orange is only 3.87:1. */
.doccard .flow .arw { color: var(--text-accent); flex: none; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--green-wash); color: var(--green-deep);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }

/* ============================================================
   8. WORKS WITH — AI tiles
   ============================================================ */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.aitile {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); padding: 20px; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.aitile:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 16px 36px -26px rgba(11,132,227,.6);
}
.aitile .glyph {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px;
  background: var(--orange-wash); color: var(--text-accent);
  font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-black);
  margin-bottom: 34px;
}
.aitile .name { display: block; font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 17px; color: var(--text); }
.aitile .kind { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-top: 6px; }

/* ============================================================
   9. COMPARE — cloud vs VideoDoc
   ============================================================ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.col {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 28px;
}
.col.win {
  border: 1.5px solid var(--accent);
  box-shadow: 0 24px 50px -34px rgba(11,132,227,.55);
}
.col .who {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
.col.win .who { color: var(--text-accent); }
.col h3 {
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 21px;
  color: var(--text); margin: 6px 0 18px;
}
.rowlist { list-style: none; padding: 0; }
.rowlist li {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-top: 1px solid var(--border); font-size: 14.5px; color: var(--text-secondary);
}
.rowlist .x { color: var(--text-faint); font-size: 18px; line-height: 1; flex: none; }

/* ============================================================
   10. FEATURES
   ============================================================ */
.featgrid-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; }
.featgrid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.featgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.fcard {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 24px; box-shadow: var(--shadow-xs);
}
.fcard .fk {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-accent);
  margin-bottom: 10px;
}
.fcard h3 { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 20px; color: var(--text); }
.fcard p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

.fcard.showcase {
  padding: 26px;
  background: linear-gradient(180deg, var(--orange-wash), var(--surface) 55%);
}
.fcard.showcase h3 { font-size: 23px; }
.fcard.showcase p { font-size: 14.5px; max-width: 460px; margin-bottom: 18px; }
.newpill {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  font-weight: var(--fw-black); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-accent-solid); background: var(--accent-solid);
  border-radius: var(--radius-pill);
  padding: 4px 10px; margin-bottom: 16px;
}

.fcard.stat { display: flex; flex-direction: column; justify-content: center; padding: 26px; }
.fcard.stat .fk { margin-bottom: 12px; }
.fcard.stat .big {
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: clamp(40px, 5vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--text);
}
.fcard.stat p { margin-top: 16px; font-size: 14.5px; }

/* code editor mock (fixed dark — reads in both themes).
   Its fill equals --bg in dark mode, so it gets the same inset edge as
   the CTA bands rather than relying on a shadow that black-on-black eats. */
.codewin {
  border-radius: 11px; overflow: hidden; background: var(--code-bg);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--band-edge);
}
.codewin .cbar { display: flex; align-items: center; gap: 7px; padding: 10px 13px; background: var(--code-chrome); }
.codewin .cbar .d { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* Filename label — was #6B7686 at 3.76:1 on the title bar. */
.codewin .cbar .fn { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--code-fn); }
.codewin .cbody {
  padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9;
  overflow-x: auto; color: var(--code-text);
}
.codewin .ind { padding-left: 20px; }
.c-kw  { color: #C586C0; }
.c-var { color: #9CDCFE; }
.c-cls { color: #4EC9B0; }
.c-fn  { color: #DCDCAA; }
.c-cmt { color: #6A9955; }

/* ============================================================
   11. HOW IT WORKS — steps
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 26px; box-shadow: var(--shadow-xs);
}
.step .num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-solid); color: var(--on-accent-solid);
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 20px;
  box-shadow: var(--shadow-cta); margin-bottom: 18px;
}
.step h3 { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 20px; color: var(--text); }
.step p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }

/* ============================================================
   12. PRICING — three plans
   ============================================================ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); padding: 30px; box-shadow: var(--shadow-sm);
}
.plan.featured {
  border: 1.5px solid var(--accent);
  box-shadow: 0 30px 60px -36px rgba(11,132,227,.6);
}
.plan .ribbon {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-black);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-accent-solid); background: var(--accent-solid);
  border-radius: var(--radius-pill); padding: 5px 11px;
}
/* .soon carries its own pair — it must not inherit the dark ink that the
   vivid blue ribbon uses in dark mode. White on --neutral-solid: 6.96:1. */
.plan .ribbon.soon { background: var(--neutral-solid); color: var(--on-neutral-solid); }
.plan h3 { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 22px; color: var(--text); }
.plan .price {
  display: flex; align-items: baseline; gap: 10px; margin: 12px 0 2px;
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: 46px; letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plan .price .was {
  font-size: 22px; color: var(--text-faint); text-decoration: line-through;
  font-weight: var(--fw-bold);
}
.plan .terms {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 22px;
}
.plan.featured .terms { color: var(--text-accent); }
.plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--text-secondary); }
.plan li.off { color: var(--text-faint); }
.plan .btn.big { height: 50px; border-radius: 12px; font-size: 15px; font-weight: var(--fw-bold); }
.plan .expl {
  font-size: 13px; line-height: 1.55; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 14px; margin: -12px 0 20px;
}

/* ============================================================
   13. FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden;
  transition: border-color var(--dur-fast);
}
.faq details:hover { border-color: var(--border-strong); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: 16px;
  color: var(--text); text-align: left;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  /* The +/× is the expand affordance, so it is a graphical object that
     needs 3:1. Vivid --orange gives only 3.87:1 on the card; --accent-solid
     gives 5.88:1 in light and 5.60:1 in dark. */
  content: ""; width: 18px; height: 18px; flex: none; background: var(--accent-solid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--dur-base);
}
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details p {
  margin: 0; padding: 0 20px 20px 52px;
  font-size: 14.5px; line-height: var(--lh-body); color: var(--text-secondary);
}
.faq details p a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   14. ASK AN AI
   ============================================================ */
.askai { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.askai .btn { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 14.5px; }
.askai .btn:hover { transform: translateY(-1px); }

/* ============================================================
   15. FINAL CTA — dark band
   ============================================================ */
/* Dark bands, in BOTH themes. Inside one, the page is near-black, so the
   deep --accent-solid and the deep --focus would sink into it. Re-point
   them at the vivid pair — 4.88:1 for --orange-ink on the light-theme
   fill (7.38:1 in dark), and 6.18:1 for the ring on the band (9.04:1 in
   dark). .ctabox is styled in article.css; its tokens live here so the
   three bands can never drift apart. */
.finalcta, .ctabox, .codewin {
  --accent-solid:       var(--orange);
  --accent-solid-hover: var(--orange-light);
  --accent-solid-press: var(--orange-press);
  --on-accent-solid:    var(--orange-ink);
  --focus:              var(--orange-light);
  --shadow-cta:         var(--dk-shadow-cta);
  --shadow-cta-hover:   var(--dk-shadow-cta-hover);
}

.finalcta {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--radius-xl); background: var(--surface-dark);
  padding: 60px 40px;
  /* In dark mode the band and the page are 1.08:1 apart — the inset edge
     is what keeps it a band. Transparent, so light mode is untouched. */
  box-shadow: inset 0 0 0 1px var(--band-edge);
}
.finalcta .halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(63,169,245,.35), transparent 60%);
}
.finalcta > :not(.halo) { position: relative; }
.finalcta h2 {
  font-size: clamp(30px, 4.8vw, 46px); line-height: 1.05;
  letter-spacing: -0.03em; color: #fff; margin-top: 22px;
}
.finalcta .lede {
  margin: 18px auto 30px; max-width: 540px;
  font-size: 16px; line-height: var(--lh-body); color: #9DAAC0;
}

/* ============================================================
   16. FOOTER
   ============================================================ */
.foot { border-top: 1px solid var(--border); background: var(--surface); margin-top: 96px; }
.foot .cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
  padding: 46px 0 30px;
}
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-brand .mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.foot-brand .ico { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.foot-brand .wm { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 18px; color: var(--text); }
.foot .tag {
  margin: 14px 0 12px; font-size: 14px; line-height: var(--lh-body);
  color: var(--text-secondary); max-width: 300px;
}
.foot .by { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.foot .by a { color: var(--text-muted); }
.foot .by a:hover { color: var(--text-accent); }
.foot h3 {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 14px;
}
.foot ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot li a { color: var(--text-secondary); font-size: 14px; transition: color var(--dur-fast); }
.foot li a:hover { color: var(--text-accent); }
.foot .legal {
  border-top: 1px solid var(--border); padding: 18px 0 34px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
}

/* ============================================================
   17. REVEAL + CURSOR
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .07s; }
.js .reveal.d2 { transition-delay: .14s; }
.js .reveal.d3 { transition-delay: .21s; }

.cursor {
  display: inline-block; width: .5em; height: 1em; margin-left: .12em;
  vertical-align: -.12em; border-radius: 2px; background: var(--accent);
  animation: blink var(--cursor-blink) steps(2, start) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ============================================================
   18. /try DEMO SHIMS — classes the try page markup uses.
   ============================================================ */
.logo { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-accent); }
.drop {
  margin: 34px 0 10px; border: 1.5px dashed var(--border-strong);
  border-radius: 18px; background: var(--surface);
  padding: 46px 24px; text-align: center; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--orange-wash); }
.status { min-height: 24px; color: var(--text-secondary); font-size: 15px; text-align: center; margin: 8px 0; }
.note {
  margin: 30px auto 0; max-width: 680px; color: var(--text-muted);
  font-size: 13.5px; line-height: var(--lh-relaxed); text-align: center;
}

/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 940px) {
  .section { padding-top: 72px; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .featgrid-hero, .featgrid-3, .featgrid-2, .compare, .steps { grid-template-columns: 1fr; }
  .appbody { grid-template-columns: 1fr; }
  .appbody .transcript { border-right: 0; border-bottom: 1px solid var(--border); }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .navlinks { display: none; }
  .menutoggle { display: inline-flex; }
  /* Both CTAs do not fit at 375px, so the FREE one moves into the menu
     rather than disappearing - a phone visitor must not be shown only
     the paid door. */
  .nav .btn.ghost { display: none; }
  .navlinks a.mobonly { display: block; }
  .nav.mobile-open .navlinks {
    display: flex; position: absolute; top: 68px; left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 14px; padding: 8px; box-shadow: var(--shadow-lg); z-index: 60;
  }
  .nav.mobile-open .navlinks a { padding: 12px 14px; }
}
@media (max-width: 640px) {
  .nav { gap: 12px; }
  .nav .btn.solid { height: 36px; padding: 0 12px; font-size: 13px; }
  .navcta { gap: 6px; }
  .brand .wm { font-size: 17px; }
  .hero { padding-top: 56px; }
  .grid4 { grid-template-columns: 1fr; }
  .aitile .glyph { margin-bottom: 20px; }
  .foot .cols { grid-template-columns: 1fr; }
  .finalcta { padding: 48px 22px; }
  .btn.big { padding: 0 20px; }
}

/* ============================================================
   20. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .cursor { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
}