/* ─────────────────────────────────────────────────────
   adsbyvalr — page layer
   Layout and web-scale sizing only. Every color, font, radius, spacing
   and shadow comes from styles.css (Modernist). Never hard-code a hex,
   a font name, or a value the tokens already carry.

   THE RHYTHM: a 28px leading unit (17px Archivo body at ~1.65), 14px
   half-step. Display blocks are ratio-governed (≈1.06) and exempt.
   THE LAWS: display headers break per sentence (.line spans); spacing is
   cluster-scoped; the grid SHOWS — 2px rules draw the structure; red is
   spent as a mark, and its one field moment is the closing banner.
──────────────────────────────────────────────────────── */

:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
  /* measured height of the masthead in the range where the mobile menu can
     appear (≤860px). The menu sticks 1px under it so no gap can open up. */
  --nav-h: 62px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; overflow-x: hidden; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* — drawn structure: the 2px rule is the section seam — */
.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }
.seam-top { border-top: 2px solid var(--color-divider); }

/* ─── NAV ─────────────────────────────────────────── */
nav.nav {
  position: sticky; top: 0; z-index: 99;
  background: var(--color-bg);
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
}
.nav-brand { display: inline-flex; align-items: center; }
.nav-brand .logo-svg { height: 26px; width: auto; display: block; overflow: visible; }
.nav a { white-space: nowrap; }
.nav .btn { margin-left: var(--space-1); }

/* the orbit mark keeps turning — the one motion the system allows itself */
.logo-orbit {
  transform-box: fill-box; transform-origin: center;
  animation: logo-orbit 10s linear infinite;
}
@keyframes logo-orbit { to { transform: rotate(360deg); } }
.nav-brand:hover .logo-orbit, .footer-brand:hover .logo-orbit { animation-duration: 1.5s; }
@media (prefers-reduced-motion: reduce) { .logo-orbit { animation: none; } }

.nav-toggle {
  display: none; width: 36px; height: 36px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider);
  color: var(--color-text); cursor: pointer;
}
.nav-toggle:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.mobile-menu {
  display: none; flex-direction: column;
  position: sticky; top: calc(var(--nav-h) - 1px); z-index: 98;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
  padding: 0 var(--edge) var(--half);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; color: var(--color-text); text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover { color: var(--color-accent); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 861px) {
  .mobile-menu { display: none !important; }
  .nav-links { display: contents; }
}

/* ─── KICKER ──────────────────────────────────────── */
/* accent-colored SMALL text takes the deep ramp step — the base accent is a
   large-text value only */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* ─── DISPLAY TYPE ────────────────────────────────── */
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: clamp(42.5px, 6.57vw, 89px); /* ≈1.06 — Archivo 800 sits tight */
  letter-spacing: -0.02em; margin: 0;
  margin-left: -0.058em; /* optical left alignment for leading caps */
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; } /* one sentence per line */

/* the accent as a MARK inside display type — large-text contrast, ≥3:1 */
.mark { color: var(--color-accent); }

.h-section {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: clamp(32px, 3.6vw, 46.6px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
  text-box: trim-both cap alphabetic;
}
.h-section .line { display: block; }

.lede {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic;
}
.note {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; margin: calc(var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic;
}

/* ─── SECTION SCAFFOLD ────────────────────────────── */
.section { padding: calc(3 * var(--leading)) 0; }
.section-tight { padding: calc(2 * var(--leading)) 0; }
.section-head { margin-bottom: calc(2 * var(--leading)); }
/* 1.5 units below a display-grade head — one unit reads as part of the heading */
.section-head .note { max-width: 46ch; margin-top: calc(1.5 * var(--leading) - 1cap); }

.row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* ─── HERO ────────────────────────────────────────── */
/* law #4: no hero eyebrow — the nav brand names the business */
.hero { padding: calc(3.5 * var(--leading)) 0 calc(3 * var(--leading)); }

/* ─── HERO SPLIT: one screen, video ground, two paths ─
   Sized in svh, NOT vh: vh measures the viewport with Safari's URL bar
   hidden, so a vh-sized opener is ~90px taller than what a phone can
   actually show and the "one screen" always scrolls. svh is the bars-
   visible height — the only one that guarantees the fold lands here.
   dvh is deliberately avoided: it re-resolves as the bar hides on
   scroll, which would jog the video and the whole split with it. */
.hero-split {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-block: calc(1.5 * var(--leading));
  padding-bottom: max(calc(1.5 * var(--leading)), env(safe-area-inset-bottom));
}
/* transparent until site.js attaches a source — with no media the ground
   colour simply shows through, so a missing file is invisible, not broken */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: transparent; pointer-events: none;
  /* grayscale is the .grayscale law: content footage prints b/w. The
     brightness cap is a contrast guarantee — it pins the whitest possible
     frame to 55%, so the scrim maths below holds for ANY footage dropped
     in later rather than only for correctly graded footage. */
  filter: grayscale(1) brightness(0.55);
}
/* Denser at the foot than the head: the display type up top only needs
   enough scrim to clear large-text contrast, the path cards below need
   the ground close to solid so accent-ink keeps its documented 6.0:1. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-bg) 60%, transparent),
    color-mix(in srgb, var(--color-bg) 88%, transparent)
  );
}
.hero-split-inner { position: relative; z-index: 2; }

.hero-ask {
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--leading) 0 var(--space-3);
}

/* Two equal blocks, never a primary and a secondary. The grid gives them
   identical tracks at every width, so neither can out-weigh the other —
   they are told apart by rule colour and numeral, not by size.
   Every measurement here is spent against a ~491px budget: 100svh on an
   iPhone SE, less the 62px masthead. Loosen at your peril. */
.paths { display: grid; gap: var(--space-3); }
.path {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3); row-gap: var(--space-1);
  align-items: baseline;
  padding: var(--space-4);
  border: 2px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-text); text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* the numeral rides the name's baseline instead of costing its own row */
