/* =========================================================================
   ExoPost marketing site — design tokens + base + components
   No framework. Every value a component uses traces back to a token
   declared here, so the brand's color, spacing, and radius can each be
   changed in one place. Dark is the default surface (a deliberate product-
   category choice for a modern AI SaaS tool); light is available as an
   override via [data-theme="light"] or a system light preference, set by
   js/app.js's theme toggle.
   ========================================================================= */

:root {
  /* ---- color: dark (default) ----
     Pulled directly from the reference sample's actual rendered palette
     (its canvas-iframe content, not the Framer editor chrome around it):
     page rgb(4,5,9), card/button surface rgb(21,30,46), hairline border
     rgba(255,255,255,.07), accent rgb(0,153,255), glow accent
     rgb(66,118,153), primary text rgb(255,255,255), secondary text
     rgba(230,236,255,.7). */

    --color-bg: #121212;
  --color-bg-deep: #0b0f16;
  --color-surface: #1a1e1d;
  --color-surface-raised: #262a2a; /* shifted to neutral charcoal */

  --color-border: rgb(255 255 255 / 7%);
  --color-border-strong: rgb(255 255 255 / 14%);
  --color-border-highlight: rgb(255 255 255 / 15%);

  --color-text: #ffffff;
  --color-text-muted: rgb(240 255 246 / 72%); /* warmer, less clinical */
  --color-text-faint: rgb(240 255 249 / 48%); /* same adjustment */

  --color-primary: #17a676;
  --color-primary-hover: #1cc089; /* less neon, more premium */
  --color-primary-contrast: #ffffff;
  --color-primary-tint: rgb(23 166 118 / 14%);

  --color-glow: rgb(23 166 118 / 65%); /* softened */
  --color-gradient-start: #17a676;
  --color-gradient-end: #0f5c45; /* warmer, less forest-cold */

  --color-ink: #ffffff;
  --color-ink-contrast: #04050a;

  --color-success: #37c48a;
  --color-success-tint: #123024;
  --color-danger: #ff3366;
  --color-danger-tint: #33161a;
  --color-warning: #ffbb00;
  --color-warning-tint: #322510;

  --color-focus-ring: rgb(23 166 118 / 55%); /* softened */
  --color-overlay: rgb(4 5 9 / 75%);

  /* ---- typography ---- */
  --font-body: "Monrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Montserrat", "Monrope", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

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

  /* Tight negative tracking on display type, matched from the reference
     sample (its headings run -0.02em to -0.05em). */
  --tracking-tight: -0.03em;
  --tracking-tighter: -0.045em;
  --tracking-looser: 0.01em;

  /* ---- spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* Extra bottom padding on any top-anchored box, so content reads as
     "hovering" rather than sunk toward the bottom edge. One value per
     padding step — pair --space-md with -sm, --space-lg with the card
     value, --space-xl with -lg. Centred boxes keep uniform padding. */
  --panel-padding-bottom-sm: 2rem;
  --card-padding-bottom: 3rem;
  --panel-padding-bottom-lg: 4.5rem;

  /* ---- radius / elevation ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 32%);
  --shadow-lg: 0 20px 48px rgb(0 0 0 / 44%);

  /* ---- layout ----
     content-width stays 87rem for body sections — unchanged from the
     original design. --content-width-wide + --gutter are for the header
     and footer only (see .site-header .wrap / .site-footer .wrap below),
     which are meant to run edge-to-edge with a fluid gap that scales down
     smoothly on narrower viewports instead of stepping at fixed
     breakpoints, and never collapses to zero. */
  --content-width: 87rem;
  --content-width-wide: 101.25rem;
  --content-width-narrow: 50rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --nav-height: 4.5rem;

  /* ---- motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  color-scheme: dark;
}

:root[data-theme="light"] {
--color-bg: #f5f7fa;
--color-bg-deep: #eaeef4;
--color-surface: #ffffff;
--color-surface-raised: rgb(18 135 106 / 6%); /* subtle teal elevation */

--color-border: rgb(11 13 18 / 12%);
--color-border-strong: rgb(11 13 18 / 22%);
--color-border-highlight: rgb(11 13 18 / 14%);

--color-text: #11151d;
--color-text-muted: #4a5a55;
--color-text-faint: #7c8f89;

--color-primary: #12876a; /* new stronger teal */
--color-primary-hover: #169b7c; /* controlled brightness */
--color-primary-contrast: #ffffff;
--color-primary-tint: rgb(18 135 106 / 14%);

--color-glow: rgb(18 135 106 / 25%);

--color-gradient-start: #12876a;
--color-gradient-end: #0f5c45;

--color-ink: #0b0d12;
--color-ink-contrast: #f5f7fa;

--color-success: #1f8a5c;
--color-success-tint: #e3f5ec;
--color-danger: #c9392f;
--color-danger-tint: #fbe7e5;
--color-warning: #93691a;
--color-warning-tint: #fbf0da;

--color-focus-ring: rgb(18 135 106 / 55%);
--color-overlay: rgb(11 13 18 / 45%);

color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
--color-bg: #f5f7fa;
--color-bg-deep: #eaeef4;
--color-surface: #ffffff;
--color-surface-raised: rgb(18 135 106 / 6%); /* subtle teal elevation */

--color-border: rgb(11 13 18 / 12%);
--color-border-strong: rgb(11 13 18 / 22%);
--color-border-highlight: rgb(11 13 18 / 14%);

--color-text: #11151d;
--color-text-muted: #4a5a55;
--color-text-faint: #7c8f89;

--color-primary: #12876a; /* new stronger teal */
--color-primary-hover: #169b7c; /* controlled brightness */
--color-primary-contrast: #ffffff;
--color-primary-tint: rgb(18 135 106 / 14%);

--color-glow: rgb(18 135 106 / 25%);

--color-gradient-start: #12876a;
--color-gradient-end: #0f5c45;

--color-ink: #0b0d12;
--color-ink-contrast: #f5f7fa;

--color-success: #1f8a5c;
--color-success-tint: #e3f5ec;
--color-danger: #c9392f;
--color-danger-tint: #fbe7e5;
--color-warning: #93691a;
--color-warning-tint: #fbf0da;

--color-focus-ring: rgb(18 135 106 / 55%);
--color-overlay: rgb(11 13 18 / 45%);

color-scheme: light;
  }
}
/* =========================================================================
   Reset + base
   ========================================================================= */

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

