/* THE STORE LOOK, shared by every page that sells something (2026-09-16).
   Lance: "make our theme and layouts consistent - whatever coaching has, playbooks should have."
   This was coaching.html's own <style> block, lifted out whole so the two pages CANNOT drift: the
   hero, the tab bar, the product card, the steps strip, the about blocks, the FAQ and the intake
   sheet all live here now. Pages keep only what is genuinely theirs.
   Page tokens are here too, so a page needs tokens.css + this, in that order. */

  /* The top bar. chrome.js injects the MARKUP and the drawer styles, but each page
     carries the top-bar CSS itself, so a new page without this block renders the nav
     as a run-on line of unstyled links. Caught by clicking it, not by any static
     check: the markup was correct the whole time. */
  header.top {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--jm-plane) 92%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--jm-line);
  }
  .top .wrap {
    display: flex; align-items: center; gap: var(--jm-s-5);
    height: 56px; max-width: var(--jm-w-page); margin: 0 auto; padding: 0 var(--jm-s-5);
  }
  .brand { display: flex; align-items: center; gap: var(--jm-s-2);
           color: inherit; text-decoration: none; }
  .brand .wm { font-family: var(--jm-font-display); font-weight: 700; font-size: 17px;
               letter-spacing: 0.01em; text-transform: uppercase; }
  nav.main { display: flex; gap: var(--jm-s-1); }
  nav.main a {
    height: var(--jm-h-ctl); padding: 0 12px; border: 0; border-radius: var(--jm-r-2);
    display: inline-flex; align-items: center;
    background: transparent; color: var(--jm-ink-3); text-decoration: none;
    font-size: var(--jm-t-sm); font-weight: 500;
  }
  nav.main a:hover { color: var(--jm-ink); background: var(--jm-surface-2); }
  nav.main a[aria-current="page"] { color: var(--jm-ink); background: var(--jm-surface-3); }
  .top .right { margin-left: auto; display: flex; align-items: center; gap: var(--jm-s-2); }
  /* same phone padding vote.html uses; without it the signed-in chip pushes the bar 5px past a 390 screen */
  @media (max-width: 720px) { .top .wrap { padding: 0 var(--jm-s-3); gap: var(--jm-s-3); } }
/* 2K Jumpers tokens (design/tokens.css), dark first. Light is a stepped set, not an inversion. */
:root {
  color-scheme: dark;
  --plane: #0A0C0E; --s1: #12161A; --s2: #191F25; --s3: #212932;
  --line: #232B34; --line-strong: #303A45;
  --ink: #F2F5F8; --ink-2: #A8B4C0; --ink-3: #8894A1; --ink-inv: #0A0C0E;
  --brand: #54FD04; --brand-dim: #43C904; --brand-wash: rgba(84, 253, 4, 0.10);
  --gold: #E3B02A; --gold-wash: rgba(227, 176, 42, 0.12);
  --photo-edge: rgba(255, 255, 255, 0.08);
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r1: 3px; --r2: 6px; --r3: 10px;
  --w: 1180px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --plane: #F5F6F7; --s1: #FFFFFF; --s2: #F7F8F9; --s3: #EDF0F2;
    --line: #E3E7EA; --line-strong: #CDD4D9;
    --ink: #0B0F13; --ink-2: #4C5761; --ink-3: #5A6570; --ink-inv: #FFFFFF;
    --brand: #4A7A10; --brand-dim: #3A5F0A; --brand-wash: rgba(74, 122, 16, 0.08);
    --gold: #8F6B00; --gold-wash: rgba(176, 138, 0, 0.12);
    --photo-edge: rgba(11, 15, 19, 0.10);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --plane: #F5F6F7; --s1: #FFFFFF; --s2: #F7F8F9; --s3: #EDF0F2;
  --line: #E3E7EA; --line-strong: #CDD4D9;
  --ink: #0B0F13; --ink-2: #4C5761; --ink-3: #5A6570; --ink-inv: #FFFFFF;
  --brand: #4A7A10; --brand-dim: #3A5F0A; --brand-wash: rgba(74, 122, 16, 0.08);
  --gold: #8F6B00; --gold-wash: rgba(176, 138, 0, 0.12);
  --photo-edge: rgba(11, 15, 19, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--plane); color: var(--ink); font-family: var(--ui); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
/* height:auto, or the height attribute wins over aspect-ratio and a 132px thumb renders 1100px tall */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r1); }
.wrap { max-width: var(--w); margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }



.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r2); border: 1px solid var(--line-strong); background: var(--s2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 90ms ease, border-color 90ms ease; }
.btn:hover { background: var(--s3); }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--ink-inv); }
.btn--primary:hover { background: var(--brand-dim); border-color: var(--brand-dim); }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r1); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--line-strong); color: var(--ink-2); }
.pill--brand { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-wash); }
.pill--gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: var(--gold-wash); }

/* ============ compact hero ============ */
.hero { padding-block: 22px 18px; }
.hero-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; }
.hero h1 { font-family: var(--display); font-weight: 900; font-stretch: 74%; font-size: clamp(28px, 3.6vw, 44px); line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
.hero h1 .marked { position: relative; display: inline-block; width: max-content; white-space: nowrap; color: var(--brand); }
/* telestrator circle, drawn once, the way he marks film */
.hero h1 .marked svg { position: absolute; left: -6%; top: -16%; width: 112%; height: 132%; overflow: visible; pointer-events: none; }
.hero h1 .marked path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; animation: draw 900ms 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes draw { from { stroke-dashoffset: 900; } }
.creds { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.creds li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); background: var(--s1); border-radius: var(--r2); padding: 3px 9px; }
.creds li b { color: var(--gold); font-weight: 600; }

/* mini carousel: native scroll-snap, swipes on a phone with no library */
/* minmax(0,1fr) + min-width 0: without them the grid sizes the column to six full-size photos side by side */
.mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--r2); border: 1px solid var(--photo-edge); background: #0A0C0E; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.slide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.dots { display: flex; justify-content: center; gap: 4px; }
.dots button { width: 12px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: var(--line-strong); cursor: pointer; position: relative; }
.dots button::before { content: ""; position: absolute; inset: -9px -1px; }
.dots button[aria-selected="true"] { background: var(--brand); width: 20px; }
.mini-cap { font-size: 11px; line-height: 1.3; color: var(--ink-3); text-align: center; min-height: 2.6em; }

/* ============ tabs ============ */
.tabbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 20; background: color-mix(in srgb, var(--plane) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-3); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.tabs .count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: 5px; font-weight: 500; }

