/* =========================================================================
   RunPaceData — styles.css
   Single stylesheet, design-token driven. Light, high-contrast theme —
   the same "instrument panel" structure and lime-green accent as the dark
   theme this replaced, recolored for outdoor legibility. Running tools get
   used on a phone in direct sunlight; light-on-dark text has real, measured
   glare/legibility problems out there that a desk-bound trading-tool
   aesthetic never has to solve for. See the "Session 5" note in the project
   handoff doc for the full reasoning and the contrast math behind every
   color below.

   GOTCHAS (carried from CMPC build — do not "fix" these away):
   - A relative url() inside a CSS custom property resolves against THIS
     file's location (/css/), not the page's location. Any --icon-* var
     pointing at an image must be written relative to /css/.
   - Grid children need min-width: 0 on the grid container or wide tables /
     preformatted content force horizontal overflow on mobile.
   - Tool pages use `.tool-app` (viewport-fit) instead of the old
     `.tool-hero` + separate `.section` pairing, so the calculator itself
     fits in one screen on load — see "Tool app" section below. Content
     BELOW the tool (how-to, related tools, CTA) is normal scrollable
     `.section`s; only the tool itself is guaranteed above-the-fold.
   - `.calc-widget`/`.calc-row`/`.field` etc. are deliberately dense
     (8-10px input padding, 13-15px type) — an exact-copy port of the
     original pre-redesign site's sizing so the calculator fits a real
     browser window without scrolling. Don't "improve" this back toward
     generous rem/clamp spacing; see the styles-history note in the
     project doc for why that regressed.
   - TWO GREENS, ON PURPOSE: `--color-primary` (a darker, ~#158-range
     green) is for TEXT/icons/borders on light backgrounds — it's the one
     that's readably accessible at small sizes. `--color-primary-fill` is
     the vivid neon brand green — it's for FILLED elements only (buttons,
     active-toggle backgrounds) where a dark contrast color sits ON TOP of
     it, never for text or a thin border sitting directly on a light
     surface (measured contrast for the neon against white is ~1.7:1 —
     it disappears as a border/text color). Grep for one before assuming
     you can substitute the other.
   ========================================================================= */

/* ---------------------------------- Tokens ------------------------------ */
:root {
  /* Light, bright base — near-white rather than pure white so large flat
     areas have a hint of depth, with a faint cool-neutral (not warm/cream)
     tint to stay technical rather than "paper." Brightness itself is part
     of the outdoor-legibility fix: a bright page fights screen glare in a
     way a dark page structurally can't. */
  --color-bg: #f7f8f7;
  --color-bg-raised: #f1f3f1;
  --color-surface: #ffffff;
  --color-surface-2: #eef1ee;
  --color-surface-sunken: #e7eae7;
  --color-border: rgba(10, 20, 14, 0.10);
  --color-border-strong: rgba(10, 20, 14, 0.18);

  --color-ink: #0e1210;
  --color-ink-soft: #4b5156;
  --color-ink-faint: #5b6268;

  /* Brand green, split into two roles (see file header). Both are the same
     hue family as the original neon (~140°) so the brand doesn't shift,
     just the role each shade plays. */
  --color-primary: #15803d;          /* text / icons / borders — 5:1 on white */
  --color-primary-bright: #22c55e;   /* deeper hover shade for filled elements */
  --color-primary-dim: #0f6b32;
  --color-primary-fill: #2fe66d;     /* vivid neon — FILL only, pairs with --color-primary-contrast */
  --color-primary-light: rgba(47, 230, 109, 0.14);
  --color-primary-border: rgba(21, 128, 61, 0.35);
  --color-primary-contrast: #06180c;
  --color-primary-glow: rgba(21, 128, 61, 0.16);

  /* Gold stays reserved EXCLUSIVELY for anything that leads to CM
     Performance Coaching, so the color itself becomes a learned signal:
     "this path goes to coaching." Same two-role split as green:
     --color-coach is FILL-only (too low-contrast as text on white),
     --color-coach-dark is the text-safe shade. */
  --color-coach: #e8b03f;
  --color-coach-dark: #8a641c;
  --color-coach-light: rgba(232, 176, 63, 0.14);
  --color-coach-contrast: #241a06;
  --color-coach-glow: rgba(196, 144, 42, 0.22);

  --color-danger: #dc2626;
  --color-focus: #2563eb;

  /* Heart-rate zone sequence — distinct, ordered, colorblind-checked hues,
     darkened from the dark-theme version so each still reads at >=3:1 as
     a border accent against a white row. */
  --zone-1: #2563eb;
  --zone-2: #059669;
  --zone-3: #b45309;
  --zone-4: #ea580c;
  --zone-5: #dc2626;

  --font-ui: -apple-system, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* every number on the site — calculator results, tables, stat tiles —
     renders in this face, so "data" has one consistent, technical voice
     distinct from prose. */
  --font-data: "IBM Plex Mono", "SF Mono", "Consolas", monospace;
  /* Headlines get a distinct display face — geometric, slightly technical —
     so the brand doesn't read as "Inter everywhere," which is the fastest
     tell of a templated site. Body copy and UI chrome stay on Inter for
     readability at small sizes. */
  --font-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Soft, neutral, low-opacity — light-mode elevation should read as a
     gentle lift off the page, not the moody high-contrast shadows a dark
     theme can get away with. A dark-tinted-green rather than pure black
     keeps it from feeling cold. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 20, 0.06), 0 1px 1px rgba(16, 24, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 24, 20, 0.08), 0 2px 8px rgba(16, 24, 20, 0.06);
  --shadow-lg: 0 20px 48px rgba(16, 24, 20, 0.12);

  --header-height: 52px;
  --content-max: 1180px;
  --content-narrow: 760px;

  --transition-fast: 140ms ease;
  --transition-base: 220ms ease;
}