html { 
  -webkit-text-size-adjust: 100%; 
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--color-text-muted); }

ul, ol { padding-left: 1.2em; color: var(--color-text-muted); }
li + li { margin-top: var(--space-3xs); }

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

::selection { background: var(--color-primary-tint); color: var(--color-ink); }

/* =========================================================================
   Layout helpers
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--content-width-narrow); }

/* Header and footer alone get a wider cap so they can run wider than body
   content on large screens. Padding uses the same fluid --gutter as every
   other .wrap so both share one shrink formula and never misalign — only
   the max-width differs, guaranteeing header/footer width >= content width
   at any viewport. */
.site-header .wrap,
.site-footer .wrap {
  max-width: var(--content-width-wide);
}

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--muted { background: var(--color-surface); border-block: 1px solid var(--color-border); }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: var(--space-md); }

.section-head { max-width: 40rem; margin-bottom: var(--space-lg); }
.section-head h1 { margin-bottom: var(--space-md); }
.section-head h2 { margin-bottom: var(--space-sm); }
.section-head--center { margin-inline: auto; text-align: center; }

.cta-block { text-align: center; }
.cta-block h2 { margin-bottom: var(--space-sm); }
.cta-block p { max-width: 32rem; margin-inline: auto; margin-bottom: var(--space-lg); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
}

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

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -3rem;
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-sm); }

/* =========================================================================
   Icons
   ========================================================================= */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font: inherit;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  padding: 0.8em 1.4em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-primary-hover); }

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  padding: 0.6em 0.9em;
}
.btn--ghost:hover { color: var(--color-text); }

.btn--lg { padding: 1em 1.8em; font-size: var(--text-base); }
.btn--block { width: 100%; }
.btn--icon { padding: 0.6em; border-radius: var(--radius-pill); }

/* =========================================================================
   Top navigation
   ========================================================================= */

