/* ============================================================
 * OptimAI marketing site: page-level CSS (build two, 27 Oct 2026)
 * ============================================================
 * Load order: vendor/scrollcraft/scrollcraft.css, then the TD styleguide
 * stack (tokens, base, components), then this file. The vendored copies
 * are never edited (styleguide rule 4; ScrollCraft PAI note 3).
 *
 * This file holds exactly two kinds of rule:
 *   A. THEME: the ScrollCraft engine's --sc-* custom properties mapped to
 *      TD tokens, so the engine draws nothing of its own.
 *   B. SCAFFOLDING and PAGE OVERRIDES: layout the engine needs (stages,
 *      grids, the filmstrip) and page-only variants of canon components.
 *      Each divergence from canon is tagged `styleguide-pending N`, with a
 *      matching entry in BUILD_LOG.md and in the styleguide BUGS.md
 *      (rule-5 prototype). Numbers 1 to 11 carry over from build one;
 *      12 onwards are new in build two.
 *
 * Token values only, on the 4px grid. No em or en dashes anywhere.
 * ============================================================ */

/* ---------------------------------------------------------------- A. THEME */
:root {
  --sc-canvas:       white;
  --sc-surface:      var(--c-bg);
  --sc-ink:          var(--c-body);
  --sc-ink-soft:     var(--c-mid);
  --sc-accent:       var(--c-secondary);
  --sc-accent-ink:   white;
  --sc-font-display: var(--ff-display);
  --sc-font-text:    var(--ff-body);
  --sc-font-mono:    var(--ff-mono);
  --sc-r-sm:         var(--r-sm);
  --sc-r-md:         var(--r-md);
  --sc-r-lg:         var(--r-lg);
  --sc-r-pill:       var(--r-pill);
  --sc-gutter:       var(--s-4);
  --sc-maxw:         var(--w-content);
  --sc-section:      var(--s-8);
  /* Chrome-aware stage height: the TD site header is fixed; the footer is
     static on this site (styleguide-pending 9), so only the header is
     subtracted. Used by the filmstrip stages. */
  --stage-height: calc(100vh - var(--site-header-height));
}

/* ------------------------------------------------ B. PAGE OVERRIDES: body */
/* styleguide-pending 1: marketing body. base.css pads the body for an app
   shell (header + breathing gap, 1rem side gutters for trays). A public
   page has no trays and its hero sits flush under the header. */
body {
  padding-top: var(--site-header-height);
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip; /* the ScrollCraft reset's clip, kept for any reveal that runs past an edge */
}

/* ---------------------------------------------- B. PAGE OVERRIDES: header */
/* styleguide-pending 2: brand with an image mark (canon .brand is a
   two-weight wordmark; OptimAI has a bitmap mark beside it). */
.site-header .brand img {
  width: 32px;
  height: 32px;
  align-self: center;
  margin-right: var(--s-2);
  border-radius: var(--r-sm);
}
/* styleguide-pending 8 (build one, fix one): the canon phone nav sheet is
   parked over the header strip inside the header's stacking context and
   paints over the brand and the tools. Hidden while parked, visible once
   td.js adds .nav-open; the visibility flip is delayed on close so the
   canon slide still plays. The hamburger grows to a 44px tap target. */
@media (max-width: 800px) {
  .site-header .site-header-inner .header-tools { margin-left: auto; }
  .site-header .site-header-inner .nav-hamburger { margin-left: 0; width: 44px; height: 44px; }
  .site-header .site-header-inner .site-nav-links {
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .site-header .site-header-inner .site-nav-links.nav-open {
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }
}

/* ---------------------------------------------- B. PAGE OVERRIDES: footer */
/* styleguide-pending 9: static marketing footer (the canon .site-footer is
   a fixed app-shell bar and covered the bottom of every scene). */
.site-footer { position: static; height: auto; }
.site-footer .site-footer-inner { height: var(--site-footer-height); }
.site-footer .footer-tools-left,
.site-footer .footer-tools-right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: 12px;
  line-height: 18px;
}
.site-footer .footer-tools-right { justify-self: end; }

/* styleguide-pending 10: .table-scroll, a scroll container for a table that
   is wider than its column; scrolls the table inside its own box, never
   the page. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > .table { margin-bottom: 0; }

/* -------------------------------------------------- B. SCAFFOLDING: scenes */
/* Every act is a scene on its own hard ground (distinct scenes, no drift). */
.scene { padding: var(--s-8) 0; }
.scene.ground-bg { background: var(--c-bg); }
.scene > .container > h2:first-child,
.scene > .container > .act-head > h2 { margin-bottom: var(--s-3); }
.act-head { margin-bottom: var(--s-6); }
/* styleguide-pending 17: .lead, the act lead line (20px/30px, 70ch). Canon has
   no lede size between body and h4; candidate: a .lede type utility. */