/* ------------------------------ Google Fonts ----------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");

/* -------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-display); }
p { margin: 0 0 var(--space-4); color: var(--color-ink-soft); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; color: var(--color-ink-soft); }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-primary-fill); color: var(--color-primary-contrast); }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--content-narrow); }

.visually-hidden, .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;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -60px;
  background: var(--color-primary-fill); color: var(--color-primary-contrast); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); z-index: 200; transition: top var(--transition-fast);
  font-weight: 700;
}
.skip-link:focus { top: var(--space-4); }

/* -------------------------------- Buttons -------------------------------- */
/* Rectangular-rounded rather than a full pill — a capsule button is the
   single fastest visual tell of a generic SaaS template; a technical/data
   product reads more credibly with a tighter, more "instrument panel"
   corner radius. Primary buttons use the vivid neon fill (dark text on
   top clears 11:1 — verified) with a crisp elevation shadow rather than
   the ambient color "glow" the dark theme used; a diffuse colored halo
   reads as a smudge on a white page, not a glow. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.75em 1.4em;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: var(--font-display);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-primary-fill); color: var(--color-primary-contrast);
  box-shadow: 0 1px 2px rgba(16,24,20,0.08), 0 4px 14px var(--color-primary-glow);
}
.btn--primary:hover { background: var(--color-primary-bright); box-shadow: 0 1px 2px rgba(16,24,20,0.08), 0 6px 18px var(--color-primary-glow); }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }

.btn--coach { background: var(--color-coach); color: var(--color-coach-contrast); box-shadow: 0 1px 2px rgba(16,24,20,0.08), 0 4px 14px var(--color-coach-glow); }
.btn--coach:hover { background: #f0bd57; box-shadow: 0 1px 2px rgba(16,24,20,0.08), 0 6px 18px var(--color-coach-glow); }

/* Reserved for controls sitting on the one deliberately-dark surface left
   on the site — the footer. Everywhere else is light now. */
.btn--on-dark { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.28); }
.btn--on-dark:hover { background: rgba(255,255,255,0.16); }

.btn--sm { padding: 0.5em 1.1em; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* -------------------------------- Header --------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.logo {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-data); font-weight: 800; font-size: var(--fs-md);
  color: var(--color-ink);
}
.logo__mark { color: var(--color-primary); }
.logo__data { color: var(--color-ink-soft); font-weight: 600; }

.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav__links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
/* Scoped to direct top-level links, excluding .btn, so the "Get Coaching"
   pill button (a .btn living in the same list) never inherits nav-link
   underline/padding rules regardless of cascade order. */
.nav__links > li > a:not(.btn) {
  font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink-soft);
  padding: var(--space-2) 0; border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav__links > li > a:not(.btn):hover,
.nav__links > li > a:not(.btn)[aria-current="page"] { color: var(--color-ink); border-color: var(--color-primary); }