/* backdrop-filter lives on ::before rather than directly on .site-header:
   filter/backdrop-filter establishes a containing block for position:fixed
   descendants, which would size the mobile .nav-links panel against the
   72px-tall header box instead of the viewport. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  gap: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.brand-logo { height: 1.375rem; width: auto; display: block; }

.brand--footer .brand-logo { height: 0.9735rem; }

/* Honeypot wrapper on the support form. Positioned off-screen rather than
   display:none — some bots skip fields that are display:none, and a screen
   reader is kept out by aria-hidden plus tabindex="-1" on the input. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-note { font-size: var(--text-sm); color: var(--color-text-faint); margin-top: var(--space-sm); }

.logo-accent { fill: var(--color-primary); }
.logo-ink { fill: var(--color-ink); }
.logo-squircle { fill: var(--color-ink-contrast); }

/* The nav owns its own list/link box model end to end — margin, padding,
   list-style, color, text-decoration — rather than leaning on the body-copy
   defaults (`ul, ol`, `li + li`, `a` near the top of this file). Higher
   specificity here means it stays correct regardless of what those rules do. */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-text-muted);
}
.nav-links li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2xs) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-text); border-color: var(--color-primary); }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  background: none; border: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2xs) 0;
}
.nav-dropdown-trigger:hover { color: var(--color-text); }
.nav-dropdown-trigger .icon { width: 0.9em; height: 0.9em; transition: transform var(--duration-fast) var(--ease-standard); }
.nav-dropdown[data-open="true"] .nav-dropdown-trigger .icon { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  min-width: 13rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.nav-dropdown[data-open="true"] .nav-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-menu a {
  display: block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.nav-dropdown-menu a:hover { background: var(--color-primary-tint); color: var(--color-primary); }

.nav-actions { display: flex; align-items: center; gap: var(--space-lg); }

.theme-toggle {
  appearance: none;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  width: 2rem; height: 2rem;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
/* Dark is the default surface, so the toggle shows a sun ("switch to
   light") by default, and a moon ("switch to dark") once light is active —
   the icon always names the mode you'd switch TO, not the current one. */
.theme-toggle .icon--moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon--moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon--sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .icon--moon { display: block; }
}

.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  /* The <nav> wrapping .nav-links goes position:fixed below and collapses
     to a zero-size box, but it's still a flex item in .nav — its empty box
     stakes out a third space-between slot, splitting the gap in two and
     stranding the toggle in the middle instead of the right edge. */
  #nav-links { display: contents; }
  .nav-links {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
  }
  [data-nav-links][data-open="true"] .nav-links { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-link, .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-2xs);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-border);
    justify-content: space-between;
    width: 100%;
  }
  /* The desktop hover/current indicator recolors the same border-bottom
     that's repurposed as a full-width list divider here, which reads as a
     stray underline flashing across the row on tap. Keep the divider
     neutral on mobile and let the text color carry hover/current instead. */
  .nav-links .nav-link:hover,
  .nav-links .nav-link[aria-current="page"] {
    border-color: var(--color-border);
  }
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
    padding-left: var(--space-md);
  }
  .nav-dropdown[data-open="true"] .nav-dropdown-menu { display: flex; }
  /* `.nav-links li` (decoupling rule above) outranks a bare `.nav-actions`
     class selector since .nav-actions is itself the <li> — qualify it so
     the intended margin/padding actually win. */
  .nav-links .nav-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
    width: 100%;
    /* Log in's own padding already adds --space-2xs above its text, so the
       li only needs --space-sm on top of that to match other rows'
       --space-md gap from divider to text. */
    margin-top: var(--space-sm);
  }
  .nav-actions .nav-link {
    width: auto;
    padding: var(--space-2xs);
    border-bottom: none;
  }
  .nav-actions .theme-toggle {
    /* Log in's own padding-top offsets its text by --space-2xs; match that
       offset here instead of resizing the toggle's fixed 2rem box. */
    margin-top: var(--space-2xs);
  }
  .nav-actions .btn--primary {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  padding-block: var(--space-2xl) var(--space-xl);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero h1 { margin-bottom: var(--space-md); }
.hero-lede { font-size: var(--text-lg); max-width: 34rem; margin-bottom: var(--space-lg); }
.hero-actions { gap: var(--space-sm); margin-bottom: var(--space-md); }
.hero-note { font-size: var(--text-xs); color: var(--color-text-faint); }

/* -------------------------------------------------------------------------
   Hero visual — one brief, your choice of AI provider, posts you judge.

   Inline SVG rather than a raster asset for three reasons: it reads the same
   custom properties as everything else (so it themes itself in light and dark
   from one source), it has no intrinsic pixel size (so there is no @2x asset
   to maintain), and it adds no dependency to a site that has none.

   The declarations below are the composed state — every card present, the
   first and third approved, the second rejected. That is what a reduced-motion
   visitor sees, and it tells the whole story on its own. Motion exists only
   inside the no-preference query, on a single synchronised 15s cycle.
   ------------------------------------------------------------------------- */

.hero-viz { max-width: 34rem; margin-inline: auto; }
.hero-viz svg { width: 100%; height: auto; display: block; overflow: hidden; }

.hv-panel { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1; }
.hv-line { fill: var(--color-text-muted); opacity: 0.32; }
.hv-line--dim { opacity: 0.16; }
.hv-hl { fill: var(--color-primary); opacity: 1; }
.hv-scan { fill: var(--color-primary); opacity: 0; }
.hv-accent { fill: var(--color-primary); }
.hv-accent--no { fill: var(--color-danger); }
.hv-wire {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 8;
  stroke-linecap: round;
}
.hv-hub-ring {
  fill: var(--color-bg-deep);
  stroke: var(--color-primary);
  stroke-width: 1.5;
  opacity: 0.55;
}
.hv-prov {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-anchor: middle;
  opacity: 0;
}
.hv-prov--1 { opacity: 1; }
.hv-label {
  fill: var(--color-text-faint);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
}
.hv-label--mid { text-anchor: middle; }
.hv-label--accent { fill: var(--color-primary); }
.hv-post {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: var(--weight-regular);
}
.hv-dest { color: var(--color-text-muted); opacity: 0.75; }
.hv-stamp-bg { fill: var(--color-primary); }
.hv-stamp-bg--no { fill: var(--color-danger); }
.hv-stamp-tick {
  fill: none;
  stroke: var(--color-primary-contrast);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .hv-scan, .hv-hl, .hv-card, .hv-stamp, .hv-prov, .hv-hub-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: 15s var(--ease-standard) infinite both;
  }
  .hv-scan { animation-name: hv-scan-sweep; transform-origin: top center; }
  .hv-hl--1 { animation-name: hv-lit-1; }
  .hv-hl--2 { animation-name: hv-lit-2; }
  .hv-hl--3 { animation-name: hv-lit-3; }
  .hv-hub-ring { animation-name: hv-hub-pulse; }
  .hv-card--1 { animation-name: hv-card-1; }
  .hv-card--2 { animation-name: hv-card-2; }
  .hv-card--3 { animation-name: hv-card-3; }
  .hv-stamp--1 { animation-name: hv-approve; }
  .hv-stamp--2 { animation-name: hv-reject; }
  .hv-stamp--3 { animation-name: hv-approve-late; }

  /* Six providers share one 15s cycle, 2.5s each, offset by delay so the
     rotation stays locked to the rest of the animation. */
  .hv-prov { animation-name: hv-prov-cycle; }
  .hv-prov--1 { animation-delay: 0s; }
  .hv-prov--2 { animation-delay: 2.5s; }
  .hv-prov--3 { animation-delay: 5s; }
  .hv-prov--4 { animation-delay: 7.5s; }
  .hv-prov--5 { animation-delay: 10s; }
  .hv-prov--6 { animation-delay: 12.5s; }

  .hv-wire { animation: hv-wire-flow 1.6s linear infinite; }
}

