/* ============================================================================
   SEO Autopilot — page-scoped stylesheet.

   This page loads THIS SHEET ONLY (plus fonts). It deliberately does not load
   base/layout/components/responsive.css: overriding a shared sheet from a page
   sheet produces specificity fights that silently cancel section padding. A
   clean slate is cheaper to reason about and cannot leak into the other 13 pages.

   ── The colour rule ────────────────────────────────────────────────────────
   Four colours, each meaning exactly one thing, applied everywhere without
   exception. The reader learns it in the proof strip and it holds for the
   whole page:

     --frozen   the baseline we took before touching anything. Colourless
                on purpose: the number that does not move has no opinion.
     --up       a figure that rose.
     --down     a figure that fell. Amber, shown, never hidden.
     --flat     a figure that did not move.

   --brand red is the logo and the primary action. Nothing else on this page
   is red, which is why the CTA is impossible to miss across 13,000px.
   ============================================================================ */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
/* `height: auto` is load-bearing: without it an HTML `height` attribute survives
   as a presentational hint and `object-fit: fill` distorts the image. */
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
table { border-collapse: collapse; width: 100%; }
code { font-family: var(--f-code); font-size: 0.9em; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Ground. Cool and slightly blue — instrument housing, not "dark mode". */
  --ink:      #090B0F;
  --ink-2:    #0D1117;
  --panel:    #12171E;
  --panel-2:  #171D26;
  --rule:     #1D242E;
  --rule-2:   #2B3441;

  /* Text */
  --fg:       #EEF1F5;
  --fg-2:     #A3ADBB;
  --fg-3:     #78828F;

  /* The measurement rule */
  --frozen:   #6B7583;   /* the mark: a tick or a rule. 3.9:1 on --panel, its worst ground */
  --frozen-tx:#7B8593;   /* the same idea set as text, lifted to clear 4.5:1 */
  --up:       #47A176;
  --down:     #D2922B;
  --flat:     #49515D;

  /* Brand — logo and primary action only */
  --brand:    #E8000D;
  --brand-hi: #FF2C38;

  /* Type */
  --f-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* The label role: same face, set as tracked small caps. Not a second family. */
  --f-mono:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-code:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-display: clamp(38px, 5.1vw, 74px);
  --t-h2:      clamp(28px, 3.3vw, 46px);
  --t-h3:      clamp(17.5px, 1.35vw, 20px);
  --t-lede:    clamp(16.5px, 1.25vw, 19px);
  --t-sm:      15px;
  --t-xs:      13.5px;
  --t-mono:    11.5px;

  /* Layout */
  --gut:   clamp(20px, 3.6vw, 44px);
  --maxw:  1280px;
  --gx:    clamp(24px, 3vw, 56px);
  --sec-y: clamp(64px, 7.4vw, 122px);

  --hdr:    68px;
  --subnav: 46px;
  --chrome: var(--hdr);          /* raised to include the sub-nav at >=1000px */

  --r:    4px;
  --r-lg: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1000px) {
  :root { --chrome: calc(var(--hdr) + var(--subnav)); }
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  overflow-x: clip;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Inter, at the two ends of its range. The gap between 800 display and 400 body
   is what carries the hierarchy here, since there is only one family to work with. */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--t-display); letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: var(--t-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.012em; line-height: 1.28; }

strong, b { font-weight: 600; color: var(--fg); }
em { font-style: italic; }

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

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

[id] { scroll-margin-top: calc(var(--chrome) + 28px); }

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

/* ── Container & sections ────────────────────────────────────────────────── */
.wrap { width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto; }

/* One selector owns section padding. Nothing else sets padding-block on .sec. */
.sec { padding-block: var(--sec-y); }
.sec--band { background: var(--ink-2); border-block: 1px solid var(--rule); }
.sec--tight { padding-block: calc(var(--sec-y) * 0.62); }

