@import url("fonts.css?v=r46");

/* ==========================================================================
   Kinetiq Political Insights - site design system
   Canonical tokens: brand/tokens.json $.color.sub-brand.kpi (palette) and the
   NMI web design system (references/brands/nmi-web-design-system.md) for type,
   corners and motion. Ruled 2026-08-21: Inter-led sans throughout to match the
   live kpipolitical.com; the serif-headline signature is retired. Sharp corners.
   Lime is accent only, never partisan.
   ========================================================================== */

:root {
  /* --- core palette (canonical, do not fork) --- */
  --navy: #1B4F72;
  --navy-deep: #0D2E4A;
  --navy-ink: #08243B;
  --blue: #2D8BBA;
  --blue-light: #5B9BD5;
  --teal: #00ACC1;
  --lime: #A8D14E;
  --lime-dark: #7CB342;
  --lime-text: #4F7A25;      /* AA on white, 4.6:1 - the only lime for text */

  /* --- neutrals --- */
  --white: #FFFFFF;
  --paper: #F7F9FB;
  --paper-warm: #F2F5F8;
  --tint: #EBF2F8;           /* section-tint ground; --paper stays for cards */
  --rule: #DCE4EC;
  --rule-soft: #E9EFF4;
  --ink: #14232F;
  --ink-2: #40566A;
  /* --ink-3 carries the small type: deks, captions, table notes, stat labels.
     The lighter #6B8299 measured 3.98:1 on white and 3.77:1 on --paper, both
     under the 4.5:1 AA threshold for normal-size text. This value clears AA on
     both grounds (5.12:1 and 4.85:1). */
  --ink-3: #5B7085;
  /* --blue is a fill and stroke color; at 3.81:1 on white it cannot carry text.
     Label text (eyebrows, card keys, category tags) uses --blue-text, 5.63:1. */
  --blue-text: #1F6E96;

  /* --- recreation (mockup) neutrals: the recurring grays inside rc- product
     recreations, promoted to tokens so the cards share one ink system. --- */
  --mock-ink: #0D2E4A;
  --mock-rule: #D9E2E9;
  --mock-dim: #5A6B7C;

  /* --- partisan encoding. Separate system. Never mixes with brand colors. --- */
  --dem: #2C5F9E;
  --rep: #97ABBC; /* party ink law: D navy / R slate — no red (r131 ruling) */
  --dem-soft: #C8D8EC;
  --rep-soft: #EBC8CC;

  /* --- type --- */
  /* r33 type system (owner: "not loving the fonts", 8/27): editorial serif for
     the big statements, condensed caps for labels, Inter for reading, mono for
     numbers. Serif returns at display size only — h1/h2 — never in body text. */
  --display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --label: 'Barlow Condensed', 'Arial Narrow', 'Inter', sans-serif;
  /* r36 (owner, 8/28): the terminal mono is retired. Figures set in Inter
     with tabular numerals — the same face the shipping product uses. */
  --mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- space + shape --- */
  --gut: clamp(20px, 4vw, 48px);
  --max: 1240px;
  --max-read: 68ch;
  --r: 6px;
  --r-lg: 16px;   /* Wave 3 card pass (2026-08-21): live-site card language, 16px radii */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --shadow: 0 1px 2px rgba(13,46,74,.06), 0 8px 24px rgba(13,46,74,.08);
  --shadow-lg: 0 2px 4px rgba(13,46,74,.08), 0 24px 60px rgba(13,46,74,.16);
  --nav-h: 78px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
  /* No overflow-x here: it turns body into a scroll container, and every
     position:sticky child (the nav, the runway pins) sticks to a scrollport
     that never moves. html carries the horizontal clip alone. */
}
html { overflow-x: hidden; overscroll-behavior-x: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 800; line-height: 1.08; letter-spacing: -.022em; margin: 0 0 .5em; text-wrap: balance; }
/* The serif carries only one weight (400): display sizes give it presence,
   and nothing inside h1/h2 may ask for bold — synthesis stays off. */
h1, h2 { font-family: var(--display); font-weight: 400; font-synthesis-weight: none; }
h1 { font-size: clamp(2.9rem, 7.2vw, 6.1rem); letter-spacing: -.018em; line-height: 1.02; }
h2 { font-size: clamp(2.05rem, 4vw, 3.35rem); letter-spacing: -.014em; line-height: 1.1; }
h1 b, h1 strong, h2 b, h2 strong { font-weight: 400; }
/* Light-ground display type reads navy-deep; dark-section and hero overrides
   below carry higher specificity and still win. */
h1, h2 { color: var(--navy-deep); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.22; font-weight: 700; }
h4 { font-size: 1.03rem; line-height: 1.3; font-weight: 700; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: var(--navy); text-decoration-color: color-mix(in srgb, var(--navy) 32%, transparent); text-underline-offset: .18em; transition: color .16s ease-out, text-decoration-color .16s ease-out; }
a:hover { color: var(--blue); text-decoration-color: currentColor; }
strong, b { font-weight: 650; }
em { font-style: italic; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .38em; }
li::marker { color: var(--blue-text); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--lime) 55%, transparent); color: var(--navy-ink); }

/* ---------- layout ---------- */
.wrap { width: min(100% - (var(--gut) * 2), var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gut) * 2), 860px); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
/* Statement moments get the mega tier; everything else keeps the base rhythm.
   Bottom padding is tighter than top: the closing CTA sits ~80-100px above the
   band edge instead of trailing a dead navy tail into the footer. */
/* r112 (Adam): the closer states, it does not sprawl. */
.section--mega { padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px); }
.h-display { font-size: clamp(2.3rem, 4.8vw, 3.7rem); letter-spacing: -.032em; font-weight: 850; }
.section--tint { background: var(--tint); }
.section--warm { background: var(--paper-warm); }
/* Statement band, light (ruling 9, 2026-08-24: the live site's light branding is
   the system; the navy statement bands are retired). A washed paper-to-tint
   ground with soft teal and blue radials carries the "chapter moment" weight;
   the 3px gradient seam stays as the thin brand accent. Dark survives only
   inside product-surface chrome (console bars, player frames, receipt cards). */
.section--band {
  background:
    radial-gradient(820px 460px at 88% -8%, rgba(0,172,193,.09), transparent 60%),
    radial-gradient(640px 420px at 6% 104%, rgba(91,155,213,.10), transparent 58%),
    linear-gradient(180deg, var(--paper) 0%, var(--tint) 100%);
}
/* Branded 3px seam opens every statement band. Where scroll-driven animation is
   supported it draws in on entry; elsewhere it is simply present. */
.section--band::after, .cta-final::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 40%, var(--lime) 100%);
}
/* r89: the band seam prints drawn everywhere — the view() draw was Chrome-only. */
@keyframes draw-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .section--band::after, .cta-final::after { animation: none; transform: none; }
}
.section + .section--tint, .section--tint + .section,
.section + .section--warm, .section--warm + .section { border-top: 1px solid var(--rule-soft); }

.rule-tri { height: 3px; border: 0; margin: 0; background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 40%, var(--lime) 100%); }

.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.8vw, 36px); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  /* P10: 2-up app cards at 375px render screenshots ~95px tall. Full-width reads. */
  .grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.split { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } .split--wide-left { grid-template-columns: 1.4fr .6fr; } .split--wide-right { grid-template-columns: .6fr 1.4fr; } }
.stack > * + * { margin-top: 1.1rem; }

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--label); font-weight: 600; font-size: .84rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--blue-text);
  margin: 0 0 .7rem; display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--lime); flex: none; }
.eyebrow--plain::before { display: none; }

.lede { font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.56; color: var(--ink-2); max-width: 62ch; }
.dek { font-size: .95rem; line-height: 1.5; color: var(--ink-3); max-width: 72ch; }
.small { font-size: .87rem; line-height: 1.5; color: var(--ink-3); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
/* R6 (item 17): inline-mono figures inside running copy never break mid-phrase. */
p .num, .lede .num, .hero-banner .num { white-space: nowrap; }
.caps { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: 1em; }
.serif-accent {
  font-style: italic; font-weight: 400;
  background: linear-gradient(92deg, var(--blue) 0%, #007A8A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lede { margin-inline: auto; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  /* Final perf pass (ruling 39a): the sticky bar repaints on every scroll frame,
     so it carries no backdrop-filter. Opaque ground, zero per-frame paint. */
  background: var(--navy-ink);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nav__in { display: flex; align-items: center; gap: 1.5rem; height: 100%; }
/* Masthead uses the official full lockup artwork. Never set the wordmark in type:
   Barlow Condensed is close enough to the real letterforms to look deliberate and
   wrong. Asset manifest: brand/tokens.json, kpi.assets.logo-reverse. */
.nav__brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; flex: none; }
.nav__brand img { height: 56px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.nav__home { display: none; }
.nav__links a {
  font-family: var(--sans); font-size: .93rem; font-weight: 500; color: #CBDCE9;
  text-decoration: none; padding: .45rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav__links a:hover { color: #fff; border-bottom-color: rgba(168,209,78,.5); }
.nav__links a[aria-current="page"] { color: #fff; border-bottom-color: var(--lime); }

/* Hover submenus: key destinations under each section, so nobody has to
   scroll a long page to find the thing they came for. Desktop hover +
   keyboard focus; the phone burger stays page-level. */
.nav__item { position: relative; }
.nav__drop { display: none; }
@media (min-width: 1041px) and (hover: hover) {
  .nav__drop { display: block; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px); padding-top: 14px;
    opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; }
  .nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .nav__drop::before { content: ""; position: absolute; left: 50%; top: 8px; width: 10px; height: 10px;
    transform: translateX(-50%) rotate(45deg); background: var(--white);
    border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
  .nav__drop a { display: block; white-space: nowrap; background: var(--white);
    padding: .52rem .95rem; font-size: .88rem; font-weight: 600; color: var(--ink-2);
    border: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
  .nav__drop a::after { content: none; }
  .nav__drop a:first-child { border-top: 1px solid var(--rule); border-radius: 10px 10px 0 0; padding-top: .68rem; }
  .nav__drop a:last-child { border-bottom: 1px solid var(--rule); border-radius: 0 0 10px 10px; padding-bottom: .68rem;
    box-shadow: 0 14px 30px rgba(13,46,74,.14); }
  .nav__drop a:hover { color: var(--navy-deep); background: color-mix(in srgb, var(--lime) 12%, var(--white)); }
}
/* Scroll response: the bar earns a shadow and a lime edge once the page moves.
   --nav-h itself is never animated. */
.nav { transition: box-shadow .35s var(--smooth), border-color .35s var(--smooth); }
.nav--scrolled { box-shadow: 0 10px 30px rgba(5,20,35,.35); border-bottom-color: rgba(168,209,78,.28); }
/* Desktop-only animated underline; the mobile drawer keeps its row separators. */
@media (min-width: 1041px) {
  .nav__links a { position: relative; border-bottom: 0; }
  .nav__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--lime); opacity: .55;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .28s var(--smooth), opacity .2s ease-out;
  }
  .nav__links a:hover::after { transform: scaleX(1); }
  .nav__links a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }
}
.nav__cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav__toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: var(--r); padding: .4rem .6rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 600; cursor: pointer; }
/* The drawer's own Log in item. Desktop already shows Log in in the CTA cluster,
   so this row exists only for the drawer, where the ghost button is hidden and a
   subscriber otherwise has to scroll to the footer. */
.nav__login { display: none; }
@media (max-width: 1040px) {
  .nav__links, .nav__cta .btn--ghost, .nav__cta .btn--outline { display: none; }
  .nav__toggle { display: block; min-height: 44px; }
  /* Announcement traffic arrives on a phone. The two header taps it uses most
     get the 44px comfort floor. */
  .nav__cta .btn { min-height: 44px; }
  .nav__login { display: list-item; }
  /* align-items: stretch, not flex-start: a column-flex li shrinks to its text
     under flex-start, which turns the full-row links back into text-wide taps. */
  .nav[data-open="true"] .nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--navy-ink); padding: .5rem var(--gut) 1.1rem; border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .nav[data-open="true"] .nav__links li { margin: 0; }
  .nav[data-open="true"] .nav__home { display: block; }
  /* display:block, not just width: an inline anchor ignores width, which leaves
     the hit area text-wide instead of full-row. */
  .nav[data-open="true"] .nav__links a { display: block; padding: .75rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  /* R6 (item 69): an open drawer dims the page behind it. The scrim is part of
     the nav's stacking context at z:-1, so the drawer and bar paint above it;
     site.js closes the drawer on a scrim tap. */
  .nav[data-open="true"]::after {
    content: ""; position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0;
    background: rgba(8, 48, 80, .35); z-index: -1;
  }
}
/* Below ~430px the mark, the wordmark, a CTA and the toggle no longer fit on one
   line. The wordmark goes first: the mark still carries the brand, and clipping
   the menu button would cost the reader navigation entirely. */
@media (max-width: 430px) {
  .nav__in { gap: .7rem; }
  .nav__brand img { height: 40px; }
  .nav__cta .btn { font-size: .82rem; padding: .5rem .7rem; }
}
/* At 320-360px even that row runs ~5px wide: tighten the gaps and the CTA once more. */
@media (max-width: 360px) {
  .nav__in { gap: .45rem; }
  .nav__cta { gap: .4rem; }
  .nav__brand img { height: 36px; }
  .nav__cta .btn { font-size: .78rem; padding: .5rem .55rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .08em;
  font-size: 1.02rem; font-weight: 700; line-height: 1;
  padding: .82rem 1.35rem; border-radius: var(--r); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .16s, color .16s, border-color .16s, transform .16s, box-shadow .16s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.btn--lime { background: var(--lime); color: var(--navy-ink); border-color: var(--lime); }
.btn--lime:hover { background: #B8DC64; color: var(--navy-ink); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(168,209,78,.32); }
/* One-way sheen on the filled variants: sweeps across on hover, snaps home
   invisibly on mouse-out (no transition in the base state). Focus rings are
   outline-based, so overflow:hidden never clips them. */
.btn--lime, .btn--navy { position: relative; overflow: visible; transition: background .16s, color .16s, border-color .16s, transform .16s, box-shadow .16s, padding .22s var(--smooth); }
/* The detection ping: the boards' live-dot blinks in and pings like a radar
   contact; the label slides over to make room. Keyboard focus gets the same
   moment; reduced motion keeps the dot and drops the ping. */
.btn--lime::before, .btn--navy::before {
  content: ""; position: absolute; left: 1.05rem; top: 50%;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  transform: scale(0); transition: transform .18s var(--smooth);
}
.btn--lime::before { background: var(--navy-deep); }
.btn--navy::before { background: var(--lime); }
.btn--lime:hover, .btn--navy:hover, .btn--lime:focus-visible, .btn--navy:focus-visible { padding-left: 2.15rem; }
.btn--lime:hover::before, .btn--navy:hover::before,
.btn--lime:focus-visible::before, .btn--navy:focus-visible::before {
  transform: scale(1); animation: btn-ping 1s var(--smooth) .12s 2;
}
.btn--lime:hover::before { box-shadow: 0 0 0 0 rgba(13,46,74,.45); }
.btn--navy:hover::before { box-shadow: 0 0 0 0 rgba(168,209,78,.55); }
@keyframes btn-ping {
  0% { box-shadow: 0 0 0 0 rgba(168,209,78,.5); }
  100% { box-shadow: 0 0 0 12px rgba(168,209,78,0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--lime:hover::before, .btn--navy:hover::before,
  .btn--lime:focus-visible::before, .btn--navy:focus-visible::before { animation: none; }
}
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,46,74,.26); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); background: rgba(255,255,255,.05); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--rule); }
.btn--outline:hover { border-color: var(--navy); color: var(--navy); background: color-mix(in srgb, var(--navy) 4%, transparent); box-shadow: var(--shadow); }
.btn--sm { font-size: .87rem; padding: .58rem 1rem; }
.btn--lg { font-size: 1.08rem; padding: 1.05rem 1.9rem; font-weight: 700; letter-spacing: .01em; }
/* On a phone the small buttons are conversion actions (the per-item request
   buttons on resources especially), so they get the 44px comfort floor there. */
@media (max-width: 880px) { .btn--sm { min-height: 44px; } }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- hero ----------
   Ruling 9 (2026-08-24): every hero is the live site's light hero. White ground,
   soft teal and blue washes, navy display type; product surfaces float on it as
   dark cards. .hero--light remains in older markup as a harmless alias. */
.hero {
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(0,172,193,.10), transparent 60%),
    radial-gradient(760px 440px at 90% 2%, rgba(91,155,213,.13), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
  color: var(--ink); padding: clamp(56px, 8vw, 108px) 0 0; position: relative; overflow: hidden;
}
.hero > * { position: relative; }
.hero .eyebrow { color: var(--blue-text); }
.hero .eyebrow::before { background: var(--teal); }
.hero .feed__note { color: var(--ink-3); }
/* Gradient accent word, lime-led: the brightest object in the first viewport. */
.grad {
  background: linear-gradient(94deg, #B8DC6A 0%, var(--lime) 40%, var(--teal) 135%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: normal;
}
@supports not (-webkit-background-clip: text) {
  .grad { color: var(--lime); background: none; }
}
/* Light-hero opener wash for pages that open on white (contact). */
.hero-wash {
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(0,172,193,.10), transparent 60%),
    radial-gradient(760px 440px at 90% 2%, rgba(91,155,213,.13), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
}

/* Scroll affordance, straight from the live site. */
.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem 0 1.4rem; font-family: var(--label); text-transform: uppercase;
  letter-spacing: .16em; font-size: .62rem; font-weight: 600; color: var(--ink-3);
  transition: opacity .45s var(--smooth);
}
.is-scrolled .scroll-hint { opacity: 0; }
.scroll-hint svg { width: 16px; height: 16px; animation: hint-bob 2.2s var(--smooth) 8; }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 40%, var(--lime) 100%);
}
.hero h1 { color: var(--navy-deep); max-width: 17ch; }
/* The accent word takes the brand's green-to-teal gradient. --lime-dark leads
   so the light end still reads at display size on the pale ground. */
.hero h1 em {
  font-style: normal; font-weight: 800;
  background: linear-gradient(94deg, var(--lime-dark) 0%, var(--teal) 50%, var(--lime-dark) 100%);
  background-size: 250% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The accent breathes: a barely-perceptible drift across the same two brand
   colors, ~18s per pass. Owner-approved flourish (8/28); reduced motion kills it. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 em { animation: hero-grad-drift 18s ease-in-out infinite; }
}
@keyframes hero-grad-drift {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
@supports not (-webkit-background-clip: text) {
  .hero h1 em { color: var(--teal); background: none; }
}
.hero .lede { color: var(--ink-2); font-size: clamp(1.12rem, 1.7vw, 1.36rem); max-width: 56ch; }
/* On a phone the hero has to seat the claim, the qualifier and a way to act inside
   one screen. Everything below tightens to buy that, without dropping any copy. */
@media (max-width: 560px) {
  .hero { padding-top: clamp(36px, 8vw, 56px); }
  h1 { font-size: clamp(2.25rem, 9.5vw, 2.9rem); line-height: 1.06; }
  .hero .lede { font-size: 1.02rem; line-height: 1.5; }
  .hero .btn-row { margin-top: 1.35rem; }
  .hero .btn { flex: 1 1 auto; }
}

/* ---------- stat rail ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
/* Phone: a deterministic two-column grid, and an odd last cell spans the row so
   the rail never ends beside a dangling empty cell. */
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Intermediate widths can wrap a four-cell rail 3+1; the last cell absorbs the
   rest of its row so the rail never ends beside empty grey tracks. */
.stats > .stat:last-child { grid-column: auto / -1; }
.stat { background: var(--white); padding: 1.5rem 1.35rem; box-shadow: inset 0 3px 0 var(--lime); }
.stat__v { font-family: var(--mono); font-weight: 800; font-size: clamp(2.5rem, 4.6vw, 3.9rem); line-height: 1.05; color: var(--navy); letter-spacing: -.03em; }
/* Two-up phone tiles get narrow; the longest mono numeral ("10,000+") must still
   fit its tile, so the value steps down with the viewport instead of clipping. */
@media (max-width: 560px) {
  .stat__v { font-size: clamp(1.35rem, 7vw, 2.5rem); }
}
.stat__l { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 600; color: var(--ink-3); margin-top: .35rem; line-height: 1.25; }
.stat__s { font-size: .78rem; color: var(--ink-3); margin-top: .3rem; line-height: 1.35; }

/* ---------- the honesty stamp: the component no competitor ships ---------- */
.stamp {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .85rem;
  font-family: var(--mono); font-size: .72rem; line-height: 1.65; color: var(--ink-2);
  border-top: 1px dashed var(--rule); padding-top: .6rem; margin-top: .9rem;
  max-width: 80ch; /* R6 (item 70): the basis line holds a readable measure */
  grid-column: 1 / -1; /* W1 R7: a stamp inside a two-column grid spans both tracks instead of leaving a right-column void */
}
.stamp b { font-weight: 600; color: var(--ink-2); font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-size: .68rem; }
.stamp--inline { border: 0; padding: 0; margin: .45rem 0 0; }

/* ---------- cards ---------- */
.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px); position: relative; }
.card--tint { background: var(--paper); }
.card--flag { border-top: 3px solid var(--lime); }

/* Lane-by-lane evidence cards (home: monitoring #lanes). */
  .wk { scroll-margin-top: 96px; }
.lanefams { display: grid; gap: 1rem; }
  .lanefam { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
    padding: 1.05rem 1.15rem 1rem; box-shadow: 0 1px 2px rgba(13,46,74,.05), 0 6px 18px rgba(13,46,74,.06); }
  .lanefam__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: .6rem; }
  .lanefam__name { margin: 0; font-family: var(--label); text-transform: uppercase;
    letter-spacing: .08em; font-size: .84rem; font-weight: 700; color: var(--navy-deep); }
  .lanefam__body { display: grid; gap: .8rem 2rem; }
  @media (min-width: 900px) {
    .lanefam__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
  }
  .lanefam__what { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
  .lanefam__thins { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ink-2);
    background: color-mix(in srgb, var(--lime) 9%, var(--white)); border-left: 3px solid var(--lime-dark);
    padding: .6rem .8rem; }
  .lanefam__thins b { display: block; font-family: var(--label); text-transform: uppercase;
    letter-spacing: .1em; font-size: .62rem; color: var(--navy); margin-bottom: .25rem; }
  .lanefam__more { margin-top: .7rem; border-top: 1px solid var(--rule-soft); padding-top: .5rem; }
  .lanefam__more summary { cursor: pointer; font-family: var(--label); text-transform: uppercase;
    letter-spacing: .1em; font-size: .64rem; font-weight: 700; color: var(--ink-3); }
  .lanefam__more summary:hover { color: var(--navy); }
  .lanefam__more p { margin: .5rem 0 0; }

/* The two flagships: the one dark band on the page, quoting the methodology
   diagram grammar (1.5px instruments, lime = the signal). */
.spotband { background: linear-gradient(140deg, var(--navy-deep) 0%, #143C5F 78%, #17466E 100%); }
.spotband__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .16em;
  font-size: .78rem; font-weight: 700; color: var(--lime); margin: 0 0 1.3rem; text-align: center; }
.spotband__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .spotband__grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }
.spot { display: flex; gap: 1.15rem; align-items: flex-start; padding: 1.35rem 1.4rem 1.3rem;
  border: 1px solid rgba(189,210,226,.28); border-radius: var(--r-lg);
  background: rgba(255,255,255,.035); text-decoration: none;
  transition: border-color .2s ease, background .2s ease; }
.spot:hover { border-color: var(--lime); background: rgba(255,255,255,.06); }
.spot__emblem { flex: 0 0 auto; width: 64px; height: 64px; }
.spot__emblem svg { width: 100%; height: 100%; }
.spot__body { display: block; min-width: 0; }
.spot__body b { display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.25; color: #fff; margin: 0 0 .45rem; }
.spot__body > span { display: block; font-size: .92rem; line-height: 1.6; color: #BDD2E2; }
.spot__body i { display: inline-block; font-style: normal; font-weight: 650; font-size: .86rem;
  color: var(--lime); margin-top: .65rem; }
.spot:hover .spot__body i { text-decoration: underline; }
.spotband__std { margin: 1.6rem 0 0; color: #9FB8CC; }
.spotband__std a { color: #D6E6A8; }
@media (max-width: 560px) {
  .spot { flex-direction: column; gap: .8rem; }
  .spot__emblem { width: 54px; height: 54px; }
}
/* Hover life on plain cards: a smaller lift than .card--link's 6px, so the
   linked-card hierarchy holds. .card--link's own rules below still win. */
.card { transition: border-color .3s var(--smooth), box-shadow .3s var(--smooth), transform .3s var(--smooth); }
.card:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--rule)); box-shadow: var(--shadow); transform: translateY(-3px); }
.card--flag:hover { border-top-color: var(--lime-dark); }
.card h3 { margin-bottom: .45rem; }
.card__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 600; color: var(--blue-text); margin-bottom: .55rem; }
.card__n { font-family: var(--mono); font-weight: 700; font-size: 1.85rem; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.card--link { text-decoration: none; color: inherit; display: block; transition: border-color 400ms var(--spring), box-shadow 400ms var(--spring), transform 400ms var(--spring); }
.card--link:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-6px); color: inherit; }