@keyframes hv-scan-sweep {
  0%   { transform: translateY(0); opacity: 0; }
  3%   { opacity: 0.9; }
  22%  { transform: translateY(226px); opacity: 0.9; }
  26%, 100% { transform: translateY(226px); opacity: 0; }
}
@keyframes hv-lit-1 { 0%, 6%  { opacity: 0.16; } 10%, 100% { opacity: 1; } }
@keyframes hv-lit-2 { 0%, 12% { opacity: 0.16; } 16%, 100% { opacity: 1; } }
@keyframes hv-lit-3 { 0%, 18% { opacity: 0.16; } 22%, 100% { opacity: 1; } }
@keyframes hv-wire-flow { to { stroke-dashoffset: -24; } }
@keyframes hv-hub-pulse {
  0%, 8%   { opacity: 0.55; }
  12%      { opacity: 1; }
  18%      { opacity: 0.55; }
  22%      { opacity: 1; }
  28%      { opacity: 0.55; }
  32%      { opacity: 1; }
  38%, 100% { opacity: 0.55; }
}
@keyframes hv-prov-cycle {
  0%        { opacity: 0; }
  2%, 15%   { opacity: 1; }
  17%, 100% { opacity: 0; }
}

/* Cards arrive from the hub on the left and all leave upward once resolved,
   so the stack reads as a queue advancing. The verdict is carried by the
   stamp — check or cross — rather than by the direction of travel. */