.act-head .lead { font-size: 20px; line-height: 30px; max-width: 70ch; margin-bottom: 0; }
.act-head .lead + .lead { margin-top: var(--s-3); }
.act-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-6) 0 0; }
.act-actions .btn + a:not(.btn) { font-weight: 500; }

/* styleguide-pending 3: .scene-grid, a gapped copy and media grid for
   marketing scenes (the canon .split is a divided comparison layout). */
.scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-7);
  align-items: start;
}
.scene-grid.media-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.scene-grid.media-first > .scene-copy { order: 2; }
.scene-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scene-copy > :last-child { margin-bottom: 0; }
.scene-copy p, .scene-copy li, .scene-copy dd { max-width: 62ch; }
.scene-prose { max-width: 66ch; }
.scene-prose > :last-child { margin-bottom: 0; }

/* A screenshot figure: a canon image card (no padding, clipped corners),
   raised at rest, canon figcaption. */
.shot { margin: 0 0 var(--s-5); }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { padding: var(--s-2) var(--s-1) 0; }
.shot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.shot-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shot-grid .shot { margin-bottom: 0; }

/* Inline source citation: the source name is the link; the sample and date
   after it are canon .help-text (12px, mid), never a footnote (copy rule). */

/* ------------------------------------------------------- B. SCENE: hero */
/* styleguide-pending 4: teal ground (direction B) re-inks the canon type for
   its subtree; styleguide-pending 5: the primary button inverts on it.
   .ground-primary is shared by the hero (act 1) and the close (act 16). */
.ground-primary {
  background: var(--c-primary);
  color: white;
}
.ground-primary .eyebrow,
.ground-primary h1,
.ground-primary h2,
.ground-primary .mega,
.ground-primary p { color: white; }
.ground-primary .mega-alt { color: var(--c-tertiary); }
.ground-primary .help-text,
.ground-primary .label { color: var(--c-tertiary); }
.ground-primary a:not(.btn) { color: white; text-decoration: underline; text-underline-offset: 4px; }
.ground-primary a:not(.btn):hover { color: var(--c-tertiary); }
.ground-primary :focus-visible { outline-color: white; }
.ground-primary .btn-primary { background: white; color: var(--c-primary); border-color: white; }
.ground-primary .btn-primary:hover { background: var(--c-tertiary); border-color: var(--c-tertiary); color: var(--c-primary); }
.ground-primary .btn-outline { color: white; border-color: white; }
.ground-primary .btn-outline:hover { background: white; color: var(--c-primary); border-color: white; }

.hero { padding: var(--s-8) 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--s-7);
  align-items: center;
}
.hero-copy .mega { margin-bottom: var(--s-5); }
.hero-copy .mega .line { display: block; }
.hero-lede { font-size: 20px; line-height: 30px; max-width: 54ch; }
.hero-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }

/* The URL form: canon .field-row (field + trailing button on one baseline),
   visually complete and unwired. Shared by the hero, act 3 and the close. */
.url-form { margin-bottom: var(--s-2); max-width: 560px; }
.url-form .field-row { margin-bottom: var(--s-2); }
.url-form .btn, .url-form .input { height: 48px; }
.url-form .input { font-size: 16px; }
.url-form .help-text { margin: 0; }
.url-form-prompt { font-weight: 500; margin-bottom: var(--s-2); }

/* styleguide-pending 12: the hero product card. A canon .card.raised holding
   a score ring (canon .gauge, static), a tile grid of the report's own
   figures and an engine row of chips. The tile grid itself is the
   prototype (no canon stat tile). */
.report-card { margin-bottom: 0; padding: var(--s-5); color: var(--c-body); }
.report-card .card-header { margin-bottom: var(--s-4); }
.report-card .card-header .label { margin: 0; }
.report-card-top { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-4); }
.report-card .gauge { pointer-events: none; flex: 0 0 auto; }
.report-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); flex: 1 1 auto; min-width: 0; }
.tile {
  background: var(--c-bg);
  border: 1px solid var(--c-invert-2);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  min-width: 0;
}
.tile .label { display: block; margin-bottom: var(--s-1); font-size: 10px; line-height: 14px; color: var(--c-mid); }
.tile .num { font-family: var(--ff-display); font-weight: 500; font-size: 24px; line-height: 30px; color: var(--c-primary); display: block; white-space: nowrap; }
.tile .sub { font-size: 12px; line-height: 18px; color: var(--c-mid); display: block; }
.report-card .badge-row { margin-bottom: var(--s-3); }
.report-card .card-footer { padding-top: var(--s-3); }
.report-card .card-footer p { margin: 0; font-size: 12px; line-height: 18px; color: var(--c-mid); }
.report-card .shot { margin: var(--s-4) 0 0; }
.report-card .shot img { border-radius: var(--r-sm); border: 1px solid var(--c-invert-2); }
.report-card .shot figcaption { color: var(--c-mid); }

