/* ==========================================================================
   LicenseHub — public site stylesheet
   Hand-written, no framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens

   Two layers, deliberately.

   The *palette* below is raw colour and nothing outside this block may
   reference it. Everything else in the file — and every view — uses the
   *semantic* tokens underneath it. That separation is what makes the dark
   theme twenty redefinitions rather than an audit of two thousand lines.

   The older --ink-* / --brand-* / --paper names are kept at the end of the
   block as aliases onto the semantic layer, so pages written before this
   palette existed pick it up (and theme correctly) without being touched.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Palette — neutral. Cool-tinted greys; a pure grey next to the indigo
       reads dirty. */
  --p-white: #ffffff;
  --p-n-25: #fbfcfe;
  --p-n-50: #f5f7fb;
  --p-n-100: #eaeef6;
  --p-n-200: #dde3ee;
  --p-n-300: #c3cbdb;
  --p-n-400: #939eb2;
  --p-n-500: #68738a;
  --p-n-600: #4c5567;
  --p-n-700: #363e4d;
  --p-n-800: #222834;
  --p-n-900: #141922;
  --p-n-950: #0a0d13;

  /* Palette — brand indigo. The primary action colour. */
  --p-brand-50: #eef0ff;
  --p-brand-100: #e2e5ff;
  --p-brand-200: #c9ceff;
  --p-brand-300: #a8b0ff;
  --p-brand-400: #858cf9;
  --p-brand-500: #6366f1;
  --p-brand-600: #4f46e5;
  --p-brand-700: #4338ca;
  --p-brand-800: #332c9e;
  --p-brand-900: #221d63;

  /* Palette — cyan accent. Used only where something needs to feel live:
       gradients, highlights, the download meter. Never for body text. */
  --p-accent-300: #67e8f9;
  --p-accent-400: #22d3ee;
  --p-accent-500: #0891b2;
  --p-accent-700: #155e75;

  /* Palette — status */
  --p-green-100: #d7f5e5;
  --p-green-200: #a5e6c4;
  --p-green-400: #34d399;
  --p-green-600: #0b7a4b;
  --p-green-800: #0d3f2b;

  --p-amber-100: #fdf1d8;
  --p-amber-200: #f6dda6;
  --p-amber-400: #fbbf24;
  --p-amber-600: #9a5b08;
  --p-amber-800: #45320d;

  --p-red-100: #fee5e3;
  --p-red-200: #fbcac6;
  --p-red-400: #f87171;
  --p-red-600: #c32c26;
  --p-red-800: #4a1c1c;

  /* ---- Semantic: surfaces ---- */
  --bg: var(--p-white);
  --bg-subtle: var(--p-n-50);
  --bg-inset: var(--p-n-100);
  --surface: var(--p-white);
  --surface-raised: var(--p-white);
  --surface-invert: var(--p-n-900);

  /* ---- Semantic: lines ---- */
  --line: var(--p-n-200);
  --line-strong: var(--p-n-300);
  --line-invert: rgba(255, 255, 255, 0.14);

  /* ---- Semantic: text ---- */
  --text: var(--p-n-900);
  --text-secondary: var(--p-n-600);
  --text-muted: var(--p-n-500);
  --text-invert: var(--p-white);
  --text-on-accent: var(--p-white);

  /* ---- Semantic: accent ---- */
  --accent: var(--p-brand-600);
  --accent-hover: var(--p-brand-700);
  --accent-soft: var(--p-brand-50);
  --accent-softer: var(--p-brand-100);
  --accent-line: var(--p-brand-200);
  --accent-text: var(--p-brand-700);
  --accent-glow: rgba(99, 102, 241, 0.35);
  --ring: rgba(99, 102, 241, 0.45);

  /* ---- Semantic: status ---- */
  --success-bg: var(--p-green-100);
  --success-line: var(--p-green-200);
  --success-fg: var(--p-green-600);
  --warning-bg: var(--p-amber-100);
  --warning-line: var(--p-amber-200);
  --warning-fg: var(--p-amber-600);
  --danger-bg: var(--p-red-100);
  --danger-line: var(--p-red-200);
  --danger-fg: var(--p-red-600);

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg, var(--p-brand-500), var(--p-brand-700));
  --grad-spot: radial-gradient(60% 60% at 50% 0%, rgba(99, 102, 241, 0.16), transparent 70%);
  --grad-mesh:
    radial-gradient(38rem 26rem at 12% -8%, rgba(99, 102, 241, 0.2), transparent 65%),
    radial-gradient(34rem 24rem at 88% 4%, rgba(34, 211, 238, 0.18), transparent 62%);

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---- Elevation. Tinted with the ink colour, never neutral black. ---- */
  --shadow-sm: 0 1px 2px rgba(20, 25, 34, 0.05), 0 1px 3px rgba(20, 25, 34, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 25, 34, 0.07), 0 2px 6px rgba(20, 25, 34, 0.05);
  --shadow-lg: 0 18px 40px rgba(20, 25, 34, 0.1), 0 6px 14px rgba(20, 25, 34, 0.06);
  --shadow-accent: 0 8px 24px rgba(99, 102, 241, 0.28);

  /* ---- Space ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --font-sans:
    'Inter var', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --measure: 68ch;
  --container: 1180px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Height of the sticky header, so full-height layouts can subtract it
       instead of guessing. Kept in sync with .site-header__inner. */
  --header-h: 72px;

  /* ---- Legacy aliases ----------------------------------------------------
       Kept so pre-existing markup themes correctly. New CSS should use the
       semantic tokens above. --ink-300 is mapped one step darker than its old
       value on purpose: it carries small print, and #9aa5b1 never passed
       contrast on white. */
  --ink-900: var(--text);
  --ink-700: var(--p-n-700);
  --ink-500: var(--text-secondary);
  --ink-300: var(--text-muted);
  --ink-200: var(--line-strong);
  --ink-100: var(--line);
  --ink-50: var(--bg-inset);

  --paper: var(--surface);

  --brand-600: var(--accent);
  --brand-500: var(--p-brand-500);
  --brand-100: var(--accent-soft);

  --ok-600: var(--success-fg);
  --ok-100: var(--success-bg);
  --warn-600: var(--warning-fg);
  --warn-100: var(--warning-bg);
  --err-600: var(--danger-fg);
  --err-100: var(--danger-bg);
}

/* Dark theme. Applied when the visitor asked the OS for it and has not
   overridden the choice on this site, or when they picked it explicitly.
   Both selectors set the same values — do not let them drift apart. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: var(--p-n-950);
    --bg-subtle: #0e131b;
    --bg-inset: #161c26;
    --surface: #121821;
    --surface-raised: #182030;
    --surface-invert: var(--p-n-100);

    --line: #232c3a;
    --line-strong: #333e50;
    --line-invert: rgba(255, 255, 255, 0.1);

    --text: #eef2f8;
    --text-secondary: #b3bdcd;
    --text-muted: #8b95a8;
    --text-invert: var(--p-n-900);

    --accent: var(--p-brand-500);
    --accent-hover: var(--p-brand-400);
    --accent-soft: rgba(99, 102, 241, 0.14);
    --accent-softer: rgba(99, 102, 241, 0.22);
    --accent-line: rgba(129, 140, 248, 0.35);
    --accent-text: var(--p-brand-300);
    --ring: rgba(129, 140, 248, 0.55);

    --success-bg: rgba(52, 211, 153, 0.14);
    --success-line: rgba(52, 211, 153, 0.3);
    --success-fg: var(--p-green-400);
    --warning-bg: rgba(251, 191, 36, 0.14);
    --warning-line: rgba(251, 191, 36, 0.3);
    --warning-fg: var(--p-amber-400);
    --danger-bg: rgba(248, 113, 113, 0.14);
    --danger-line: rgba(248, 113, 113, 0.3);
    --danger-fg: var(--p-red-400);

    --grad-spot: radial-gradient(60% 60% at 50% 0%, rgba(99, 102, 241, 0.26), transparent 70%);
    --grad-mesh:
      radial-gradient(38rem 26rem at 12% -8%, rgba(99, 102, 241, 0.26), transparent 65%),
      radial-gradient(34rem 24rem at 88% 4%, rgba(34, 211, 238, 0.16), transparent 62%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 46px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4);
    --shadow-accent: 0 8px 28px rgba(99, 102, 241, 0.4);

    --ink-700: #d3dae6;
  }
}

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

  --bg: var(--p-n-950);
  --bg-subtle: #0e131b;
  --bg-inset: #161c26;
  --surface: #121821;
  --surface-raised: #182030;
  --surface-invert: var(--p-n-100);

  --line: #232c3a;
  --line-strong: #333e50;
  --line-invert: rgba(255, 255, 255, 0.1);

  --text: #eef2f8;
  --text-secondary: #b3bdcd;
  --text-muted: #8b95a8;
  --text-invert: var(--p-n-900);

  --accent: var(--p-brand-500);
  --accent-hover: var(--p-brand-400);
  --accent-soft: rgba(99, 102, 241, 0.14);
  --accent-softer: rgba(99, 102, 241, 0.22);
  --accent-line: rgba(129, 140, 248, 0.35);
  --accent-text: var(--p-brand-300);
  --ring: rgba(129, 140, 248, 0.55);

  --success-bg: rgba(52, 211, 153, 0.14);
  --success-line: rgba(52, 211, 153, 0.3);
  --success-fg: var(--p-green-400);
  --warning-bg: rgba(251, 191, 36, 0.14);
  --warning-line: rgba(251, 191, 36, 0.3);
  --warning-fg: var(--p-amber-400);
  --danger-bg: rgba(248, 113, 113, 0.14);
  --danger-line: rgba(248, 113, 113, 0.3);
  --danger-fg: var(--p-red-400);

  --grad-spot: radial-gradient(60% 60% at 50% 0%, rgba(99, 102, 241, 0.26), transparent 70%);
  --grad-mesh:
    radial-gradient(38rem 26rem at 12% -8%, rgba(99, 102, 241, 0.26), transparent 65%),
    radial-gradient(34rem 24rem at 88% 4%, rgba(34, 211, 238, 0.16), transparent 62%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 46px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 8px 28px rgba(99, 102, 241, 0.4);

  --ink-700: #d3dae6;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  color: var(--text);
  font-weight: 640;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s var(--ease);
}

a:hover {
  color: var(--accent);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-inset);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--accent-softer);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
  left: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* --------------------------------------------------------------------------
   3. Header and navigation

   One bar, three zones: brand, links, actions. Below 960px the links and the
   actions collapse behind a single button — two separate collapsing regions
   would mean two things to keep in sync and two ways to trap focus.
   -------------------------------------------------------------------------- */

