.hero[data-astro-cid-ge2uvauf] {
  position: relative;
  z-index: 0;
  --hold-height: 210vh;
}

.hold[data-astro-cid-ge2uvauf] {
  height: var(--hold-height);
  view-timeline-name: --hero-hold;
}

.sticky[data-astro-cid-ge2uvauf] {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
}

.hero[data-astro-cid-ge2uvauf]:not(.hold) .sticky[data-astro-cid-ge2uvauf] {
  position: static;
}

.frame[data-astro-cid-ge2uvauf] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}

.frame[data-astro-cid-ge2uvauf] img[data-astro-cid-ge2uvauf] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale() contrast(1.24) brightness(.66);
  transform-origin: 58%;
  will-change: transform;
}

.scrim[data-astro-cid-ge2uvauf] {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #000000f0 0% 40%, #00000080 62%, #00000026 100%);
}

.deepen[data-astro-cid-ge2uvauf] {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  opacity: 0;
}

.content[data-astro-cid-ge2uvauf] {
  position: relative;
  width: 100%;
}

.hero--overlay[data-astro-cid-ge2uvauf] .sticky[data-astro-cid-ge2uvauf] {
  height: auto;
  min-height: clamp(540px, 74svh, 760px);
  align-items: flex-end;
  padding: 112px 0 clamp(36px, 6svh, 64px);
}

.hero--overlay[data-astro-cid-ge2uvauf] .frame[data-astro-cid-ge2uvauf] img[data-astro-cid-ge2uvauf] {
  filter: grayscale() contrast(1.24) brightness(.95);
}