/* ------------------------------------------------------- B. SCENE: proof */
/* Fix three, item 14: the proof act collapsed to the one past result. The
   build-two stat tiles (styleguide-pending 6) are retired with the tiles.
   Page scaffolding only: canon .eyebrow, .mega and .lead, sized. */
.proof-one { max-width: 860px; }
.proof-one .eyebrow { color: var(--c-secondary); margin-bottom: var(--s-2); }
.proof-one .proof-head { margin-bottom: var(--s-1); }
.proof-one .proof-sub { font-family: var(--ff-display); font-weight: 300; font-size: 32px; line-height: 40px; color: var(--c-secondary); margin-bottom: var(--s-5); }
.proof-one .proof-detail { font-size: 20px; line-height: 30px; max-width: 62ch; margin-bottom: var(--s-4); }
.proof-one .proof-lead { font-size: 16px; line-height: 24px; color: var(--c-mid); max-width: 62ch; margin-bottom: 0; }

/* ---------------------------------------------- B. SCENE: Paste. Score. Fix. */
.steps .card { padding: var(--s-5); }
.steps .bubble { margin-bottom: var(--s-3); }
.steps h3 { text-transform: none; letter-spacing: 0; margin-bottom: var(--s-2); }
.steps p { margin: 0; }
.after-steps { margin-top: var(--s-6); max-width: 560px; }

/* ------------------------------------------- B. BETWEEN ACTS: stat callouts */
/* styleguide-pending 21: .stat-band, a between-acts band holding one canon
   pullquote at reading width; no canon section band exists. */
/* The [CALLOUT] blocks render on the canon quote style (blockquote /
   .pullquote) with the figure large above the line; the tip in act 8 uses
   the canon .callout in the amber synonym so it reads as a tip, not a
   statistic. styleguide-pending 13: the figure inside a pullquote set in
   .mega (the canon pullquote is one size). */
.stat-band { padding: var(--s-6) 0; }
.stat-band .pullquote { margin: 0 auto; max-width: 860px; }
.pullquote .num {
  display: block;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 64px;
  color: var(--c-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}
.pullquote .num::before { content: none; }
.pullquote cite a { color: var(--c-secondary); }
.callout.tip { margin: var(--s-6) 0; }
.callout.tip p { margin-bottom: var(--s-2); }
.callout.tip .tip-facts { margin: var(--s-3) 0 0; padding-left: var(--s-5); }
.callout.tip .tip-facts li { font-size: 16px; line-height: 24px; margin-bottom: var(--s-2); }

/* ----------------------------------------------- B. SCENE: value acts */
/* Tick lists side by side on desktop (Seth's build note). The canon
   li.tick carries the mark; the column grid is page scaffolding. */
.tick-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin-bottom: var(--s-5); }
.tick-cols h3 { text-transform: none; letter-spacing: 0; font-size: 20px; line-height: 30px; margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.tick-cols ul { margin-bottom: 0; }
.tick-cols li { font-size: 16px; line-height: 24px; }
.tick-cols .chip { vertical-align: 0; }

/* styleguide-pending 14: figure callout card. A high-contrast teal card like
   the hero (Seth's build note): the figures in white display type, their
   labels under them, and the "one example site" label small on the card. */
.fig-card {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: white;
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.fig-card .label { color: var(--c-tertiary); margin-bottom: var(--s-3); display: block; }
.fig-card .fig-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4) var(--s-5); }
.fig-card .fig-list li { margin: 0; font-size: 14px; line-height: 20px; color: var(--c-tertiary); }
.fig-card .fig-list .num {
  display: block;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: white;
  margin-bottom: var(--s-1);
  letter-spacing: -0.01em;
}
.fig-card .fig-list .num.quote { font-size: 20px; line-height: 28px; font-family: var(--ff-body); font-weight: 500; }
.fig-card .fig-list .chip { vertical-align: 0; margin-left: var(--s-1); }

/* styleguide-pending 22: the Pro label chip, canon .chip.fade in the primary
   synonym used as an inline token in prose (bold, tracked); canon has no
   inline-token chip and its :has rule blockifies a direct-child chip, so
   the chip is wrapped in a plain span in the markup. */
.chip.pro { font-weight: 700; letter-spacing: 0.3px; }