/* Slim strip above the header. Carries one message and one link; anything more
   competes with the navigation for the same glance. */
.promo-bar {
  position: relative;
  z-index: 25;
  background: var(--grad-brand);
  color: var(--text-on-accent);
  font-size: 0.8125rem;
}

.promo-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  padding-block: 0.5rem;
  text-align: center;
}

.promo-bar__text {
  opacity: 0.92;
}

.promo-bar__link {
  color: var(--text-on-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.promo-bar__link:hover {
  color: var(--text-on-accent);
  border-bottom-color: currentColor;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

/* Set by site.js once the page is scrolled, so the bar only earns a border and
   a shadow when there is content passing underneath it. */
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 680;
  font-size: 1.0625rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.025em;
  flex: none;
}

.brand:hover {
  color: var(--text);
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--grad-brand);
  box-shadow: var(--shadow-accent);
  color: var(--text-on-accent);
}

.brand__mark svg {
  width: 19px;
  height: 19px;
  display: block;
}

.brand__name {
  white-space: nowrap;
}

.site-header__collapse {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1 1 auto;
  justify-content: space-between;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.9375rem;
}

.site-nav a {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s var(--ease),
    background-color 0.15s var(--ease);
}

.site-nav a:hover {
  color: var(--text);
  background: var(--bg-inset);
}

.site-nav a.is-current {
  color: var(--text);
  font-weight: 600;
}

/* The marker sits under the label rather than filling the pill, so the current
   page is legible at a glance without shouting over the primary action. */
.site-nav a.is-current::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.site-nav__pending {
  color: var(--text-muted);
  cursor: not-allowed;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Theme switch. Both glyphs are in the DOM; CSS shows whichever matches the
   theme in force, so there is no flash of the wrong icon and no JS involved in
   drawing it. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color 0.15s var(--ease),
    border-color 0.15s var(--ease),
    background-color 0.15s var(--ease);
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--bg-inset);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

/* Every rule below is written with the element selector included, because
   `.theme-toggle svg` above outranks a bare class and would keep both glyphs
   on screen. */
.theme-toggle svg.theme-toggle__moon {
  display: none;
}
.theme-toggle svg.theme-toggle__sun {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle svg.theme-toggle__moon {
    display: block;
  }
  :root:not([data-theme='light']) .theme-toggle svg.theme-toggle__sun {
    display: none;
  }
}

:root[data-theme='dark'] .theme-toggle svg.theme-toggle__moon {
  display: block;
}
:root[data-theme='dark'] .theme-toggle svg.theme-toggle__sun {
  display: none;
}
:root[data-theme='light'] .theme-toggle svg.theme-toggle__moon {
  display: none;
}
:root[data-theme='light'] .theme-toggle svg.theme-toggle__sun {
  display: block;
}

/* ------------------------------------------------------------- User menu */

.user-menu {
  position: relative;
}

.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    border-color 0.15s var(--ease),
    background-color 0.15s var(--ease);
}

.user-menu__trigger:hover {
  border-color: var(--line-strong);
  background: var(--bg-inset);
}

.user-menu__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-on-accent);
  background: var(--grad-brand);
}

.user-menu__label {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__caret {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
}

.user-menu__trigger[aria-expanded='true'] .user-menu__caret {
  transform: rotate(180deg);
}

.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 40;
  width: 15rem;
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: nav-drop 0.16s var(--ease-out);
}

.user-menu__panel[hidden] {
  display: none;
}

.user-menu__head {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-2);
}

.user-menu__name {
  margin: 0;
  max-width: none;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__email {
  margin: 2px 0 0;
  max-width: none;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__role {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 0.1rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
}

.user-menu__list {
  display: flex;
  flex-direction: column;
}

.user-menu__list a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.user-menu__list a:hover {
  background: var(--bg-inset);
  color: var(--text);
}

.user-menu__signout {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

/* Hamburger. Hidden until the breakpoint; the three bars morph into a cross so
   the open state is unambiguous without a second icon. */
.nav-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle__box {
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition:
    transform 0.25s var(--ease),
    opacity 0.15s var(--ease);
}

.nav-toggle__bar:nth-child(1) {
  top: 0;
}
.nav-toggle__bar:nth-child(2) {
  top: 5px;
}
.nav-toggle__bar:nth-child(3) {
  top: 10px;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 960px) {
  :root {
    --header-h: 64px;
  }

  .nav-toggle {
    display: grid;
  }

  .site-header__inner {
    min-height: 64px;
  }

  .site-header__collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6) var(--space-6);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .site-header__collapse.is-open {
    display: flex;
    animation: nav-drop 0.18s var(--ease-out);
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    font-size: 1rem;
  }

  .site-nav a {
    padding: 0.7rem 0.75rem;
  }

  .site-nav a.is-current::after {
    left: 0.75rem;
    right: auto;
    width: 14px;
    bottom: 0.5rem;
  }

  .site-header__actions {
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
  }

  .site-header__actions .btn,
  .site-header__actions .inline-form {
    flex: 1 1 auto;
  }
  .site-header__actions .inline-form .btn {
    width: 100%;
  }

  /* Inside the collapsed panel there is nothing to float over, so the menu
       becomes part of the flow rather than a dropdown on top of a dropdown. */
  .user-menu {
    flex: 1 1 100%;
  }
  .user-menu__trigger {
    width: 100%;
    justify-content: flex-start;
  }
  .user-menu__label {
    max-width: none;
  }
  .user-menu__caret {
    margin-left: auto;
  }

  .user-menu__panel {
    position: static;
    width: auto;
    margin-top: var(--space-2);
    box-shadow: none;
    animation: none;
  }
}

@keyframes nav-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.15rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 570;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--grad-brand);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}

.btn--primary:hover {
  color: var(--text-on-accent);
  box-shadow: 0 10px 30px var(--accent-glow);
  filter: brightness(1.06);
}

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

.btn--ghost:hover {
  border-color: var(--line-strong);
  background: var(--bg-inset);
  color: var(--text);
}

/* Tinted, for a secondary action that still belongs to the brand. */
.btn--soft {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.btn--soft:hover {
  background: var(--accent-softer);
  color: var(--accent-text);
}

/* Chromeless, for header links that must not compete with the primary action. */
.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn--quiet:hover {
  background: var(--bg-inset);
  color: var(--text);
}

/* On a saturated panel, where the tokens above would vanish. */
.btn--invert {
  background: var(--p-white);
  color: var(--p-brand-700);
}

.btn--invert:hover {
  background: var(--p-white);
  color: var(--p-brand-800);
  box-shadow: var(--shadow-lg);
}

.btn--outline-invert {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--p-white);
}

.btn--outline-invert:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--p-white);
  color: var(--p-white);
}

.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Alerts
   -------------------------------------------------------------------------- */

.alert {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  max-width: none;
  font-size: 0.9375rem;
}

.alert--success {
  background: var(--success-bg);
  border-color: var(--success-line);
  color: var(--success-fg);
}

.alert--error {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger-fg);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) 0 var(--space-8);
  background: var(--grad-mesh), var(--bg);
}