/* ── The tick ────────────────────────────────────────────────────────────────
   A 2px vertical rule. In a bar it marks the frozen baseline; before an eyebrow
   it says the same thing about the section. It is the page's one motif and it
   means something everywhere it appears. */
.eyebrow {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 2px; height: 13px; background: var(--frozen); flex: none; }

/* ── Section header — the same shape in every section ────────────────────── */
.sec-head { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: var(--gx); align-items: end; }
.sec-head--solo { grid-template-columns: minmax(0, 1fr); max-width: 62ch; }
.sec-head--top { align-items: start; }
.lede { color: var(--fg-2); font-size: var(--t-lede); line-height: 1.6; max-width: 58ch; }
.lede + .lede { margin-top: 1em; }
.prose { color: var(--fg-2); }
.prose p + p { margin-top: 1.05em; }
.note {
  font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.7; letter-spacing: 0.005em;
  color: var(--fg-3); max-width: 92ch;
}
.note strong { color: var(--fg-2); }
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
}

/* ── Split: sticky prose rail + evidence column ──────────────────────────────
   The old page put a short left column beside a tall right column with
   align-items:start, which left 300-400px voids at four points in the page.
   The rail is full height and its contents pin instead. */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--gx); }
.split__rail h2 { font-size: clamp(26px, 2.7vw, 37px); }
.split__rail > .rail-in { display: block; }
@media (min-width: 941px) and (min-height: 700px) {
  .split__rail > .rail-in { position: sticky; top: calc(var(--chrome) + 28px); }
}
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* ── Ruled rows — replaces ~40 bordered boxes ────────────────────────────── */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: 8px var(--gx); padding-block: 26px; border-bottom: 1px solid var(--rule);
}
.row > :first-child { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.row h3 { margin-bottom: 9px; }
.row p { color: var(--fg-2); }
.row p + p { margin-top: 0.9em; }
@media (max-width: 780px) { .row { grid-template-columns: 1fr; padding-block: 22px; } }

.rows--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gx); border-top: 1px solid var(--rule); }
.rows--two > .row2 { padding-block: 26px; border-bottom: 1px solid var(--rule); }
.rows--two h3 { margin-bottom: 8px; }
.rows--two p { color: var(--fg-2); font-size: var(--t-sm); }
@media (max-width: 820px) { .rows--two { grid-template-columns: 1fr; } }

.tag {
  display: inline-block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 3px 8px; white-space: nowrap;
}

/* ── Lists ───────────────────────────────────────────────────────────────── */
.list li {
  position: relative; padding-left: 24px; color: var(--fg-2);
  line-height: 1.65; padding-block: 5px;
}
.list li::before {
  content: ''; position: absolute; left: 0; top: 0.78em;
  width: 9px; height: 1px; background: var(--frozen);
}
.list--yes li::before { background: var(--up); height: 2px; top: 0.75em; }
.list--no li::before { background: var(--down); height: 2px; top: 0.75em; }

/* ── Buttons — mono, uppercase, and the only red on the page ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: var(--r);
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hi); }
.btn--ghost { border-color: var(--rule-2); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg-3); background: var(--panel); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 520px) { .btn { width: 100%; } .btn-row { flex-direction: column; } }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(9, 11, 15, 0.88);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--hdr); }
/* The logo is set to the same clamp the rest of the site uses (css/layout.css).
   The wrapper carries the 44px minimum: at the narrow end of the clamp the mark
   is only ~32px tall, and it is a link. */
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav-logo img { width: clamp(120px, 16vw, 200px); }
.nav-menu { display: flex; align-items: center; justify-content: flex-end; gap: 28px; flex: 1; }
.nav-links { display: flex; align-items: center; gap: 22px; }
/* A nav label is a name, not prose. "The System", "SEO Autopilot" and "Case
   Studies" were breaking across two lines between 1081 (where this page's
   burger ends) and 1199. This page never had the other two headers' faults —
   its burger already ran to 1080 and its logo never got crushed — so nowrap is
   the whole fix here. Measured after: no overflow at any width. */