.path-num {
  grid-column: 1; font-size: 13px; line-height: var(--leading);
  letter-spacing: 0.08em;
}
.path-name {
  grid-column: 2;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.015em;
}
.path-line, .path-go { grid-column: 2; }
.path-line {
  font-size: 16px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.path-go { font-size: 15px; line-height: var(--leading); }

/* 01 takes the accent rule, 02 the paper rule — the mark, never a field */
.path-ecom { border-color: var(--color-accent); }
.path-ecom .path-num, .path-ecom .path-go { color: var(--accent-ink); }
.path-local { border-color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.path-local .path-num, .path-local .path-go { color: var(--color-text); }

.path:hover { background: var(--color-bg); }
.path-ecom:hover { border-color: var(--accent-ink); }
.path-local:hover { border-color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .path { transition: none; } }

/* Short viewports — a small phone in landscape, or an SE with every bar
   showing — buy their headroom back out of the padding, not the copy. */
@media (max-height: 600px) {
  .hero-split { padding-block: var(--leading); }
  .hero-ask { margin-top: var(--half); }
}

/* Side by side once there's width for it, still one screen tall */
@media (min-width: 900px) {
  .paths { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .hero-scrim {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-bg) 55%, transparent),
      color-mix(in srgb, var(--color-bg) 78%, transparent)
    );
  }
}
.page-hero { padding: calc(2.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }

.platform-bar {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-top: calc(1.5 * var(--leading));
}
.platform-label {
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.platform-icons { display: flex; align-items: center; gap: var(--space-2); }
.platform-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
}

/* ─── STATS ───────────────────────────────────────── */
/* red stays a MARK here: display-size numerals in the accent */
.stats .grid {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: calc(1.5 * var(--leading)) var(--leading);
}
.stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(32px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  color: var(--color-accent);
  margin: 0; margin-left: -0.045em;
  text-box: trim-both cap alphabetic;
}
.stat-num .unit { font-size: 0.6em; }
.stat-label {
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; max-width: 24ch;
}

/* ─── FEATURE / SERVICE ROWS ──────────────────────── */
/* the ruled-toc grammar: 2px rules ON the seams, red squares at the numbers */
.feature {
  display: grid;
  grid-template-columns: minmax(64px, 140px) minmax(0, 400px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.5 * var(--leading)) 0;
}
.feature + .feature { border-top: 2px solid var(--color-divider); }
.f-num {
  position: relative;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--leading); color: var(--color-text);
  font-feature-settings: "tnum" 1; margin: 0;
  text-box: trim-both cap alphabetic;
}
.f-num::before {
  content: ""; position: absolute; left: -24px; top: calc(0.5cap - 5px);
  width: 10px; height: 10px; background: var(--color-accent);
}
@media (max-width: 1280px) { .f-num::before { display: none; } }
.f-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic;
}
.f-copy {
  font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic;
}
.f-copy + .f-copy { margin-top: var(--leading); }

/* ─── CELL GRIDS ──────────────────────────────────── */
/* equal-width cells divided by rules — no cards, no fills */
.cells {
  display: grid; border-top: 2px solid var(--color-divider);
}
.cells-2 { grid-template-columns: repeat(2, 1fr); }
.cells-3 { grid-template-columns: repeat(3, 1fr); }
.cells-4 { grid-template-columns: repeat(4, 1fr); }

