/* ============================================================================
   FIRE YOUR COACH — SHARED SITE STYLESHEET (Fieldhouse)
   ============================================================================

   Every marketing page links this file. Do NOT paste it back inline: ~95% of
   this stylesheet was duplicated across eight pages, which is what made
   publishing a new page cost ~1,200 lines and stalled the content cadence for
   seven weeks.

   Page-specific rules belong in a small inline <style> block on the page
   itself, which loads after this file and therefore wins on ties.

   Token dialect: --chalk / --ink / --steel / --oxblood.
   index.html and vs/strong.html still use an older --color-* dialect and have
   NOT been migrated; see docs/marketing/seo-content-calendar.md.

   Source: extracted from website/from/ai.html (the page with no unique rules,
   making it the natural common base). Four selectors adopted the more complete
   from/chatgpt variants: .nav-cta, .nav-cta:hover, .cta-primary,
   .cta-primary--ghost:hover.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════
   FIELDHOUSE TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  --chalk: #F2EDE2;
  --chalk-deep: #E3DCCB;
  --chalk-subtle: #EDE7D9;
  --ink: #111111;
  --steel: #2B2B2E;
  --oxblood: #C8391F;
  --oxblood-deep: #A52913;
  --oxblood-light: #E14A35;
  --stone: #6F6A5F;
  --faint: #8A8477;
  --border: rgba(17,17,17,0.18);
  --border-faint: rgba(17,17,17,0.10);
  --ink-border: rgba(242,237,226,0.12);
  --ink-text-muted: rgba(242,237,226,0.60);
  --ink-text-faint: rgba(242,237,226,0.40);

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --max-w: 1080px;
  --gutter: clamp(24px, 5vw, 80px);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--chalk);
}
::selection { background: var(--oxblood); color: var(--chalk); }
a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--oxblood-deep); }
img { display: block; max-width: 100%; }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger > .reveal:nth-child(2) { transition-delay: 0.07s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.14s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.21s; }

/* ── Typography helpers ─────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 0;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--oxblood);
  margin-right: 12px;
  flex-shrink: 0;
}
.eyebrow--ink::before { background: var(--oxblood-light); }

h2.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 24px;
}
h2.section-title .accent { color: var(--oxblood); }

.body-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--stone);
  max-width: 64ch;
}
.body-text strong { color: var(--ink); font-weight: 600; }
.body-text + .body-text { margin-top: 16px; }

.body-text--lead {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  max-width: 58ch;
}

/* ── 1. Tape Strip + Nav ────────────────────────────────────── */
.tape-strip {
  background: var(--ink);
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
}
.tape-strip-inner {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-text-faint);
  display: flex;
  gap: 32px;
  animation: tape-scroll 30s linear infinite;
}
@keyframes tape-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--chalk);
  border-bottom: 1.5px solid var(--border-faint);
  padding: 16px 0;
  transition: box-shadow 0.3s;
}
.site-nav.scrolled { box-shadow: 0 1px 8px rgba(17,17,17,0.04); }
.site-nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo-lockup { display: block; height: 36px; width: auto; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 24px;
  background: var(--oxblood);
  color: var(--chalk);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 44px;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--oxblood-deep); color: var(--chalk); }

/* ── 2. Hero ────────────────────────────────────────────────── */
.hero {
  padding: clamp(100px, 14vh, 180px) 0 clamp(80px, 12vh, 140px);
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 0;
}
.hero-eyebrow::before {
  content: '';
  width: 48px;
  height: 1.5px;
  background: var(--oxblood);
  margin-right: 16px;
  flex-shrink: 0;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 56px);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--ink);
  max-width: 800px;
  margin-bottom: 16px;
}
.hero h1 .accent {
  color: var(--oxblood);
  display: block;
  margin-top: 8px;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--stone);
  max-width: 520px;
  margin-bottom: 40px;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 36px;
  background: var(--oxblood);
  color: var(--chalk);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 48px;
}
.cta-primary:hover { background: var(--oxblood-deep); color: var(--chalk); }
.cta-primary--ghost {
  background: transparent;
  color: var(--chalk);
  border: 1.5px solid var(--chalk);
}
.cta-primary--ghost:hover { background: rgba(242,237,226,0.1); color: var(--chalk); }
.cta-micro {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── 3. Problem ─────────────────────────────────────────────── */
.problem {
  padding: clamp(72px, 10vh, 120px) 0;
  border-top: 1.5px solid var(--border-faint);
}
.problem-content { max-width: 620px; }
.problem-content .body-text { margin-bottom: 20px; }

.user-voice {
  border-left: 3px solid var(--oxblood);
  background: rgba(200,57,31,0.04);
  padding: 20px 24px;
  margin: 28px 0;
  position: relative;
}
.user-voice p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 0;
}
.user-voice .attribution {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 10px;
  font-style: normal;
}