.nav__toggle {
  display: none; background: transparent; border: none; padding: var(--space-2);
  cursor: pointer; color: var(--color-ink);
}
.nav__toggle svg { width: 26px; height: 26px; }

/* Calculators dropdown — native <details>, no JS required to function,
   a small enhancement in main.js closes it on outside click / link click. */
.nav__dropdown { position: relative; }
.nav__dropdown > details > summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink-soft);
  list-style: none; padding: var(--space-2) 0; display: flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent; user-select: none;
}
.nav__dropdown > details > summary::-webkit-details-marker { display: none; }
.nav__dropdown > details > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--transition-fast); margin-top: -4px;
}
.nav__dropdown > details[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.nav__dropdown > details[open] > summary { color: var(--color-ink); border-color: var(--color-primary); }
.nav__dropdown-menu { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: grid; gap: 2px; }
@media (min-width: 901px) {
  .nav__dropdown-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); min-width: 230px; z-index: 50; padding: var(--space-2);
  }
  .nav__dropdown-menu a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; display: block; color: var(--color-ink-soft); }
  .nav__dropdown-menu a:hover { background: var(--color-primary-light); color: var(--color-primary); }
}
@media (max-width: 900px) {
  .nav__dropdown-menu { padding-left: var(--space-4); }
  .nav__dropdown-menu a { padding: var(--space-2) 0; display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-soft); }
}

@media (max-width: 900px) {
  .nav__links {
    position: fixed; inset: var(--header-height) 0 auto 0;
    background: var(--color-surface);
    flex-direction: column; align-items: stretch; gap: 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
    padding: var(--space-2) var(--space-5) var(--space-4);
  }
  .nav__links.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav__links > li > a:not(.btn) { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* --------------------------------- Hero ---------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-7);
  background:
    radial-gradient(900px 460px at 14% -12%, rgba(47, 230, 109, 0.10), transparent 60%),
    radial-gradient(700px 420px at 96% 8%, rgba(37, 99, 235, 0.06), transparent 55%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
/* Faint instrument-panel grid + decorative route/elevation-line texture —
   the "control room" backdrop, and the one visual cue that says "running
   data" rather than "generic SaaS gradient blob." Purely atmospheric. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10, 20, 14, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 20, 14, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(90% 70% at 30% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(90% 70% at 30% 0%, #000 40%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.hero__texture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); align-items: center; min-width: 0; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-display);
  color: var(--color-primary); background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.hero h1 { font-size: var(--fs-3xl); max-width: 17ch; font-weight: 800; color: var(--color-ink); }
.hero__lede { font-size: var(--fs-md); max-width: 44ch; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.hero__meta { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.hero__meta-item {
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink); display: flex; align-items: center; gap: var(--space-3);
}
.hero__meta-item .icon-chip { width: 26px; height: 26px; flex-shrink: 0; }
.hero__meta-item .icon-chip svg { width: 13px; height: 13px; }

/* Small square icon-chip badge used for checklist bullets — a soft
   pale-green tile with the darker text-safe green icon on top. */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: var(--color-primary-light); color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
}
.icon-chip svg { width: 12px; height: 12px; }

.hero__panel {
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-sunken));
  color: var(--color-ink);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.hero__panel::after {
  content: ""; position: absolute; inset: auto -30% -40% auto; width: 240px; height: 240px;
  background: var(--color-primary-fill); opacity: 0.14; border-radius: 50%; filter: blur(30px);
}
.hero__panel h2 { font-size: var(--fs-md); color: var(--color-ink); }
.hero__panel p { color: var(--color-ink-soft); font-size: var(--fs-sm); }
.hero__panel-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); position: relative; }
.hero__panel-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--color-ink); }
.hero__panel-list svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--fs-2xl); max-width: none; }
}

/* ---------------------------- Quick Check widget -------------------------- */
/* A genuinely live, genuinely tiny calculator embedded in the hero — real
   math via RPD, not a decorative mockup — so the homepage demonstrates the
   product instead of just describing it. Deliberately scoped to one input
   (5K time -> pace) so it never competes with the full Pace Calculator's
   H1/keyword; it exists to create a "the numbers actually update" moment. */