@keyframes hv-card-1 {
  0%, 6%    { opacity: 0; transform: translateX(-18px); }
  12%, 40%  { opacity: 1; transform: none; }
  53%, 100% { opacity: 0; transform: translateY(-64px); }
}
@keyframes hv-card-2 {
  0%, 16%   { opacity: 0; transform: translateX(-18px); }
  22%, 63%  { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translateY(-64px); }
}
@keyframes hv-card-3 {
  0%, 26%   { opacity: 0; transform: translateX(-18px); }
  32%, 80%  { opacity: 1; transform: none; }
  87%, 100% { opacity: 0; transform: translateY(-64px); }
}
@keyframes hv-approve {
  0%, 36%   { opacity: 0; transform: scale(0.5); }
  40%, 50%  { opacity: 1; transform: scale(1); }
  53%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes hv-reject {
  0%, 53%   { opacity: 0; transform: scale(0.5); }
  57%, 67%  { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes hv-approve-late {
  0%, 70%   { opacity: 0; transform: scale(0.5); }
  74%, 84%  { opacity: 1; transform: scale(1); }
  87%, 100% { opacity: 0; transform: scale(1); }
}

/* =========================================================================
   Placeholder illustration blocks (§5.5)
   ========================================================================= */

.placeholder-img {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 5%, transparent),
    color-mix(in srgb, var(--color-primary) 5%, transparent) 10px,
    transparent 10px, transparent 20px
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  color: var(--color-text-faint);
  min-height: 18rem;
}
.placeholder-img .icon { width: 2.25rem; height: 2.25rem; color: var(--color-primary); }
.placeholder-img strong { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.placeholder-img span { font-size: var(--text-xs); max-width: 22rem; }
.placeholder-img--square { aspect-ratio: 1 / 1; min-height: 0; }
.placeholder-img--wide { aspect-ratio: 16 / 10; min-height: 0; }

/* =========================================================================
   Cards
   ========================================================================= */

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  padding-bottom: var(--card-padding-bottom);
}

.step-card { gap: var(--space-sm); }
.step-index {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold);
  font-family: var(--font-display);
}

.feature-card { gap: var(--space-xs); }
.feature-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
}

.audience-card { text-align: left; gap: var(--space-xs); }

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* =========================================================================
   Trust / safety section
   ========================================================================= */

.trust-panel {
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  padding-bottom: var(--panel-padding-bottom-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
@media (max-width: 860px) { .trust-panel { grid-template-columns: 1fr; } }
.trust-panel h2 { color: var(--color-ink-contrast); margin-bottom: var(--space-sm); }
.trust-panel p { color: color-mix(in srgb, var(--color-ink-contrast) 72%, transparent); }
.trust-badges { display: flex; flex-direction: column; gap: var(--space-xs); }
.trust-badge {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--color-ink-contrast) 8%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.trust-badge .icon { color: var(--color-primary); }
.trust-link {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  margin-top: var(--space-md);
}

/* capability compare list, used on Legal page */
.capability-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 700px) { .capability-compare { grid-template-columns: 1fr; } }
.capability-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.capability-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.capability-list.can li { background: var(--color-success-tint); }
.capability-list.can .icon { color: var(--color-success); }
.capability-list.cannot li { background: var(--color-danger-tint); }
.capability-list.cannot .icon { color: var(--color-danger); }
.capability-list .icon { margin-top: 0.15em; }

/* =========================================================================
   Pricing
   ========================================================================= */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  gap: var(--space-sm);
  position: relative;
}
.price-card--trial {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.price-card-badge {
  position: absolute;
  top: -0.75rem; left: var(--space-lg);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
}
.price-amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-ink); }
.price-amount small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.price-caption { font-size: var(--text-xs); color: var(--color-text-faint); }
.price-specs { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); }
.price-specs li { display: flex; align-items: center; gap: var(--space-2xs); color: var(--color-text-muted); }
.price-specs .icon { width: 1em; height: 1em; color: var(--color-success); }
.price-card .btn { margin-top: auto; }

