/* Active Focus — landing page (www.diego.app), Men-Audience (WHOOP-inspired)
   direction. Colour, type and components come from tokens.css (the
   Men-Audience design system). This file lays things out; it invents no
   new colours or type sizes. Also lives at men-audience/styles.css as a
   design-canvas mirror — keep the two in sync. Restyled to the WHOOP
   direction's rules:

   1. Dark only. There is no light hero band here — every photograph gets
      the same black bottom-weighted scrim, because the whole system has one
      canvas, not two.
   2. Square, not soft. 2px corners everywhere, one notch (a diagonal corner
      cut) as the system's single signature shape. No pills, no rounded bars
      — except the nav, a deliberate one-off borrowed from quittrapp.com's
      floating blurred pill chrome (see "nav" below) to read as more serious.
   3. The number is the hero. Every stat is Hubot Sans, tabular, oversized —
      never a ring. Teal is spent on exactly three things: the brand mark,
      buttons/focus states, and the page's one hero number (the 2h46m
      payoff) — nowhere else, so it stays loud. */

/* ---------- page shell ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; text-wrap: pretty; }

.wrap { width: min(1080px, calc(100% - var(--space-8))); margin-inline: auto; }
.wrap.narrow, .narrow { width: min(660px, 100%); margin-inline: auto; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The hero CTA and nav CTA both anchor-jump here (and to every other section
   below) — without this the fixed nav (~80px) covers the target heading. */
main [id] { scroll-margin-top: 96px; }

/* Pacing is deliberately uneven: the argument sections breathe, the two
   sections that are one continuous thought (how it works → the daily loop)
   sit close together. */
.band { padding: clamp(88px, 13vw, 168px) 0; }
.band.tight { padding: clamp(64px, 8vw, 104px) 0; }
.band > .wrap > * + * { margin-top: var(--space-12); }

/* h1/h2's weight, uppercase and tracking come from tokens.css — only size
   and rhythm are set here. */
h1 { font-size: clamp(40px, 7.4vw, 92px); line-height: 0.98; margin: 0; }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin: 0 0 var(--space-6); }
h3 { font: 700 clamp(19px, 2vw, 23px)/1.3 var(--font-sans); letter-spacing: -0.005em; margin: 0; }
.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--space-4); max-width: 42ch; }
.center .lede { margin-inline: auto; }

/* Teal spent loud, exactly where the system's rules allow it — never on a
   stat that also needs to read good/bad via --optimal/--attention/--poor. */
.accent { color: var(--brand); }

/* ---------- photography ---------- */
.bleed { position: relative; isolation: isolate; overflow: hidden; }
.bleed-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* One scrim for every full-bleed band, dark end of the WHOOP gradient
   deepening toward black — bottom-weighted, not a flat blackout, so the
   room stays visible. */
.bleed::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(16, 21, 24, 0.5) 40%, rgba(0, 0, 0, 0.9)); }

/* ---------- nav ----------
   A floating, pill-shaped, heavily-blurred bar rather than an edge-to-edge
   strip — the one deliberate break from the system's "no pills" rule,
   borrowed wholesale from quittrapp.com's chrome because a floating pill
   nav reads as a more premium, more serious product than a flat top bar. */
.nav { position: fixed; top: var(--space-4); left: var(--space-4); right: var(--space-4); z-index: 10;
  max-width: 900px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  border-radius: 999px; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none;
  font: 700 14px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; }