.hero--overlay[data-astro-cid-ge2uvauf] .scrim[data-astro-cid-ge2uvauf] {
  background: linear-gradient(180deg, #00000094 0%, #00000061 20%, #00000073 45%, #000000b8 74%, var(--ground) 100%),
      linear-gradient(90deg, #0000008c 0%, #0000004d 45%, #0000 75%);
}

@media (width <= 650px) {
  .hero--overlay[data-astro-cid-ge2uvauf] .scrim[data-astro-cid-ge2uvauf] {
    background: linear-gradient(180deg, #0000009e 0%, #0000008c 55%, #000c 80%, var(--ground) 100%);
  }
}

@supports (animation-timeline: scroll()) {
  .hold[data-astro-cid-ge2uvauf] .frame[data-astro-cid-ge2uvauf] img[data-astro-cid-ge2uvauf] {
    animation: linear both push;
    animation-timeline: scroll(root);
    animation-range: contain;
  }

  .hold[data-astro-cid-ge2uvauf] .deepen[data-astro-cid-ge2uvauf] {
    animation: linear both deepen;
    animation-timeline: scroll(root);
    animation-range: contain;
  }

  @keyframes push {
    to {
      transform: scale(1.09);
    }
  }

  @keyframes deepen {
    to {
      opacity: .34;
    }
  }
}

@supports not (animation-timeline: scroll()) {
  .hold[data-astro-cid-ge2uvauf] {
    height: 100vh;
  }

  .hold[data-astro-cid-ge2uvauf] .sticky[data-astro-cid-ge2uvauf] {
    position: static;
  }

  .hold[data-astro-cid-ge2uvauf] .deepen[data-astro-cid-ge2uvauf] {
    opacity: .18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hold[data-astro-cid-ge2uvauf] {
    height: 100vh;
  }

  .hold[data-astro-cid-ge2uvauf] .sticky[data-astro-cid-ge2uvauf] {
    position: static;
  }

  .hold[data-astro-cid-ge2uvauf] .frame[data-astro-cid-ge2uvauf] img[data-astro-cid-ge2uvauf] {
    animation: none;
    transform: none;
  }

  .hold[data-astro-cid-ge2uvauf] .deepen[data-astro-cid-ge2uvauf] {
    animation: none;
    opacity: .18;
  }
}
/* Sense tokens, Hero photography and the established native settle reveal.
   These rules style the guided journey for every race that opts in. Runtime output is
   styled in this global sheet, never with Astro-scoped selectors. */
.journey-page :where(p, li, label, small, figcaption, summary, input, select) { font-family: var(--font-body), system-ui, sans-serif; font-weight: 400; }
.journey-page :where(section, article, figure) { scroll-margin-top: 96px; }
.journey-page [hidden] { display: none !important; }
.journey-page .section-label { color: var(--text-quiet); font-size: 14px; text-transform: none; letter-spacing: 0; }
/* The opening is a full-bleed hero (Hero overlay): the race name over the photograph.
   Clipping on <main> absorbs the scrollbar's width. */
#main:has(.journey-page) { overflow-x: clip; }
.journey-opening { margin: 0 calc(50% - 50vw); color: var(--type); }
.journey-opening .content > * { max-width: 980px; }
.journey-back { display: inline-flex; gap: 12px; margin-bottom: 28px; font-size: 14px; color: var(--type); }
.journey-opening .section-label { color: var(--type); }
.journey-opening h1 { margin: 20px 0 26px; font-size: clamp(44px, 7vw, 94px); line-height: .98; letter-spacing: -.058em; text-wrap: balance; }
.journey-lead { max-width: 52ch; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.6; }
.journey-opening__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; font-size: 15px; }
.journey-opening__links a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; }
.journey-opening .journey-opening__caption { position: absolute; right: 0; bottom: 0; max-width: 32ch; margin: 0; color: color-mix(in srgb, var(--type) 62%, transparent); font-size: 13px; text-align: right; }
.journey-snapshot { border-top: 1px solid var(--surface-5); border-bottom: 1px solid var(--surface-5); padding: 20px 0; }
.journey-snapshot dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px 24px; margin: 0; }
.journey-snapshot dl > div { min-width: 0; }
.journey-snapshot dt { margin-bottom: 5px; color: var(--text-quiet); font-size: 13px; }
.journey-snapshot dd { margin: 0; font-size: 15px; line-height: 1.45; }

/* Predictor and result sit on the Data canvas width inside the Editorial page (#442 C8). */
.journey-predictor { margin: clamp(80px, 11vw, 160px) auto; max-width: var(--canvas-data); }
.journey-snapshot + .journey-predictor { margin-top: clamp(58px, 8vw, 112px); }
.journey-page .race-card-builder { border: 0; border-top: 1px solid var(--surface-6); border-radius: 0; padding: 50px 0 0; background: none; box-shadow: none; scroll-margin-top: 96px; }
.journey-page .race-card-workspace { display: block; border: 0; background: none; box-shadow: none; border-radius: 0; }
.journey-page .race-card-inputs, .journey-page .race-card-output, .journey-page .race-card-output__inner { padding: 0; position: static; border: 0; background: none; box-shadow: none; }
.journey-introduction { max-width: 660px; margin-bottom: 52px; }
.journey-introduction h2 { margin: 20px 0; font-size: clamp(34px, 4.5vw, 58px); line-height: 1.05; letter-spacing: -.04em; }
.journey-introduction p:last-child { font-size: 18px; line-height: 1.65; }
.journey-page [data-journey-state="result"] .journey-introduction { display: none; }
.journey-page .race-card-form { display: block; max-width: 820px; }
.journey-page .race-card-form fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.journey-page .race-card-form h3 { margin: 0 0 22px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.journey-page .race-card-form fieldset > p { margin: 0 0 30px; max-width: 58ch; font-size: 17px; line-height: 1.65; }
.journey-page .race-card-form label { display: grid; gap: 10px; color: var(--type); font-size: 16px; }
.journey-page .race-card-form label small { color: var(--text-quiet); font-size: 14px; }
.journey-page .race-card-form input:not([type="checkbox"]), .journey-page .race-card-form select { min-height: 56px; width: 100%; border: 1px solid var(--surface-6); border-radius: 6px; padding: 12px 14px; background: var(--surface-1); color: var(--type); font: inherit; }
.journey-page .race-card-form input[aria-invalid="true"] { border-color: var(--accent); }
.journey-page [data-error-for] { display: block; margin-top: 10px; color: var(--type); font-size: 15px; }
.journey-page [data-journey-step="swim"] > label, .journey-page [data-journey-step="run"] > label { max-width: 280px; }
.journey-page #journey-css-help { display: block; margin-top: 12px; font-size: 14px; color: var(--text-quiet); }
.journey-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.journey-page [data-journey-step="identity"] .journey-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journey-navigation, .journey-choice { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.journey-page .race-card-submit, .journey-primary { display: inline-flex; justify-content: center; align-items: center; gap: 22px; width: auto; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 7px; background: var(--accent); color: var(--ground); font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; }
.journey-page button:not(.race-card-submit), .journey-page summary { cursor: pointer; }
.journey-choice button:not(.race-card-submit), .journey-summaries button, .guided-result__actions button, .guided-percentile button { background: none; color: var(--type); border: 0; text-decoration: underline; text-underline-offset: 5px; min-height: 44px; padding: 8px 0; font: inherit; }
.journey-summaries { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 32px; }
.journey-summaries button { color: var(--text-quiet); font-size: 14px; }
.journey-units { margin-top: 28px; max-width: 440px; color: var(--text-quiet); font-size: 14px; }
.journey-units summary { min-height: 44px; display: flex; align-items: center; }
.journey-units .journey-fields { margin-top: 14px; }
.journey-page .race-card-form .journey-check { display: flex; align-items: center; grid-column: 1 / -1; min-height: 44px; }
.journey-page .journey-check input { width: 22px; height: 22px; }
.guided-result__greeting { margin: 0 0 44px; font-size: clamp(24px, 3vw, 34px); }
.guided-result__label { margin-bottom: 20px; font-size: 16px; color: var(--text-quiet); }
.guided-result h3 { margin: 0; font-size: clamp(42px, 6.5vw, 82px); line-height: 1.02; letter-spacing: -.06em; font-variant-numeric: tabular-nums; text-wrap: balance; }
.guided-result__context { margin: 22px 0 48px; font-size: 17px; }
.guided-percentile { padding: 0 0 56px; }
.guided-percentile:has(.guided-percentile__field) { padding-bottom: 24px; }
.guided-percentile strong { display: block; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.04em; }
.guided-percentile p { font-size: 17px; margin: 12px 0; }
.guided-percentile small { color: var(--text-quiet); font-size: 14px; }
.guided-percentile__disciplines { display: flex; flex-wrap: wrap; gap: 18px 34px; margin: 28px 0 0; }
.guided-percentile:has(.guided-percentile__field) .guided-percentile__disciplines { margin-top: 16px; }
.guided-percentile__disciplines div { min-width: 92px; }
.guided-percentile__disciplines dt { color: var(--text-quiet); font-size: 13px; }
.guided-percentile__disciplines dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.guided-percentile__field { position: relative; margin: 16px 0 0; max-width: 520px; }
.guided-percentile__field-bar { position: relative; height: 10px; border-radius: 5px; background: var(--grey); }
.guided-percentile__field-middle { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--text-quiet); }
.guided-percentile__field-median, .guided-percentile__field-you { position: absolute; transform: translateX(-50%); }
.guided-percentile__field-median { top: -3px; bottom: -3px; width: 2px; background: var(--type); }
.guided-percentile__field-you { top: -5px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--accent); background: var(--ground); box-sizing: border-box; }
.guided-percentile__field-scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--text-quiet); font-size: 13px; }
.guided-percentile__field-toggle { margin: 16px 0 0; }
.guided-percentile__field-toggle summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.guided-percentile__field-key { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.guided-percentile__field-key li { display: flex; align-items: center; gap: 10px; }
.guided-percentile__field-key li > span { flex: 0 0 auto; display: inline-block; box-sizing: border-box; }
.guided-percentile__key-you { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--accent); }
.guided-percentile__key-middle { width: 22px; height: 10px; border-radius: 5px; background: var(--text-quiet); }
.guided-percentile__key-median { width: 2px; height: 16px; margin: 0 10px; background: var(--type); }
.guided-percentile .guided-percentile__field-note { margin: 12px 0 0; color: var(--text-quiet); font-size: 13px; }
.guided-percentile__field-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guided-pacing { border-top: 1px solid var(--surface-6); padding-top: 48px; }
.guided-pacing h4 { margin: 0 0 20px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.035em; }
.guided-pacing > p { max-width: 58ch; line-height: 1.65; font-size: 17px; }
.guided-pace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; padding: 36px 0; border-bottom: 1px solid var(--surface-5); }
.guided-pace h5 { margin: 0 0 12px; font-size: 16px; }
.guided-pace strong { font-size: clamp(23px, 2.8vw, 32px); letter-spacing: -.03em; }
.guided-pace small { display: block; margin-top: 16px; color: var(--text-quiet); font-size: 14px; }
.guided-pace p { margin: 0 0 20px; font-size: 17px; line-height: 1.65; }
.guided-pace .guided-pace__detail { margin-top: 20px; color: var(--text-quiet); }
.guided-transitions { color: var(--text-quiet); font-size: 14px !important; margin: 24px 0; }
.guided-result__actions { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 32px 0; font-size: 15px; }
.guided-fuel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--surface-6); font-size: 15px; }
.guided-fuel p { margin: 0; color: var(--text-soft); }
.guided-fuel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--type); text-underline-offset: 5px; }
.journey-story { max-width: 1100px; margin: auto; }
.journey-story__opening { margin-bottom: 60px; max-width: 760px; }
.journey-story h2, .journey-coaching h2 { margin: 24px 0; font-size: clamp(38px, 5vw, 66px); line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; }
.journey-story__opening > p { font-size: 20px; line-height: 1.65; }
.journey-story__chapter { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); gap: 60px; padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--surface-5); }
.journey-story__place { display: flex; flex-direction: column; gap: 18px; color: var(--text-quiet); font-size: 15px; line-height: 1.5; }
.journey-story__place span { color: var(--accent); font-size: 15px; }
.journey-story__chapter h3 { margin: 0 0 26px; font-size: clamp(29px, 3.5vw, 44px); letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.journey-story__chapter p:not(.journey-story__place) { max-width: 50ch; font-size: 18px; line-height: 1.75; }
.journey-story__cue { padding-left: 20px; border-left: 2px solid var(--accent); margin-top: 30px; }
.journey-story summary { min-height: 44px; font-size: 16px; }
.journey-loop { margin-top: 30px; }
.journey-weather { border-top: 1px solid var(--surface-5); padding: clamp(42px, 6vw, 72px) 0; }
/* A#6: the boundary into next steps is owned once, by the coaching panel's chapter gap. */
.journey-story > .journey-weather:last-child { padding-bottom: 0; }
.journey-weather h3 { margin: 0 0 24px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.035em; }
.journey-weather > p { max-width: 65ch; font-size: 17px; line-height: 1.7; }
.journey-coaching { background: var(--type); color: var(--ground); margin: var(--chapter-gap) 0 70px; padding: clamp(32px, 7vw, 100px); }
.journey-coaching .section-label { color: var(--grey); }
.journey-coaching h2 { max-width: 750px; }
.journey-coaching > p { max-width: 58ch; font-size: 19px; line-height: 1.7; }
.journey-coaching .journey-primary { margin: 26px 0; }
.journey-coaching .journey-proof, .journey-coaching .journey-secondary { color: var(--grey); font-size: 14px; }
.journey-coaching .journey-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; max-width: 760px; line-height: 1.6; }
.journey-coaching .journey-proof span { white-space: nowrap; }
.journey-coaching .journey-secondary a { color: var(--ground); }
.journey-references { padding: 0 0 72px; border-top: 1px solid var(--surface-5); font-size: 14px; color: var(--text-quiet); line-height: 1.7; }
.journey-references a { color: inherit; }
.journey-references__method { padding: 34px 0; }
.journey-references__method p { margin: 0; }
.journey-references__method #method { margin-top: 8px; }
.journey-references__method #method a { color: var(--type); font-size: 18px; }
.journey-references__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; padding: 28px 0; border-top: 1px solid var(--surface-5); }
.journey-references__meta p { display: grid; gap: 4px; margin: 0; align-content: start; }
.journey-references__meta p > span { color: var(--type); font-size: 13px; font-weight: 700; }
.journey-references__meta small { color: var(--text-quiet); font-size: 12px; }
.journey-references__explore { padding-top: 34px; border-top: 1px solid var(--surface-5); }
.journey-references__subhead { margin: 28px 0 10px; color: var(--type); font-size: 13px; font-weight: 700; }
.race-collections, .journey-related { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; }
.race-collections a, .journey-related a { min-height: 36px; display: inline-flex; align-items: center; }
@media (max-width: 650px) {
  .journey-snapshot { padding: 18px 0; }
  .journey-snapshot dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .journey-back { margin-bottom: 24px; }
  .journey-opening .journey-opening__caption { position: static; margin-top: 18px; text-align: left; }
  .journey-opening h1 { font-size: clamp(42px, 10vw, 62px); }
  .journey-page .race-card-builder { padding-top: 34px; }
  .journey-introduction { margin-bottom: 40px; }
  .journey-fields, .journey-page [data-journey-step="identity"] .journey-fields { grid-template-columns: 1fr; gap: 22px; }
  .journey-page [data-journey-step="bike"] .journey-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-choice { align-items: stretch; flex-direction: column; }
  .journey-page .race-card-submit { min-height: 56px; }
  .guided-result h3 { font-size: clamp(37px, 10.4vw, 60px); }
  .guided-pace { grid-template-columns: 1fr; gap: 24px; }
  .journey-story__chapter { grid-template-columns: 1fr; gap: 24px; }
  .journey-story__place { flex-direction: row; gap: 20px; }
  .journey-coaching { margin-left: -20px; margin-right: -20px; }
  .journey-coaching > p { font-size: 18px; }
  .journey-coaching .journey-proof { gap: 7px 14px; }
  .journey-coaching .journey-proof span { white-space: normal; }
  .journey-references__meta { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .journey-story__chapter, .journey-coaching { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@media print {
  html:has(.journey-page), body:has(.journey-page) { background: #fff !important; color: #000 !important; }
  .journey-page > :not(.journey-predictor), .journey-introduction, .guided-result__actions, .guided-fuel, .race-card-post-result, .race-card-reward, .journey-page .race-card-inputs { display: none !important; }
  .journey-page, .journey-predictor, .journey-page .race-card-builder { margin: 0; padding: 0; border: 0; }
  .guided-result, .guided-result * { color: #000 !important; background: none !important; animation: none !important; }
}
/* Retain Sense's darker hover treatment with the matching light label. */
.journey-page .race-card-submit:hover, .journey-primary:hover { background: var(--accent-action); color: var(--type); }

.race-card-reward { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; margin: 32px 0 48px; align-items: center; }
.race-card-reward img { width: 100%; height: auto; border-radius: 8px; }
.race-card-reward__actions { display: grid; gap: 18px; align-self: start; }
.race-card-reward__secondary { display: flex; flex-wrap: wrap; gap: 20px; }
.race-card-reward button, .race-card-reward summary { min-height: 44px; }
.race-card-reward summary { cursor: pointer; }
.race-card-reward label { display: block; margin: 12px 0; }
@media (max-width: 600px) {
  .race-card-reward { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
  .race-card-reward .race-card-share__cta { padding: 0 12px; }
  .race-card-reward__actions { gap: 12px; }
  .race-card-reward__secondary { gap: 8px; font-size: 13px; }
  .race-card-reward details[open] { grid-column: 1 / -1; }
}

.journey-page #race-card-result { scroll-margin-top: 88px; }

.race-card-reward__secondary button { background: none; border: 0; padding: 0; color: var(--type); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Post-result hierarchy (Design Contract v2 C2, #442): the card's own actions, then
   "This race page" across the card block. Email stays visible as a named action;
   only its form opens. */
.race-card-pass { grid-column: 1 / -1; border-top: 1px solid var(--surface-5); padding-top: 18px; display: grid; gap: 6px; }
.race-card-pass__label { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.race-card-pass__actions { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: baseline; }
.race-card-pass__actions > button, .race-card-pass summary { background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--type); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.race-card-pass summary { list-style: none; display: inline-flex; align-items: center; }
.race-card-pass summary::-webkit-details-marker { display: none; }
.race-card-pass summary::after { content: "+" / ""; margin-left: 8px; text-decoration: none; display: inline-block; }
.race-card-pass details[open] > summary::after { content: "–" / ""; }
.race-card-pass__actions > button:focus-visible, .race-card-pass summary:focus-visible { outline: 2px solid var(--type); outline-offset: 2px; }
.race-card-pass details[open] { flex-basis: 100%; }
.race-card-pass .race-card-email { border: 0; padding: 8px 0 0; }
.race-card-pass .race-card-email button { min-height: 44px; padding: 0 18px; background: none; color: var(--type); border: 1px solid var(--surface-6); border-radius: 999px; font: inherit; cursor: pointer; }
.race-card-pass .race-card-email button:focus-visible { outline: 2px solid var(--type); outline-offset: 2px; }
.race-card-pass .cf-turnstile:empty { display: none; }
@media (max-width: 640px) { .race-card-reward .race-card-pass { margin-top: 4px; } }
@media print { .race-card-pass { display: none !important; } }

/* Race-week briefing in the race-week chapter (C3, #442), with one pointer from the result. */
.guided-result__actions a[data-briefing-pointer] { color: var(--type); text-underline-offset: 5px; padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; margin-left: auto; }
.guided-result__actions a[data-briefing-pointer]:focus-visible { outline: 2px solid var(--type); outline-offset: 2px; }
.race-week-briefing { margin-top: clamp(32px, 4vw, 48px); max-width: 560px; scroll-margin-top: 88px; }
.race-week-briefing:focus { outline: none; }
.race-week-briefing h4 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.race-week-briefing__waiting, .race-week-briefing__closed { color: var(--text-soft); font-size: 15px; line-height: 1.6; margin: 0; }
.race-week-briefing .race-card-email { border: 0; padding: 0; }
.race-week-briefing .race-card-share__cta { justify-self: start; padding: 0 22px; }
.race-week-briefing .cf-turnstile:empty { display: none; }
@media (max-width: 640px) { .guided-result__actions a[data-briefing-pointer] { margin-left: 0; } }
@media print { .race-week-briefing { display: none !important; } }
/*
 * Race Intelligence page. Tokens only: the build scans every built stylesheet
 * against the site palette, and --accent is the one permitted hue. Following
 * the site spec (§5), the accent marks actions only, plus the course trace as
 * the page's one graphic; hover, focus and error states are built from weight
 * and contrast. Labels are sentence case, never all caps. Motion is slow and
 * scroll-driven, CSS only, and absent under reduced motion.
 */

.race-page { --accent-action: color-mix(in srgb, var(--accent) 75%, var(--ground)); max-width: 1440px; margin: 0 auto; padding: clamp(112px, 13vh, 150px) clamp(20px, 4vw, 64px) clamp(64px, 10vh, 120px); overflow-x: clip; overflow-wrap: break-word; }
.race-page p { margin: 0; }
.race-page :where(h1, h2, h3, h4) { margin: 0; font-weight: 700; }
.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; }

/* Shared type roles */
.eyebrow, .section-label { color: var(--text-quiet); font-size: 13px; font-weight: 500; }
.section-index { color: var(--text-dim); font-family: var(--font-body), system-ui, sans-serif; font-variant-numeric: tabular-nums; margin-right: 10px; }
/* Every one of these ids is a jump target — the reading rail, the "keep
   scrolling" cue, and the map's own #region-… links all land on them
   directly — so each needs the same scroll-margin-top the article/FAQ/legal
   anchors already use, or the fixed nav pill covers the first line landed on. */
.race-opening, .race-section { scroll-margin-top: 92px; }
.race-section { border-top: 1px solid var(--surface-5); padding-block: clamp(72px, 12vh, 136px); }
.race-section h2, .race-model-panel h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -.035em; margin-top: 16px; max-width: 15ch; text-wrap: balance; }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vh, 64px); }
.section-head__aside { display: grid; gap: 20px; justify-items: start; }
.section-head__aside p { color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 17px; line-height: 1.65; max-width: 56ch; }
.section-head__aside strong { color: var(--type); font-weight: 600; }
.reader-details { margin-top: 32px; border-top: 1px solid var(--surface-5); padding-top: 18px; color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; line-height: 1.65; }
.reader-details > :not(summary) { max-width: 72ch; }
.reader-details summary { cursor: pointer; color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 10px; }
.reader-details summary::-webkit-details-marker { display: none; }
.reader-details summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--surface-6); color: var(--text-muted); font-size: 14px; }
.reader-details[open] > summary::before { content: "−"; }
.reader-details p, .reader-details ul { margin: 14px 0 0; }
.reader-details li + li { margin-top: 6px; }

/* ---------- Opening: hero and route ---------- */
.race-opening { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vh, 48px); padding-bottom: 0; }
.race-opening::before { content: ""; position: absolute; z-index: -1; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; top: -34vw; right: -24vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%); pointer-events: none; }
#course { border-top: 0; }
.race-opening__hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.race-hero { display: grid; gap: 0; }
.race-hero h1 { font-size: clamp(38px, 5.6vw, 84px); line-height: 1; letter-spacing: var(--tracking-display); margin: 16px 0 24px; max-width: 13ch; text-wrap: balance; overflow-wrap: anywhere; }
.race-hero__lead { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.race-hero__summary { color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 17px; line-height: 1.65; max-width: 50ch; margin-top: 12px !important; }
.race-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 28px 0 0; border-top: 1px solid var(--surface-5); }
.race-facts > div { min-width: 0; padding: 14px 16px 0 0; }
.race-facts > div + div { padding-left: 16px; border-left: 1px solid var(--surface-5); }
.race-facts dt { color: var(--text-quiet); font-size: 12px; }
.race-facts dd { margin: 6px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.race-facts dd { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.eyebrow a { color: var(--type); text-underline-offset: 3px; }
.eyebrow a::after, .eyebrow span + span::before { content: "·"; margin: 0 10px; }
.verification { color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; margin-top: 18px !important; }

.course-map { margin: 0; display: grid; place-items: center; }
.course-map svg { width: 100%; height: auto; max-height: 300px; overflow: visible; }
.course-map-line { fill: none; stroke-width: .7; stroke-linejoin: round; stroke-linecap: round; }
.course-map-line--bike { stroke: var(--accent); }
.course-map-line--swim { stroke: var(--type); stroke-dasharray: 3 3; }
.course-map-line--run { stroke: var(--text-dim); stroke-dasharray: 1 2.5; }

/* ---------- Race Card workspace ---------- */
.race-card-workspace { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); border: 1px solid var(--surface-5); border-radius: 12px; overflow: clip; box-shadow: 0 36px 120px rgba(0,0,0,.38); }
.race-card-inputs { padding: clamp(24px, 3.4vw, 48px); min-width: 0; }
.race-card-output { background: linear-gradient(150deg, var(--surface-2), var(--ground) 70%); border-left: 1px solid var(--surface-5); min-width: 0; container: race-output / inline-size; }
.race-card-output__inner { position: sticky; top: 76px; padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.race-opening .race-card-heading { max-width: 54ch; }
.race-opening .race-card-heading h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.03em; margin: 12px 0 12px; }
.race-card-heading > p:last-child { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 15px; line-height: 1.6; }

.race-card-form { display: grid; gap: 28px; margin-top: 36px; }
.race-card-form[hidden] { display: none; }
.race-card-group { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; }
.race-card-group legend { padding: 0; margin-bottom: 16px; color: var(--text-muted); font-size: 13px; }
.race-card-basics, .race-card-preferences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Unit toggles sit on the "Your numbers" legend row: they change what the
   fields beneath them mean, and stay in sync with the course toggle. */
.race-card-group--numbers { display: flow-root; }
.race-card-group--numbers > legend { float: left; margin: 8px 0 0; }
.race-card-units { float: right; display: flex; gap: 10px; margin-bottom: 16px; }
.race-card-bike-type { grid-column: 1 / -1; }
.race-card-group--numbers > .race-card-basics { clear: both; }
.unit-switch { display: flex; margin: 0; padding: 0; border: 0; min-width: 0; }
.unit-switch label { position: relative; display: block; cursor: pointer; }
.unit-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.unit-switch span { display: grid; place-items: center; height: 32px; min-width: 42px; padding: 0 10px; border: 1px solid var(--surface-6); color: var(--text-muted); font-size: 13px; transition: color .15s ease, background-color .15s ease; }
.unit-switch label + label span { border-left: 0; }
.unit-switch input:hover + span { color: var(--type); }
.unit-switch input:checked + span { background: var(--type); border-color: var(--type); color: var(--ground); }
.unit-switch input:focus-visible + span { outline: 2px solid var(--type); outline-offset: 2px; }
/* Each field spans two rows of its parent grid (label, control) through
   subgrid, so a label that wraps pushes its whole row down together and the
   controls beside it stay level. */
.race-card-form label:not(.unit-switch label) { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 8px; color: var(--type); font-size: 14px; }
.field-label { align-self: end; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.field-label small { color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 12px; }
.race-card-form input:not([type="checkbox"], [type="radio"]), .race-card-form select { width: 100%; height: 52px; border: 1px solid var(--surface-6); border-radius: 7px; background: var(--ground); color: var(--type); padding: 0 14px; font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; transition: border-color .15s ease; }
.race-card-form input::placeholder { color: var(--surface-6); }
.race-card-form input:hover, .race-card-form select:hover { border-color: var(--text-quiet); }
.race-card-form input:focus, .race-card-form select:focus { border-color: var(--type); outline: none; }
.race-card-form input:focus-visible, .race-card-form select:focus-visible { outline: 2px solid var(--type); outline-offset: 2px; }
.race-card-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.race-card-form input[aria-invalid="true"], .race-card-form select[aria-invalid="true"] { border-color: var(--type); box-shadow: inset 0 0 0 1px var(--type); }

/* One optional panel keeps race context and additional evidence together. */
.advanced-prediction-inputs { border: 1px solid var(--surface-6); background: var(--surface-1); transition: border-color .15s ease; }
.advanced-prediction-inputs:hover, .advanced-prediction-inputs[open] { border-color: var(--text-quiet); }
.advanced-prediction-inputs summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; cursor: pointer; list-style: none; }
.advanced-prediction-inputs summary::-webkit-details-marker { display: none; }
.advanced-summary__icon { position: relative; width: 36px; height: 36px; border: 1px solid var(--type); }
.advanced-summary__icon::before, .advanced-summary__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--type); translate: -50% -50%; transition: rotate .2s ease; }
.advanced-summary__icon::after { rotate: 90deg; }
.advanced-prediction-inputs[open] .advanced-summary__icon::after { rotate: 0deg; }
.advanced-summary__text { display: grid; gap: 4px; }
.advanced-summary__text strong { color: var(--type); font-size: 16px; font-weight: 700; }
.advanced-summary__text small { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; line-height: 1.45; }
.advanced-summary__cta { color: var(--type); font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--type); padding-bottom: 2px; white-space: nowrap; }
.advanced-summary__close, .advanced-prediction-inputs[open] .advanced-summary__open { display: none; }
.advanced-prediction-inputs[open] .advanced-summary__close { display: inline; }
.advanced-prediction-inputs > p { padding: 0 18px; }
.advanced-prediction-inputs .race-card-group { padding: 0 18px 20px; }
.advanced-prediction-inputs .race-card-preferences { padding-top: 2px; }
.advanced-prediction-inputs > p, .advanced-input-group > p { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 14px; line-height: 1.55; max-width: 62ch; }
.advanced-input-heading { margin: 8px 18px 0; color: var(--type); font-size: 14px; }
.advanced-input-groups { display: grid; margin-top: 12px; border-top: 1px solid var(--surface-5); }
.advanced-input-group { min-width: 0; margin: 0; padding: 22px 18px; border: 0; border-bottom: 1px solid var(--surface-5); display: grid; gap: 12px; }
.advanced-input-group:last-child { border-bottom: 0; }
.advanced-input-group legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; color: var(--type); font-size: 14px; font-weight: 700; }
.advanced-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.advanced-fields--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advanced-fields label { font-size: 13px; }
.advanced-fields input:not([type="checkbox"]), .advanced-fields select { height: 46px !important; font-size: 15px !important; }
.advanced-fields .check-field { display: flex; grid-row: span 2; gap: 10px; align-items: center; align-self: end; min-height: 46px; color: var(--text-soft); }
.advanced-fields .check-field input { width: 18px; height: 18px; accent-color: var(--type); }
.advanced-input-group > small { display: block; color: var(--type); font-size: 13px; font-weight: 700; }
.advanced-input-group > small:empty { display: none; }
.advanced-feedback { color: var(--type) !important; font-size: 13px !important; }
.advanced-feedback::before { content: "↳"; margin-right: 8px; color: var(--text-quiet); }