/* Cells carry a gutter on BOTH sides so text clears the rule beside it. The
   first cell of each row drops its left gutter to stay on the page's text
   axis — which column that is depends on how many columns are showing, so
   the rule is restated at each breakpoint below. */
.cell {
  --gut: clamp(20px, 3vw, 40px);
  padding: calc(1.5 * var(--leading)) var(--gut);
  border-bottom: 2px solid var(--color-divider);
  border-right: 1px solid var(--color-divider);
}
.cells-2 .cell:nth-child(2n+1),
.cells-3 .cell:nth-child(3n+1),
.cells-4 .cell:nth-child(4n+1) { padding-left: 0; }
.cell:last-child { border-right: 0; }
.cells-2 .cell:nth-child(2n) { border-right: 0; }
.cells-3 .cell:nth-child(3n) { border-right: 0; }
.cells-4 .cell:nth-child(4n) { border-right: 0; }
.cell > :first-child { margin-top: 0; }

.cell-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; color: var(--accent-ink);
  font-feature-settings: "tnum" 1;
  margin: 0 0 var(--leading);
}
.cell h3 {
  font-size: 20px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0 0 var(--half);
}
.cell p {
  font-size: 15px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ─── THE HYBRID ENGINE ───────────────────────────── */
.engine {
  display: grid; grid-template-columns: 1fr auto 1fr;
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}
.engine-col { padding: calc(1.5 * var(--leading)) clamp(24px, 3vw, 48px) calc(1.5 * var(--leading)) 0; }
.engine-col:last-child { padding-right: 0; padding-left: clamp(24px, 3vw, 48px); }
.engine-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: 0 clamp(16px, 2vw, 32px);
  border-left: 1px solid var(--color-divider);
  border-right: 1px solid var(--color-divider);
}
.engine-loop {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
  font-size: 20px; line-height: 1;
}
.engine-mid-label {
  font-size: 13px; line-height: var(--half); text-align: center;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.engine-col h3 {
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0 0 var(--half);
}

/* ─── LISTS: the mark is a red square ─────────────── */
.sq-list { list-style: none; padding: 0; margin: var(--leading) 0 0; }
.sq-list li {
  position: relative; padding-left: 22px;
  font-size: 15px; line-height: var(--leading);
  margin-bottom: var(--space-2);
}
.sq-list li:last-child { margin-bottom: 0; }
.sq-list li::before {
  content: ""; position: absolute; left: 0; top: calc(0.5cap + 4px);
  width: 8px; height: 8px; background: var(--color-accent);
}

/* ─── PROOF PANEL ─────────────────────────────────── */
.proof { border-top: 2px solid var(--color-divider); }
.proof-figure { border-bottom: 2px solid var(--color-divider); }
.proof-figure img { width: 100%; height: auto; }
.proof-footer {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px);
  padding: calc(1.5 * var(--leading)) 0;
}
.proof-metric {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 4.4vw, 60px); line-height: calc(2 * var(--leading));
  color: var(--color-accent); margin: 0; margin-left: -0.045em;
  text-box: trim-both cap alphabetic;
}
.proof-delta {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading);
  color: var(--color-text); margin: var(--space-2) 0 0;
}
.proof-detail {
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--leading) 0 0; font-feature-settings: "tnum" 1;
}

/* ─── SPLIT (copy + figure) ───────────────────────── */
.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0;
}
.split.reverse .split-copy { order: 2; }
/* grid items default to min-width:auto, which stops a column shrinking below
   the intrinsic width of a wide child (a .doc-scroll document, say) and pushes
   the page sideways. Every grid child here is allowed to shrink. */
.split > *, .proof-footer > *, .cells > *, .contact-grid > * { min-width: 0; }
.split-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 30px; line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; margin: 0;
  text-box: trim-both cap alphabetic;
}

/* ─── FIGURES ─────────────────────────────────────── */
/* every content photograph goes through .grayscale */
.figure-box {
  position: relative; overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.figure-box.r-16-9 { aspect-ratio: 16 / 9; }
.figure-box.r-4-3  { aspect-ratio: 4 / 3; }
.figure-box.r-3-4  { aspect-ratio: 3 / 4; }
.figure-box.r-9-16 { aspect-ratio: 9 / 16; }
.figure-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.figure-empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: start;
  padding: 0 var(--space-4);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.fig-caption {
  font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--space-2) 0 0;
}

.feed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.ba-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ba-label {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0 0 var(--space-2);
}

