/* ==========================================================================
   gymdatapro.com — design system
   Full documentation lives in DESIGN_SYSTEM.md at the project root.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Light / warm base */
  --cream:        #0A0A0A;
  --cream-deep:   #131313;
  --cream-card:   #161616;
  --ink:          #F2F2F2;
  --ink-soft:     #C9C9C9;
  --muted:        #8F8F8F;
  --rule:         rgba(255,255,255,.12);

  /* Accent */
  --accent:       #00E5D6;
  --accent-deep:  #00B3A6;
  --accent-tint:  #0F2422;

  /* Dark / premium base */
  --plum-900:     #050505;
  --plum-800:     #1A1426;
  --plum-700:     #0D0D0D;
  --plum-600:     #322544;
  --dark-rule:    rgba(255,255,255,.10);
  --on-dark:      #F2F2F2;
  --on-dark-mute: #9A9A9A;

  /* Data signal colours (risk tiers, charts) */
  --risk-high:    #FF6B5B;
  --risk-med:     #F0B93C;
  --risk-low:     #4ECB87;
  --data-blue:    #6FA8E8;

  /* Type */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter,
                  Helvetica, Arial, sans-serif;

  --fs-display-xl: clamp(3.25rem, 8.2vw, 6.75rem);
  --fs-display-l:  clamp(2.5rem, 5.2vw, 4rem);
  --fs-h2:         clamp(2rem, 3.6vw, 3rem);
  --fs-h3:         clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-lead:       clamp(1.075rem, 1.5vw, 1.3rem);
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-micro:      0.75rem;

  /* Space scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radius + shadow */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(26,23,20,.04), 0 8px 24px rgba(26,23,20,.06);
  --shadow-lift: 0 2px 4px rgba(26,23,20,.05), 0 18px 44px rgba(26,23,20,.10);

  --maxw: 1200px;
  --maxw-prose: 68ch;
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0 0 var(--s-4); }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* --- 3. Layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
.section { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); }
.section--tight { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }
.prose { max-width: var(--maxw-prose); }
.grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); }
                             .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 939px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* --- 4. Type helpers ---------------------------------------------------- */
.display   { font-family: var(--font-display); font-size: var(--fs-display-xl); letter-spacing: -.02em; }
.display-l { font-family: var(--font-display); font-size: var(--fs-display-l); letter-spacing: -.015em; }
.h2        { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: -.01em; }
.h3        { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.lead      { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.5; }
.small     { font-size: var(--fs-small); }
.muted     { color: var(--muted); }
.accent    { color: var(--accent); }
.eyebrow {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; color: var(--accent); margin-bottom: var(--s-4);
}
.eyebrow--dark { color: var(--on-dark-mute); }
.sec-num {
  font-family: var(--font-display); font-size: var(--fs-small);
  color: var(--accent); letter-spacing: .1em;
}
.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }

/* --- 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-body); font-weight: 600; text-decoration: none;
  padding: 14px 26px; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: #E0E0E0; box-shadow: var(--shadow-lift); }
.btn--accent { background: var(--accent); color: #04201D; }
.btn--accent:hover { background: var(--accent-deep); box-shadow: var(--shadow-lift); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--on-dark { background: #F2F2F2; color: var(--plum-900); }
.btn--ghost-dark { background: transparent; color: var(--on-dark); border-color: var(--dark-rule); }
.btn--ghost-dark:hover { border-color: var(--on-dark); }
.btn--sm { padding: 10px 18px; font-size: var(--fs-small); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-arrow:hover { color: var(--accent); }

/* --- 6. Header ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--rule); }
.nav { display: flex; align-items: center; gap: var(--s-5); height: 72px; }
/* Brand lockup. The header uses the supplied PNG, which carries its own cream
   background (no transparent version exists), so the header behind it is kept
   flat and opaque. The footer sits on plum, where that cream block would read
   as a light box, so it uses a text lockup echoing the logo instead. */
.brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
}
.brand__img { height: 56px; width: auto; display: block; flex: 0 0 auto; }
.brand--text .brand__word {
  font-family: var(--font-sans); font-weight: 800;
  font-size: 1.0625rem; line-height: 1; letter-spacing: .06em;
  white-space: nowrap;
}
.brand--text .brand__accent { color: var(--accent); margin: 0 .18em; }
.nav__links { display: none; gap: var(--s-5); margin-left: var(--s-6); }
.nav__links a { text-decoration: none; font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
/* Below the nav breakpoint the header CTA is hidden — it already lives in the
   mobile menu, and keeping both puts the row over the width of a small phone. */
.nav__cta { display: none; margin-left: auto; align-items: center; gap: var(--s-3); }
.nav__toggle {
  margin-left: auto; background: none; border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 8px 14px; font: inherit; font-size: var(--fs-small);
  font-weight: 600; cursor: pointer; color: var(--ink);
}
.nav__mobile { display: none; padding: 0 0 var(--s-5); border-top: 1px solid var(--rule); }
.nav__mobile.is-open { display: block; }
.nav__mobile a {
  display: block; padding: var(--s-3) 0; text-decoration: none;
  border-bottom: 1px solid var(--rule); font-weight: 500;
}
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* --- 7. Hero ------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding-block: clamp(var(--s-7), 6vw, var(--s-9)) clamp(var(--s-8), 8vw, var(--s-10)); }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 30% 0%, rgba(0,229,214,.10), transparent 70%);
  pointer-events: none;
}
.hero__grid { display: grid; gap: var(--s-7); align-items: center; position: relative; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.02fr .98fr; gap: var(--s-8); } }
/* The hero headline is two full sentences; .display's xl scale is tuned for
   short lines, so it is resized here (index-only) rather than globally. */
.hero h1 {
  margin-bottom: var(--s-5);
  font-size: clamp(2.75rem, 4.59vw, 3.9375rem);
  line-height: 1.15;
  text-wrap: balance;
  max-width: 30ch;
}
.hero h1 em {
  font-style: normal; color: var(--accent);
  display: block; font-size: .9em; line-height: 1.2; margin-top: var(--s-3);
  text-wrap: balance;
}
.hero__lead { max-width: 46ch; margin-bottom: var(--s-6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center;
  padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); }
.hero__trust strong { color: var(--ink); font-weight: 600; }
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--accent-tint); color: var(--accent-deep);
  border-radius: var(--r-sm); padding: 6px 14px; font-size: var(--fs-small);
  font-weight: 600; margin-bottom: var(--s-5);
}

/* --- 8. Annotated report mockup (hero visual) --------------------------- */
.mock { position: relative; }
.mock__paper {
  background: var(--cream-card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); padding: var(--s-6) var(--s-5); overflow: hidden;
}
.mock__head { display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-5); }
.mock__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.mock__row { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; }
.mock__row + .mock__row { border-top: 1px dashed var(--rule); }
.mock__name { flex: 1; font-size: var(--fs-small); font-weight: 500; }
.mock__bar { width: 92px; height: 6px; border-radius: 3px; background: var(--cream-deep); overflow: hidden; }
.mock__bar > i { display: block; height: 100%; border-radius: 3px; }
.mock__tier { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; width: 52px; text-align: right; }
.mock__block { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-md); background: var(--cream-deep); }
.mock__kicker { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.mock__stat { font-family: var(--font-display); font-size: 2.25rem; color: var(--accent); line-height: 1; }

/* Callout annotations (Spur.fit-style leader lines).
   Above 1200px the mockup reserves a right-hand gutter so every label sits
   outside the paper. Below that the labels are hidden rather than reflowed —
   a leader line pointing at the wrong thing is worse than no leader line. */
.callout { position: absolute; display: flex; align-items: center; gap: 8px; z-index: 3; }
.callout__dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,229,214,.18); flex: 0 0 auto;
}
.callout__line { width: 30px; height: 1px; background: var(--ink-soft); opacity: .4; flex: 0 0 auto; }
.callout__label {
  font-size: var(--fs-micro); font-weight: 700; line-height: 1.3; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap;
}
.callout--a { top: 30%; }
.callout--b { top: 60%; }
.callout--c { top: 84%; }
@media (min-width: 1200px) {
  .mock__paper { margin-right: 132px; }
  .glass-card  { right: 108px; }
  .callout     { left: calc(100% - 132px); }
}
@media (max-width: 1199px) { .callout { display: none; } }