/* A faint grid behind the hero. It reads as engineering rather than marketing,
   and it is the cheapest depth available — no image, no request. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  mask-image: radial-gradient(70% 60% at 50% 25%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 25%, #000 25%, transparent 75%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.hero__copy {
  max-width: 34rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-6);
  padding: 0.35rem 0.875rem 0.35rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 560;
  letter-spacing: 0.005em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
}

.eyebrow__tag {
  padding: 0.1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.hero__title {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-6);
}

.hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--p-brand-500), var(--p-accent-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero__note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: none;
}

.hero__note span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.hero__note svg {
  width: 14px;
  height: 14px;
  color: var(--success-fg);
  flex: none;
}

/* Injected by site.js, only when the visitor's own browser reports
   prefers-reduced-motion — a deliberate, visitor-initiated way past the
   reduced-motion freeze above, not a default. Removed from the DOM the
   moment it's clicked. */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-text);
  cursor: pointer;
}

.motion-toggle:hover {
  text-decoration: underline;
}

.motion-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .hero__copy {
    max-width: 40rem;
  }
}

/* --------------------------------------------------------------------------
   7. Sections, grid, cards
   -------------------------------------------------------------------------- */

.section {
  padding: var(--space-16) 0;
}

.section--muted {
  background: var(--bg-subtle);
  border-block: 1px solid var(--line);
}

.section__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
}

/* Centred section header: kicker, title, one line of context. */
.section-head {
  max-width: 46rem;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section-head .section__title {
  margin-bottom: var(--space-4);
}

.section-head__lede {
  margin: 0 auto;
  font-size: 1.0625rem;
  color: var(--text-secondary);
}

.kicker {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card__title {
  font-size: 1.0625rem;
  margin-bottom: var(--space-2);
}

.card__body {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   8. Build status (temporary — replaced by the real site in Phase 11)
   -------------------------------------------------------------------------- */

.build-status__lede {
  color: var(--ink-500);
  margin-bottom: var(--space-8);
}

.phase-list {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.phase-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--ink-300);
}

.phase-list__item.is-done {
  color: var(--success-fg);
  border-color: var(--success-line);
  background: var(--success-bg);
}

.phase-list__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: 0.75rem;
  font-weight: 650;
}

.phase-list__item.is-done .phase-list__num {
  background: var(--success-fg);
  color: var(--bg);
}

.build-status__foot {
  font-size: 0.9375rem;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   8b. Forms and authentication
   -------------------------------------------------------------------------- */

.auth {
  display: grid;
  place-items: center;
  padding: var(--space-16) var(--space-6);
  min-height: 70vh;
  background: var(--grad-mesh), var(--bg-subtle);
}

/* Used when the card sits inside an already-framed page (the account area)
   rather than standing alone as the whole screen. */
.auth--inline {
  min-height: 0;
  padding: var(--space-12) var(--space-6);
  background: none;
}

/* --------------------------------------------------------------------------
   Split authentication screens

   Form on the left, brand panel on the right, filling what is left of the
   viewport under the header. The panel is decoration with a job: it is the
   only place on these pages where we can answer "what am I signing into?"
   The whole right column disappears below the breakpoint rather than being
   stacked, because on a phone it would push the form below the fold.
   -------------------------------------------------------------------------- */

body.page-auth .promo-bar {
  display: none;
}

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100dvh - var(--header-h));
}

.auth-split__form {
  display: grid;
  place-items: center;
  padding: var(--space-12) var(--space-6);
  background: var(--bg);
}

.auth-split__inner {
  width: 100%;
  max-width: 26rem;
}

.auth-split__title {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  margin-bottom: var(--space-2);
}

.auth-split__lede {
  margin-bottom: var(--space-8);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.auth-split__alt {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.auth-split__legal {
  margin: var(--space-6) 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.auth-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-12);
  color: var(--text-on-accent);
  background: var(--grad-brand);
}

.auth-aside::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(28rem 20rem at 85% 15%, rgba(34, 211, 238, 0.38), transparent 62%),
    radial-gradient(24rem 18rem at 10% 90%, rgba(255, 255, 255, 0.18), transparent 60%);
  pointer-events: none;
}

/* Same faint grid as the marketing hero, so the two read as one system. */
.auth-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 80%);
  pointer-events: none;
}

.auth-aside > * {
  position: relative;
  z-index: 1;
  max-width: 30rem;
}

.auth-aside__kicker {
  margin: 0 0 var(--space-4);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}

.auth-aside__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.15;
  color: var(--text-on-accent);
}

.auth-aside__lede {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
}

.auth-aside__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-aside__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
}

.auth-aside__list svg {
  width: 22px;
  height: 22px;
  color: var(--p-accent-300);
}

.auth-aside__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
}

.auth-aside__foot strong {
  display: block;
  font-size: 1.125rem;
  color: var(--text-on-accent);
}

@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .auth-aside {
    display: none;
  }
  .auth-split__form {
    padding-block: var(--space-16);
  }
}

.auth__card {
  width: 100%;
  max-width: 27rem;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth__title {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}

.auth__lede {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: var(--space-6);
}

.auth__alt {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
}

.field {
  margin-bottom: var(--space-4);
}

.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--ink-700);
}

.field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.field__link {
  font-size: 0.8125rem;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.field__input.is-invalid {
  border-color: var(--err-600);
}

.field__input.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--err-100);
}

.field__error {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
  color: var(--err-600);
  max-width: none;
}

.field__hint {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-300);
  max-width: none;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: 0.875rem;
  color: var(--ink-500);
  cursor: pointer;
}

.checkbox input {
  margin-top: 0.2em;
  flex: none;
  accent-color: var(--brand-600);
}

.checkbox.is-invalid span {
  color: var(--err-600);
}

.btn--block {
  width: 100%;
}

.inline-form {
  display: inline;
}

.btn--small {
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}

/* Impersonation banner — deliberately loud, because forgetting you are wearing
   someone else's account is how mistakes get made. */
/* Fixed amber rather than the themed token: this bar must look identical and
   alarming in both themes, and the dark-theme amber is far too light to carry
   white text. */
.impersonation-bar {
  background: var(--p-amber-600);
  color: var(--p-white);
  position: relative;
  z-index: 30;
}

.impersonation-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.impersonation-bar__text {
  font-size: 0.875rem;
}

.impersonation-bar .btn--ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}

.impersonation-bar .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* --------------------------------------------------------------------------
   8c. Notices, detail lists, page headers
   -------------------------------------------------------------------------- */

.notice {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-100);
  background: var(--ink-50);
}

.notice--warn {
  background: var(--warning-bg);
  border-color: var(--warning-line);
}

.notice--dev {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.notice__title {
  margin: 0 0 var(--space-1);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-900);
  max-width: none;
}

.notice__body {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  color: var(--ink-500);
  max-width: none;
}

.notice__body:last-child {
  margin-bottom: 0;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--ok {
  background: var(--success-bg);
  border-color: var(--success-line);
  color: var(--success-fg);
}

.badge--warn {
  background: var(--warning-bg);
  border-color: var(--warning-line);
  color: var(--warning-fg);
}

.page-head {
  margin-bottom: var(--space-8);
}

.page-head__title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: var(--space-2);
}

.page-head__lede {
  color: var(--ink-500);
  margin: 0;
}

.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: 0.875rem;
}

.detail-list dt {
  color: var(--ink-300);
}

.detail-list dd {
  margin: 0;
  color: var(--ink-700);
}

.dashboard__admin-link {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  max-width: none;
}

/* --------------------------------------------------------------------------
   8d. Pricing
   -------------------------------------------------------------------------- */

.pricing-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-12);
}

.pricing-head__title {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  margin-bottom: var(--space-4);
}

.pricing-head__lede {
  color: var(--ink-500);
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.currency-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
}

.currency-switch__option {
  padding: 0.35rem 1rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--ink-500);
  text-decoration: none;
  border-radius: 999px;
}

.currency-switch__option:hover {
  color: var(--ink-900);
}

.currency-switch__option.is-active {
  background: var(--paper);
  color: var(--brand-600);
  box-shadow: var(--shadow-sm);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.plan-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.plan-card--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

/* The featured card lifts a little on its own so the flag has somewhere to sit
   without overlapping the card above it on a narrow screen. */
@media (min-width: 900px) {
  .plan-card--featured {
    transform: translateY(-8px);
  }
  .plan-card--featured:hover {
    transform: translateY(-12px);
  }
}

.plan-card__flag {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-on-accent);
  background: var(--grad-brand);
  box-shadow: var(--shadow-accent);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.plan-card__name {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}

.plan-card__tagline {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--ink-500);
}

.plan-card__price {
  margin: 0 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.plan-card__was {
  font-size: 1rem;
  color: var(--ink-300);
  text-decoration: line-through;
}

.plan-card__amount {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  line-height: 1;
}

.plan-card__period {
  font-size: 0.875rem;
  color: var(--ink-500);
}

.plan-card__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 0;
  border-block: 1px solid var(--ink-100);
  font-size: 0.8125rem;
  color: var(--ink-500);
}

.plan-card__meta strong {
  color: var(--ink-900);
}

.plan-card__features {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: 0.9375rem;
}