.benchmark-help { grid-column: 1 / -1; border-top: 1px solid var(--surface-5); padding-top: 12px; color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 14px; }
.benchmark-help summary { display: inline-block; cursor: pointer; color: var(--type); font-family: var(--font-display), system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.benchmark-help dl { display: grid; gap: 10px; margin: 16px 0 0; }
.benchmark-help dl > div { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 10px; }
.benchmark-help dt { color: var(--type); font-weight: 700; }
.benchmark-help dd { margin: 0; line-height: 1.5; }
.race-card-submit { min-height: 58px; padding: 14px 20px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-action); color: var(--type); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; cursor: pointer; transition: background-color .15s ease; }
.race-card-submit:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ground)); }
.race-card-errors { color: var(--type); font-weight: 700; font-size: 14px; min-height: 1.5em; margin-top: -12px !important; }

/* Result */
.race-card-result { display: grid; gap: 0; scroll-margin-top: 80px; }
.prediction-placeholder { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 15px; line-height: 1.55; margin-top: 10px !important; }
.race-card-preview { margin-top: clamp(44px, 7vh, 84px); border-top: 1px solid var(--surface-6); }
.race-card-preview > p { padding: 18px 0 8px; color: var(--text-quiet); font-size: 12px; }
.race-card-preview ol { list-style: none; margin: 0; padding: 0; }
.race-card-preview li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 20px 0; border-bottom: 1px solid var(--surface-5); }
.race-card-preview li span { grid-row: 1 / 3; color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; }
.race-card-preview li strong { font-size: 16px; line-height: 1.3; }
.race-card-preview li small { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; line-height: 1.45; }
.prediction-result { display: grid; gap: 0; }
.prediction-range-plot { margin: 12px 0 0; }
.range-band--total { padding-bottom: 22px; }
.range-band--total .range-band__value { display: block; font-size: clamp(27px, 9cqi, 52px); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.prediction-range-plot--empty .range-band--total { display: none; }
.prediction-range-plot--empty { display: none; }
.range-bands__head, .range-bands .range-band { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.range-bands__head { padding-bottom: 10px; border-bottom: 1px solid var(--surface-6); color: var(--text-quiet); font-size: 12px; }
.range-bands__head span:last-child { text-align: right; }
.range-bands { list-style: none; margin: 0; padding: 0; }
.range-bands .range-band { padding: 15px 0; border-bottom: 1px solid var(--surface-5); }
.range-bands .range-band__label { color: var(--text-muted); font-size: 14px; }
.range-bands .range-band__value { color: var(--type); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.range-band__effort { color: var(--type); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.range-band--transitions .range-band__label, .range-band--transitions .range-band__value { color: var(--text-muted); font-size: 14px; }
.prediction-range-plot--empty .range-bands .range-band__value, .prediction-range-plot--empty .range-band__effort { color: var(--surface-6); font-weight: 500; }
.prediction-result__context { color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; line-height: 1.55; margin-top: 16px !important; }

.next-input { margin-top: 24px; padding: 14px 16px; border-left: 2px solid var(--type); background: var(--surface-3); display: grid; gap: 4px; }
.next-input > span { color: var(--text-muted); font-size: 12px; }
.next-input strong { font-size: 15px; }
.next-input p { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; line-height: 1.5; }
.next-input__action { justify-self: start; margin-top: 8px; border: 0; border-bottom: 1px solid var(--surface-6); background: none; color: var(--text-soft); padding: 0 0 2px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.next-input__action:hover { color: var(--type); border-bottom-color: var(--type); }

.prediction-explanation, .prediction-assumptions { margin-top: 16px; border-top: 1px solid var(--surface-5); padding-top: 14px; color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 14px; line-height: 1.55; }
.prediction-explanation + .prediction-assumptions { margin-top: 0; }
.prediction-explanation summary, .prediction-assumptions summary { cursor: pointer; color: var(--text-dim); font-family: var(--font-display), system-ui, sans-serif; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.prediction-explanation summary::-webkit-details-marker, .prediction-assumptions summary::-webkit-details-marker { display: none; }
.prediction-explanation summary::after, .prediction-assumptions summary::after { content: "+"; color: var(--text-quiet); }
.prediction-explanation[open] summary::after, .prediction-assumptions[open] summary::after { content: "−"; }
.prediction-explanation ul, .prediction-assumptions ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 14px; }
.prediction-explanation li { display: grid; gap: 3px; }
.prediction-explanation li > span { color: var(--text-quiet); font-family: var(--font-display), system-ui, sans-serif; font-size: 12px; text-transform: capitalize; }
.prediction-explanation li > strong { color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-size: 15px; }
.prediction-explanation li small { color: var(--text-quiet); font-size: 12px; }
.prediction-assumptions li { padding-left: 14px; position: relative; }
.prediction-assumptions li::before { content: "·"; position: absolute; left: 0; color: var(--text-quiet); }

/* The share card itself is drawn on a <canvas> client-side (see
   lib/race-card/shareCard.ts) - this is only the trigger row: an optional
   first name (shown on the image only, never stored beyond this page) and
   the button that builds and shares or downloads it. */
.race-card-share { border-top: 1px solid var(--surface-6); padding-top: 24px; display: grid; gap: 10px; }
.race-card-email { border-top: 1px solid var(--surface-6); padding-top: 24px; display: grid; gap: 10px; }
.race-card-email label { font-size: 13px; color: var(--text-muted); }
.race-card-email__consent { display: flex; align-items: flex-start; gap: 9px; color: var(--text-soft) !important; font-family: var(--font-body), system-ui, sans-serif; line-height: 1.45; }
.race-card-email__consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.race-card-email .cf-turnstile { min-height: 65px; }
.race-card-share label { font-size: 13px; color: var(--text-muted); }
.race-card-share label small { color: var(--text-quiet); font-weight: 400; }
.race-card-share__row { display: flex; gap: 10px; }
.race-card-share__row input {
  flex: 1; min-width: 0; height: 52px; border: 1px solid var(--surface-6); border-radius: 0;
  background: var(--ground); color: var(--type); padding: 0 14px; font: inherit; font-size: 15px;
  transition: border-color .15s ease;
}
.race-card-share__row input::placeholder { color: var(--surface-6); }
.race-card-share__row input:hover { border-color: var(--text-quiet); }
.race-card-share__row input:focus { outline: none; border-color: var(--type); }
.race-card-share__row input:focus-visible { outline: 2px solid var(--type); outline-offset: 2px; }
.race-card-share__cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent-action); color: var(--type); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity .15s ease;
}
.race-card-share__cta:hover { background: color-mix(in srgb, var(--accent) 82%, var(--ground)); }
.race-card-share__cta:disabled { opacity: .5; cursor: default; }
.race-card-referral .race-card-share__cta { justify-self: start; }
.race-card-referral input[readonly] {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--surface-6); background: var(--ground);
  color: var(--type); font: inherit; font-size: 13px;
}
.race-card-referral input[hidden] { display: none; }
.race-card-referral input:focus-visible { outline: 2px solid var(--type); outline-offset: 2px; }
.race-card-share__note { color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 12px; line-height: 1.5; margin: 0; min-height: 1.5em; }

.race-card-offer { border-top: 1px solid var(--surface-6); padding-top: 24px; display: grid; gap: 14px; }
.race-card-offer__title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.race-card-offer__links { display: grid; gap: 10px; }
.race-card-offer__link { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--surface-6); background: var(--ground); text-decoration: none; transition: border-color .15s ease; }
.race-card-offer__link > span { grid-column: 1; color: var(--text-quiet); font-size: 12px; }
.race-card-offer__link > strong { grid-column: 1; font-size: 16px; line-height: 1.3; }
.race-card-offer__link > small { grid-column: 2; grid-row: 1 / span 2; color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.race-card-offer__link:hover { border-color: var(--type); }
.race-card-offer__link--coaching { border-color: var(--accent); }
.race-card-result:not([data-has-prediction]) ~ .race-card-share,
.race-card-result:not([data-has-prediction]) ~ .race-card-offer,
.race-card-result:not([data-has-prediction]) ~ .print-button { display: none; }
.print-button { justify-self: start; border: 0; border-bottom: 1px solid var(--surface-6); background: none; color: var(--text-muted); padding: 4px 0; font: inherit; font-size: 13px; cursor: pointer; }
.print-button:hover { color: var(--type); border-bottom-color: var(--type); }

/* The result column's width depends on the page, not the viewport, so the
   leg table and offer links adapt to the column itself. Below this width the
   target moves under the time instead of spilling out of the panel. */
@container race-output (max-width: 480px) {
  .range-bands__head { display: none; }
  .range-bands { border-top: 1px solid var(--surface-6); }
  .range-bands .range-band { grid-template-columns: 5.5rem minmax(0, 1fr); row-gap: 4px; }
  .range-band__effort { grid-column: 2; text-align: left; font-size: 15px; }
  .range-band__effort .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; color: var(--text-quiet); font-weight: 500; }
  .race-card-offer__link { grid-template-columns: 1fr; }
  .race-card-offer__link > small { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .race-card-share__row { flex-direction: column; }
  .race-card-share__cta { width: 100%; }
}

/* ---------- Continue band ----------
   The Race Card fills the first screens, so this says plainly that the page
   carries on, and where to. */
.race-continue { margin-top: 0; padding: 24px 0; border-top: 1px solid var(--surface-5); border-bottom: 1px solid var(--surface-5); }
.race-continue__cue { display: inline-flex; align-items: center; gap: 12px; color: var(--type); font-size: 15px; font-weight: 700; text-decoration: none; }
.race-continue__cue i { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--type); font-style: normal; }
.race-continue ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 28px; }
.race-continue ol a { color: var(--text-muted); font-size: 14px; text-decoration: none; transition: color .15s ease; }
.race-continue ol a span { margin-right: 8px; color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.race-continue ol a:hover, .race-continue__cue:hover { color: var(--type); }

/* ---------- The course ---------- */
.unit-toggle { display: inline-flex; align-items: center; gap: 12px; color: var(--text-quiet); font-size: 13px; }
.unit-toggle > span { font-family: var(--font-body), system-ui, sans-serif; }
.unit-toggle button { border: 1px solid var(--surface-6); background: none; color: var(--text-muted); height: 32px; min-width: 44px; padding: 0 12px; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.unit-toggle button + button { margin-left: -13px; border-left: 0; }
.unit-toggle button:hover { border-color: var(--text-quiet); color: var(--type); }
.unit-toggle button[aria-pressed="true"] { background: var(--type); border-color: var(--type); color: var(--ground); }
.course-visual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--surface-5); border-bottom: 1px solid var(--surface-5); }
.course-visual-card { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: clamp(24px, 2.8vw, 40px) 0; }
.course-visual-card__leg { color: var(--text-muted); font-size: 13px; }
.course-visual-card__distance { font-size: clamp(34px, 4vw, 60px); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 14px !important; overflow-wrap: anywhere; }
.course-visual-card h3 { font-size: 19px; line-height: 1.25; margin-top: 12px; text-wrap: balance; }
.course-specs { margin: 22px 0 0; border-top: 1px solid var(--surface-5); }
.course-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--surface-5); font-size: 14px; }
.course-specs dt { color: var(--text-quiet); }
.course-specs dd { margin: 0; color: var(--text-soft); text-align: right; }
.elevation-fact dd small { display: block; color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 11px; margin-top: 2px; }
.course-visual-card__note { color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 15px; line-height: 1.62; margin-top: 20px !important; }
.evidence-label { margin-top: auto; padding-top: 22px; color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 12px; }
.evidence-label a { color: inherit; text-underline-offset: 3px; }
.evidence-label a:hover { color: var(--type); }