/* styleguide-pending 15: placeholder chip. A bracketed item the copy leaves
   pending ([X pending Ross], [METHODOLOGY NOTE, pending], [date]) renders as
   a visibly styled chip so Seth sees it in context; never dropped, never
   filled. Canon .badge.outline in the amber synonym with a dashed border. */
.ph {
  border-style: dashed;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  vertical-align: 1px;
  white-space: normal;
}

/* ------------------------------------------------- B. SCAFFOLDING: filmstrip */
/* The per-tab filmstrip (the signature move). A flow act (the engine
   publishes --sc-p on it) holds a two-column grid: the copy column scrolls,
   the stage column is sticky under the fixed header and rebuilds the report
   tab panel by panel. Panels sit in the app's order with the app's gaps;
   the page's own script (strip.js inline) reveals panel k when the act's
   progress passes k / n and slides the stack so the newest panel is in
   view. Each panel is one image file, so a stage-two capture is a file
   swap. Below 1024px the stage releases and the panels stack under the
   copy; no reveal on a phone is gated to a progress threshold. */
.strip-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: start;
}
.strip-copy > :last-child { margin-bottom: 0; }
.strip-stage {
  position: sticky;
  top: calc(var(--site-header-height) + var(--s-4));
  height: calc(var(--stage-height) - var(--s-8));
  overflow: hidden;
  background: var(--c-invert-2);
  border: 1px solid var(--c-invert-1);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.strip-stage .strip-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.strip-stage .strip-tab .label { margin: 0; }
.strip-stage .strip-tab .help-text { margin: 0; }
.strip-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  will-change: transform;
  transition: transform 420ms ease-out;
}
.strip-panel {
  margin: 0;
  background: white;
  border: 1px solid var(--c-invert-1);
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: 0.12;
  transform: translateY(12px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.strip-panel.is-on { opacity: 1; transform: none; }
.strip-panel img { display: block; width: 100%; height: auto; }
.strip-panel figcaption { display: none; }
/* Progress tally under the stage: the panel count the stage has built. */
.strip-count { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- B. SCENE: the problem */
.problem .scene-prose p { font-size: 18px; line-height: 28px; }
/* styleguide-pending 18: .turn, a set-apart line on a primary-ruled band in
   display type (the one line an act exists for); no canon equivalent. */
.problem .turn {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  border-left: 4px solid var(--c-primary);
  background: var(--c-bg);
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--c-primary);
  max-width: none;
}
.problem .turn .help-text { font-family: var(--ff-body); font-weight: 400; }
/* styleguide-pending 20: .voices, two plain cards side by side carrying one
   line each; a two-up card grid with no canon row. */
.problem .voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.problem .voices .card { margin: 0; }
.problem .voices .label { display: block; margin-bottom: var(--s-2); }
.problem .voices p { margin: 0; }

/* ------------------------------------------------- B. SCENE: evidence (peak) */
/* styleguide-pending 19: .wedge, a set-apart display line without a rule or
   band (quieter than .turn); no canon equivalent. */
.evidence .wedge {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--c-primary);
  margin: var(--s-5) 0;
  max-width: 40ch;
}

/* -------------------------------------------------- B. SCENE: health weights */
/* The category-weight card Seth liked: canon .hero-bars with the five
   weights, each fill growing from zero to its weight on entry (the canon
   fill already transitions width; the hold needs !important over the
   canon inline style; page prototype carried from build one). */
.weights { margin-bottom: var(--s-5); }
.weights .hero-bar-label { width: 160px; }
.weights:not(.sc-in) .hero-bar-fill { width: 0 !important; }

/* ------------------------------------------------ B. SCENE: everything */
/* The report walk: a horizontal strip of frames in a scroll region, the
   frame capture pending (placeholder chip on the strip). */
.walk { margin-bottom: var(--s-6); }
.walk-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  background: var(--c-invert-2);
  border: 1px solid var(--c-invert-1);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.walk-strip figure { margin: 0; background: white; border: 1px solid var(--c-invert-1); border-radius: var(--r-sm); overflow: hidden; }
.walk-strip img { display: block; width: 100%; height: auto; }
.walk-strip figcaption { padding: var(--s-2) var(--s-3); font-size: 12px; line-height: 18px; }
.walk-note { margin-top: var(--s-3); }
.coverage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
.coverage h3 { text-transform: none; letter-spacing: 0; font-size: 20px; line-height: 30px; margin-bottom: var(--s-3); }
.coverage ul { margin: 0; }
.coverage li { font-size: 16px; line-height: 24px; }

/* ---------------------------------------------- B. SCENE: checks the work */
.delta-strip { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: baseline; }

/* --------------------------------------------------- B. SCENE: comparison */
/* styleguide-pending 16: highlighted comparison rows. The canon state-shaded
   row uses the state synonyms (green, amber, red); a neutral emphasis row
   has no synonym, so .highlight takes the tertiary fade and the cost row
   (the row the act turns on) a stronger tertiary mix with the OptimAI
   cell's prices in display type. The spotlight overlay is page scaffolding
   driven from the engine's --sc-mx / --sc-my. */
.compare-wrap { position: relative; }
.compare .table { table-layout: fixed; min-width: 1100px; }
.compare .table col.c-what { width: 16%; }
.compare .table col.c-optimai { width: 27%; }
.compare .table col.c-other { width: 14.25%; }
.compare .table th:nth-child(2),
.compare .table td:nth-child(2) { background: color-mix(in srgb, var(--c-tertiary) 14%, white); }
.compare .table th:nth-child(2) { background: var(--c-primary); color: white; border-bottom-color: var(--c-primary); }
.compare .table td { font-size: 14px; line-height: 20px; }
.compare .table td:first-child { font-weight: 700; color: var(--c-primary); }
.compare .table tbody tr.highlight td { background: color-mix(in srgb, var(--c-tertiary) 24%, white); }
.compare .table tbody tr.highlight td:nth-child(2) { background: color-mix(in srgb, var(--c-tertiary) 44%, white); }
.compare .table tbody tr.highlight.cost td { background: color-mix(in srgb, var(--c-tertiary) 36%, white); }
.compare .table tbody tr.highlight.cost td:nth-child(2) { background: var(--c-tertiary); color: var(--c-primary); }
.compare .table tbody tr.highlight.cost td:nth-child(2) .num { display: block; font-family: var(--ff-display); font-weight: 500; font-size: 28px; line-height: 36px; color: var(--c-primary); margin-bottom: var(--s-1); }
.compare-spot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16%;
  width: 27%;
  pointer-events: none;
  border-radius: var(--r-sm);
  opacity: 0;
  transition: opacity 200ms ease-out;
  background: radial-gradient(
    circle at 50% calc(var(--sc-my, 0.5) * 100%),
    color-mix(in srgb, var(--c-primary) 16%, transparent) 0%,
    transparent 38%
  );
}
.compare-wrap:hover .compare-spot { opacity: 1; }
.compare-note { margin-top: var(--s-3); }