.plan-card__features li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-700);
}

.plan-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2px solid var(--ok-600);
  border-bottom: 2px solid var(--ok-600);
  transform: rotate(-45deg);
}

.plan-card__description {
  margin: 0 0 var(--space-6);
  font-size: 0.875rem;
  color: var(--ink-500);
}

/* Pin the call to action to the bottom so cards of differing height align. */
.plan-card .btn {
  margin-top: auto;
}

.pricing-note {
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-300);
  max-width: 60ch;
}

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.faq__q {
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

.faq__a {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* Accordion variant. <details> gives the open/close behaviour for free, which
   is the whole reason it is used here — no state to script, and it stays
   operable with JS off. */
.faq--accordion {
  display: block;
  max-width: 52rem;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.faq__item--toggle {
  border-bottom: 1px solid var(--line);
}

.faq__item--toggle:last-child {
  border-bottom: 0;
}

.faq__item--toggle > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s var(--ease);
}

.faq__item--toggle > summary::-webkit-details-marker {
  display: none;
}
.faq__item--toggle > summary:hover {
  background: var(--bg-inset);
}

.faq__sign {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--text-muted);
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s var(--ease);
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__item--toggle[open] > summary {
  color: var(--accent-text);
}
.faq__item--toggle[open] .faq__sign {
  color: var(--accent);
}
.faq__item--toggle[open] .faq__sign::after {
  transform: rotate(0deg);
}

.faq__item--toggle > .faq__a {
  padding: 0 var(--space-6) var(--space-6);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   9. Error pages
   -------------------------------------------------------------------------- */

.error-page {
  padding: var(--space-16) 0;
  min-height: 60vh;
  display: grid;
  place-items: center;
}

.error-page__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-page__code {
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-100);
  margin-bottom: var(--space-4);
}

.error-page__title {
  font-size: clamp(1.375rem, 4vw, 2rem);
}

.error-page__body {
  color: var(--ink-500);
  margin-bottom: var(--space-6);
}

.error-page__actions {
  margin-bottom: var(--space-8);
}

.error-page__debug {
  max-width: 100%;
  width: min(100%, 900px);
  overflow-x: auto;
  text-align: left;
  padding: var(--space-4);
  background: var(--p-n-950);
  color: var(--p-n-200);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.error-page__debug pre {
  margin: var(--space-3) 0 0;
  white-space: pre;
}

.error-page__debug-head {
  margin: 0;
  max-width: none;
  color: var(--p-red-400);
}

.error-page__debug-file {
  margin: var(--space-2) 0 0;
  max-width: none;
  color: var(--ink-300);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-8) 0 0;
  background: var(--bg-subtle);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  align-items: center;
}

.site-footer__copy,
.site-footer__legal {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-300);
  max-width: none;
}

.site-footer__copy-link {
  color: inherit;
  text-decoration: none;
}

.site-footer__copy-link:hover {
  color: inherit;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .container {
    padding-inline: var(--space-4);
  }

  .hero {
    padding-top: var(--space-12);
  }

  .section {
    padding: var(--space-16) 0;
  }

  .cta-band,
  .cta-band--large {
    padding: var(--space-6);
  }

  .cta-band__actions .btn {
    flex: 1 1 auto;
  }
}

/* Every rule in this file gated on prefers-reduced-motion is additionally
   scoped to :root:not(.motion-forced) — .motion-forced is added by site.js
   only when a visitor explicitly clicks the "Play animations" control that
   appears when their browser reports reduced motion (see site.js's
   page-home block). Respects the real signal by default; never assumes it's
   wrong, only offers an explicit, visitor-initiated way past it. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-forced) *,
  :root:not(.motion-forced) *::before,
  :root:not(.motion-forced) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fixed size so the icon can never push the "ThroVid" text (.brand__name,
   always rendered alongside it) out of view. */
.brand__logo {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Accepted payment methods
   Rendered from the gateways that accept the currency on screen, so the list
   changes with the currency switcher rather than being decorative.
   -------------------------------------------------------------------------- */

.payment-methods {
  margin: var(--space-12) auto 0;
  max-width: 900px;
  text-align: center;
}

.payment-methods__title {
  margin: 0 0 var(--space-4);
  font-size: 0.8125rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.payment-methods__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 150px;
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.payment-method__logo {
  width: auto;
  max-width: 80px;
  max-height: 32px;
  object-fit: contain;
}

.payment-method__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-900);
}

.payment-method__note {
  font-size: 0.75rem;
  color: var(--ink-500);
}

.payment-methods__note {
  margin: var(--space-4) auto 0;
  max-width: 60ch;
  font-size: 0.8125rem;
  color: var(--ink-300);
}

/* ==========================================================================
   Checkout, orders and receipts
   ========================================================================== */

.container--narrow {
  max-width: 860px;
}

.page-title {
  margin: 0 0 var(--space-6);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.page-head .page-title {
  margin-bottom: 0;
}

.breadcrumb {
  margin: 0 0 var(--space-4);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--accent-text);
}

/* Status badges. The public site had only two; orders need the full set. */
.badge--info {
  background: var(--brand-100);
  color: var(--brand-600);
}
.badge--err {
  background: var(--err-100);
  color: var(--err-600);
}
.badge--pending {
  background: var(--ink-50);
  color: var(--ink-500);
}

.notice--info {
  border-left-color: var(--brand-500);
  background: var(--brand-100);
}
.notice--error {
  border-left-color: var(--err-600);
  background: var(--err-100);
}

.notice__list {
  margin: var(--space-2) 0 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
}

.field__hint--ok {
  color: var(--ok-600);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}

/* --------------------------------------------------------------- Checkout */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--space-8);
  align-items: start;
}

/* The total should not scroll away while the payment methods are being read. */
@media (min-width: 821px) {
  .checkout__summary {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

.checkout__form {
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 820px) {
  .checkout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Summary first on a phone: what you are paying matters more than how. */
  .checkout__summary {
    order: -1;
  }
}

.checkout__block {
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
}

.checkout__legend {
  padding: 0;
  margin: 0 0 var(--space-3);
  font-size: 0.8125rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.checkout__coupon {
  max-width: 320px;
}

.checkout__legal {
  margin: var(--space-4) 0 0;
  font-size: 0.75rem;
  color: var(--ink-300);
}

.checkout__summary {
  position: sticky;
  top: var(--space-4);
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.checkout__summary-title {
  margin: 0 0 var(--space-4);
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-300);
}

.checkout__plan {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink-900);
}
.checkout__tagline {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-500);
}

.checkout__facts {
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--ink-500);
}

.checkout__facts li {
  padding: 2px 0;
}

.checkout__totals {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-100);
}

.checkout__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: 0.9375rem;
}

.checkout__line dt {
  color: var(--ink-500);
}
.checkout__line dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.checkout__line--discount dd {
  color: var(--ok-600);
}

.checkout__line--total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-100);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
}

.checkout__note {
  margin: var(--space-4) 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-300);
}

/* ------------------------------------------------------- Method selection */

.method {
  display: block;
  margin-bottom: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color 0.15s var(--ease),
    box-shadow 0.15s var(--ease),
    background-color 0.15s var(--ease);
}

.method:hover {
  border-color: var(--line-strong);
  background: var(--bg-inset);
}

.method:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--ring);
}

.method:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.method input {
  accent-color: var(--accent);
}

.method input {
  margin-right: var(--space-3);
}

.method__body {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 2rem);
}

.method__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.method__logo {
  max-width: 72px;
  max-height: 28px;
  width: auto;
  object-fit: contain;
}
.method__name {
  font-weight: 650;
  color: var(--ink-900);
}

.method__note {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-500);
}

/* --------------------------------------------------------- Paying offline */

.pay-summary {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  color: var(--text-on-accent);
  background: var(--grad-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.pay-summary .pay-summary__label,
.pay-summary .pay-summary__hint {
  color: rgba(255, 255, 255, 0.82);
}
.pay-summary .pay-summary__amount {
  color: var(--text-on-accent);
}

.pay-summary .pay-summary__reference {
  color: var(--text-on-accent);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.pay-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.pay-summary__label {
  font-size: 0.875rem;
  color: var(--ink-700);
}

.pay-summary__amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.pay-summary__reference {
  padding: 0.15rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink-900);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  user-select: all;
}

.pay-summary__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-700);
}

.pay-steps {
  margin: 0 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: pay-step;
}

@media (max-width: 720px) {
  .pay-steps {
    margin-left: 0;
  }
}

.pay-step {
  position: relative;
  margin-bottom: var(--space-6);
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  counter-increment: pay-step;
}

/* The number is drawn rather than left to the list marker, so it can sit on the
   card's edge instead of outside it. */
.pay-step::before {
  content: counter(pay-step);
  position: absolute;
  top: var(--space-8);
  left: calc(var(--space-8) * -1 + 0.25rem);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-on-accent);
  background: var(--grad-brand);
  box-shadow: var(--shadow-accent);
}

