/* ============================================================================
   heyCitation — design system
   ----------------------------------------------------------------------------
   Hard 1px rules, flat fills. NO border-radius (except score rings), NO shadows.
   Every measurement here comes from design-handoff.md / the prototype source.
   ========================================================================== */

/* ── Fonts (self-hosted; see fonts/) ─────────────────────────────────────── */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/anton-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Archivo ships as a variable font — one file covers 400–700. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Tokens ──────────────────────────────────────────────────────────────
   --accent is the one-variable re-skin hook. Change it here and the whole
   site re-skins: heading accents, buttons, stat numerals, rules, glyphs. */
:root{
  --paper:#F4F2EC;
  --ink:#12455C;
  --mut:#5F7C8A;
  --accent:#E82CC7;

  --ok:#2E7A4F;          /* ✓, "Good"/"Maintain" verdicts, healthy bars */
  --warn:#B07C1F;        /* "Needs work"/"Medium" verdicts, mid rings   */
  --track:#E4E0D4;       /* score-ring remainder, small bar tracks      */
  --dot:#CFCBBD;         /* inactive slider dot                          */

  /* Two barely-there shifts off --paper, the only surfaces that aren't paper.
     They keep the hero's three-layer stack readable — sunk rail, page, raised
     panel — without touching the flat-fill rule. Nothing else uses them. */
  --surface:#FFFDF7;       /* raised: the hero sample-answer panel */
  --surface-sunk:#EFEDE5;  /* sunk: the hero engine rail           */

  --rule-dark:rgba(244,242,236,.35);   /* borders inside dark bands */
  --body-dark:rgba(244,242,236,.85);
  --label-dark:rgba(244,242,236,.6);

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Anton',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad-x:32px;
  --col:1240px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

a{color:var(--ink)}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--paper)}

img{max-width:100%}

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

.sr-only{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:-9999px;top:0;z-index:100;background:var(--ink);
  color:var(--paper);padding:12px 20px;font-weight:600;font-size:14px}
.skip-link:focus{left:0;color:var(--paper)}

/* ── Layout skeleton ─────────────────────────────────────────────────────── */
.band{padding:88px var(--pad-x);border-bottom:1px solid var(--ink)}
.band--hero{padding:80px var(--pad-x) 56px}
.band--hero-tall{padding:80px var(--pad-x) 64px}
.band--dark{padding:96px var(--pad-x);background:var(--ink);color:var(--paper)}
.band--cta{padding:104px var(--pad-x)}
.band--flush{padding:0 var(--pad-x)}
.inner{max-width:var(--col);margin:0 auto}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:0 var(--pad-x);height:64px;
  background:var(--paper);border-bottom:1px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand img{height:36px;width:auto;display:block}

.nav{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:600}
.nav a{text-decoration:none}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:2px}

.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.btn-header{
  text-decoration:none;background:var(--ink);color:var(--paper);
  font-size:14px;font-weight:600;padding:10px 20px;white-space:nowrap;
  border:1px solid var(--ink);
}
.btn-header:hover{background:var(--accent);color:var(--ink)}

/* Mobile menu toggle — hidden on desktop, revealed at <=900px */
.nav-toggle{
  display:none;width:44px;height:44px;padding:0;flex:none;
  background:transparent;border:1px solid var(--ink);color:var(--ink);
  align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle:hover{background:var(--ink);color:var(--paper)}
.nav-toggle span{display:block;width:18px;height:1px;background:currentColor;position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:18px;height:1px;background:currentColor}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ── Recurring patterns ──────────────────────────────────────────────────── */

/* 1 · Eyebrow */
.eyebrow{
  margin:0;display:flex;gap:12px;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);
}
.eyebrow::before{content:'';width:10px;height:10px;background:var(--accent);flex:none}
.band--dark .eyebrow{color:var(--label-dark)}

/* 2 · Display headings */
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0}
.h1{font-size:clamp(58px,9vw,142px);line-height:.94;letter-spacing:.004em;
  text-wrap:balance;margin:28px 0 0}