/* ---------- Race plan ---------- */
.decision-chapters { display: grid; border-top: 1px solid var(--surface-5); }
.decision-chapter { display: grid; gap: clamp(24px, 3.4vh, 36px); padding-block: clamp(40px, 6vh, 64px); border-bottom: 1px solid var(--surface-5); }
.decision-chapter:last-child { border-bottom: 0; padding-bottom: 0; }
.decision-chapter__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.decision-label { color: var(--text-quiet); font-size: 13px; min-width: 3.5rem; }
.decision-chapter h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.decision-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.decision-phase { display: flex; flex-direction: column; min-width: 0; }
.decision-phase:only-child { grid-column: span 2; }
.decision-meta__range { color: var(--type); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.decision-meta__label { color: var(--text-quiet); font-size: 13px; margin-bottom: 4px !important; }
.decision-track { position: relative; display: block; height: 3px; margin: 10px 0 18px; background: var(--surface-4); }
.decision-track i { position: absolute; top: 0; bottom: 0; left: var(--start); width: var(--span); background: var(--text-dim); }
.decision-phase h4 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.decision-phase > p:not([class]) { color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 15px; line-height: 1.62; margin-top: 10px !important; }
.coach-cues { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.coach-cues li { border: 1px solid var(--surface-6); padding: 5px 10px; color: var(--text-dim); font-size: 12px; line-height: 1.3; }
.decision-phase > .warning { display: flex; gap: 10px; align-items: baseline; color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-size: 14px; margin-top: 14px !important; }
.decision-phase > .warning::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--type); translate: 0 -4px; }