/* ---------- app showcase ---------- */
/* Console-dark chrome: every screenshot reads as a product window. */
.shot { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-lg); }
.shot__bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; background: var(--navy-ink); border-bottom: 1px solid rgba(255,255,255,.08); }
.shot__dots { display: flex; gap: 5px; }
.shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); display: block; }
.shot__dots i:first-child { background: var(--lime); }
.shot__full { margin-left: auto; font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-size: .64rem; font-weight: 700; color: var(--lime); text-decoration: none; white-space: nowrap; }
.shot__full:hover { color: var(--lime); text-decoration: underline; }
.shot__name { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 600; color: #BDD2E2; }
.shot__view { max-height: 460px; overflow: hidden; position: relative; }
.shot__view img { width: 100%; display: block; transition: transform .65s var(--smooth); }
.shot:hover .shot__view img { transform: scale(1.02); }
.shot__view::after { content: ""; position: absolute; inset: auto 0 0 0; height: 72px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96)); pointer-events: none; }
.shot--tall .shot__view { max-height: 620px; }
.shot--full .shot__view { max-height: none; }
.shot--full .shot__view::after { display: none; }
/* Light stage under a product surface (ruling 9: dark slabs retired; the product
   window carries its own console chrome). Offsets alternate left/right and clamp
   to zero on a phone so nothing overflows. */
.shot-stage { background: linear-gradient(160deg, var(--tint) 0%, var(--paper) 100%); border: 1px solid var(--rule); padding: clamp(20px, 3.2vw, 48px); border-radius: var(--r-lg); }
.shot-stage .shot { box-shadow: 0 2px 6px rgba(13,46,74,.10), 0 24px 56px rgba(13,46,74,.18); border-color: var(--rule); }
/* Offset never exceeds the page gutter, so the stage can kiss the viewport
   edge but never push past it (zero horizontal overflow at every width). */
.shot-stage--l { margin-left: calc(-1 * min(4vw, var(--gut))); }
.shot-stage--r { margin-right: calc(-1 * min(4vw, var(--gut))); }
/* .split--rev no longer flips the header+prose columns. Alternation is carried by
   the shot-stage offsets (--l/--r) alone; the eyebrow+H2 always leads on the left,
   so the reader never meets body copy before its own headline. */
/* Phone: the stage hugs the screenshot. A fixed view cap plus the white bottom
   fade left a blank block inside the dark frame that read as a broken image. */
@media (max-width: 699px) {
  .shot__view, .shot--tall .shot__view { max-height: none; }
  .shot__view::after { display: none; }
}

/* ---------- the receipt: a number carrying its own basis ----------
   A product surface, so it keeps its dark console ground (ruling 9 exception)
   and floats on the light hero as a card. */
