/* pwa.healthspanbydesign.co — one stylesheet for joel/index.html, joel/booked.html and the pages
   joel/checkout.php can show. Dr Joel's page, in Healthspan by Design's own palette and type.

   This file is the root styles.css with the palette inverted and the brand swapped: the structure, the
   class names and the components are deliberately identical, so the two pages stay the same machine and a
   fix to one is a fix worth making to the other. What changed is everything a visitor sees.

   The palette, the type and the tokens are not invented. They are lifted from Healthspan by Design's own
   locked design system, hslp/assets/css/funnel.css in the Joel Website repo (read 7 Oct 2026), which is
   what apply.healthspanbydesign.co already runs on: navy ink on an off-white ground, teal for action, gold
   used sparingly. Andrés's page is dark slate and KYP green; nothing of that survives here. */
/* Source Serif 4 for headings and Montserrat for body, self-hosted, the same two woff2 files his funnel
   already preloads. Self-hosted for the reason the root file gives: a stylesheet on another origin sits on
   the critical path and cost about 1.2 s on a phone. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/sourceserif4-latin-normal.woff2?v=f2ea9c12d2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-normal.woff2?v=06b16db7a9") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Healthspan by Design, from his own funnel.css. --color-heading is new: the root file writes #fff for
   every heading because it sits on a dark ground, and on an off-white one that is invisible. */
:root {
  --color-primary: #3A7A8C; --color-secondary: #B98A3E; --color-accent: #3A7A8C; --color-highlight: #B98A3E;
  --color-primary-bright: #4E9DB0; --color-primary-700: #2F6675;
  --color-bg: #F1F6F7; --color-bg-deep: #FBFAF8; --color-surface: #FFFFFF; --color-surface-solid: #FFFFFF;
  --color-line: rgba(30, 77, 92, 0.12); --color-line-strong: rgba(30, 77, 92, 0.20);
  --color-heading: #163A46; --color-text: #1E4D5C; --color-text-muted: #51607A; --color-text-dim: #646E82;/* #646E82 is 4.5:1+ on #FBFAF8; his system notes #8995A6 failed at 2.9:1 */
  --color-navy-deep: #0E2A33; --color-on-dark: #EAF1F2; --color-on-dark-muted: #A9C0C6;
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif; --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --radius: 14px; --radius-pill: 999px;
  --duration-fast: 150ms; --duration-normal: 300ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --measure: 62ch;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg-deep); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
.wrap { width: min(100% - 2 * var(--space-6), 1120px); margin-inline: auto; }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary); }
.muted { color: var(--color-text-muted); }
.measure { max-width: var(--measure); }
.link { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--color-primary-700); }

/* Buttons: the apply page's green pill with the cyan-to-blue hover sweep */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-base); font-family: inherit; letter-spacing: 0.01em; text-decoration: none; border: 0; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform var(--duration-fast) var(--easing-default), box-shadow var(--duration-normal) var(--easing-default); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 2px 10px rgba(30, 77, 92, 0.18); }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--color-primary-bright), var(--color-primary-700)); opacity: 0; transition: opacity var(--duration-normal) var(--easing-default); }
.btn-primary:hover::after, .btn-primary:focus-visible::after { opacity: 1; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(30, 77, 92, 0.26); }
.btn-ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-line); }
.btn-ghost:hover { border-color: var(--color-secondary); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* While the server is opening the Stripe session. The button is disabled the instant the form is taken, so a second
   press cannot make a second Checkout Session; it says what is happening rather than just going dull. */
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }
.btn[disabled]:hover { transform: none; }
.btn[disabled]:hover::after, .btn[disabled]::after { opacity: 0; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 248, 0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.nav img { height: 32px; width: auto; }
.nav .btn { padding: 10px 20px; font-size: var(--text-sm); white-space: nowrap; }
@media (max-width: 480px) { .nav .btn { padding: 9px 14px; font-size: var(--text-xs); } }
@media (min-width: 768px) { .nav img { height: 40px; } }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: var(--space-16) var(--space-20); background: var(--color-bg); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 78% 18%, rgba(58, 122, 140, 0.16), rgba(58, 122, 140, 0) 60%); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(241, 246, 247, 0) 0%, rgba(241, 246, 247, 0.5) 70%, var(--color-bg-deep) 100%); }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: var(--space-8); align-items: end; }
.hero-copy { display: grid; gap: var(--space-6); max-width: 640px; }
/* The founder, large, on the right. A cut-out portrait over a soft KYP-green glow, its lower edge fading into the
   section so it reads as part of the page and not a sticker. Samar, 14 Sep 2026: "a premium coaching business";
   the 112px thumbnails read as a video game character. There is no photo of Andrés and Dr. Joel together on
   record (Drive, every repo, the site mirror, searched 14 Sep), so the hero is Andrés and Dr. Joel is large below. */