@media (max-width: 720px) {
  .pay-step {
    padding: var(--space-6);
  }
  .pay-step::before {
    position: static;
    margin-bottom: var(--space-4);
  }
}

.pay-step__title {
  margin: 0 0 var(--space-3);
  font-size: 1.15rem;
  color: var(--text);
}
.pay-step__lede {
  margin: 0 0 var(--space-4);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.pay-step__logo {
  max-height: 34px;
  width: auto;
  margin-bottom: var(--space-4);
}
.pay-step__instructions {
  margin: 0 0 var(--space-4);
  line-height: 1.7;
}

.account-details {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
}

.account-details__title {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-300);
}

.account-details__body {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
}

.pay-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 0.875rem;
}

/* ----------------------------------------------------------- Outcome page */

.outcome {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.outcome--ok {
  border-top: 4px solid var(--success-fg);
}
.outcome--problem {
  border-top: 4px solid var(--warning-fg);
}

/* Result badge above the headline: a large tick or exclamation, drawn from the
   status colours so the page reads before it is read. */
.outcome__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  color: var(--text-secondary);
  background: var(--bg-inset);
}

.outcome__mark svg {
  width: 32px;
  height: 32px;
}
.outcome--ok .outcome__mark {
  color: var(--success-fg);
  background: var(--success-bg);
}
.outcome--problem .outcome__mark {
  color: var(--warning-fg);
  background: var(--warning-bg);
}

.outcome__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.outcome__title {
  margin: 0 0 var(--space-3);
  font-size: 1.6rem;
  color: var(--ink-900);
}
.outcome__lede {
  margin: 0 0 var(--space-4);
  color: var(--ink-700);
}
.outcome__note {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--ink-500);
}
.outcome__status {
  margin: 0 0 var(--space-6);
}

.outcome__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------- Order history */

.empty-state {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.empty-state__title {
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
  color: var(--text);
}
.empty-state__body {
  margin: 0 auto var(--space-6);
  color: var(--text-secondary);
  max-width: 42ch;
}

.order-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.order-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.order-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 700px) {
  .order-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-card__side {
    text-align: left;
  }
}

.order-card__number {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}
.order-card__plan {
  margin: var(--space-1) 0 0;
  font-weight: 650;
  color: var(--ink-900);
}
.order-card__meta {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-300);
}
.order-card__side {
  text-align: right;
}

.order-card__amount {
  margin: 0 0 var(--space-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

.order-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.order-status-blurb {
  margin: 0 0 var(--space-6);
  color: var(--ink-500);
}

.order-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-6);
}

.panel-card {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
}

.panel-card__title {
  margin: 0 0 var(--space-4);
  font-size: 1.05rem;
  color: var(--ink-900);
}

.detail-grid {
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.detail-grid > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.detail-grid dt {
  font-size: 0.875rem;
  color: var(--ink-500);
}
.detail-grid dd {
  margin: 0;
  font-size: 0.875rem;
  text-align: right;
}

.proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--ink-100);
}

.proof:first-of-type {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 600px) {
  .proof {
    grid-template-columns: minmax(0, 1fr);
  }
}

.proof__meta p {
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
}
.proof__submitted {
  color: var(--ink-500);
}

.proof__thumb {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ink-100);
}
.proof__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------- Pagination */

.pagination {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-8);
}

.pagination__link {
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-500);
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.pagination__link:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}

.pagination__link.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  font-weight: 650;
}

.pagination__gap {
  padding: 0.4rem 0.25rem;
  color: var(--ink-300);
}

/* ==========================================================================
   Licence cards and devices
   ========================================================================== */

.licence-list {
  display: grid;
  gap: var(--space-6);
}

.licence-card {
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.licence-card--inactive {
  border-color: var(--warn-600);
}

.licence-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.licence-card__plan {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  color: var(--ink-900);
}
.licence-card__status {
  margin: 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.licence-card__note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: 0.875rem;
  color: var(--ink-700);
  background: var(--warn-100);
  border-radius: var(--radius-md);
}

/* The key is the reason this page exists: big, monospaced, selectable, and one
   click from the clipboard. */
.licence-key-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
}

.licence-key-value {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-900);
  word-break: break-all;
  user-select: all;
}

.btn.is-copied {
  background: var(--ok-100);
  border-color: var(--ok-600);
  color: var(--ok-600);
}

.licence-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--ink-100);
}

.licence-facts dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-300);
  margin-bottom: 2px;
}

.licence-facts dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-900);
}
.licence-facts .muted {
  font-weight: 400;
}

.devices__title {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-300);
}

.devices__empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-500);
}

.devices__quota {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  color: var(--ink-700);
  background: var(--ink-50);
  border-radius: var(--radius-md);
}

.device-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.device {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-50);
  border-radius: var(--radius-md);
}

.device__name {
  margin: 0;
  font-weight: 600;
  color: var(--ink-900);
}
.device__meta {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--ink-500);
}

.device__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.device__rename {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.field__input--compact {
  padding: 0.35rem 0.55rem;
  font-size: 0.8125rem;
  width: 11rem;
}

/* ==========================================================================
   Public website — Phase 11
   ========================================================================== */

.page-lede {
  max-width: var(--measure);
  margin: -0.75rem 0 var(--space-8);
  font-size: 1.05rem;
  color: var(--ink-500);
}

.btn--large {
  padding: 0.85rem 1.6rem;
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------- Features */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.feature {
  position: relative;
  display: block;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* No-op on the <article> usages (home/about); needed when .feature is an
     <a> (blog listing cards) so it doesn't inherit the global link's
     underline/accent color. */
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.feature:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.feature__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.feature__title {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  color: var(--text);
}
.feature__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Blog listing cards reuse .feature/.feature-grid (an <a>, not an <article>,
   for the whole-card-is-a-link pattern) — this is their one addition, a
   small publish-date line above the title. */
.blog-card__meta {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ----------------------------------------------------------- Comparison */

.comparison {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.comparison__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: transparent;
}

.comparison__table th,
.comparison__table td {
  padding: var(--space-4);
  text-align: left;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--line);
}

.comparison__table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg-inset);
}

/* Our column is the one the table exists to argue for; tint it so the eye lands
   there rather than reading left to right six times. */
.comparison__table thead th:last-child {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.comparison__table tbody td:last-child {
  background: var(--accent-soft);
}

.comparison__table tbody th {
  font-weight: 600;
  color: var(--ink-700);
}
.comparison__table tr:last-child th,
.comparison__table tr:last-child td {
  border-bottom: 0;
}

.comparison__no {
  color: var(--text-muted);
}

.comparison__yes {
  color: var(--success-fg);
  font-weight: 600;
}

.comparison__yes::before {
  content: '✓';
  margin-right: 0.4rem;
  font-weight: 700;
}

/* ------------------------------------------------------------- CTA band */

.cta-band {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-8);
  padding: var(--space-8);
  background: var(--grad-brand);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  color: var(--text-on-accent);
}

.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(30rem 18rem at 88% 120%, rgba(34, 211, 238, 0.35), transparent 65%);
  pointer-events: none;
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

.cta-band--large {
  padding: var(--space-12) var(--space-8);
}

.cta-band__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-on-accent);
}

.cta-band__note {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}
.cta-band__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Inside the band the neutral button variants would disappear, so they are
   remapped rather than every call site being edited. */
.cta-band .btn--primary,
.cta-band .btn--ghost {
  background: var(--p-white);
  border-color: transparent;
  color: var(--p-brand-700);
  box-shadow: var(--shadow-md);
}

.cta-band .btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--p-white);
  box-shadow: none;
}

.cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--p-white);
  color: var(--p-white);
}

.cta-band .btn--primary:hover {
  color: var(--p-brand-800);
  filter: none;
}

/* ------------------------------------------------------------- Download */

.download-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.download-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.download-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.download-card--soon {
  opacity: 0.72;
  box-shadow: none;
}
.download-card--soon:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.download-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-md);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.download-card__icon svg {
  width: 26px;
  height: 26px;
}
.download-card__title {
  margin: 0 0 var(--space-1);
  font-size: 1.1rem;
  color: var(--text);
}
.download-card__note {
  margin: 0 0 var(--space-6);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.download-card .btn {
  margin-top: auto;
}

.download-keys {
  padding: var(--space-6);
  background: var(--success-bg);
  border: 1px solid var(--success-line);
  border-radius: var(--radius-lg);
}

.download-keys__title {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  color: var(--text);
}
.download-keys__note {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--ink-700);
}