.pricing-footnote {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-top: var(--space-lg);
  max-width: 40rem;
  margin-inline: auto;
}

/* =========================================================================
   Forms — every control fully custom (§5.1), no native styling
   ========================================================================= */

.field { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-sm); }
.field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.field-hint { font-size: var(--text-xs); color: var(--color-text-faint); }

.input, .textarea, .select-native {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.9em;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-faint); }
.input:focus, .textarea:focus, .select-native:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.textarea { min-height: 8rem; resize: vertical; }

.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}
.field-error {
  display: none;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-danger);
}
.field-error.is-visible { display: flex; }
.field-error .icon { width: 1em; height: 1em; }

/* custom select */
.select {
  position: relative;
}
.select-native {
  cursor: pointer;
  padding-right: 2.4em;
  background-image: none;
}
.select::after {
  content: "";
  position: absolute;
  right: 0.9em; top: 50%;
  width: 0.6em; height: 0.6em;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* custom checkbox */
.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  -webkit-user-select: none; /* Safari and iOS Safari still require the prefix */
  user-select: none;
}
.checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkbox-mark {
  flex-shrink: 0;
  width: 1.25rem; height: 1.25rem;
  border-radius: 5px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 0.1em;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.checkbox-mark .icon { width: 0.85em; height: 0.85em; color: var(--color-primary-contrast); opacity: 0; transition: opacity var(--duration-fast); }
.checkbox input:checked + .checkbox-mark { background: var(--color-primary); border-color: var(--color-primary); }
.checkbox input:checked + .checkbox-mark .icon { opacity: 1; }
.checkbox input:focus-visible + .checkbox-mark { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

/* custom file picker */
.file-field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.file-drop {
  position: relative;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.file-drop:hover, .file-drop.is-dragover { border-color: var(--color-primary); background: var(--color-primary-tint); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop .icon { width: 1.75rem; height: 1.75rem; color: var(--color-primary); margin-inline: auto; margin-bottom: var(--space-2xs); }

/* =========================================================================
   FAQ accordion
   ========================================================================= */

.accordion { border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: none;
  border: none;
  font: inherit;
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: left;
  padding: var(--space-md) 0;
  cursor: pointer;
}
.accordion-trigger .icon { color: var(--color-primary); transition: transform var(--duration-base) var(--ease-standard); flex-shrink: 0; }
.accordion-item[data-open="true"] .accordion-trigger .icon { transform: rotate(180deg); }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-standard);
}
.accordion-item[data-open="true"] .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel p { padding-bottom: var(--space-md); }

/* =========================================================================
   Toast (replaces native alert/confirm — §5.4)
   ========================================================================= */

.toast-region {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: min(22rem, calc(100vw - 2 * var(--space-md)));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  animation: toast-in var(--duration-base) var(--ease-standard);
}
.toast[data-variant="error"] { border-left-color: var(--color-danger); }
.toast .icon { color: var(--color-success); flex-shrink: 0; margin-top: 0.15em; }
.toast[data-variant="error"] .icon { color: var(--color-danger); }
.toast-close { margin-left: auto; background: none; border: none; color: var(--color-text-faint); cursor: pointer; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Modal (replaces native confirm — §5.4)
   ========================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  z-index: 400;
}
.modal-overlay.is-open { display: flex; }
.modal {
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
  max-width: 26rem;
  width: 100%;
  animation: modal-in var(--duration-base) var(--ease-standard);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2xs); margin-top: var(--space-md); }

/* =========================================================================
   Cookie / consent banner (custom, never a native prompt — §5.4)
   ========================================================================= */

.consent-banner {
  position: fixed;
  left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
  max-width: 40rem;
  margin-inline: auto;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  z-index: 250;
  transform: translateY(120%);
  transition: transform var(--duration-slow) var(--ease-standard);
}
.consent-banner.is-visible { transform: translateY(0); }
.consent-banner p { font-size: var(--text-sm); margin: 0; }
.consent-actions { display: flex; gap: var(--space-2xs); flex-shrink: 0; }
@media (max-width: 620px) {
  .consent-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-xl) var(--space-lg);
  margin-top: var(--space-2xl);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
.footer-col h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); margin-bottom: var(--space-sm); }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-col a { font-size: var(--text-sm); color: var(--color-text-muted); }
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* =========================================================================
   Legal page typography (Privacy / Terms / Acceptable Use)
   ========================================================================= */