.nav-links a {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3);
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.active { color: var(--fg); }
.nav-cta .btn { min-height: 40px; padding: 0 18px; font-size: 11.5px; }
.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--rule-2);
  border-radius: var(--r); align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 5px; }
.nav-toggle-bars span { display: block; width: 17px; height: 1.5px; background: currentColor; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.site-header.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none; position: absolute; top: calc(100% + 1px); left: var(--gut); right: var(--gut);
    background: rgba(9, 11, 15, 0.985); border: 1px solid var(--rule-2); border-radius: var(--r-lg);
    padding: 22px; flex-direction: column; align-items: stretch; gap: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  }
  .site-header.nav-open .nav-menu { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { padding-block: 12px; font-size: 13px; }
  .nav-cta .btn { width: 100%; min-height: 48px; }
}

/* ── Sub-nav — a 13,000px page needs a way through it ────────────────────── */
.subnav {
  position: sticky; top: var(--hdr); z-index: 90;
  background: rgba(9, 11, 15, 0.92);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}
.subnav-inner { display: flex; align-items: stretch; height: var(--subnav); }
.subnav a {
  display: inline-flex; align-items: center; padding: 0 15px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3);
  border-bottom: 1px solid transparent; transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.subnav a:first-child { padding-left: 0; }
.subnav a:hover { color: var(--fg-2); }
.subnav a[aria-current='true'] { color: var(--fg); border-bottom-color: var(--fg); }
@media (max-width: 999px) { .subnav { display: none; } }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(52px, 6vw, 96px); padding-bottom: clamp(56px, 6.5vw, 104px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); gap: clamp(36px, 4.5vw, 76px); align-items: center; }
.hero h1 { margin-bottom: 24px; }
.hero .lede { max-width: 46ch; }
.hero-price {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--t-sm); color: var(--fg-3);
}
.hero-price b { color: var(--fg); font-weight: 700; font-size: 17.5px; letter-spacing: -0.015em; }
.hero .btn-row { margin-top: 26px; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }

/* ── The readout — the instrument this product sells ─────────────────────── */
.mx {
  background: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 34px);
}
.mx-cap {
  display: block; line-height: 1.75;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-3);
  padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--rule);
}
.mx-cap b { color: var(--fg-2); font-weight: 500; }
.mx-set { display: grid; gap: 26px; }
.mx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 11px; }
.mx-name { font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-2); }
.mx-val { font-family: var(--f-mono); font-size: 13.5px; font-weight: 500; color: var(--frozen-tx); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-val i { font-style: normal; padding: 0 4px; color: var(--frozen-tx); }
.mx-val b { color: var(--up); font-weight: 600; }
.mx-track { position: relative; height: 11px; background: var(--panel-2); border: 1px solid var(--rule); border-radius: 2px; }
.mx-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); background: var(--up); border-radius: 1px; transform-origin: left center; }
/* The tick outruns the track top and bottom, and carries a 1px ground-coloured
   halo so it stays legible where the fill has passed it. */
.mx-tick {
  position: absolute; top: -5px; bottom: -5px; left: var(--b); width: 2px;
  background: var(--frozen); box-shadow: 0 0 0 1px var(--panel);
}
.mx-row--down .mx-fill { background: var(--down); }
.mx-row--down .mx-val b { color: var(--down); }
.mx-row--flat .mx-fill { background: var(--flat); }
.mx-row--flat .mx-val b { color: var(--frozen-tx); }
.mx-minor { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule); }
.mx-foot { font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--fg-3); margin-top: 20px; }

/* One orchestrated moment: each bar grows (or, for Performance, retracts) from
   its frozen tick to where it landed. Width is painted at final value so there
   is no layout shift; only transform animates. No JS, no motion preference, or
   a failed font load all leave the final state on screen. */
@media (prefers-reduced-motion: no-preference) {
  .js .mx .mx-fill { transform: scaleX(var(--f, 1)); }
  .js .mx.is-ready .mx-fill { transform: scaleX(1); transition: transform 0.85s var(--ease) var(--d, 0ms); }
}