.problem-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1.5px solid var(--border);
}
.problem-kicker .accent { color: var(--oxblood); }

/* ── 4. Prose Section (What Execution Requires) ─────────────── */
.prose-section {
  padding: clamp(72px, 10vh, 120px) 0;
  border-top: 1.5px solid var(--border-faint);
}
.prose-content {
  max-width: 640px;
}
.prose-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin-top: 40px;
  margin-bottom: 14px;
}
.prose-content h3:first-of-type { margin-top: 28px; }

/* ── 5. Insight Callout ─────────────────────────────────────── */
.insight-callout {
  background: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 6px;
  margin: 40px 0;
}
.insight-callout-inner {
  border: 1px solid var(--ink-border);
  padding: 32px;
  text-align: center;
}
.insight-callout .insight-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: var(--chalk);
}
.insight-callout .insight-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood-light);
  margin-bottom: 12px;
}

/* ── 6. Solution Cards ──────────────────────────────────────── */
.solution {
  padding: clamp(72px, 10vh, 120px) 0;
  border-top: 1.5px solid var(--border-faint);
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.solution-card {
  background: var(--chalk-deep);
  border: 1px solid var(--border-faint);
  padding: 32px 28px;
}
.solution-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--chalk);
  background: var(--oxblood);
  display: inline-block;
  padding: 3px 8px;
  margin-bottom: 16px;
}
.solution-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--border);
}
.solution-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--stone);
}

/* ── 7. Audience ────────────────────────────────────────────── */
.audience {
  padding: clamp(72px, 10vh, 120px) 0;
  border-top: 1.5px solid var(--border-faint);
}
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 48px;
  margin-top: 40px;
}
.audience-divider {
  background: var(--border);
  width: 1px;
}
.audience-col h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 20px;
}
.audience-col.muted h3 { color: var(--stone); }
.audience-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.audience-col li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--stone);
  padding-left: 16px;
  position: relative;
}
.audience-col.active li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--oxblood);
}
.audience-col.muted li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 1px;
  background: var(--faint);
}
.audience-col li strong { color: var(--ink); font-weight: 500; }

/* ── 8. FAQ ─────────────────────────────────────────────────── */
.faq {
  padding: clamp(72px, 10vh, 120px) 0;
  border-top: 1.5px solid var(--border-faint);
}
.faq-list {
  max-width: 640px;
  margin-top: 40px;
}
.faq-item { border-bottom: 1px solid var(--border-faint); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--oxblood); }
.faq-q .plus {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--faint);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  flex-shrink: 0;
}
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1);
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a p {
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--stone);
  max-width: 560px;
}

/* ── 9. Closing CTA (INK) ──────────────────────────────────── */
.closing-cta {
  background: var(--ink);
  padding: clamp(80px, 12vh, 140px) 0;
  text-align: center;
}
.closing-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--chalk);
  max-width: 700px;
  margin: 0 auto 12px;
}
.closing-cta h2 .accent { color: var(--oxblood-light); display: block; margin-top: 8px; }
.closing-cta .cta-micro { color: var(--ink-text-faint); }