/* ----------------------------------------------------- B. SCENE: agencies */
.agency-teaser .shot-grid { margin-top: 0; }

/* ------------------------------------------------------ B. SCENE: pricing */
.price-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; margin-bottom: var(--s-6); }
.price-tables h3 { text-transform: none; letter-spacing: 0; font-size: 20px; line-height: 30px; margin-bottom: var(--s-3); }
.price-tables .table td.cell-num strong { font-family: var(--ff-display); font-size: 20px; }
.pricing-points { columns: 2; column-gap: var(--s-6); max-width: none; margin-bottom: var(--s-6); }
.pricing-points li { break-inside: avoid; max-width: 40ch; }
.pricing-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; }
.pricing-grid .card { margin-bottom: 0; }
.pricing-grid .shot { margin: 0; }
.pricing-grid .shot img { max-width: 480px; }

/* ------------------------------------------------------- B. SCENE: FAQ */
/* styleguide-pending 7: FAQ accordion with a heading as the summary (FAQPage
   wants the question as a real heading). */
.faq { max-width: 860px; }
.faq .max-min summary h3 {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.faq .max-min > p { padding: 0 0 var(--s-4); margin: 0; max-width: 70ch; }
.faq .max-min > p + p { padding-top: 0; }

/* ------------------------------------------------------- B. SCENE: close */
.close { padding: var(--s-8) 0; }
.close .mega { font-size: 48px; line-height: 56px; margin-bottom: var(--s-4); }
.close .hero-lede { margin-bottom: var(--s-5); }
.close .url-form { margin-top: var(--s-5); }
.colophon {
  padding: var(--s-5) 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-mid);
}
.colophon p { margin-bottom: var(--s-1); }