/* ─── RESULTS GRID ────────────────────────────────── */
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.5 * var(--leading)) var(--leading); }
.result-card { margin: 0; }
.result-caption { margin-top: var(--space-3); }
.result-category {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink);
}
.result-client {
  display: block;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: var(--leading); margin-top: var(--space-1);
}
.result-metric {
  display: block; font-size: 15px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.slot-empty {
  aspect-ratio: 4 / 3;
  border: 2px dashed color-mix(in srgb, var(--color-text) 25%, transparent);
  display: grid; place-content: center; justify-items: start;
  padding: 0 var(--space-6);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ─── QUOTE ───────────────────────────────────────── */
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; max-width: 34ch; margin: 0;
  text-indent: -0.496em; /* hang the opening quote */
  text-box: trim-both cap alphabetic;
}
.quote figcaption {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0;
  text-indent: -1.209em; /* hang the leading em-dash */
  text-box: trim-both cap alphabetic;
}
@media (max-width: 720px) {
  .quote blockquote, .quote figcaption { text-indent: 0; }
}

/* ─── FAQ ─────────────────────────────────────────── */
.faq-list { border-top: 2px solid var(--color-divider); }
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: var(--leading) 0; text-align: left;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: var(--leading); letter-spacing: -0.01em;
  color: var(--color-text);
}
.faq-q:hover { color: var(--color-accent); }
.faq-icon {
  flex: none; width: 12px; height: 12px; position: relative;
  transition: transform 0.2s ease;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: var(--color-accent);
}
.faq-icon::before { left: 0; top: 5px; width: 12px; height: 2px; }
.faq-icon::after { top: 0; left: 5px; width: 2px; height: 12px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.faq-item.open .faq-a { max-height: 420px; }
.faq-a p {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 62ch; margin: 0; padding-bottom: var(--leading);
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon, .faq-a { transition: none; }
}

/* ─── PRICING ─────────────────────────────────────── */
.pricing {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}
.p-card {
  display: flex; flex-direction: column;
  --gut: clamp(20px, 2.4vw, 36px);
  padding: calc(1.5 * var(--leading)) var(--gut);
  border-right: 1px solid var(--color-divider);
}
.p-card:last-child { border-right: 0; }
.p-card:first-child { padding-left: 0; }
.p-card.featured { background: var(--color-surface); }
.p-flag {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 var(--half);
}
.p-tier {
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0 0 var(--space-2);
}
.p-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 28px; line-height: var(--leading); letter-spacing: -0.015em;
  margin: 0 0 var(--half);
}
.p-desc {
  font-size: 15px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 0 0 var(--leading); padding-bottom: var(--leading);
  border-bottom: 1px solid var(--color-divider);
}
.p-price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-2); margin: 0 0 var(--space-2);
}
.p-amount {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 44px); line-height: var(--leading);
  letter-spacing: -0.02em;
}
.p-per, .p-setup {
  font-size: 15px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.p-setup { margin: 0 0 var(--leading); }
/* The performance share is the whole argument against a flat retainer, so it
   gets a drawn panel of its own — never a footnote under the feature list. */
.p-perf {
  border-top: 2px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--half) 0;
}
.p-perf-label {
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 var(--space-2);
}
.p-perf-val { font-size: 15px; line-height: var(--leading); margin: 0; }
.p-perf-num { font-weight: 600; }
.p-inherit {
  font-size: 15px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--leading) 0 0;
}
.p-inherit + .p-features { margin-top: var(--space-2); }
.p-features { margin-bottom: var(--leading); }

/* Everything past the three headline items folds away. Native <details>,
   so it works with no JS at all; site.js only opens it where there is room
   (and hides the summary once it has, via .js-open — without that a
   JS-less desktop would get a hidden summary over hidden content). */
.p-more { margin-bottom: var(--leading); }
.p-more > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); cursor: pointer; list-style: none;
  min-height: 44px; padding: var(--space-2) 0;
  border-top: 1px solid var(--color-divider);
  font-size: 15px; line-height: var(--leading);
  color: var(--accent-ink);
}
.p-more > summary::-webkit-details-marker { display: none; }
.p-more > summary::after { content: "+"; font-size: 19px; line-height: 1; }
.p-more[open] > summary::after { content: "–"; }
.p-more > summary:hover { color: var(--accent-ink-strong); }
.p-more-list { margin-top: var(--space-3); }
.p-more.js-open > summary { display: none; }
.p-more.js-open .p-more-list { margin-top: var(--space-2); }

/* the swipe affordance only exists in the carousel range */
.p-swipe { display: none; }
/* The three feature lists are deliberately uneven — the auto margin drops
   every CTA onto the same baseline regardless. */