.h1--md{font-size:clamp(52px,7.5vw,116px);line-height:.94;text-wrap:balance;margin:24px 0 0}
.h1--lg{font-size:clamp(56px,9vw,140px);line-height:.94;text-wrap:balance;margin:24px 0 0}
.h2{font-size:clamp(38px,4.6vw,68px);line-height:.96;margin:20px 0 0}
.h2--cta{font-size:clamp(48px,7vw,110px);line-height:.94;margin:0}
.h2--cta-lg{font-size:clamp(52px,8vw,124px);line-height:.94;margin:0}
.h2--dark{font-size:clamp(44px,6vw,92px);line-height:.94;margin:20px 0 0}
.h2--dark-sm{font-size:clamp(38px,5vw,76px);line-height:.95;margin:20px 0 0}
.h2--dark-xs{font-size:clamp(36px,4.5vw,64px);line-height:.95;margin:20px 0 0}
.acc{color:var(--accent)}
.lead{max-width:520px;margin:0;font-size:19px;line-height:1.55}
.lead--wide{max-width:640px;margin:32px 0 0;font-size:19px;line-height:1.55}
.lead--mut{color:var(--mut)}

/* 3+4 · Buttons */
.btn{
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--ink);font-size:16px;padding:16px 26px;
  background:transparent;color:var(--ink);font-weight:600;
  font-family:inherit;cursor:pointer;
}
.btn--primary{background:var(--accent);color:var(--ink);font-weight:700}
.btn:hover{background:var(--ink);color:var(--paper)}
/* accent button sitting on a dark band: no ink border, inverts to paper */
.btn--on-dark{border-color:transparent;flex:none}
.btn--on-dark:hover{background:var(--paper);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* 5 · Mono chips */
.chip{font-family:var(--mono);font-size:13px;border:1px solid var(--ink);padding:10px 16px;
  display:inline-flex;align-items:center;gap:9px}
.chip--sm{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px}
.chip--md{font-size:13px;padding:8px 14px}
.chip--inv{background:var(--ink);color:var(--paper)}

/* 6 · Arrow bullet list */
.arrows{display:flex;flex-direction:column;gap:16px}
.arrow{margin:0;display:flex;gap:14px;align-items:baseline;line-height:1.5}
.arrow::before{content:attr(data-glyph);color:var(--accent);font-weight:700;flex:none}
.arrow--mut::before{color:var(--mut)}

/* 7 · Big stat */
.stat-n{font-family:var(--display);font-size:56px;line-height:1;color:var(--accent)}
.stat-n--lg{font-size:64px}

/* 8 · Inline text link */
.tlink{font-weight:600;font-size:15px;text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ── Gapless bordered grids ──────────────────────────────────────────────
   The prototype used `border-right` on each cell, which doubles or hangs a
   rule the moment the grid wraps. A 1px grid `gap` over an ink-filled
   container gives the identical shared-rule look and survives any wrap.

   ⚠ Every track minimum is wrapped in `min(Npx,100%)`. A bare
   `minmax(320px,1fr)` is a *floor*, not a suggestion: once the container is
   narrower than 320px the column keeps its 320px and pushes the whole page
   sideways instead of wrapping. `.inner` is 280px wide at a 320px viewport,
   so --300 and --320 both did exactly that. The min() lets the track
   collapse to the container below that width and is a no-op above it. */
.grid-box{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:1px;background:var(--ink);border:1px solid var(--ink);
}
.grid-box > *{background:var(--paper)}
.grid-box--260{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid-box--300{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-box--320{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
/* full-bleed strip: the band's own rules close the box, so drop the border */
.grid-box--bare{border:none}
.grid-box--dark{background:var(--rule-dark);border-color:var(--rule-dark)}
.grid-box--dark > *{background:var(--ink)}

/* ── Data tables (Home layers / Method layers / About principles) ────────── */
.rows{border-top:1px solid var(--ink)}
.row{border-bottom:1px solid var(--ink);display:grid;gap:24px}
.row--layer{grid-template-columns:80px 1fr 1.4fr;align-items:baseline;padding:22px 0}
.row--layer-x{grid-template-columns:80px 1.1fr 1.5fr;gap:28px;align-items:start;padding:34px 0}
.row--principle{grid-template-columns:80px 1fr 1.6fr;gap:28px;align-items:baseline;padding:28px 0}
.row-code{font-family:var(--mono);font-size:14px;color:var(--accent)}
.row-code--big{font-family:var(--display);font-size:34px;color:var(--accent);line-height:1}
.row-code--num{font-family:var(--display);font-size:28px;color:var(--accent)}
.row-name{font-family:var(--display);font-size:24px;text-transform:uppercase}
.row-name--lg{font-size:28px}
.row-q{color:var(--mut);line-height:1.5;margin:0}
.row-work{margin:0;line-height:1.55}
.microlabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.caption{margin:24px 0 0;font-family:var(--mono);font-size:13px;color:var(--mut)}
.band--dark .caption{color:rgba(244,242,236,.55)}

/* ── Home: engine hero ───────────────────────────────────────────────────
   Two columns — rotating headline + copy on the left, a sample-answer panel
   on the right. One piece of state (the active engine, see scripts/tcl.js)
   drives three things and nothing else: the headline mark, the headline
   name, and the panel's "· {engine}" label.

   The engine marks are <symbol>s defined once at the top of the page and
   pulled in with <use> into the headline. The paths carry no fill of their
   own, so .engine-word svg sets one — pinned to --ink, never --accent. */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:64px;align-items:start;
}

/* Smaller than .h1: this one lives in a column, not the full page width. The
   86px ceiling is not cosmetic — .inner stops growing at --col while a vw-only
   clamp doesn't, and past ~87px "WHEN A BUYER ASKS" no longer fits the left
   column on one line. Raise --col before raising this. */
.h1--engine{font-size:clamp(48px,6.4vw,86px);line-height:.9;letter-spacing:.005em;
  text-wrap:balance;margin:26px 0 0}
.h1--engine > span{display:block}
/* Same specificity as the rule above, so source order has to keep it last. */
.h1--engine > .hero-engine{display:flex;align-items:center;color:var(--accent)}

/* Only one .engine-word ever exists (see scripts/tcl.js); the animation
   restarts via a JS blank/reflow/restore on its inline style, not a class or
   a [hidden] toggle. */
@keyframes tcl-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.engine-word{display:flex;align-items:center;gap:.16em;animation:tcl-swap .4s ease}
/* Ink, NOT currentColor — the engine line around it is accent, and tinting a
   third-party mark into our brand colour is the one thing every one of these
   six vendors' brand guidelines forbids. The engine *name* stays accent: that
   is our type in our colour, not a modified logo. Don't "fix" this to match. */
.engine-word svg{width:.7em;height:.7em;display:block;flex:none;fill:var(--ink)}
.engine-comma{color:var(--ink);margin-left:-.05em}

.hero-copy{max-width:52ch;margin:30px 0 0;font-size:17px;line-height:1.62;
  color:color-mix(in srgb,var(--ink) 86%,var(--paper));text-wrap:pretty}

/* Sample-answer panel */
.hero-panel{border:1px solid var(--ink);background:var(--surface)}
.hero-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--ink);font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.hero-panel-body{padding:20px 18px 18px}
.hero-query{margin:0;font-family:var(--mono);font-size:14px;line-height:1.5}
@keyframes tcl-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero-caret{display:inline-block;width:8px;height:15px;background:var(--accent);
  vertical-align:-2px;margin-left:4px;animation:tcl-caret 1.1s step-end infinite}
.hero-panel-label{margin:22px 0 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
/* One .mention-stack per engine, only one un-hidden at a time. The 1px gaps
   over an ink backing are the same shared-hairline trick as .grid-box. */
.hero-mentions{margin-top:12px}
.mention-stack{display:flex;flex-direction:column;gap:1px;background:var(--ink)}
.mention-stack[hidden]{display:none}
.mention{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;
  padding:11px 12px;background:var(--surface)}
.mention-rank{font-family:var(--mono);font-size:12px;color:var(--mut)}
.mention-name{font-size:14px;font-weight:600}
.mention-tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mut)}
.mention--miss{background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}
.mention--miss .mention-rank,.mention--miss .mention-tag{color:var(--accent)}
.hero-note{margin:16px 0 0;font-family:var(--mono);font-size:11px;line-height:1.6;
  color:var(--mut)}
.hero-note a{color:var(--ink);font-weight:500;white-space:nowrap}

/* ── Home: query ticker ──────────────────────────────────────────────────── */
@keyframes tcl-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);
  border-bottom:1px solid var(--ink)}