/* ----------------------------------------------------- agency page only */
.partner-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: start; }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
.two-up h3 { text-transform: none; letter-spacing: 0; font-size: 20px; line-height: 30px; margin-bottom: var(--s-3); }
.tabs-step { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.tabs-step .shot { margin-bottom: 0; }

/* ------------------------------------------------- reduced motion floor */
@media (prefers-reduced-motion: reduce) {
  .strip-panel, .strip-stack { transition: none; }
  .strip-panel { opacity: 1; transform: none; }
  .weights .hero-bar-fill { transition: none; }
  .compare-spot { display: none; }
}

/* ------------------------------------------------------------ tablet */
@media (max-width: 1024px) {
  .hero-grid, .scene-grid, .scene-grid.media-first, .strip-grid, .pricing-grid, .partner-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .scene-grid.media-first > .scene-copy { order: 0; }
  .strip-stage {
    position: static;
    height: auto;
    overflow: visible;
    margin-top: var(--s-6);
  }
  .strip-stack { transform: none !important; }
  .strip-panel { opacity: 1; transform: none; }
  .strip-panel figcaption { display: block; padding: var(--s-2) var(--s-3); font-size: 12px; line-height: 18px; }
  .coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega { font-size: 48px; line-height: 56px; }
  .tabs-step { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- phone */
/* Desktop first; below 860px every grid is one column, the stage is
   released (above) and the reveal offsets are the engine's entry fade
   only, so no image waits on a progress threshold. */
@media (max-width: 860px) {
  .scene { padding: var(--s-7) 0; }
  .hero, .close { padding: var(--s-7) 0; }
  .mega { font-size: 36px; line-height: 44px; }
  .close .mega { font-size: 32px; line-height: 40px; }
  .hero-lede, .act-head .lead { font-size: 16px; line-height: 24px; }
  .problem .scene-prose p { font-size: 16px; line-height: 24px; }
  .problem .turn { font-size: 20px; line-height: 30px; padding: var(--s-4); }
  .problem .voices, .tick-cols, .shot-grid, .shot-grid.cols-3, .price-tables, .two-up, .coverage { grid-template-columns: minmax(0, 1fr); }
  .report-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-card-top { flex-direction: column; align-items: flex-start; }
  .pricing-points { columns: 1; }
  .walk-strip { grid-template-columns: minmax(0, 1fr); }
  .pullquote .num { font-size: 40px; line-height: 48px; }
  .weights .hero-bar-label { width: 120px; }
  .compare .table { min-width: 960px; }
  .fig-card .fig-list { grid-template-columns: minmax(0, 1fr); }
  /* The static footer stacks its three zones; the copyright may wrap. */
  .site-footer .site-footer-inner {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--s-1);
    padding: var(--s-3) 0;
  }
  .site-footer .footer-tools-left,
  .site-footer .footer-tools-right { justify-self: center; }
  .site-footer .footer-center { white-space: normal; }
  /* styleguide-pending 11: phone tap targets for text links (padding only). */
  .site-footer a { display: inline-block; line-height: 20px; padding: var(--s-3) var(--s-2); }
  .scene small a, .help-text a, .pullquote cite a { display: inline-block; line-height: 24px; padding: var(--s-3) 0; }
}

/* ------------------------------------------------- B. FIX TWO: lightbox */
/* styleguide-pending 23: lightbox scaffolding on the canon .modal. The modal
   and its scrim, close button and Escape are canon (td.js); this sizes the
   one shared image card to the viewport with its aspect kept, and makes the
   figure triggers read as clickable. Candidate: a canon .modal.lightbox. */
.lightbox-card {
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.lightbox-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--s-8) - var(--s-8));
  object-fit: contain;
  background: white;
}
.lightbox-card .card-body { padding: var(--s-3) var(--s-4); }
.lightbox-card .card-body p { margin: 0; }
.lightbox-card .notice-close { background: white; border-radius: var(--r-pill); z-index: 1; }
figure[data-modal-open] { cursor: zoom-in; }
figure[data-modal-open]:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
/* The inline-token wrapper also keeps a currency sign with its chip (Cato,
   fix two): the pound and its placeholder never split across lines. */
.inl { white-space: nowrap; }

/* ============================================================ FIX THREE */
/* Seth's walk, 28 Oct 2026. Each divergence tagged styleguide-pending N
   (24 onwards), logged in BUILD_LOG.md and appended to BUGS.md. */

/* styleguide-pending 24: header items on one centre line. Canon .brand in
   the header is inline-flex on the baseline with a 1px lift, the nav is
   dropped 3px, and each .site-nav-text column's first flex item is the
   zero-height ::before, so the link's baseline is its top edge and the
   link hangs below the line box of its list item (the nav cap line sat
   15px under the mark's centre on this 20px-body page). The list items
   become flex rows so the links centre on the box, the two canon nudges
   are cleared. Measured headless (cap-height centres, 1440, 820 and 390):
   logo 27.5, wordmark 27.2, nav 28.0, button text 27.1, button box 27.5,
   hamburger 27.5; no further nudge needed. */
.site-header .site-header-inner .brand { align-items: center; transform: none; }
.site-header .site-header-inner .site-nav-links { transform: none; }
.site-header .site-header-inner .site-nav-links li { display: flex; align-items: center; }
.site-header .site-header-inner .brand-text { display: inline-flex; align-items: baseline; }