/* ── 10. Footer (INK) ──────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--ink-border);
  padding: 48px 0;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-border);
}
.footer-logo-group { display: flex; flex-direction: column; gap: 4px; }
.footer-logo-group .logo-lockup { display: block; height: 44px; width: auto; }
.footer-est {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-text-faint);
  margin-top: 4px;
}
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--oxblood-light); }
.footer-links a:focus-visible { outline: 2px solid var(--oxblood-light); outline-offset: 3px; }
.footer-social { margin-bottom: 20px; }
.footer-legal { margin-top: 14px; }
.footer-tagline {
  text-align: left;
  font-size: 13px;
  color: var(--ink-text-faint);
  line-height: 1.5;
  max-width: 680px;
}

/* Footer cross-links */
.footer-cross-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-border);
}
.footer-cross-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-text-faint);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.footer-cross-links a:hover {
  color: var(--oxblood-light);
  border-bottom-color: var(--oxblood-light);
}
.footer-cross-links .current {
  color: var(--oxblood-light);
  border-bottom-color: var(--oxblood-light);
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(17,17,17,0.5); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.modal-overlay.open { opacity: 1; visibility: visible; }
/* 460px, matching the two inline-dialect pages. This was 680 here, so the same
   copy ran three lines a paragraph on 32 pages and five on the two that matter
   most. One field does not need 680px of measure either way. */
.modal { background: var(--chalk); border: 1.5px solid var(--ink); border-radius: 0; padding: clamp(32px, 5vw, 48px); max-width: 460px; width: 100%; position: relative; transform: translateY(12px); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.modal-overlay.open .modal { transform: translateY(0); }
.modal-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; background: none; border: none; font-family: var(--font-mono); font-size: 20px; color: var(--stone); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; transition: color 0.2s; }
.modal-close:hover { color: var(--ink); }
.modal-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 12px; }
.modal h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.0; letter-spacing: 0.005em; text-transform: uppercase; margin-bottom: 12px; color: var(--ink); }
.modal .modal-sub { font-size: 15px; line-height: 1.65; color: var(--stone); margin-bottom: 28px; }
/* The modal states the fast route and the mechanism as two paragraphs; the
   28px below each is the gap before the form, not the gap between them. */
.modal .modal-sub + .modal-sub { margin-top: -16px; }
.email-form { display: flex; gap: 10px; }
@media (max-width: 480px) { .email-form { flex-direction: column; } }
.email-form input[type="email"] { flex: 1; font-family: var(--font-body); font-size: 15px; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 0; background: #fff; color: var(--ink); outline: none; transition: border-color 0.2s; min-height: 48px; }
.email-form input[type="email"]::placeholder { color: var(--faint); }
.email-form input[type="email"]:focus { border-color: var(--oxblood); }
.email-form button { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 24px; background: var(--oxblood); color: var(--chalk); border: none; border-radius: 0; cursor: pointer; transition: background 0.2s; white-space: nowrap; min-height: 48px; }
.email-form button:hover { background: var(--oxblood-deep); }
.email-form button:disabled { opacity: 0.6; cursor: not-allowed; }
/* The pending reader's install door. Outlined rather than filled: the filled
   oxblood button is "Build a free plan", and the secondary path must not borrow
   its weight. 48px because this is the control a thumb reaches for. */
.modal-install { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-faint); }
.modal-install-note { font-size: 14px; line-height: 1.6; color: var(--stone); margin-bottom: 12px; }
.modal-install-cta { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; border-radius: 0; }
.modal-install-cta { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 24px; background: transparent; color: var(--oxblood); border: 2px solid var(--oxblood); text-decoration: none; transition: background 0.2s, color 0.2s; }
.modal-install-cta:hover { background: var(--oxblood); color: var(--chalk); }
.modal-privacy { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-top: 16px; }
.modal-success h2 { margin-bottom: 12px; }
.modal-success p { font-size: 15px; line-height: 1.65; color: var(--stone); }
/* Two links live in modal prose - the faster route out of the request state, and
   the install door in the approved one. The base `a` rule clears text-decoration
   sitewide, so without these they read as coloured text and a reader hunting for
   a way forward does not find one. Padding on an inline element grows the tap
   target without moving the line box. */