.quick-check__label {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  color: var(--color-ink); margin-bottom: var(--space-1); display: flex; align-items: center; gap: var(--space-2);
}
.quick-check__label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-fill);
  box-shadow: 0 0 0 4px var(--color-primary-light);
  animation: rpd-pulse 1.8s ease-in-out infinite;
}
@keyframes rpd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.quick-check__hint { color: var(--color-ink-soft); font-size: var(--fs-xs); margin-bottom: var(--space-4); }
.quick-check__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.quick-check__input-group {
  display: flex; align-items: center; gap: 6px;
  background: var(--color-surface-2); border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.quick-check__input-group input {
  width: 2.6em; border: none; background: transparent; color: var(--color-ink);
  font-family: var(--font-ui); font-size: var(--fs-lg); font-weight: 600;
  text-align: center; font-variant-numeric: tabular-nums;
}
.quick-check__input-group input::-webkit-outer-spin-button,
.quick-check__input-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quick-check__input-group span { color: var(--color-ink-faint); font-size: var(--fs-lg); font-weight: 600; }
.quick-check__arrow { color: var(--color-primary); flex-shrink: 0; }
.quick-check__result {
  font-family: var(--font-ui); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--color-primary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.quick-check__result-unit { font-size: var(--fs-sm); color: var(--color-ink-faint); font-weight: 500; margin-left: 4px; }
.quick-check__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-5);
  font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary);
}
.quick-check__cta svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.quick-check__cta:hover svg { transform: translateX(3px); }

/* ------------------------------ Tool card accents -------------------------- */
/* Each tool gets a distinct accent (set via inline --accent per card) so the
   grid isn't four identical boxes — color becomes a scan cue, and the
   icon chip picks up a pale tint of it. */
.tool-card {
  --accent: var(--color-primary);
  border-top: 3px solid var(--accent);
}
.tool-card .tool-card__icon {
  background: color-mix(in srgb, var(--accent) 12%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-md);
}
.tool-card .tool-card__link { color: var(--accent); }
.tool-card--soon { border-top-color: var(--color-border-strong); }

/* --------------------------------- Formula band ---------------------------- */
.section--dark { background: var(--color-bg-raised); color: var(--color-ink-soft); position: relative; overflow: hidden; }
.section--dark h2 { color: var(--color-ink); }
.section--dark .section__head p { color: var(--color-ink-soft); }
.section--dark .eyebrow { color: var(--color-primary); }
.formula-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); min-width: 0; }
.formula-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.formula-card:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-md); }
.formula-card h3 { color: var(--color-ink); font-size: var(--fs-md); }
/* A deliberately dark "terminal" chip for the formula itself — the one
   place on an otherwise light page that stays dark on purpose, the same
   way a code block does in a light-mode editor. The bright neon reads
   perfectly here since it's TEXT on a dark chip, not on the page. */
.formula-card__expr {
  font-family: var(--font-data); font-size: var(--fs-md); font-weight: 600;
  color: var(--color-primary-fill); background: #10141a; border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; overflow-x: auto;
  white-space: nowrap;
}
.formula-card p { color: var(--color-ink-soft); font-size: var(--fs-sm); margin-bottom: 0; }
@media (max-width: 700px) { .formula-grid { grid-template-columns: 1fr; } }

/* ------------------------------- Sections -------------------------------- */
.section { padding: var(--space-8) 0; position: relative; }
.section--alt { background: var(--color-bg-raised); }
.section__head { max-width: 640px; margin: 0 auto var(--space-6); text-align: center; }
.section__head h2 { font-size: var(--fs-2xl); }
.section__head p { font-size: var(--fs-md); }
.eyebrow {
  display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2);
  font-family: var(--font-display);
  background: var(--color-primary-light); border: 1px solid var(--color-primary-border);
  padding: 0.3em 0.85em; border-radius: var(--radius-pill);
}

/* Thin glowing horizontal divider used between major sections — the
   "premium light beam" transition cue, purely decorative. */
.section-glow {
  height: 1px; position: relative; overflow: visible;
  background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
}
.section-glow::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, 70%); height: 120px;
  background: radial-gradient(closest-side, rgba(47, 230, 109, 0.12), transparent 75%);
  filter: blur(6px); pointer-events: none;
}