.receipt { background: linear-gradient(180deg, #0F3A5F 0%, var(--navy-deep) 100%); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 56px rgba(13,46,74,.24), 0 3px 10px rgba(13,46,74,.12); }
.receipt__hd { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem .95rem; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.14); font-size: .78rem; color: #9FB8CB; }
.receipt__live { color: var(--lime); display: inline-flex; align-items: center; gap: .4rem; }
.receipt__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; }
.receipt__body { padding: 1.1rem 1.15rem 1rem; }
.receipt__label { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 600; color: #BDD2E2; margin: 0 0 .3rem; }
.receipt__num { font-family: var(--mono); font-weight: 700; font-size: clamp(2.3rem, 4.6vw, 3rem); line-height: 1; color: #fff; letter-spacing: -.03em; margin: 0 0 .5rem; }
.receipt__split { font-size: .88rem; color: #9FB8CB; margin: 0 0 .9rem; }
.receipt__split b { color: #E4EDF4; font-weight: 500; }
.receipt__stamp { list-style: none; margin: 0; padding: .8rem 0 0; border-top: 1px dashed rgba(255,255,255,.22); display: grid; gap: .32rem; }
.receipt__stamp li { font-family: var(--mono); font-size: .77rem; color: #9FB8CB; line-height: 1.45; margin: 0; }
.receipt__stamp b { font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-size: .66rem; font-weight: 600; color: #6F93AF; margin-right: .5rem; }
.receipt__ft { margin: 0; padding: .6rem .95rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .76rem; color: #829EB4; background: rgba(0,0,0,.14); }

/* ---------- figures ---------- */
.fig { margin: 0; }
.fig__svg { width: 100%; height: auto; display: block; }
.fig__cap { font-size: .82rem; line-height: 1.5; color: var(--ink-3); margin-top: .8rem; max-width: 78ch; }
.fig--light { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1.1rem 1.1rem .9rem; }
/* Wide figures scroll inside their own frame on a phone instead of shrinking
   their labels below a readable size. */
.fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.fig-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.fig-hint { display: none; color: var(--ink-3); margin: 0 0 .5rem; }
@media (max-width: 860px) { .fig-hint { display: block; } }
.fig--light .fig__cap { padding-top: .2rem; }

/* ---------- tables ---------- */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white); position: relative; }
/* Keyboard reach for the scrollport, matching the figure pattern. The page adds
   tabindex="0" role="group" to the div; this is the visible focus ring for it. */
.tbl-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* A table cut mid-word does not read as scrollable, it reads as broken, so mark
   the cut edge as one: the last 44px of the panel fade out rather than slicing a
   word in half. Two constraints decide the mechanism. It has to sit still while
   the columns move, which rules out a positioned child (anything inside a
   scrollport travels with the content and washes over the middle of the table).
   And it has to appear only while there is genuinely more table to the right, or
   it lies about a table that fits. A mask on the panel itself stays put, and
   driving its width off the panel's own scroll position closes it to zero at the
   end of the run and leaves it closed when nothing overflows. Where scroll-driven
   animation is unavailable the marker is simply absent, which is the safe way to
   fail: no marker beats a marker on a table with nothing left to show. */
@property --tbl-cut { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes tbl-cut { from { --tbl-cut: 44px; } to { --tbl-cut: 0px; } }
@supports (animation-timeline: scroll(self inline)) {
  .tbl-scroll {
    animation: tbl-cut linear both;
    animation-timeline: scroll(self inline);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--tbl-cut)), rgba(0,0,0,.06));
  }
}
/* The written half of the affordance, phone-only copy a page places above its
   table: <p class="small tbl-hint">. */
.tbl-hint { display: none; }
@media (max-width: 880px) { .tbl-hint { display: block; margin-bottom: .6rem; } }
/* The table paints itself on a white `.tbl-scroll` panel and states its own ink,
   so it never inherits a contextual body colour from the section around it. */
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 620px; color: var(--ink); }
table.tbl th, table.tbl td { padding: .72rem .9rem; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
table.tbl thead th {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; font-weight: 600;
  color: var(--white); background: var(--navy); border-bottom: 0; white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:nth-child(even) { background: var(--paper); }
table.tbl td.n, table.tbl th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl .row-h { font-weight: 600; color: var(--navy-deep); }
table.tbl .us { background: color-mix(in srgb, var(--lime) 15%, transparent) !important; }
table.tbl thead th.us { background: var(--lime-dark); color: var(--navy-ink); }
/* Read-along warmth on body rows; the lime .us cells keep their own ground. */
table.tbl tbody tr { transition: background .18s ease-out; }
table.tbl tbody tr:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.tbl-note { font-size: .8rem; color: var(--ink-3); margin-top: .7rem; line-height: 1.5; }
/* Section-close paragraphs that must not whisper: a band should end strong, so
   these read at 16px in the body ink, never the muted caption grey. */
.band-note { font-size: .94rem; line-height: 1.55; color: var(--ink-2); }
/* Small explainers inside a white table panel read at full strength. */
table.tbl .small { color: var(--ink-2); }

/* ---------- chips + marks ---------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-size: .68rem; font-weight: 600; padding: .22rem .55rem; border-radius: 2px; background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule); }
/* Anchor chips (platform hero, week links) get press-ready hover feedback. */
a.chip { text-decoration: none; transition: border-color .16s ease-out, color .16s ease-out, background .16s ease-out; }
a.chip:hover { border-color: var(--blue); color: var(--navy); background: var(--white); }
.chip--lime { background: color-mix(in srgb, var(--lime) 22%, transparent); border-color: color-mix(in srgb, var(--lime-dark) 45%, transparent); color: #3E6A16; }
.chip--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip--warn { background: #E4F4F6; border-color: #9ED2DA; color: #0B5560; }
.yes { color: var(--lime-text); font-weight: 700; }
.no { color: var(--ink-3); }
.partial { color: #8A6A16; font-weight: 600; }

/* ---------- quotes ---------- */
.quote { border-left: 0; padding-left: 0; }
.quote::before { content: "\201C"; display: block; font-size: 4.5rem; line-height: .6; color: var(--lime); font-weight: 800; margin-bottom: .35rem; }
.quote p { font-style: italic; font-weight: 650; font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -.022em; line-height: 1.25; color: var(--navy-deep); }
.quote cite { display: block; margin-top: .8rem; font-style: normal; font-size: .9rem; color: var(--ink-3); font-family: var(--sans); }

/* ---------- steps ---------- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.steps li { counter-increment: s; padding-left: 3.1rem; position: relative; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -.1rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  background: var(--navy); color: #fff;
}
.steps h4 { margin-bottom: .2rem; }

/* ---------- callout ---------- */
.callout { border: 1px solid var(--rule); border-left: 3px solid var(--blue); background: var(--paper); border-radius: 0 var(--r) var(--r) 0; padding: 1.1rem 1.3rem; }
.callout--lime { border-left-color: var(--lime-dark); }
.callout h4 { margin-bottom: .3rem; }

/* ---------- footer ---------- */
.foot { background: var(--navy-ink); color: #A8C0D2; padding: clamp(48px, 6vw, 72px) 0 2rem; font-size: .92rem; }
/* Column headings are h4 on most pages and h3 where a page's heading order needs
   the extra level. Both are the same footer label; styling one and not the other
   ships two footer grammars. */
.foot h3, .foot h4 { font-family: var(--label); text-transform: uppercase; letter-spacing: .11em; font-size: .72rem; color: #fff; margin-bottom: .8rem; font-weight: 600; line-height: 1.3; }
.foot a { color: #A8C0D2; text-decoration: none; }
.foot a:hover { color: var(--lime); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .45rem; }
/* Phone: footer links stack about ten deep, so each one takes a thumb-sized row
   instead of an 18px line on a 31px pitch. */
@media (max-width: 880px) {
  .foot li { margin-bottom: 0; }
  .foot li > a { display: inline-block; padding: .55rem 0; }
}
.foot__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot__brand img { height: 44px; margin-bottom: 1rem; }
.foot__base { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .84rem; color: #7D97AC; }
/* R69: the phone footer, compacted — link groups pair up, the brand spans the row,
   and the whole block stops reading like a page of its own. */
@media (max-width: 640px) {
  .foot { padding: 2.2rem 0 1.3rem; font-size: .88rem; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.2rem; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__brand img { height: 34px; margin-bottom: .6rem; }
  .foot h3, .foot h4 { margin-bottom: .35rem; font-size: .66rem; }
  .foot li > a { padding: .34rem 0; font-size: .86rem; }
  .foot__base { margin-top: 1.5rem; padding-top: .9rem; font-size: .76rem; gap: .5rem 1rem; }
}

/* ---------- form ---------- */
.field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.field label { font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; padding: .7rem .85rem; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--white); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid color-mix(in srgb, var(--teal) 35%, transparent); outline-offset: 0; }
.field textarea { min-height: 118px; resize: vertical; }
/* Required marker uses the warm caution tone (.partial family), never --rep.
   Partisan colors mean party and nothing else, anywhere on this site. */
.req { color: #8A6A16; }

/* ---------- utility ---------- */
.mt0 { margin-top: 0 !important; } .mb0 { margin-bottom: 0 !important; }
.mt1 { margin-top: 1rem; } .mt2 { margin-top: 2rem; } .mt3 { margin-top: 3rem; }
.hide { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lime); color: var(--navy-ink); padding: .7rem 1.1rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

@media print {
  .nav, .foot, .btn { display: none !important; }
  body { font-size: 11pt; }
  .section { padding: 12pt 0; }
  .section--band, .cta-final, .hero { background: #fff !important; color: #000 !important; }
  .hero h1 { color: #000 !important; }
  /* R6 (item 15): scroll-driven reveals must never leave ghost content in a
     print render; every animation and transition lands on its final frame. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Product-in-motion components, added 2026-08-21.
   Two laws govern every animation here. (1) Content is visible by default:
   keyframes may HIDE a thing mid-cycle, but the base state and the 100% frame
   are always visible, so a browser that never runs the animation, the global
   reduced-motion kill (which forces every animation to its final frame), and
   a print render all show real content. (2) Motion is meaning, never ambience,
   and content never moves on its own: no marquees, no tickers, no carousels,
   no auto-cycling cards, no count-ups (ruled 2026-08-24). Pulses that translate
   nothing (the live dot) and one-shot entrance draws are the allowed forms.
   ========================================================================== */

/* ---------- scroll-entrance motion, additive only ----------
   Base state is fully visible. When IntersectionObserver fires, .in-view plays a
   rise; if JS or IO never runs, nothing was ever hidden. Grids stagger children. */
/* Ruling 39a (will-change discipline): the old blanket
   `[data-rise] > * { will-change: transform }` promoted hundreds of nodes to
   their own layers permanently, for a one-shot entrance the animation promotes
   by itself. Removed; nothing pre-promotes. */
.in-view[data-rise] > * { animation: rise .42s var(--smooth) backwards; }
.in-view[data-rise] > *:nth-child(2) { animation-delay: .04s; }
.in-view[data-rise] > *:nth-child(3) { animation-delay: .08s; }
.in-view[data-rise] > *:nth-child(4) { animation-delay: .12s; }
.in-view[data-rise] > *:nth-child(5) { animation-delay: .2s; }
.in-view[data-rise] > *:nth-child(6) { animation-delay: .25s; }
.in-view[data-rise] > *:nth-child(7) { animation-delay: .3s; }
.in-view[data-rise] > *:nth-child(8) { animation-delay: .35s; }
@keyframes rise { 0% { opacity: .01; transform: translateY(22px); }
  72% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); } }
.in-view .fig__svg rect { transform-origin: left center; animation: grow-x .9s var(--smooth) backwards; }
.in-view .fig__svg rect:nth-of-type(2) { animation-delay: .12s; }
.in-view .fig__svg rect:nth-of-type(3) { animation-delay: .24s; }
.in-view .fig__svg rect:nth-of-type(4) { animation-delay: .36s; }
.in-view .fig__svg rect:nth-of-type(5) { animation-delay: .48s; }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Chart value labels fade in as their bars finish: a fade of static values,
   never a count-up. Even-numbered text nodes are the dollar labels in the
   index spend SVG; the 11th is the basis caption. */
@keyframes fade-in { from { opacity: .01; } to { opacity: 1; } }
.in-view .fig__svg text { animation: fade-in .4s ease-out .3s backwards; }
.in-view .fig__svg text:nth-of-type(2) { animation-delay: .55s; }
.in-view .fig__svg text:nth-of-type(4) { animation-delay: .67s; }
.in-view .fig__svg text:nth-of-type(6) { animation-delay: .79s; }
.in-view .fig__svg text:nth-of-type(8) { animation-delay: .91s; }
.in-view .fig__svg text:nth-of-type(10) { animation-delay: 1.03s; }
.in-view .fig__svg text:nth-of-type(11) { animation-delay: 1.2s; }
/* Eyebrow tick draws left-to-right when its section header rises. */
.in-view .eyebrow::before, .is-loaded .hero .eyebrow::before {
  transform-origin: left center;
  animation: tick-grow .55s var(--smooth) .25s backwards;
}
@keyframes tick-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .in-view[data-rise] > *, .in-view .fig__svg rect, .in-view .fig__svg text,
  .in-view .eyebrow::before, .is-loaded .hero .eyebrow::before { animation: none; }
}

/* ---------- live dot: the monitoring heartbeat ---------- */
.live-dot { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; font-weight: 600; color: var(--lime); }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: live-dot 2.4s var(--smooth) 2; }
@keyframes live-dot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Sonar ping composited onto the pulse: box-shadow only, zero layout shift.
   Final pass: capped at 2 iterations (~5s), same cap the rc- status dots got in
   R7, so nothing on the site repaints forever. The dot rests fully visible. */
.live-dot::before, .feed__live::before, .receipt__live::before {
  animation: live-dot 2.4s var(--smooth) 2, live-ping 2.4s var(--smooth) 2;
}
@keyframes live-ping {
  0% { box-shadow: 0 0 0 0 rgba(168,209,78,.45); }
  60% { box-shadow: 0 0 0 9px rgba(168,209,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(168,209,78,0); }
}

/* ---------- the alert feed: three product alerts cycling in one slot ----------
   Cards share a grid cell. Each runs the same 24s cycle, offset by a third, so
   exactly one card is fully shown at any moment. Cards are opaque: if the
   animation never runs, the stack collapses visually to ONE static card, which
   is the correct degraded state. The 100% frame matches the 0% frame (visible)
   so the reduced-motion forced-finish leaves a readable card, never a blank. */
.feed { display: grid; gap: 1rem; position: relative; }
.feed__card {
  background: linear-gradient(180deg, #0F3A5F 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  padding: 1.05rem 1.15rem .95rem;
  box-shadow: 0 18px 44px rgba(5,20,35,.45);
}
.feed__live { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .13em; font-size: .6rem; font-weight: 700; color: var(--lime); }
.feed__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: live-dot 2.4s var(--smooth) 2; }
.feed__k { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .55rem; }
.feed__tag { font-family: var(--label); text-transform: uppercase; letter-spacing: .13em; font-size: .64rem; font-weight: 700; color: var(--navy-ink); background: var(--lime); padding: .18rem .5rem; border-radius: 2px; }
.feed__tag--blue { background: var(--blue-light); }
.feed__tag--warn { background: #E8CF9E; }
.feed__time { font-family: var(--mono); font-size: .72rem; color: #8FA9BE; }
.feed__race { font-weight: 800; font-size: 1.06rem; color: #fff; letter-spacing: -.01em; margin: 0 0 .12rem; }
.feed__who { font-size: .85rem; color: #BDD2E2; margin: 0 0 .65rem; }
.feed__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; margin: 0 0 .7rem; }
.feed__v { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; color: #fff; line-height: 1.1; }
.feed__l { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; font-weight: 600; color: #8FA9BE; margin-top: .18rem; line-height: 1.3; }
.feed__quote { font-size: .8rem; line-height: 1.5; color: #9FB8CB; font-style: italic; border-left: 2px solid rgba(168,209,78,.55); padding-left: .7rem; margin: 0 0 .7rem; }
.feed__stamp { font-family: var(--mono); font-size: .68rem; color: #7D97AC; border-top: 1px dashed rgba(255,255,255,.2); padding-top: .55rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.feed__note { margin: .6rem 0 0; text-align: right; font-size: .72rem; color: #7D97AC; }

/* ---------- the detection strip: one morning of monitoring, standing still ----
   The marquee died with the 2026-08-24 auto-motion ruling; the content survives
   as this static band. Light strip (ruling 9): pale ground, navy and slate text,
   the timestamps in the AA lime. Items wrap; the two widest hide on phones so
   the strip stays a band, never a wall. */
.dstrip { border-block: 1px solid var(--rule); border-top: 2px solid color-mix(in srgb, var(--lime-dark) 55%, transparent); background: var(--paper); }
.dstrip__in { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; padding: .55rem 0; }
.dstrip__i { display: inline-flex; align-items: baseline; gap: .55rem; padding: .25rem 1.2rem; font-family: var(--mono); font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.dstrip__i b { color: var(--navy-deep); font-weight: 600; }
.dstrip__i .t { color: var(--lime-text); }
.dstrip__i--lbl b { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
@media (max-width: 899px) { .dstrip__i.dstrip__i--wide { display: none; } }
/* Phones: each entry becomes a centered prose line that wraps, so the mono
   items can never push the page wider than the viewport. */
@media (max-width: 699px) { .dstrip__i { display: block; white-space: normal; text-align: center; padding: .25rem .5rem; } }

/* ---------- app cards on the index: screenshot-led, one line each ---------- */
.applink { text-decoration: none; color: inherit; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; transition: border-color 400ms var(--spring), box-shadow 400ms var(--spring), transform 400ms var(--spring); }
.applink:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-6px); color: inherit; }
.applink__shot { aspect-ratio: 16 / 9.6; overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--paper); }
.applink__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .65s var(--smooth); }
.applink:hover .applink__shot img { transform: scale(1.045); }
.applink__body { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.applink__body h3 { margin: 0; font-size: 1.06rem; }
.applink__body p { font-size: .88rem; line-height: 1.5; color: var(--ink-2); margin: 0; }
.applink__go { margin-top: auto; padding-top: .6rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; font-weight: 700; color: var(--blue-text); transition: transform .3s var(--spring), color .16s; }
.applink:hover .applink__go { color: var(--blue); transform: translateX(5px); }

/* ---------- footer CTA: light statement moment (ruling 9) ----------
   The closer keeps its display scale and the 3px gradient seam; the ground is
   the brand's pale wash and the headline is navy display type. */
.cta-final {
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(0,172,193,.10), transparent 60%),
    radial-gradient(760px 440px at 88% 10%, rgba(168,209,78,.10), transparent 62%),
    linear-gradient(180deg, var(--white) 0%, var(--tint) 100%);
  color: var(--ink); position: relative; overflow: hidden;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(13,46,74,.025) 50px, rgba(13,46,74,.025) 51px),
    repeating-linear-gradient(-45deg, transparent, transparent 50px, rgba(45,139,186,.035) 50px, rgba(45,139,186,.035) 51px);
}
.cta-final > * { position: relative; }
.cta-final h2 { color: var(--navy-deep); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.03em; }
.cta-final .lede { margin-top: .6rem; }

/* ---------- hero load choreography ----------
   site.js adds .is-loaded on the first frame. Without JS nothing here fires and
   the hero renders fully static and fully visible; the class only ADDS motion. */
.is-loaded .hero .eyebrow { animation: rise .7s var(--smooth) .05s backwards; }
.is-loaded .hero h1 { animation: rise .7s var(--smooth) .16s backwards; }
.is-loaded .hero .lede { animation: rise .7s var(--smooth) .3s backwards; }
.is-loaded .hero .btn-row { animation: rise .7s var(--smooth) .44s backwards; }
.is-loaded .hero .hero__proof { animation: rise .7s var(--smooth) .56s backwards; }
.is-loaded .hero-banner { animation: banner-drop .55s var(--smooth) backwards; }
@keyframes banner-drop { from { opacity: .01; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
/* One-time accent sweep across the gradient word. */
.is-loaded .grad { animation: grad-sweep 1.2s var(--smooth) .6s backwards; }
@keyframes grad-sweep { from { background-position: 120% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .is-loaded .hero .eyebrow, .is-loaded .hero h1, .is-loaded .hero .lede,
  .is-loaded .hero .btn-row, .is-loaded .hero .hero__proof,
  .is-loaded .hero-banner, .is-loaded .grad,
  .live-dot::before, .feed__live::before, .receipt__live::before,
  .scroll-hint svg { animation: none; }
}

/* ---------- phone table-to-cards: .tbl--stack ----------
   Below 700px a three-column comparison table restructures into stacked cards:
   the row header becomes the card title and each answer cell carries its column
   label via data-label. No scrollport, no fade, nothing pushed off-screen. */
@media (max-width: 699px) {
  .tbl-hint--stack { display: none; }
  .tbl-scroll--stack { overflow: visible; border: 0; border-radius: 0; background: transparent; mask-image: none; animation: none; }
  table.tbl--stack { min-width: 0; display: block; }
  table.tbl--stack thead { display: none; }
  table.tbl--stack tbody { display: grid; gap: .9rem; }
  table.tbl--stack tbody tr,
  table.tbl--stack tbody tr:nth-child(even) { display: block; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1.05rem 1.1rem 1.1rem; }
  table.tbl--stack th[scope="row"], table.tbl--stack td { display: block; border: 0; padding: 0; white-space: normal; }
  table.tbl--stack th[scope="row"] { font-size: 1.02rem; line-height: 1.35; padding-bottom: .55rem; border-bottom: 1px solid var(--rule-soft); margin-bottom: .75rem; }
  table.tbl--stack td { font-size: .9rem; line-height: 1.55; }
  table.tbl--stack td + td { margin-top: .8rem; }
  table.tbl--stack td::before { content: attr(data-label); display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 700; color: var(--blue-text); margin-bottom: .3rem; }
  table.tbl--stack td.us { padding: .65rem .75rem .75rem; border-radius: var(--r); }
  table.tbl--stack td.us::before { color: var(--lime-text); }
}

/* ==========================================================================
   Wave 3 - live-site standard (2026-08-21).
   Light nav, light hero language, the 16px card pass (radius rides --r-lg
   above), gradient icon tiles and the lead-card gradient border. Dark grounds
   are reserved for statement bands; product cards and section grounds stay
   light and airy. Nothing here rotates or tilts: depth comes from shadow,
   overlap and scale only.
   ========================================================================== */

/* ---------- light nav ---------- */
.nav--light {
  /* Opaque for the same scroll-perf reason as the base bar (ruling 39a). */
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.nav--light .nav__links a { color: var(--ink-2); }
.nav--light .nav__links a:hover { color: var(--navy-deep); border-bottom-color: color-mix(in srgb, var(--lime-dark) 50%, transparent); }
.nav--light .nav__links a[aria-current="page"] { color: var(--navy-deep); border-bottom-color: var(--lime-dark); }
@media (min-width: 1041px) {
  .nav--light .nav__links a::after { background: var(--lime-dark); }
}
.nav--light.nav--scrolled { box-shadow: 0 10px 30px rgba(13,46,74,.10); border-bottom-color: color-mix(in srgb, var(--lime-dark) 35%, var(--rule)); }
.nav--light .nav__toggle { border-color: var(--rule); color: var(--navy-deep); }
@media (max-width: 1040px) {
  .nav--light[data-open="true"] .nav__links {
    background: var(--white); border-bottom: 1px solid var(--rule);
    box-shadow: 0 24px 48px rgba(13,46,74,.12);
  }
  .nav--light[data-open="true"] .nav__links a { border-bottom: 1px solid var(--rule-soft); }
}

/* ---------- card pass: generous padding, soft resting shadow ---------- */
.card { padding: clamp(24px, 3vw, 34px); box-shadow: 0 1px 2px rgba(13,46,74,.05), 0 6px 18px rgba(13,46,74,.06); }
/* Lead-card highlight: a teal-to-lime gradient border on the card that anchors
   a grid. The border itself is transparent; the gradient paints the border box. */
.card--lead {
  border: 1px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(135deg, var(--teal), var(--lime)) border-box;
}
.card--lead:hover { border-color: transparent; }

/* ---------- display headline with the layered offset effect ----------
   Each display line is a span carrying its own text in data-t; the pseudo
   prints the same text once more, offset down-right at low-alpha navy. The
   gradient is confined to the single accent line (.ht__l--accent); the other
   lines print navy 900 so the claim reads at AA everywhere. Gradient endpoints
   are the AA text pair (--lime-text to #007A8A). Static, square, JS-free. */
.ht .ht__l {
  display: inline-block; position: relative; isolation: isolate;
  color: var(--navy-deep); font-weight: 400;
}
/* Paths pass (2026-08-26, art director): the offset echo under the display
   lines is gone. Flat, confident type is the standard; the gradient accent
   line already carries the flourish. The data-t attributes stay in the markup
   so the echo can be restored by reinstating this one rule. */
.ht .ht__l::before { content: none; }
.ht .ht__l--accent {
  background: linear-gradient(94deg, var(--lime-text) 0%, #007A8A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not (-webkit-background-clip: text) {
  .ht .ht__l--accent { color: #007A8A; background: none; }
  .ht .ht__l::before { display: none; }
}

/* ==========================================================================
   evidentiary-weight editorial system (Wave 3 addendum, 2026-08-21)
   THE WEIGHT = BASIS LAW. Type weight encodes evidentiary basis everywhere a
   figure prints:
     heavy  (800)              = measured. A machine saw it, or a document
                                 on file states it.
     medium (650)              = verified minimum. A floor we can stand
                                 behind; the true figure is at least this.
     light  (400) + dashed rule = modeled/estimated. Extends the existing
                                 rc-digital-tag-est dashed convention.
   font-weight, never font-variation-settings, so inheritance and synthesis
   behave. !important is load-bearing: recreation styles are page-scoped at
   higher specificity (.rc-x .rc-x-val) and the basis law must win there too.
   Indices (folio, step numerals) are structure, not evidence, and print
   light by design.
   ========================================================================== */

/* ---------- A1: weight = basis utilities ---------- */
.w-measured { font-weight: 800 !important; }
.w-floor    { font-weight: 650 !important; }
.w-est      { font-weight: 400 !important; border-bottom: 1px dashed var(--blue-light); }

/* ---------- A4: the ledger figure ----------
   Unboxed display component: full-width rules top and bottom, a mono numeral
   at display scale with its magnitude unit stacked beside it, the claim and
   its hanging basis stamp in the right cell. Max one per statement band, two
   per page. */
.ledger {
  display: grid; grid-template-columns: max-content 1fr;
  gap: clamp(16px, 3vw, 48px); align-items: baseline;
  padding: clamp(20px, 3vw, 36px) 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.ledger__fig { display: flex; align-items: baseline; gap: .9rem; min-width: 0; }
.ledger__num {
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(3rem, 11vw, 8.5rem); line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--navy-deep);
}
.ledger__unit {
  font-family: var(--sans); font-weight: 300; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .12em; line-height: 1.35;
  color: var(--ink-3); max-width: 11ch;
}
/* A14a: the 3px lime baseline rule under the numeral. Present at full width by
   default; .in-view only re-draws it via the existing grow-x keyframe. */
.ledger__rule { height: 3px; background: var(--lime); margin-top: .45rem; transform-origin: left center; }
.ledger.in-view .ledger__rule { animation: grow-x .9s var(--smooth) backwards; }
.ledger__claim {
  font-weight: 650; font-size: 1.15rem; line-height: 1.45;
  max-width: 34ch; margin: 0; color: var(--ink);
}
/* A14b: the hanging stamp fades in behind the rule. Visible by default. */
.ledger.in-view .stamp--hang { animation: fade-in .5s ease-out .3s backwards; }
@media (prefers-reduced-motion: reduce) {
  .ledger.in-view .ledger__rule, .ledger.in-view .stamp--hang { animation: none; }
}
/* A15: 375px discipline. One column below 560px; the numeral floors at 3rem,
   the unit moves under it, claim and stamp stack, the rules stay full-width. */
@media (max-width: 560px) {
  .ledger { grid-template-columns: 1fr; gap: 1.1rem; }
  .ledger__fig { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .ledger__num { font-size: 3rem; }
}

/* ---------- A5: the hanging stamp ----------
   The ledger's basis stamp, promoted from fine print to designed fixture: a
   24px dashed leader drops from the claim to the stamp line. */
.stamp--hang { border-top: 0; padding-top: 0; margin-top: 1rem; }
.stamp--hang::before {
  content: ""; flex: 0 0 100%; width: 1px; height: 24px;
  border-left: 1px dashed var(--rule); margin-bottom: .5rem;
}

/* ---------- A6: stamp as signature ----------
   .stamp-tick: a leading 14px x 3px lime tick echoing the eyebrow tick.
   .stamp--xl: section-closing basis line for light sections; dates ride in a
   .d span. Lime is never text on white, so the date numerals take --lime-text. */
.stamp-tick::before { content: ""; width: 14px; height: 3px; background: var(--lime); align-self: center; flex: none; }
.stamp--xl { font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.3rem); }
.stamp--xl b { font-size: .74rem; }
.stamp--xl .d { color: var(--lime-text); }

/* ---------- A8: folio numbering ----------
   A mono index slotted into each main section's eyebrow, after the lime tick.
   Structure, not evidence. */
.eyebrow .folio {
  font-family: var(--mono); font-weight: 700; font-size: .82rem; line-height: 1;
  color: var(--navy); padding-right: .6rem; border-right: 1px solid var(--rule);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- A9: hung-header grid ---------- */
.edit-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 980px) {
  .edit-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .edit-grid__hd { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* ---------- A10: H2 weight-play ---------- */
.qual { font-weight: 350; color: var(--ink-2); }

/* ---------- A11: step numerals as graphic objects ----------
   Two-digit indices for process steps and loop stations. Grid column content,
   never absolutely positioned. Deliberate inversion of the law: an index is
   structure, not evidence, so it prints light. */
.stepnum {
  font-family: var(--mono); font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
  letter-spacing: -.02em;
  color: color-mix(in srgb, var(--navy) 22%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- A13: quote inversion ----------
   Product claims print heavy; other people's words print light. The lime
   quote mark is unchanged; the citation sets in mono caps. */
.quote p { font-weight: 275; }
.quote cite { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

/* ==========================================================================
   Ruling 16 (2026-08-24) - the innovation signature.
   Two systems. (1) The Evidentiary Weight object: the posted-through date
   printed at display scale as a graphic object, with the weight-equals-basis
   law shown as live type specimens beside it. (2) The explorable air war:
   a user-driven set piece where choosing a market redraws the spend picture.
   Both are fully readable with JS off and nothing in either moves on its own.
   ========================================================================== */

/* ---------- the Evidentiary Weight object ---------- */
.ew {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(22px, 3.4vw, 44px) 0;
}
@media (min-width: 900px) { .ew { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ew__k {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .17em;
  font-size: .72rem; font-weight: 600; color: var(--blue-text); margin: 0 0 .5rem;
}
/* The date is the object. Mono, tabular, display scale; the qualifier words
   print light so the date itself carries the weight, per the law. */
.ew__date {
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(1.7rem, 6vw, 4.6rem); line-height: 1.04;
  letter-spacing: -.04em; text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--navy-deep); margin: 0; text-wrap: balance;
}
.ew__date .ew__dim { font-weight: 300; color: color-mix(in srgb, var(--navy) 42%, transparent); letter-spacing: -.02em; }
.ew__rule { height: 3px; background: var(--lime); margin-top: .6rem; transform-origin: left center; }
.ew.in-view .ew__rule { animation: grow-x .9s var(--smooth) backwards; }
.ew__sub { margin: .75rem 0 0; font-size: .97rem; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
/* The legend: the type system itself, printed as specimens. Weight is the
   encoding, so each row IS its own definition. */
.ew__legend { display: grid; gap: .9rem; border-left: 1px dashed var(--rule); padding-left: clamp(18px, 2.6vw, 40px); }
@media (max-width: 899px) { .ew__legend { border-left: 0; padding-left: 0; border-top: 1px dashed var(--rule); padding-top: 1.15rem; } }
.ew__w { display: flex; align-items: baseline; gap: clamp(.7rem, 1.6vw, 1.2rem); }
.ew__spec {
  font-family: var(--mono); font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  letter-spacing: -.02em; line-height: 1.1; color: var(--navy-deep);
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 6.4ch; flex: none;
}
.ew__spec--measured { font-weight: 800; }
.ew__spec--floor { font-weight: 650; }
.ew__spec--est { font-weight: 300; color: var(--ink-2); border-bottom: 1px dashed var(--blue-light); }
.ew__def { font-size: .84rem; line-height: 1.45; color: var(--ink-3); margin: 0; }
.ew__def b {
  display: block; font-family: var(--label); text-transform: uppercase;
  letter-spacing: .1em; font-size: .64rem; font-weight: 700; color: var(--ink-2);
  margin-bottom: .1rem;
}

/* ---------- the explorable air war ---------- */
.aw { display: grid; gap: clamp(14px, 2vw, 22px); }
/* JS-off is the static layout: the market rail hides, all panels stack, each
   carrying its own market name. site.js flips .aw--live to enable the tabs. */
.aw__rail { display: none; }
.aw--live .aw__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 16px); }
.aw--live .aw__panel[hidden] { display: none; }
.aw__mkt {
  text-align: left; display: grid; gap: .12rem; cursor: pointer;
  font-family: var(--sans); background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: .95rem 1.1rem;
  transition: border-color .25s var(--smooth), box-shadow .25s var(--smooth), transform .25s var(--smooth);
}
.aw__mkt:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--rule)); box-shadow: var(--shadow); transform: translateY(-2px); }
.aw__mkt[aria-selected="true"] { border-color: var(--lime-dark); box-shadow: inset 0 3px 0 var(--lime), var(--shadow); }
.aw__mkt-name { font-weight: 700; font-size: 1rem; color: var(--navy-deep); }
.aw__mkt-tot { font-family: var(--mono); font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums lining-nums; }
.aw__mkt-delta { font-family: var(--mono); font-size: .73rem; color: var(--lime-text); font-variant-numeric: tabular-nums lining-nums; }
.aw__panel { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(18px, 2.6vw, 30px); box-shadow: var(--shadow); }
.aw__panel + .aw__panel { margin-top: 1rem; }
.aw--live .aw__panel + .aw__panel { margin-top: 0; }
.aw__hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem .9rem; margin-bottom: .45rem; }
.aw__race { margin: 0; font-size: 1.22rem; }
.aw__race-sub { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 600; color: var(--ink-3); margin-top: .18rem; }
.aw__stamp {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
  border: 1px solid var(--rule); padding: .2rem .5rem; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
@media (max-width: 560px) { .aw__stamp { white-space: normal; } }
.aw__readline { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 1.1rem; max-width: 64ch; }
.aw__lanes { display: grid; gap: .4rem; }
.aw__lane {
  display: grid; grid-template-columns: minmax(92px, 150px) 1fr minmax(70px, max-content);
  align-items: center; gap: .8rem; padding: .32rem .4rem; border-radius: var(--r);
}
.aw__lane:hover, .aw__lane:focus-visible { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.aw__lane-name { font-weight: 600; font-size: .9rem; color: var(--navy-deep); display: grid; gap: .06rem; }
.aw__tag { font-style: normal; font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-size: .58rem; font-weight: 700; color: var(--ink-3); }
.aw__tag--floor { color: var(--blue-text); }
.aw__tag--est { color: var(--blue-text); border-bottom: 1px dashed var(--blue-light); justify-self: start; }
.aw__track { display: block; height: 12px; background: var(--paper-warm); border-radius: 2px; overflow: hidden; }
.aw__fill { display: block; height: 100%; width: var(--w, 0%); background: var(--navy); transform-origin: left center; }
.aw__fill--ca { background: var(--blue); }
.aw__fill--ra { background: var(--blue-light); }
.aw__fill--st { background: var(--teal); }
.aw__fill--dg { background: repeating-linear-gradient(45deg, var(--blue-light) 0 4px, rgba(91,155,213,.28) 4px 8px); }
.in-view .aw__fill { animation: grow-x .8s var(--smooth) backwards; }
.in-view .aw__lane:nth-child(2) .aw__fill { animation-delay: .07s; }
.in-view .aw__lane:nth-child(3) .aw__fill { animation-delay: .14s; }
.in-view .aw__lane:nth-child(4) .aw__fill { animation-delay: .21s; }
.in-view .aw__lane:nth-child(5) .aw__fill { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .in-view .aw__fill, .ew.in-view .ew__rule { animation: none; } }
.aw__val { font-family: var(--mono); font-size: .95rem; color: var(--navy-deep); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.aw__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.2rem; margin: 1.15rem 0 0; border-top: 1px dashed var(--rule); padding-top: .95rem; }
@media (min-width: 700px) { .aw__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aw__meta > div { min-width: 0; }
.aw__meta dt { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; font-weight: 700; color: var(--ink-3); margin: 0 0 .15rem; }
.aw__meta dd { margin: 0; font-size: .93rem; color: var(--ink); }
.aw__note { min-height: 1.4em; margin: .7rem 0 0; }
@media (max-width: 560px) {
  .aw--live .aw__rail { grid-template-columns: 1fr; }
  .aw__mkt { grid-template-columns: 1fr max-content; align-items: baseline; }
  .aw__mkt-delta { grid-column: 1 / -1; }
  .aw__lane { grid-template-columns: minmax(74px, 92px) 1fr max-content; gap: .5rem; }
  .aw__val { font-size: .86rem; }
}

/* ---------- ruling 22: the tease. A product surface cropped to a glimpse. ----------
   The full surface stays in the markup (honest, JS-off readable) but the frame
   crops it to a corner and fades out; the caption sends the reader to the demo.
   Anchor surfaces (the alert card, the seller Market Order Flow) never use this. */
.glimpse { position: relative; overflow: hidden; }
.glimpse--h420 { max-height: 420px; }
.glimpse--h560 { max-height: 560px; }
.glimpse--h340 { max-height: 340px; }
.glimpse--h260 { max-height: 260px; }
.glimpse::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--white) 90%); pointer-events: none; }
.section--tint .glimpse::after { background: linear-gradient(180deg, rgba(244,248,250,0), var(--tint) 90%); }
.glimpse-cap { display: block; /* W1 R7: flex fractured prose captions (orphaned periods after mid-sentence links); captions are sentences, separators are literal characters */
  margin: .7rem 0 0; font-size: .85rem; color: var(--ink-3); }
.glimpse-cap a { font-weight: 600; color: var(--blue-text); }

/* Product layer map (ruling 42c): the platform as four layers, DETECT ->
   MEASURE -> TARGET -> DECIDE, with Baker as the ask-anything strip across
   all four. Fully static; the arrows are characters, nothing moves. */
.lmap { max-width: 1080px; margin-inline: auto; }
.lmap__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: start; }
/* R72: punched up — the keyline, a claim that leads, chips as solid pills,
   and the layer's number at display weight. */
.lmap__layer { position: relative; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1.15rem 1.15rem 1.05rem; overflow: hidden; box-shadow: 0 1px 2px rgba(13,46,74,.06), 0 10px 26px rgba(13,46,74,.09); }
.lmap__layer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--navy-deep); }
.lmap__name { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 800; color: var(--lime-text); }
.lmap__what { display: block; margin-top: .3rem; font-size: 1.04rem; line-height: 1.4; font-weight: 650; color: var(--navy-deep); }
.lmap__items { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.lmap__items--ln { display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .06em; line-height: 1.9; color: var(--ink-3); }
.lmap__items--ln a { color: var(--navy); text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; }
.lmap__items--ln a:hover { text-decoration-style: solid; }
.lmap__items a.chip:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Paths pass: each layer owns one quiet number, seated at the card foot so the
   equal-height cards carry weight instead of white space. The layer becomes a
   flex column so margin-top:auto pins the stat to the foot. */
.lmap__layer { display: flex; flex-direction: column; align-items: flex-start; }
.lmap__stat { display: block; align-self: stretch; margin-top: auto; padding-top: .55rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: .78rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums; }
.lmap__items { padding-bottom: .7rem; }
.lmap__stat b { font-size: 1.6rem; font-weight: 800; color: var(--navy-deep); letter-spacing: -.01em; margin-right: .15rem; }
@media (max-width: 640px) {
  .lmap__what { font-size: 1.1rem; }
  .lmap__stat b { font-size: 1.75rem; }
}
.lmap__baker { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; justify-content: center; margin-top: 1.4rem; padding: .8rem 1.1rem; border: 1.5px dashed color-mix(in srgb, var(--teal) 55%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--teal) 6%, var(--white)); text-decoration: none; }
.lmap__baker b { font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--navy-deep); }
.lmap__baker span { font-size: .85rem; color: var(--ink-2); }
.lmap__baker:hover { border-color: var(--teal); }
.lmap__baker:hover b { color: var(--navy); }
@media (min-width: 960px) {
  .lmap__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
}

/* ---------- rulings 39b + 50b: two stories, one unmistakable switch. ----------
   JS-off is the honest default: the rail hides and both stories read as
   sequential chapters, each under its own header. site.js flips .wk--live to
   show the segmented control and collapse the stage to the chosen story. Click
   and keyboard only; nothing switches on its own.
   Ruling 50b: the switcher is a segmented control, not two static cards: one
   pill container, connected tabs, filled active state, hover lift + underline
   on the inactive tab, and a "click to switch" cue under it. */
.wk__rail { display: none; }
.wk--live .wk__rail {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
  margin: .4rem auto 0; max-width: 720px;
  background: var(--paper); border: 1.5px solid var(--rule);
  border-radius: var(--r-lg); padding: 5px;
  box-shadow: inset 0 1px 3px rgba(13,46,74,.06);
}
.wk__tab {
  text-align: center; display: grid; gap: .18rem; cursor: pointer;
  font-family: var(--sans); background: transparent;
  border: 0; border-radius: calc(var(--r-lg) - 6px);
  padding: .85rem 1rem;
  transition: background .2s var(--smooth), box-shadow .2s var(--smooth), transform .2s var(--smooth);
}
.wk__tab-name { font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--navy-deep); letter-spacing: -.01em; }
.wk__tab-sub { font-size: .8rem; line-height: 1.4; color: var(--ink-3); }
/* Inactive tab: obviously clickable. Cursor is set above; hover lifts and
   underlines the name in the link color. */
.wk__tab[aria-selected="false"]:hover { background: var(--white); box-shadow: var(--shadow); transform: translateY(-1px); }
.wk__tab[aria-selected="false"]:hover .wk__tab-name { text-decoration: underline; text-decoration-color: var(--lime-dark); text-decoration-thickness: 2px; text-underline-offset: .22em; }
/* Active tab: filled. Navy ground, reversed type, the lime tick on top. */
.wk__tab[aria-selected="true"] {
  background: var(--navy); cursor: default;
  box-shadow: inset 0 3px 0 var(--lime), 0 6px 18px rgba(13,46,74,.22);
}
.wk__tab[aria-selected="true"] .wk__tab-name { color: #fff; }
.wk__tab[aria-selected="true"] .wk__tab-sub { color: #BDD2E2; }
/* The written half of the affordance. JS-off there is nothing to switch, so it
   only prints under .wk--live. */
.wk__cue { display: none; }
.wk--live .wk__cue {
  display: block; text-align: center; margin: .6rem 0 1.3rem;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .12em;
  font-size: .64rem; font-weight: 600; color: var(--ink-3);
}
@media (max-width: 560px) {
  .wk__tab { padding: .7rem .55rem; }
  .wk__tab-sub { display: none; }
}
/* Chapter headers carry the story names when the rail is absent (JS-off, print). */
.wk__story-h {
  margin: 2.2rem 0 0; padding-top: 1.4rem; border-top: 2px solid var(--rule);
  font-family: var(--label); text-transform: uppercase; letter-spacing: .16em;
  font-size: .78rem; font-weight: 700; color: var(--blue-text);
}
.wk__story:first-of-type .wk__story-h { margin-top: 0; padding-top: 0; border-top: 0; }
.wk--live .wk__story-h { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); margin: 0; padding: 0; }
.wk--live .wk__story[hidden] { display: none; }

/* ---------- ruling 28: the week, scroll-driven. ----------
   Scenes are fully visible by default; where animation-timeline is supported the
   reader's own scroll fades and lifts each scene in. Nothing pins, nothing jacks:
   the wheel always moves the page 1:1 and JS is never involved. */
.wk__scenes { position: relative; margin-top: .5rem; }
.wk__scenes::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--blue) 0%, var(--teal) 60%, var(--lime) 100%); opacity: .45; }
.wk__scene { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3.5vw, 56px); align-items: start; padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 4vw, 56px) clamp(34px, 4vw, 48px); }
.wk__scene + .wk__scene { border-top: 1px solid var(--rule-soft); }
.wk__scene::before { content: ""; position: absolute; left: 2px; top: clamp(36px, 4.6vw, 64px);
  width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 3px solid var(--teal); }
.wk__when { position: sticky; top: 84px; align-self: start; }
.wk__day { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .16em;
  font-size: .74rem; font-weight: 700; color: var(--blue-text); }
.wk__stampline { display: block; margin-top: .15rem; font-family: var(--mono); font-size: .82rem;
  color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums; }
.wk__big { display: block; margin: .55rem 0 .4rem; font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 830; letter-spacing: -.025em; line-height: 1.12; color: var(--navy-deep); }
.wk__copy p { font-size: .97rem; color: var(--ink-2); max-width: 46ch; margin: 0 0 .6rem; }
.wk__art { min-width: 0; }
@media (max-width: 899px) {
  .wk__scene { grid-template-columns: 1fr; }
  .wk__when { position: static; }
}
/* r89: the artifact lift runs off IO in every browser — the view() driver was
   Chrome-only and sat dead everywhere else. One light one-shot per scene. */
@media (prefers-reduced-motion: no-preference) {
  .wk__scene.in-view .wk__art { animation: wk-art .55s var(--smooth) backwards; }
}
@keyframes wk-art { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Small artifacts inside the week story: an order row, a matrix corner, a brief. */
.wk-doc { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--navy);
  box-shadow: var(--shadow); padding: .85rem 1rem .9rem; max-width: 520px; }
.wk-doc__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; margin-bottom: .55rem; } /* R7 close: the posted-through stamp wraps under the brand at narrow widths instead of pushing the page wide */
.wk-doc__brand { font-family: var(--label); text-transform: uppercase; letter-spacing: .13em; font-size: .64rem; font-weight: 700; color: var(--navy); }
.wk-doc__stamp { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--rule); padding: .12rem .4rem; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 560px) { .wk-doc__stamp { white-space: normal; } }
.wk-doc__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: .45rem 0; border-top: 1px solid var(--rule-soft); }
.wk-doc__row b { color: var(--navy-deep); font-weight: 650; }
.wk-doc__row .num { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; }
.wk-doc__hi { color: var(--lime-text); font-weight: 700; }
.wk-doc__dim { color: var(--ink-3); font-size: .85rem; }
.wk-doc__note { margin: .55rem 0 0; font-size: .76rem; color: var(--ink-3); }
.wk-doc--matrix .wk-doc__row--ghost { opacity: .38; }
.wk-links { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: .9rem; }

/* ==========================================================================
   R5 pass (2026-08-25) - recreation scale, inert controls, scrollport
   affordances, touch targets, day rails.
   ========================================================================== */

/* ---------- inert recreation controls ----------
   Buttons inside rc- recreations and the alert card are illustration, not UI.
   They are removed from the tab order in the markup (tabindex="-1",
   aria-hidden); pointer-events:none kills hover states and the button sweep,
   so an inert control never invites a click it cannot honor. The Baker example
   chips are the one live exception: they write the prompt into the composer. */
.rc button, .ac__actions .btn { pointer-events: none; cursor: default; }
.rc .rc-baker-ex, .rc .rc-bdemo-chip { pointer-events: auto; cursor: pointer; }

/* ---------- recreation scale at desktop ----------
   The recreations earn the width the export tables already get: at >=1024px
   the stage lets the card grow toward 880px, which also engages each card's
   own container-query type ramp. */
@media (min-width: 1024px) {
  .rc-stage .rc, .rc-spot .rc, .rc-seller-stage .rc, .rc-leadlist-stage .rc {
    max-width: clamp(560px, 72vw, 880px);
  }
}

/* ---------- recreation scrollports: same affordance grammar as .tbl-scroll ---------- */
.rc-leadlist-scroll:focus-visible, .rc-buysheet-scroll:focus-visible,
.rc-ratebook-scroll:focus-visible, .rc-pitchlist-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@supports (animation-timeline: scroll(self inline)) {
  .rc-leadlist-scroll, .rc-buysheet-scroll, .rc-ratebook-scroll, .rc-pitchlist-scroll {
    animation: tbl-cut linear both;
    animation-timeline: scroll(self inline);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--tbl-cut)), rgba(0,0,0,.06));
  }
}

/* ---------- touch targets for hero and week-link chips ---------- */
@media (max-width: 880px) {
  .hero .chip, .wk-links .chip { min-height: 44px; padding: .55rem .8rem; align-items: center; }
}

/* ---------- pointer-aware hint copy ----------
   The keyboard sentence hides on hover-less (touch) devices. */
@media (hover: none) {
  .kbd-hint { display: none; }
}

/* ---------- detection strip: aligned 2x2 grid at desktop ---------- */
@media (min-width: 1024px) {
  .dstrip__in { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 2.4rem; row-gap: .1rem; }
  .dstrip__i { padding: .25rem 0; }
}

/* ---------- the week's day rail ----------
   A slim Mon-Fri strip naming the screen each day of the walkthrough runs on.
   Sellers run the week in reverse, so the reversed variant flips the reading
   order visually while the DOM order stays Mon-first for assistive tech. */
.day-rail { display: flex; flex-wrap: wrap; gap: .4rem .55rem; align-items: stretch; margin: 0 0 1.4rem; }
.day-rail--rev { flex-direction: row-reverse; justify-content: flex-end; }
.day-rail span {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font-family: var(--mono); font-size: .74rem; color: var(--ink-2);
  border: 1px solid var(--rule); background: var(--white); padding: .32rem .6rem;
  white-space: nowrap;
}
.day-rail b {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .1em;
  font-size: .62rem; font-weight: 700; color: var(--blue-text);
}

/* ==========================================================================
   Ruling 50c (2026-08-26) - the scroll-driven reveal layer.
   Restores the scroll-linked energy: entrances, bars, seams and stat rules
   draw with the reader's own scroll instead of a one-shot observer. Laws
   held: transform/opacity only, nothing pins, nothing jacks (the wheel moves
   the page 1:1), @supports-guarded so unsupporting browsers keep the IO
   entrance, reduced-motion gets the static page, and print lands on final
   frames. Named view-timelines sit on the big blocks so short elements (a
   3px rule, a 12px bar) draw over real scroll distance instead of flipping.
   ========================================================================== */
/* r89: the scroll-driven reveal layer is deleted. It was Chrome-only, and in
   practice the settle belt parked it at static frames, so no browser ever saw
   it move. The IO one-shots above are now the single entrance path everywhere.
   The week story keeps its day-node pops through the same IO class. */
@media (prefers-reduced-motion: no-preference) {
  .wk__scene.in-view::before { animation: node-pop .5s var(--smooth) backwards; }
}
@keyframes draw-seam { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes node-pop {
  from { transform: scale(.2); opacity: 0; }
  72% { transform: scale(1.3); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wk__scenes::before, .wk__scene::before { animation: none; transform: none; opacity: 1; }
}

/* Paths pass (2026-08-26): the settle belt's landing state. site.js adds
   .is-settled to any scroll-reveal element a broken embedded pane has left
   stuck invisible (claims view() support, never advances the timeline). The
   element simply becomes its own final frame. */
/* r89: .is-settled retired with the settle belt. */

/* ============ Ruling 53: the modeling defense block (index digital cluster +
   cross-screen mechanism). The case for the modeled number, stated as discipline;
   the drawn figure carries the observed-solid / modeled-dashed encoding law. ============ */
.mdef { margin-top: 1.6rem; background: var(--white); border: 1px solid var(--rule);
  border-left: 4px solid var(--lime-dark); border-radius: var(--r);
  padding: 1.1rem 1.2rem 1.15rem; box-shadow: var(--shadow); }
.mdef__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; font-weight: 700; color: var(--blue-text); margin: 0 0 .7rem; }
.mdef__fig { display: block; width: 100%; height: auto; margin: .2rem 0 .7rem; }
/* Paths pass: the drawn figure ships in two compositions. The wide one scales
   its 560-unit frame down illegibly on a phone, so under 700px the vertical
   restack takes over: dots block, arrow, dots block, arrow, plate, every label
   at or above 11px rendered. */
.mdef__fig--tall { display: none; max-width: 340px; margin-inline: auto; }
@media (max-width: 699px) {
  .mdef__fig--wide { display: none; }
  .mdef__fig--tall { display: block; }
}
.mdef ul { margin: .4rem 0 0; padding-left: 1.1em; font-size: .88rem; line-height: 1.55;
  color: var(--ink-2); }
.mdef li { margin-bottom: .4em; }
.mdef li:last-child { margin-bottom: 0; }
.mdef li b { color: var(--navy-deep); }
.mdef__law { margin: .7rem 0 0; font-size: .82rem; color: var(--ink-3); }

/* ==========================================================================
   r25: shared scene components, promoted from the index page style so the
   hub-and-spoke pages (index, monitoring, week) share one source. The
   creative-alert card, the calendar timeline, the week scoreboard and
   cross-screen cards, and the Pass E scene layer (wire stagger, alert
   assembly, contour, diagonal).
   ========================================================================== */
  /* The creative alert, in the shape it arrives: logo masthead, the alert pill,
     a neutral player still (drawn, never a real spot's frame), text-only action
     controls, two-column ad details with small-caps labels, the transcript on a
     soft panel with the AI disclaimer. Square. Depth is shadow, never tilt. */
  .ac { max-width: 680px; margin-inline: auto; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
/* The whole alert fits one desktop screen: the specimen is the proof object,
   and a proof you have to scroll to see whole reads like a hedge. At desktop it
   goes two-up — the tape on the left, the facts on the right, the transcript
   across the bottom. */
@media (min-width: 1000px) {
  .ac { max-width: 940px; }
  .ac__body { display: grid; grid-template-columns: 1.08fr .92fr; column-gap: 1.6rem;
    grid-template-areas:
      "race race" "who who" "frame dl" "strip dl" "note dl" "actions dl" "tr tr";
    align-items: start; }
  .ac__race { grid-area: race; }
  .ac__who { grid-area: who; }
  .ac__frame { grid-area: frame; }
  .ac__strip { grid-area: strip; }
  .ac__framenote { grid-area: note; }
  .ac__actions { grid-area: actions; }
  .ac__dl { grid-area: dl; margin-top: 0; }
  .ac__tr { grid-area: tr; }
}
  .ac__mast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--rule-soft); }
  .ac__mast img { height: 38px; width: auto; }
  .ac__pill { font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; color: #3E6A16; background: color-mix(in srgb, var(--lime) 24%, transparent); border: 1px solid color-mix(in srgb, var(--lime-dark) 45%, transparent); border-radius: 999px; padding: .32rem .75rem; white-space: nowrap; }
  .ac__body { padding: clamp(18px, 3vw, 28px); }
  .ac__race { font-size: 1.3rem; font-weight: 800; color: var(--navy-deep); letter-spacing: -.01em; margin: 0 0 .15rem; }
  .ac__who { font-size: .93rem; color: var(--ink-2); margin: 0 0 1rem; }
  .ac__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--navy-ink); overflow: hidden; display: grid; place-items: center; }
  /* Final perf pass (ruling 39a): the blur(9px) filter here sat inside the
     scroll-animated .wk__art and forced an expensive raster at layer creation
     mid-scroll. The soft-focus look is pre-blended into the gradients instead;
     no filter remains on any animated subtree. */
  /* r89: the paused frame reads as a real still — "First Light" is a dawn
     shot: amber sun low on the horizon, field silhouette, film grade. Drawn
     with gradients only; no filter on the animated subtree (ruling 39a). */
  .ac__still { position: absolute; inset: 0; background:
    radial-gradient(30% 42% at 38% 62%, rgba(255,214,140,.9), rgba(255,178,102,.42) 42%, transparent 70%),
    radial-gradient(120% 60% at 50% 66%, rgba(255,160,90,.30), transparent 62%),
    linear-gradient(180deg, #16324E 0%, #35507A 34%, #8A6D7E 52%, #D89A6A 62%, #E8B27E 66%, #3A3A38 66.5%, #23241F 78%, #191A16 100%); }
  .ac__still::before { content: ""; position: absolute; left: 0; right: 0; top: 61%; height: 6.5%;
    background:
      radial-gradient(18% 100% at 12% 100%, #23241F 60%, transparent 61%),
      radial-gradient(22% 90% at 30% 100%, #1E1F1A 60%, transparent 61%),
      radial-gradient(16% 70% at 55% 100%, #23241F 60%, transparent 61%),
      radial-gradient(24% 100% at 78% 100%, #1B1C17 60%, transparent 61%),
      radial-gradient(14% 60% at 94% 100%, #23241F 60%, transparent 61%); }
  .ac__still::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(8,18,28,.42) 100%); }
  .ac__l3 { position: absolute; left: 14px; bottom: 40px; display: grid; gap: 2px; }
  .ac__l3 b { font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.4rem);
    letter-spacing: .02em; color: #fff; text-shadow: 0 1px 8px rgba(8,18,28,.6);
    background: linear-gradient(90deg, rgba(8,36,59,.55), rgba(8,36,59,0));
    padding: .12rem .55rem .12rem .45rem; border-left: 3px solid var(--lime); }
  .ac__l3 span { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em;
    font-size: .56rem; font-weight: 700; color: rgba(255,255,255,.88);
    background: rgba(8,36,59,.55); padding: .14rem .45rem; justify-self: start; }
  .ac__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 7px; }
  .ac__strip i { display: block; aspect-ratio: 16 / 9; border-radius: 4px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #22405E 0%, #4E5B7A 48%, #C08A60 63%, #23241F 66%, #191A16 100%);
    opacity: .55; }
  .ac__strip i:nth-child(1) { filter: brightness(.55) saturate(.7); }
  .ac__strip i:nth-child(2) { opacity: 1; box-shadow: 0 0 0 2px var(--lime); }
  .ac__strip i:nth-child(3) { filter: brightness(.85); }
  .ac__strip i:nth-child(4) { filter: brightness(1.05) saturate(1.1); }
  .ac__strip i:nth-child(5) { filter: brightness(1.2) saturate(1.15); }
  .ac__strip i::after { content: attr(data-t); position: absolute; right: 3px; bottom: 2px;
    font-family: var(--mono, inherit); font-size: .52rem; color: rgba(255,255,255,.85); }
  .ac__lower { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(8,36,59,0), rgba(8,36,59,.72)); }
  .ac__play { position: relative; filter: drop-shadow(0 2px 4px rgba(8,36,59,.5)); }
  .ac__tc { position: absolute; bottom: 10px; left: 12px; font-size: .78rem; color: rgba(255,255,255,.85); }
  .ac__dur { position: absolute; bottom: 10px; right: 12px; font-size: .78rem; color: #fff; background: rgba(8,36,59,.75); border-radius: 3px; padding: .1rem .35rem; }
  .ac__scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); }
  .ac__scrub span { display: block; height: 100%; background: var(--lime); }
  .ac__framenote { margin: .5rem 0 0; font-size: .76rem; color: var(--ink-3); }
  .ac__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
  @media (min-width: 700px) {
    .ac__actions { flex-wrap: nowrap; }
    .ac__actions .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-inline: .7rem; }
  }
  .ac__actions .btn { cursor: default; }
  .ac__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem 1.6rem; margin: 1.3rem 0 0; border-top: 1px solid var(--rule-soft); padding-top: 1.2rem; }
  .ac__dl > div { min-width: 0; }
  .ac__dl dt { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 700; color: var(--ink-3); margin: 0 0 .18rem; }
  .ac__dl dd { margin: 0; font-size: .95rem; color: var(--ink); }
  .ac__tr { background: var(--paper); border-radius: 12px; padding: 1rem 1.15rem; margin-top: 1.25rem; }
  .ac__tr p { font-style: italic; font-size: .95rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 .6rem; }
  .ac__ai { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .78rem; color: var(--ink-3); }
  .ac__aitag { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; font-weight: 700; color: var(--blue-text); border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); border-radius: 3px; padding: .08rem .35rem; }
  /* r111 (owner, from his phone): the metadata receipt was one giant row per
   field on mobile — a full viewport of labels. Two columns hold, type tightens:
   the whole receipt reads in about a third of a screen. */
@media (max-width: 560px) {
  .ac__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; margin-top: 1rem; padding-top: .9rem; }
  .ac__dl dt { font-size: .56rem; letter-spacing: .08em; margin-bottom: .12rem; }
  .ac__dl dd { font-size: .84rem; line-height: 1.35; }
}
  /* The Spend-by-app figure is a live recreation now; self-contained, rc- prefixed. */
  .rc-spot { margin-top: 1.4rem; }
  /* ===== Ruling 52a: the calendar timeline (buy path, beat 1) =====
     Default render everywhere: a swipeable horizontal strip, all five stations
     reachable, nothing hidden. Where CSS scroll-driven animation is supported, on
     a wide screen, with motion allowed, the strip pins and the reader's vertical
     scroll pans it: sticky + animation-timeline, so the wheel always moves the
     page 1:1 and nothing is ever trapped. Reduced motion = the static strip. */
  .tl { margin: 1.4rem 0 2.6rem; }
  .tl__pin { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: clamp(16px, 2.5vw, 26px); }
  .tl__head { margin-bottom: 1.1rem; }
  .tl__big { max-width: none; }
  .tl__hint { color: var(--ink-3); margin: .45rem 0 0; }
  .tl__hint-scroll { display: none; }
  /* Paths pass: the resting frame carries the whole span. A thin JUN-to-NOV rail
     sits above the cards, always visible, with the walked moments dotted, so a
     three-second glance reads "this runs to Election Day" before any scrolling. */
  .tl__rail { display: flex; align-items: flex-start; margin: .9rem 0 .2rem; padding-top: 7px;
    position: relative; }
  .tl__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px;
    background: var(--rule); }
  .tl__rail-mo { flex: 1 1 0; position: relative; font-family: var(--mono); font-size: .7rem;
    font-weight: 600; letter-spacing: .08em; color: var(--ink-3); padding-top: .5rem;
    font-variant-numeric: tabular-nums lining-nums; }
  .tl__rail-mo::before { content: ""; position: absolute; left: 0; top: -4px; width: 2px;
    height: 8px; background: var(--rule); }
  .tl__rail-mo i { position: absolute; top: -8px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--lime); border: 2px solid var(--lime-dark); font-style: normal; }
  .tl__rail-mo:last-child { flex: 0 0 auto; }
  .tl__rail-mo:last-child::before { background: var(--navy-deep); }
  .tl__cal { list-style: none; margin: 0; padding: .2rem 0 .7rem; display: flex;
    gap: clamp(26px, 3vw, 34px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tl__cal:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  /* Paths pass: 66vw (not 78) so ~24px of the next card peeks at phone width,
     making the sideways affordance visible without the scrollbar. */
  .tl__mo { flex: 0 0 auto; width: min(66vw, 330px); border: 1px solid var(--rule);
    border-radius: var(--r-lg); background: var(--paper); padding: 1rem 1.05rem 1.1rem;
    position: relative; }
  .tl__mo::after { content: "\2192"; position: absolute; right: -1.5rem; top: 40px;
    color: var(--lime-dark); font-weight: 800; font-size: 1.2rem; width: 1.5rem;
    text-align: center; }
  .tl__mo:last-child::after { content: none; }
  .tl__mon { display: inline-block; font-family: var(--mono); font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; color: var(--blue-text); border: 1px solid var(--rule);
    background: var(--white); padding: .18rem .5rem; border-radius: 3px;
    font-variant-numeric: tabular-nums lining-nums; }
  .tl__h { margin: .6rem 0 .25rem; font-size: 1.12rem; color: var(--navy-deep); }
  .tl__p { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
  .tl__doc { box-shadow: none; }
  .tl__mo--end { background: var(--navy-deep); border-color: var(--navy-deep); }
  @media (max-width: 700px) { .tl__mo--end { height: auto; min-height: 0; } }
  .tl__mo--end .tl__h { color: #fff; }
  .tl__mo--end .tl__p { color: #BDD2E2; }
  .tl__mo--end .tl__mon { background: transparent; color: var(--lime); border-color: rgba(255,255,255,.3); }
  /* Paths pass: the terminal card carries the grid its copy promises, all 22
     weeks Jun 8 to Nov 2 with the walked moments marked. */
  .tl__grid { display: flex; gap: 2px; margin-top: .8rem; }
  .tl__gw { flex: 1 1 0; height: 16px; border-radius: 2px; background: rgba(255,255,255,.16); }
  .tl__gw--aired { background: var(--lime); }
  .tl__gw--fwd { background: repeating-linear-gradient(45deg, rgba(168,209,78,.55) 0 3px, transparent 3px 6px);
    box-shadow: inset 0 0 0 1px rgba(168,209,78,.7); }
  .tl__gw--none { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
  .tl__gw--end { background: #fff; box-shadow: 0 0 0 2px var(--lime); }
  .tl__grid-months { display: flex; justify-content: space-between; margin-top: .35rem;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: #8FA9BE; }
  .tl__grid-cap { margin: .45rem 0 0; font-family: var(--mono); font-size: .68rem; line-height: 1.5;
    color: #BDD2E2; }
  .tl__weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .tl__wk { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .03em;
    color: var(--navy-ink); background: var(--lime); border: 1px solid transparent;
    border-radius: 3px; padding: .55rem .3rem .3rem; white-space: nowrap; }
  .tl__wk--fwd { background: repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--lime) 38%, var(--white)) 0 4px, var(--white) 4px 8px);
    border: 1px dashed var(--lime-dark); color: var(--ink-2); }
  .tl__wk--none { background: var(--white); border: 1px dashed var(--rule); color: var(--ink-3); }
  .tl__cap { margin: .5rem 0 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
    color: var(--ink-3); line-height: 1.5; white-space: normal; }
  /* r88: the calendar walk, scrubbed by the universal driver — every browser,
     every pointer. Establish plateau to 7%, release from 91%, as before. */
  html.scrub .tl__scroller { height: 280vh; }
  html.scrub .tl__pin { position: sticky; top: 84px; overflow: hidden; container-type: inline-size; }
  html.scrub .tl__cal { overflow: visible; width: max-content; will-change: transform;
    animation: tl-pan 1s linear paused both !important;
    animation-delay: calc((0.07 - var(--scrub, 0)) / 0.84 * 1s) !important; }
  html.scrub .tl__mo { width: 340px; }
  html.scrub .tl__hint-scroll { display: inline; }
  html.scrub .tl__hint-swipe { display: none; }
  @media (max-width: 999px) {
    html.scrub .tl__scroller { height: 200vh; }
    html.scrub .tl__mo { width: 300px; }
    html.scrub .tl__pin { top: 72px; }
  }
  @keyframes tl-pan { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100cqw)); } }
  /* ===== Ruling 51: beat-2 scoreboard + beat-3 cross-screen creative cards ===== */
  .wk-score__race, .wk-xsc__t { margin: .15rem 0 .5rem; font-size: .95rem; color: var(--navy-deep); }
  .wk-score__race span, .wk-xsc__t span { color: var(--ink-3); font-size: .85rem; font-weight: 400; }
  .wk-score__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 38%) max-content;
    gap: .6rem; align-items: center; padding: .32rem 0; border-top: 1px solid var(--rule-soft);
    font-size: .88rem; }
  .wk-score__row i { font-style: normal; color: var(--ink-3); }
  .wk-score__name { color: var(--navy-deep); font-weight: 600; }
  .wk-score__track { display: block; height: 9px; background: var(--paper-warm); }
  .wk-score__track span { display: block; height: 100%; background: var(--blue); }
  .wk-score__row--more .wk-score__name { color: var(--ink-3); font-weight: 500; }
  .wk-score__row b { font-family: var(--mono); font-weight: 600; color: var(--navy-ink); }
  .wk-score__lanes { margin-top: .6rem; border-top: 1px solid var(--rule-soft); padding-top: .55rem;
    font-size: .78rem; color: var(--ink-2); }
  .wk-score__est { color: var(--ink-3); }
  .wk-score__foot { display: grid; gap: .3rem; margin-top: .45rem;
    font-size: .78rem; color: var(--ink-3); }
  .wk-xsc__lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px;
    align-items: center; margin-top: .5rem; }
  .wk-xsc__name { font-size: .78rem; font-weight: 700; color: var(--navy-deep); line-height: 1.2; }
  .wk-xsc__name i { display: block; font-style: normal; font-size: .6rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .wk-xsc__track { position: relative; display: block; height: 12px; background: var(--paper-warm); }
  .wk-xsc__fill { position: absolute; top: 0; bottom: 0; }
  .wk-xsc__fill--st { background: var(--teal); }
  .wk-xsc__fill--tv { background: var(--navy); }
  .wk-xsc__note { grid-column: 2; font-size: .68rem; color: var(--ink-3); }
  .wk-xsc__axis { display: flex; justify-content: space-between; margin-top: .45rem;
    padding-left: 106px; font-size: .62rem; color: var(--ink-3); }
  .wk-xsc__read { margin: .55rem 0 0; border-top: 1px dashed var(--rule); padding-top: .5rem;
    font-size: .85rem; font-weight: 650; color: var(--navy-deep); }
  .wk-xsc__tr { margin-top: .6rem; background: var(--paper); border-radius: 8px; padding: .6rem .75rem; }
  .wk-xsc__tr p { margin: 0; font-style: italic; font-size: .85rem; color: var(--ink-2); }
  .wk-xsc__tr span { display: block; margin-top: .3rem; font-family: var(--mono); font-size: .6rem;
    letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
  @media (max-width: 560px) {
    .wk-xsc__lane { grid-template-columns: 78px 1fr; }
    .wk-xsc__axis { padding-left: 88px; }
  }

  /* ==================================================================
     PASS E (story & design brief, 2026-08-27). The buyer arc reads
     ALERT -> ORIENT -> ANALYZE -> ACT; the seller arc reads PRICE ->
     GAP -> CALL -> ALERT. Stage doctrine (§7): space before motion,
     one focal object per viewport, static end-states everywhere, the
     scroll never captured. Techniques from the §8 catalog only.
     ================================================================== */

  /* -- §8.1 the wire opens the arc: ticker items slide in on page load,
     timestamps staggering. One shot, then still. Base state visible. -- */
  @media (prefers-reduced-motion: no-preference) {
    .is-loaded .dstrip__i { animation: rise .55s var(--smooth) backwards; }
    .is-loaded .dstrip__i:nth-child(2) { animation-delay: .5s; }
    .is-loaded .dstrip__i:nth-child(3) { animation-delay: .72s; }
    .is-loaded .dstrip__i:nth-child(4) { animation-delay: .94s; }
  }

  /* -- §8.1 the alert assembles on entry: race, then the tape frame, then
     the transcript. Clip reveal + rise on the card's own parts; ends whole
     and still. The base state IS the whole card (JS-off, reduced motion,
     print all render it complete); .in-view only ADDS the assembly. -- */
  .wk__art--noscrub { animation: none !important; }
  @media (prefers-reduced-motion: no-preference) {
    .acs.in-view .ac__mast { animation: acs-in .45s var(--smooth) backwards; }
    .acs.in-view .ac__race,
    .acs.in-view .ac__who { animation: acs-in .4s var(--smooth) .12s backwards; }
    .acs.in-view .ac__frame,
    .acs.in-view .ac__framenote { animation: acs-clip .5s var(--smooth) .26s backwards; }
    .acs.in-view .ac__actions,
    .acs.in-view .ac__dl { animation: acs-in .45s var(--smooth) .5s backwards; }
    .acs.in-view .ac__tr { animation: acs-clip .5s var(--smooth) .7s backwards; }
  }
  @keyframes acs-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes acs-clip { from { opacity: 0; clip-path: inset(0 0 86% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

  /* -- seller beat 4: the alerts artifact. wk-doc grammar; the alert kind
     prints as a small caps chip in the row. -- */
  .wk-doc__kind { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em;
    font-size: .6rem; font-weight: 700; color: var(--blue-text);
    border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
    border-radius: 3px; padding: .12rem .4rem; white-space: nowrap; }

  /* ==================================================================
     §6.2 THE RADIO CONTOUR MAP — buyer beat 4, the page's feel moment.
     Default render everywhere: the finished map, whole and still, with
     the annotation set. With IO + motion allowed, entry plays the draw
     once. On a wide screen where scroll-driven animation is supported,
     the map pins and the reader's own scroll draws the contours across
     the geography (4.2 viewport-heights of runway, §8.2), releasing
     onto a still frame; the wheel always moves the page 1:1.
     ================================================================== */
  .ct { margin: 1.5rem 0 0; }
  .ct__pin { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: clamp(14px, 2.4vw, 26px); }
  .ct__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: .3rem .9rem; margin-bottom: .6rem; }
  .ct__brand { font-family: var(--label); text-transform: uppercase; letter-spacing: .13em;
    font-size: .66rem; font-weight: 700; color: var(--navy); }
  .ct__stamp { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule);
    padding: .12rem .4rem; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
  @media (max-width: 560px) { .ct__stamp { white-space: normal; line-height: 1.5; } }
  .ct__svg { width: 100%; height: auto; display: block; }
  .ct__ring { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .ct__lede { margin: .45rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
  .ct__hint { display: none; color: var(--ink-3); margin: .45rem 0 0; }
  /* The annotation inside the SVG carries the release on wide screens; under
     700px the same sentence prints as HTML below the map instead, where it
     stays legible. Both are in the markup; the width decides which shows. */
  .ct__note { display: none; margin: .7rem 0 0; font-size: .9rem; line-height: 1.5;
    color: var(--ink); font-weight: 600; max-width: 58ch; }
  .ct__note b { color: var(--lime-text); }
  @media (max-width: 699px) {
    .ct__ann { display: none; }
    .ct__note { display: block; }
  }
  .ct__cap { margin: .55rem 0 0; font-family: var(--mono); font-size: .68rem;
    line-height: 1.55; color: var(--ink-3); }
  /* Entry draw (IO adds .in-view to .ct-stage): contours sweep out from the
     transmitter, near ring first, the gap hatch lights as the outer ring
     lands, the annotation last. One shot, then still. */
  @media (prefers-reduced-motion: no-preference) {
    .ct-stage.in-view .ct__ring--f1 { animation: ct-draw .7s var(--smooth) .15s backwards; }
    .ct-stage.in-view .ct__ring--f2 { animation: ct-draw .8s var(--smooth) .4s backwards; }
    .ct-stage.in-view .ct__ring--f3 { animation: ct-draw .9s var(--smooth) .65s backwards; }
    .ct-stage.in-view .ct__gaphatch { animation: fade-in .7s ease-out 1.1s backwards; }
    .ct-stage.in-view .ct__ring--m1 { animation: ct-draw .7s var(--smooth) 1.5s backwards; }
    .ct-stage.in-view .ct__ring--m2 { animation: ct-draw .7s var(--smooth) 1.7s backwards; }
    .ct-stage.in-view .ct__ring--m3 { animation: ct-draw .8s var(--smooth) 1.9s backwards; }
    .ct-stage.in-view .ct__ann, .ct-stage.in-view .ct__note { animation: acs-in .6s var(--smooth) 2.5s backwards; }
  }
  @keyframes ct-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  /* The pinned, scrubbed rendition (§8.2): desktop, timeline support, motion
     allowed. Establish ~22% of the runway before the first stroke moves;
     develop draws metro then fringe contours; the hatch and the annotation
     land with a still release from 86%. Ranges never overlap the establish
     of the next scene: the scroller ends before the wk-links row. */
  /* r88: the contour draw, scrubbed by the universal driver. Same ranges. */
  html.scrub .ct__scroller { height: 300vh; }
  html.scrub .ct__pin { position: sticky; top: 88px; }
  html.scrub .ct__svg { max-width: min(880px, calc((100vh - 415px) * 1.524)); margin-inline: auto; }
  html.scrub .ct__hint { display: block; }
  html.scrub .ct__ring--f1 { animation: ct-draw 1s linear paused both !important; animation-delay: calc((0.22 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .ct__ring--f2 { animation: ct-draw 1s linear paused both !important; animation-delay: calc((0.28 - var(--scrub, 0)) / 0.14 * 1s) !important; }
  html.scrub .ct__ring--f3 { animation: ct-draw 1s linear paused both !important; animation-delay: calc((0.34 - var(--scrub, 0)) / 0.16 * 1s) !important; }
  html.scrub .ct__gaphatch { animation: fade-in 1s linear paused both !important; animation-delay: calc((0.46 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .ct__ring--m1 { animation: ct-draw 1s linear paused both !important; animation-delay: calc((0.58 - var(--scrub, 0)) / 0.08 * 1s) !important; }
  html.scrub .ct__ring--m2 { animation: ct-draw 1s linear paused both !important; animation-delay: calc((0.62 - var(--scrub, 0)) / 0.08 * 1s) !important; }
  html.scrub .ct__ring--m3 { animation: ct-draw 1s linear paused both !important; animation-delay: calc((0.66 - var(--scrub, 0)) / 0.10 * 1s) !important; }
  html.scrub .ct__ann { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.78 - var(--scrub, 0)) / 0.08 * 1s) !important; }
  @media (max-width: 999px) {
    html.scrub .ct__scroller { height: 190vh; }
    html.scrub .ct__svg { max-width: 100%; }
    html.scrub .ct__pin { top: 72px; }
  }

  /* ==================================================================
     §6.3 THE SHARE DIAGONAL — the seller's digital board. Spend share
     against viewing-time share, per service; under the line is lit.
     Default: the finished chart. Entry: dots settle, the diagonal
     draws, under-the-line ignites, the annotation lands (3vh runway
     when pinned on desktop, §8.3). Numbers illustrative.
     ================================================================== */
  .sd { max-width: 900px; margin-inline: auto; }
  .sd__pin { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: clamp(14px, 2.4vw, 26px); }
  .sd__svg { width: 100%; height: auto; display: block; }
  .sd__hint { display: none; color: var(--ink-3); margin: .5rem 0 0; }
  .sd__note { display: none; margin: .7rem 0 0; font-size: .9rem; line-height: 1.5;
    color: var(--ink); font-weight: 600; max-width: 58ch; }
  @media (max-width: 699px) {
    .sd__ann { display: none; }
    .sd__note { display: block; }
  }
  .sd__cap { margin: .55rem 0 0; font-family: var(--mono); font-size: .68rem;
    line-height: 1.55; color: var(--ink-3); }
  .sd__diag { stroke-dasharray: 1; stroke-dashoffset: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .sd-stage.in-view .sd__dots circle { animation: acs-in .55s var(--smooth) backwards; }
    .sd-stage.in-view .sd__dots circle:nth-of-type(2) { animation-delay: .07s; }
    .sd-stage.in-view .sd__dots circle:nth-of-type(3) { animation-delay: .14s; }
    .sd-stage.in-view .sd__dots circle:nth-of-type(4) { animation-delay: .21s; }
    .sd-stage.in-view .sd__dots circle:nth-of-type(5) { animation-delay: .28s; }
    .sd-stage.in-view .sd__dots circle:nth-of-type(6) { animation-delay: .35s; }
    .sd-stage.in-view .sd__dots circle:nth-of-type(7) { animation-delay: .42s; }
    .sd-stage.in-view .sd__diag { animation: ct-draw .7s var(--smooth) .6s backwards; }
    .sd-stage.in-view .sd__diag-lab { animation: fade-in .4s ease-out 1.1s backwards; }
    .sd-stage.in-view .sd__under { animation: sd-pop .55s var(--spring) 1.35s backwards; transform-origin: center; transform-box: fill-box; }
    .sd-stage.in-view .sd__under--2 { animation-delay: 1.5s; }
    .sd-stage.in-view .sd__under--3 { animation-delay: 1.65s; }
    .sd-stage.in-view .sd__ann, .sd-stage.in-view .sd__note { animation: acs-in .55s var(--smooth) 2s backwards; }
  }
  @keyframes sd-pop { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
  /* r88: the diagonal, scrubbed by the universal driver. Same ranges. */
  html.scrub .sd__scroller { height: 240vh; }
  html.scrub .sd__pin { position: sticky; top: 88px; }
  html.scrub .sd__svg { max-width: min(760px, calc((100vh - 330px) * 1.393)); margin-inline: auto; }
  html.scrub .sd__hint { display: block; }
  html.scrub .sd__dots circle { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.18 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .sd__dots circle:nth-of-type(2) { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.20 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .sd__dots circle:nth-of-type(3) { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.22 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .sd__dots circle:nth-of-type(4) { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.24 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .sd__dots circle:nth-of-type(5) { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.26 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .sd__dots circle:nth-of-type(6) { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.28 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .sd__dots circle:nth-of-type(7) { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.30 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .sd__diag { animation: ct-draw 1s linear paused both !important; animation-delay: calc((0.40 - var(--scrub, 0)) / 0.12 * 1s) !important; }
  html.scrub .sd__diag-lab { animation: fade-in 1s linear paused both !important; animation-delay: calc((0.50 - var(--scrub, 0)) / 0.06 * 1s) !important; }
  html.scrub .sd__under { animation: sd-pop 1s linear paused both !important; animation-delay: calc((0.56 - var(--scrub, 0)) / 0.08 * 1s) !important; transform-origin: center; transform-box: fill-box; }
  html.scrub .sd__under--2 { animation: sd-pop 1s linear paused both !important; animation-delay: calc((0.60 - var(--scrub, 0)) / 0.08 * 1s) !important; transform-origin: center; transform-box: fill-box; }
  html.scrub .sd__under--3 { animation: sd-pop 1s linear paused both !important; animation-delay: calc((0.64 - var(--scrub, 0)) / 0.08 * 1s) !important; transform-origin: center; transform-box: fill-box; }
  html.scrub .sd__ann { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.76 - var(--scrub, 0)) / 0.09 * 1s) !important; }
  html.scrub .sd__note { animation: acs-in 1s linear paused both !important; animation-delay: calc((0.76 - var(--scrub, 0)) / 0.09 * 1s) !important; }
  @media (max-width: 999px) {
    html.scrub .sd__scroller { height: 170vh; }
    html.scrub .sd__svg { max-width: 100%; }
    html.scrub .sd__pin { top: 72px; }
  }


/* Penciled quotes (Adam, 8/27): draft wording awaiting the named source's
   sign-off renders visibly marked as penciled — smaller than a real quote, on a
   dashed rule, with a pending tag. Swap in the approved wording and drop the
   tag; nothing unlabeled ships (no-invention rule). */
.quote--draft { margin-top: 1.8rem; border-left: 2px dashed var(--rule); padding-left: 1.1rem; }
.quote--draft::before { content: none; }
.quote--draft p { font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 600; }
.quote-draft-tag { display: inline-block; margin-left: .5rem; font-family: var(--label);
  text-transform: uppercase; letter-spacing: .09em; font-size: .62rem; font-weight: 700;
  color: #7A5410; background: #FFF4E0; border: 1px solid #E8CF9E; border-radius: 3px;
  padding: .14rem .45rem; vertical-align: middle; }

/* ==========================================================================
   r33: real product screens (synthetic data) on the marketing pages.
   Default crop is a 16:9 window onto the top of the screen; --tall keeps
   more height, --natural shows the whole capture (no blank regions inside).
   ========================================================================== */
.app-shot { margin: 1.6rem 0 2rem; border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--white); }
.app-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; display: block; }
.app-shot--tall img { aspect-ratio: 4 / 3; }
.app-shot--natural img { aspect-ratio: auto; object-fit: contain; }
.app-shot figcaption { padding: .55rem .95rem; font-family: var(--label); text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; font-weight: 600; color: var(--ink-3);
  border-top: 1px solid var(--rule-soft); background: var(--white); }
.app-shot--hero { margin: 0; }

/* ==========================================================================
   r37: methodology reads short — every chapter folds behind its header.
   ========================================================================== */
.mfold { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white); margin-top: 1.2rem; }
.mfold > summary { cursor: pointer; list-style: none; padding: .95rem 1.2rem; font-family: var(--label);
  text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 600; color: var(--navy-deep);
  display: flex; align-items: baseline; gap: .6rem; }
.mfold > summary::-webkit-details-marker { display: none; }
.mfold > summary::after { content: "+"; margin-left: auto; font-family: var(--sans); font-size: 1.1rem; color: var(--ink-3); }
.mfold[open] > summary::after { content: "\2212"; }
.mfold__in { padding: .2rem 1.2rem 1.4rem; }
.section--band .mfold, .section--tint .mfold { background: var(--white); }


/* ---------- R68: the next rail — every page ends pushing forward ---------- */
.nextrail { border-top: 1px solid var(--rule-soft); }
.nextrail .nextcard { position: relative; display: block; text-decoration: none;
  background: transparent; border-radius: var(--r-lg); overflow: hidden;
  padding: 2.2rem 2.4rem 2rem; margin: 2.6rem auto 2.8rem; max-width: 1080px;
  transition: transform .18s var(--smooth); }
.nextrail .nextcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), #00ACC1 55%, var(--lime)); }
.nextrail .nextcard:hover { transform: translateY(-3px); }
.nextcard__k { display: block; font-family: var(--label); text-transform: uppercase;
  letter-spacing: .16em; font-size: .74rem; font-weight: 700; color: var(--ink-3); }
.nextcard__t { display: block; margin-top: .45rem; }
.nextcard__t b { display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.05; color: var(--navy-deep); }
.nextcard__t > span { display: block; margin-top: .55rem; font-size: .95rem; line-height: 1.5;
  color: var(--ink-2); max-width: 56ch; }
.nextcard__go { position: absolute; right: 2rem; bottom: 1.4rem; font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1; color: var(--lime); transition: transform .18s var(--smooth); }
.nextrail .nextcard:hover .nextcard__go { transform: translateX(8px); }
@media (max-width: 700px) {
  .nextrail .nextcard { padding: 1.5rem 1.2rem 2.6rem; margin: 1.6rem auto 1.8rem; }
  .nextcard__go { right: 1.1rem; bottom: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nextrail .nextcard, .nextcard__go { transition: none; }
}

/* r88: the runways are back — driven by the universal JS scrub in site.js (the old
   animation-timeline path was Chrome-only, which is why "the scroll jacking stopped
   working" on Safari and iPhone). html.scrub gates everything; JS-off and reduced
   motion render the designed static end-states. */

/* r87: the slow-moving gradient on the buyers-and-sellers week (promised long ago,
   never shipped). A broad wash drifting under the section; still under reduced motion. */
#the-week { background: linear-gradient(115deg,
    color-mix(in srgb, var(--navy) 7%, var(--tint)) 0%,
    var(--paper) 32%,
    color-mix(in srgb, #00ACC1 6%, var(--tint)) 55%,
    var(--paper) 78%,
    color-mix(in srgb, var(--lime) 8%, var(--tint)) 100%);
  background-size: 260% 260%; }
@media (prefers-reduced-motion: no-preference) {
  #the-week { animation: wk-drift 30s ease-in-out infinite alternate; }
}
@keyframes wk-drift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* r92 (Adam): the oversized/overhanging/badged logo experiments are retired —
   the convention exists for a reason. The brand renders at the baseline sizes
   (rules near the top of this file); the only flourish that stays is the thin
   gradient keyline under the bar. */
.nav::before { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--navy) 0%, #00ACC1 55%, var(--lime) 100%); }

/* r88b: the platform board deck — four boards, one deck. site.js adds
   .pb--live and the rail appears; JS-off all four panels stack exactly as
   the four sections always did. Tab text reuses the wk tab type classes. */
.pb { scroll-margin-top: 96px; }
.pb__panel { scroll-margin-top: 96px; }
.pb__head { padding: clamp(56px, 7vw, 96px) 0 0; }
.pb__rail { display: none; }
.pb--live .pb__rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  margin: 1.2rem 0 0;
  background: var(--paper); border: 1.5px solid var(--rule);
  border-radius: var(--r-lg); padding: 5px;
}
.pb__tab {
  text-align: center; display: grid; gap: .18rem; cursor: pointer;
  font-family: var(--sans); background: transparent;
  border: 0; border-radius: calc(var(--r-lg) - 6px);
  padding: .8rem .7rem;
}
.pb__tab[aria-selected="false"]:hover { background: var(--white); box-shadow: var(--shadow); transform: translateY(-1px); }
.pb__tab[aria-selected="false"]:hover .wk__tab-name { text-decoration: underline; text-decoration-color: var(--lime-dark); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.pb__tab[aria-selected="true"] { background: var(--navy); cursor: default; box-shadow: inset 0 3px 0 var(--lime), 0 6px 18px rgba(13,46,74,.22); }
.pb__tab[aria-selected="true"] .wk__tab-name { color: #fff; }
.pb__tab[aria-selected="true"] .wk__tab-sub { color: #BDD2E2; }
.pb__cue { display: none; }
.pb--live .pb__cue {
  display: block; margin: .6rem 0 0;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .12em;
  font-size: .64rem; font-weight: 600; color: var(--ink-3);
}
.pb--live .pb__panel[hidden] { display: none; }
@media (max-width: 860px) {
  .pb--live .pb__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb__tab { padding: .65rem .5rem; }
  .pb__tab .wk__tab-sub { display: none; }
}
/* r88b: the seller deck runs six boards; the rail steps 6 -> 3 -> 2. */
.pb--live .pb__rail--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pb--live .pb__rail--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pb--live .pb__rail--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb--live .pb__rail--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pb--live .pb__rail--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pb--live .pb__rail--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* r89: the ambient layer — slow, cheap, every browser. The market field
   drifts, the glows breathe, the home hero light moves. All decorative:
   reduced motion turns every one of them off. */
@media (prefers-reduced-motion: no-preference) {
  .kw__stage { animation: kw-pan 90s linear infinite alternate; }
  @keyframes kw-pan { from { background-position: 0 0; } to { background-position: 92px 46px; } }
  .kw__glow { animation: kw-breathe 16s var(--smooth) infinite alternate; }
  .kw__glow--b { animation-duration: 22s; animation-delay: -8s; }
  @keyframes kw-breathe {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(26px, -18px) scale(1.12); }
  }
  .hero--home { background-size: 190% 190%; animation: hero-drift 34s var(--smooth) infinite alternate; }
  @keyframes hero-drift { from { background-position: 12% 0%; } to { background-position: 88% 100%; } }
}

/* r89: the builder line — the positioning statement under the console stats. */
.built { text-align: center; }
.built__big {
  margin: 0 auto; max-width: 22ch;
  font-family: var(--display); font-weight: 700; letter-spacing: -.018em;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.16; color: var(--navy-deep);
}
.built__sub { margin: .8rem auto 0; max-width: 58ch; font-size: .98rem; line-height: 1.6; color: var(--ink-2); }
/* r89: the six-up console row — values sized so Decade+ and 98.0% never clip. */
.stats--6 .stat__v { font-size: clamp(1.7rem, 2.9vw, 2.9rem); }
.stats--6 .stat { padding: 1.3rem 1.1rem; }
@media (max-width: 1100px) { .stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stats--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* r101.2: the real alert's frame and strip tiles override the drawn dawn */
.ac__real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac .ac__strip--real i { background: url("../media/five-borough-still.jpg") center/cover; filter: saturate(.85); }
.ac .ac__strip--real i:nth-child(2) { background-position: 30% center; }
.ac .ac__strip--real i:nth-child(3) { background-position: 60% center; filter: saturate(.85) brightness(.92); }
.ac .ac__strip--real i:nth-child(4) { background-position: 80% center; }
.ac .ac__strip--real i:nth-child(5) { background-position: 15% center; filter: saturate(.85) brightness(1.05); }

/* r102: the curtain band is shared chrome (index streaming callout, platform seller banner) */
.curtain { background: var(--navy-deep); border-radius: var(--r-lg); padding: 2rem 2.2rem; position: relative; overflow: hidden; }
.curtain::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), #00ACC1 55%, var(--lime)); }
.curtain__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 700; color: #9FBFD6; margin: 0 0 .5rem; }
.curtain__h { color: #fff; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 .6rem; }
.curtain__p { color: #C7D9E6; font-size: .97rem; line-height: 1.6; max-width: 66ch; margin: 0; }
.curtain__p b { color: #fff; }
.curtain__go { margin: .9rem 0 0; }
.curtain__go a { color: var(--lime); font-weight: 600; text-decoration: none; }
.curtain__go a:hover { text-decoration: underline; }
  @media (max-width: 640px) { .curtain { padding: 1.5rem 1.2rem; } }

/* r103: the curtain earns its right half — text beside the one-in-three figure */
.curtain--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; }
.curtain__fig { width: 100%; height: auto; display: block; }
@media (max-width: 800px) { .curtain--split { grid-template-columns: 1fr; } .curtain__fig { max-width: 420px; } }

/* r103: mobile-only swipe affordances */
.kbd-hint-mobile { display: none; color: var(--ink-3); }
@media (max-width: 700px) { .kbd-hint-mobile { display: block; } }
/* r103: the beat-1 carousel stops stretching its shortest card */
@media (max-width: 700px) { .tl__cal { align-items: flex-start; } .tl__mo { height: auto; } }

/* r104: the curtain's coverage stack — names as the logo wall, numbers as the scale */
.curtain__figwrap { min-width: 0; }
.curtain__apps { margin: .85rem 0 0; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; line-height: 1.8; color: #DCE9F2; }
.curtain__apps b { font-weight: 700; color: var(--lime); }
.curtain__scale { margin: .65rem 0 0; font-size: .85rem; color: #C7D9E6; }
.curtain__scale b { color: #fff; }

/* r104: the targeting proclamation — the curtain's light counterpart */
.curtain--paper { background: var(--white); border: 1px solid var(--rule); }
.curtain--paper .curtain__k { color: var(--blue-text); }
.curtain--paper .curtain__h { color: var(--navy-deep); }
.curtain--paper .curtain__p { color: var(--ink-2); }
.curtain--paper .curtain__p b { color: var(--navy-deep); }
.curtain--paper .curtain__go a { color: #4F7A25; }
.tflow { display: grid; gap: .45rem; margin: 0; justify-items: start; }
.tflow > span { display: block; }
.tflow__q, .tflow__aud, .tflow__deal { background: var(--paper, #F4F8FB); border: 1px solid var(--rule);
  border-radius: var(--r); padding: .6rem .75rem; font-size: .88rem; font-weight: 600; color: var(--navy-deep); max-width: 40ch; }
.tflow__q i, .tflow__aud i, .tflow__deal i { display: block; margin-top: .25rem; font-style: normal;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-size: .62rem;
  font-weight: 700; color: var(--ink-3); }
.tflow__deal { background: var(--navy-deep); color: var(--lime); border-color: var(--navy-deep); }
.tflow__deal i { color: #9FBFD6; }
.tflow__arrow { color: var(--ink-3); font-size: .9rem; padding-left: 1rem; }

/* ============ r105: the buyer's week as ONE swap-stage ============
   Base (JS-off, reduced motion, phones): four beats stacked, everything visible.
   With the scrub engine (html.scrub, >=760px): the stage pins and the scroll
   swaps beats in place. */
.wkx__beat { display: grid; align-content: center; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 2rem; align-items: start; margin: 0 0 2.6rem; }
@media (max-width: 759px) { .wkx__beat { grid-template-columns: 1fr; gap: 1rem; } }
.wkx__rail { display: none; }
.wkx__hint { display: none; color: var(--ink-3); }

@media (min-width: 760px) {
  html.scrub .wkx__scroller { height: 320vh; }
  html.scrub .wkx__pin { position: sticky; top: calc(var(--nav-h, 64px) + 18px);
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--nav-h, 64px) - 30px); }
  html.scrub .wkx__rail { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
  html.scrub .wkx__step { font-family: var(--label); text-transform: uppercase;
    letter-spacing: .1em; font-size: .7rem; font-weight: 700; color: var(--ink-3);
    border-top: 2.5px solid var(--rule); padding-top: .4rem; flex: 1 1 0; opacity: .45;
    animation: wkx-step 1s linear paused both; }
  html.scrub .wkx__hint { display: block; margin: 0 0 1rem; }
  html.scrub .wkx__beats { position: relative; height: min(66vh, 620px); }
  html.scrub .wkx__beat { position: absolute; inset: 0; margin: 0;
    animation: wkx-win 1s linear paused both; }
  html.scrub .wkx__beat--1 { animation-name: wkx-win-first; animation-delay: calc((0.00 - var(--scrub, 0)) / 0.25 * 1s); }
  html.scrub .wkx__beat--2 { animation-delay: calc((0.25 - var(--scrub, 0)) / 0.25 * 1s); }
  html.scrub .wkx__beat--3 { animation-delay: calc((0.50 - var(--scrub, 0)) / 0.25 * 1s); }
  html.scrub .wkx__beat--4 { animation-name: wkx-win-last; animation-delay: calc((0.75 - var(--scrub, 0)) / 0.25 * 1s); }
  html.scrub .wkx__step--1 { animation-name: wkx-step-first; animation-delay: calc((0.00 - var(--scrub, 0)) / 0.25 * 1s); }
  html.scrub .wkx__step--2 { animation-delay: calc((0.25 - var(--scrub, 0)) / 0.25 * 1s); }
  html.scrub .wkx__step--3 { animation-delay: calc((0.50 - var(--scrub, 0)) / 0.25 * 1s); }
  html.scrub .wkx__step--4 { animation-name: wkx-step-last; animation-delay: calc((0.75 - var(--scrub, 0)) / 0.25 * 1s); }
}
@keyframes wkx-win {
  0% { opacity: 0; visibility: hidden; transform: translateY(16px); }
  14% { opacity: 1; visibility: visible; transform: none; }
  86% { opacity: 1; visibility: visible; transform: none; }
  100% { opacity: 0; visibility: hidden; transform: translateY(-12px); }
}
@keyframes wkx-win-first {
  0%, 86% { opacity: 1; visibility: visible; transform: none; }
  100% { opacity: 0; visibility: hidden; transform: translateY(-12px); }
}
@keyframes wkx-win-last {
  0% { opacity: 0; visibility: hidden; transform: translateY(16px); }
  14%, 100% { opacity: 1; visibility: visible; transform: none; }
}
@keyframes wkx-step { 0% { opacity: .45; } 10%, 90% { opacity: 1; border-top-color: var(--lime); color: var(--navy-deep); } 100% { opacity: .45; } }
@keyframes wkx-step-first { 0%, 90% { opacity: 1; border-top-color: var(--lime); color: var(--navy-deep); } 100% { opacity: .45; } }
@keyframes wkx-step-last { 0% { opacity: .45; } 10%, 100% { opacity: 1; border-top-color: var(--lime); color: var(--navy-deep); } }


/* ================= r111: the mobile renditions (owner: "feels off and
   complicated on mobile"; four-specialist panel, avg 6.72). Doctrine: no
   desktop furniture on a phone. Boards re-lay as receipt rows, walls collapse
   behind disclosures, drag verbs become taps, mono captions get an 11px floor.
   Everything below is mobile-scoped or inert on desktop. ================= */

/* the mobile disclosure: ships open in markup (JS-off safe); site.js closes it
   on small screens; on desktop the summary hides and the content just shows. */
details.mdet > summary { cursor: pointer; list-style: none; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: .3rem 0; }
details.mdet > summary::-webkit-details-marker { display: none; }
details.mdet > summary::before { content: "+ "; color: var(--lime-text); font-weight: 700; }
details.mdet[open] > summary::before { content: "\2212\00a0"; }
@media (min-width: 641px) { details.mdet > summary { display: none; } }

/* touch verb for pointer-aware copy (mirror of .kbd-hint) */
.tap-only { display: none; }
@media (hover: none) { .tap-only { display: inline; } }

/* the shortlist's copy/clear buttons appear once something is picked */
.sx-basket[data-has="false"] .sx-basket__ft-row { display: none; }

/* the rate book's one-market card (mobile only) */
.rc-mobile-rate { display: none; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--white); padding: .8rem .9rem .85rem; margin: .6rem 0 .2rem; }
.rc-mobile-rate__m { margin: 0 0 .5rem; font-weight: 800; color: var(--navy-deep);
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.rc-mobile-rate__m span { font-family: var(--mono); font-size: .68rem; font-weight: 400;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.rc-mobile-rate dl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; margin: 0; }
.rc-mobile-rate dt { font-family: var(--label); text-transform: uppercase;
  letter-spacing: .08em; font-size: .58rem; font-weight: 700; color: var(--ink-3); }
.rc-mobile-rate dd { margin: .05rem 0 0; font-family: var(--mono); font-size: 1.15rem;
  font-weight: 700; color: var(--navy-deep); font-variant-numeric: tabular-nums lining-nums; }
.rc-mobile-rate__n { margin: .6rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-3); }

/* the collage's mobile more-row */
.kw__more { display: none; }

@media (max-width: 640px) {
  /* page inline sheets load after this file, so these terminal mobile
     renditions carry !important on the contested properties. */
  /* 1. the collage: four full-width beats (alert, board, Baker, deal ID) */
  .kw__cluster { grid-template-columns: 1fr !important; gap: .8rem !important; }
  .kw__cluster .kw__c:nth-child(odd), .kw__cluster .kw__c:nth-child(even) { transform: none !important; }
  .kw__c--player, .kw__c--pod, .kw__c--mix, .kw__c--stream, .kw__c--book,
  .kw__c--share, .kw__c--rate, .kw__c--op, .kw__c--op2,
  .kw__c--deal { display: none !important; } /* r179: the bare deal chip is cryptic without its zone label */
  .kw__zone { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
  .kw__zone-k { display: none !important; }
  .kw__readline { display: none !important; }
  .kw__more { display: block !important; margin-top: 1rem; font-weight: 700; font-size: .9rem;
    color: var(--blue-text); text-decoration: none; }

  /* 2. the four doors: the words carry it; desktop screenshots go */
  #doors .press-card__shot { display: none !important; }
  #doors .press-card h3 { margin-top: .15rem; }

  /* 3. the flip book stacks; the dots become the spine */
  .fb .fb__scroll { grid-auto-flow: row !important; grid-auto-columns: unset !important;
    grid-template-columns: 1fr !important; overflow: visible !important; padding-bottom: .2rem !important; }
  .fb .fb__rule, .fb .fb__hint { display: none !important; }
  .fb .fb__page { min-height: 0 !important; padding: .85rem .95rem .9rem !important; }

  /* 4. the rate book: table and swipe hint yield to the one-market card */
  .rc-ratebook-scroll, .rc-ratebook .tbl-hint { display: none !important; }
  .rc-mobile-rate { display: block !important; }

  /* 5. board chrome: the five inert filter chips become one printed caption */
  .rc-digital .rc-digital-filters { display: none !important; }
  .rc-digital-caption { display: block !important; font-family: var(--mono); font-size: .68rem;
    letter-spacing: .04em; color: var(--ink-3); margin-top: .2rem; }

  /* 6. type floors: mono captions never dip under ~11px on a phone */
  .rc-seller .rc-seller-foot p { font-size: 11px !important; }
  .kw__fl, .kw__tc { font-size: .7rem !important; }
  .qcard__meta, .qcard__count, .tstep-art__meta, .lp__stamp, .mxs__stamp,
  .rct-stamp, .wk-doc__stamp { font-size: .7rem !important; }

  /* 7. long fine print reads left-aligned on a phone */
  p.small.center { text-align: left !important; }

  /* 8. the contact form's submit goes full width */
  form button[type="submit"].btn { width: 100% !important; justify-content: center; }

  /* 9. press pull quotes cost half a screen, not a full one */
  .quote p { font-size: clamp(1.15rem, 5.4vw, 1.4rem) !important; }
}
@media (min-width: 641px) { .rc-digital-caption { display: none; } }

/* r111: the audience-addressed band. Desktop: four open cards in a 2x2 grid,
   the seat name as the card kicker. Phone: four accordion rows — the
   "here's how you use us" move, with the worked dollars. */
.seats { margin-top: 3rem; }
.seats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1rem; }
.mdet--seat { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: .95rem 1.05rem 1rem; }
.mdet--seat > summary { font-family: var(--display); font-size: 1.55rem; letter-spacing: -.01em;
  text-transform: none; color: var(--navy-deep); padding: 0 0 .35rem; }
.mdet--seat > summary::before { content: ""; }
.mdet--seat > p { margin: .1rem 0 .5rem; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.mdet--seat > p b { color: var(--navy-deep); }
.mdet--seat > a { font-size: .88rem; font-weight: 700; color: var(--blue-text); text-decoration: none; }
@media (min-width: 641px) {
  /* always open on desktop: the summary is the card kicker, not a control.
     details.mdet--seat > summary out-specifies the global summary hide. */
  details.mdet--seat > summary { display: block; pointer-events: none; }
}
@media (max-width: 640px) {
  .seats__grid { grid-template-columns: 1fr; gap: .6rem; }
  .mdet--seat { padding: .8rem .95rem; }
  .mdet--seat > summary { font-size: 1.15rem; padding: .1rem 0; }
  .mdet--seat > summary::after { content: "+"; float: right; color: var(--lime-text); font-weight: 700; }
  .mdet--seat[open] > summary::after { content: "\2212"; }
}

/* r112: the channel cards read two-up — coverage in one glance, not a column
   of half-empty rows (three rounds of judges; the owner: more visual). */
@media (min-width: 721px) {
  #lanes .lanefams { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: stretch; }
  #lanes .lanefam { margin: 0; height: 100%; }
  #lanes .lanefam__what { max-width: none; }
  #lanes .lanefam__body { max-width: none; }
}

/* ============ r113 ============ */
/* The lead read (the owner: "no hierarchy, just numbers") — one number leads,
   three ride beside it, the rest is a footline. */
.statlead { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 1.2rem 2.8rem; align-items: center; background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.4rem);
  position: relative; overflow: hidden; }
.statlead::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--lime) 0%, #00ACC1 60%, var(--navy) 100%); }
.statlead__v { font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(3.2rem, 6.4vw, 5rem); color: var(--navy-deep); }
.statlead__v span { box-shadow: inset 0 -0.14em var(--lime); padding: 0 .05em; }
.statlead__l { margin: .6rem 0 0; font-size: .95rem; line-height: 1.5;
  color: var(--ink-2); max-width: 34ch; }
.statlead__row { display: grid; grid-template-columns: 6.6rem 1fr; align-items: baseline;
  gap: 1rem; padding: .62rem 0; border-top: 1px solid var(--rule); }
.statlead__side .statlead__row:first-child { border-top: 0; }
.statlead__row b { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800;
  color: var(--navy-deep); letter-spacing: -.01em; }
.statlead__row span { font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.statlead__foot { grid-column: 1 / -1; margin: .1rem 0 0; border-top: 1px solid var(--rule);
  padding-top: .75rem; font-family: var(--label); letter-spacing: .1em; font-weight: 700;
  font-size: .64rem; color: var(--ink-3); }
@media (max-width: 720px) {
  .statlead { grid-template-columns: 1fr; gap: .9rem; }
  .statlead__row { grid-template-columns: 5.2rem 1fr; }
}

/* The doors and the seats say what they are (the owner: "see our products /
   look by use case, but not making that obvious"). */
.doors__h, .seats__h { margin: .25rem 0 0; font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.01em; color: var(--navy-deep); }
.seats__h { margin-bottom: 1.2rem; }

/* The accent line breathes — a slow drift across the same AA gradient family.
   Reduced motion (and browsers without text clipping) keep the static line. */
@supports (-webkit-background-clip: text) {
  @media (prefers-reduced-motion: no-preference) {
    .ht .ht__l--accent {
      background: linear-gradient(100deg, var(--lime-text) 0%, #007A8A 38%, #1F6E96 60%, var(--lime-text) 100%);
      background-size: 250% 100%;
      -webkit-background-clip: text; background-clip: text;
      animation: ht-drift 17s ease-in-out infinite alternate;
    }
  }
}
@keyframes ht-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Depth (the owner: "a parallax effect somewhere... more cinematic"): a few
   hero set pieces ride the scroll a beat behind the page. site.js sets --plx
   (-.7 to .7, viewport-centered) on [data-plx]; reduced motion never gets the
   scrub class, so the pieces sit still. */
@media (min-width: 760px) {
  html.scrub [data-plx] { transform: translate3d(0, calc(var(--plx, 0) * var(--plx-d, 18px)), 0); }
}

/* ============ r114 (round-7 fixes) ============ */
/* The proclaim leads with its lead read. */
.hero-proclaim b.num:first-of-type { font-size: 1.16em; }
/* Pinned week beats fill the frame (the owner: "half-empty stage"). */
@media (min-width: 760px) {
  html.scrub .wkx__beats { height: min(70vh, 660px); }
  html.scrub .wkx__beat { align-items: center; align-content: center; }
}
/* Polling closes on the ask; the flight terms read as a footnote. */
.offer-cta { text-align: center; }
.offer-fine { max-width: 70ch; margin-inline: auto; text-align: left;
  font-size: .78rem; color: var(--ink-3); }
/* Press kit facts, one action per line. */
.presskit p { margin: .3rem 0 0; }
/* The announcement pill wraps inside its lozenge on small phones. */
@media (max-width: 430px) {
  .hero-banner__txt { white-space: normal !important; }
  .hero-banner__in--dual a { white-space: normal !important; border-radius: 16px !important;
    padding: .4rem .9rem .4rem .6rem !important; text-align: left; }
}

/* ============ r115 (round-8 fixes) ============ */
/* Door cards carry one signature artifact at native scale. */
.press-card__art { margin: .85rem 0 1rem; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); padding: .85rem .95rem; display: grid; gap: .42rem;
  align-content: start; min-height: 138px; }
.pca__bar { margin: 0; display: flex; justify-content: space-between; gap: .6rem;
  font-family: var(--label); font-size: .58rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-text); }
.pca__bar span:last-child { color: var(--ink-3); }
.pca__big { margin: 0; font-weight: 700; font-size: .98rem; line-height: 1.35;
  color: var(--navy-deep); }
.pca__row { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .03em;
  line-height: 1.55; color: var(--ink-2); }
/* The collage wears its morning order. */
.kw__c { position: relative; }
.kw__c--alert::before, .kw__c--player::before, .kw__c--pod::before,
.kw__c--score::before, .kw__c--rate::before, .kw__c--baker::before {
  position: absolute; top: -11px; left: -11px; z-index: 9; width: 21px; height: 21px;
  border-radius: 50%; display: grid; place-items: center; font-family: var(--label);
  font-size: .64rem; font-weight: 800; background: var(--navy-deep); color: #fff;
  border: 1.5px solid var(--lime); }
.kw__c--alert::before { content: "1"; }
.kw__c--player::before { content: "2"; }
.kw__c--pod::before { content: "3"; }
.kw__c--score::before { content: "4"; }
.kw__c--rate::before { content: "5"; }
.kw__c--baker::before { content: "6"; }
/* Polling's hero stats lead with the bank. */
.hero--poll .stats .stat:first-child .stat__v { display: inline-block;
  font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  box-shadow: inset 0 -0.13em var(--lime); padding: 0 .05em; }
/* The loop's return line closes the polling page. */
.lp__loop--end { text-align: center; margin: 2rem 0 0; }
/* The broadcast-catch receipt beside the real alert. */
.ac__bcast { margin: .8rem 0 0; color: var(--ink-3); }

/* ============ r116: the website is the spec (the owner's challenge) ========= */
/* The real alert ARRIVES: the card lands like a delivered file, the ledger
   rows cascade, and the two timestamps hit like rubber stamps. */
@media (prefers-reduced-motion: no-preference) {
  .acs.in-view .ac { animation: ac-land .6s var(--smooth) backwards; }
  .acs.in-view .ac__dl > div { animation: rise .38s var(--smooth) backwards; }
  .acs.in-view .ac__dl > div:nth-child(1) { animation-delay: .2s; }
  .acs.in-view .ac__dl > div:nth-child(2) { animation-delay: .25s; }
  .acs.in-view .ac__dl > div:nth-child(3) { animation-delay: .3s; }
  .acs.in-view .ac__dl > div:nth-child(4) { animation-delay: .35s; }
  .acs.in-view .ac__dl > div:nth-child(5) { animation-delay: .4s; }
  .acs.in-view .ac__dl > div:nth-child(6) { animation-delay: .45s; }
  .acs.in-view .ac__dl > div:nth-child(7) { animation-delay: .5s; }
  .acs.in-view .ac__dl > div:nth-child(8) { animation-delay: .55s; }
  .acs.in-view .ac__dl > div:nth-child(9) { animation-delay: .6s; }
  .acs.in-view .ac__dl > div:nth-child(10) { animation-delay: .65s; }
  .acs.in-view .ac__dl > div:nth-child(4) dd { animation: ac-stamp .5s cubic-bezier(.2,1.4,.3,1) .75s backwards; }
  .acs.in-view .ac__dl > div:nth-child(5) dd { animation: ac-stamp .5s cubic-bezier(.2,1.4,.3,1) 1s backwards; }
}
@keyframes ac-land { from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: none; } }
@keyframes ac-stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-4deg); }
  60% { opacity: 1; transform: scale(.95) rotate(.6deg); } 100% { opacity: 1; transform: none; } }

/* Motion draws the numbers — and the honesty grammar plays in time: the
   measured ink draws FIRST, the filed/estimated ink a beat after. */
@media (prefers-reduced-motion: no-preference) {
  .curtain__fig rect, .mhero__bar rect { transform-box: fill-box; transform-origin: left center; }
  .in-view .curtain__fig rect:nth-of-type(1) { animation: grow-x .8s var(--smooth) .15s backwards; }
  .in-view .curtain__fig rect:nth-of-type(2) { animation: grow-x .7s var(--smooth) .75s backwards; }
  .mhero.in-view .mhero__bar rect:nth-of-type(1) { animation: grow-x .8s var(--smooth) .3s backwards; }
  .mhero.in-view .mhero__bar rect:nth-of-type(2) { animation: grow-x .7s var(--smooth) .9s backwards; }
  .rc-seller-stage.in-view .rc-seller-fill { transform-origin: left center;
    animation: grow-x .8s var(--smooth) .3s backwards; }
}

/* The dot-matrix is the house mark — a 12-cell echo of the declared matrix. */
/* Fingerprints in the chrome: selection, focus, and the flip book's rail. */
::selection { background: var(--lime); color: var(--navy-deep); }
:focus-visible { outline: 2.5px solid var(--navy-deep, #08243B); outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255,255,255,.85); }
.fb__scroll { scrollbar-color: var(--lime-dark) transparent; scrollbar-width: thin; }
.fb__scroll::-webkit-scrollbar { height: 8px; }
.fb__scroll::-webkit-scrollbar-track { background: transparent; }
.fb__scroll::-webkit-scrollbar-thumb { background: var(--lime-dark); border-radius: 4px; }

/* The pinned week varies its blocking: the scoreboard takes the stage in
   beat 2; beat 4's page sits in the hand. (r170: the slight turn read as a
   rendering bug to two reviewers — the cards sit straight now.) */
@media (min-width: 760px) {
  html.scrub .wkx__beat--2 { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
  html.scrub .wkx__beat--4 .wk-doc { box-shadow: 0 18px 40px rgba(13,46,74,.16); }
}

/* ============ r117 (round-9 fixes) ============ */
/* The hero receipt leads with its lead read. */
.hero-proclaim b.num { box-shadow: none; }
.hero-proclaim b.num:first-of-type { box-shadow: inset 0 -0.3em var(--lime);
  font-size: 1.32em; }
/* The freshness ledger: one strip, channel by channel. */
.fresh { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: baseline;
  justify-content: center; margin: 0 0 1.4rem; }
.fresh__k { flex-basis: 100%; text-align: center; font-family: var(--label);
  text-transform: uppercase; letter-spacing: .13em; font-size: .64rem; font-weight: 800;
  color: var(--ink-3); }
.fresh__i { font-family: var(--mono); font-size: .72rem; letter-spacing: .02em;
  color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px;
  padding: .3rem .75rem; background: var(--white); }
.fresh__i b { font-family: var(--label); text-transform: uppercase; letter-spacing: .09em;
  font-size: .62rem; color: var(--navy-deep); margin-right: .3rem; }
/* The seats read as a slim index, not a second router. */
@media (min-width: 641px) {
  .seats__grid { display: grid; grid-template-columns: 1fr; gap: 0;
    border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
    background: var(--white); box-shadow: var(--shadow); }
  .seats__grid details.mdet--seat { display: grid !important;
    grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .4rem 1.4rem;
    align-items: baseline; margin: 0 !important; padding: .8rem 1.1rem !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; }
  .seats__grid details.mdet--seat + details.mdet--seat { border-top: 1px solid var(--rule) !important; }
  .seats__grid details.mdet--seat p { margin: 0; }
  .seats__grid details.mdet--seat > a { white-space: nowrap; }
}
/* The labeled fine-print drawer keeps its label on desktop. */
details.mdet--keep > summary { display: block; pointer-events: none; font-weight: 700; }
/* The flagship board excerpt in the platform hero. */
.press-card__art--hero { margin: 0; background: var(--white); box-shadow: var(--shadow); }
/* The pinned week loses its top gulf. */
@media (min-width: 760px) {
  html.scrub .wkx__pin { top: calc(var(--nav-h, 64px) + 6px); }
  html.scrub .wkx__hint { margin: 0 0 .55rem; }
  html.scrub .wkx__beats { height: min(66vh, 620px); }
}
/* The release index on the newsroom. */
.relindex { list-style: none; margin: 0 auto 2.6rem; padding: .9rem 1.1rem;
  max-width: 860px; display: grid; gap: .45rem; border: 1px solid var(--rule);
  border-radius: var(--r); background: var(--white); }
.relindex .num { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  color: var(--ink-3); margin-right: .3rem; }

/* ============ r118 ============ */
/* Mid-page display heads step down one size where a page carries many. */
.section--quiet-h2 h2 { font-size: clamp(1.55rem, 2.6vw, 2.15rem); }
/* The polling loop's return relights step 01. */
.lp__relight { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em;
  margin-right: .55em; border-radius: 50%; background: var(--lime); color: var(--navy-deep);
  font-weight: 800; font-size: .85em; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) {
  .lp__relight { animation: relight 3.2s ease-in-out infinite; }
}
@keyframes relight { 0%, 100% { box-shadow: 0 0 0 0 rgba(168,209,78,.55); }
  50% { box-shadow: 0 0 0 9px rgba(168,209,78,0); } }

/* ============ r119 (round-11 fixes) ============ */
/* Cascade fix: the page sheets load after this one, so the lead read insists. */
.hero-proclaim b.num { box-shadow: none !important; }
.hero-proclaim > b.num:first-of-type { box-shadow: inset 0 -0.3em var(--lime) !important;
  font-size: 1.32em; }
/* Micro-receipts fill the linear channel cards. */
.lanefam__rcpt { margin: .6rem 0 0; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .04em; color: var(--ink-3); border-top: 1px dashed var(--rule);
  padding-top: .5rem; }
/* The ink key, legible: swatches, not 9px caps. */
.inkkey { position: absolute; left: clamp(12px, 3vw, 40px); bottom: 10px;
  display: flex; align-items: center; gap: .45rem; font-family: var(--label);
  text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; font-weight: 700;
  color: var(--ink-3); }
.inkkey i { width: 22px; height: 10px; border-radius: 2px; }
.inkkey__s { background: var(--navy); }
.inkkey__h { background: repeating-linear-gradient(45deg, #5B7C96 0 3px, transparent 3px 6px);
  border: 1px solid #5B7C96; }
.inkkey__d { border: 1.5px dashed #5B7085; background: transparent; }
@media (max-width: 700px) { .inkkey { display: none; } }
/* The freshness chips sit 2x2, each self-contained. */
@media (min-width: 700px) {
  .fresh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
    max-width: 880px; margin-inline: auto; }
  .fresh__k { grid-column: 1 / -1; }
  .fresh__i { text-align: center; }
}
/* The pinned week's artifacts own the frame (wide desks only — narrow
   viewports keep 1:1 so nothing spills). */
@media (min-width: 1050px) {
  html.scrub .wkx__beat .wk__art { transform: scale(1.09); transform-origin: top left; }
  @media (min-width: 1240px) { html.scrub .wkx__beat .wk__art { transform: scale(1.05); transform-origin: top right; } }
  html.scrub .wkx__beat--2 .wk__art { transform: none; }
}
/* Polling's ending band tightens; the relight is the finale. */
#offerings { padding-bottom: clamp(28px, 4vw, 44px); }
.lp__loop--end { margin: 1.6rem 0 0; font-size: 1rem; }
.lp__relight { width: 2.3em; height: 2.3em; }
/* Press: the pull quotes read inline, not as folds. */
.nr-release .quote p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.nr-release .quote { margin: 1.4rem 0; }
/* The mobile banner holds one tight line. */
@media (max-width: 400px) {
  .hero-banner__txt { font-size: .8rem !important; }
}

/* ============ r121: the maverick bets ============ */
/* The scoreboard assembles as the door opens. */
@media (prefers-reduced-motion: no-preference) {
  .hero-board .hb-top { animation: rise .45s var(--smooth) .35s backwards; }
  .hero-board .hb-row { animation: rise .5s var(--smooth) backwards; }
  .hero-board .hb-row:nth-of-type(2) { animation-delay: .55s; }
  .hero-board .hb-row:nth-of-type(3) { animation-delay: .75s; }
  .hero-board .hb-foot { animation: rise .45s var(--smooth) .95s backwards; }
}
/* Polling's ending: the loop closes on screen. */
.lp-close { margin: 2rem auto 0; max-width: 760px; }
.lp-close__row { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(6, 1fr); gap: .45rem; }
.lp-close__row li { border: 1px solid var(--rule); border-radius: 8px;
  padding: .5rem .35rem .45rem; text-align: center; font-family: var(--label);
  text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; font-weight: 800;
  color: var(--ink-3); background: var(--white); }
.lp-close__row li b { display: block; font-family: var(--mono); font-size: .82rem;
  color: var(--ink-2); margin-bottom: .15rem; }
.lp-close__row li.is-lit { background: var(--lime); border-color: var(--lime-dark);
  color: var(--navy-deep); }
.lp-close__row li.is-lit b { color: var(--navy-deep); }
@media (prefers-reduced-motion: no-preference) {
  .lp-close__row li.is-lit { animation: relight 3.2s ease-in-out infinite; }
}
.lp-close__cap { margin: .7rem 0 0; text-align: center; font-family: var(--mono);
  font-size: .78rem; letter-spacing: .03em; color: var(--ink-2); }
@media (max-width: 640px) {
  .lp-close__row { grid-template-columns: repeat(3, 1fr); }
}

/* ============ r124 ============ */
/* The channel cards go visual: color-coded spines, a receipt on the face,
   the methodology folds open on hover or focus (always open on touch). */
.lanefam--bc { border-left: 4px solid var(--navy) !important; }
.lanefam--cb { border-left: 4px solid #00ACC1 !important; }
.lanefam--rd { border-left: 4px solid #5B7C96 !important; }
.lanefam--st { border-left: 4px dashed var(--lime-dark) !important; }
@media (min-width: 700px) { #lanes .lanefam--st { grid-column: 1 / -1; } }
.lanefam__hint { margin-left: auto; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .05em; color: var(--ink-3); white-space: nowrap;
  transition: opacity .25s ease; }
.lanefam__more { display: grid; grid-template-rows: 0fr; }
.lanefam__more > div { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lanefam__more { transition: grid-template-rows .34s var(--smooth); }
}
.lanefam:hover .lanefam__more, .lanefam:focus-within .lanefam__more,
.lanefam:focus .lanefam__more { grid-template-rows: 1fr; }
.lanefam:hover .lanefam__hint, .lanefam:focus .lanefam__hint { opacity: 0; }
@media (hover: none), (max-width: 880px) {
  .lanefam__more { grid-template-rows: 1fr; }
  .lanefam__hint { display: none; }
}
/* The seller boards ride inside the seller story. */
.wk-boards { margin-top: 2.2rem; padding-top: .4rem; }
/* The flip book, all in: three across, no horizontal scroll. */
@media (max-width: 980px) and (min-width: 641px) {
  .fb__scroll { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* r124b: the new card anatomy is a stack — the old two-column body grid
   yields; the streaming methodology reads two-up only once open, on wide desks. */
#lanes .lanefam__body { display: block !important; }
@media (min-width: 980px) {
  .lanefam--st .lanefam__more > div { display: grid;
    grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
}

/* ===== r125 — the real receipt stands alone ===== */
/* The Des Moines-Ames receipt is the rate section's only exhibit now: white
   card staging, aligned to the split's text column top. */
#fcc-rates .press-card__art--hero { margin-top: 1.4rem; }
@media (min-width: 900px) { #fcc-rates .press-card__art--hero { margin-top: 3.2rem; } }

/* ===== r126 — the panel's convergence round ===== */
/* 1) The monitoring hero's two lanes get their chrome (six evaluators flagged
   the orphan labels): mono kicker over a hairline, side-by-side cards >=880px.
   The page sheet defines no .mhero layout, so no !important needed here. */
.mhero { display: grid; gap: .9rem; max-width: 920px; margin: 2rem auto 0; text-align: left; }
@media (min-width: 880px) { .mhero { grid-template-columns: 1fr 1.12fr; gap: 1.2rem; } }
.mhero__lane { min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1.05rem 1.2rem 1.1rem; }
.mhero__k { align-self: stretch; }
.mhero__lane--dark { background: var(--navy-deep); border-color: transparent; }
.mhero__lane--dark .mhero__p { color: #C9D9E6; }
.mhero__lane--dark .mhero__p b { color: #fff; }
.mhero__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .12em;
  font-size: .92rem; font-weight: 800; color: var(--navy-deep); margin: 0 0 .6rem;
  padding-bottom: .45rem; border-bottom: 1px solid var(--rule); }
.mhero__lane--dark .mhero__k { color: #9FBFD6; border-bottom-color: rgba(159,191,214,.35); }
.mhero__p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.mhero__p b { color: var(--navy-deep); }
.mhero__bar { display: block; width: 100%; height: auto; max-width: 300px; margin: .8rem 0 0; }
.mhero__go { display: inline-block; margin-top: auto; padding-top: .8rem; font-weight: 700; font-size: .88rem; }
.mhero__lane--dark .mhero__go { color: var(--lime); }
/* 2) The stamp: mono kickers print AFTER their artifact posts. One physics —
   everything arrives the way an alert lands (post, settle, stamp). */
.in-view[data-rise] .eyebrow, .in-view[data-rise] .card__k,
.in-view[data-rise] .pca__bar, .in-view[data-rise] .wk-doc__bar {
  animation: stamp-in .22s ease-out .34s backwards; }
@keyframes stamp-in { from { opacity: .01; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .in-view[data-rise] .eyebrow, .in-view[data-rise] .card__k,
  .in-view[data-rise] .pca__bar, .in-view[data-rise] .wk-doc__bar { animation: none; } }
/* 3) The latency ladder: one hairline from minutes to a week behind, the four
   lanes ticked in staleness order (replaces the 2x2 pills). */
.lad { max-width: 880px; margin: 0 auto 1.6rem; }
.lad__k { display: block; text-align: center; font-family: var(--label);
  text-transform: uppercase; letter-spacing: .13em; font-size: .64rem; font-weight: 800;
  color: var(--ink-3); margin-bottom: 1rem; }
.lad__ruler { position: relative; height: 118px; }
.lad__line { position: absolute; left: 0; right: 0; top: 50%; height: 0;
  border-top: 1px solid var(--rule); }
.lad__line::after { content: "a week \2192"; position: absolute; right: 0; top: .35rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--ink-3); }
.lad__tick { position: absolute; left: var(--x); top: 50%; width: 13rem; max-width: 24vw;
  transform: translateX(-6px); }
.lad__tick::before { content: ""; position: absolute; left: 0; top: -7px; width: 0;
  height: 14px; border-left: 2px solid var(--navy-deep); }
.lad__tick b { display: block; font-family: var(--label); text-transform: uppercase;
  letter-spacing: .09em; font-size: .62rem; color: var(--navy-deep); margin: 14px 0 .1rem; }
.lad__tick i { display: block; font-style: normal; font-family: var(--mono);
  font-size: .68rem; line-height: 1.45; color: var(--ink-2); }
.lad__tick:nth-child(odd) b { margin-top: 14px; }
.lad__tick--up { transform: translate(-6px, -100%); padding-bottom: 14px; }
.lad__tick--up::before { top: auto; bottom: -7px; }
.lad__tick--up b { margin: 0 0 .1rem; }
.lad__tick--st::before { border-left-style: dashed; border-left-color: var(--ink-3); }
@media (max-width: 700px) {
  .lad__ruler { height: auto; }
  .lad__line { display: none; }
  .lad__tick, .lad__tick--up { position: static; transform: none; width: auto; max-width: none;
    padding: 0 0 0 .8rem; border-left: 2px solid var(--navy-deep); margin-bottom: .6rem; }
  .lad__tick::before, .lad__tick--up::before { display: none; }
  .lad__tick b, .lad__tick--up b { margin: 0 0 .1rem; }
  .lad__tick--st { border-left-style: dashed; border-left-color: var(--ink-3); }
}
/* 4) The two real specimens claim the full card: the broadcast receipt spans
   both columns of the alert grid instead of squeezing into one. */
@media (min-width: 1000px) {
  .ac__body > .ac__bcast, .ac__body > .press-card__art { grid-column: 1 / -1; }
}
.pca__row--lead { font-size: .8rem; font-weight: 700; color: var(--navy-deep); letter-spacing: .04em; }
/* 5) The index press band folds to a citation strip; the newsroom keeps the story. */
.pressline { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white);
  box-shadow: var(--shadow); overflow: hidden; max-width: 980px; margin-inline: auto;
  text-align: left; }
.pressline__row { display: grid; grid-template-columns: 11.5rem minmax(0,1fr) auto; gap: 1rem;
  align-items: baseline; padding: .95rem 1.2rem; text-decoration: none; color: inherit; }
.pressline__row + .pressline__row { border-top: 1px solid var(--rule-soft); }
.pressline__who { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--ink-3); }
.pressline__what { font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.pressline__what b { color: var(--navy-deep); }
.pressline__go { font-weight: 800; color: var(--navy-deep); }
.pressline__row:hover .pressline__what b { text-decoration: underline; }
@media (max-width: 700px) { .pressline__row { grid-template-columns: 1fr auto; }
  .pressline__who { grid-column: 1 / -1; } }
/* 6) The collage walk gets its drawn route (>=1100 only, where the wall is
   absolute); the unnumbered asides step back half a stop. */
.kw__route { display: none; }
@media (min-width: 1100px) {
  .kw__route { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .kw__c--mix, .kw__c--stream, .kw__c--share, .kw__c--deal, .kw__c--op { opacity: .93; filter: saturate(.82); }
}
/* 7) Touch gets touch copy: the arrow-keys hint is desktop-only, and board
   tabs grid up instead of wrapping into a cloud. */
@media (max-width: 880px) {
  .kbd-hint { display: none; }
  .tap-only { display: inline; }
  .pb--live .pb__rail { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  /* r181: the full-width last tab was written for platform's 5-tab rail;
     week's 4-tab rail prints a clean 2x2 without it (M2, platform-seller) */
  .pb--live .pb__rail--5 .pb__tab:last-child,
  .pb--live .pb__rail--6 .pb__tab:last-child { grid-column: 1 / -1; }
}

/* ===== r127 — the teardown answered ===== */
/* Phones cut cards 2/3/5 off the morning wall; the ordinals (and the numbered
   readline) are desktop grammar, so below the absolute layout they go quiet. */
@media (max-width: 1099px) { .kw__readline { display: none; } }
@media (max-width: 640px) {
  .kw__c::before { display: none !important; }
  .kw__c--alert::before { content: "1"; display: grid !important; }
  .kw__c--score::before { content: "2"; display: grid !important; }
  .kw__c--baker::before { content: "3"; display: grid !important; }
}
/* The LINEAR lane carries a proof row like its dark neighbor. */
.mhero__rcpt { align-self: stretch; margin: .8rem 0 0; padding-top: .6rem;
  border-top: 1px dashed var(--rule); font-family: var(--mono); font-size: .7rem;
  letter-spacing: .04em; color: var(--ink-2); }
/* Air-war market tiles rank by ink, not by reading. */
.aw__mkt-bar { display: block; height: 3px; margin-top: .35rem; background: var(--rule);
  border-radius: 2px; overflow: hidden; }
.aw__mkt-bar b { display: block; height: 100%; width: var(--w, 100%);
  background: var(--navy-deep); }

/* One party-ink law: D navy, R slate — the same two inks the index wall uses. */
.wk-score__track--d span { background: var(--navy-deep) !important; }
.wk-score__track--r span { background: #97ABBC !important; }
/* The book caption prints outside the scroll region on phones. */
.rcbk-more-p { display: none; }
@media (max-width: 700px) {
  .rcbk-more-p { display: block; margin: .6rem 0 0; }
  tr.rcbk-more { display: none; }
}

/* The rights-cleared REAL artifacts wear their own shell: a lime top rule and
   warmer paper — synthetic exhibits stay flat white (maverick ruling, r128). */
.press-card__art--real { border-top: 3px solid var(--lime-dark); background: #FDFDF7; }
.press-card__art--real .pca__bar span:last-child { color: #3E6A16; font-weight: 800; }

/* ===== r128 — the latency draw + exit-band receipts ===== */
/* Every timestamp pair draws: a thin rail fills capture -> inbox when the
   receipt posts. The site's one truth, moving. */
.latbar { display: flex; align-items: center; gap: .55rem; margin: .5rem 0 0; }
.latbar i { flex: 1; height: 2px; background: var(--rule); position: relative; overflow: hidden; }
.latbar i::after { content: ""; position: absolute; inset: 0; background: var(--lime-dark);
  transform-origin: left center; }
.latbar--fast i::after { background: var(--navy-deep); }
.acs.in-view .latbar i::after, .in-view[data-rise] .latbar i::after {
  animation: grow-x .9s var(--smooth) .7s backwards; }
.latbar b { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  font-weight: 600; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 640px) { .latbar b { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .latbar i::after { animation: none !important; } }
/* The exit band carries the next page's receipt, not an empty right half. */
.nextcard__stat { margin-left: auto; margin-right: 1.2rem; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 700px) { .nextcard__stat { margin: .3rem 0 0; white-space: normal; } }
/* The six numbered collage cards ride above the asides so no chip is occluded. */
@media (min-width: 1100px) {
  .kw__c--alert { z-index: 13; } .kw__c--player { z-index: 12; } .kw__c--pod { z-index: 12; }
  .kw__c--score { z-index: 15; } .kw__c--rate { z-index: 11; } .kw__c--baker { z-index: 14; }
}
/* The last ladder tick grows leftward from its mark so nothing leaves the rail. */
@media (min-width: 701px) {
  .lad__tick--st { transform: translateX(calc(-100% + 8px)); text-align: right; }
  .lad__tick--st::before { left: auto; right: 0; }
}

/* The phone's matrix carries its axis line; desktop keeps it on the figure. */
.mxs__mobcap { display: none; }
@media (max-width: 760px) { .mxs__mobcap { display: block; margin: .4rem 0 0; color: var(--ink-3); } }

/* ===== r134 — the spine, the units, the readers' wall ===== */
/* The signature: the brand hairline draws the page position, every page. */
#page-spine { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90;
  background: linear-gradient(90deg, var(--navy-deep), #00ACC1, var(--lime));
  transform: scaleX(0); transform-origin: left center; pointer-events: none; }
/* The ladder's rail carries magnitude at both ends (maverick-2, third ask). */
.lad__line::before { content: "minutes"; position: absolute; left: 0; top: .35rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--ink-3); }
/* Screen readers get the walls the readline promises (a11y, second ask). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); margin: 0; padding: 0; }

/* ============ r135: the monitoring clock ============ */
/* The owner: "the timeline … should be the unifying element … scroll jack
   it — that takes you through monitoring." A pinned stage after the hero:
   the time-true rail from minutes to a week; the marker walks it with the
   scroll and the four stops compose in staleness order and STAY — stages
   compose at lock, accumulate, never recede mid-hold. Stop one stands
   composed at lock. JS-off / reduced motion / mobile: no pin, everything
   prints complete. */
.mtl .wrap { max-width: 1060px; }
.mtl__sub { margin-inline: auto; }
.mtl__hint { display: none; }
.mtl__rail { position: relative; height: 46px; margin: 2.4rem 0 1.7rem; }
.mtl__line { position: absolute; left: 0; right: 0; top: 21px; height: 3px;
  background: var(--rule); border-radius: 2px; }
.mtl__dot { position: absolute; left: var(--x); top: 16px; width: 13px;
  height: 13px; border-radius: 50%; background: var(--lime);
  border: 3px solid var(--navy-deep); transform: translateX(-50%); }
.mtl__dot--st { border-color: #0B5560; }
.mtl__marker { display: none; position: absolute; top: 11px; left: 2%;
  width: 23px; height: 23px; border-radius: 50%; transform: translateX(-50%);
  background: var(--navy-deep); border: 3px solid var(--paper);
  box-shadow: 0 2px 10px rgba(13, 46, 74, .35); }
.mtl__end { position: absolute; top: -10px; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); }
.mtl__end--l { left: 0; }
.mtl__end--r { right: 0; }
.mtl__stops { list-style: none; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3rem 1.4rem;
  margin: 0; padding: 0; }
.mtl__stop { border-top: 2.5px solid var(--lime); padding-top: .75rem; }
.mtl__when { font-family: var(--label); text-transform: uppercase;
  letter-spacing: .13em; font-size: .64rem; font-weight: 800;
  color: var(--ink-3); margin: 0 0 .35rem; }
.mtl__name { font-size: 1.08rem; margin: 0 0 .4rem; }
.mtl__p { font-size: .92rem; line-height: 1.5; color: var(--ink-2);
  margin: 0 0 .55rem; }
.mtl__rcpt { font-family: var(--mono); font-size: .66rem; letter-spacing: .03em;
  line-height: 1.5; color: var(--navy-deep); border-left: 3px solid var(--lime);
  padding-left: .55rem; margin: 0 0 .55rem;
  font-variant-numeric: tabular-nums lining-nums; }
.mtl__go { font-weight: 700; font-size: .86rem; }
@media (max-width: 899px) { .mtl__stops { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .mtl__stops { grid-template-columns: 1fr; } }

@media (min-width: 760px) {
  html.scrub .mtl__scroller { height: 300vh; }
  html.scrub .mtl__pin { position: sticky; top: calc(var(--nav-h, 64px) + 10px);
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--nav-h, 64px) - 30px); }
  html.scrub .mtl__hint { display: block; text-align: center;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-3); margin: .7rem 0 0; }
  /* The marker walks the rail: 2% (alerts) at lock, past 84% (streaming)
     by 0.86 so the last stop composes before the hold, parking at the
     "a week" end as the stage releases. */
  html.scrub .mtl__marker { display: block;
    left: calc(2% + var(--scrub, 0) * 95%); }
  /* Dots fill as the marker crosses them; the first is lit at lock. */
  html.scrub .mtl__dot { animation: mtl-dot 1s linear paused both; }
  html.scrub .mtl__dot--1 { animation: none; }
  html.scrub .mtl__dot--2 { animation-delay: calc((0.23 - var(--scrub, 0)) / 0.05 * 1s); }
  html.scrub .mtl__dot--3 { animation-delay: calc((0.50 - var(--scrub, 0)) / 0.05 * 1s); }
  html.scrub .mtl__dot--4 { animation-delay: calc((0.83 - var(--scrub, 0)) / 0.05 * 1s); }
  /* Stops compose as their dot lights and stay; the hold from 0.90 shows
     the finished clock — the same frame the no-JS page prints. */
  html.scrub .mtl__stop { animation: mtl-in 1s linear paused both; }
  html.scrub .mtl__stop--1 { animation: none; }
  html.scrub .mtl__stop--2 { animation-delay: calc((0.20 - var(--scrub, 0)) / 0.10 * 1s); }
  html.scrub .mtl__stop--3 { animation-delay: calc((0.47 - var(--scrub, 0)) / 0.10 * 1s); }
  html.scrub .mtl__stop--4 { animation-delay: calc((0.80 - var(--scrub, 0)) / 0.10 * 1s); }
}
@keyframes mtl-dot {
  0% { background: var(--paper); }
  100% { background: var(--lime); }
}
@keyframes mtl-in {
  0% { opacity: 0; visibility: hidden; transform: translateY(18px); border-top-color: var(--rule); }
  8% { visibility: visible; }
  100% { opacity: 1; visibility: visible; transform: none; border-top-color: var(--lime); }
}

/* ===== r150: the race box (the bounced prospect's ten — the site's best
   promise becomes its primary input) + contact rows ===== */
.racebox { display: flex; gap: .55rem; max-width: 620px; margin: 2.1rem auto 0; }
.racebox input { flex: 1 1 auto; min-width: 0; padding: .8rem 1rem; border: 1.5px solid var(--rule);
  border-radius: 0; background: var(--white); font: inherit; font-size: .98rem; color: var(--navy-ink); }
.racebox input::placeholder { color: var(--ink-3); }
.racebox input:focus-visible { outline: 2px solid var(--lime-text); outline-offset: 1px; border-color: var(--lime-dark); }
.racebox .btn { flex: 0 0 auto; white-space: nowrap; }
.racebox--band { margin: 0; max-width: 460px; display: inline-flex; vertical-align: middle; }
@media (max-width: 640px) {
  .racebox { flex-direction: column; }
  .racebox .btn, .racebox--band { width: 100%; }
}
.field-hint--rows p, .form-note--rows p { margin: .22rem 0; }
.field-hint--rows b, .form-note--rows b { font-family: var(--mono); font-size: .6rem;
  font-weight: 800; letter-spacing: .07em; color: var(--ink-3); }

/* ===== r149: the de-generic purge (owner: "generic badges and designs
   started to creep back in" — 5-evaluator audit) ===== */
/* square hairline stamp — the house label form (replaces rounded info chips) */
.stampl { font-family: var(--mono); font-size: .64rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid var(--rule); padding: .18rem .45rem;
  color: var(--ink-3); white-space: nowrap; align-self: center; }
/* the two delivery lanes as true ruled receipt rows */
.lat2 { grid-column: 1 / -1; margin-top: .55rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--ink-2); }
.lat2__row { display: flex; justify-content: space-between; gap: 1rem; margin: 0;
  padding: .32rem 0; border-bottom: 1px dotted #A9BBC9; }
.lat2__row span:last-child { color: var(--navy-ink); font-weight: 700; text-align: right; }
/* week close index lines (the chip rows died) */
.wk-index { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  color: var(--ink-3); margin: 1.05rem 0 0; line-height: 2; }
.wk-index a { color: var(--navy); text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; }
.wk-index a:hover { text-decoration-style: solid; }
/* zero prints as absence, not an unfilled progress bar */
.kw__tr--zero { background: transparent !important; border-bottom: 2px dotted #A9BBC9;
  border-radius: 0; height: 5px; }
/* the drawn boundary + figure margins */
.lanefam__fig { display: block; width: 100%; height: auto; margin: .5rem 0 .2rem; }
.seats__bar--file { margin: .55rem 0 .45rem; }
/* the rounded-pill DNA purge: house stamps are square-cornered */
.ac__pill, .ac__aitag { border-radius: 2px; }
.wk__tab { border-radius: 3px; }
.kw__tr, .kw__tr span, .wk-score__track, .wk-score__track span { border-radius: 0; }

/* ===== r149: the section rail — the marker walks the line (de-generic audit:
   the r148 tab bar read as the stock docs-site anchor bar; the rail is the
   clock's own move — a dot riding a rule, the traveled stretch inked lime).
   Numbered stops, the page stamp leads; phones get one advancing stamp that
   opens the numbered list. No-JS phones keep the scrolling row. ===== */
.ptabs { position: sticky; top: var(--nav-h); z-index: 55; background: var(--paper); }
.ptabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--lime-dark) var(--pt-p, 0%), var(--rule) var(--pt-p, 0%)); }
.ptabs__dot { position: absolute; bottom: -3px; left: var(--pt-p, 0%); width: 8px; height: 8px;
  border-radius: 50%; background: var(--navy-ink); transform: translateX(-50%); z-index: 1;
  transition: left .35s var(--smooth, ease-out); }
.ptabs__in { display: flex; align-items: baseline; gap: 1.5rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ptabs__in::-webkit-scrollbar { display: none; }
.ptabs__k { flex: 0 0 auto; padding: .6rem 0 .5rem; font-family: var(--mono);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-ink); }
.ptabs a { flex: 0 0 auto; padding: .6rem 0 .5rem; font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; }
.ptabs a i { font-style: normal; font-weight: 800; color: var(--ink-3); margin-right: .35em; }
.ptabs a:hover, .ptabs a:focus-visible, .ptabs a.is-on { color: var(--navy-ink); }
.ptabs a.is-on i { color: var(--lime-text); }
.ptabs__stamp { display: none; }
@media (max-width: 640px) {
  .ptabs__in { gap: 1.05rem; }
  .ptabs--js .ptabs__in { display: none; }
  .ptabs--js[data-open] .ptabs__in { display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .25rem 1.1rem .6rem; box-shadow: 0 12px 26px rgba(8,36,59,.14); }
  .ptabs--js[data-open] .ptabs__in a { display: block; padding: .5rem 0; }
  .ptabs--js[data-open] .ptabs__k { display: none; }
  .ptabs--js .ptabs__stamp { display: flex; width: 100%; justify-content: space-between;
    align-items: center; gap: 1rem; padding: .6rem 1.1rem .55rem; background: none; border: 0;
    font-family: var(--mono); font-size: .7rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--navy-ink); cursor: pointer; text-align: left; }
  .ptabs--js .ptabs__stamp::after { content: "JUMP \2193"; color: var(--ink-3);
    font-weight: 700; font-size: .62rem; letter-spacing: .1em; flex: 0 0 auto; }
  .ptabs__dot { display: none; }
}
/* anchor jumps land clear of the two sticky bars */
[id] { scroll-margin-top: calc(var(--nav-h) + 48px); }

/* ===== r147: round-25 convergence ===== */
/* The Columbus forward book, drawn (buyer + design-director) */
.aw__fwdfig { display: block; width: 100%; max-width: 380px; height: auto; margin: .3rem 0 .7rem; }
/* The agency gap, drawn (the station-seller's ten) */
.wk-doc__fig { display: block; width: 100%; height: auto; margin: .2rem 0 .45rem; }
/* The CPP row prints as a priced line, not a $0 bar (judge-visual + adam-sim) */
.wk-score__lead { align-self: center; border-bottom: 1px dotted #A9BBC9; height: 1px; }
/* The copy-credit button breaks out of the paragraph on small screens */
@media (max-width: 520px) {
  #copy-credit { display: block; margin: .55rem 0 0 !important; }
}

/* ===== r146: the RATE v MARKET index, drawn (round-24: the buyer's and
   maverick-2's tens) — six per-station bars against the 1.0x market hairline,
   inside the Des Moines FCC specimen. ===== */
.pca__fig { display: block; width: 100%; height: auto; margin: .55rem 0 .25rem; }

/* ============ r137: the lineage (the owner, Sep 1) ============ */
/* "We are the team that invented ad tracking with CMAG in 1996 … sold it
   to TNS … the space cowboy vibe is a cool thing." One drawn line under
   the owner's Built-today section: 1996 CMAG -> sold -> 2026 KPI. Phones
   get the same story as three stacked mono lines. */
.lineage { max-width: 660px; margin: 1.5rem auto 0; }
.lineage svg { display: block; width: 100%; height: auto; }
.lineage__mobile { display: none; }
@media (max-width: 559px) {
  .lineage svg { display: none; }
  .lineage__mobile { display: block; font-family: var(--mono); font-size: .68rem;
    letter-spacing: .05em; line-height: 1.9; color: var(--ink-2); text-align: center;
    font-variant-numeric: tabular-nums lining-nums; margin: 0; }
}

/* ============ r140 (round 22) ============ */
/* The clock is a labeled instrument from the moment it locks: the stop
   names print under their dots (scrub only — mobile's stacked stops carry
   their own kickers). */
.mtl__dotlab { display: none; }
@media (min-width: 760px) {
  html.scrub .mtl__dotlab { display: block; position: absolute; top: 34px;
    left: var(--x); transform: translateX(-50%); font-family: var(--mono);
    font-size: .6rem; letter-spacing: .08em; font-weight: 700;
    color: var(--ink-3); white-space: nowrap; }
  html.scrub .mtl__dotlab--1 { transform: none; }
  /* The pinned week keeps a real gutter between claim and card. */
  html.scrub .wkx__beat { column-gap: 3rem; }
}
/* The $12K save as a rate — one glance (cold-cfo). */
.seats__bar { display: block; width: 100%; max-width: 300px; height: auto;
  margin: .3rem 0 .55rem; }
/* The hero's linear card fills like its dark sibling. */
.mhero__lane { display: flex; flex-direction: column; }
.mhero__lane .mhero__go { margin-top: auto; }
/* The lineage draws itself on arrival (the owner-judge's ten): the line
   runs 1996 -> 2026 and the lime dot lands last. JS-off and reduced
   motion print the finished strip. */
.lineage.in-view svg line { stroke-dasharray: 612 612; stroke-dashoffset: 612;
  animation: lin-draw 1.1s .2s var(--smooth) forwards; }
.lineage.in-view svg circle:last-of-type { opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: lin-pop .4s 1.15s var(--smooth) forwards; }
@keyframes lin-draw { to { stroke-dashoffset: 0; } }
@keyframes lin-pop { from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lineage.in-view svg line { animation: none; stroke-dashoffset: 0; }
  .lineage.in-view svg circle:last-of-type { animation: none; opacity: 1; }
}

/* ============ r143: the clock's specimen cards ============ */
/* Each stop shows the thing itself (the owner: "images should be
   underneath — show me an alert"). Tiny pca chrome, tuned to fit the
   pinned stage at four columns. */
.mtl__spec { margin: .1rem 0 .6rem; padding: .45rem .55rem .5rem; }
.mtl__spec .pca__bar { font-size: .56rem; margin-bottom: .3rem; }
.mtl__spec .pca__row { font-size: .6rem; letter-spacing: .02em; margin: .22rem 0 0;
  line-height: 1.45; }
/* In the streaming section's grid the grain card flows as a block. */
#streaming .lanefam--key .lanefam__body { display: block; }
#streaming .grainfig { display: block; width: 100%; max-width: 560px; margin: .2rem 0 .6rem; }
/* r145: the measurement fold ships CLOSED and must toggle — unlike the
   always-open labeled drawers whose summaries are inert by design. */
details.mdet--fold > summary { display: block; font-weight: 700; }

/* r156: the clock stops carry their artifacts (owner directive) */
.mtl__fig { display: block; width: 100%; height: auto; margin: .55rem 0 .1rem; }
.mtl__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden;
  background: var(--navy-ink); margin: .55rem 0 .1rem; }
.mtl__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtl__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mtl__tc { position: absolute; right: 6px; bottom: 5px; color: #fff; font-size: .6rem;
  font-weight: 700; letter-spacing: .05em; background: rgba(8,36,59,.55); padding: .1rem .3rem; border-radius: 2px; }

/* r157: the team's awards receipt (owner: team-attributed, never the entity) */
.built__awards { font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; color: var(--ink-2);
  margin: .85rem auto 0; max-width: 620px; padding-top: .55rem; border-top: 1px dotted #A9BBC9; }
.built__awards b { color: var(--navy-deep); font-weight: 800; }

/* r158 tablet fixes (round 30, first tablet walks) */
@media (max-width: 880px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .kw__c--player { width: 100%; max-width: 520px; justify-self: center; margin-inline: auto; }
}

/* r158 nav floor: the walkthrough button fits the 320px QA floor */
@media (max-width: 374px) {
  .nav .btn { font-size: .6rem; padding: .5rem .55rem; letter-spacing: .04em; }
}

/* r159 chapter seams (outside reader): white-on-white sections were bleeding —
   every base seam now prints, and the kicker steps up half a size. */
.section:not(.section--mega) + .section:not(.section--mega) { border-top: 1px solid var(--rule-soft); }
.eyebrow { font-weight: 700; }

/* r160: long doc stamps wrap at tablet instead of pushing the bar wide */
@media (max-width: 880px) {
  .wk-doc__stamp { white-space: normal; max-width: 58%; text-align: right; }
}

/* r162 (owner, Sep 3): the lineage carries the claim — type down a notch,
   ticks labeled, receipts under the line. */
.built__big { font-size: clamp(1.45rem, 2.7vw, 2.05rem); line-height: 1.22; text-wrap: balance; max-width: 34ch; }
@media (min-width: 560px) { .lineage svg { max-width: 760px; margin: 1.1rem auto 0; } }

/* r162: the clock stops share one vertical grid (owner: "clean up vertical
   justification" + "punch up looks junky"). Tops align on the lime rule, the
   intro holds a two-line band, each spec card stretches to the row and pins
   its artifact to its own floor, and the four go-links sit on one baseline. */
.mtl__stop { display: flex; flex-direction: column; }
.mtl__spec { flex: 1 0 auto; display: flex; flex-direction: column; }
.mtl__spec .mtl__fig { margin-top: auto; }
.mtl__spec .mtl__frame { margin-top: .55rem; }
.mtl__frame { aspect-ratio: 21 / 9; }
.mtl__go { margin-top: .65rem; align-self: flex-start; }
@media (min-width: 560px) { .mtl__p { min-height: 3em; } }

/* ============ r164 final polish (the launch-gate team) ============ */
/* The week page's 22-week strip sits on a white .wk-doc card — retheme the
   dark-card cells for light ground (scoped; the dark original is untouched). */
.wk-doc .tl__gw { background: var(--rule-soft); }
.wk-doc .tl__gw--aired { background: var(--lime); }
.wk-doc .tl__gw--fwd { background: repeating-linear-gradient(45deg, rgba(124,179,66,.55) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--lime-dark); }
.wk-doc .tl__gw--none { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.wk-doc .tl__gw--end { background: var(--white); box-shadow: 0 0 0 2px var(--lime); }
.wk-doc .tl__grid-months { color: var(--ink-3); }
.wk-doc .tl__grid-cap { color: var(--ink-3); }
/* Always-open honesty drawers show no toggle glyph — their summary is inert. */
details.mdet--keep > summary::before { content: "" !important; }

/* ============ r165 launch punch list (round 32) ============ */
/* The door cards share one floor: all four go-links on a baseline. */
.press-card { display: flex; flex-direction: column; }
.press-card .press-card__go { margin-top: auto; padding-top: .6rem; }
/* The hero receipt row on phones: no orphaned separators — items stack clean. */
@media (max-width: 640px) {
  .hero-receipt .hr-sep { display: none !important; }
  .hero-receipt > span { display: block !important; padding: .12rem 0; }
}

/* ============ r166 owner batch (launch eve) ============ */
/* THE FLAG: the team section gets its own dark band — drama earned by the
   drawn artifact (big 1996 -> 2026 numerals), not floating type. */
.section--flag { background: var(--navy-ink); border-top: 0 !important; }
.section--flag .eyebrow { color: var(--lime); }
.section--flag .built__big { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.7rem); max-width: 28ch; }
.section--flag .built__sub { color: #B9CBDA; }
.section--flag .built__sub b, .section--flag .built__sub .num { color: #fff; }
.section--flag .built__awards { color: #8FA9BE; border-top: 1px dotted rgba(255,255,255,.28); }
.section--flag .built__awards b { color: var(--lime); }
.section--flag .lineage svg { max-width: 920px; }
.section--flag .lineage__mobile { color: #B9CBDA; }
/* The week desk toggle stays in frame through the pinned scrub (owner), and
   the stage tightens under it. */
@media (min-width: 760px) {
  html.scrub .wk--live .wk__rail { position: sticky; top: calc(var(--nav-h, 64px) + 42px);
    z-index: 6; background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(6px); border-radius: 14px; padding: .3rem; }
  html.scrub .wkx__pin { top: calc(var(--nav-h, 64px) + 138px);
    min-height: calc(100vh - var(--nav-h, 64px) - 150px);
    justify-content: flex-start; padding-top: .4rem; }
  html.scrub .wkx__hint { margin: 0 0 .55rem; }
  html.scrub .wkx__beats { height: min(60vh, 580px); }
}

/* ============ r171: one control, two jobs (Doug x Andres) ============ */
/* The platform page had three menus saying the same five names. The section
   rail is gone; the deck's own tab row is the switcher AND the wayfinder,
   riding the scroll like the week desk toggle. */
.pb--pin .pb__railwrap { margin-top: -.4rem; }
@media (min-width: 1101px) {
  .pb--pin .pb__railwrap { position: sticky; top: calc(var(--nav-h, 64px) + 8px);
    z-index: 6; background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(6px); border-radius: 16px; padding: .4rem .4rem .28rem; }
  .pb--pin .pb__panel { scroll-margin-top: 12px; }
}

/* ============ r172 round-33 convergence ============ */
/* Focus and hash scrolls clear the pinned deck row (WCAG 2.4.11). */
html:has(.pb--pin) { scroll-padding-top: calc(var(--nav-h, 64px) + 145px); }
/* The scoreboard specimen's crop reads as depth, not a bug. */
.glimpse--h420 { -webkit-mask-image: linear-gradient(#000 76%, transparent 99%);
  mask-image: linear-gradient(#000 76%, transparent 99%); }
/* The mini-board header never jams at phone width. */
.rc-scoreboard-cols { gap: 8px; }
@media (max-width: 480px) { .rc-scoreboard-cols span:first-child { display: none; } }
/* The pinned row's arrow-keys cue hides while stuck. */
.pb--pin .pb__railwrap.is-stuck .pb__cue { display: none; }
/* The flag keeps its numerals on the phone: white 1996, drawn line, lime 2026. */
.lineage__mobile-nums { display: none; }
@media (max-width: 559px) {
  .lineage__mobile-nums { display: flex; align-items: center; justify-content: center;
    gap: .7rem; margin: .3rem auto .55rem; max-width: 340px; }
  .lineage__mobile-nums b { font-size: 2.1rem; font-weight: 800; letter-spacing: -.5px;
    color: #fff; line-height: 1; }
  .lineage__mobile-nums b.ln-2026 { color: var(--lime); }
  .lineage__mobile-nums i { flex: 1 1 auto; border-top: 3px solid #3D5A73; }
}

/* ============ r174 who band (the CMO: who we work with, on the home page) ============ */
.who__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-top: 1rem; }
@media (max-width: 980px) { .who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .who__grid { grid-template-columns: 1fr; } }
.who__c { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--white);
  text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease; }
.who__c:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.who__c b { font-size: .98rem; color: var(--navy-ink); }
.who__c span { font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.who__c i { font-style: normal; font-size: .8rem; font-weight: 600;
  color: var(--blue-text); margin-top: auto; padding-top: .4rem; }
/* r174: the doors left the clipped kw collage — long phrase-spans in the door
   art must wrap now that nothing crops them (p .num is nowrap by default). */
.press-card__art .pca__big .num { white-space: normal; }

/* ============ r176 mobile love (round 34: 'mobile still needs design love') ============ */
/* the who cards carry receipts, like everything else on this site */
.who__c .who__r { display: block; text-decoration: none; font-family: var(--mono);
  font-size: .62rem; letter-spacing: .05em; color: var(--ink-3);
  border-top: 1px dashed var(--rule); padding-top: .45rem; margin-top: .15rem; }
/* the clock's stops, named at phone width (dot labels are desktop-only) */
.mtl__mlegend { display: none; }
@media (max-width: 759px) {
  .mtl__mlegend { display: block; margin: .5rem auto 0; text-align: center;
    max-width: 21rem; font-size: .6rem; font-weight: 700; letter-spacing: .08em;
    line-height: 1.7; color: var(--ink-3); } }
/* the ticker's provenance stamp stands apart from the prices */
.tick-src { display: block; margin-top: .45rem; font-size: .88em; color: var(--ink-3); }
@media (max-width: 480px) {
  /* delivery-lane rows and the worked-dollars links stack instead of colliding */
  .lat2__row { flex-direction: column; gap: .18rem; }
  .lat2__row span:last-child { text-align: left; }
  /* the alert card's actions: primary first, everything full width */
  .ac__actions { flex-direction: column; }
  .ac__actions .btn { width: 100%; justify-content: center; }
  .ac__actions .btn--lime { order: -1; }
  /* the WKYC kicker stacks its two halves */
  .pca__bar--stack { flex-direction: column; align-items: flex-start; gap: .12rem; }
}
/* deck tabs read as buttons, not floating words, on small screens */
@media (max-width: 640px) {
  .pb__tab[aria-selected="false"] { background: var(--white); border: 1px solid var(--rule); }
}
/* the C&E cite tail: one unit on desktop, its own line on phones */
.cite-tail { white-space: nowrap; }
@media (max-width: 560px) { .cite-tail { display: block; white-space: normal; } }
/* beat claims rag evenly on phones */
@media (max-width: 560px) { .wk__big { text-wrap: balance; } }
/* every button row composes full-width on phones, like the hero and contact */
@media (max-width: 520px) {
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
}
/* the hero: the race box arrives before the receipt stack on phones */
@media (max-width: 480px) {
  .hero--home .hero-center { display: flex; flex-direction: column; }
  .hero--home .hero-center .hero-receipt { order: 2; margin-top: 1.1rem; }
  .hero--home .hero-center .hero-board { order: 3; }
  .hero--home .hero-center .scroll-hint { order: 4; }
}
/* the flag's mobile spine: the timeline drawn vertically, not flattened to text */
.lineage__mspine { display: none; }
@media (max-width: 559px) {
  .lineage__mspine { display: block; margin: .4rem 0 0 .35rem; padding-left: 1rem;
    border-left: 3px solid #3D5A73; text-align: left; }
  .lineage__mspine p { margin: 0; }
  .lineage__mspine .ms-y { font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px;
    color: var(--white); line-height: 1.15; position: relative; }
  .lineage__mspine .ms-y::before { content: ""; position: absolute; left: calc(-1rem - 8px);
    top: .62em; width: 13px; height: 13px; border-radius: 50%; background: #E7EFF6; }
  .lineage__mspine .ms-y--lime { color: var(--lime); margin-top: .55rem; }
  .lineage__mspine .ms-y--lime::before { background: var(--lime); box-shadow: 0 0 0 3px #FFFFFF; }
  .lineage__mspine .ms-y span { display: block; font-size: .6rem; font-weight: 700;
    letter-spacing: .09em; color: #9FBFD6; margin-top: .1rem; }
  .lineage__mspine .ms-y--lime span { color: #C4E07E; }
  .lineage__mspine .ms-tick { font-size: .6rem; font-weight: 700; letter-spacing: .07em;
    color: #7E97AB; margin: .55rem 0; position: relative; }
  .lineage__mspine .ms-tick::before { content: ""; position: absolute; left: calc(-1rem - 3px);
    top: .5em; width: 7px; height: 2px; background: #56748C; }
  .lineage__mspine .ms-mid { font-size: .62rem; font-weight: 800; letter-spacing: .12em;
    color: #8FA9BE; margin: .55rem 0; }
}

/* ============ r177 (round 35): phone reading polish ============ */
/* the hero lede reads left-aligned on phones; nine centered lines was the
   slowest block on the site */
@media (max-width: 480px) {
  .hero--home .hero-center .lede { text-align: left; }
}
/* the flag's service sentence: caps costume on desktop, sentence on phones
   (r178: the string is typed sentence-case now; desktop re-caps it) */
.built__svc { text-transform: uppercase; }
@media (max-width: 560px) {
  .built__svc { text-transform: none; letter-spacing: normal;
    font-family: var(--sans); font-size: .85rem; line-height: 1.55; }
}

/* ============ r179 mobile diet (the owner: "mobile still feels super heavy
   and i glaze over") — every rule phone-scoped; desktop pixel-identical ============ */
/* the one hook every HTML-tagged cut uses */
@media (max-width: 640px) { .m-cut { display: none !important; } }
/* receipts breathe: rarer type pressure at phone width */
@media (max-width: 640px) {
  .pca__row, .who__r, .mhero__rcpt { letter-spacing: .02em; line-height: 1.62; }
  /* the hero keeps its single biggest number; the rest wait one screen */
  .hero--home .hero-receipt > span:not(:first-child) { display: none !important; }
  /* one race on the phone scoreboard glimpse; stamps stay */
  .hero-board .hb-row + .hb-row { display: none; }
  /* doors 2-4: the art is a slim honesty strip, not a ledger */
  .press-card__art.m-slim { min-height: 0; padding: .55rem .95rem; }
}
/* the phone rhythm: closer breath everywhere, extra runway before the two loud bands */
@media (max-width: 560px) {
  .section { padding: 44px 0; }
  .section--mega { padding: 58px 0; }
  section.kw.section, section.section--flag { padding-top: 64px; }
  .mt3 { margin-top: 1.6rem; }
  .scroll-hint { display: none; }
  /* the who band tightens; its receipts stay (they are the doors' proof now) */
  .who__grid { gap: 10px; }
  .who__c { padding: .85rem 1rem; }
  /* the flag spine keeps its spine; the two era ticks are desktop texture */
  .lineage__mspine .ms-tick { display: none; }
  /* the alert card: one primary action, a tighter meta plate */
  .ac__actions .btn:not(.btn--lime) { display: none; }
  .ac__dl { gap: .5rem .9rem; }
  .ac__dl dd { font-size: .88rem; }
  /* market chips grid up instead of stacking */
  .aw--live .aw__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .aw__mkt { padding: .5rem .4rem; }
  /* the six-station list yields to the drawn index one screen down */
  #fcc-rates .press-card__art--hero .pca__row:nth-of-type(3) { display: none; }
}
/* footer columns fold on phones; >=641px the wrapper is invisible (site.js
   closes .mdet[open] at <=640, so desktop always renders open + contents) */
details.mfoot > summary { list-style: none; cursor: pointer; }
details.mfoot > summary::-webkit-details-marker { display: none; }
/* the generic .mdet +/− marker survives display:contents — the fold sign
   lives on the h4 instead */
details.mfoot > summary::before { content: "" !important; display: none !important; }
@media (min-width: 641px) {
  details.mfoot, details.mfoot > summary { display: contents; }
}
@media (max-width: 640px) {
  details.mfoot > summary h4 { margin-bottom: .4rem; }
  details.mfoot > summary h4::after { content: " +"; color: #8FA9BE; }
  details.mfoot[open] > summary h4::after { content: " \2013"; }
}

/* ============ r180 mobile loop M1 (19 phone-only verdicts: the clock prints
   each exhibit once, the matrix unpins, the sheet gets its lead, the footer
   folds grow real tap targets) — phone-scoped; desktop pixel-identical ============ */
/* elements that exist ONLY on phones */
.m-only { display: none; }
@media (max-width: 640px) { .m-only { display: block; } }
/* the clock: stops 2-4 drop their drawn minis — the full artifacts, stamped,
   live one swipe down in their own sections (stop 1 keeps the real tape) */
@media (max-width: 640px) {
  .mtl__stop--2 .mtl__fig, .mtl__stop--3 .mtl__fig, .mtl__stop--4 .mtl__fig { display: none; }
  .mtl__stop--2 .mtl__spec, .mtl__stop--3 .mtl__spec, .mtl__stop--4 .mtl__spec { min-height: 0; padding: .55rem .95rem; }
}
/* the share diagonal prints finished on phones — the runway was dead thumb */
@media (max-width: 640px) {
  html.scrub .sd__scroller { height: auto; }
  html.scrub .sd__pin { position: static; }
  html.scrub .sd__hint { display: none !important; }
  html.scrub .sd__dots circle:nth-of-type(n), html.scrub .sd__diag, html.scrub .sd__diag-lab,
  html.scrub .sd__under, html.scrub .sd__under--2, html.scrub .sd__under--3,
  html.scrub .sd__ann, html.scrub .sd__note { animation: none !important; }
}
/* the agency book magnifies its top rows at phone width (the r176 glimpse
   pattern) instead of shrinking the call list to blur */
@media (max-width: 480px) {
  #agency-book .app-shot--natural { position: relative; }
  #agency-book .app-shot--natural img { width: 200%; max-width: none; height: 260px;
    object-fit: cover; object-position: left top; }
  #agency-book .app-shot--natural::before { content: ""; position: absolute; left: 0; right: 0;
    top: 196px; height: 64px; background: linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events: none; z-index: 1; }
}
/* the who band de-boxes on phones: four accent rows, receipts kept — the doors
   keep the card language to themselves */
@media (max-width: 640px) {
  .who__grid { gap: 6px; }
  .who__c { background: transparent; border: 0; border-left: 2px solid #00ACC1;
    border-radius: 0; padding: .7rem 0 .7rem .95rem; box-shadow: none; }
}
/* the wave sheet's lead read (phones print it above the six rows) */
@media (max-width: 640px) {
  .wvlead { margin: .55rem 0 .2rem; font-family: var(--sans); font-weight: 800;
    font-size: .92rem; letter-spacing: .02em; color: var(--navy-deep); }
  .wvlead b { font-family: var(--mono); font-size: 1.45rem; letter-spacing: -.01em;
    color: #4F7A25; vertical-align: -.08em; margin: 0 .1em; }
}
/* the polling wall says what it holds on phones */
@media (max-width: 640px) {
  .qf__more { margin: .8rem 0 0; font-size: .7rem; letter-spacing: .05em; color: #B9CFDF; }
  .qf__more a { color: var(--lime); text-decoration: none; }
  .qf__more a:hover, .qf__more a:focus-visible { text-decoration: underline; }
}
/* the press story run: one offer per line on phones */
@media (max-width: 640px) {
  .pstory { display: block; padding: .12rem 0; }
  .pstory--stamp { color: var(--ink-3); margin-top: .2rem; }
}
/* the questions close: one button ask; the second drops to a text link */
@media (max-width: 480px) {
  .cta-final--q .btn-row .btn--outline { background: transparent; border-color: transparent;
    box-shadow: none; padding: .3rem .5rem; text-decoration: underline; text-underline-offset: .22em; }
}
/* the library's domain chips run one scrollable row on phones */
@media (max-width: 480px) {
  #sx .sx-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: .3rem; scrollbar-width: thin; }
  #sx .sx-chip { white-space: nowrap; }
}
/* doug's footer refinement: each fold spans the row, 44px tap targets, the
   marker rides the right edge on a hairline row */
@media (max-width: 640px) {
  .foot__grid > div { grid-column: 1 / -1; }
  details.mfoot > summary { display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.14); }
  details.mfoot > summary h4 { margin: 0; }
  details.mfoot > summary h4::after { content: none; }
  details.mfoot > summary::after { content: "+"; color: #8FA9BE; font-family: var(--mono);
    font-size: 1rem; line-height: 1; }
  details.mfoot[open] > summary::after { content: "\2212"; }
  details.mfoot > ul { margin: .15rem 0 .7rem; }
}
/* every page's closing band breathes 44px at the bottom on phones */
@media (max-width: 560px) { .cta-final { padding-bottom: 44px; } }
/* the 3-across market chips wrap their totals and deltas at narrow widths;
   under 380px the rail deals two across so no token has to break */
@media (max-width: 560px) {
  .aw--live .aw__rail .aw__mkt-tot { font-size: 1.05rem; white-space: normal; }
  .aw--live .aw__rail .aw__mkt-delta { font-size: .62rem; line-height: 1.35; white-space: normal; }
}
@media (max-width: 380px) {
  .aw--live .aw__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the press housekeeping fold keeps the card voice */
details.mdet--pk > summary { font-size: .78rem; letter-spacing: .05em; }

/* ============ r181 mobile loop M2 (12 voices on one bug: the chip totals
   clip — the chip stacks instead; plus the ticker diet and the sheet tail)
   — phone-scoped; desktop pixel-identical ============ */
@media (max-width: 560px) {
  /* name / total / bar / delta each on their own line: every token prints whole */
  .aw--live .aw__rail .aw__mkt { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* the stop-02 mono ticker keeps its provenance stamp; the rate rows are
     desktop texture — the board below carries the dollars (adam) */
  .mticker > span:not(.tick-src) { display: none; }
}
@media (max-width: 640px) {
  .wvlead__tail { display: block; font-family: var(--mono); font-size: .6rem;
    font-weight: 400; letter-spacing: .06em; color: var(--ink-3); margin-top: .2rem; }
}

/* ============ r182 mobile loop M3 crumbs — phone-scoped ============ */
@media (max-width: 640px) {
  /* the press story run's guarantee closes the list in the stamp voice */
  .pstory--stamp { font-size: .62rem; letter-spacing: .08em; color: var(--ink-3);
    border-top: 1px solid var(--rule-soft); padding-top: .35rem; margin-top: .35rem; }
}