/* ---------- Reading rail ----------
   The article template's device, carried onto this page: the mark lights one
   chevron per third of the scroll, and each numeral brightens while its
   section is on screen. Wide screens only; it lives in the left gutter. */
.race-rail { display: none; }
@media (min-width: 1280px) {
  .race-rail { position: fixed; z-index: 30; left: clamp(20px, 2.2vw, 40px); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 16px; }
  .race-rail__mark { width: 22px; height: auto; color: var(--type); }
  .race-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .race-rail a { position: relative; display: flex; align-items: center; gap: 12px; padding-left: 9px; border-left: 1px solid var(--surface-6); color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
  .race-rail em { position: absolute; left: calc(100% + 10px); padding: 3px 8px; background: var(--ground); color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-style: normal; font-size: 12px; white-space: nowrap; opacity: 0; translate: -4px 0; pointer-events: none; transition: opacity .2s ease, translate .2s ease; }
  .race-rail a:hover, .race-rail a:focus-visible { color: var(--type); border-left-color: var(--type); }
  .race-rail a:hover em, .race-rail a:focus-visible em { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: scroll()) {
  @media (min-width: 1280px) {
    .race-rail__mark polygon { color: var(--grey); animation: rail-light linear both; animation-timeline: scroll(root block); }
    .race-rail__mark polygon:nth-of-type(1) { animation-range: 0% 33%; }
    .race-rail__mark polygon:nth-of-type(2) { animation-range: 33% 66%; }
    .race-rail__mark polygon:nth-of-type(3) { animation-range: 66% 100%; }
    @keyframes rail-light { from { color: var(--grey); } to { color: var(--type); } }

    .race-page { timeline-scope: --rail-race-card, --rail-course, --rail-plan, --rail-race-week, --rail-method, --rail-next-steps; }
    #race-card { view-timeline: --rail-race-card block; }
    #course { view-timeline: --rail-course block; }
    #plan { view-timeline: --rail-plan block; }
    #race-week { view-timeline: --rail-race-week block; }
    #method { view-timeline: --rail-method block; }
    #next-steps { view-timeline: --rail-next-steps block; }
    .race-rail a { animation: rail-current linear both; animation-range: cover 0% cover 100%; }
    .race-rail a[data-rail="race-card"] { animation-timeline: --rail-race-card; }
    .race-rail a[data-rail="course"] { animation-timeline: --rail-course; }
    .race-rail a[data-rail="plan"] { animation-timeline: --rail-plan; }
    .race-rail a[data-rail="race-week"] { animation-timeline: --rail-race-week; }
    .race-rail a[data-rail="method"] { animation-timeline: --rail-method; }
    .race-rail a[data-rail="next-steps"] { animation-timeline: --rail-next-steps; }
    @keyframes rail-current {
      0%, 100% { color: var(--text-quiet); border-left-color: var(--surface-6); }
      25%, 75% { color: var(--type); border-left-color: var(--type); }
    }
  }
}

/* ---------- Pull-quote ----------
   The homepage register: one real published sentence, linked to its source,
   given a screen of its own between the plan and the race week. */
.race-quote { display: grid; align-items: center; min-height: 72vh; padding-block: clamp(72px, 14vh, 160px); border-top: 1px solid var(--surface-5); }
.race-quote .pq.long { max-width: none; }
.race-quote .pq.long p { font-size: clamp(30px, 4.2vw, 60px); max-width: 24ch; }

/* ---------- Race week ---------- */
.weather-briefing { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 12fr); gap: 1px; background: var(--surface-5); border: 1px solid var(--surface-5); }
.weather-status-line { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 2.8vw, 36px); background: var(--surface-1); }
.status-kicker { color: var(--text-quiet); font-size: 12px; }
.weather-status-line strong { font-size: 22px; letter-spacing: -.015em; }
.weather-status-line p { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 15px; line-height: 1.6; }
.conditions { display: grid; background: var(--ground); }
.conditions-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.conditions-strip > div { display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(24px, 2.8vw, 36px); }
.conditions-strip > div + div { border-left: 1px solid var(--surface-5); }
.conditions-strip dt { color: var(--text-quiet); font-size: 12px; }
.conditions-strip dd { margin: 0; display: grid; gap: 6px; }
.conditions-strip strong { font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.conditions-strip small { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; }
.conditions-provenance { border-top: 1px solid var(--surface-5); padding: 16px clamp(24px, 2.8vw, 36px); color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; line-height: 1.6; }
.conditions-provenance strong { display: block; color: var(--text-soft); font-weight: 400; margin-top: 2px; }

/* ---------- Method ---------- */
.race-method { padding-bottom: clamp(56px, 9vh, 104px); }
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; counter-reset: model; background: var(--surface-5); border: 1px solid var(--surface-5); }
.model-grid li { counter-increment: model; display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 32px); background: var(--ground); position: relative; }
.model-grid li::before { content: "0" counter(model); color: var(--text-quiet); font-size: 12px; font-variant-numeric: tabular-nums; }
.model-grid strong { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.model-grid span { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.model-grid li:last-child { background: var(--surface-1); }
.model-method-link { margin-top: 14px; font-size: 14px; }
.model-method-link a { color: var(--type); text-underline-offset: 3px; }
.confidence-preview { margin-top: clamp(40px, 6vh, 56px); }
.confidence-preview__title { color: var(--text-muted); font-size: 13px; margin-bottom: 18px !important; }
.confidence-preview dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; }
.confidence-preview dl > div { border-top: 1px solid var(--surface-6); padding-top: 14px; display: grid; gap: 6px; }
.confidence-preview dt { font-size: 15px; font-weight: 700; }
.confidence-preview dd { margin: 0; color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 14px; line-height: 1.5; }

/* ---------- Next steps ---------- */
.next-steps-preparation__label, .next-steps-reading > .section-label { margin-bottom: 18px !important; }
.next-step-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.next-step-action { display: flex; flex-direction: column; gap: 12px; min-height: 280px; padding: clamp(24px, 3vw, 44px); border: 1px solid var(--surface-6); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.next-step-action > span { color: var(--text-muted); font-size: 13px; }
.next-step-action > strong { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.025em; max-width: 16ch; }
.next-step-action > small { color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 16px; line-height: 1.6; max-width: 40ch; }
.next-step-action > em { margin-top: auto; padding-top: 20px; font-style: normal; font-size: 15px; font-weight: 700; }
.next-step-action:hover { border-color: var(--type); }
.next-step-action--coaching { background: var(--surface-1); border-color: var(--accent); }
.next-step-action--coaching:hover { border-color: var(--accent); background: var(--surface-3); }
.next-steps-reading { margin-top: clamp(48px, 7vh, 72px); }
.next-step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--surface-5); }
.next-step { position: relative; display: grid; gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--surface-5); text-decoration: none; }
.next-step > span { color: var(--text-quiet); font-size: 12px; }
.next-step > strong { font-size: 18px; line-height: 1.3; }
.next-step > small { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
.next-step:hover > strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Sources ---------- */
.race-sources h2 { font-size: clamp(24px, 2.4vw, 32px); }
.sources { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--surface-5); }
.sources li { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--surface-5); font-size: 15px; }
.sources a { color: var(--type); text-underline-offset: 4px; text-decoration-color: var(--surface-6); }
.sources a:hover { text-decoration-color: var(--type); }
.sources span { color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; }

/* Contextual sibling links give athletes another useful route through Race
   Intelligence and give crawlers a distributed path between detail pages. */
.race-related { padding: clamp(48px, 7vw, 84px) 0; border-top: 1px solid var(--surface-5); }
.race-related > p { margin: 0 0 18px; color: var(--text-quiet); font-size: 13px; font-weight: 500; }
.race-related ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border: 1px solid var(--surface-5); }
.race-related li { min-width: 0; }
.race-related li:nth-child(n+4) { border-top: 1px solid var(--surface-5); }
.race-related li:not(:nth-child(3n+1)) { border-left: 1px solid var(--surface-5); }
.race-related a { min-height: 118px; display: grid; align-content: center; gap: 8px; padding: 20px; color: var(--type); text-decoration: none; }
.race-related a:hover, .race-related a:focus-visible { background: var(--surface-1); }
.race-related span { font-size: 14px; font-weight: 700; line-height: 1.35; }
.race-related small { color: var(--text-quiet); font-family: var(--font-body), system-ui, sans-serif; font-size: 11px; line-height: 1.45; }
@media (max-width: 760px) {
  .race-related ul { grid-template-columns: 1fr; }
  .race-related li:nth-child(n+2) { border-top: 1px solid var(--surface-5); }
  .race-related li:not(:nth-child(3n+1)) { border-left: 0; }
  .race-related a { min-height: 0; }
}

