/* prepended from theme/agentcron.theme.css — edit THERE, not here */
/* ═══════════════════════════════════════════════════════════════════════════
   AGENTCRON THEME — the one file that owns every brand colour.
   ═══════════════════════════════════════════════════════════════════════════

   Edit a value here and it changes everywhere:

     · the DESKTOP APP   src/styles.css maps Tailwind's palette onto these
                         variables — rebuild the app (`yarn tauri build`) or
                         just reload the dev window to see it.
     · the WEBSITE       website/build.mjs prepends this file to the shipped
                         stylesheet — run `node website/build.mjs` to see it.

   Rules of the file:
   · Colours only. Spacing, type scale and layout live with each surface —
     they are design, not branding.
   · Never rename a variable; both consumers are pinned to these names by
     tests (src/theme.test.ts, website build check) and a rename fails both.
   · The app is dark-only, so it reads the DARK palette. The website has a
     light mode too, so it reads both.
   · The DERIVED sections exist because some raw hues fail WCAG AA as text on
     light backgrounds. If you change a raw hue, re-check its derived partners
     — a beautiful brand that cannot be read is a refund.

   The default is Catppuccin (Mocha dark / Latte light). Replace freely.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── DARK ─ surfaces, deepest to lightest ─────────────────────────────── */
  --ac-crust:    #11111b;   /* window chrome, deepest wells                  */
  --ac-mantle:   #181825;   /* panels, cards                                 */
  --ac-base:     #1e1e2e;   /* the canvas                                    */
  --ac-surface0: #313244;   /* raised controls                               */
  --ac-surface1: #45475a;   /* borders, hovers                               */
  --ac-surface2: #585b70;   /* strong borders, disabled text                 */

  /* ── DARK ─ text ──────────────────────────────────────────────────────── */
  --ac-text:     #cdd6f4;
  --ac-subtext:  #a6adc8;
  --ac-overlay:  #6c7086;   /* muted labels — the app's quiet voice          */

  /* ── DARK ─ accents ───────────────────────────────────────────────────── */
  --ac-mauve:    #cba6f7;   /* THE brand accent: primary actions, selection  */
  --ac-blue:     #89b4fa;   /* links, running state                          */
  --ac-sapphire: #74c7ec;
  --ac-green:    #a6e3a1;   /* success                                       */
  --ac-red:      #f38ba8;   /* failure                                       */
  --ac-peach:    #fab387;   /* needs-you, warnings                           */
  --ac-yellow:   #f9e2af;
  --ac-teal:     #94e2d5;
  --ac-pink:     #f5c2e7;
  --ac-on-accent:#11111b;   /* text set ON an accent-filled control          */

  /* ── DARK ─ derived (site) ────────────────────────────────────────────── */
  --ac-site-overlay:  #9399b2;          /* site body-muted: AA on --ac-mantle */
  --ac-link:          var(--ac-blue);
  --ac-link-hover:    var(--ac-sapphire);
  --ac-code-accent:   var(--ac-teal);
  --ac-pending-accent:var(--ac-peach);
  --ac-tick:          var(--ac-green);
  /* Teal, not mauve: the numbered control loop is SYSTEM state, and the site's
     accent semantics are teal = active/system, amber = a decision waiting on
     you, violet = restrained secondary only (WEBSITE_DESIGN_DIRECTION.md
     §"Visual system"). Light partner below clears AA on --ac-light-surface0. */
  --ac-step-accent:   var(--ac-teal);

  /* Amber that MEANS something: a decision, a blocked boundary, "waiting on
     you". Aliased rather than duplicated so there is one amber value per
     palette, and the light one is the DARKENED peach — the raw light peach is
     2.5:1 on light mantle, which is under the 3:1 a meaning-bearing dot needs
     (WCAG 1.4.11). Amber may not be spent on decoration. */
  --ac-attention:       var(--ac-peach);

  /* Ink set ON a teal fill — the primary button, the skip link. ONE value for
     both palettes because it clears AA on both: 12.99:1 on --ac-teal and
     5.17:1 on --ac-light-teal. (This is the `--btn-primary-ink` token the
     website design direction asked for, named for the fill rather than the
     component, because two components sit on that fill.) White was tried on
     the light button and shipped at 3.74:1 — below AA for button text. */
  --ac-ink-on-teal:   #080d1d;

  /* ── LIGHT ─ the website's light mode (the app does not read these) ───── */
  --ac-light-crust:    #dce0e8;
  --ac-light-mantle:   #e6e9ef;
  --ac-light-base:     #eff1f5;
  --ac-light-surface0: #ccd0da;
  --ac-light-surface1: #bcc0cc;
  --ac-light-surface2: #acb0be;
  --ac-light-text:     #4c4f69;
  --ac-light-subtext:  #5c5f77;
  --ac-light-overlay:  #616477;  /* AA on light mantle (raw latte failed)    */
  --ac-light-mauve:    #8839ef;
  --ac-light-blue:     #1e66f5;
  --ac-light-sapphire: #209fb5;
  --ac-light-green:    #40a02b;
  --ac-light-red:      #d20f39;
  --ac-light-peach:    #fe640b;
  --ac-light-yellow:   #df8e1d;
  --ac-light-teal:     #179299;
  --ac-light-pink:     #ea76cb;
  --ac-light-on-accent:#eff1f5;

  /* ── LIGHT ─ derived: hand-tuned to pass AA where the raw hue cannot ──── */
  --ac-light-link:          #164fc4;  /* blue was 4.3:1                      */
  --ac-light-link-hover:    #1147b8;
  --ac-light-code-accent:   #0e5e60;  /* teal was 3.3:1                      */
  --ac-light-pending-accent:#983c07;  /* peach was 2.6:1                     */
  --ac-light-tick:          #307820;
  /* The darkened teal, for the same reason the dark partner is teal at all:
     4.88:1 on --ac-light-surface0, where raw light teal is 3.3:1. */
  --ac-light-step-accent:   var(--ac-light-code-accent);
  --ac-light-attention:     var(--ac-light-pending-accent);
}