/* Glass stat card floating over the mockup */
.glass-card {
  position: absolute; right: -14px; top: -26px; z-index: 4;
  background: color-mix(in srgb, var(--cream-card) 78%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-lift);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5); min-width: 190px;
}
.glass-card__kicker { font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.glass-card__num { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.05; }
.glass-card__label { font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 700px) { .glass-card { position: static; margin-bottom: var(--s-4); min-width: 0; } }

/* --- 9. Stat band ------------------------------------------------------- */
.statband { border-block: 1px solid var(--rule); background: var(--cream-deep); }
.statband__grid { display: grid; gap: var(--s-6); padding-block: var(--s-7); }
@media (min-width: 700px) { .statband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .statband__grid { grid-template-columns: repeat(4, 1fr); } }
.stat__num {
  font-family: var(--font-display); font-size: clamp(2.75rem, 4.4vw, 3.75rem);
  color: var(--accent); line-height: 1; margin-bottom: var(--s-2);
}
.stat__label { font-size: var(--fs-small); font-weight: 600; margin-bottom: 2px; }
.stat__note { font-size: var(--fs-small); color: var(--muted); }

/* --- 10. Cards ---------------------------------------------------------- */
.card {
  background: var(--cream-card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card__num { font-family: var(--font-display); font-size: 1.125rem; color: var(--accent); margin-bottom: var(--s-3); display: block; }
.card h3 { margin-bottom: var(--s-3); }
.card p:last-child { margin-bottom: 0; }
.card--flat:hover { transform: none; box-shadow: var(--shadow-card); }
.card--tint { background: var(--accent-tint); border-color: #1F3B38; }

.ticks li { position: relative; padding-left: 26px; margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --- 11. Dark section --------------------------------------------------- */
.dark {
  background: var(--plum-900); color: var(--on-dark); position: relative; overflow: hidden;
}
.dark::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(0,229,214,.38), transparent 68%),
    radial-gradient(40% 40% at 88% 90%, rgba(0,229,214,.20), transparent 70%);
  pointer-events: none;
}
.dark .wrap { position: relative; z-index: 1; }
.dark .lead { color: var(--on-dark-mute); }
.dark .muted { color: var(--on-dark-mute); }
.dark .rule { border-top-color: var(--dark-rule); }
.dcard {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--dark-rule); border-radius: var(--r-lg); padding: var(--s-5);
  backdrop-filter: blur(2px);
}
.dcard h3 { margin-bottom: var(--s-4); font-size: 1.0625rem; }
.dcard__foot { font-size: var(--fs-small); color: var(--on-dark-mute); margin: var(--s-4) 0 0; }
.dcard__num { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; }

/* mini bar chart inside dark cards */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; margin-bottom: var(--s-3); }
.bars > i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--data-blue), rgba(111,168,232,.35)); }
.donut { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.donut__ring { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; }
.tierrow { display: flex; align-items: center; gap: var(--s-3); padding: 9px 0; font-size: var(--fs-small); }
.tierrow + .tierrow { border-top: 1px solid var(--dark-rule); }
.tierrow__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tierrow__name { flex: 1; }
.tierrow__val { font-weight: 700; }
.pricerow { display: flex; justify-content: space-between; gap: var(--s-3); padding: 8px 0; font-size: var(--fs-small); }
.pricerow + .pricerow { border-top: 1px solid var(--dark-rule); }
.pricerow--own { color: var(--on-dark); font-weight: 700; }
.pricerow--own .pricerow__label::before { content: "▸ "; color: var(--accent); }
.pricerow:not(.pricerow--own) { color: var(--on-dark-mute); }

/* --- 12. Steps ---------------------------------------------------------- */
.step { display: grid; gap: var(--s-4); padding-block: var(--s-6); border-top: 1px solid var(--rule); }
@media (min-width: 800px) { .step { grid-template-columns: 90px 1fr 1fr; gap: var(--s-6); align-items: start; } }
.step__n { font-family: var(--font-display); font-size: 2.5rem; color: var(--accent); line-height: 1; }
.step p:last-child { margin-bottom: 0; }

/* --- 13. Quote ---------------------------------------------------------- */
.quote {
  border-left: 2px solid var(--accent); padding-left: var(--s-5);
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.3; color: var(--accent-deep); font-style: italic;
}
.quote cite { display: block; margin-top: var(--s-3); font: 500 var(--fs-small)/1.5 var(--font-sans); color: var(--muted); font-style: normal; }

/* --- 14. Tables --------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { min-width: 460px; font-size: var(--fs-small); }
.tbl th {
  text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 600; padding: 0 var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule);
}
.tbl td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl td:last-child, .tbl th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.tbl tr.is-own { background: var(--accent-tint); }
.tbl tr.is-own td { color: var(--accent-deep); font-weight: 700; }
.tbl tr.is-own td:first-child { padding-left: var(--s-3); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tbl tr.is-own td:last-child { padding-right: var(--s-3); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* --- 15. SWOT ----------------------------------------------------------- */
.swot { display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .swot { grid-template-columns: repeat(2, 1fr); } }
.swot__box { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); background: var(--cream-card); }
.swot__box h3 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em; margin-bottom: var(--s-4); }
.swot__box ol { margin: 0; padding-left: 1.1em; font-size: var(--fs-small); color: var(--ink-soft); }
.swot__box li { margin-bottom: var(--s-3); }
.swot__box li:last-child { margin-bottom: 0; }
.swot--s h3 { color: var(--risk-low); } .swot--w h3 { color: var(--risk-high); }
.swot--o h3 { color: var(--data-blue); } .swot--t h3 { color: var(--risk-med); }