/* styleguide-pending 25: the inline wordmark in running text. Canon .brand
   (Fredoka 500 primary, .brand-alt 300 secondary) is the in-prose
   wordmark; on a teal ground it needs a knock-out: white outer, tertiary
   inner, the same two-tone as .mega / .mega-alt on the hero. Applied by
   context on .ground-primary and by the .knockout modifier elsewhere (the
   comparison table's teal header cell). Candidate: canon .brand.knockout. */
.brand { white-space: nowrap; text-transform: none; letter-spacing: normal; }
.ground-primary .brand,
.brand.knockout { color: white; }
.ground-primary .brand .brand-alt,
.brand.knockout .brand-alt { color: var(--c-tertiary); }
.ground-primary .carousel-slide .brand { color: var(--c-primary); }
.ground-primary .carousel-slide .brand .brand-alt { color: var(--c-secondary); }

/* styleguide-pending 27 (SG-4): placeholder descenders and accents clip.
   Cause, measured headless in Chrome: the UA styles ::placeholder as a
   block with overflow: hidden and line-height: normal, and canon's M PLUS
   @font-face overrides the metrics to ascent 75% and descent 10%, so the
   placeholder box is 85% of the em (14px at 16px) while the glyph ink
   runs from about 101% above the baseline (an accent) to 23% below it
   (g, y, j, p). The box clips the ink top and bottom. Typed text sits in
   the inner editor, which is not clipped vertically, which is why typed
   text in the same input was always whole and line-height on the
   placeholder never helped (normal is the 85% box). Fix: let the
   placeholder overflow its line box. Candidate for canon components.css
   next to the existing ::placeholder colour rule. */
.input::placeholder,
.textarea::placeholder { overflow: visible; }
/* Typed text clips the same way at a second layer: Chrome sizes the text
   input's inner editor to the font's normal line (the same 85% box) and
   clips it, so g, y, q and p lost their tails while being typed too (the
   pre-check sample: typed ink stopped 1.5px short of the placeholder's
   once the placeholder was let out). The inner editor cannot be styled,
   so form controls take an alias of the same canon M PLUS files with the
   font's own metrics (no ascent or descent override): the normal line is
   then taller than the ink and nothing clips. Same glyphs, same weight;
   the text sits about 1px lower in the box. */
@font-face {
  font-family: 'M PLUS Field';
  src: url('../vendor/td_styleguide/fonts/mplus-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.input, .textarea { font-family: 'M PLUS Field', var(--ff-body); }

/* --------------------------------------------- hero layout (fix three) */
/* Home hero only (.hero-areas): the H1 and the copy column on the left,
   the carousel beside them, spanning both rows. Released below 1024px to
   one column: H1, carousel, copy (item 9: the carousel sits directly
   under the H1 and the form stays on the first screen of a small tablet);
   below 600px (599 and under) the copy comes before the carousel, so the form stays near
   the top of a phone. */
.hero-areas {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "head visual" "copy visual";
  row-gap: 0;
  align-items: start;
}
.hero-areas .hero-head { grid-area: head; align-self: end; margin-bottom: var(--s-5); }
.hero-areas .hero-head .line { display: block; }
.hero-areas .hero-copy { grid-area: copy; }
.hero-areas .hero-visual { grid-area: visual; align-self: center; }
.hero-areas .hero-lede { margin-bottom: var(--s-5); }
/* Item 9: from 600px up the H1 breaks after "Google", so the lines read
   "See who ChatGPT and Google / cite instead of you." (the H1 is sized
   below so the first half holds one line). On a phone the halves wrap
   naturally and a non-breaking space keeps "of you." together, so "you."
   never sits alone and "Google" is not stranded on a line of its own. */
@media (min-width: 600px) {
  .hero-head .h1-a::after { content: "\A"; white-space: pre; }
}
/* Sized so "See who ChatGPT and Google" holds one line in the H1's column:
   48px from 1200px up, 40px from 1025px, the canon tablet and phone sizes
   below (48px and 36px; the single column is wide enough for both). */
@media (min-width: 1025px) {
  .hero-areas .hero-head { font-size: 48px; line-height: 56px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .hero-areas .hero-head { font-size: 40px; line-height: 48px; }
}
.hero-report { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-4) 0 0; }

/* styleguide-pending 26: the hero carousel. Five canon .card.raised slides
   stacked in one grid cell (the cell takes the tallest slide, so nothing
   below moves), crossfading on opacity; the dots are buttons with a 24px
   target and a 10px mark. No canon carousel exists. Candidate: a canon
   .carousel (track, slide, dots) with the js/site.js driver in td.js. */
.carousel { position: relative; }
.carousel-track { display: grid; }
.carousel-slide {
  grid-area: 1 / 1;
  margin: 0;
  padding: var(--s-5);
  color: var(--c-body);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}
.carousel-slide.is-active { opacity: 1; visibility: visible; transition: opacity 700ms ease, visibility 0s; z-index: 1; }
.ground-primary .carousel-slide p { color: var(--c-body); }
.ground-primary .carousel-slide .label { color: var(--c-mid); }
.ground-primary .carousel-slide .help-text { color: var(--c-mid); }
.ground-primary .carousel-slide a:not(.btn) { color: var(--c-secondary); text-decoration: underline; text-underline-offset: 3px; }
.ground-primary .carousel-slide a:not(.btn):hover { color: var(--c-primary); }
.ground-primary .carousel-slide :focus-visible { outline-color: var(--c-primary); }
.carousel-slide .slide-title { margin: 0 0 var(--s-4); }
.carousel-slide .slide-note { margin: var(--s-4) 0 0; font-size: 14px; line-height: 20px; }
.carousel-slide .slide-note .help-text { font-size: 12px; }

.carousel-dots { display: flex; justify-content: center; gap: var(--s-1); margin-top: var(--s-3); }
.carousel-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
}
.carousel-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  border: 2px solid white;
  box-sizing: border-box;
  transition: background 0.15s;
}
.carousel-dot:hover::before { background: var(--c-tertiary); border-color: var(--c-tertiary); }
.carousel-dot.is-active::before { background: white; }
.carousel-dot:focus-visible { outline: 2px solid white; outline-offset: 0; }