.panel { padding-block: 24px 72px; }
.group + .group { margin-top: 36px; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.group-head h2 { font-family: var(--display); font-weight: 800; font-stretch: 82%; font-size: 22px; text-transform: uppercase; letter-spacing: 0.005em; }
.group-head p { font-size: 13px; color: var(--ink-3); }

/* ============ product cards ============ */
.prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prod { border: 1px solid var(--line); background: var(--s1); border-radius: var(--r3); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.prod.feature { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent) inset; }
.prod-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 20px; }
.prod-top .kind { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.prod h3 { font-family: var(--display); font-weight: 800; font-stretch: 82%; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.prod .fmt { font-size: 13px; color: var(--ink-2); margin-top: -4px; }
.prod .price { font-family: var(--mono); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.prod .price small { font-size: 13px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.prod ul { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); flex: 1; align-content: start; }
.prod li { padding-left: 15px; position: relative; }
.prod li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 8px; height: 2px; background: var(--brand); }
.prod .btn { width: 100%; margin-top: 4px; }

.books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.book { border: 1px solid var(--line); background: var(--s1); border-radius: var(--r3); padding: 14px; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.cover { aspect-ratio: 3 / 4; border-radius: var(--r1); background: #0F1316; border: 1px solid #232B34; display: grid; align-content: space-between; padding: 7px; overflow: hidden; position: relative; color: #F2F5F8; }
.cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover .t { position: relative; font-family: var(--display); font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: 12.5px; line-height: 0.92; }
.cover .by { position: relative; font-family: var(--mono); font-size: 7px; letter-spacing: 0.06em; color: #A8B4C0; }
.book h3 { font-size: 16px; font-weight: 600; margin: 5px 0 3px; }
.book p { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.book .buy { display: grid; gap: 8px; justify-items: end; }
.book .price { font-family: var(--mono); font-weight: 600; font-size: 20px; }


.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r3); background: var(--s1); counter-reset: s; }
.steps3 li { counter-increment: s; padding: 14px 16px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; border-right: 1px solid var(--line); }
.steps3 li:last-child { border-right: 0; }
.steps3 li::before { content: counter(s); font-family: var(--mono); font-weight: 600; font-size: 12px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--brand); }
.steps3 b { display: block; font-size: 14px; }
.steps3 span { font-size: 13px; color: var(--ink-2); }

/* ============ about panel ============ */


.about-copy { display: grid; gap: 12px; max-width: 66ch; }
.about-copy p { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.about-copy p:first-child { color: var(--ink); }
.accolades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.accolades li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: baseline; border: 1px solid var(--line); background: var(--s1); border-radius: var(--r3); padding: 14px 16px; }
.accolades .yr { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--gold); }
.accolades b { display: block; font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 17px; text-transform: uppercase; line-height: 1.15; }
.accolades li span:last-child { font-size: 13px; color: var(--ink-2); }
.career { border: 1px solid var(--line); border-radius: var(--r3); background: var(--s1); overflow-x: auto; }
.career ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); }
.career li { padding: 14px 16px; border-right: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
.career li:last-child { border-right: 0; background: var(--brand-wash); }
.career .yr { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.career .org { font-family: var(--display); font-weight: 800; font-stretch: 82%; font-size: 16px; text-transform: uppercase; line-height: 1.1; }
.career .what { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }


/* ============ faq panel ============ */
.faq details { border-bottom: 1px solid var(--line); padding: 15px 0; }
.faq details:first-child { border-top: 1px solid var(--line-strong); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-2); font-size: 14px; margin-top: 8px; max-width: 58ch; }

.field { width: 100%; height: 38px; border-radius: var(--r2); border: 1px solid var(--line-strong); background: var(--s2); color: var(--ink); font: inherit; font-size: 14px; padding: 0 12px; }


/* ============ one product + intake ============ */
.intro { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 64ch; margin-top: 10px; }
.offer { flex-direction: row; gap: 28px; align-items: center; padding: 20px 22px; }
.offer-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.offer .fmt { margin-top: 0; }
.offer ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.offer-buy { flex: none; width: 220px; display: grid; gap: 10px; justify-items: stretch; text-align: center; }
.offer-buy .price { font-size: 40px; }

/* intake: a native modal, so Esc, focus trapping and the backdrop come free */
dialog.sheet { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r3); background: var(--s1); color: var(--ink); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); overflow: auto; overscroll-behavior: contain; }
dialog.sheet::backdrop { background: rgba(5, 7, 9, 0.72); backdrop-filter: blur(3px); }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: start; gap: 12px; margin: -18px -18px 0; padding: 16px 18px 12px; background: var(--s1); border-bottom: 1px solid var(--line); }
.sheet-foot { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 8px; margin: 0 -18px -18px; padding: 12px 18px 16px; background: var(--s1); border-top: 1px solid var(--line); }
.x { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--s2); color: var(--ink); font-size: 14px; cursor: pointer; }
.x:hover { background: var(--s3); }
.form-error { font-size: 13px; color: #FF8A8A; background: rgba(208, 59, 59, 0.12); border: 1px solid rgba(208, 59, 59, 0.4); border-radius: var(--r2); padding: 8px 10px; }
.field[aria-invalid="true"], fieldset[aria-invalid="true"] .seg span, fieldset[aria-invalid="true"] .chips input:not(:checked):not(:disabled) + span { border-color: rgba(224, 80, 80, 0.75); }
.intake { padding: 18px; display: grid; gap: 18px; }
.intake-head { display: grid; gap: 2px; }
.intake-head b { font-family: var(--display); font-weight: 800; font-stretch: 82%; font-size: 22px; text-transform: uppercase; line-height: 1.05; }
.fld { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fld.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fld.two > div { display: grid; gap: 7px; align-content: start; }
.flabel { font-size: 13.5px; font-weight: 600; padding: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.req, .opt { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.hint { font-size: 12.5px; color: var(--ink-3); }
.hint.center { text-align: center; }
textarea.field { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.45; }
.field::placeholder { color: var(--ink-3); }
.seg, .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label, .chips label { position: relative; cursor: pointer; }
.seg input, .chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span, .chips span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r2); font-size: 13px; color: var(--ink-2); background: var(--s2); transition: background 90ms ease, border-color 90ms ease; }
.seg label:hover span, .chips label:hover span { color: var(--ink); }
.seg input:checked + span, .chips input:checked + span { border-color: var(--brand); background: var(--brand-wash); color: var(--ink); font-weight: 600; }
.seg input:focus-visible + span, .chips input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.chips input:disabled + span { opacity: 0.4; }
.chips label:has(input:disabled), .chips input:disabled { cursor: not-allowed; }
.fgroup { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; }
.fg-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 9px; }
.count-live { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: var(--r1); padding: 1px 6px; }
.paid-note { margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); background: var(--brand-wash); border-radius: var(--r3); padding: 14px 16px; font-size: 14px; color: var(--ink-2); }
.paid-note b { color: var(--ink); display: block; font-size: 15px; margin-bottom: 2px; }
.pay { height: 46px; font-size: 15px; width: 100%; }
.faq { max-width: 760px; }
@media (max-width: 760px) {
  /* phone: price and button come before the bullet list, so $45 is on the first screen */
  .offer { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
  .offer-main { display: contents; }
  .offer-buy { order: 1; }
  .offer ul { order: 2; grid-template-columns: minmax(0, 1fr); }
  .offer-buy { width: auto; grid-template-columns: auto minmax(0, 1fr); align-items: center; text-align: left; }
  .offer-buy .hint { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 560px) {
  /* the intake becomes a full-screen sheet on a phone */
  dialog.sheet { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  /* phone: headline sits beside the photo, intro and titles run full width under both */
  .hero-row { grid-template-columns: 76px minmax(0, 1fr); }
  .hero-row > div:last-child { display: contents; }
  /* the card already says VOD Review; the section title only costs the phone its first screen */
  #shop .group:first-child > .group-head { display: none; }
  .hero-row h1 { align-self: center; }
  .intro, .creds { grid-column: 1 / -1; margin-top: 0; }
  .intro { font-size: 13px; }
  .fld.two, .fgroup { grid-template-columns: minmax(0, 1fr); }
  .fgroup { gap: 6px; }
  .fg-name { padding-top: 0; }
}


/* ============ responsive ============ */
@media (max-width: 1040px) {
}
@media (max-width: 760px) {
  .prods, .books, .accolades { grid-template-columns: minmax(0, 1fr); }
  .steps3 { grid-template-columns: minmax(0, 1fr); }
  .steps3 li { border-right: 0; border-bottom: 1px solid var(--line); }
  .steps3 li:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .hero { padding-block: 16px 14px; }
  .hero-row { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; }
  .mini-cap { display: none; }
  .creds li:nth-child(n+3) { display: none; }
  .prods { grid-template-columns: minmax(0, 1fr); }
  .book { grid-template-columns: 64px minmax(0, 1fr); }
  .book .buy { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .marked path { animation: none; }
  .track { scroll-behavior: auto; }
  .btn { transition: none; }
}