.legal-doc { max-width: var(--content-width-narrow); }
.legal-doc h2 { font-size: var(--text-xl); margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc h3 { font-size: var(--text-base); margin-top: var(--space-md); margin-bottom: var(--space-2xs); }
.legal-doc p, .legal-doc li { color: var(--color-text-muted); }
.legal-doc p + p { margin-top: var(--space-sm); }
.legal-updated { font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-lg); }
.legal-callout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  padding-bottom: var(--panel-padding-bottom-sm);
  margin-block: var(--space-md);
  font-size: var(--text-sm);
}
.legal-toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  padding-bottom: var(--panel-padding-bottom-sm);
  margin-bottom: var(--space-lg);
}
.legal-toc h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); margin-bottom: var(--space-xs); }
.legal-toc ol { columns: 2; column-gap: var(--space-md); font-size: var(--text-sm); }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } }

/* =========================================================================
   Reveal-on-scroll (respects prefers-reduced-motion — §5.3)
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
   Support page
   ========================================================================= */

.support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; } }

.status-note {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.status-dot {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

/* =========================================================================
   Plan calculator (home — "Your price")

   This is a calculator FOR ExoPost, not against a competitor. The heaviest
   thing on the panel is our own price, because that is what a reader's eye
   lands on first and it must never be mistaken for someone else's fee. The
   cost of doing the same work by hand is deliberately a single quiet line
   underneath — present, checkable, and clearly secondary.
   ========================================================================= */

.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  padding-bottom: var(--card-padding-bottom);
}
@media (max-width: 760px) {
  .calc { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.calc-kicker {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}
.calc-kicker--on { color: var(--color-primary-contrast); opacity: 0.75; }

.calc-inputs { display: flex; flex-direction: column; gap: var(--space-md); }
.calc-field {
  display: grid;
  grid-template-columns: 1fr 4.75rem;
  align-items: center;
  gap: var(--space-3xs) var(--space-sm);
}
.calc-field label {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.calc-field--aside { margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.calc-field--aside label { font-size: var(--text-xs); color: var(--color-text-faint); font-weight: var(--weight-regular); }
.calc-field output {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fully custom range control — no native rendering anywhere (§5.1). */
.calc-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.25rem; background: transparent; cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--color-border-strong); }
.calc-field input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--color-border-strong); }
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1rem; height: 1rem; margin-top: -6px; border-radius: 50%;
  background: var(--color-primary); border: 2px solid var(--color-surface);
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--color-primary); border: 2px solid var(--color-surface);
}
.calc-field input[type="range"]:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; border-radius: var(--radius-sm); }

/* The outcome panel — our price, carrying the most weight on the page. */
.calc-outcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  padding-bottom: var(--card-padding-bottom);
  color: var(--color-primary-contrast);
}
/* Every element in this panel is a <p>, and the global `p { color:
   --color-text-muted }` beats an inherited colour — which reads as dark grey
   on the accent fill in light theme. Set it explicitly. */