.hero-media { position: relative; margin: 0; justify-self: center; width: min(100%, 400px); }
.hero-media::before { content: ""; position: absolute; inset: 14% -12% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(58, 122, 140, 0.30), rgba(58, 122, 140, 0)); filter: blur(18px); }
/* The root file fades the portrait into a dark page. On an off-white ground that fade reads as a hard cut,
   so here the portrait is a framed card instead: rounded, hairlined and lifted, which is how his own
   funnel pages treat imagery. */
.hero-media img { position: relative; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-line); box-shadow: 0 18px 40px rgba(30, 77, 92, 0.14); }
.hero-media figcaption { position: relative; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; max-width: 34ch; margin-inline: auto; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: var(--space-12); }
  .hero-media { width: 100%; max-width: 500px; justify-self: end; }
  .hero-media figcaption { text-align: left; margin-inline: 0; }
}
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); font-weight: 800; color: var(--color-heading); }
.hero h1 em { font-style: italic; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--measure); }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hero .fine { font-size: var(--text-sm); color: var(--color-text-dim); }
.hero.plain { padding-block: var(--space-20) var(--space-16); }

/* Sections */
section { padding-block: var(--space-16); }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 760px; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; color: var(--color-heading); }
.section-head p { color: var(--color-text-muted); font-size: var(--text-lg); }

.cases { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .cases { grid-template-columns: 1fr 1fr; } }
.case { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-line); }
.case .tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.case h3 { font-size: var(--text-xl); color: var(--color-heading); }
.case p { color: var(--color-text-muted); }

.includes { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .includes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .includes { grid-template-columns: repeat(4, 1fr); } }
.item { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface-solid); }
.item .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(58, 122, 140, 0.14), rgba(185, 138, 62, 0.10)); color: var(--color-secondary); }
.item .ico svg { width: 22px; height: 22px; }
.item h3 { font-size: var(--text-lg); color: var(--color-heading); }
.item p { color: var(--color-text-muted); font-size: var(--text-sm); }
.more { margin-top: var(--space-4); padding: var(--space-6); border-radius: var(--radius); border: 1px dashed rgba(58, 122, 140, 0.42); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--color-text-muted); }
.more strong { color: var(--color-heading); }

.people { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .people { grid-template-columns: 1fr 1fr; } }
.person { display: grid; grid-template-columns: minmax(200px, 44%) 1fr; gap: var(--space-6); align-items: center; padding: var(--space-6); border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-line); }
.person img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; border-radius: 12px; border: 1px solid var(--color-line); }
.person h3 { font-size: var(--text-lg); color: var(--color-heading); }
.person .role { font-size: var(--text-sm); color: var(--color-secondary); font-weight: 600; margin-bottom: var(--space-2); }
.person p { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 560px) { .person { grid-template-columns: 1fr; } .person img { width: 100%; max-width: 360px; } }