/* A clear return route for visitors comparing several races. */
.race-exit { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--surface-5); }
.race-exit > div { display: grid; gap: 7px; }
.race-exit > div span { color: var(--text-quiet); font-size: 13px; }
.race-exit > div strong { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -.025em; }
.race-exit a { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 18px; border: 1px solid var(--surface-6); color: var(--type); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.race-exit a:hover, .race-exit a:focus-visible { border-color: var(--type); }
@media (max-width: 760px) { .race-exit { align-items: start; flex-direction: column; } }

/* ---------- Motion ----------
   Slow change, not no change (spec §6). The trace draws itself once; content
   settles into place as it reaches the viewport, and each phase's track fills
   as it is read. Nothing moves under reduced motion or without timelines. */
@media (prefers-reduced-motion: no-preference) {
  .race-continue__cue i { animation: nudge 2.4s ease-in-out 3.5s infinite; }
  @keyframes nudge { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 4px; } 90% { translate: 0 0; } }

  @supports (animation-timeline: view()) {
    .section-head, .course-visual-grid, .decision-chapter, .weather-briefing, .model-grid, .confidence-preview, .next-step-actions, .next-steps-reading, .sources {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    @keyframes settle { from { opacity: 0; translate: 0 32px; } }
    .decision-track i { transform-origin: left center; animation: track-fill linear both; animation-timeline: view(); animation-range: entry 80% cover 42%; }
    @keyframes track-fill { from { scale: 0 1; } }
    .race-quote .pq p { animation: quote-in linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
    @keyframes quote-in { from { opacity: .12; } }
  }
}

/* ---------- Print: the generated Race Card only ---------- */
@media print {
  body > *:not(main), .race-page > :not(.race-opening), .race-rail, .race-opening > :not(.race-card-builder), .race-card-inputs, .race-card-share, .race-card-offer, .print-button, .prediction-explanation, .prediction-assumptions { display: none !important; }
  .race-page, .race-opening, .race-card-builder, .race-card-workspace, .race-card-output, .race-card-output__inner { display: block; position: static; border: 0; padding: 0; background: none; }
  .race-card-result, .race-card-result * { color: #000 !important; background: none !important; animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .decision-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-phase:only-child { grid-column: span 2; }
  .confidence-preview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-briefing { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .race-card-preview { display: none; }
  .race-opening .race-card-builder { padding-top: 0; }
  .race-card-workspace { grid-template-columns: 1fr; }
  .race-card-output { border-left: 0; border-top: 1px solid var(--surface-5); }
  .race-card-output__inner { position: static; }
}
@media (max-width: 760px) {
  .race-opening__hero { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .race-rail { margin-bottom: 0; }
  .race-rail ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .race-rail a { white-space: nowrap; min-height: 36px; align-items: center; }
  .race-opening__route { justify-self: start; width: min(180px, 48%); }
  .race-opening__route .course-map svg { max-height: 110px; }
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .race-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .race-facts > div { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--surface-5); }
  .race-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .race-facts > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--surface-5); }
  .course-visual-grid, .model-grid, .next-step-actions, .next-step-grid { grid-template-columns: 1fr; }
  .course-visual-grid { gap: 0; }
  .course-visual-card + .course-visual-card { border-top: 1px solid var(--surface-5); }
  .conditions-strip { grid-template-columns: 1fr; }
  .conditions-strip > div + div { border-left: 0; border-top: 1px solid var(--surface-5); }
  .decision-chapter__head { flex-direction: column; gap: 8px; }
  .decision-phases { grid-template-columns: 1fr; gap: 32px; }
  .decision-phase:only-child { grid-column: auto; }
  .next-step-action { min-height: 0; }
  .race-quote { min-height: 0; }
  .advanced-prediction-inputs summary { grid-template-columns: auto minmax(0, 1fr); }
  .advanced-summary__cta { grid-column: 2; justify-self: start; }
}
@media (max-width: 520px) {
  .race-card-inputs, .race-card-output__inner { padding: 22px 18px; }
  .race-hero h1 { font-size: clamp(34px, 10vw, 50px); }
  .range-bands .range-band { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); }
  .race-card-basics, .race-card-preferences { gap: 14px 12px; }
  .advanced-fields, .advanced-fields--three { grid-template-columns: 1fr; }
  .confidence-preview dl { grid-template-columns: 1fr; }
}


/* ---------- Conversion flow ----------
   The card is the first useful decision. Sharing, saving and commercial
   routes deliberately appear only after a valid result, so the opening
   remains about the athlete rather than the site asking for attention. */
.race-card-post-result { display: grid; gap: 24px; }
.race-card-post-result[hidden] { display: none; }
.race-card-save { border-top: 1px solid var(--surface-6); padding-top: 16px; }
.race-card-save > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; }
.race-card-save > summary::-webkit-details-marker { display: none; }
.race-card-save > summary::after { content: "+"; font-size: 20px; font-weight: 400; }
.race-card-save[open] > summary::after { content: "−"; }
.race-card-save > summary:focus-visible { outline: 2px solid var(--type); outline-offset: 2px; }
.race-card-save > :not(summary) { margin-top: 22px; }

.race-card-offer__links { gap: 0; border-top: 1px solid var(--surface-6); }
.race-card-offer__link { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 18px 0; border-bottom: 1px solid var(--surface-6); text-decoration: none; }
.race-card-offer__link > span { grid-column: 1 / -1; }
.race-card-offer__link > strong { font-size: 17px; }
.race-card-offer__link > small { align-self: end; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.race-card-offer__link--coaching { margin-inline: -14px; padding: 18px 14px; background: var(--accent-action); border-color: var(--accent-action); color: var(--type); }
.race-card-offer__link--coaching > span, .race-card-offer__link--coaching > small { color: var(--type); }
.race-card-offer__link--coaching:hover { background: color-mix(in srgb, var(--accent) 82%, var(--ground)); }

.next-steps-choices { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); border-top: 1px solid var(--surface-6); border-bottom: 1px solid var(--surface-6); }
.next-step-choice { display: grid; align-content: start; gap: 12px; min-height: 280px; padding: clamp(26px, 3vw, 44px); text-decoration: none; }
.next-step-choice + .next-step-choice { border-left: 1px solid var(--surface-6); }
.next-step-choice > span { font-size: 13px; color: var(--text-muted); }
.next-step-choice > strong { font-size: clamp(25px, 2.7vw, 38px); line-height: 1.08; letter-spacing: -.03em; max-width: 16ch; }
.next-step-choice > small { color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 16px; line-height: 1.6; max-width: 38ch; }
.next-step-choice > em { margin-top: auto; padding-top: 20px; font-size: 15px; font-style: normal; font-weight: 700; }
.next-step-choice--coaching { background: var(--accent-action); color: var(--type); }
.next-step-choice--coaching > span, .next-step-choice--coaching > small { color: var(--type); }
.next-step-choice--coaching:hover { background: color-mix(in srgb, var(--accent) 82%, var(--ground)); }
.next-step-choice--plan:hover > strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

@media (max-width: 760px) {
  .next-steps-choices { grid-template-columns: 1fr; }
  .next-step-choice { min-height: 0; }
  .next-step-choice + .next-step-choice { border-left: 0; border-top: 1px solid var(--surface-6); }
}


/* Calculator flow: the form reads as a short sequence, while the detail
   remains available for athletes who already have better evidence. */
.race-card-group__intro { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 14px; line-height: 1.55; margin: -8px 0 2px; max-width: 54ch; }
.race-card-group--numbers > .race-card-group__intro { clear: both; }
.race-card-submit { background: var(--accent-action); color: var(--type); }
.race-card-submit:hover { background: color-mix(in srgb, var(--accent) 82%, var(--ground)); }



/* The initial Race Card state is intentionally quiet: four inputs and one
   action. Unit and race-context choices stay close, but do not compete with
   the first decision. */