.mark { width: 18px; height: 18px; flex: none; background: var(--brand); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

a { color: var(--ink); }
a:hover { color: var(--ink-soft); }
.btn { text-decoration: none; transition: opacity 0.2s ease, background 0.2s ease; }
.btn-primary:hover { color: var(--on-cta); opacity: 0.88; }
.btn-secondary { background: color-mix(in srgb, var(--canvas) 70%, transparent); backdrop-filter: blur(8px); }
.btn-secondary:hover { color: var(--ink); background: var(--surface); }

/* One CTA at a time: the nav button only arrives once the hero's has scrolled off. */
@supports (animation-timeline: scroll()) {
  .nav-cta { animation: nav-cta linear both; animation-timeline: scroll(root); animation-range: 320px 520px; }
  @keyframes nav-cta { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
}

/* ---------- 1. hero ---------- */
/* No photo, no bleed — the week chart is the hero image, per the design
   system's "the number is the hero" rule. */
.hero { padding: clamp(148px, 20vw, 220px) max(var(--space-6), calc(50% - 620px)) clamp(88px, 13vw, 168px); }
.hero .wrap { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.hero-copy { width: 100%; }
/* One line, full width, like the reference banner — sized against the wrap's
   own inline size (cqw), not the viewport, so it still fits edge-to-edge
   inside .wrap's 1080px cap on wide screens instead of overshooting it. */
.hero-copy h1 { font-size: clamp(10px, 4.3cqw, 90px); white-space: nowrap; margin-bottom: var(--space-6); }
.hero-copy .lede { max-width: 46ch; margin: 0 auto; }
.hero .week { width: 100%; }

/* ---------- 1b. focus picker ----------
   Hidden radios + :has(), so the whole thing works with JavaScript off. The
   chips are the design system's documented filter component.

   What it switches: the composition of §2's lost hours and §7's coaching
   examples. What it never switches: the totals. Every context loses the same
   ~5h and lands on the same 2h 46m of real work — only the shape of the loss
   differs, which is the honest claim and keeps the page's one dataset intact. */
.focus-picker { padding: clamp(40px, 6vw, 72px) var(--space-6); display: flex; justify-content: center; }
.focus-picker fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column;
  align-items: center; gap: var(--space-4); }
.focus-picker legend { float: left; padding: 0; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.chips .chip { cursor: pointer; height: 40px; padding: 0 var(--space-4); user-select: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.chips .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chips .chip:hover { border-color: var(--ink-quiet); }
.chips .chip:has(input:checked) { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.chips .chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }

[data-variant] { display: none; }
:root:has(#f-work:checked) [data-variant="work"],
:root:has(#f-study:checked) [data-variant="study"],
:root:has(#f-project:checked) [data-variant="project"] { display: contents; }

/* The picker marks its matching panel in the triptych. Colour alone doesn't
   work here — ink-soft and ink-quiet are close at 12px uppercase — so this
   uses the system's status dot instead. */
.personas .label::before { content: ""; display: none; width: 8px; height: 8px;
  background: var(--brand); margin-right: var(--space-2); vertical-align: 1px; }
:root:has(#f-work:checked) .personas figure:nth-child(1) .label::before,
:root:has(#f-study:checked) .personas figure:nth-child(2) .label::before,
:root:has(#f-project:checked) .personas figure:nth-child(3) .label::before { display: inline-block; }
:root:has(#f-work:checked) .personas figure:nth-child(1) .label,
:root:has(#f-study:checked) .personas figure:nth-child(2) .label,
:root:has(#f-project:checked) .personas figure:nth-child(3) .label { color: var(--ink); }

/* ---------- 2. realization ---------- */
#realization .narrow { margin-bottom: var(--space-12); }
.split { display: flex; flex-direction: column; gap: var(--space-6);
  background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline); padding: clamp(24px, 3vw, 40px); }
.split-head { display: flex; align-items: baseline; justify-content: space-between; }
.split-bar { display: flex; gap: 3px; height: 64px; }
.split-bar .seg { flex: 0 1 var(--w); min-width: 0; border-radius: 0; background: var(--track); }
.split-bar .seg-real { background: var(--optimal); }

.split-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 88px); }
.split-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline); color: var(--ink-soft); }
.split-list li.is-real { color: var(--ink); font-weight: 700; }
.split-list li.is-real .small { color: var(--optimal); }

/* The whole argument of the page, at the size the whole argument deserves —
   and the one place besides the CTA where teal carries the point. */
.payoff { margin-top: clamp(72px, 10vw, 128px); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.colossus { font: 700 clamp(72px, 15vw, 200px)/0.9 var(--font-metric); font-variant-numeric: tabular-nums;
  font-stretch: condensed; letter-spacing: -0.01em; color: var(--brand); margin: var(--space-4) 0 0; }
.payoff .of { font: var(--text-body); color: var(--ink-soft); margin: 0; }

/* ---------- 3. blockers ---------- */
.two-col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.loop { display: flex; flex-direction: column; gap: var(--space-4); margin: 0 0 var(--space-8);
  font-size: 18px; line-height: 1.45; color: var(--ink-quiet); }
.loop p { margin: 0; }

.compare { border-collapse: collapse; table-layout: fixed; width: 100%; }
.compare th { text-align: left; padding: 0 var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--hairline-strong); }
.compare td { text-align: left; padding: var(--space-4) var(--space-4) var(--space-4) 0;
  color: var(--ink-quiet); font-size: 16px; vertical-align: top; }
.compare .is-us { color: var(--ink); font-weight: 700; }

/* ---------- 6b. proof / comparison table (three columns: row label + two competitors) ---------- */
.compare-grid th[scope="row"] { width: 22%; padding: var(--space-4) var(--space-4) var(--space-4) 0;
  color: var(--ink); font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.compare-grid td { width: 39%; border-bottom: 1px solid var(--hairline); }
.compare-grid thead th { border-bottom: 1px solid var(--hairline-strong); }

/* ---------- 3b. mission ----------
   The one big scroll-bold statement, quittrapp.com-style — original copy,
   not theirs; only the pinned, sentence-by-sentence reveal (.reveal-text,
   "scroll-bold text" below) is actually borrowed. Unlike every other band,
   this section is much taller than the viewport (mission-pin) with a
   sticky inner (mission-sticky): the paragraph holds still on screen while
   its three sentences bold in turn as you keep scrolling, then releases
   into the next section once all three are lit. */
.mission-pin { position: relative; height: 250vh; margin: clamp(64px, 8vw, 104px) 0;
  view-timeline-name: --mission; view-timeline-axis: block; }
.mission-sticky { position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; }
.mission { font: 700 clamp(24px, 3.4vw, 40px)/1.35 var(--font-sans); letter-spacing: -0.005em;
  max-width: 44ch; margin-inline: auto; }

/* ---------- 4. how it works ---------- */
/* Alternating full-width rows, not a three-up card grid. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 88px); }
.step { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 96px); align-items: center;
  width: min(1080px, calc(100% - var(--space-8))); margin-inline: auto; }
.step:nth-child(even) .step-art { order: 2; }
.step-copy { display: flex; flex-direction: column; gap: var(--space-4); max-width: 34ch; }
.step-copy p { margin: 0; color: var(--ink-soft); }
.step-n { font: 700 64px/1 var(--font-metric); font-stretch: condensed; letter-spacing: 0; color: var(--ink-quiet); opacity: 0.35; }

/* The one place borders are allowed: this is the actual product UI. */
.step-art { height: 220px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
  background: var(--gradient); border: 1px solid var(--hairline); padding: var(--space-8); }
.app-row { display: flex; align-items: center; gap: var(--space-3); font-size: 16px; color: var(--ink-soft); }
.app-row .small { margin-left: auto; }
.dot { width: 8px; height: 8px; background: var(--track); flex: none; }
.dot.on { background: var(--optimal); }
.app-row:has(.dot.on) { color: var(--ink); }

.pulse-art { flex-direction: row; align-items: flex-end; gap: var(--space-2); }
.pulse-bar { flex: 1; height: var(--h); background: var(--optimal); border-radius: 0; opacity: 0.9; }
.pulse-bar.idle { background: var(--track); }

/* No ring here — the score is a stat tile like the hero's, the number alone. */
.score-art { flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); }
.score-art .numeral { font-size: 48px; }

/* ---------- 5. daily loop ---------- */
/* Bars are a percentage of a fixed 180px track where 100% = 5h, so the 4h goal
   line lands at exactly 80%. Change one, change the other. */
.week { display: flex; flex-direction: column; gap: var(--space-4); }
.week-head { display: flex; justify-content: space-between; }
.week-chart { position: relative; height: 180px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 20px); align-items: end; }
.goal-line { position: absolute; left: 0; right: 0; bottom: 80%; border-top: 1px dashed var(--ink-quiet); opacity: 0.5; }
.week-chart .bar { height: var(--p); width: 100%; max-width: 56px; justify-self: center; background: var(--track); border-radius: 0;
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
/* Today reads as "today" by brightness, not by borrowing a semantic colour
   that already means good/bad elsewhere on the page. */
.week-chart .bar.is-today { background: var(--ink); }
.week-axis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 20px);
  border-top: 1px solid var(--hairline); padding-top: var(--space-3); }
.week-axis span { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1);
  font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-quiet); }
.week-axis b { font: 700 15px/1 var(--font-metric); font-variant-numeric: tabular-nums;
  letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.week-axis .is-today, .week-axis .is-today b { color: var(--ink); }

.beat { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.4; color: var(--ink-quiet); }
.beat strong { color: var(--ink); font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; font-family: var(--font-metric); font-stretch: condensed; color: var(--ink); }

.metrics { display: flex; flex-wrap: wrap; gap: clamp(40px, 8vw, 112px); justify-content: center; }
.metrics div { display: flex; flex-direction: column; gap: var(--space-2); }
.numeral.m { font-size: clamp(32px, 3.6vw, 44px); }

/* ---------- 6. outcome ---------- */
/* Full-bleed three-panel band: no cards, no radii, no gutters. */
.personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: var(--space-12) 0 0; }
.personas figure { margin: 0; display: flex; flex-direction: column; }
.personas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; filter: grayscale(0.15) contrast(1.05); }
.personas figcaption { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) clamp(16px, 2vw, 32px) 0; }
.personas p { margin: 0; font-size: 17px; max-width: 26ch; }

.compound { margin-top: clamp(72px, 10vw, 128px); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.compound .from, .compound .to { margin: 0; font: 700 clamp(32px, 6vw, 76px)/1.05 var(--font-metric); font-stretch: condensed; letter-spacing: -0.01em; }
.compound .from { color: var(--ink-quiet); }
.compound .from::after { content: ""; display: block; width: 1px; height: 40px; margin: var(--space-4) auto 0;
  background: var(--ink-quiet); opacity: 0.4; }
.compound .to { color: var(--optimal); }
.compound .small { margin-top: var(--space-6); font-size: 16px; }

/* ---------- 7. coaching ---------- */
/* Four sentences, set as sentences. */
.insights { display: flex; flex-direction: column; gap: var(--space-6); }
.insights p { margin: 0; font: 400 clamp(21px, 2.4vw, 28px)/1.4 var(--font-sans);
  letter-spacing: -0.005em; color: var(--ink-quiet); }
.insights strong { color: var(--ink); font-weight: 700; }

/* ---------- 8. final ---------- */
.final { padding: clamp(120px, 20vw, 240px) var(--space-4); }
.final.bleed::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(16, 21, 24, 0.6) 42%, rgba(0, 0, 0, 0.92)); }
.final h2 { font-size: clamp(34px, 6vw, 68px); line-height: 1.05;
  margin: 0 auto var(--space-6); max-width: 15ch; }
.final .small { margin-top: var(--space-4); }

/* Primary CTA everywhere is this capture form, not a raw download link — a
   mobile ad click can't install a Mac app on the spot (docs/TODOS_WEBSITE_FUNNEL.md,
   "The core decision this plan assumes"). */
.lead-form { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
  margin: var(--space-6) 0 0; }
/* `.lead-form`'s own display:flex otherwise beats [hidden]'s UA-stylesheet
   display:none (a class selector always outranks an attribute selector). */
.lead-form[hidden] { display: none; }
.lead-form .input { flex: 1 1 260px; max-width: 320px; }
.lead-form .btn { flex: none; }
.lead-status { min-height: 20px; margin-top: var(--space-3); }
.lead-status.is-ok { color: var(--optimal); }
.lead-status.is-error { color: var(--poor); }

/* ---------- footer ----------
   Structured, multi-block dark footer — brand + tagline beside a real link
   column, then a copyright bar — instead of the previous one-line strip.
   Same "serious" borrow from quittrapp.com's footer, kept to links that
   actually exist on this single-page site rather than padding out columns
   with invented pages. */
.foot { border-top: 1px solid var(--hairline); padding-top: clamp(56px, 8vw, 96px); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(32px, 6vw, 64px);
  padding-bottom: clamp(40px, 6vw, 72px); }
.foot-brand { display: flex; flex-direction: column; gap: var(--space-4); }
.foot-brand .small { margin: 0; color: var(--ink-quiet); }
.foot-links { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 56px); }
.foot-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 120px; }
.foot-head { font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.foot-col a { font-size: 14px; color: var(--ink-quiet); text-decoration: none; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.foot-bottom .small { margin: 0; }

/* ---------- reveal ----------
   Kept for the two data moments only; everything is visible by default. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 24%; }
    @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  }
}

/* ---------- scroll-bold text ----------
   quittrapp.com's sentence-by-sentence emphasis: the paragraph reads muted,
   and each sentence steps up to full brightness in turn while the pinned
   .mission-pin section (above) scrolls past underneath it — never resets.
   app.js wraps .reveal-text into one <span style="--i:0..1"> per sentence
   (its position through the paragraph, 0 = first sentence, 1 = last);
   every span shares the same named timeline (--mission, declared on the
   ancestor .mission-pin via view-timeline-name) so they're all driven by
   how far that tall wrapper has scrolled, not by the span's own position —
   the paragraph itself never moves. The range uses the "contain" named
   range, not the default "cover" — cover's 0-100% spans from .mission-pin
   first peeking onto screen to it fully leaving, which includes the
   approach/exit while it's still scrolling like a normal element; contain's
   0-100% is exactly the dwell where .mission-pin is tall enough to fully
   occupy the viewport, i.e. while .mission-sticky is actually stuck. --i
   staggers where in that dwell each sentence's turn falls, spread across an
   84%-wide span of the dwell so the last sentence's turn still lands inside
   0-100% regardless of sentence count, with real gaps between turns so
   each one holds still to be read before the next lights up. There's no
   fade: steps(1, jump-start) makes the animation a hard on/off switch, so
   colour snaps straight to full ink the instant scroll reaches that
   sentence's turn rather than easing into it — the 16%-wide range only
   sets *where* the step falls, since with 1 step its width doesn't
   otherwise matter. Without JS or scroll-timeline support the paragraph is
   just a normal, fully legible .lede — this only ever adds emphasis, never
   removes it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-text span {
      color: var(--ink-quiet);
      animation: word-bold steps(1, jump-start) both;
      animation-timeline: --mission;
      animation-range: contain calc(var(--i) * 84%) contain calc(var(--i) * 84% + 16%);
    }
    @keyframes word-bold { to { color: var(--ink); } }
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .two-col { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; }
  .step:nth-child(even) .step-art { order: 0; }
  .step-n { font-size: 44px; }
  .personas { grid-template-columns: 1fr; gap: var(--space-8); }
  .personas img { aspect-ratio: 16 / 10; }
  .personas figcaption { padding-inline: var(--space-4); }
}
@media (max-width: 760px) {
  /* The pill nav has no room for link text once the brand and CTA are both
     visible at phone widths — drop the links, keep brand + one CTA. */
  .nav-links { display: none; }
  .nav { padding-left: var(--space-4); }

  /* Three columns of sentence-length copy doesn't fit a phone width even with
     table-layout: fixed (it'd just wrap every cell into a ladder of single
     words) — stack each row as label + two lines instead. */
  .compare-grid, .compare-grid tbody, .compare-grid tr, .compare-grid th, .compare-grid td {
    display: block; width: auto; }
  .compare-grid thead { display: none; }
  .compare-grid tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
  .compare-grid tr:first-child { border-top: 1px solid var(--hairline); }
  .compare-grid th[scope="row"] { border-bottom: 0; padding: 0 0 var(--space-2); }
  .compare-grid td { border-bottom: 0; padding: var(--space-1) 0; }
  .compare-grid td::before { content: "Competitors — "; color: var(--ink-quiet); }
  .compare-grid td.is-us::before { content: "Active Focus — "; color: var(--ink); }
}
@media (max-width: 560px) {
  .split-list { grid-template-columns: 1fr; }
  .week-chart { height: 150px; }
  .week-axis b { font-size: 12px; white-space: nowrap; }
  .week-axis span { font-size: 10px; }
  .metrics { gap: var(--space-8); justify-content: flex-start; }
  .foot-top, .foot-brand, .foot-links { text-align: center; align-items: center; }
  .foot-top { flex-direction: column; }
  .foot-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}