.ticker-track{display:inline-flex;align-items:center;white-space:nowrap;
  padding:13px 0;font-family:var(--mono);font-size:13px;
  animation:tcl-tick 45s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-q{padding:0 22px}
.ticker-dot{width:8px;height:8px;background:var(--accent);display:inline-block;flex:none}

/* Pinned over the right end of the ticker, filled with the band's own ink so
   the track passes cleanly underneath. The JS sets animation-play-state inline
   only while paused, and clears it on resume, so the :hover rule above keeps
   working. Already 44px tall, so no ::after target extension needed. */
.motion-toggle{position:absolute;top:0;right:0;z-index:1;display:flex;align-items:center;
  gap:9px;height:100%;min-height:44px;min-width:44px;justify-content:center;
  padding:0 20px;border:0;border-left:1px solid var(--rule-dark);
  /* --body-dark, not the --label-dark the other mono captions on dark use: at
     11px this is normal-size text needing 4.5:1, and .6 alpha over ink measures
     4.43:1. .85 measures 7.15:1. A control added for accessibility failing
     contrast would be a poor joke. */
  background:var(--ink);color:var(--body-dark);font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.motion-toggle:hover,.motion-toggle:focus-visible{color:var(--paper)}
/* Two bars while running, a triangle once paused — both drawn with borders, so
   there's no glyph font or extra asset for six visible pixels. */
.motion-glyph{width:9px;height:11px;flex:none;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.motion-toggle.is-paused .motion-glyph{width:0;height:0;border:0;
  border-left:9px solid currentColor;border-top:6px solid transparent;
  border-bottom:6px solid transparent}
@media (max-width:520px){
  /* The label is the first thing to go; the glyph still names the action. */
  .motion-toggle{padding:0 14px}
  .motion-toggle span:not(.motion-glyph){position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ── Home: problem / stat cells ──────────────────────────────────────────── */
.cell{padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.cell-idx{font-family:var(--mono);font-size:13px;color:var(--accent)}
.cell h3{font-size:26px}
.cell p{margin:0;line-height:1.55;color:var(--mut)}
.cell-tag{font-family:var(--mono);font-size:12.5px;background:var(--ink);
  color:var(--paper);padding:8px 12px;align-self:flex-start}

.stat-cell{padding:36px 32px;display:flex;flex-direction:column;gap:8px}
.stat-cell p{margin:0;font-size:14.5px;line-height:1.5;color:var(--mut)}
/* Source line under a stat. Mono and quiet on purpose — the figure stays the
   loud thing; the point of the link is that the number is checkable, not that
   the citation is prominent. Sits on both light and dark stat bands. */
/* --ink, not the --mut the paragraph above it uses: at 12px this is normal-size
   text needing 4.5:1, and --mut on --paper measures 3.96:1. (That applies to
   every --mut-on-paper run on the site, not just this one — but a source link
   is the last place to ship a contrast failure.) The 12px mono keeps it quiet
   without leaning on colour to do it. */
.stat-src{align-self:flex-start;margin-top:4px;padding-bottom:1px;
  font-family:var(--mono);font-size:12px;line-height:1.45;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--track)}
.stat-src:hover,.stat-src:focus-visible{border-bottom-color:var(--accent)}
.band--dark .stat-src{color:var(--body-dark);border-bottom-color:var(--rule-dark)}
.band--dark .stat-src:hover,.band--dark .stat-src:focus-visible{
  color:var(--paper);border-bottom-color:var(--accent)}

.stat-note{border-top:1px solid var(--ink)}
.stat-note .inner{padding:12px var(--pad-x);display:flex;flex-wrap:wrap;gap:8px;
  justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--mut)}
.stat-note a{color:var(--ink);font-weight:500}

/* ── Home: how-it-works cards ────────────────────────────────────────────── */
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:20px;margin-top:48px}
.step{border:1px solid var(--ink);padding:26px 24px;display:flex;flex-direction:column;
  gap:12px;background:var(--paper)}
.step-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.step-num{font-family:var(--mono);font-size:13px;color:var(--accent)}
.step-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--ink);padding:4px 8px;white-space:nowrap}
.step h3{font-size:24px}
.step p{margin:0;line-height:1.5;color:var(--mut);font-size:15px}

/* ── Dark position band ──────────────────────────────────────────────────── */
.pos-cell{padding:36px 32px}
.pos-cell h3{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 24px;color:var(--label-dark)}

/* ── Home: booking band ──────────────────────────────────────────────────── */
.engine-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:32px;align-items:center}
.engine-label{font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.engine{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500}
.engine img{width:15px;height:15px;display:block}
.engine img[src*="openai"]{width:19px;height:19px;margin:-3px}

.widget-frame{margin-top:36px;border:1px solid var(--ink);background:var(--paper);
  padding:0;max-width:760px}
.widget-frame iframe{border-radius:0 !important;display:block}
.widget-alt{margin:18px 0 0;font-size:15px}
.widget-alt a{font-weight:600}

/* ── Check page ──────────────────────────────────────────────────────────
   The AuditSpark widget and its "what to expect" notes share one bordered
   box, same 1px-gap trick as .grid-box. The widget iframe sizes its own
   height over postMessage, so the cell must not constrain it — only width. */
.spec-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.check-stage{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:40px;
}
.check-stage > *{background:var(--paper)}
.check-widget{min-width:0;padding:0}
.check-widget iframe{border-radius:0 !important;display:block;width:100% !important}
.check-aside{padding:32px 28px;display:flex;flex-direction:column;gap:20px}
.check-aside h3{font-family:var(--mono);font-weight:500;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:0}
.check-aside .arrow{font-size:15px;line-height:1.5;color:var(--mut)}
.check-aside .arrow b{color:var(--ink);font-weight:700}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.free-band{display:flex;flex-wrap:wrap;gap:24px;align-items:center;
  justify-content:space-between;padding:36px 0}
.free-title{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.free-title span{font-family:var(--display);font-size:34px;text-transform:uppercase}
.free-band p{margin:0;max-width:640px;line-height:1.5;color:rgba(244,242,236,.8)}

.plan{padding:38px 32px;display:flex;flex-direction:column;background:var(--paper)}
/* the tag hugs its text — as a flex child it would otherwise stretch full width */
.plan > .chip{align-self:flex-start}
.plan h2{font-size:32px;margin:22px 0 0}
.plan-price{display:flex;align-items:baseline;gap:8px;margin-top:14px;flex-wrap:wrap}
.plan-price b{font-family:var(--display);font-weight:400;font-size:52px;line-height:1;
  color:var(--accent)}
.plan-price span{font-family:var(--mono);font-size:13px;color:var(--mut)}
.plan > p{margin:18px 0 0;line-height:1.55;color:var(--mut);font-size:15px}
.plan-items{display:flex;flex-direction:column;gap:11px;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--ink)}
.plan-items .arrow{font-size:15px;line-height:1.45;gap:12px}
.footnote{margin:20px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--mut)}