.p-card .btn-block { margin-top: auto; }
.list-tight { margin-top: 0; max-width: 56ch; }

/* ─── COUNT-UP FIGURES ────────────────────────────── */
/* Only applied while a figure is animating. Tabular figures keep every
   digit the same advance width, so the number counts in place instead of
   twitching sideways as it passes 9, 99, 999. */
.counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ─── CASE FACTS ──────────────────────────────────── */
/* Every client entry carries the same four rows in the same order, so two
   cases can be compared down a column instead of read as prose. A field we
   can't publish keeps its row and says so — the gap is information too. */
.case-facts { margin: 0 0 calc(2 * var(--leading)); }
.case-row {
  display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: var(--space-1) clamp(24px, 4vw, 64px);
  padding: var(--half) 0;
  border-bottom: 1px solid var(--color-divider);
}
.case-row:first-child { border-top: 2px solid var(--color-divider); }
.case-facts dt {
  font-size: 13px; line-height: var(--leading);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.case-facts dd {
  margin: 0; font-size: 16px; line-height: var(--leading);
  max-width: 62ch;
}

.case-cells { margin-top: calc(2 * var(--leading)); }
.case-more { margin-top: calc(2.5 * var(--leading)); }
.case-more-head {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.case-more + .proof, .case-more + figure { margin-top: var(--leading); }

@media (max-width: 720px) {
  .case-row { grid-template-columns: minmax(0, 1fr); }
}

/* ─── ROADMAP ─────────────────────────────────────── */
/* A track of numbered stops, swiped on a phone and laid out end to end
   wherever the columns fit. Drawn the way the rest of the system draws
   structure: 2px rules, the accent spent only on the arrowheads.
   Column count comes from grid-auto-flow, so adding or dropping a step
   is a markup edit and never a stylesheet one. */
.road {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-6);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  margin-inline: calc(var(--edge) * -1);
  padding: var(--space-2) var(--edge) var(--leading);
  scrollbar-width: none;
}
.road::-webkit-scrollbar { display: none; }
.road:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }

.road-step {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: center;
  border: 2px solid var(--color-divider);
  padding: var(--space-4);
}
/* the arrowhead lives in the gutter between two stops */
.road-step:not(:last-child)::after {
  content: ""; position: absolute;
  right: calc(var(--space-6) * -1 + 7px); top: 30px;
  width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 9px solid var(--color-accent);
}
.road-num {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 2px solid var(--color-divider);
  font-size: 13px; letter-spacing: 0.08em;
  font-feature-settings: "tnum" 1;
  margin-bottom: var(--space-3);
}
.road-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.road-copy {
  font-size: 16px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  margin: 0; max-width: 52ch;
}

.road-swipe {
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin: 0;
}

@media (min-width: 900px) {
  /* one track, no swipe: as many equal columns as there are stops */
  .road {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 0 var(--space-6);
    overflow: visible; margin-inline: 0; padding: 0;
  }
  .road-step { border: 0; padding: 0; }
  /* the spine turns and runs along the top, badge to badge */
  .road-step:not(:last-child)::before {
    content: ""; position: absolute;
    left: 44px; right: calc(var(--space-6) * -1 + 9px);
    top: 17px; height: 2px; background: var(--color-divider);
  }
  .road-step:not(:last-child)::after {
    right: calc(var(--space-6) * -1); top: 11px;
  }
  .road-swipe { display: none; }
}

/* ─── PROCESS STEPS ───────────────────────────────── */
/* process.html has used .ps-full since the rebuild, but the class was
   never defined in any stylesheet — the four steps stacked unstyled and
   each STEP number collided with the list above it. Same label-column
   geometry as .feature and .deliv-row, so it now matches the system. */
.ps-full {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px);
  padding: calc(1.5 * var(--leading)) 0;
}
.ps-full + .ps-full { border-top: 2px solid var(--color-divider); }
.ps-full-left .cell-num { margin: 0 0 var(--space-2); }
.ps-full-left h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic;
}
.ps-full-right > :first-child { margin-top: 0; }
@media (max-width: 900px) {
  .ps-full { grid-template-columns: minmax(0, 1fr); gap: var(--half); }
}