/* =============================================================================
   Catppuccin — the app's own palette (src/styles.css, design/UI_NOISE_AUDIT.md §2.1).
   Mocha is the default because the product is dark; Latte is the light counterpart.
   No web fonts: type comes from the visitor's machine, so the page makes zero
   third-party requests and the no-telemetry claim holds all the way down.
   ============================================================================= */

:root {
  --base: var(--ac-base);
  --mantle: var(--ac-mantle);
  --crust: var(--ac-crust);
  --surface0: var(--ac-surface0);
  --surface1: var(--ac-surface1);
  --surface2: var(--ac-surface2);
  --text: var(--ac-text);
  --subtext: var(--ac-subtext);
  /* Mocha overlay2, not overlay0: #6c7086 was 3.4:1 on --base, below AA for the
     small print set in it (cta notes, footer, figcaptions). */
  --overlay: var(--ac-site-overlay);
  --mauve: var(--ac-mauve);
  --blue: var(--ac-blue);
  --sapphire: var(--ac-sapphire);
  --green: var(--ac-green);
  --red: var(--ac-red);
  --peach: var(--ac-peach);
  --yellow: var(--ac-yellow);
  --teal: var(--ac-teal);
  --pink: var(--ac-pink);
  --on-accent: var(--ac-on-accent);

  /* Semantic accents. The raw palette above stays untouched; these exist because a
     hue that passes AA on the dark base can fail on the light one, so anything used
     AS TEXT goes through one of these and gets a darker light-theme value below. */
  --link: var(--ac-link);
  --link-hover: var(--ac-link-hover);
  --code-accent: var(--ac-code-accent);      /* mono meta: cli commands, agent schedules */
  /* Amber, and amber means one thing on this site: a decision, a blocked
     boundary, or something waiting on you. It is never decoration. Anything
     that wants "a bit of warmth" gets spacing or slate instead. */
  --attention: var(--ac-attention);
  --tick: var(--ac-tick);            /* tick-list check marks (decorative) */
  --step-accent: var(--ac-step-accent);     /* step numbers — teal: system state */
  /* Text/glyph ink on a teal fill (primary button, skip link). One value for
     both palettes; see theme/agentcron.theme.css for the two ratios. */
  --ink-on-teal: var(--ac-ink-on-teal);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 8px 30px rgb(0 0 0 / 0.35);
  --radius: 12px;
  --radius-sm: 8px;
  --wrap: 1140px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- one type scale, one spacing scale ----------------------------------
     Every font-size in this sheet is one of these steps (display sizes use the
     clamps). If a new size seems needed, use the nearest step — near-duplicates
     (0.86/0.88/0.9, 0.92/0.93/0.94) are exactly the drift this replaces. */
  --fs-2xs: 0.72rem;  /* micro caps: pending label, docs group, toc heading */
  --fs-xs: 0.78rem;   /* kickers + mono meta: eyebrows, cli labels, schedules */
  --fs-sm: 0.85rem;   /* fine print: cta notes, plan notes, footer meta */
  --fs-md: 0.95rem;   /* secondary body: cards, lists, tables, nav */
  --fs-base: 1rem;    /* card headings, faq questions */
  --fs-lg: 1.05rem;   /* page subs, plan names, prose h3, pull quotes */
  --fs-xl: 1.35rem;   /* prose h2 */
  --fs-h2: clamp(1.35rem, 3vw, 1.75rem);
  --fs-h1: clamp(1.9rem, 4.5vw, 2.6rem);
  --fs-display: clamp(2.05rem, 5vw, 3.05rem);   /* the hero headline only */
  --fs-lede: clamp(1.02rem, 1.6vw, 1.15rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --pad-card: 1rem 1.15rem;                 /* every mantle card, one padding */
  --gap-hero: clamp(1.25rem, 3.5vw, 2rem);  /* the hero column's vertical beat */
  --gap-section: clamp(2rem, 5vw, 3.25rem); /* the beat BETWEEN sections */
}

/* Catppuccin Latte. Applied when the visitor asks for light, or when the site is set
   to follow the OS and the OS says light. */
:root[data-theme="light"],
:root[data-theme="system"] {
  color-scheme: light;
}
:root[data-theme="light"] {
  --base: var(--ac-light-base);
  --mantle: var(--ac-light-mantle);
  --crust: var(--ac-light-crust);
  --surface0: var(--ac-light-surface0);
  --surface1: var(--ac-light-surface1);
  --surface2: var(--ac-light-surface2);
  --text: var(--ac-light-text);
  --subtext: var(--ac-light-subtext);
  --overlay: var(--ac-light-overlay);      /* latte overlay2 #7c7f93 was 3.3:1 on --mantle — below AA */
  --mauve: var(--ac-light-mauve);
  --blue: var(--ac-light-blue);
  --sapphire: var(--ac-light-sapphire);
  --green: var(--ac-light-green);
  --red: var(--ac-light-red);
  --peach: var(--ac-light-peach);
  --yellow: var(--ac-light-yellow);
  --teal: var(--ac-light-teal);
  --pink: var(--ac-light-pink);
  --on-accent: var(--ac-light-on-accent);
  /* Text-bearing accents, darkened until they clear 4.5:1 on base AND mantle.
     The raw palette keeps the brand hues for fills and borders. */
  --link: var(--ac-light-link);         /* --blue was 4.3:1 */
  --link-hover: var(--ac-light-link-hover);
  --code-accent: var(--ac-light-code-accent);  /* --teal was 3.3:1 */
  --attention: var(--ac-light-attention);   /* raw light peach is 2.5:1 — under 3:1 for a meaning-bearing dot */
  --tick: var(--ac-light-tick);         /* solid: the 70% mix of --green sat under 3:1 */
  --step-accent: var(--ac-light-step-accent);  /* darkened teal: 4.88:1 on surface0 */
  --shadow-1: 0 1px 2px rgb(76 79 105 / 0.10);
  --shadow-2: 0 8px 30px rgb(76 79 105 / 0.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --base: var(--ac-light-base);
    --mantle: var(--ac-light-mantle);
    --crust: var(--ac-light-crust);
    --surface0: var(--ac-light-surface0);
    --surface1: var(--ac-light-surface1);
    --surface2: var(--ac-light-surface2);
    --text: var(--ac-light-text);
    --subtext: var(--ac-light-subtext);
    --overlay: var(--ac-light-overlay);
    --mauve: var(--ac-light-mauve);
    --blue: var(--ac-light-blue);
    --sapphire: var(--ac-light-sapphire);
    --green: var(--ac-light-green);
    --red: var(--ac-light-red);
    --peach: var(--ac-light-peach);
    --yellow: var(--ac-light-yellow);
    --teal: var(--ac-light-teal);
    --pink: var(--ac-light-pink);
    --on-accent: var(--ac-light-on-accent);
    --link: var(--ac-light-link);
    --link-hover: var(--ac-light-link-hover);
    --code-accent: var(--ac-light-code-accent);
    --attention: var(--ac-light-attention);
    --tick: var(--ac-light-tick);
    --step-accent: var(--ac-light-step-accent);
    /* --ink-on-teal is palette-independent, so it is NOT redefined here. That
       is deliberate: the two light paths — an explicit [data-theme="light"] and
       this one, for a visitor with no stored preference — used to disagree
       about the primary button's ink, one of them at 3.74:1. A single value
       cannot drift between them. */
  }
}

/* ------------------------------------------------------------------ reset-ish */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { line-height: 1.15; margin: 0; font-weight: 640; letter-spacing: -0.021em; }
p { margin: 0; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
code, pre, kbd { font-family: var(--mono); font-size: 0.9em; }
code { background: var(--mantle); border: 1px solid var(--surface0); border-radius: 5px; padding: 0.1em 0.35em; }
pre { background: var(--mantle); border: 1px solid var(--surface0); border-radius: var(--radius-sm); padding: 1rem; overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Buttons get a two-layer ring instead: a bare outline vanishes against the
   button's own fill. The transparent outline is not dead code — it is
   what forced-colors mode replaces with a visible rectangle. */
.btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--base), 0 0 0 4px var(--teal);
}

/* The header is sticky, so anything an in-page link targets needs to clear it. */
:target, h2[id], h3[id], .panel { scroll-margin-top: 5rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.narrow { max-width: 62ch; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  background: var(--teal); color: var(--ink-on-teal);
  padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; }

.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;
}

/* --------------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Solid, not glass. Depth on this site comes from spacing and contrast; a
     saturating blur over scrolling content is the effect it does not need. */
  background: var(--mantle);
  border-bottom: 1px solid var(--crust);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font-weight: 660; letter-spacing: -0.02em; }