.rule{padding:34px 30px;display:flex;gap:20px;align-items:baseline}
.rule-n{font-family:var(--display);font-size:44px;line-height:1;color:var(--accent);flex:none}
.rule h3{font-size:24px}
.rule p{margin:12px 0 0;line-height:1.55;color:var(--mut)}

/* ── Method: report slider ───────────────────────────────────────────────── */
.slider{margin-top:44px;border:1px solid var(--ink);background:var(--paper);overflow:hidden}
.slider-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%;display:flex;flex-wrap:wrap;align-items:stretch}
.slide-body{flex:1.05 1 300px;display:flex;flex-direction:column;
  padding:clamp(24px,4vw,40px);min-height:min(420px,60vw)}
.slide-idx{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  color:var(--mut);text-transform:uppercase}
.slide-body h3{font-size:clamp(24px,3vw,34px);line-height:1;margin:14px 0 0}
.slide-body > p{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--mut);
  text-wrap:pretty}
.slide-score{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.prio{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--ink);padding:5px 12px}

.ring{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex:none;
  background:conic-gradient(var(--ring-c) var(--ring-p),var(--track) 0)}
.ring > span{width:41px;height:41px;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.ring--sm{width:44px;height:44px}
.ring--sm > span{width:33px;height:33px;font-size:14px}

.slide-nav{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:12px}
.snav{width:38px;height:38px;border:1px solid var(--ink);font-size:16px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  position:relative;font-family:inherit}
.snav--prev{background:var(--paper);color:var(--ink)}
.snav--next{background:var(--ink);color:var(--paper)}
.snav:disabled{opacity:.35;cursor:default}
/* 44px touch target without changing the 38px visual */
.snav::after{content:'';position:absolute;inset:-3px}
.scount{font-family:var(--mono);font-size:12.5px;color:var(--mut);
  font-variant-numeric:tabular-nums}

.slide-art{flex:1 1 280px;border-left:1px solid var(--ink);display:flex;
  align-items:center;justify-content:center;padding:clamp(16px,3vw,28px);
  background-image:repeating-linear-gradient(-45deg,
    color-mix(in srgb,var(--accent) 10%,transparent) 0 1px,transparent 1px 11px)}

/* Sample report card */
.card{width:100%;max-width:360px;background:var(--paper);border:1px solid var(--ink);
  padding:18px 20px}
.card-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;
  border-bottom:1px solid var(--ink)}