/* ── Proof strip — where the colour rule teaches itself ──────────────────── */
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gx); }
.proof-fig {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -0.038em;
  color: var(--frozen-tx); font-variant-numeric: tabular-nums;
}
.proof-fig i { font-style: normal; padding: 0 0.14em; color: var(--frozen-tx); }
.proof-fig b { color: var(--up); font-weight: 800; }
.proof-desc { margin-top: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); line-height: 1.65; }
.proof-legend {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);
}
.proof-legend span { display: inline-flex; align-items: center; gap: 8px; }
.proof-legend i { width: 14px; height: 3px; border-radius: 1px; flex: none; }
.proof-legend i.k-frozen { background: var(--frozen); width: 2px; height: 13px; }
.proof-legend i.k-up { background: var(--up); }
.proof-legend i.k-down { background: var(--down); }
.proof-legend i.k-flat { background: var(--flat); }
@media (max-width: 820px) { .proof { grid-template-columns: 1fr; gap: 30px; } }

/* ── Statement band ──────────────────────────────────────────────────────── */
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gx); align-items: start; }
.statement h2 { font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.036em; }
.statement h2 .no { color: var(--down); }
@media (max-width: 900px) { .statement { grid-template-columns: 1fr; gap: 26px; } }

/* ── Timeline — a real sequence, so it is typed by day ───────────────────── */
.tl { border-top: 1px solid var(--rule); }
.tl-item {
  display: grid; grid-template-columns: 104px minmax(0, 0.38fr) minmax(0, 1fr);
  gap: 6px var(--gx); padding-block: 24px; border-bottom: 1px solid var(--rule);
}
.tl-day {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3); padding-top: 5px; white-space: nowrap;
}
.tl-item h3 { margin-bottom: 7px; }
.tl-item p { color: var(--fg-2); font-size: var(--t-sm); }
@media (min-width: 901px) { .tl-item h3 { margin-bottom: 0; } }
@media (max-width: 900px) { .tl-item { grid-template-columns: 1fr; gap: 8px; } .tl-day { padding-top: 0; } }

/* ── Caution — amber, because it is the honest-negative colour here ──────── */
.caution { border-left: 2px solid var(--down); padding: 4px 0 4px 26px; }
.caution h3 { margin-bottom: 12px; }
.caution p { color: var(--fg-2); font-size: var(--t-sm); }
.caution p + p { margin-top: 0.9em; }

/* ── The 13-category chart, rebuilt as markup ────────────────────────────────
   Was a hand-authored 640-unit SVG with a duplicate <table> for mobile. As
   markup it is selectable, scales without inflating its own type, needs no
   parallel fallback to keep in sync, and drops ~120 lines. */