.brand:hover { color: var(--text); }
/* Two marks, one visible. The midnight tile is a black square on a light page,
   so the dawn variant — drawn for light surfaces — takes over there. Keyed on
   all three theme states: an explicit choice in either direction, and the OS
   preference for a visitor who has chosen nothing. */
.logo { width: 28px; height: 28px; flex: none; border-radius: 7px; }
.logo--dawn { display: none; }
:root[data-theme="light"] .logo--midnight { display: none; }
:root[data-theme="light"] .logo--dawn { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .logo--midnight { display: none; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .logo--dawn { display: block; }
}

.site-nav { margin-left: auto; min-width: 0; }
.site-nav ul { display: flex; gap: 0.25rem; list-style: none; overflow-x: auto; scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a {
  display: block; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--subtext); text-decoration: none; font-size: var(--fs-md); white-space: nowrap;
}
.site-nav a:hover { color: var(--text); background: var(--surface0); }

.theme-toggle {
  flex: none; background: transparent; border: 1px solid var(--surface1); color: var(--subtext);
  border-radius: var(--radius-sm); padding: 0.35rem 0.7rem; font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--surface2); }

/* ----------------------------------------------------------------- hero/select */

.hero { padding-top: clamp(2rem, 6vw, 3.5rem); padding-bottom: var(--sp-4); }
.hero-top {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.75rem);
  align-items: center;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .hero-top { grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr); }
}
.hero-eyebrow {
  color: var(--overlay); font-size: var(--fs-sm); letter-spacing: 0.01em;
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
  max-width: 60ch;
}