.modal-sub a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; }
.modal-success p a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; }
.modal-error { font-size: 13px; color: #B4281A; margin-top: 10px; }

/* ── beta modal: the four rules that must be identical in all three dialects ──
   render.py check_beta_modal_wiring() fails the build if any of them drifts.
   A flex child taller than a centred container overflows off BOTH edges and its
   top becomes unreachable; auto margins centre it when it fits and let the
   overlay scroll when it does not. 16px on the input is what stops iOS zooming
   into a box that is already overflowing. The two views swap on [hidden] so the
   accessibility tree agrees with the pixels. */
.modal-overlay { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal { margin: auto; }
.modal-form-view[hidden], .modal-success[hidden], .modal-error[hidden] { display: none; }
.email-form input[type="email"] { font-size: 16px; padding: 12px 16px; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .solution-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; gap: 40px; }
  .audience-divider { display: none; }
  .footer-top { flex-direction: column; gap: 20px; }
  .footer-links { flex-direction: column; gap: 10px; }
  .footer-cross-links { flex-direction: column; gap: 8px; }
  .hero h1 { font-size: clamp(32px, 8vw, 42px); }
  .hero-eyebrow { font-size: 9px; letter-spacing: 0.1em; }
}

/* The modal was never covered here: the overlay's 250ms fade and the box's 300ms
   transform ran unconditionally. The height swap in site.js checks the same query
   in JS. */
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .tape-strip-inner { animation: none; } .modal-overlay, .modal { transition: none; } }

/* Brand lockup — hard-cut Fieldhouse logo, unified with the /lifter + /hyrox funnels */
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 18px; line-height: 1; white-space: nowrap; color: #111111; }
.brand-lockup__mark { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: #C8391F; flex-shrink: 0; }
.brand-lockup__mark img { width: 25px; height: 25px; display: block; }
.footer-logo .brand-lockup, .footer-logo-group .brand-lockup { color: #F2EDE2; }
@media (max-width: 600px) { .brand-lockup { font-size: 16px; } .brand-lockup__mark { width: 30px; height: 30px; } .brand-lockup__mark img { width: 22px; height: 22px; } }

/* canonical site footer (OCPM-252) */
.ftr{background:#111111;color:#F2EDE2;padding:56px 0 60px}
.ftr-inner{max-width:1080px;margin:0 auto;padding:0 clamp(24px,5vw,48px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.ftr-brand{display:flex;flex-direction:column;align-items:center;gap:9px}
.ftr .brand-lockup{color:#F2EDE2}
.ftr-est{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,226,.45)}
.ftr-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;max-width:720px;position:static;top:auto;z-index:auto;background:none;border:0;padding:0}
.ftr-nav a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,237,226,.75);text-decoration:none;transition:color .15s ease}
.ftr-nav a:hover{color:#E14A35}
.ftr-rule{width:64px;height:2px;background:#C8391F}
.ftr-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.ftr-meta a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,237,226,.55);text-decoration:underline;text-underline-offset:3px;transition:color .15s ease}
.ftr-meta a:hover{color:#E14A35}
.ftr-tagline{font-family:'Inter',-apple-system,system-ui,sans-serif;font-size:13px;line-height:1.6;color:rgba(242,237,226,.5);max-width:540px;margin:0}
@media(max-width:560px){.ftr{padding:44px 0 52px}.ftr .brand-lockup{font-size:16px}.ftr-nav{gap:10px 16px}}

/* -- Spec table --------------------------------------------------------
   Scannable capability comparison for /vs/ pages. "Alternative" SERPs
   train searchers to expect a table; prose alone reads as evasive.
   Rules over shadows, mono for the marks, oxblood only on the FYC column
   header so the accent stays disciplined. Scrolls on narrow screens
   rather than crushing the columns. */
.spec-table-wrap {
  margin-top: 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.spec-table {
  width: 100%;
  /* Capped well under the 952px grid above it. At full container width the
     rules stretch across mostly-empty Yes/No columns and the block reads wider
     than the two-column comparison it sits under, even though the bounding
     boxes match. */
  max-width: 720px;
  min-width: 540px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
}
.spec-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 14px;
}
.spec-table th,
.spec-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-faint);
  vertical-align: top;
}
.spec-table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.spec-table thead th.is-fyc { color: var(--oxblood); }
.spec-table tbody th {
  font-weight: 500;
  color: var(--ink);
  width: 56%;
}
.spec-table td {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--stone);
  white-space: nowrap;
}
.spec-table td.yes { color: var(--ink); }
.spec-table td.no { color: var(--faint); }
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 560px) {
  .spec-table { font-size: 14px; }
  .spec-table th, .spec-table td { padding: 12px 12px; }
}