.cat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 3.4vw, 60px); }
.cat-col h3 {
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--fg-2); padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-2); margin-bottom: 22px;
}
.cat { display: grid; gap: 9px; margin-bottom: 20px; }
.cat-h { display: flex; align-items: baseline; gap: 10px; }
.cat-n { font-size: var(--t-xs); font-weight: 500; color: var(--fg); }
.cat-w { font-family: var(--f-mono); font-size: 10.5px; color: var(--fg-3); }
.cat-v { margin-left: auto; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; color: var(--frozen-tx); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-v i { font-style: normal; padding: 0 3px; color: var(--frozen-tx); }
.cat-v b { color: var(--up); font-weight: 600; }
.cat--down .cat-v b { color: var(--down); }
.cat--flat .cat-v b { color: var(--fg-3); }
.cat--down .mx-fill { background: var(--down); }
.cat--flat .mx-fill { background: var(--flat); }
.cat .mx-track { height: 7px; }
.cat .mx-tick { top: -3px; bottom: -3px; box-shadow: 0 0 0 1px var(--ink-2); }
@media (max-width: 860px) { .cat-cols { grid-template-columns: 1fr; } }

/* ── The scorecard fragment ──────────────────────────────────────────────────
   Markup is generated by scripts/render_embed.py in the aglocom-autopilot-product
   repo and must stay byte-identical (audit_build.py fails on drift). The
   generator's contract is that the site owns the styling — so it is restyled
   here and not touched there. */
.sc { border: 1px solid var(--rule-2); border-radius: var(--r-lg); background: var(--panel); padding: clamp(24px, 3vw, 44px); }
.sc-scores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gx); padding-bottom: 30px; border-bottom: 1px solid var(--rule); }
.sc-score { display: flex; flex-direction: column; gap: 7px; }
.sc-k { font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-3); }
.sc-v {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(46px, 6.2vw, 78px); line-height: 0.94; letter-spacing: -0.042em;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.sc-m { font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.sc-up { color: var(--up); font-weight: 600; }
.sc-splits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gx); margin-top: 30px; }
.sc-split h4 {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--fg-3); margin: 0 0 18px;
}
.sc-f { display: flex; flex-direction: column; gap: 16px; }
.sc-f li { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 2px solid var(--rule-2); }
.sc-f-t { color: var(--fg); font-size: var(--t-sm); line-height: 1.45; }
.sc-f-m { font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; }
.sc-note { font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--fg-3); margin: 20px 0 0; }
.sc-foot { font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--fg-3); margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .sc-scores, .sc-splits { grid-template-columns: 1fr; } }

/* ── Screenshots ─────────────────────────────────────────────────────────────
   These are the product, so they get the full width of the container and one
   row each. Previously they sat in a `1fr 1fr` grid, which put a 1352px-wide
   WordPress admin on screen at ~570px: 42% scale, with the admin's 13px body
   text landing at about 5px. Unreadable — and the two sources are 1.92 and
   2.52 aspect, so the cells were ragged as well.

   Both sources are 1x captures (the WP sidebar measures 160px, not 320px), so
   the rule here is never to display above native: at --maxw the dashboard
   lands at 95% of its 1352px and the day-one shot at 85% of its 1512px.
   Upscaling is what makes a screenshot look cheap.

   A carousel was the other option and was rejected on a measurement, not a
   taste: one fixed frame has to letterbox one of two unequal ratios, and
   hiding half of a centrepiece behind a control is the opposite of the brief.
   Two items also sit below the point where a carousel earns its keyboard,
   aria and reduced-motion cost. */
/* minmax(0,1fr) and the min-width:0 chain below are load-bearing: a grid item
   defaults to min-width:auto, so the 900px image the narrow layout uses would
   otherwise push the whole figure — and the document — out to 900px. */
.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(52px, 6vw, 92px); }
.shot, .shot-frame, .shot-view { min-width: 0; }

/* Label left, caption right — the same two-column shape as .sec-head, so the
   screenshots read as part of the page rather than as pasted-in assets. */
.shot-head {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--gx); align-items: baseline;
  padding-bottom: 15px; margin-bottom: 22px;
  border-bottom: 1px solid var(--rule-2);
}
.shot-idx {
  display: flex; align-items: baseline; gap: 13px;
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg);
}
.shot-num { color: var(--frozen-tx); font-variant-numeric: tabular-nums; flex: none; }
/* Capped even inside a 1280px frame: a caption set to the full width runs to
   about 180 characters a line and reads worse than the old two-up did. */
.shot-cap { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.62; max-width: 62ch; }

.shot-frame {
  border: 1px solid var(--rule-2); border-radius: var(--r-lg); overflow: hidden;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 26px 64px -26px rgba(0, 0, 0, 0.9);
}
.shot-bar {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 16px; border-bottom: 1px solid var(--rule); background: var(--panel-2);
}
/* Decorative only, and inside an aria-hidden bar: they say "window", they do not
   report state, so they are exempt from the 3:1 non-text floor and stay quiet. */