/* The headline pair. The eyebrow above names the CLIs; this says what the product does
   for someone who has never heard of it, before the persona selector asks them to
   self-identify — you cannot pick "which of these is me" for a thing you cannot describe. */
.hero-headline {
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-4);
  max-width: 18ch;
  text-wrap: balance;
}
.hero-sub {
  color: var(--subtext);
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 var(--gap-hero);
  text-wrap: pretty;
}

/* The three things a first-time visitor has to understand. Each is a checkable claim,
   so each gets equal weight — one accent dot each, same size, no "real" one. A single
   column until 760px: three columns of prose at 380px is three columns of one word,
   and two columns of three items leaves an orphan hole. */
.hero-claims {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 760px) {
  .hero-claims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hero-claims li {
  border: 1px solid var(--surface0);
  border-radius: var(--radius);
  background: var(--mantle);
  padding: 1rem 1.1rem;
}
.hero-claims b {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}
.hero-claims b::before {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--claim-accent, var(--teal)); transform: translateY(-1px);
}
/* Three dots, three meanings, in the order the pillars are written:
   teal = the system doing the work, amber = a decision waiting on you,
   slate = plain explanation. Not three colours for variety. */
.hero-claims li:nth-child(1) { --claim-accent: var(--teal); }
.hero-claims li:nth-child(2) { --claim-accent: var(--attention); }
.hero-claims li:nth-child(3) { --claim-accent: var(--subtext); }
.hero-claims span {
  display: block;
  color: var(--subtext);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* The two calls to action. Side by side at equal height, with the secondary as a ghost:
   "explore" is the honest first click for most visitors, so it must not look like a
   consolation prize next to the buy button. Wraps rather than shrinks on narrow screens —
   a 40px-wide button is not a button. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.hero-cta .btn { padding: 0.72rem 1.4rem; font-size: var(--fs-base); }
/* A fact beside the action, never a dead button in its place. Slate, not amber:
   "not on sale yet" is information about us, not a decision waiting on you. */
.status-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem; border: 1px solid var(--surface1);
  border-radius: var(--radius-sm); color: var(--subtext); font-size: var(--fs-sm);
  background: var(--mantle);
}
.status-badge::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--overlay); flex: none;
}
.hero-cta-note {
  color: var(--overlay);
  font-size: var(--fs-sm);
  margin: 0 0 var(--gap-hero);
  max-width: 58ch;
}

/* The named-CLI strip. Three CLIs by name is a more concrete signal than "works with AI
   agents", and the list is a fact from build/config.mjs, not a sentence anyone can widen. */
.cli-strip {
  margin-bottom: var(--gap-hero);
  padding: var(--pad-card);
  border: 1px solid var(--surface0);
  border-radius: var(--radius);
  background: var(--mantle);
}
.cli-strip-label {
  font-size: var(--fs-xs); font-weight: 660; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--subtext);
}
.cli-list { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin-top: 0.7rem; }
.cli {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--surface1); background: var(--base);
}
.cli-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
/* Overrides the global <code> chrome: inside a pill it would be a box in a box. */
.cli-cmd { background: none; border: 0; padding: 0; color: var(--code-accent); font-size: var(--fs-xs); }
.cli-strip-note { margin-top: 0.7rem; color: var(--overlay); font-size: var(--fs-sm); max-width: 62ch; }