/* -- Footer link columns -----------------------------------------------
   The flat wrap carried eight links comfortably. At fifteen it reads as a
   word blob, and this surface only grows: the footer is the interlinking
   spine that makes a content matrix rank, not decoration. Grouped columns
   keep it scannable and label each cluster.
   Colours are hardcoded rather than tokenised because index.html and
   vs/strong.html still run the older --color-* dialect and carry their own
   inline copy of this block. */
.ftr-cols{position:static;top:auto;left:auto;right:auto;z-index:auto;background:none;border:0;box-shadow:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 32px;width:100%;max-width:820px;text-align:left}
.ftr-col-h{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,237,226,.42);margin-bottom:11px}
.ftr-col a{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,237,226,.75);text-decoration:none;transition:color .15s ease;padding:3px 0;line-height:1.45}
.ftr-col a:hover{color:#E14A35}
@media(max-width:720px){.ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px;max-width:440px}}
@media(max-width:400px){.ftr-cols{grid-template-columns:1fr;max-width:280px}}

/* -- Content measure ----------------------------------------------------
   The page was running five widths: prose 640, spec table 720, hero h1 800,
   grids 952, section titles 952. Everything shares a left edge, so only the
   right edge was ragged — but a heading 312px wider than the paragraph under
   it, or a callout narrower than the cards above it, reads as a layout error
   rather than typography.

   The rule is WITHIN-SECTION consistency: every element inside a section
   shares that section's measure. Prose sections use the reading measure.
   Sections carrying grids, tables or accordions use the wide one — wide
   enough for columns, not 50% wider than the text.

   When adding a section type, add it here. A child that opts out of its
   section's measure is the bug this block exists to prevent. */
:root { --measure-text: 640px; --measure-wide: 800px; }

/* Hero: the eyebrow ran full-container against an 800 headline. */
.hero .hero-eyebrow,
.hero h1 { max-width: var(--measure-wide); }

/* Reading sections. */
.prose-section h2.section-title,
.prose-section .eyebrow,
.prose-section .prose-content,
.prose-section .problem-kicker,
.prose-section .insight-callout,
.prose-section .answer-steps,
.prose-section .cta-group { max-width: var(--measure-text); }

/* Two-column comparison. */
.audience h2.section-title,
.audience .eyebrow,
.audience .prose-content,
.audience .insight-callout,
.audience .problem-kicker,
.audience .cta-group,
.audience-grid,
.spec-table-wrap,
.spec-table { max-width: var(--measure-wide); }

/* Card grids — the coach cards and the how-it-works steps. Capping the grid
   makes the cards taller rather than wider, which is the right trade for a
   page that otherwise steps 640 -> 952 and back. */
.solution h2.section-title,
.solution .eyebrow,
.solution .prose-content,
.solution .insight-callout,
.solution .problem-kicker,
.solution .cta-group,
.solution-grid { max-width: var(--measure-wide); }