.card-head .lbl{flex:1;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.13em;color:var(--mut);text-transform:uppercase}
.card-head .band-chip{font-family:var(--mono);font-size:10.5px;border:1px solid var(--ink);
  padding:4px 10px;flex:none}
.checks{display:flex;flex-direction:column;gap:9px;padding-top:12px;font-size:12.5px}
.checks div{display:flex;gap:8px;align-items:center}
.checks .y{color:var(--ok);font-weight:700;flex:none}
.checks .n{color:var(--accent);font-weight:700;flex:none}
.checks .o{color:var(--mut);flex:none}
.bars{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.bar{display:grid;grid-template-columns:104px 1fr 24px;gap:8px;align-items:center;
  font-size:11.5px}
.bar--narrow{grid-template-columns:104px 1fr 16px}
.bar > span:first-child{display:flex;align-items:center;gap:6px;min-width:0}
.bar img{width:13px;height:13px;flex:none}
.bar img[src*="openai"]{width:19px;height:19px;margin:-3px}
.bar-track{height:6px;background:var(--track)}
.bar-track > i{display:block;height:100%;background:var(--ink)}
.bar-track > i.accent{background:var(--accent)}
.bar-track > i.ok{background:var(--ok)}
.bar-track > i.warn{background:var(--warn)}
.bar > span:last-child{font-weight:600;text-align:right}
.bar-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--mut);
  text-transform:uppercase}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px}