.selector { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.selector-h {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 620; color: var(--text); margin-bottom: 0.3rem;
}
.selector-intro { color: var(--subtext); font-size: var(--fs-md); margin-bottom: var(--sp-4); max-width: 62ch; }

/* max-width + min-width:0 stop a nowrap chip row from stretching its container and pushing
   the whole page sideways. Without them the row is as wide as its widest item and only
   body{overflow-x:hidden} hides the damage. */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; max-width: 100%; min-width: 0; margin-top: 1rem; }
.chip {
  display: inline-block; flex: 0 0 auto; padding: 0.42rem 0.85rem;
  border: 1px solid var(--surface1); border-radius: 999px;
  background: var(--mantle); color: var(--subtext);
  text-decoration: none; font-size: var(--fs-md); white-space: nowrap;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.chip:hover { color: var(--text); border-color: var(--surface2); background: var(--surface0); }
.chip[aria-current="true"] {
  background: var(--surface0); color: var(--text);
  border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal);
  font-weight: 600;
}

/* On a phone, ten wrapping chips fill the whole first screen and the pitch never appears.
   One scrolling row keeps the selector to a single compact line and puts the headline back
   near the fold. Everything stays a link, so tab order is unchanged. */
@media (max-width: 640px) {
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    scroll-snap-type: x proximity;
    /* Fade the right edge so it reads as "there is more this way". */
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------------- panel */

.panels { position: relative; }
.panel[hidden] { display: none; }
.panel:focus { outline: none; }
.panel:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }

.panel-lead {
  display: grid; gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: start;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 940px) {
  .panel-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
}

.eyebrow { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.eyebrow-persona {
  color: var(--subtext); font-size: var(--fs-xs); font-weight: 660;
  letter-spacing: 0.055em; text-transform: uppercase;
}

.headline {
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  letter-spacing: -0.03em; font-weight: 680;
  line-height: 1.08;
  text-wrap: balance;
}
.sub {
  margin-top: var(--sp-4); color: var(--subtext);
  font-size: var(--fs-lede); max-width: 54ch;
  text-wrap: pretty;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-5); align-items: center; }
.cta-note { margin-top: 0.7rem; color: var(--overlay); font-size: var(--fs-sm); max-width: 52ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.62rem 1.15rem; border-radius: var(--radius-sm);
  font-size: var(--fs-md); font-weight: 620; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: filter 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
/* ONE rule, ONE ink, both light paths. --teal is already the per-palette fill
   (light overrides it above), and --ink-on-teal clears AA on both fills — so
   there is no theme-keyed override to disagree with the media-query path, and
   no hex in this file. The override this replaced put #ffffff on light teal at
   3.74:1, while the media-query path kept the accessible ink. */
.btn--primary { background: var(--teal); color: var(--ink-on-teal); }
.btn--primary:hover { filter: brightness(1.08); color: var(--ink-on-teal); }
:root[data-theme="light"] .btn--primary:hover { filter: brightness(0.94); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .btn--primary:hover { filter: brightness(0.94); }
}
.btn--ghost { background: transparent; color: var(--text); border-color: var(--surface1); }
.btn--ghost:hover { background: var(--surface0); border-color: var(--surface2); color: var(--text); }
.btn--disabled { background: var(--surface0); color: var(--overlay); cursor: not-allowed; border-color: var(--surface1); }
.btn-note { color: var(--overlay); font-size: var(--fs-sm); }

/* Closing call to action section */
.section--closing-cta {
  margin-top: var(--gap-section);
  margin-bottom: var(--gap-section);
  padding: clamp(2rem, 5vw, 3.25rem);
  border: 1px solid var(--surface0);
  border-radius: var(--radius);
  background: var(--mantle);
}
.section--closing-cta h2 {
  font-size: var(--fs-h2);
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.02em;
}
.section--closing-cta .section-sub {
  color: var(--subtext);
  font-size: var(--fs-lg);
  max-width: 56ch;
  margin: 0 0 var(--sp-4);
  line-height: 1.45;
}
.section--closing-cta .cta-row {
  margin-top: 0;
}

/* ------------------------------------------------------------------ audiences */

/* The three priority audiences, immediately under the trust pillars. Cards,
   because each is a distinct proof point with its own page behind it — not
   because every paragraph gets a box. Three across at desktop; the measure
   inside each stays short enough to scan in one pass. */
.section--audiences { border-top: 1px solid var(--crust); }
.audiences {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.audience {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: var(--sp-5);
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: var(--radius);
}
.audience-name {
  font-size: var(--fs-xs); font-weight: 660; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--subtext);
}
.audience-pitch {
  font-size: var(--fs-lg); font-weight: 620; letter-spacing: -0.015em;
  line-height: 1.28; color: var(--text); max-width: 26ch;
  text-wrap: pretty;
}
.audience-job { color: var(--subtext); font-size: var(--fs-md); line-height: 1.5; }
.audience-link {
  margin-top: auto; align-self: start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-md); font-weight: 620; text-decoration: none;
}
.audience-link:hover { text-decoration: underline; }
.audience-arrow { transition: transform 0.12s ease; }
.audience-link:hover .audience-arrow { transform: translateX(2px); }
.audiences-more { margin-top: var(--sp-4); font-size: var(--fs-md); }