/* Accordion. */
.faq h2.section-title,
.faq .eyebrow,
.faq .prose-content,
.faq-list { max-width: var(--measure-wide); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT CLUSTER — glossary, protocols, intensity converter
   Generated pages use these. See tools/content-render/render.py.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Measure. Every block below is a child of .prose-section, and .prose-section
   only caps the children it names explicitly. Anything left out runs to the
   full 1080 container while the h2 above it sits at 640, which reads as a
   layout bug because it is one. Add new blocks here, not just to the markup. */
.prose-section .idx-list,
.prose-section .term-group,
.prose-section .source-list,
.prose-section .calc,
.prose-section .calc-outs,
.prose-section .calc-loads,
.prose-section .calc-msg,
.prose-section .formula-display,
.prose-section .table-footnote,
.prose-section .body-text { max-width: var(--measure-text); }

/* Tables carry more columns than prose carries words. */
.prose-section .spec-table-wrap { max-width: var(--measure-wide); }
.prose-section .spec-table { max-width: 100%; }

/* Screen-reader-only, for table captions that would be noise on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.table-footnote {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--faint);
}

/* The 108-cell RPE chart. Ten columns will not fit a phone at a readable size,
   so it scrolls inside its own wrapper rather than forcing the page to. */
.chart-table { min-width: 720px; font-family: var(--font-mono); font-size: 13px; }
.chart-table td { text-align: right; font-variant-numeric: tabular-nums; }
.chart-table tbody th { font-family: var(--font-mono); color: var(--ink); }
.chart-table tbody tr:hover td { background: rgba(200,57,31,0.05); }

/* ── Hub index: the eight protocol structures ───────────────────────────── */
.idx-list { list-style: none; margin: 36px 0 0; padding: 0; }
.idx-item { border-top: 1px solid var(--border-faint); }
.idx-item:last-child { border-bottom: 1px solid var(--border-faint); }
.idx-item a {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 4px 24px;
  padding: 22px 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.idx-item a:hover { background: rgba(200,57,31,0.04); }
.idx-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.idx-sum { font-size: 15px; line-height: 1.65; color: var(--stone); }
@media (max-width: 620px) {
  .idx-item a { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Glossary terms ─────────────────────────────────────────────────────── */
.term-group { margin-top: 64px; }
.term-group:first-child { margin-top: 32px; }
.term-grid { margin-top: 28px; }
.term {
  padding: 26px 0;
  border-top: 1px solid var(--border-faint);
  scroll-margin-top: 96px;
}
.term:last-child { border-bottom: 1px solid var(--border-faint); }
.term-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.term-exp {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.term-def { font-size: 15px; line-height: 1.75; color: var(--ink); }
.term-use {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--stone);
  border-left: 2px solid var(--border);
  padding-left: 16px;
}
.term-use-h {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.term-links { margin-top: 12px; }
.term-links:empty { display: none; }
.term-more {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* A disambiguation link is not this term's page. Styling it like one sends
   people somewhere that never mentions what they looked up. */
.term-more--alt { color: var(--stone); }
.term-more--alt:hover { color: var(--ink); }
.term-disambig {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--faint);
}

/* ── Sources ────────────────────────────────────────────────────────────── */
.sources { border-top: 1.5px solid var(--border-faint); }
.source-list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: src;
}
.source-item {
  counter-increment: src;
  position: relative;
  padding: 20px 0 20px 44px;
  border-top: 1px solid var(--border-faint);
}
.source-item:last-child { border-bottom: 1px solid var(--border-faint); }
.source-item::before {
  content: counter(src);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--oxblood);
}
.source-cite { font-size: 15px; line-height: 1.65; color: var(--ink); }
.source-cite a { text-decoration: underline; text-underline-offset: 3px; }
.source-note { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--stone); }
.source-pop {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* ── Calculator ─────────────────────────────────────────────────────────── */
.formula-display {
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
  background: rgba(200,57,31,0.05);
  border-left: 3px solid var(--oxblood);
  padding: 18px 22px;
}
.formula-display code { font-family: inherit; }

.calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px 24px;
  margin-top: 36px;
  padding: 28px;
  background: var(--chalk-subtle);
  border: 1.5px solid var(--border);
}
.calc-field { display: flex; flex-direction: column; gap: 7px; }
.calc-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.calc-input {
  font-family: var(--font-mono);
  font-size: 16px;               /* 16px or iOS zooms the page on focus */
  padding: 11px 12px;
  color: var(--ink);
  background: var(--chalk);
  border: 1.5px solid var(--border);
  border-radius: 0;
  min-height: 44px;
  width: 100%;
}
.calc-input:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.calc-help { font-size: 12px; line-height: 1.6; color: var(--faint); }
.calc-radios { display: flex; gap: 18px; }
.calc-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--ink);
  min-height: 44px;
  cursor: pointer;
}
.calc-radio input { accent-color: var(--oxblood); width: 18px; height: 18px; }