.install-steps {
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.install-steps__title {
  margin: 0 0 var(--space-4);
  font-size: 1.05rem;
  color: var(--text);
}
.install-steps__list {
  margin: 0 0 var(--space-4);
  padding-left: 1.3rem;
}
.install-steps__list li {
  margin-bottom: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.install-steps__note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------- Contact */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 820px) {
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hidden from people without display:none — some bots skip those, and this one
   is meant to be filled in by them. */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__form {
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact__form-title {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
}
.contact__form-lede {
  margin: 0 0 var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.contact__aside {
  padding: var(--space-6);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.contact__aside-title {
  margin: 0 0 var(--space-4);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.contact__faq {
  margin: 0;
}
.contact__faq dt {
  font-weight: 650;
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: 2px;
}
.contact__faq dd {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.contact__direct {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

/* Three facts about getting a reply, shown before the form so nobody has to
   guess how long to wait. */
.contact-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.contact-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.contact-fact__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  background: var(--accent-soft);
}

.contact-fact__icon svg {
  width: 17px;
  height: 17px;
}
.contact-fact__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--text);
}
.contact-fact__body {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------- Legal pages */

.legal-head {
  margin-bottom: var(--space-8);
}
.legal-head__meta {
  margin: -0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.legal-foot {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.legal-foot p {
  margin: 0;
  max-width: none;
}

/* Sibling policies, so a visitor who landed on Terms can reach Privacy without
   going back to the footer. */
.legal-nav {
  max-width: 52rem;
  margin: var(--space-8) auto 0;
  text-align: center;
}

.legal-nav__title {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.legal-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-nav__list a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition:
    border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.legal-nav__list a:hover {
  border-color: var(--accent-line);
  color: var(--accent-text);
}

/* Long-form prose on a panel, so an essay-length page still has an edge and a
   measure rather than floating in the middle of a wide viewport. */
.prose-card {
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--space-12);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.prose-card .prose {
  max-width: none;
}

@media (max-width: 640px) {
  .prose-card {
    padding: var(--space-6);
  }
}

/* Long-form prose, used by CMS pages and the about page. */
.prose {
  max-width: var(--measure);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.prose__lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-900);
}

.prose h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--ink-900);
}

.prose h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 1.1rem;
  color: var(--ink-900);
}
.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}
.prose p {
  margin: 0 0 var(--space-4);
}
.prose ul,
.prose ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.4rem;
}
.prose li {
  margin-bottom: var(--space-2);
}
.prose strong {
  color: var(--ink-900);
}

.prose a {
  color: var(--brand-600);
}

.prose blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--warn-600);
  background: var(--warn-100);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose blockquote p {
  margin: 0;
}

.prose code {
  padding: 0.1rem 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--ink-50);
  border-radius: 3px;
}

.prose hr {
  margin: var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--ink-100);
}

/* --------------------------------------------------------------- Footer */

.site-footer__grid {
  display: grid;
  /* Brand column sized to its real content (logo + 34ch blurb + badges),
     not a generic 2fr — the old ratio left a dead gap before "Product"
     started, since nothing in the brand block came close to filling it. */
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  padding: var(--space-12) 0 var(--space-8);
}

@media (max-width: 760px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

.site-footer__brand .brand {
  margin-bottom: var(--space-4);
}
.site-footer__name {
  margin: 0 0 var(--space-2);
  font-weight: 650;
  color: var(--text);
}
.site-footer__blurb {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 34ch;
}

.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__badges li {
  padding: 0.2rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.site-footer__heading {
  margin: 0 0 var(--space-3);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__column a {
  font-size: 0.875rem;
  color: var(--ink-500);
  text-decoration: none;
}
.site-footer__column a:hover {
  color: var(--brand-600);
}

.site-footer__base {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Landing page components

   Everything below belongs to the marketing pages. It is deliberately
   image-free: the product shot, the meters and the platform marks are all
   drawn in CSS, so the page has no art dependency, no layout shift, and no
   second request before it looks finished.
   ========================================================================== */

/* ----------------------------------------------------------- Page heroes

   Every page other than the landing page opens the same way: mesh background,
   kicker, title, one paragraph. Having one block for it is what stops the
   secondary pages from slowly drifting into five different headers.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) 0 var(--space-8);
  background: var(--grad-mesh), var(--bg);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.45;
  mask-image: radial-gradient(70% 70% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 20%, #000 20%, transparent 75%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
}

.page-hero__title {
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -0.035em;
  margin-bottom: var(--space-4);
}

.page-hero__lede {
  margin: 0 auto;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--text-secondary);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-6) 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: none;
}

.page-hero__meta strong {
  color: var(--text);
  font-weight: 600;
}

/* The hero already carries generous bottom space; a full section rhythm on top
   of it leaves a hole between the title and the first thing you can act on. */
.page-hero + .section {
  padding-top: var(--space-16);
}

/* ==========================================================================
   Account area — dashboard, licences, orders, password

   The signed-in pages share one shell: a tinted band carrying the title and
   the sub-navigation, then plain sections. It is deliberately quieter than the
   marketing pages — this is somewhere people come to do one specific thing.
   ========================================================================== */

.account-shell {
  padding: var(--space-12) 0 0;
  background: var(--grad-spot), var(--bg-subtle);
  border-bottom: 1px solid var(--line);
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.account-head__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  letter-spacing: -0.03em;
}

.account-head__lede {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.account-head__lede strong {
  color: var(--text);
  font-weight: 600;
}

.account-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Tabs. They sit on the band's bottom edge and overlap the border, which is
   what makes the current one read as connected to the page below it. */
.account-nav {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  margin-bottom: -1px;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.account-nav::-webkit-scrollbar {
  display: none;
}

.account-nav a {
  padding: 0.65rem 1rem;
  border-bottom: 2px solid transparent;
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.account-nav a:hover {
  color: var(--text);
}

.account-nav a.is-current {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

.account-nav__count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: var(--text-secondary);
  background: var(--bg-inset);
  border-radius: var(--radius-pill);
}

.account-nav a.is-current .account-nav__count {
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* The band carries its own bottom space; a full section rhythm on top of it
   leaves a hole between the tabs and the first tile. */
.account-shell + .section {
  padding-top: var(--space-8);
}

.panel-card .detail-list + .btn {
  margin-top: var(--space-6);
}

/* Headline numbers for the overview. */
.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-md);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.tile__icon svg {
  width: 20px;
  height: 20px;
}

.tile__value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

.tile__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* A card whose whole surface is the link to somewhere else in the account. */
.action-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.action-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.action-card__title {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
}
.action-card__body {
  margin: 0 0 var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.action-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   Checkout shell

   A three-step purchase deserves to say which step you are on. The band below
   carries that, and the summary column sticks so the total stays in view while
   the payment methods are read.
   ========================================================================== */

.checkout-shell {
  padding: var(--space-12) 0;
  background: var(--grad-spot), var(--bg-subtle);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.checkout-shell__title {
  margin: 0 0 var(--space-6);
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  letter-spacing: -0.03em;
}

.progress-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.progress-step__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-inset);
}

.progress-step.is-current {
  color: var(--accent-text);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.progress-step.is-current .progress-step__num {
  color: var(--text-on-accent);
  background: var(--accent);
}

.progress-step.is-done {
  color: var(--success-fg);
  border-color: var(--success-line);
  background: var(--success-bg);
}
.progress-step.is-done .progress-step__num {
  color: var(--bg);
  background: var(--success-fg);
}

.progress-steps__sep {
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .progress-steps__sep {
    display: none;
  }
  .progress-step {
    font-size: 0.8125rem;
  }
}

/* ------------------------------------------------------- Hero product shot */

.hero__visual {
  position: relative;
  perspective: 1400px;
}

.app-window {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotateY(-7deg) rotateX(3deg) translateZ(0);
  transform-origin: left center;
}

@media (max-width: 980px) {
  .app-window {
    transform: none;
  }
}

.app-window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem var(--space-4);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--line);
}

.app-window__dots {
  display: flex;
  gap: 6px;
}

.app-window__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.app-window__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.app-window__body {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 340px;
}

.app-side {
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--line);
  background: var(--bg-subtle);
}

.app-side__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--text-secondary);
}

.app-side__item.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.app-side__item i {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.35;
}

.app-main {
  padding: var(--space-4) var(--space-4) var(--space-8);
}

.app-url {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.7rem;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.app-url__caret {
  width: 1px;
  height: 12px;
  background: var(--accent);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.app-job {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.app-job:last-child {
  border-bottom: 0;
}

.app-job__thumb {
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--p-brand-400), var(--p-accent-400));
  opacity: 0.85;
}

.app-job:nth-child(3) .app-job__thumb {
  background: linear-gradient(135deg, var(--p-brand-600), var(--p-brand-300));
}
.app-job:nth-child(4) .app-job__thumb {
  background: linear-gradient(135deg, var(--p-accent-500), var(--p-brand-400));
}

.app-job__name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-job__meta {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.app-job__bar {
  display: block;
  height: 4px;
  margin-top: 5px;
  border-radius: 4px;
  background: var(--bg-inset);
  overflow: hidden;
}

.app-job__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--grad-brand);
}

.app-job__fill--live {
  animation: fill 4.5s var(--ease) infinite;
}

@keyframes fill {
  0% {
    width: 12%;
  }
  70% {
    width: 78%;
  }
  100% {
    width: 92%;
  }
}

.app-job__state {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.app-job__state--done {
  color: var(--success-fg);
}
.app-job__state--live {
  color: var(--accent-text);
}

/* A floating card overlapping the window, carrying the one number the visual
   is meant to leave behind. */
.app-float {
  position: absolute;
  right: -12px;
  bottom: -14px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.app-float__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--success-fg);
  background: var(--success-bg);
}

.app-float__mark svg {
  width: 16px;
  height: 16px;
}
.app-float__value {
  display: block;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--text);
}
.app-float__label {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .app-float {
    display: none;
  }
}

/* ---- Fan-out mock-up (home hero) -----------------------------------------
   One video, one line per connected Page, each line drawing in and lighting
   up its Page with a checkmark as it lands — the product's actual pitch
   ("publish once, reach every Page") shown as motion instead of a static
   app screenshot. Pure SVG + CSS, no image asset, no JS. `pathLength="1"`
   on each path normalises its length to 1 regardless of its geometry, so
   the same dash animation drives every curve without measuring pixels. */

.fanout {
  position: relative;
  /* --tilt-x/--tilt-y are set from site.js's hero mousemove handler (fine
     pointers only) and removed on mouseleave, falling back to this same
     resting tilt — .hero__visual's perspective is what makes it read as 3D. */
  transform: rotateY(var(--tilt-y, -7deg)) rotateX(var(--tilt-x, 3deg)) translateZ(0);
  transform-origin: left center;
  transition: transform 0.2s var(--ease-out);
}

@media (max-width: 980px) {
  .fanout {
    transform: none;
  }
}

.fanout__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fanout__source {
  fill: var(--surface-raised);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.fanout__source-icon {
  fill: var(--accent);
}

/* The accounts feeding the source — same neutral surface/stroke language as
   .fanout__source itself (not the vivid destination-avatar blue), and a slow
   independent breathing pulse rather than the sharper draw/land motion on
   the destination side, so this reads as a quieter, secondary detail. */
.fanout__account-line {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.55;
}

.fanout__account {
  fill: var(--surface-raised);
  stroke: var(--line-strong);
  stroke-width: 1.5;
  animation: fanout-account-pulse 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 900ms);
}

@keyframes fanout-account-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-forced) .fanout__account {
    animation: none;
    opacity: 0.75;
  }
}