.shot-dots { display: flex; gap: 6px; flex: none; }
.shot-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); }
/* --fg-2 rather than the quieter --fg-3: on --panel-2 that lands at 4.34:1,
   just under the 4.5 floor for text this size. The tracking keeps it subdued. */
.shot-url {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The WordPress admin ground, so a sub-pixel rounding gap never shows as a
   dark seam along the edge of a light screenshot. */
.shot-view { background: #f0f0f1; }
.shot-view img { width: 100%; }
/* The dashboard capture is 1352x704 and its last ten pixels hold two artefacts of
   the capture itself: the next heading cut in half, and the window resize handle
   in the corner. They were invisible at 570px and read as sloppiness at 1280px.
   Trimmed to the row where the table's bottom border closes (y=676) plus air,
   in CSS rather than by editing an asset that is generated elsewhere. */
.shot-view--trim img { aspect-ratio: 1352 / 694; object-fit: cover; object-position: top center; }

.shot-hint { display: none; }

/* Below this width the image cannot be both full-width and legible, so the
   frame becomes the scroll container instead of the page. The page itself
   still must not scroll sideways — see AGENTS.md. */
@media (max-width: 900px) {
  .shot-head { grid-template-columns: 1fr; gap: 11px; }
}

@media (max-width: 760px) {
  .shot-view { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .shot-view img { width: 900px; max-width: none; }
  .shot-hint {
    display: block; margin-top: 10px;
    font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-3);
  }
}

/* ── Architecture diagram ────────────────────────────────────────────────── */
.diagram { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); padding: clamp(20px, 2.4vw, 34px); }
.diagram svg { width: 100%; height: auto; max-width: 820px; margin-inline: auto; }
.diagram-alt { display: none; }
.diagram-alt h3 { margin-bottom: 16px; }
@media (max-width: 767px) { .diagram svg { display: none; } .diagram-alt { display: block; } }

/* ── Weights tables ──────────────────────────────────────────────────────── */
.wt + .wt { margin-top: 34px; }
.wt h3 {
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--fg-2); padding-bottom: 13px;
  border-bottom: 1px solid var(--rule-2); margin-bottom: 4px;
}
.wt table { width: 100%; border-collapse: collapse; }
.wt thead th {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3); text-align: left;
  padding-block: 10px; border-bottom: 1px solid var(--rule);
}
.wt tbody th, .wt tbody td { padding-block: 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.wt-name { font-size: var(--t-xs); font-weight: 400; color: var(--fg); text-align: left; }
.wt-pct { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; width: 74px; }
th.wt-pct { text-align: right; }
.wt-bar, .wt-bar-h { width: 104px; padding-left: 16px; }
/* Track and fill in one element: the cell holds a single span, so the split is
   drawn with a hard-stop gradient rather than a nested track div. */
.wt-bar span {
  display: block; height: 4px; border-radius: 1px;
  background: linear-gradient(to right, var(--frozen) 0 var(--w), var(--panel-2) var(--w) 100%);
}
@media (max-width: 460px) { .wt-bar, .wt-bar-h { display: none; } }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.price { border: 1px solid var(--rule-2); border-radius: var(--r-lg); background: var(--panel); padding: clamp(26px, 3vw, 44px); position: relative; overflow: hidden; }
.price::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--brand); }
.price-fig {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(50px, 6.6vw, 86px); line-height: 0.92; letter-spacing: -0.046em; color: var(--fg);
  margin-block: 22px 10px;
}
.price-fig span { font-family: var(--f-mono); font-size: 15px; font-weight: 400; letter-spacing: 0.04em; color: var(--fg-3); }
.price-inc { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.price-inc li { position: relative; padding-left: 24px; font-size: var(--t-sm); color: var(--fg-2); line-height: 1.55; }
.price-inc li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 10px; height: 2px; background: var(--up); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--rule); }
.faq-item { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 10px var(--gx); padding-block: 28px; border-bottom: 1px solid var(--rule); }
.faq-item p { color: var(--fg-2); font-size: var(--t-sm); }
.faq-item a { color: var(--fg); border-bottom: 1px solid var(--rule-2); }
.faq-item a:hover { border-bottom-color: var(--fg); }
@media (max-width: 820px) { .faq-item { grid-template-columns: 1fr; } }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.close { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--gx); align-items: end; }
@media (max-width: 900px) { .close { grid-template-columns: 1fr; gap: 30px; align-items: start; } }