/* --- 16. Pricing -------------------------------------------------------- */
.plan { display: flex; flex-direction: column; height: 100%; }
.plan__price { font-family: var(--font-display); font-size: 3rem; line-height: 1; margin: var(--s-4) 0 var(--s-2); }
.plan__price span { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--muted); font-weight: 500; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan ul { margin-block: var(--s-5); }
.plan--feature { background: var(--plum-900); color: var(--on-dark); border-color: var(--plum-700); }
.plan--feature .muted, .plan--feature .plan__price span { color: var(--on-dark-mute); }
.plan--feature .ticks li { color: var(--on-dark-mute); }
/* Supporting pieces on a plan card: the one-line lede under the price, the
   highlighted argument box, and the small scope clause under the features. */
.plan__lede { margin-bottom: var(--s-2); }
.plan__callout {
  border: 1px solid var(--dark-rule); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); background: rgba(255,255,255,.05);
  padding: var(--s-4); margin: 0 0 var(--s-4);
  font-size: var(--fs-small); line-height: 1.5;
}
.plan__scope { font-size: var(--fs-micro); line-height: 1.5; margin: 0 0 var(--s-5); }
.plan--feature .plan__callout { color: var(--on-dark); }
.plan--feature .plan__scope { color: var(--on-dark-mute); }
.tag {
  display: inline-block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--accent); color: #04201D;
}

/* --- 16b. Two-path choice ----------------------------------------------- */
.paths { display: grid; gap: var(--s-5); align-items: stretch; }
@media (min-width: 900px) { .paths { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.path { display: flex; flex-direction: column; height: 100%; }
.path > form, .path > .path__foot { margin-top: auto; }
.path__meta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; color: var(--muted); margin-bottom: var(--s-3);
}
.path--feature {
  background: var(--plum-900); color: var(--on-dark); border-color: var(--plum-700);
}
.path--feature .muted, .path--feature .path__meta { color: var(--on-dark-mute); }
.path--feature .ticks li { color: var(--on-dark-mute); }
.path--feature .ticks li::before { border-color: var(--accent); }
.path .btn { justify-content: center; }
/* .path is a flex column, so inline children would otherwise stretch. */
.path > .tag, .path > .path__meta { align-self: flex-start; }

/* --- 16c. Capacity-gap calculator --------------------------------------- */
.calc { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) { .calc { grid-template-columns: 1.05fr .95fr; gap: var(--s-6); } }
.calc > * { min-width: 0; }

.slider + .slider { margin-top: var(--s-6); }
.slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: 2px; }
.slider__label { font-size: var(--fs-small); font-weight: 600; }
.slider__val {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.slider__ends {
  display: flex; justify-content: space-between;
  font-size: var(--fs-micro); color: var(--muted); margin-top: -3px;
  font-variant-numeric: tabular-nums;
}

/* Range input, fully restyled. The filled portion is driven by --pct, which
   the script updates on input. */
/* The element is 28px tall so it is easy to grab on touch, but the track is
   painted as a 6px band down the middle. */
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 28px; margin: 0; padding: 0;
  border: 0; cursor: pointer; outline: none;
  background-color: transparent;
  background-image: linear-gradient(to right,
    var(--accent) 0 var(--pct, 50%), var(--cream-deep) var(--pct, 50%) 100%);
  background-size: 100% 6px; background-position: center; background-repeat: no-repeat;
  border-radius: 3px;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream-card); border: 2px solid var(--accent);
  box-shadow: var(--shadow-card); cursor: grab;
  transition: transform .15s ease;
}
.slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream-card); border: 2px solid var(--accent);
  box-shadow: var(--shadow-card); cursor: grab;
}
.slider input[type="range"]::-moz-range-track { height: 28px; border-radius: 3px; background: transparent; }
.slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* The output panel uses the site's dark card language, so it needs the plum
   ground under it. Its section sits on cream, unlike other .dcard uses. */