/* -------------------------------- Grids ---------------------------------- */
.grid { display: grid; gap: var(--space-5); min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* -------------------------------- Cards ---------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.tool-card { display: flex; flex-direction: column; gap: var(--space-3); }
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--color-border));
}
.tool-card__icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.tool-card__icon img, .tool-card__icon svg { width: 100%; height: 100%; }
.tool-hero__icon { width: 40px; height: 40px; flex-shrink: 0; }
.tool-hero__title { display: flex; align-items: center; gap: var(--space-3); }
.tool-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); color: var(--color-ink); }
.tool-card p { font-size: var(--fs-sm); margin-bottom: 0; flex: 1; }
.tool-card__link {
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary);
  display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2);
}
.tool-card__link svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.tool-card:hover .tool-card__link svg { transform: translateX(3px); }

.tool-card--soon { opacity: 0.6; }
.badge {
  display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700;
  padding: 0.25em 0.7em; border-radius: var(--radius-pill);
  background: var(--color-surface-2); color: var(--color-ink-soft);
  border: 1px solid var(--color-border);
  width: fit-content;
}
.badge--coach { background: var(--color-coach-light); color: var(--color-coach-dark); border-color: rgba(196,144,42,0.35); }

/* ------------------------------ Stat tiles -------------------------------- */
.stat-tile { text-align: center; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.stat-tile__value { font-family: var(--font-ui); font-size: var(--fs-2xl); font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.stat-tile__label { font-size: var(--fs-xs); color: var(--color-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* ------------------------------------ Tool app -----------------------------
   Compact BY DEFAULT — sized to match the original (pre-redesign) tool
   page's density, the same way CM Performance Coaching's calculators are
   built: a small hero, then a width-capped, tightly-padded widget. This is
   deliberately NOT a viewport-height-forced/centered section. That
   approach (min-height: 100dvh + justify-content: center) measured as
   "fits" under Playwright, whose `viewport` option is pure content area,
   but real Chrome loses tabs/bookmarks/URL-bar height that Playwright
   never simulates — so the same "fit" would push the Calculate/Reset
   buttons below the fold in an actual browser window. A small widget that
   is short in absolute terms fits real browser chrome by construction;
   no viewport math required. */
.tool-app {
  position: relative; overflow: hidden;
  padding: 0.5rem 0 1.25rem;
  background:
    radial-gradient(700px 360px at 12% -10%, rgba(47, 230, 109, 0.08), transparent 60%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.tool-app__head { margin-bottom: 0.5rem; }
.tool-app__head .eyebrow { padding: 0.2em 0.6em; margin-bottom: 4px; font-size: 0.7rem; }
.tool-app__head .tool-hero__title h1 {
  font-size: 1.25rem;
  margin-bottom: 0;
  color: var(--color-ink);
}
.tool-app__head .tool-hero__icon { width: 24px; height: 24px; }
/* The original compact tool page puts the calculator immediately below the
   title — no descriptive paragraph competing for the same above-the-fold
   space. The fuller explanation already lives in the "How to use" section
   below the tool, so this line is dropped rather than shrunk further. */
.tool-app__lede { display: none; }

/* Simple (non viewport-fit) page banner — used by content pages like About
   that have no calculator to keep above the fold. Tool pages use
   `.tool-app` above instead. */
.tool-hero {
  padding: var(--space-6) 0 var(--space-5); border-bottom: 1px solid var(--color-border);
  background: radial-gradient(700px 340px at 12% -10%, rgba(47, 230, 109, 0.07), transparent 60%), var(--color-bg);
}
.tool-hero h1 { color: var(--color-ink); }

.breadcrumb { list-style: none; display: flex; gap: var(--space-2); align-items: center; padding: 0; margin: 0 0 8px; font-size: var(--fs-xs); color: var(--color-ink-faint); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-ink-faint); font-weight: 600; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep { opacity: 0.5; }

.app-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(16, 24, 20, 0.08);
  padding: 20px;
  min-width: 0;
}

/* The tabbed pace-calculator widget is narrower and self-padded (tabs,
   panels, and actions each carry their own padding) — an exact-copy port
   of the original site's `.calc-widget`, just recolored. */
.calc-widget { max-width: 560px; margin: 0 auto; padding: 0; overflow: hidden; }

.tabs { display: flex; gap: var(--space-2); border-bottom: 2px solid var(--color-border); margin-bottom: clamp(0.75rem, 2.5vh, 1.5rem); flex-wrap: wrap; }
.tab {
  background: transparent; border: none; border-bottom: 3px solid transparent;
  padding: var(--space-3) var(--space-2); font-weight: 700; font-size: var(--fs-sm);
  color: var(--color-ink-soft); cursor: pointer; margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--color-ink); }
.tab[aria-selected="true"] { color: var(--color-primary); border-color: var(--color-primary); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Small, dense controls everywhere a tool page takes input — matches the
   original pre-redesign site's field sizing (10-12px padding, 13-15px
   type) instead of the generous rem/clamp-based spacing that made the
   redesigned widgets too tall to fit a real browser window. */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 13px; font-weight: 600; color: var(--color-ink-soft); }
.field input, .field select {
  font-family: var(--font-ui); font-size: 15px; font-variant-numeric: tabular-nums;
  padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-2); color: var(--color-ink);
}
.field input:focus, .field select:focus { border-color: var(--color-primary); }
/* flex children (inputs) default to min-width:auto, which is their
   intrinsic content width — without min-width:0 they refuse to shrink
   below that and force the row (and the page) to overflow on narrow
   viewports. flex-wrap is a safety net for 3+ children (H/M/S) on very
   narrow screens. */
.field-row { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.field-row input, .field-row select { min-width: 0; flex: 1 1 64px; }
.field-row .unit-toggle { flex-shrink: 0; }
.unit-toggle { display: inline-flex; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.unit-toggle button {
  border: none; background: transparent; padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; color: var(--color-ink-soft); cursor: pointer;
}
.unit-toggle button[aria-pressed="true"] { background: var(--color-primary-fill); color: var(--color-primary-contrast); }

.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  border: 1.5px solid var(--color-border-strong); background: var(--color-surface-2);
  border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; font-weight: 700;
  color: var(--color-ink-soft); cursor: pointer; transition: all var(--transition-fast);
}
.chip:hover, .chip[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }

/* ------------------------- Classic calc widget ------------------------- */
/* An exact-copy port of the original site's `.calc-widget` (max-width:560px,
   flat flex tabs on a distinct tab-bar band, grid-based 2-column rows,
   compact 28px result) — recolored into the light/green palette. This is
   the reference density every tool page now matches. */
.calc-tabs { display: flex; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.calc-tab {
  flex: 1; text-align: center; background: transparent; border: none;
  padding: 16px 12px; font-weight: 700; font-size: 14px;
  font-family: var(--font-display); color: var(--color-ink-soft); cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.calc-tab:hover { color: var(--color-ink); }
.calc-tab--active { background: var(--color-surface); color: var(--color-primary); }

.calc-panels { padding: 10px 14px; min-height: 230px; }
.calc-panel { display: none; }
.calc-panel--active { display: block; }

.calc-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; min-width: 0;
}
.calc-row--single { grid-template-columns: 1fr; }
.calc-row--center { display: flex; justify-content: center; }
.calc-row--center label { max-width: 240px; width: 100%; }
.calc-row label {
  display: grid; gap: 3px; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--color-ink-soft);
}
.calc-row input, .calc-row select {
  font-family: var(--font-ui); font-size: 15px; font-variant-numeric: tabular-nums;
  padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-2); color: var(--color-ink); min-width: 0; width: 100%;
}
.calc-row input:focus, .calc-row select:focus { border-color: var(--color-primary); }

/* The result's pale-mint tint reads slightly darker than pure white, so
   its text uses --color-primary (not the lighter/large-text-only
   --color-primary-bright) — verified at 4.5:1+ on this exact tint. */
.calc-result {
  margin: 8px 0; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(47,230,109,0.18), rgba(47,230,109,0.06));
  border: 1px solid var(--color-primary-border);
  border-radius: 12px; text-align: center;
}
.calc-result__label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 2px; }
.calc-result__value { font-family: var(--font-ui); font-size: 26px; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }

.calc-actions { display: flex; gap: 8px; padding: 2px 14px 12px; }
.calc-actions .btn { flex: 1; padding: 10px; font-size: 14px; border-radius: 8px; }
.calc-error { min-height: 1.1em; padding: 0 14px 10px; font-size: 13px; font-weight: 600; color: var(--color-danger); }

/* --------------------------------- Tables --------------------------------- */
/* A long split/zone table scrolls inside its own box past a sane cap
   instead of growing the page indefinitely — this is a fixed cap, not a
   viewport-height guess, so it behaves the same on every screen. */
.table-wrap {
  overflow-x: auto; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 10px; min-width: 0;
  max-height: 420px;
}
.data-table { min-width: 420px; }
.data-table thead th { position: sticky; top: 0; z-index: 1; }
.data-table th, .data-table td {
  padding: 10px 14px; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums;
}
.data-table th { background: var(--color-surface-2); font-weight: 700; color: var(--color-ink-soft); text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; }
.data-table td { color: var(--color-ink); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-surface-2); }

.zone-row td:first-child { border-left: 4px solid var(--zone-color, var(--color-primary)); }

/* -------------------------------- Content --------------------------------- */
.prose { max-width: var(--content-narrow); margin: 0 auto; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--space-6); color: var(--color-ink); }
.prose h3 { font-size: var(--fs-md); margin-top: var(--space-5); color: var(--color-ink); }
.prose strong { color: var(--color-ink); }
.faq { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  cursor: pointer; padding: var(--space-4) 0; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  color: var(--color-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 18px; height: 18px; color: var(--color-primary); transition: transform var(--transition-fast); flex-shrink: 0; }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p { padding-bottom: var(--space-4); }

/* ------------------------------- CTA / funnel ------------------------------ */
.cta-coach {
  background: linear-gradient(160deg, var(--color-surface), var(--color-coach-light));
  border: 1px solid rgba(196, 144, 42, 0.35);
  color: var(--color-ink); border-radius: var(--radius-lg); padding: var(--space-7);
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-6); align-items: center; min-width: 0;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cta-coach::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 320px; height: 320px;
  background: var(--color-coach); opacity: 0.14; border-radius: 50%; filter: blur(40px);
}
.cta-coach__eyebrow { color: var(--color-coach-dark); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); display: block; font-family: var(--font-display); }
.cta-coach h2, .cta-coach h3 { color: var(--color-ink); }
.cta-coach p { color: var(--color-ink-soft); margin-bottom: 0; }
.cta-coach__actions { display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
@media (max-width: 900px) { .cta-coach { grid-template-columns: 1fr; } }

.cta-band {
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); flex-wrap: wrap; background: var(--color-surface);
}
.cta-band strong { color: var(--color-ink); }