.tile{border:1px solid var(--ink);padding:10px 12px}
.tile--bad{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--paper))}
.tile .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mut)}
.tile .v{font-size:18px;font-weight:700;margin-top:2px}
.tile .verdict{font-size:10.5px;font-weight:600;margin-top:1px}
.rec{display:flex;gap:9px;align-items:flex-start;margin-top:14px;background:var(--ink);
  padding:9px 11px}
.rec b{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.12em;
  color:var(--ink);background:var(--accent);padding:3px 9px;flex:none;margin-top:1px}
.rec span{font-size:11px;line-height:1.5;color:var(--paper)}

.slider-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-top:16px}
.dots{display:flex;gap:0}
/* The bar stays 8×8 with a 7px gap; the button around it is the touch target.
   Padding widens the target, and the -5px pull on every dot after the first
   cancels it back out so the visual gap is still 6+(-5)+6 = 7px. */
.dot{height:44px;padding:0 6px;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center}
.dot + .dot{margin-left:-5px}
.dot i{display:block;width:8px;height:8px;background:var(--dot);transition:all .3s}
.dot[aria-current="true"] i{width:22px;background:var(--ink)}
.disclaimer{font-family:var(--mono);font-size:12px;color:var(--mut)}

/* ── Method: share of voice table ────────────────────────────────────────── */
.sov{margin-top:44px;border:1px solid var(--ink);max-width:860px}
.sov-head,.sov-row{display:grid;grid-template-columns:1.2fr 2fr .6fr;gap:16px;
  border-bottom:1px solid var(--ink)}