.calc-outs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--border-faint);
}
.calc-out {
  padding: 20px 22px 20px 0;
  border-bottom: 1px solid var(--border-faint);
}
.calc-out[hidden] { display: none; }
.calc-out-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.calc-out-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--oxblood);
  margin: 6px 0 8px;
  font-variant-numeric: tabular-nums;
}
.calc-out-caption { font-size: 13px; line-height: 1.6; color: var(--stone); }
.calc-msg { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--stone); }
.calc-msg:empty { display: none; }
.calc-loads { margin-top: 28px; }
.calc-loads[hidden] { display: none; }

/* Text-heavy tables. The base .spec-table is tuned for two-column Yes/No specs:
   monospace cells, white-space:nowrap, and a 56% row header. Give it sentences
   instead and the cells refuse to wrap, so the last column is clipped by the
   scroll wrapper and reads as a broken layout at desktop width. */
.spec-table--text td {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  white-space: normal;
}
.spec-table--text tbody th {
  width: auto;
  white-space: nowrap;
  padding-right: 24px;
}
.spec-table--text { min-width: 0; }
@media (max-width: 700px) {
  .spec-table--text { min-width: 560px; }
}

/* The 38 cells where published copies of the RTS chart disagree. The page says
   "shaded" three times; before this it said so over a uniform grid, so a reader
   could not tell which cells the caveat was about. */
.chart-table td.cell-unverified {
  background: rgba(200,57,31,0.09);
  color: var(--stone);
}
.chart-legend {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--faint);
}
.legend-swatch {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 3px;
  background: rgba(200,57,31,0.09);
  border: 1px solid var(--border-faint);
}

/* Contextual outbound links. 37 of these were authored and none rendered,
   because linkify() was never called. */
.rel-list { list-style: none; margin: 24px 0 0; padding: 0; }
.prose-section .rel-list { max-width: var(--measure-text); }
.rel-item { border-top: 1px solid var(--border-faint); }
.rel-item:last-child { border-bottom: 1px solid var(--border-faint); }
.rel-item a {
  display: block;
  padding: 16px 0;
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.2s;
}
.rel-item a::after { content: " \2192"; color: var(--faint); }
.rel-item a:hover { color: var(--oxblood-deep); }

/* Markdown code spans in the data files now render as code. */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(17,17,17,0.05);
  padding: 1px 5px;
}

/* ── Charts ────────────────────────────────────────────────────────────────
   Inline SVG, no library. A strict CSP blocks external scripts, the pages are
   meant to work in a gym with no signal, and the values are already on the page
   as a table — so the picture is generated from the same rows and needs no JS.
   Per-point tooltips come from SVG <title>. */
.chart-fig { margin: 32px 0 0; }
.prose-section .chart-fig { max-width: var(--measure-wide); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-fig figcaption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--faint);
}
.cg-grid { stroke: var(--border-faint); stroke-width: 1; }
.cg-axis {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--faint);
}
.cg-axis--y { text-anchor: end; }
/* Anchoring lives in a class, never a presentation attribute — a class rule
   wins, and the attribute silently loses. */
.cg-axis--start { text-anchor: start; }
.cg-axis--x { text-anchor: middle; }
.cg-axis--title {
  text-anchor: middle;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}
/* Direct labels on every series, so identity never rests on colour alone —
   two of the four share stone and are told apart by dash pattern. */
.cg-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.cg-cross { fill: var(--chalk); stroke: var(--ink); stroke-width: 2; }
.cg-note {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--stone);
  letter-spacing: 0.04em;
}
/* Hit targets stay generous; the circles themselves are transparent. */
.chart-svg circle[fill="transparent"] { cursor: help; }