/* Slide 1: the four summary tiles (prototype 12's .tile, two by two). */
.slide-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.slide-tiles .tile { padding: var(--s-3) var(--s-4); }
.slide-tiles .tile .num { font-size: 32px; line-height: 40px; }
.slide-tiles .tile .sub { font-size: 14px; line-height: 20px; }

/* Slide 2: the five health section gauges (canon .gauge.sm, hydrated by
   td.js from data-score) with their weights. */
.slide-gauges { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.slide-gauges li { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1); }
.slide-gauges .gauge { pointer-events: none; }
.slide-gauges .gauge-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--c-primary); }
.slide-gauges .gauge-weight { font-family: var(--ff-display); font-size: 20px; line-height: 24px; color: var(--c-body); }

/* Slides 3 and 4: the question or keyword, then the reads. */
.slide-query { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.slide-q { font-family: var(--ff-display); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--c-primary); }
.slide-query .chip { pointer-events: none; }
.slide-engines { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.slide-engines .engine {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-2);
  border: 1px solid var(--c-invert-2);
  border-radius: var(--r-sm);
  background: var(--state-fade, var(--c-bg));
}
.slide-engines .engine-name { font-weight: 500; font-size: 16px; line-height: 24px; color: var(--c-body); }
.slide-engines .engine-state { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--state-color, var(--c-mid)); }
.slide-figure { font-family: var(--ff-display); font-weight: 500; font-size: 20px; color: var(--c-primary); }
.slide-meta { margin: 0 0 var(--s-4); font-size: 14px; line-height: 20px; color: var(--c-mid); }
.ground-primary .carousel-slide .slide-meta { color: var(--c-mid); }
.slide-big { margin: 0; }
.slide-big .num { display: block; font-family: var(--ff-display); font-weight: 500; font-size: 56px; line-height: 64px; color: var(--c-primary); letter-spacing: -0.01em; }
.slide-big .sub { display: block; font-size: 18px; line-height: 28px; color: var(--c-body); }
.slide-stat .slide-big .num { font-size: 80px; line-height: 88px; }
.slide-stat .slide-big .sub { font-family: var(--ff-display); font-size: 24px; line-height: 32px; color: var(--c-primary); }

@media (prefers-reduced-motion: reduce) {
  .carousel-slide, .carousel-slide.is-active { transition: none; }
}

/* Small tablet and below (item 9). */
@media (max-width: 1024px) {
  .hero-areas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "visual" "copy"; row-gap: var(--s-5); }
  .hero-areas .hero-head { margin-bottom: 0; }
  .hero-areas .hero-visual { max-width: 640px; width: 100%; }
}
@media (max-width: 599px) {
  .hero-areas { grid-template-areas: "head" "copy" "visual"; }
  .slide-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-4); }
  .slide-big .num { font-size: 48px; line-height: 56px; }
  .slide-stat .slide-big .num { font-size: 64px; line-height: 72px; }
  .slide-tiles .tile .num { font-size: 28px; line-height: 36px; }
  .proof-one .proof-sub { font-size: 24px; line-height: 32px; }
  .proof-one .proof-detail { font-size: 18px; line-height: 28px; }
}


/* Seth's walk, 28 Oct (direct edit): drop the header wordmark 4px to sit
   on the logo's centre line. Trial value; adjust by eye. */
.site-header .site-header-inner .brand-text { position: relative; top: 0px; }