.calcout {
  position: sticky; top: 96px;
  background: var(--plum-900); border-color: var(--plum-700);
  padding: var(--s-6); color: var(--on-dark);
}
@media (max-width: 899px) { .calcout { position: static; } }
.calcout__kicker { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--on-dark-mute); margin: 0 0 var(--s-3); }
.calcout__big {
  font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1; color: var(--accent); margin: 0;
  font-variant-numeric: tabular-nums;
}
.calcout__sub { font-size: var(--fs-small); color: var(--on-dark-mute); margin: var(--s-2) 0 0; }
.calcout__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-4) 0; margin-top: var(--s-5); border-top: 1px solid var(--dark-rule);
  font-size: var(--fs-small); color: var(--on-dark-mute);
}
.calcout__row + .calcout__row { margin-top: 0; }
.calcout__row strong {
  font-family: var(--font-display); font-weight: 400; font-size: 1.5rem;
  color: var(--on-dark); font-variant-numeric: tabular-nums;
}
.calcout__bench {
  border-top: 1px solid var(--dark-rule); padding-top: var(--s-4);
  font-size: var(--fs-small); color: var(--on-dark-mute); margin: 0;
}
.calcout__bench b { color: var(--on-dark); font-weight: 600; }
.calc__note { font-size: var(--fs-small); color: var(--muted); margin: var(--s-5) 0 0; }

/* --- 17. Form ----------------------------------------------------------- */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--cream-card); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 12px 14px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(0,229,214,.14); }
.form-note { font-size: var(--fs-small); color: var(--muted); }

/* --- 18. FAQ ------------------------------------------------------------ */
.faq details { border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--ink-soft); max-width: var(--maxw-prose); }

/* --- 19. Footer --------------------------------------------------------- */
.site-footer { background: var(--plum-900); color: var(--on-dark-mute); padding-block: var(--s-8) var(--s-6); }
.site-footer a { color: var(--on-dark-mute); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); }
.footer__grid { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__grid h4 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--on-dark); margin-bottom: var(--s-4); }
.footer__grid li { margin-bottom: var(--s-2); font-size: var(--fs-small); }
.footer__bar { border-top: 1px solid var(--dark-rule); padding-top: var(--s-5); font-size: var(--fs-small);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; }
.site-footer .brand { color: var(--on-dark); margin-bottom: var(--s-4); }
.site-footer .brand--text .brand__accent { color: #4DEEDF; }

/* --- 20. Page hero (interior pages) ------------------------------------- */
.pagehero { padding-block: clamp(var(--s-7), 6vw, var(--s-9)) var(--s-7); border-bottom: 1px solid var(--rule); }
.pagehero h1 { margin-bottom: var(--s-4); }

/* Two-column page hero: heading on the left, a supporting panel on the right.
   Used where the left column alone would leave half the fold empty. */
.pagehero__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) {
  .pagehero__grid { grid-template-columns: 1.12fr .88fr; gap: var(--s-8); align-items: center; }
}

/* "At a glance" panel — puts the prices themselves above the fold, so the
   pricing page answers its own question before anyone scrolls. */
.glance {
  background: var(--cream-card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-card);
}
.glance__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) 0; text-decoration: none;
  border-top: 1px solid var(--rule);
}
.glance__row:first-of-type { border-top: 0; padding-top: var(--s-2); }
.glance__name { font-size: var(--fs-small); font-weight: 600; }
.glance__note { display: block; font-size: var(--fs-micro); color: var(--muted); font-weight: 400; margin-top: 2px; }
.glance__val {
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1;
  color: var(--accent); white-space: nowrap;
}
.glance__val span { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--muted); font-weight: 500; }
.glance__row:hover .glance__name { color: var(--accent); }
.glance__foot { margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); }