.race-card-group--numbers { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.race-card-group--numbers > legend { float: none; grid-column: 1; margin: 8px 0 0; }
.race-card-group--numbers > .race-card-basics { grid-column: 1 / -1; clear: none; }
.race-card-units { position: relative; z-index: 2; display: block; float: none; margin: 0; align-self: start; }
.race-card-units summary { cursor: pointer; color: var(--text-muted); font-size: 13px; list-style: none; padding: 8px 0; }
.race-card-units summary::-webkit-details-marker { display: none; }
.race-card-units summary::after { content: "+"; color: var(--text-quiet); margin-left: 8px; }
.race-card-units[open] summary::after { content: "−"; }
.race-card-units__controls { position: absolute; right: 0; top: 36px; display: flex; gap: 10px; padding: 14px; border: 1px solid var(--surface-6); background: var(--ground); box-shadow: 0 16px 40px var(--ground); }

@media (max-width: 600px) {
  .race-card-basics { grid-template-columns: 1fr; }
}


/* Optional field-position inputs feed the percentile, not the model. */
.race-results-profile { gap: 12px; }
.race-results-profile > legend { margin-bottom: 10px; }
.race-results-profile__intro { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.race-results-profile > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }
.race-results-profile input, .race-results-profile select { width: 100%; }
.projected-percentile { display: grid; gap: 9px; padding: 21px 0; border-top: 1px solid var(--surface-6); border-bottom: 1px solid var(--surface-6); }
.projected-percentile > p { margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.projected-percentile > strong { font-size: clamp(27px, 3vw, 43px); letter-spacing: -.04em; line-height: 1; text-transform: uppercase; }
.projected-percentile__strip { position: relative; height: 2px; margin: 8px 0 2px; background: var(--surface-6); }
.projected-percentile__strip i { position: absolute; top: -7px; width: 3px; height: 16px; background: var(--accent); transform: translateX(-50%); }
.projected-percentile__splits { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 18px; color: var(--text-muted); font-size: 13px; }
.projected-percentile__splits strong { color: var(--type); }
@media (max-width: 520px) { .race-results-profile > div { grid-template-columns: 1fr; } }/* The same section links remain usable when the fixed desktop rail cannot fit. */
@media (max-width: 1279px) {
  .race-rail { display: block; margin-bottom: clamp(32px, 5vh, 56px); padding: 0 0 18px; border-bottom: 1px solid var(--surface-5); }
  .race-rail__mark { display: none; }
  .race-rail ol { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
  .race-rail a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text-quiet); font-size: 13px; text-decoration: none; }
  .race-rail a:hover, .race-rail a:focus-visible { color: var(--type); text-decoration: underline; text-underline-offset: 4px; }
  .race-rail em { font-style: normal; }
}


/* Fresh visitors see four explained inputs and one action before optional detail. */
.race-card-form .race-card-basics > label:not(.unit-switch label) { grid-row: span 3; }
.field-help { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 12px; line-height: 1.5; }
.race-results-comparison { margin-top: 0; padding-top: 0; border-top: 0; }
.race-results-comparison > summary { min-height: 44px; }
.race-results-comparison > fieldset { margin-top: 16px; }
.course-facts-details { margin-top: 20px; }
.course-facts-details .course-specs { margin-top: 18px; }
.decision-chapter { gap: 8px; padding-block: 28px; }
.decision-chapter__head { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
.decision-chapter h3 { font-size: 20px; }
.decision-chapter__priority { color: var(--text-soft); font-family: var(--font-body), system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
.decision-details { margin: 0; border-top: 0; padding-top: 8px; }
.decision-details > .decision-phases { max-width: none; margin-top: 24px; }
.race-section { padding-block: clamp(48px, 8vh, 88px); }
.race-section h2, .race-model-panel h2 { font-size: clamp(28px, 3.2vw, 44px); max-width: 22ch; line-height: 1.1; }
.section-head { margin-bottom: 32px; }
@media (max-width: 760px) {
  .decision-chapter__head { grid-template-columns: 1fr; gap: 8px; }
  .race-opening > .race-rail { min-width: 0; margin-bottom: 0; padding-bottom: 12px; }
}

.prediction-window-help { color: var(--text-muted); font-family: var(--font-body), system-ui, sans-serif; font-size: 13px; line-height: 1.55; margin-bottom: 20px !important; }

@media (max-width: 520px) { .range-bands .range-band { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); } }

.race-card-builder { scroll-margin-top: 92px; }
.race-hero__calculator-link { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; color: var(--type); font-size: 15px; font-weight: 700; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .race-opening > .race-rail ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .race-opening > .race-rail a { white-space: nowrap; }
}
/* Predictor first, editorial dossier second. Shared components keep the model contract. */
.race-page--editorial { --text-muted: color-mix(in srgb, var(--type) 75%, var(--ground)); --text-soft: color-mix(in srgb, var(--type) 88%, var(--ground)); max-width: 1240px; padding-top: clamp(112px, 12vh, 152px); }
.race-page--editorial .race-opening { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 80px); align-items: start; }
.race-page--editorial .race-opening__hero { display: block; min-height: 0; }
.race-page--editorial .race-hero h1 { font-size: clamp(36px, 4.4vw, 62px); max-width: 15ch; line-height: 1.04; margin: 20px 0; }
.race-page--editorial .race-hero__summary { font-size: 17px; line-height: 1.6; max-width: 38ch; color: var(--text-muted); }
.race-page--editorial .race-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border: 0; gap: 14px; }
.race-page--editorial .race-facts > div { padding: 0; border: 0; }
.race-page--editorial .race-facts > div:first-child { grid-column: 1 / -1; }
.race-page--editorial .race-facts dt { font-size: 12px; }
.race-page--editorial .race-facts dd { font-size: 15px; }
.race-page--editorial .verification { font-size: 12px; max-width: 50ch; line-height: 1.6; }
.race-page--editorial .race-opening__route { margin-top: 26px; width: 70%; max-width: 260px; opacity: .72; }
.race-page--editorial .course-map svg { max-height: 140px; }
.race-page--editorial .race-card-workspace { display: block; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--surface-5); border-radius: 14px; background: linear-gradient(145deg, var(--surface-2), var(--ground) 78%); box-shadow: 0 34px 100px rgba(0, 0, 0, .3); overflow: visible; }
.race-page--editorial .race-card-inputs { padding: 0; }
.race-page--editorial .race-card-heading > .section-label { display: flex; align-items: center; gap: 9px; }
.race-page--editorial .race-card-heading > .section-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); }
.race-page--editorial .race-card-heading h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 12px 0 10px; letter-spacing: -.035em; }
.race-page--editorial .race-card-heading > p:last-child { font-size: 14px; }
.race-page--editorial .race-card-form { margin-top: 24px; gap: 18px; }
.race-page--editorial .race-card-group--numbers > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.race-page--editorial .race-card-units { float: none; justify-content: flex-end; margin-bottom: 12px; }
.race-page--editorial .race-card-basics { gap: 10px 18px; }
.race-page--editorial .race-card-form input:not([type="checkbox"], [type="radio"]), .race-page--editorial .race-card-form select { background-color: var(--ground); border-radius: 7px; height: 48px; }
.race-page--editorial .field-help { font-size: 11px; line-height: 1.5; color: var(--text-quiet); }
.race-page--editorial .race-card-submit { min-height: 48px; border-radius: 8px; }
.race-page--editorial .race-card-errors:empty { display: none; }
.race-page--editorial .benchmark-help { margin-top: 14px; padding-top: 0; border: 0; font-size: 12px; }
.race-page--editorial .advanced-prediction-inputs { border: 0; border-top: 1px solid var(--surface-5); background: transparent; }
.race-page--editorial .advanced-prediction-inputs > summary { display: flex; padding: 14px 0; min-height: 44px; justify-content: space-between; gap: 16px; }
.race-page--editorial .advanced-summary__text strong { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.race-page--editorial .advanced-prediction-inputs > summary::after { content: "+"; color: var(--text-quiet); font-size: 20px; }
.race-page--editorial .advanced-prediction-inputs[open] > summary::after { content: "−"; }
.race-page--editorial .advanced-input-heading { display: none; }
.race-page--editorial .advanced-input-groups { margin: 0; }
.race-page--editorial .advanced-evidence { border-bottom: 1px solid var(--surface-5); }
.race-page--editorial .advanced-evidence > summary { padding: 14px 0; min-height: 44px; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.race-page--editorial .advanced-input-group { padding-inline: 0; }
.race-page--editorial .advanced-prediction-inputs .race-card-group { padding: 12px 0 20px; }
.race-page--editorial .race-results-comparison > summary { color: var(--text-muted); font-size: 14px; }
.race-page--editorial .race-card-output { margin-top: 32px; background: transparent; border: 0; border-top: 1px solid var(--surface-5); }
.race-page--editorial .race-card-output[hidden] { display: none; }
.race-page--editorial .race-card-output__inner { position: static; padding: 28px 0 0; gap: 16px; }
.race-page--editorial .prediction-explanation { margin-top: 24px; }
.race-page--editorial .prediction-explanation summary { font-size: 14px; }
.race-page--editorial .prediction-window-help { margin-top: 20px; }
.race-page--editorial .next-input { margin: 20px 0; }
.race-page--editorial .projected-percentile { margin-top: 24px; padding: 20px 0; border: 0; border-top: 1px solid var(--surface-5); background: transparent; }
.race-page--editorial .reader-details summary::before { border: 0; width: auto; font-size: 18px; }
.race-page--editorial .reader-details[open] > summary::before { content: "−"; }
.race-briefing-flow { margin-top: clamp(72px, 10vh, 112px); border-top: 1px solid var(--surface-5); }
.race-page--editorial .race-section--briefing { padding: clamp(48px, 7vw, 88px) 0 32px; }
.dossier-intro { max-width: 850px; }
.race-page--editorial .dossier-intro h2 { font-size: clamp(30px, 3.7vw, 48px); line-height: 1.15; letter-spacing: -.035em; max-width: 27ch; margin: 18px 0 24px; text-wrap: balance; }
.dossier-intro__summary { color: var(--text-muted); font: 17px/1.8 var(--font-body), system-ui, sans-serif; max-width: 72ch; }
.dossier-pivot { padding-left: 22px; border-left: 2px solid var(--accent); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 850px; margin: 36px 0 52px; }
.dossier-pivot p { color: var(--text-soft); font: 16px/1.6 var(--font-body), system-ui, sans-serif; }
.dossier-pivot span { display: block; margin-bottom: 8px; color: var(--text-quiet); font: 12px var(--font-display), system-ui, sans-serif; }
.dossier-chapters { display: grid; gap: 18px; }
.dossier-chapter { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 4fr); gap: clamp(24px, 5vw, 72px); padding: clamp(28px, 3.5vw, 44px); border: 1px solid var(--surface-5); border-radius: 12px; background: linear-gradient(125deg, var(--surface-1), var(--ground) 84%); }
.dossier-chapter__label { display: flex; gap: 18px; align-items: baseline; }
.dossier-chapter__label > span { color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.dossier-chapter__label > p { font-size: 15px; font-weight: 500; }
.dossier-chapter__label small { display: block; color: var(--text-quiet); margin-top: 6px; font-size: 12px; font-weight: 400; }
.dossier-chapter__text { max-width: 76ch; }
.dossier-chapter__text > h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; font-weight: 600; letter-spacing: -.025em; margin: 0 0 16px; }
.dossier-chapter__summary { color: var(--text-muted); font: 16px/1.75 var(--font-body), system-ui, sans-serif; }
.race-page--editorial .dossier-chapter .reader-details { margin-top: 18px; padding: 0; border: 0; }
.race-page--editorial .dossier-chapter summary { color: var(--text-quiet); font-size: 13px; min-height: 44px; }
.race-page--editorial .dossier-chapter summary:hover { color: var(--type); }
.dossier-chapter__detail { padding-top: 24px; color: var(--text-muted); font: 15px/1.7 var(--font-body), system-ui, sans-serif; }
.dossier-chapter__detail h4, .dossier-chapter__detail .decision-phase h5 { color: var(--text-soft); font-size: 18px; line-height: 1.4; margin-bottom: 14px; }
.race-page--editorial .dossier-chapter .course-specs { margin-top: 22px; }
.race-page--editorial .dossier-chapter .decision-phases { display: grid; grid-template-columns: 1fr; margin: 28px 0; padding: 0; list-style: none; gap: 24px; }
.race-page--editorial .dossier-chapter .decision-phase { border: 0; border-top: 1px solid var(--surface-5); padding: 20px 0 0; }
.dossier-mistakes { margin-top: 32px; }
.dossier-mistakes > div { margin-top: 24px; }
.dossier-mistakes h5 { font-size: 17px; font-weight: 600; color: var(--text-soft); margin: 10px 0; }
.dossier-footnote { padding-top: 20px; display: flex; justify-content: space-between; align-items: start; gap: 24px; color: var(--text-quiet); margin-top: 8px; }
.race-page--editorial .dossier-ratings { margin: 0; padding: 0; border: 0; }
.dossier-ratings summary { min-height: 44px; font-size: 13px; }
.dossier-ratings dl { display: grid; gap: 12px; min-width: 180px; margin-top: 16px; font-size: 13px; }
.dossier-ratings dl > div { display: flex; justify-content: space-between; gap: 28px; }
.dossier-ratings dd { margin: 0; text-transform: capitalize; }
.dossier-weather { border-top: 1px solid var(--surface-5); }
.dossier-weather summary > span { display: flex; align-items: baseline; gap: 20px; }
.dossier-weather summary small { font-weight: 400; font-size: 12px; color: var(--text-quiet); }
.dossier-coaching { margin: clamp(64px, 9vw, 112px) 0; max-width: 690px; }
.dossier-coaching h2 { font-size: clamp(30px, 3.5vw, 44px); font-weight: 600; letter-spacing: -.035em; margin: 16px 0; }
.dossier-coaching > p:not(.section-label) { color: var(--text-muted); font: 16px/1.75 var(--font-body), system-ui, sans-serif; }
.dossier-coaching__link { display: inline-flex; gap: 20px; align-items: center; min-height: 44px; margin: 20px 0 12px; color: var(--type); font-size: 15px; text-underline-offset: 5px; }
.dossier-coaching .dossier-coaching__plan { font-size: 13px !important; }
.dossier-coaching__plan a { color: var(--text-soft); text-underline-offset: 4px; }
.dossier-reading { margin-top: 28px; }
.dossier-reading summary { font-size: 13px; color: var(--text-muted); }
.dossier-reading ul { padding-left: 20px; }
.dossier-reading li { margin: 20px 0; }
.dossier-reading p { font-size: 14px; }
.race-reference { border-top: 1px solid var(--surface-5); }
.race-method-link { display: flex; justify-content: space-between; align-items: baseline; gap: 36px; padding: 24px 0; border-bottom: 1px solid var(--surface-5); }
.race-method-link p { max-width: 68ch; color: var(--text-quiet); font: 13px/1.7 var(--font-body), system-ui, sans-serif; }
.race-method-link strong { font-weight: 500; color: var(--text-muted); }
.race-method-link a { flex: 0 0 auto; font-size: 13px; color: var(--text-soft); text-decoration: none; }
.race-method-link a:hover { text-decoration: underline; }
/* Links each race to the collections it belongs to, in the page content rather than a <nav>,
   which is what lets the hubs count as linked from content (sense-handoff #156). */
.race-collections { margin: 0; padding: 20px 0 0; color: var(--text-quiet); font: 13px/1.7 var(--font-body), system-ui, sans-serif; }
.race-collections a { color: var(--text-soft); }
.race-reference__details { border-bottom: 1px solid var(--surface-5); }
.race-reference__details > summary { min-height: 68px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.race-reference__details > summary::-webkit-details-marker { display: none; }
.race-reference__details > summary::after { content: "+"; color: var(--text-quiet); font-size: 20px; }
.race-reference__details[open] > summary::after { content: "−"; }
.race-reference__body { padding: 16px 0 40px; }
.race-reference__body.race-sources > h2 { margin: 0 0 20px; font-size: 24px; }
.race-reference__body.race-sources > p { max-width: 68ch; color: var(--text-muted); font: 14px/1.7 var(--font-body), system-ui, sans-serif; }
.race-related--quiet { margin-top: 56px; padding-top: 0; border-top: 0; }
.race-related__head { padding-bottom: 16px; border-bottom: 1px solid var(--surface-5); }
.race-related__head > p { margin: 0; font-size: 13px; color: var(--text-quiet); }
.race-related--quiet ul { margin-top: 0; }
@media (max-width: 900px) {
  .race-page--editorial .race-opening { grid-template-columns: 1fr; gap: 36px; }
  .race-page--editorial .race-opening__hero { position: relative; }
  .race-page--editorial .race-hero h1 { font-size: clamp(36px, 7vw, 58px); max-width: 22ch; }
  .race-page--editorial .race-opening__route { display: none; }
  .race-page--editorial .race-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .race-page--editorial .race-facts > div:first-child { grid-column: auto; }
  .race-page--editorial .race-opening__prediction { max-width: 650px; }
  .dossier-chapter { grid-template-columns: 100px minmax(0, 1fr); gap: 24px; }
  .race-method-link { display: grid; gap: 12px; }
}
@media (max-width: 520px) {
  .race-page--editorial { padding-top: 96px; }
  .race-page--editorial .race-hero h1 { font-size: 38px; max-width: 16ch; }
  .race-page--editorial .race-hero__summary { font-size: 15px; }
  .race-page--editorial .race-facts { gap: 12px; margin-top: 22px; }
  .race-page--editorial .race-facts dd { font-size: 13px; }
  .race-page--editorial .race-facts dt { font-size: 11px; }
  .race-page--editorial .race-card-workspace { padding: 22px 18px; border-radius: 12px; }
  .race-page--editorial .race-card-basics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  .race-page--editorial .field-label { display: block; font-size: 13px; }
  .race-page--editorial .field-label small { display: block; margin-top: 4px; font-size: 10px; }
  .race-briefing-flow { margin-top: 64px; }
  .dossier-intro__summary { font-size: 16px; }
  .dossier-pivot { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .dossier-chapter { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  .dossier-chapter__label { gap: 12px; }
  .dossier-chapter__label > p { display: flex; gap: 14px; align-items: baseline; }
  .dossier-chapter__label small { margin: 0; }
  .dossier-chapter__summary { font-size: 15px; }
  .dossier-footnote { flex-direction: column; gap: 12px; }
  .dossier-weather summary > span { display: grid; gap: 4px; }
}
/* Match the site's native scroll-timeline settling without hiding content
   behind JavaScript. Reduced motion and unsupported browsers stay static. */
@media screen and (prefers-reduced-motion: no-preference) {
  .race-page--editorial .race-card-workspace { animation: predictor-in 700ms cubic-bezier(.2, .72, .24, 1) both; }
  @keyframes predictor-in { from { opacity: 0; transform: translateY(16px); } }
  @supports (animation-timeline: view()) {
    .dossier-intro, .dossier-pivot, .dossier-chapter, .dossier-coaching {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}
@media print {
  html:has(.race-page--editorial), body:has(.race-page--editorial) { background: white; color: black; color-scheme: light; }
  .race-page--editorial .race-opening::before { display: none; }
  .race-page--editorial { padding: 0; max-width: none; }
  .race-page--editorial .race-card-workspace { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .race-page--editorial .race-opening > .race-opening__prediction { display: block !important; }
  .race-page--editorial .race-card-output { margin: 0; border: 0; background: none; }
  .race-page--editorial .race-card-output__inner { padding: 0; }
  .race-page--editorial #race-card-post-result { display: none !important; }
  .race-page--editorial .race-opening { display: block; }
  .race-page--editorial .race-opening__route { display: none; }
  .race-page--editorial .race-card-output { display: block; }
  .race-page--editorial details:not(.advanced-prediction-inputs) > :not(summary) { display: block; }
}
/* A coaching sequence first; supporting route evidence stays optional. */
.race-page--editorial .chapter-plan { margin-top: 32px; }
.race-page--editorial .chapter-evidence { border-top: 1px solid var(--surface-5); margin-top: 32px; padding-top: 12px; }
.chapter-evidence__body { padding-top: 20px; }
.chapter-evidence__body > p { margin-top: 18px; }
/* Queue #164: recover the mobile opening pass after the Work session expired. */
@media (max-width: 520px) {
  .race-page--editorial { padding-top: 72px; }
  .race-page--editorial .race-opening { gap: 24px; }
  .race-page--editorial .race-hero h1 { margin: 12px 0; }
  .race-page--editorial .race-hero__summary { line-height: 1.5; }
  .race-page--editorial .race-facts { margin-top: 16px; gap: 8px; }
  .race-page--editorial .race-card-workspace { padding-block: 18px; }
  .race-page--editorial .race-card-heading h2 { margin-block: 8px 6px; }
  .race-page--editorial .race-card-form { margin-top: 16px; gap: 12px; }
  .race-page--editorial .race-card-units { margin-bottom: 8px; }
  .race-page--editorial .race-card-basics { row-gap: 6px; }
}

/* Scope disclosure state to the direct summary. Opening a coaching chapter must
   not turn a still-closed nested evidence disclosure into a minus. */
.race-page--editorial .reader-details > summary::before {
  border: 0;
  width: auto;
  font-size: 18px;
}
.race-page--editorial .reader-details[open] > summary::before { content: "−"; }
.race-opening__promise {
  margin: 0 0 18px;
  max-width: 54ch;
  color: var(--text-muted);
  font: 14px/1.65 var(--font-body), system-ui, sans-serif;
}

.dossier-intro__story {
  max-width: 64ch;
  margin-top: 24px;
  color: var(--text-soft);
  font: 18px/1.75 var(--font-body), system-ui, sans-serif;
}

.dossier-chapter__moment {
  margin: 0 0 8px;
  color: var(--accent);
  font: 11px/1.4 var(--font-display), system-ui, sans-serif;
  letter-spacing: .08em;
}

.race-week-intro {
  max-width: 60ch;
  margin: 0 0 28px;
  color: var(--text-soft);
  font: 17px/1.7 var(--font-body), system-ui, sans-serif;
}

.prediction-method-link {
  margin-top: 18px;
  font-size: 12px;
}
.prediction-method-link a { color: var(--text-quiet); text-underline-offset: 4px; }
.projected-percentile > p, .projected-percentile > strong { text-transform: none; }
.projected-percentile--prompt > p, .projected-percentile--prompt > strong { letter-spacing: normal; line-height: 1.5; }
.projected-percentile small { display: block; margin-top: 6px; color: var(--text-quiet); font-size: 11px; }
.projected-percentile--prompt strong { display: block; margin-top: 6px; font-size: 13px; color: var(--text-soft); }

.race-page--editorial .dossier-coaching {
  max-width: none;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--surface-5);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--surface-2), var(--ground) 74%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .22);
}
.race-page--editorial .dossier-coaching h2 { max-width: 17ch; font-size: clamp(34px, 4.4vw, 58px); }
.race-page--editorial .dossier-coaching__lead { max-width: 58ch; font-size: 18px !important; color: var(--text-soft) !important; }
.race-page--editorial .dossier-coaching > p:not(.section-label) { max-width: 68ch; }
.race-page--editorial .dossier-coaching__link {
  padding: 0 20px;
  margin-top: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--ground);
  text-decoration: none;
  font-weight: 600;
}

.race-page--editorial .race-reference { margin-top: 64px; opacity: .82; }
.race-page--editorial .race-method-link { padding: 16px 0; justify-content: flex-start; border-bottom: 0; }
.race-page--editorial .race-reference__details--sources > summary { min-height: 48px; font-size: 12px; font-weight: 400; }
.race-page--editorial .race-reference__details--sources .race-reference__body { padding: 8px 0 28px; }
.race-page--editorial .race-reference__details--sources .race-reference__body > h2 { font-size: 16px; }
.race-page--editorial .race-reference__details--sources .race-reference__body > p,
.race-page--editorial .race-reference__details--sources .sources { font-size: 12px; }

@media (max-width: 520px) {
  .race-opening__promise { margin-bottom: 12px; font-size: 13px; }
  .dossier-intro__story { font-size: 16px; }
  .race-page--editorial .dossier-coaching { padding: 28px 20px; border-radius: 12px; }
  .race-page--editorial .dossier-coaching h2 { font-size: 34px; }
  .race-page--editorial .dossier-coaching__lead { font-size: 16px !important; }
  .race-page--editorial .dossier-coaching__link { width: 100%; justify-content: space-between; }
}

@media print {
  .race-opening__promise, .prediction-method-link, .next-input, .projected-percentile--prompt, .projected-percentile--unavailable { display: none !important; }
}