.calc-outcome p { color: var(--color-primary-contrast); }
.calc-plan-tier {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.calc-plan-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
}
.calc-plan-price small { font-size: var(--text-base); font-weight: var(--weight-medium); margin-left: 0.35em; opacity: 0.8; }
.calc-plan-covers { margin: var(--space-2xs) 0 var(--space-sm); font-size: var(--text-sm); opacity: 0.9; }
.calc-outcome .btn--primary {
  background: var(--color-primary-contrast);
  color: var(--color-primary);
  border-color: transparent;
}
.calc-outcome .btn--primary:hover { background: var(--color-primary-contrast); opacity: 0.9; }
.calc-compare {
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid rgb(255 255 255 / 22%);
  font-size: var(--text-xs);
  opacity: 0.82;
}
.calc-compare strong { font-weight: var(--weight-bold); }

.calc-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  max-width: 52rem;
  margin-top: var(--space-md);
}
.calc-hint { display: block; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-faint); }

/* =========================================================================
   "Your entire job" (home)

   The asymmetry is the argument: three things once, one thing forever. The
   right-hand panel is deliberately near-empty and set in display type — it
   should look like it is missing something, because that absence is the
   product claim.
   ========================================================================= */

.job-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: stretch; }
@media (max-width: 900px) { .job-split { grid-template-columns: 1fr; } }

.job-col {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  padding-bottom: var(--card-padding-bottom);
}
.job-col--forever {
  background: var(--color-primary-tint);
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  justify-content: flex-start;
}
.job-when {
  margin: 0 0 var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}
.job-verdict {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.job-time {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: auto 0 0;
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}
.job-time .icon { width: 1.1em; height: 1.1em; }
.job-note { margin-top: var(--space-md); max-width: 46rem; color: var(--color-text-muted); }
.job-or { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.job-or-note { display: block; margin-top: var(--space-2xs); color: var(--color-text-faint); }
/* "Never" items on the inverted trust panel: subdued rather than alarm-red —
   this is a boundary the reader should find reassuring, not a warning. */
.trust-badge--never .icon { color: color-mix(in srgb, var(--color-ink-contrast) 45%, transparent); }

/* =========================================================================
   Plan model diagram (pricing — "In every plan")

   Containment rather than a flowchart: a workspace HOLDS its campaigns and its
   accounts, so everything sits inside one frame instead of pointing at the
   next box down. Curved hairlines rather than arrowheads — the direction is
   obvious from the layout, and arrowheads make a diagram look like a spec.
   Inline SVG so it themes from these tokens and needs no raster asset.
   ========================================================================= */

.plan-model { max-width: 48rem; margin: 0 auto var(--space-xl); }
.plan-model svg { width: 100%; height: auto; display: block; overflow: visible; }

.pm-frame {
  fill: color-mix(in srgb, var(--color-primary) 4%, transparent);
  stroke: color-mix(in srgb, var(--color-primary) 30%, transparent);
  stroke-width: 1;
}
.pm-frame-t {
  fill: var(--color-primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
}

.pm-wire { fill: none; stroke: var(--color-border-strong); stroke-width: 1.25; }

.pm-chip { fill: var(--color-surface-raised); stroke: var(--color-border); stroke-width: 1; }
.pm-chip--soft { fill: none; stroke-dasharray: 4 5; }
.pm-chip-t {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  text-anchor: middle;
}
.pm-chip-t--soft { fill: var(--color-text-faint); font-weight: var(--weight-regular); font-size: 12px; }

.pm-hub {
  fill: var(--color-primary);
  stroke: none;
}
.pm-hub-t {
  fill: var(--color-primary-contrast);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--weight-bold);
  text-anchor: middle;
  letter-spacing: var(--tracking-tight);
}
.pm-hub-s {
  fill: var(--color-primary-contrast);
  font-family: var(--font-body);
  font-size: 11px;
  text-anchor: middle;
  opacity: 0.78;
}

.pm-card { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1; }
.pm-card--soon { fill: none; stroke-dasharray: 4 5; }
.pm-mark { color: var(--color-text-muted); }
.pm-name {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
}
.pm-name--soon { fill: var(--color-text-muted); font-weight: var(--weight-regular); }
.pm-sub {
  fill: var(--color-text-faint);
  font-family: var(--font-body);
  font-size: 11.5px;
}