/* notes: the honesty furniture. Never decorative. */
.note {
  margin-top: var(--sp-5); padding: var(--pad-card);
  border-radius: var(--radius-sm); border: 1px solid var(--surface1);
  background: var(--mantle); font-size: var(--fs-md); color: var(--subtext);
  border-left-width: 3px;
}
.note p + p { margin-top: 0.5rem; }
.note-title { font-weight: 640; color: var(--text); }
.note strong { color: var(--text); }
/* Amber earns its place here: a caveat IS the boundary being stated. */
.note--caveat { border-left-color: var(--attention); }
.note--stop { border-left-color: var(--red); }
.note--warn { border-left-color: var(--yellow); }
.note--info { border-left-color: var(--blue); }

/* proof shot */
.proof { margin: 0; }
.proof img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--surface1); box-shadow: var(--shadow-2);
}
.proof figcaption { margin-top: 0.7rem; color: var(--overlay); font-size: var(--fs-sm); }
.proof--pending .proof-frame {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px dashed var(--surface1); background: var(--mantle);
}
.pf-bg { fill: var(--mantle); }
.pf-bar { fill: var(--crust); }
.pf-rail { fill: var(--crust); }
.pf-dot { fill: var(--surface1); }
.pf-dot--a { fill: color-mix(in srgb, var(--red) 55%, var(--surface1)); }
.pf-dot--b { fill: color-mix(in srgb, var(--yellow) 55%, var(--surface1)); }
.pf-dot--c { fill: color-mix(in srgb, var(--green) 55%, var(--surface1)); }
.pf-line { fill: var(--surface0); }
.pf-line--accent { fill: color-mix(in srgb, var(--teal) 45%, var(--surface0)); }
.pf-card { fill: var(--base); stroke: var(--surface0); }
.proof-pending-label {
  display: inline-block; margin-right: 0.4rem;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--attention); border: 1px solid color-mix(in srgb, var(--attention) 40%, var(--surface1));
  border-radius: 4px; padding: 0.05rem 0.35rem;
}

/* panel sections */
.panel-h2 {
  font-size: var(--fs-xs); font-weight: 660; letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--subtext); margin-bottom: 0.9rem;
}
.panel-h2--quiet { color: var(--overlay); }
.panel-agents, .panel-needs, .panel-limits { padding-block: clamp(1.25rem, 3vw, 1.9rem); border-top: 1px solid var(--crust); }

.agent-grid { display: grid; gap: var(--sp-3); list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.agent-card {
  background: var(--mantle); border: 1px solid var(--surface0);
  border-radius: var(--radius); padding: var(--pad-card);
}
.agent-name { font-size: var(--fs-base); font-weight: 640; }
.agent-when {
  margin-top: 0.2rem; color: var(--code-accent); font-family: var(--mono);
  font-size: var(--fs-xs); letter-spacing: 0.01em;
}
.agent-proves { margin-top: 0.65rem; color: var(--subtext); font-size: var(--fs-md); }
.panel-foot { margin-top: 0.9rem; color: var(--overlay); font-size: var(--fs-sm); }

.tick-list, .limit-list { list-style: none; display: grid; gap: var(--sp-2); }
.tick-list li, .limit-list li { position: relative; padding-left: 1.5rem; color: var(--subtext); font-size: var(--fs-md); }
/* A drawn check, not a bullet: two borders of a rotated box. Reads as "included"
   at a glance and needs no glyph a screen reader would announce. */
.tick-list li::before {
  content: ""; position: absolute; left: 0.08rem; top: 0.48em;
  width: 0.6rem; height: 0.32rem;
  border-left: 2px solid var(--tick); border-bottom: 2px solid var(--tick);
  transform: rotate(-45deg);
}
.limit-list li::before {
  content: "—"; position: absolute; left: 0; top: 0; color: var(--overlay);
}

/* -------------------------------------------------------------------- sections */

.section { padding-block: clamp(2rem, 5vw, 3.25rem); border-top: 1px solid var(--crust); }
.section:first-child { border-top: 0; }
.section-h { font-size: var(--fs-h2); letter-spacing: -0.025em; text-wrap: balance; }
.section-intro { margin-top: 0.7rem; color: var(--subtext); max-width: 62ch; }
.section-h + .steps, .section-h + .features, .section-h + .faq, .section-h + .plans,
.section-intro + .steps, .section-intro + .features, .section-intro + .faq, .section-intro + .plans,
.section-h + .table-scroll, .section-intro + .table-scroll { margin-top: var(--sp-5); }

.steps { list-style: none; display: grid; gap: var(--sp-4); counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } }
.step { display: flex; gap: 0.85rem; align-items: flex-start; }
.step-n {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface0); color: var(--step-accent); border: 1px solid var(--surface1);
}
.step h3 { font-size: var(--fs-base); }
.step p { margin-top: 0.3rem; color: var(--subtext); font-size: var(--fs-md); }