/* Section that follows a page hero directly — the hero's own bottom padding
   is already doing the work, so don't stack a second full gap on top of it. */
.section--flush { padding-top: clamp(var(--s-6), 4vw, var(--s-7)); }

/* Two-column section intro: heading left, supporting lead right. Stops a
   58ch intro block from leaving the right half of the section empty. */
.sechead { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
@media (min-width: 900px) {
  .sechead { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: end; }
  .sechead > :last-child { margin-bottom: 0; }
  .sechead .lead { margin-bottom: 0; }
}

/* Report body. A left rail carries the section number and its headline stat,
   with the prose beside it, so the figures stay scannable down the left edge
   and the column no longer hugs one side of the page. */
.rsec { display: grid; gap: var(--s-5); padding-block: var(--s-7); }
/* Grid items default to min-width:auto, which lets a wide child (the pricing
   table's 460px min-width) stretch the track past the viewport. Pin to 0 so
   the table scrolls inside .table-scroll instead of widening the page. */
.rsec > *, .sechead > *, .problem > *, .pagehero__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .rsec { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); }
}
.rsec + .rsec { border-top: 1px solid var(--rule); }
.rsec__rail { align-self: start; }
.rsec__stat {
  font-family: var(--font-display); font-size: clamp(2.75rem, 4.4vw, 4rem);
  color: var(--accent); line-height: 1; margin: var(--s-3) 0 0;
}
.rsec__stat--sm { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.15; }
.rsec__body { max-width: none; }
.rsec__body > :last-child { margin-bottom: 0; }
.rsec__body h2 { margin-bottom: var(--s-5); }

/* Compact contents list for the sample report's hero panel. */
.toc { display: grid; gap: 2px 18px; margin: var(--s-3) 0 0; }
@media (min-width: 520px) { .toc { grid-template-columns: 1fr 1fr; } }
.toc a {
  display: flex; gap: 8px; font-size: var(--fs-small); text-decoration: none;
  color: var(--ink-soft); padding: 5px 0; line-height: 1.35;
}
.toc a:hover { color: var(--accent); }
.toc .n { font-family: var(--font-display); color: var(--accent); flex: 0 0 auto; }

/* Problem / guide band. The visitor's problem sits on the left in display type,
   our answer to it on the right, so "you" and "we" read as two halves of one
   thought rather than two stacked sections. */
.problem { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .problem { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); align-items: center; }
}
.problem__line {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.25; letter-spacing: -.01em; margin-bottom: var(--s-4);
}

/* Paired outcome lines: what growth looks like, and what standing still costs.
   Colour carries the difference, the wording stays level. */
.outcome { border-left: 2px solid var(--risk-low); padding-left: var(--s-4); margin-bottom: var(--s-4); }
.outcome__label {
  display: block; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 600; color: var(--risk-low); margin-bottom: 4px;
}
.outcome p { margin: 0; font-size: var(--fs-body); color: var(--ink-soft); }
.outcome--risk { border-left-color: var(--accent); }
.outcome--risk .outcome__label { color: var(--accent); }
.outcome--risk p { color: var(--muted); }

/* Small numbered flow, used in the how-it-works hero panel. */
.flow__row { display: flex; gap: var(--s-4); padding: var(--s-3) 0; align-items: baseline; }
.flow__row + .flow__row { border-top: 1px solid var(--rule); }
.flow__n { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); line-height: 1; flex: 0 0 32px; }
.flow__t { font-size: var(--fs-small); font-weight: 600; }
.flow__d { display: block; font-size: var(--fs-micro); color: var(--muted); font-weight: 400; margin-top: 2px; }

/* --- 21. Scroll reveal (respects prefers-reduced-motion) ---------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal-d1.is-in { transition-delay: .07s; }
.reveal-d2.is-in { transition-delay: .14s; }
.reveal-d3.is-in { transition-delay: .21s; }
.parallax { will-change: transform; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--cream);
  padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .parallax { transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .site-header, .site-footer, .hero__ctas { display: none; }
  body { background: #fff; }
}