/* ------------------------------- Related tools ----------------------------- */
.related-tools { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.related-tools a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-weight: 700; font-size: var(--fs-sm); color: var(--color-ink);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.related-tools a:hover { border-color: var(--color-primary-border); background: var(--color-primary-light); }
.related-tools svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }

/* --------------------------------- Footer --------------------------------- */
/* The one deliberately-dark surface left on the site — footers are read
   for a few seconds, not glanced at mid-run in sunlight, and a dark footer
   under a light page is a long-standing, tasteful convention (Stripe,
   Linear, and plenty of others do the same) that keeps a visual echo of
   the brand's "premium instrument panel" feeling without fighting the
   outdoor-legibility goal the rest of the site is solving for. Colors
   here are literal, not tokens — the tokens above are all light-mode now. */
.site-footer { background: #12151a; color: rgba(255,255,255,0.6); padding: var(--space-8) 0 var(--space-6); margin-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer a { color: rgba(255,255,255,0.6); }
.site-footer a:hover { color: var(--color-primary-fill); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); min-width: 0; }
.footer-grid h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
.footer-brand p { color: rgba(255,255,255,0.45); font-size: var(--fs-sm); max-width: 32ch; }
.footer-bottom {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-xs);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------------------------------- Misc ----------------------------------- */
.disclosure { font-size: var(--fs-xs); color: var(--color-ink-faint); background: var(--color-surface-2); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
hr.rule { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

@media (max-width: 640px) {
  .section { padding: var(--space-7) 0; }
  .cta-coach { padding: var(--space-5); }
  .app-card { padding: 14px; }
}

/* Narrow phones: stack the 2-column calc/field rows to one column instead
   of squeezing two inputs into ~160px each. Width-based on purpose — this
   is a genuinely narrow-screen problem, not a short-window one, so it's a
   normal max-width query rather than the height-based hack this page used
   to rely on. */
@media (max-width: 420px) {
  .calc-tab { padding: 12px 8px; font-size: 13px; }
  .calc-row, .calc-row--distance { grid-template-columns: 1fr; }
}