.fanout__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.8;
  animation: fanout-draw 5s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * 220ms);
}

@keyframes fanout-draw {
  0% {
    stroke-dashoffset: 1;
  }
  35%,
  85% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 1;
  }
}

.fanout__chip rect {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1;
}

.fanout__avatar {
  fill: var(--p-brand-400);
}

.fanout__chip text {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
}

/* .fanout__check-pos (home.php) carries the row-position translate() SVG
   attribute and is never animated. A CSS `transform` — even one only ever
   supplied via this element's own running `animation`, as below — replaces
   an SVG `transform` attribute outright rather than combining with it; if
   the position translate lived on this same element, every checkmark would
   collapse to the SVG's (0,0) origin the instant the animation started. */
.fanout__check {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: fanout-chip-pulse 5s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * 220ms);
}

.fanout__check circle {
  fill: var(--success-bg);
}

.fanout__check path {
  fill: none;
  stroke: var(--success-fg);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes fanout-chip-pulse {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.6);
  }
  40%,
  80% {
    opacity: 1;
    transform: scale(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-forced) .fanout__line {
    animation: none;
    stroke-dashoffset: 0;
  }
  :root:not(.motion-forced) .fanout__check {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------- Stat strip */

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  padding: var(--space-6);
  background: var(--surface);
  text-align: center;
}

.stat__value {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.stat__label {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------- Platforms */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.pill svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ Steps */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  /* The number is a 38px circle; padding-top must clear that plus a real
     gap, not just approximate it — var(--space-8) (32px) was 6px short and
     let the circle's bottom edge dip into the title below it. */
  padding-top: var(--space-12);
}

.step__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.step__title {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
}
.step__body {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------- Use cases */

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}

.usecase {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}

.usecase__title {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--text);
}

.usecase__body {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------- Split feature */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-12);
  align-items: center;
}

.split__title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-bottom: var(--space-4);
}
.split__body {
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

.checklist {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--ink-700);
}

.checklist svg {
  width: 20px;
  height: 20px;
  color: var(--success-fg);
}

/* A panel of terminal-ish facts, for the "under the hood" half of a split. */
.spec-panel {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-subtle);
  box-shadow: var(--shadow-sm);
}

.spec-panel__title {
  margin: 0 0 var(--space-4);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.spec-list {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.spec-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--line);
}