.sov-head{padding:14px 24px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.sov-row{padding:16px 24px;align-items:center}
.sov-row.you > span:first-child{font-weight:700}
.sov-bar{height:18px;background:rgba(22,21,18,.08);position:relative}
.sov-bar > i{position:absolute;inset:0;background:var(--ink)}
.sov-row.you .sov-bar > i{background:var(--accent)}
.sov-n{font-family:var(--mono);font-size:14px;text-align:right}
.sov-foot{padding:12px 24px;font-family:var(--mono);font-size:12px;color:var(--mut)}
.sov-head > span:last-child,.sov-row > .sov-n{text-align:right}

/* ── Book: contact form ──────────────────────────────────────────────────
   Plain HTML form, no JS — Netlify Forms parses the deployed HTML directly,
   so this is the whole implementation. Inputs get the same 1px-ink, no-
   radius treatment as everything else; the keyboard focus ring comes free
   from the global :focus-visible rule. */
.form{display:flex;flex-direction:column;gap:26px;max-width:560px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.field input,.field textarea{
  font-family:var(--sans);font-size:16px;padding:14px 16px;
  border:1px solid var(--ink);border-radius:0;background:var(--paper);
  color:var(--ink);appearance:none;
}
.field textarea{resize:vertical;min-height:140px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--mut)}
.form-note{margin:0;font-size:14px;color:var(--mut)}

/* ── Resources: article prose ─────────────────────────────────────────────
   Long-form guide body copy. Nothing else on the site runs this long, so this
   is the one place that gets its own reading-width container instead of
   reusing .lead/.hero-copy. Same flat-fill, 1px-rule, no-radius language as
   everywhere else — a table is the only new primitive, and it borrows the
   .grid-box hairline look rather than inventing a second one. */
.prose{max-width:68ch;font-size:17px;line-height:1.65;color:var(--ink)}
.prose > * + *{margin-top:22px}
.prose h2{font-size:30px;line-height:1.1;margin-top:52px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;line-height:1.2;margin-top:34px}
.prose p{margin:0;text-wrap:pretty}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.prose li{line-height:1.55}
.prose strong{font-weight:700}
.prose a{font-weight:600;border-bottom:1px solid var(--accent);text-decoration:none}
.prose a:hover{color:var(--accent)}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:8px}
.prose th,.prose td{border:1px solid var(--ink);padding:10px 14px;text-align:left;vertical-align:top}
.prose th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);font-weight:500}

/* TL;DR / callout box — the .eyebrow label doubles as the box's own heading.
   Deliberately wider than the .prose column below it: it reads as an abstract
   sitting above the article, not as its first paragraph. The 860px cap is the
   handoff's table width, and it is load-bearing — without it the box stretches
   to the full 1240px .inner and a single summary paragraph gets line lengths
   no one wants to read. Wider than .prose, never full-bleed. */
.tldr{max-width:860px;border:1px solid var(--ink);padding:26px 28px;
  display:flex;flex-direction:column;gap:14px}
.tldr p{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}

/* Byline under the hero dek */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;
  font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.byline b{color:var(--ink);font-weight:600}
.byline-dot{width:4px;height:4px;background:var(--mut);flex:none}

/* Related-reading row at the foot of each guide */
.related{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:24px}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{padding:40px var(--pad-x);display:flex;flex-wrap:wrap;gap:24px;
  justify-content:space-between;align-items:center}
.site-footer img{height:30px;width:auto;display:block}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;font-weight:500}
.footer-nav a{text-decoration:none}
.footer-note{font-family:var(--mono);font-size:12px;color:var(--mut)}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   The layout is fluid first (clamp type, auto-fit grids, flex-wrap). These
   queries only fix the three things fluidity can't: the header at narrow
   widths, the fixed-column data tables, and the side-by-side slider panes.
   ═════════════════════════════════════════════════════════════════════════ */

/* Hero stacks. The only breakpoint outside the shared four, and it earns its
   keep: the panel's 320px minimum starves the headline column below ~1000px. */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .hero-copy{max-width:60ch}
}

/* Nav collapses to a menu button */
@media (max-width:900px){
  .nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--ink);
    padding:8px var(--pad-x) 16px;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--rule-soft,rgba(18,69,92,.15))}
  .nav a:last-child{border-bottom:none}
  .nav a[aria-current="page"]{border-bottom:1px solid rgba(18,69,92,.15);
    padding-bottom:14px}
  .nav-toggle{display:flex}

  /* Check page: the notes column drops below the widget rather than squeezing
     the iframe (the 1px gap turns into the dividing rule on its own) */
  .check-stage{grid-template-columns:1fr}
}