.features { list-style: none; display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.feature { background: var(--mantle); border: 1px solid var(--surface0); border-radius: var(--radius); padding: var(--pad-card); }
.feature h3 { font-size: var(--fs-base); }
.feature-body { margin-top: 0.45rem; color: var(--subtext); font-size: var(--fs-md); }
.feature-body p + p { margin-top: 0.6rem; }
/* Bold lead-ins ("**Overnight:** …") are the scan path through a card grid. */
.feature-body strong { color: var(--text); }
.feature-note { margin-top: 0.6rem; color: var(--overlay); font-size: var(--fs-sm); }

.faq { display: grid; gap: var(--sp-2); }
.faq-item { background: var(--mantle); border: 1px solid var(--surface0); border-radius: var(--radius-sm); }
.faq-item summary {
  cursor: pointer; padding: 0.85rem 1.15rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--overlay); font-weight: 400; font-size: 1.2rem; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .prose { padding: 0 1.15rem 1rem; color: var(--subtext); font-size: var(--fs-md); }

.pull { margin: 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--mauve); background: var(--mantle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pull p { font-size: var(--fs-lg); }
.pull cite { display: block; margin-top: 0.6rem; color: var(--overlay); font-style: normal; font-size: var(--fs-sm); }

table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--crust); vertical-align: top; }
th { color: var(--subtext); font-weight: 620; font-size: var(--fs-sm); }
tbody th { color: var(--text); }

/* plans — the Free/Pro pair. Free renders first because Pro's copy says "everything
   above", so the featured treatment is visual weight on Pro, never a reorder. */
.plans { list-style: none; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.plan {
  background: var(--mantle); border: 1px solid var(--surface0); border-radius: var(--radius);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: 0.85rem;
}
/* Side by side, the cards' rows line up — name with name, price with price, list with
   list — so the CTAs sit level and the pair reads as one comparison. Each card has the
   same six children (name, price, summary, list, cta, note); browsers without subgrid
   keep the flex fallback above. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 720px) {
    .plans > .plan { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0.85rem; align-content: start; }
  }
}
/* Weight from an edge and a shadow, not a gradient wash. Violet is the site's
   one restrained secondary accent and this is where it is spent. */
.plan--featured {
  border-color: color-mix(in srgb, var(--mauve) 70%, var(--surface0));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mauve) 40%, transparent), var(--shadow-2);
}
.plan-name { font-size: var(--fs-lg); }
.plan-price {
  font-size: clamp(2.1rem, 4vw, 2.5rem); font-weight: 720; letter-spacing: -0.03em;
  line-height: 1; font-variant-numeric: tabular-nums lining-nums;
}
.plan-period { font-size: var(--fs-sm); font-weight: 500; color: var(--overlay); margin-left: 0.45rem; letter-spacing: 0; }
.plan-summary { color: var(--subtext); font-size: var(--fs-md); }
.plan .tick-list { flex: 1; align-content: start; }
.plan-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-cta .btn { flex: 1 1 auto; }
/* Pre-sale, the paid card stacks its status chip over the one thing that is
   clickable (the route to the free tier), rather than squeezing them side by
   side: the chip is information, the button is the action. */
.plan-cta .btn--disabled { flex-basis: 100%; }
.plan-note { color: var(--overlay); font-size: var(--fs-sm); }

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

.page-head { padding-top: clamp(2rem, 5vw, 3.25rem); padding-bottom: 0.5rem; }
.page-head h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; text-wrap: balance; }
.page-sub { margin-top: 0.8rem; color: var(--subtext); max-width: 58ch; font-size: var(--fs-lg); }
.empty { color: var(--overlay); padding-block: var(--sp-6); }

/* 50-65 characters of body copy. `ch` is the width of a "0", which in a
   proportional face runs a little wide of the average glyph, so 62ch lands
   inside the band rather than at the top of it. */