/* ─── DELIVERABLE / DETAIL ROWS ───────────────────── */
.deliv-row {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--space-3) clamp(24px, 4vw, 64px);
  padding: var(--leading) 0;
  border-bottom: 1px solid var(--color-divider);
}
.deliv-row:first-of-type { border-top: 2px solid var(--color-divider); }
.deliv-row h4 { font-size: 17px; line-height: var(--leading); margin: 0; }
.deliv-row p {
  font-size: 15px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ─── CONTACT ─────────────────────────────────────── */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(2 * var(--leading)) clamp(32px, 5vw, 88px); align-items: start;
}
.contact-detail {
  padding: var(--leading) 0;
  border-bottom: 1px solid var(--color-divider);
}
.contact-detail:first-of-type { border-top: 2px solid var(--color-divider); }
.contact-detail h4 {
  font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0 0 var(--space-2);
}
.contact-detail p { font-size: 16px; line-height: var(--leading); margin: 0; }

.field { margin-bottom: var(--space-4); }
.form-note {
  font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--space-3) 0 0;
}

.embed-box {
  border: 2px solid var(--color-divider);
  background: var(--color-surface);
  min-height: 460px;
  display: grid; align-content: center; justify-items: start;
  padding: var(--space-8);
}
.embed-box iframe { width: 100%; min-height: 600px; border: 0; }
.embed-box h3 { font-size: 20px; line-height: var(--leading); margin: 0 0 var(--space-2); }
.embed-box p {
  font-size: 15px; line-height: var(--leading); max-width: 34ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 0 0 var(--space-3);
}
.embed-box code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--accent-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  padding: var(--space-1) var(--space-2);
}
.embed-box .btn { margin-top: var(--space-2); }

/* ─── CAL.COM ─────────────────────────────────────── */
/* The scheduler sits in a ruled frame like any other document on the page —
   2px edge, zero radius, no float. Cal.com auto-resizes its own iframe, so
   the frame only sets a floor to stop the page jumping while it loads. */
.cal-frame {
  border: 2px solid var(--color-divider);
  background: var(--color-surface);
  min-width: 300px; min-height: 620px;
  overflow: hidden;
}
.cal-frame iframe { width: 100%; border: 0; display: block; }

/* while the third-party script is still in flight */
.cal-frame:empty::before {
  content: "Loading the calendar\2026";
  display: grid; place-content: center; min-height: 620px;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
@media (max-width: 620px) {
  .cal-frame, .cal-frame:empty::before { min-height: 560px; }
}

/* ─── THE RED POSTER CLOSE ────────────────────────── */
/* the accent's one field moment — type is display-grade only */
.close { background: var(--color-accent); color: var(--color-bg); }
.close .wrap {
  padding-top: calc(3 * var(--leading));
  padding-bottom: calc(3 * var(--leading));
}
.close h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: clamp(36px, 4.45vw, 59.4px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
  text-box: trim-both cap alphabetic;
}
.close h2 .line { display: block; }
.close .row { margin-top: calc(1.5 * var(--leading)); align-items: center; }
/* Nothing but display type and CONTROLS ride the red field: paper-on-red
   measures 3.8:1 — the system's documented interface-chrome bar, not a body
   -copy one. Supporting sentences live in the ruled block above the band. */
.close .btn-ghost { color: var(--color-bg); border-color: var(--color-bg); }
.close .btn-ghost:hover { background: color-mix(in srgb, #f3f2f2 16%, transparent); }
.close .btn-primary { background: var(--color-bg); color: var(--accent-ink); }
.close .btn-primary:hover { background: #fff; }
.close :focus-visible { outline-color: var(--color-bg); }

/* the ruled lead-in that carries the close's supporting copy */
.pre-close { padding: calc(2 * var(--leading)) 0; border-top: 2px solid var(--color-divider); }
.pre-close .note { margin-top: 0; max-width: 56ch; }

/* ─── MINI CTA (ruled, not filled) ────────────────── */
.mini-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--leading); flex-wrap: wrap;
  padding: calc(2 * var(--leading)) 0;
  border-top: 2px solid var(--color-divider);
}
.mini-cta h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 32px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; margin: 0;
}
.mini-cta h3 .line { display: block; }

/* ─── FOOTER ──────────────────────────────────────── */
footer.site-footer {
  border-top: 2px solid var(--color-divider);
  padding: calc(2 * var(--leading)) 0;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--leading); flex-wrap: wrap;
}
.footer-brand { display: inline-flex; align-items: center; }
.footer-brand .logo-svg { height: 22px; width: auto; display: block; overflow: visible; }
.footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-links a {
  font-size: 14px; color: var(--color-text); text-decoration: none;
}
.footer-links a:hover { color: var(--color-accent); }
.footer-copy {
  font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ─── SCROLL REVEAL ───────────────────────────────── */
.fi { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; }
.fi.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fi { opacity: 1; transform: none; transition: none; }
}