@media (max-width:760px){
  :root{--pad-x:20px}
  .band{padding:64px var(--pad-x)}
  .band--hero{padding:56px var(--pad-x) 44px}
  .band--hero-tall{padding:56px var(--pad-x) 48px}
  .band--dark{padding:72px var(--pad-x)}
  .band--cta{padding:76px var(--pad-x)}

  /* Fixed-column tables reflow to code | content, body below */
  .row--layer,.row--layer-x,.row--principle{
    grid-template-columns:52px 1fr;gap:10px 16px;padding:24px 0}
  .row--layer > :nth-child(3),
  .row--layer-x > :nth-child(3),
  .row--principle > :nth-child(3){grid-column:2}
  .row-code--big{font-size:28px}
  .row-name--lg{font-size:24px}

  /* Slider panes stack: the left rule becomes a top rule */
  .slide-art{border-left:none;border-top:1px solid var(--ink)}
  .slide-body{min-height:0}

  /* Share of voice: brand + count on one line, bar full width beneath */
  .sov-head{grid-template-columns:1fr auto;gap:8px 16px;padding:12px 18px}
  .sov-head > span:nth-child(2){display:none}
  .sov-row{grid-template-columns:1fr auto;gap:10px 16px;padding:14px 18px}
  .sov-row > .sov-bar{grid-column:1 / -1;order:3}
  .sov-foot{padding:12px 18px}

  .free-band{padding:28px 0}
  .plan{padding:30px 24px}
  .cell{padding:26px 22px}
  .stat-cell{padding:28px 24px}
  .rule{padding:28px 24px}
  .pos-cell{padding:28px 24px}
  .check-aside{padding:28px 24px}
}

@media (max-width:520px){
  .brand img{height:30px}
  .btn-header{padding:10px 14px}
  .btn{padding:14px 20px;font-size:15px}
  .btn-row .btn{flex:1 1 100%;justify-content:center}
  .h1{font-size:clamp(42px,12vw,58px)}
  .h1--md,.h1--lg{font-size:clamp(40px,11vw,56px)}
  /* 34px floor for the same reason as the 86px ceiling above: it's what keeps
     the first line unbroken down to a 320px viewport. */
  .h1--engine{font-size:clamp(34px,10.5vw,54px)}
  .hero-copy{font-size:16px}
  .hero-panel-body{padding:18px 14px 16px}
  .h2{font-size:clamp(32px,8.5vw,44px)}
  .h2--cta,.h2--cta-lg{font-size:clamp(38px,11vw,56px)}
  .h2--dark,.h2--dark-sm,.h2--dark-xs{font-size:clamp(34px,9.5vw,48px)}
  .lead,.lead--wide{font-size:17px}
  .stat-n{font-size:46px}
  .stat-n--lg{font-size:50px}
  .plan-price b{font-family:var(--display);font-size:44px}
  .free-title span{font-size:28px}
  .tiles{grid-template-columns:1fr}
  .bar,.bar--narrow{grid-template-columns:92px 1fr 22px}
  .engine-row{gap:10px 16px}
}

@media (max-width:380px){
  .brand img{height:26px}
  .btn-header{padding:9px 12px;font-size:13px}
  /* The guides' comparison tables are all three columns of prose, and three
     columns cannot honestly reflow into 280px — their min-content runs
     292–332px, so they pushed the page sideways at a 320px viewport. Below
     380px the table scrolls inside its own box instead. `display:block` is
     what makes the element a scroll container; it also means the table sizes
     to its content rather than filling the column, which is why this is
     scoped to the one breakpoint where the content is already wider than the
     column anyway. Nothing else on the site scrolls horizontally — that is
     the point, the page must not. */
  .prose table{display:block;overflow-x:auto}
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .ticker-track{animation:none;transform:none}
  .slider-track{transition:none}
  /* The blanket rule above would collapse these to their last keyframe — which
     for the caret is opacity:0, i.e. gone. Hold both at rest instead. The JS
     stops the engine rotation outright under the same query. */
  .hero-caret,.engine-word{animation:none;opacity:1}
  /* Nothing left for it to pause: the ticker is held above and the JS never
     starts the rotation under this query. */
  .motion-toggle{display:none}
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print{
  .site-header,.ticker,.nav-toggle,.slide-nav,.dots{display:none}
  .band,.band--dark{padding:24px 0;border-color:#000}
  .band--dark{background:#fff;color:#000}
}