.steps { display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: var(--space-6) var(--space-6) var(--space-6) 64px; border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface-solid); }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 20px; top: 22px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--text-sm); color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700)); }
.step h3 { font-size: var(--text-lg); color: var(--color-heading); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Build your assessment: choices on the left, the running total on the right (stacked on phones) */
.build { background: var(--color-bg); border-block: 1px solid var(--color-line); }
.build-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .build-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; } }
.build fieldset { border: 0; padding: 0; margin: 0 0 var(--space-8); min-width: 0; display: grid; gap: var(--space-3); }
.build fieldset:last-of-type { margin-bottom: 0; }
/* What every option includes, and the expandable breakdown of the bloodwork panel: sits above Step 1 so the
   answer to "what does the price include" is read before the prices are. */
.build-includes { display: grid; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-6); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface-solid); }
.build-includes-label { margin: 0; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--color-secondary); }
.build-includes ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.build-includes li { color: var(--color-text-muted); font-size: var(--text-sm); }
.panel-detail { border-top: 1px solid var(--color-line); padding-top: var(--space-3); }
.panel-detail summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--color-secondary); list-style: none; }
.panel-detail summary::-webkit-details-marker { display: none; }
.panel-detail summary::before { content: "+ "; }
.panel-detail[open] summary::before { content: "\2013 "; }
.panel-detail summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.panel-detail-lede { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-dim); }
.panel-detail-grid { display: grid; gap: var(--space-4); margin-top: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.panel-detail-grid h4 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); margin: 0 0 4px; }
.panel-detail-grid p { font-size: var(--text-xs); color: var(--color-text-muted); }
.build legend { padding: 0; margin-bottom: var(--space-4); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); }
.build legend span { color: var(--color-text-dim); font-weight: 500; letter-spacing: 0; text-transform: none; }
.choice { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-4) var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface-solid); cursor: pointer; transition: border-color var(--duration-fast) var(--easing-default), background var(--duration-fast) var(--easing-default); }
.choice:hover { border-color: rgba(58, 122, 140, 0.5); }
.choice.is-checked, .choice:has(input:checked) { border-color: var(--color-primary); background: rgba(58, 122, 140, 0.08); }
.choice input { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; border: 2px solid var(--color-text-dim); border-radius: 6px; background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; }
.choice input[type="radio"] { border-radius: 50%; }
.choice input::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: #fff; transform: scale(0); transition: transform var(--duration-fast) var(--easing-default); }
.choice input[type="radio"]::before { border-radius: 50%; }
.choice input:checked { border-color: var(--color-primary); background: var(--color-primary); }
.choice input:checked::before { transform: scale(1); }
.choice input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.choice .text { color: var(--color-text); font-weight: 500; line-height: 1.4; }
.choice .note { display: inline-block; margin-left: var(--space-2); padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-highlight); border: 1px solid rgba(185, 138, 62, 0.45); vertical-align: middle; }
.choice .price { font-weight: 700; color: var(--color-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .choice { grid-template-columns: 24px minmax(0, 1fr); row-gap: var(--space-1); } .choice .price { grid-column: 2; } }

.summary { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: 20px; background: linear-gradient(135deg, rgba(58, 122, 140, 0.10), rgba(185, 138, 62, 0.07)); border: 1px solid var(--color-line-strong); scroll-margin-top: 92px; }
@media (min-width: 900px) { .summary { position: sticky; top: 92px; } }
.summary .label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.summary .total { display: block; font-size: var(--text-5xl); font-weight: 800; line-height: 1; color: var(--color-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.summary .micro { font-size: var(--text-sm); color: var(--color-text-muted); }
.summary .credit { font-size: var(--text-sm); color: var(--color-primary-700); padding: var(--space-3) var(--space-4); border-radius: 10px; background: #fff; border: 1px solid var(--color-line-strong); }
.summary .btn { width: 100%; margin-top: var(--space-2); }
.summary .trust { font-size: var(--text-xs); color: var(--color-text-dim); text-align: center; }
/* Under the pay button: the quieter path for anyone who will not put $2,500 on a card before speaking to a person. */
.summary .talk { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
/* Shown only when Stripe sends someone back without paying, so the page can say so rather than leave them guessing. */
.summary .notice { font-size: var(--text-sm); color: var(--color-text); background: rgba(58, 122, 140, 0.10); border: 1px solid rgba(58, 122, 140, 0.45); border-radius: 10px; padding: var(--space-3) var(--space-4); }
.summary .notice[hidden] { display: none; }

/* The running total on a phone. Below 900px the summary is stacked after every option, about a screen below the fold
   while choosing (measured 10 Sep 2026), so a compact bar fixed to the bottom mirrors it. index.html shows it only while
   the builder is on screen and the real summary is not. Sits under the sticky nav (z 50), clears the iPhone home bar. */
.summary-bar { display: none; }
@media (max-width: 899px) {
  .summary-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: rgba(251, 250, 248, 0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--color-line-strong); box-shadow: 0 -8px 24px rgba(30, 77, 92, 0.14); }
  .summary-bar[hidden] { display: none; }
  .summary-bar-text { display: grid; line-height: 1.15; min-width: 0; }
  .summary-bar-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
  .summary-bar-total { font-size: var(--text-2xl); font-weight: 800; color: var(--color-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .summary-bar .btn { padding: 10px 18px; font-size: var(--text-sm); white-space: nowrap; flex: none; }
}

.options { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .options { grid-template-columns: repeat(3, 1fr); } }
.option { padding: var(--space-6); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface); }
.option h3 { font-size: var(--text-lg); color: var(--color-heading); margin-bottom: var(--space-2); }
.option p { color: var(--color-text-muted); font-size: var(--text-sm); }

.band { padding: var(--space-12) var(--space-6); border-radius: 20px; text-align: center; display: grid; gap: var(--space-4); justify-items: center; background: linear-gradient(135deg, rgba(58, 122, 140, 0.10), rgba(185, 138, 62, 0.07)); border: 1px solid var(--color-line-strong); }
.band h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--color-heading); font-weight: 800; }
.band p { color: var(--color-text-muted); max-width: 56ch; }
.band .fine { font-size: var(--text-sm); }

/* Plain pages: booked.html and the pages checkout.php can show */
.plain-page { min-height: 60vh; display: grid; align-content: start; gap: var(--space-6); padding-block: var(--space-20) var(--space-24); max-width: 720px; }
.plain-page h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; color: var(--color-heading); }
.plain-page p { color: var(--color-text-muted); font-size: var(--text-lg); }
.plain-page .actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.plain-page .reach { font-size: var(--text-base); color: var(--color-text-muted); }
.policy h2 { font-size: var(--text-xl); font-weight: 700; color: var(--color-heading); margin-top: var(--space-4); }
.policy .fine { font-size: var(--text-sm); color: var(--color-text-dim); }
/* What a person who has just paid is shown: the amount, what it bought, and the reference to quote. */
.receipt { display: grid; gap: var(--space-2) var(--space-8); margin: 0; padding: var(--space-4) var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.receipt dt { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
.receipt dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
@media (min-width: 640px) { .receipt { grid-template-columns: auto 1fr; align-items: baseline; } }

footer { background: var(--color-navy-deep); border-top: 1px solid var(--color-navy-deep); padding-block: var(--space-12); }
footer .wrap { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
footer img { height: 48px; width: auto; opacity: 0.9; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8); font-size: var(--text-sm); font-weight: 500; color: var(--color-on-dark-muted); }
footer nav a { text-decoration: none; }
footer nav a:hover { color: #fff; }
footer .disclaimer { max-width: 760px; font-size: 10px; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-dark-muted); }
footer .copy { font-size: var(--text-xs); color: var(--color-on-dark-muted); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .btn-primary::after, .choice, .choice input::before { transition: none; } }