/* ─── WIDE DOCUMENTS ──────────────────────────────── */
/* A dashboard is a wide document. Rather than shrink it to illegibility on a
   phone, it keeps a readable width and scrolls inside its own frame — the
   numbers are restated as text beside it either way. */
.doc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc-scroll img { width: 100%; min-width: 560px; }
.doc-scroll::-webkit-scrollbar { height: 3px; }
.doc-scroll::-webkit-scrollbar-thumb { background: var(--color-divider); }

/* Where the document is genuinely wider than the screen, say so — a silent
   overflow reads as a cropped image rather than something you can drag. */
.doc-scroll::after { content: none; }
@media (max-width: 620px) {
  .doc-scroll + .doc-hint { display: block; }
}
.doc-hint {
  display: none;
  font-size: 13px; line-height: var(--leading);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: var(--space-2) 0 0;
}

.cell-link { margin: var(--leading) 0 0; }
.roas-strip { border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); padding: var(--leading) 0; }

/* ─── RESPONSIVE COLLAPSE ─────────────────────────── */
@media (max-width: 1080px) {
  .cells-4 { grid-template-columns: repeat(2, 1fr); }
  .cells-4 .cell:nth-child(4n) { border-right: 1px solid var(--color-divider); }
  .cells-4 .cell:nth-child(2n) { border-right: 0; }
  .cells-4 .cell { padding-left: var(--gut); }
  .cells-4 .cell:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
  .engine { grid-template-columns: minmax(0, 1fr); }
  .engine-col, .engine-col:last-child { padding: calc(1.5 * var(--leading)) 0; padding-left: 0; }
  .engine-col:first-child { border-bottom: 1px solid var(--color-divider); }
  .engine-mid {
    flex-direction: row; padding: var(--leading) 0;
    border-left: 0; border-right: 0;
    border-bottom: 1px solid var(--color-divider);
    justify-content: flex-start; gap: var(--space-3);
  }
  .engine-mid-label { text-align: left; }
  .pricing { grid-template-columns: 1fr; }
  .p-card { border-right: 0; border-bottom: 1px solid var(--color-divider); padding-inline: 0; }
  .p-card:last-child { border-bottom: 0; }
  /* Stacked, the featured card's tint bleeds past the text axis instead of
     insetting its text — so all three cards' copy still starts on one line. */
  .p-card.featured {
    padding-inline: var(--gut);
    margin-inline: calc(var(--gut) * -1);
  }
  .contact-grid { grid-template-columns: 1fr; }
  .cells-3 { grid-template-columns: repeat(2, 1fr); }
  .cells-3 .cell:nth-child(3n) { border-right: 1px solid var(--color-divider); }
  .cells-3 .cell:nth-child(2n) { border-right: 0; }
  .cells-3 .cell { padding-left: var(--gut); }
  .cells-3 .cell:nth-child(2n+1) { padding-left: 0; }
  .feed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2 * var(--leading)); }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split.reverse .split-copy { order: 0; }
  .split-figure { order: -1; }
  .proof-footer { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .deliv-row { grid-template-columns: 1fr; }
  .ba-compare { grid-template-columns: 1fr; }

  /* ── CUT FROM THE PHONE ──
     Kept in the markup (desktop still shows them, crawlers still read
     them) and taken off the small screen only where they repeat something
     already on the page. Anything carrying its own meaning stays. */
  /* identical on all three tier cards; once is enough when you swipe */
  .p-perf-note { display: none; }
  /* .m-hide: whole blocks that earn their place on a wide screen and not
     on a phone. Applied in the markup so it is greppable, never guessed. */
  .m-hide { display: none; }

  /* ── PRICING AS ONE SWIPEABLE ROW ──
     Stacked, the three tiers ran 6.1 screens of solid bullet list and
     nobody reads that on a phone. One row, one card at a time, the next
     one peeking so it's obvious there are more. This is the same
     deliberate horizontal scroll .doc-scroll already uses for dashboards
     — the page itself still never scrolls sideways.
     Selectors are .pricing .p-card so they outrank the :first-child /
     :last-child edge rules the desktop grid relies on. */
  .pricing {
    display: flex; gap: var(--space-3);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    margin-inline: calc(var(--edge) * -1);
    padding: var(--leading) var(--edge);
    border: 0;
    scrollbar-width: none;
  }
  .pricing::-webkit-scrollbar { display: none; }
  .pricing .p-card {
    flex: 0 0 86%;
    scroll-snap-align: center;
    border: 2px solid var(--color-divider);
    padding: var(--space-4);
    margin-inline: 0;
  }
  .pricing .p-card.featured {
    border-color: var(--color-accent);
    background: var(--color-surface);
  }
  /* Close the cluster gaps up. Desktop spends a full leading unit between
     blocks because it has the column height to spend; a swipe card does
     not, and every unit saved is a line of the offer above the fold. */
  .pricing .p-desc { padding-bottom: var(--half); margin-bottom: var(--half); }
  .pricing .p-setup { margin-bottom: var(--half); }
  .pricing .p-perf { padding: var(--space-2) 0; }
  .pricing .p-features { margin-top: var(--half); margin-bottom: var(--half); }
  .pricing .p-inherit { margin-top: var(--half); }
  .pricing .p-more { margin-bottom: var(--half); }
  .p-swipe {
    display: block;
    font-size: 13px; line-height: var(--half);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    margin: 0;
  }
}
@media (max-width: 560px) {
  .cells-2, .cells-3, .cells-4 { grid-template-columns: 1fr; }
  .cell { border-right: 0 !important; padding-inline: 0 !important; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════
   PHONE
   The rhythm relaxes: the leading unit drops a notch so blocks don't run
   off the bottom of a small screen, and every control clears 44px.
═══════════════════════════════════════════════════ */
@media (max-width: 620px) {
  :root { --leading: 24px; --half: 12px; }

  /* controls: thumb-sized, and the primary action goes full width */
  .btn { min-height: 46px; padding-inline: var(--space-4); font-size: 15px; }
  .btn-ghost { min-height: 44px; padding-inline: 0; }
  .row { gap: var(--space-2); }
  .row .btn:not(.btn-ghost) { width: 100%; justify-content: flex-start; }

  /* the masthead keeps the brand and one action; the rest is behind the menu */
  nav.nav { gap: var(--space-2); padding-block: var(--space-2); }
  .nav-brand .logo-svg { height: 24px; }
  .nav .btn.nav-cta { min-height: 44px; padding-inline: var(--space-3); font-size: 13px; }
  .nav-toggle { width: 44px; height: 44px; }
  .mobile-menu a { padding: var(--space-4) 0; font-size: 17px; }

  /* display type: the optical hang is measured for large caps — at phone
     sizes it just pushes the first letter off the gutter */
  .display { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.06; margin-left: -0.03em; }
  .h-section { font-size: clamp(26px, 8vw, 34px); line-height: 1.08; margin-left: -0.03em; }
  .close h2 { font-size: clamp(30px, 9vw, 40px); line-height: 1.06; margin-left: -0.03em; }

  .hero { padding: calc(2 * var(--leading)) 0 calc(2 * var(--leading)); }
  .page-hero { padding: calc(1.5 * var(--leading)) 0 calc(2 * var(--leading)); }
  .section { padding: calc(2 * var(--leading)) 0; }
  .section-head { margin-bottom: calc(1.5 * var(--leading)); }
  .lede { font-size: 16px; }
  .note, .f-copy { font-size: 15px; }

  /* stats stack two-up and shed the display scale */
  .stats .grid { gap: calc(1.25 * var(--leading)) var(--space-4); }
  .stat-num { font-size: 30px; line-height: calc(1.5 * var(--leading)); margin-left: -0.03em; }
  .stat-label { font-size: 11px; letter-spacing: 0.06em; }

  .feature { padding: calc(1.25 * var(--leading)) 0; }
  .f-title { font-size: 21px; }
  .f-num { font-size: 13px; }

  .cell { padding: calc(1.25 * var(--leading)) 0; }
  .cell h3 { font-size: 19px; }

  .proof-metric { font-size: 40px; line-height: calc(1.5 * var(--leading)); }
  .proof-footer { padding: calc(1.25 * var(--leading)) 0; gap: var(--leading); }

  .faq-q { font-size: 16px; padding: var(--leading) 0; gap: var(--space-4); }
  .faq-a p { font-size: 15px; }

  .quote { padding: calc(2 * var(--leading)) 0; }
  .quote blockquote { font-size: 22px; line-height: 1.28; }

  .engine-mid { padding: var(--leading) 0; }
  .mini-cta { padding: calc(1.5 * var(--leading)) 0; }
  .close .wrap { padding-top: calc(2 * var(--leading)); padding-bottom: calc(2 * var(--leading)); }
  .embed-box { min-height: 0; padding: var(--space-6); }

  .platform-bar { gap: var(--space-2); }
  .footer-links { gap: var(--space-3) var(--space-4); }
}

/* very narrow phones */
@media (max-width: 380px) {
  .stats .grid { grid-template-columns: 1fr; }
  .display { font-size: 32px; }
}