.spec-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.spec-list dt {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.spec-list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

/* --------------------------------------------------------- Pricing intro */

.pricing-lede {
  max-width: 46rem;
  margin: 0 auto var(--space-12);
  text-align: center;
  color: var(--text-secondary);
}

.pricing-assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.pricing-assure li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.pricing-assure svg {
  width: 16px;
  height: 16px;
  color: var(--success-fg);
  flex: none;
}

/* ==========================================================================
   9. Landing page theme — marketing effects only, scoped to body.page-home

   The token block itself (colours, DM Sans, the legacy alias redeclaration)
   now lives in Section 10, shared with every other page via body.page-site.
   What's left here is exclusively the landing page's own marketing motion —
   orbs, cursor spotlight, grain, tilt — none of which belongs on a Terms of
   Service page or a sign-in form.
   ========================================================================== */

/* Light variant. Section 10's block is this page's default — it does not
   consult the visitor's preference, only their explicit choice — so a light
   variant only has to exist for the one case where they used the toggle
   (below) to ask for it. Same accent blue and DM Sans throughout; only the
   surfaces, text and shadows flip. Higher specificity than the block above
   (an extra attribute selector on :root) so it wins whenever it applies. */
:root[data-theme='light'] body.page-home {
  color-scheme: light;

  --bg: #ffffff;
  --bg-subtle: #f4f6fa;
  --bg-inset: #eef1f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-invert: #0d0d10;

  --line: rgba(10, 12, 16, 0.1);
  --line-strong: rgba(10, 12, 16, 0.18);
  --line-invert: rgba(255, 255, 255, 0.14);

  --text: #0d0f14;
  --text-secondary: rgba(13, 15, 20, 0.68);
  --text-muted: rgba(13, 15, 20, 0.48);
  --text-invert: #ffffff;
  --text-on-accent: #ffffff;

  --accent: #0083ff;
  --accent-hover: #0069cc;
  --accent-soft: rgba(0, 131, 255, 0.1);
  --accent-softer: rgba(0, 131, 255, 0.16);
  --accent-line: rgba(0, 131, 255, 0.3);
  --accent-text: #0069cc;
  --accent-glow: rgba(0, 131, 255, 0.32);
  --ring: rgba(0, 131, 255, 0.4);

  --p-brand-300: #cfe6ff;
  --p-brand-400: #4da6ff;
  --p-brand-500: #0083ff;
  --p-brand-600: #0069cc;
  --p-brand-700: #00509c;
  --p-accent-300: #cdf3ff;
  --p-accent-400: #4dd2ff;
  --p-accent-500: #00a3e0;

  --grad-brand: linear-gradient(135deg, #0083ff, #00a8e8);
  --grad-spot: radial-gradient(60% 60% at 50% 0%, rgba(0, 131, 255, 0.14), transparent 70%);
  --grad-mesh:
    radial-gradient(38rem 26rem at 12% -8%, rgba(0, 131, 255, 0.14), transparent 65%),
    radial-gradient(34rem 24rem at 88% 4%, rgba(0, 194, 255, 0.1), transparent 62%);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-accent: 0 10px 28px rgba(0, 131, 255, 0.28);

  --ink-900: var(--text);
  --ink-700: var(--text-secondary);
  --ink-500: var(--text-secondary);
  --ink-300: var(--text-muted);
  --ink-200: var(--line-strong);
  --ink-100: var(--line);
  --ink-50: var(--bg-inset);

  --paper: var(--surface);

  --brand-600: var(--accent);
  --brand-500: var(--p-brand-500);
  --brand-100: var(--accent-soft);

  --success-bg: rgba(10, 148, 99, 0.1);
  --success-line: rgba(10, 148, 99, 0.28);
  --success-fg: #0a9463;
  --warning-bg: rgba(180, 83, 9, 0.1);
  --warning-line: rgba(180, 83, 9, 0.28);
  --warning-fg: #b45309;
  --danger-bg: rgba(220, 38, 38, 0.1);
  --danger-line: rgba(220, 38, 38, 0.28);
  --danger-fg: #dc2626;

  --ok-600: var(--success-fg);
  --ok-100: var(--success-bg);
  --warn-600: var(--warning-fg);
  --warn-100: var(--warning-bg);
  --err-600: var(--danger-fg);
  --err-100: var(--danger-bg);
}

/* ==========================================================================
   10. Sitewide theme — every other public/account page

   The same ThroVid palette and font as the landing page (body.page-home),
   minus the marketing-only motion: no orbs, cursor spotlight, grain or tilt.
   A Terms of Service page or a sign-in form should feel like the same
   product, not like it is trying to sell you something. Both classes share
   every token block below; only body.page-home adds the effects layer in
   Section 9 above. */
body.page-home,
body.page-site {
  color-scheme: dark;

  --bg: #050506;
  --bg-subtle: #0a0a0c;
  --bg-inset: #101013;
  --surface: #0d0d10;
  --surface-raised: #131316;
  --surface-invert: #ffffff;

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --line-invert: rgba(0, 0, 0, 0.12);

  --text: #f5f6f8;
  --text-secondary: rgba(245, 246, 248, 0.68);
  --text-muted: rgba(245, 246, 248, 0.48);
  --text-invert: #050506;
  --text-on-accent: #ffffff;

  --accent: #0083ff;
  --accent-hover: #3399ff;
  --accent-soft: rgba(0, 131, 255, 0.14);
  --accent-softer: rgba(0, 131, 255, 0.22);
  --accent-line: rgba(0, 131, 255, 0.35);
  --accent-text: #4da6ff;
  --accent-glow: rgba(0, 131, 255, 0.45);
  --ring: rgba(0, 131, 255, 0.55);

  --p-brand-300: #99c9ff;
  --p-brand-400: #4da6ff;
  --p-brand-500: #0083ff;
  --p-brand-600: #0069cc;
  --p-brand-700: #00509c;
  --p-accent-300: #9ee6ff;
  --p-accent-400: #4dd2ff;
  --p-accent-500: #00a3e0;

  --grad-brand: linear-gradient(135deg, #0083ff, #00c2ff);
  --grad-spot: radial-gradient(60% 60% at 50% 0%, rgba(0, 131, 255, 0.22), transparent 70%);
  --grad-mesh:
    radial-gradient(38rem 26rem at 12% -8%, rgba(0, 131, 255, 0.24), transparent 65%),
    radial-gradient(34rem 24rem at 88% 4%, rgba(0, 194, 255, 0.16), transparent 62%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 10px 32px rgba(0, 131, 255, 0.4);

  --font-sans: 'DM Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ink-900: var(--text);
  --ink-700: var(--text-secondary);
  --ink-500: var(--text-secondary);
  --ink-300: var(--text-muted);
  --ink-200: var(--line-strong);
  --ink-100: var(--line);
  --ink-50: var(--bg-inset);

  --paper: var(--surface);

  --brand-600: var(--accent);
  --brand-500: var(--p-brand-500);
  --brand-100: var(--accent-soft);

  --success-bg: rgba(52, 211, 153, 0.14);
  --success-line: rgba(52, 211, 153, 0.32);
  --success-fg: #34d399;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --warning-line: rgba(251, 191, 36, 0.32);
  --warning-fg: #fbbf24;
  --danger-bg: rgba(248, 113, 113, 0.14);
  --danger-line: rgba(248, 113, 113, 0.32);
  --danger-fg: #f87171;

  --ok-600: var(--success-fg);
  --ok-100: var(--success-bg);
  --warn-600: var(--warning-fg);
  --warn-100: var(--warning-bg);
  --err-600: var(--danger-fg);
  --err-100: var(--danger-bg);
}

/* Light variant for the sitewide theme — same mechanism as body.page-home's
   own light override above, just without re-deriving it: this page class
   gets the toggle by default (no display:none anywhere), so it needs the
   light values from the very first visit, not just after a click. */
:root[data-theme='light'] body.page-site {
  color-scheme: light;

  --bg: #ffffff;
  --bg-subtle: #f4f6fa;
  --bg-inset: #eef1f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-invert: #0d0d10;

  --line: rgba(10, 12, 16, 0.1);
  --line-strong: rgba(10, 12, 16, 0.18);
  --line-invert: rgba(255, 255, 255, 0.14);

  --text: #0d0f14;
  --text-secondary: rgba(13, 15, 20, 0.68);
  --text-muted: rgba(13, 15, 20, 0.48);
  --text-invert: #ffffff;
  --text-on-accent: #ffffff;

  --accent: #0083ff;
  --accent-hover: #0069cc;
  --accent-soft: rgba(0, 131, 255, 0.1);
  --accent-softer: rgba(0, 131, 255, 0.16);
  --accent-line: rgba(0, 131, 255, 0.3);
  --accent-text: #0069cc;
  --accent-glow: rgba(0, 131, 255, 0.32);
  --ring: rgba(0, 131, 255, 0.4);

  --grad-brand: linear-gradient(135deg, #0083ff, #00a8e8);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-accent: 0 10px 28px rgba(0, 131, 255, 0.28);

  --ink-900: var(--text);
  --ink-700: var(--text-secondary);
  --ink-500: var(--text-secondary);
  --ink-300: var(--text-muted);
  --ink-200: var(--line-strong);
  --ink-100: var(--line);
  --ink-50: var(--bg-inset);
  --paper: var(--surface);
  --brand-600: var(--accent);
  --brand-500: var(--p-brand-500);
  --brand-100: var(--accent-soft);

  --success-bg: rgba(10, 148, 99, 0.1);
  --success-line: rgba(10, 148, 99, 0.28);
  --success-fg: #0a9463;
  --warning-bg: rgba(180, 83, 9, 0.1);
  --warning-line: rgba(180, 83, 9, 0.28);
  --warning-fg: #b45309;
  --danger-bg: rgba(220, 38, 38, 0.1);
  --danger-line: rgba(220, 38, 38, 0.28);
  --danger-fg: #dc2626;
  --ok-600: var(--success-fg);
  --ok-100: var(--success-bg);
  --warn-600: var(--warning-fg);
  --warn-100: var(--warning-bg);
  --err-600: var(--danger-fg);
  --err-100: var(--danger-bg);
}

body.page-home .hero__title,
body.page-home .section__title,
body.page-home .split__title,
body.page-home .auth-aside__title {
  font-weight: 500;
  letter-spacing: -0.045em;
}

body.page-home .kicker {
  letter-spacing: 0.16em;
}

body.page-home .feature,
body.page-home .plan-card,
body.page-home .usecase,
body.page-home .card {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

body.page-home .feature:hover,
body.page-home .plan-card:hover,
body.page-home .usecase:hover,
body.page-home .card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

/* ---- Scroll reveal --------------------------------------------------------
   Vanilla IntersectionObserver in site.js toggles .is-visible on any element
   carrying .reveal; this page is currently the only one that opts in. */
body.page-home .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

body.page-home .reveal.is-visible {
  opacity: 1;
  transform: none;
}

body.page-home .reveal {
  transition-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-forced) body.page-home .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Ambient hero glow -----------------------------------------------------
   Two blurred, slowly drifting radials behind the hero copy — cheap (pure
   CSS, no image request) and it is what actually reads as "premium AI
   product" rather than a flat marketing page. */
body.page-home .hero {
  isolation: isolate;
}

body.page-home .hero__orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}

body.page-home .hero__orb--a {
  top: -12%;
  left: 6%;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(0, 131, 255, 0.55), transparent 70%);
  animation: orb-drift-a 18s ease-in-out infinite alternate;
}

body.page-home .hero__orb--b {
  top: 22%;
  right: 2%;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(0, 194, 255, 0.4), transparent 70%);
  animation: orb-drift-b 22s ease-in-out infinite alternate;
}

@keyframes orb-drift-a {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(30px, 40px) scale(1.15);
  }
}

@keyframes orb-drift-b {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-40px, -25px) scale(1.1);
  }
}

/* A soft glow that follows the cursor, set via --spot-x/--spot-y from site.js.
   Layered above the orbs and the faint grid (.hero::before) but behind the
   actual copy, which is why .hero__inner needs an explicit stacking level. */
body.page-home .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--spot-x, 50%) var(--spot-y, 15%),
    rgba(0, 131, 255, 0.16),
    transparent 60%
  );
  pointer-events: none;
}

body.page-home .hero__inner {
  z-index: 1;
}

/* Gradient text gets a slow shimmer instead of sitting static. */
body.page-home .hero__title em {
  background-size: 220% auto;
  animation: title-shimmer 7s ease-in-out infinite;
}

@keyframes title-shimmer {
  0%,
  100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

/* A slow breathing glow on the one button we most want the eye drawn to. */
body.page-home .hero__actions .btn--primary {
  animation: cta-pulse 2.8s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%,
  100% {
    box-shadow: var(--shadow-accent);
  }
  50% {
    box-shadow: 0 12px 40px rgba(0, 131, 255, 0.6);
  }
}

/* Faint film grain over the whole page — the texture that keeps a large flat
   dark field from looking like a colour swatch. Inline SVG noise, no asset
   request, extremely low opacity. */
body.page-home::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Thin accent progress bar tracking scroll depth, created by site.js only on
   this page (no markup added to the shared layout for it). */
body.page-home .scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-brand);
  z-index: 70;
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-forced) body.page-home .hero__orb,
  :root:not(.motion-forced) body.page-home .hero__title em,
  :root:not(.motion-forced) body.page-home .hero__actions .btn--primary {
    animation: none;
  }
}