/* Series colour lives here rather than in a var() inside an SVG presentation
   attribute, whose cross-engine support is inconsistent. Epley carries the
   single accent because it is the formula the product runs; Brzycki takes ink
   because it is the one that runs away; the two flatter curves share stone and
   are told apart by dash pattern and their direct labels. */
/* Strokes only. Setting fill on the series classes overrode the path's own
   fill="none" attribute — a class rule beats a presentation attribute — and
   every line rendered as a filled wedge. Text labels get fill separately. */
.cg-line { fill: none; }
.cg-s1 { stroke: var(--oxblood); }
.cg-s2 { stroke: var(--ink); }
.cg-s3, .cg-s4 { stroke: var(--stone); }
.cg-label { stroke: none; }
.cg-label.cg-s1 { fill: var(--oxblood); }
.cg-label.cg-s2 { fill: var(--ink); }
.cg-label.cg-s3, .cg-label.cg-s4 { fill: var(--stone); }

/* Select controls. The native chevron sits hard against the right edge with no
   room around it, which reads as a rendering fault rather than a control. Draw
   our own and give it padding. data: URI is permitted by the CSP's img-src. */
select.calc-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236F6A5F' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}
select.calc-input:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* Native number spinners appear on one field and not another depending on hover,
   so the two inputs never look like the same control. inputmode="decimal"
   already gives a numeric keypad on mobile. */
input.calc-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input.calc-input[type="number"]::-webkit-outer-spin-button,
input.calc-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The radio row is a control like the others, so it gets the same height. */
.calc-field .calc-radios { min-height: 44px; align-items: center; }

/* Chart tones. Same validated three as the line chart: oxblood carries the
   subject, ink and stone carry context. Emphasis, not categorical — a four-hue
   palette failed the normal-vision separation floor and would have spent the
   single accent four ways. */
.cg-t-accent { fill: var(--oxblood); }
.cg-t-ink    { fill: var(--ink); }
.cg-t-stone  { fill: var(--stone); }

.cg-bar, .cg-seg-fill { stroke: none; }
.cg-seg-hollow { fill: none; stroke: var(--border); stroke-width: 1; }
.cg-base { stroke: var(--border); stroke-width: 1; }

.cg-cat {
  font-family: var(--font-body);
  font-size: 14px;
  fill: var(--ink);
  text-anchor: end;
}
.cg-cat--sm { font-family: var(--font-mono); font-size: 11px; fill: var(--faint); }
.cg-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cg-val--sm { font-family: var(--font-mono); font-weight: 400; font-size: 11px; fill: var(--faint); }

.cg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.cg-legend-item { display: inline-flex; align-items: center; }
.cg-key {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 7px;
  vertical-align: -1px;
}
.cg-key--fill { background: var(--oxblood); }
.cg-key--fill.cg-t-ink { background: var(--ink); }
.cg-key--fill.cg-t-stone { background: var(--stone); }
.cg-key--hollow { border: 1px solid var(--border); }

/* Charts hold more horizontal information than prose, so they take the wide
   measure rather than the reading measure. */
.prose-section .chart-fig { max-width: var(--measure-wide); }

/* ── Touch targets ─────────────────────────────────────────────────────────
   Keyed on `pointer: coarse` rather than a width breakpoint: the constraint is
   the input device, not the screen. A 23px link is as hard to hit on a large
   tablet as on a phone.

   The footer is the case that made this matter. It carried 9 links when the
   height was set; the content cluster took it to 33, and 33 small targets
   stacked on a phone is a different object from 9. */
@media (pointer: coarse) {
  .ftr-col a,
  .ftr-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* The columns already stack; keep the rhythm rather than doubling the gaps. */
  .ftr-col { gap: 0; }
  .ftr-meta { row-gap: 0; }

  /* A real button, not a caption. It was 29px because its padding was written
     inline in the template. */
  button.cta-micro {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .term-more,
  .rel-item a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* A sentence, not a label. The mono micro-labels around it are deliberately
   10-11px and stay that way; running prose should not be. */
.modal-privacy { font-size: 12px; }