.prose { max-width: 62ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--fs-xl); margin-top: 2.25rem; letter-spacing: -0.02em; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.75rem; }
.prose p, .prose li { color: var(--subtext); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose blockquote { border-left: 3px solid var(--surface1); padding-left: 1rem; color: var(--overlay); }
.prose hr { border: 0; border-top: 1px solid var(--crust); }
.prose strong { color: var(--text); }
.page-404 { padding-block: clamp(3rem, 10vw, 6rem); }

/* ------------------------------------------------------------- use-cases page */

/* Five trade groups on one long page. Two landmarks stop it reading as a wall of
   uniform cards: a jump nav under the page head, and a coloured keyline on each
   group's heading. Pills and keylines are matched BY ID, not by position, so a
   reordered or added group degrades to the neutral fallback instead of lying. */
.jump-nav { padding-block: 0.25rem 0.5rem; }
.jump-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.jump-nav a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.9rem; border: 1px solid var(--surface1); border-radius: 999px;
  background: var(--mantle); color: var(--subtext);
  text-decoration: none; font-size: var(--fs-md); white-space: nowrap;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.jump-nav a::before {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--group-accent, var(--overlay));
}
.jump-nav a:hover { color: var(--text); border-color: var(--surface2); background: var(--surface0); }

/* The five per-group hues that used to live here are gone: one of them spent
   amber on "People who keep things running", which on this site means a
   decision is waiting. The dot and the keyline fall back to slate, which is
   what a section marker should be. */

.page-usecases .section:has(> .features) > .section-h {
  padding-left: 0.95rem;
  border-left: 4px solid var(--group-accent, var(--surface2));
}

/* docs */
.docs-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: 4rem; }
@media (min-width: 900px) { .docs-layout { grid-template-columns: 210px minmax(0, 1fr); } }
.docs-nav { font-size: var(--fs-md); }
@media (min-width: 900px) { .docs-nav { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; } }
.docs-group { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--overlay); margin: 1.25rem 0 0.4rem; font-weight: 660; }
.docs-group:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; display: grid; gap: 0.1rem; }
.docs-nav a { display: block; padding: 0.3rem 0.6rem; border-radius: 6px; color: var(--subtext); text-decoration: none; }
.docs-nav a:hover { background: var(--surface0); color: var(--text); }
.docs-nav a[aria-current="page"] { background: var(--surface0); color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--teal); }
.doc-cards { list-style: none; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.doc-card { display: block; padding: var(--pad-card); background: var(--mantle); border: 1px solid var(--surface0); border-radius: var(--radius); text-decoration: none; }
.doc-card:hover { border-color: var(--surface2); }
.doc-card-t { display: block; color: var(--text); font-weight: 620; }
.doc-card-s { display: block; margin-top: 0.3rem; color: var(--subtext); font-size: var(--fs-md); }
.toc { background: var(--mantle); border: 1px solid var(--surface0); border-radius: var(--radius-sm); padding: var(--pad-card); margin-bottom: var(--sp-5); }
.toc-h { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--overlay); font-weight: 660; margin-bottom: 0.4rem; }
.toc ul { list-style: none; display: grid; gap: 0.2rem; font-size: var(--fs-md); }
.changelog h2 { padding-top: var(--sp-5); border-top: 1px solid var(--crust); }

/* --------------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--crust); background: var(--mantle); margin-top: clamp(3rem, 8vw, 4.5rem); }
.footer-inner { display: grid; gap: var(--sp-6) var(--sp-5); padding-block: var(--sp-6) 2.5rem; }
@media (min-width: 760px) {
  .footer-inner { grid-template-columns: 1.2fr 1.2fr 1fr; }
  .footer-meta { text-align: right; justify-self: end; }
}
.footer-name { font-weight: 660; }
.footer-claim { color: var(--overlay); font-size: var(--fs-md); margin-top: 0.35rem; max-width: 32ch; line-height: 1.5; }
/* Two columns: eight stacked links read as a chore, two short columns read as a map. */
.footer-nav ul {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1.25rem; font-size: var(--fs-md); max-width: 24rem;
}
.footer-nav a { color: var(--subtext); text-decoration: none; }
.footer-nav a:hover { color: var(--text); text-decoration: underline; }
.footer-meta { color: var(--overlay); font-size: var(--fs-sm); display: grid; gap: 0.4rem; align-content: start; }
.footer-copy { color: var(--overlay); }

/* ---- optional media slots: hero demo poster + use-case group stills ---- */
.hero-poster { margin: 0; max-width: 900px; }
.hero-poster img,
.section-media img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--surface1); box-shadow: var(--shadow-2);
}
.hero-poster figcaption,
.section-media figcaption { margin-top: 0.7rem; color: var(--overlay); font-size: var(--fs-sm); }
.section-media { margin: 0 0 1.6rem; }

/* Generated-image honesty tag. Every mockup carries it until a real capture
   (`captured: true`) replaces it — the pending frame's rule, applied to the
   frames that DID get an image. */
.fig-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--overlay);
  border: 1px solid var(--surface1);
  border-radius: 4px;
  padding: 0 0.35rem;
  margin-right: 0.4rem;
  vertical-align: 1px;
}