/* ── Inline links in prose ───────────────────────────────────────────────── */
.prose a, .lede a, .note a, .row p a, .caution p a {
  color: var(--fg); border-bottom: 1px solid var(--rule-2); transition: border-color 0.18s var(--ease);
}
.prose a:hover, .lede a:hover, .note a:hover, .row p a:hover, .caution p a:hover { border-bottom-color: var(--fg); }

/* ── Term tooltips ───────────────────────────────────────────────────────────
   Kept from the previous build: a focusable span with aria-describedby works on
   hover, on keyboard focus and on tap. z-index sits above the sticky sub-nav so
   a definition near a section boundary is not clipped by it. */
.term { border-bottom: 1px dashed var(--fg-3); cursor: help; position: relative; color: var(--fg); }
.term:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 2px; }
.term-def {
  position: absolute; left: 0; transform: translateY(4px);
  bottom: calc(100% + 11px); width: max-content; max-width: min(300px, 78vw); z-index: 200;
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--rule-2);
  border-left: 2px solid var(--frozen); border-radius: var(--r);
  padding: 12px 14px; font-family: var(--f-body); font-size: 13.5px; line-height: 1.55; font-weight: 400;
  letter-spacing: 0; text-transform: none; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.66);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.term:hover .term-def, .term:focus .term-def, .term:focus-within .term-def {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Definitions are nudged left by script when the trigger sits near the right
   edge — see the page script. Without script they simply anchor at the trigger,
   and the text is still reachable through aria-describedby. */
@media print { .term-def { display: none; } .term { border-bottom: 0; } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--rule); padding-block: clamp(48px, 5vw, 76px) 30px; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gx); }
.footer-logo-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 18px; }
.footer-logo { width: clamp(120px, 16vw, 200px); }
.footer-inner > div > p:not(.footer-h) { color: var(--fg-2); font-size: var(--t-sm); max-width: 40ch; }
.footer-h { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
.footer-links li { padding-block: 5px; }
.footer-links a { display: inline-flex; align-items: center; font-size: var(--t-xs); color: var(--fg-2); transition: color 0.18s var(--ease); }
.footer-links a:hover { color: var(--fg); }
/* 44px minimum on touch widths — inline links in a footer list are otherwise
   about 16px tall, which is a miss on a phone. Desktop keeps the tighter list. */
@media (max-width: 780px) {
  .footer-links li { padding-block: 0; }
  .footer-links a { min-height: 44px; width: 100%; font-size: var(--t-sm); }
}
.footer-bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; color: var(--fg-3);
}
@media (max-width: 780px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; gap: 34px; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.mt-1 { margin-top: 20px; }
.mt-2 { margin-top: 34px; }
.mt-3 { margin-top: clamp(34px, 4vw, 62px); }
.mt-4 { margin-top: clamp(44px, 5vw, 80px); }

/* ── Register rows — a narrow rubric-category margin beside the finding ──────
   Declared after .row so the 780px collapse below has to be restated at the
   same specificity; a bare `.row` rule inside the media query would lose to
   `.rows--reg .row` and leave a 176px column on a 360px screen. */
.rows--reg .row { grid-template-columns: 176px minmax(0, 1fr); }
@media (max-width: 780px) { .rows--reg .row { grid-template-columns: 1fr; } }

/* ── Caution, in two columns so it fills its band ────────────────────────── */
.caution-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--gx); }
.caution-cols p + p { margin-top: 0; }
@media (max-width: 780px) { .caution-cols { grid-template-columns: 1fr; } }