/* Range Reps — one stylesheet for every page.
 *
 * Source of truth: the app repo's brand.md (it wins), design/constitution.yaml,
 * and the asset-catalog colorsets. Every colour below is a colorset's exact
 * light value, redefined with its dark value under prefers-color-scheme.
 * Type mirrors RangeRepsFont.swift's nine roles; spacing mirrors brand.md's
 * two-zone scale (0 2 4 6 8 10 12 · 16 24 32 48); radius is 4 / 8 / 12.
 * Nothing on a page names a hex value — it takes a token.
 */

/* ── Urbanist, self-hosted (subset of the app's own TTFs; OFL, see fonts/OFL.txt) ── */
@font-face { font-family: "Urbanist"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/urbanist-light.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/urbanist-regular.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/urbanist-semibold.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/urbanist-bold.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/urbanist-extrabold.woff2") format("woff2"); }

/* ── Tokens ── */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --sand-50: #FAF8F5;
  --sand-100: #F2EFE9;
  --sand-300: #D1CABE;
  /* Ink */
  --text-primary: #1A1A17;
  --text-secondary: #6B6860;
  --text-tertiary: #6F6A61;
  /* Green — the working colour */
  --green-50: #E8F5EA;
  --green-100: #D4ECD4;
  --green-300: #6DB87A;
  --green-500: #2D7A3A;
  --green-700: #155A21;
  --green-800: #0D4418;
  --on-green: #FFFFFF;
  --on-category: #1A1A17;
  /* Focus categories — a taxonomy, never decoration (brand.md rule 7) */
  --focus-blue: #3A6B9F;
  --focus-amber: #C4841D;
  --focus-purple: #6B5B95;
  --focus-coral: #D4654A;
  --cat-long-game: var(--green-500);
  --cat-irons: var(--focus-blue);
  --cat-short-game: var(--focus-amber);
  --cat-putting: var(--focus-purple);
  --cat-mixed: var(--focus-coral);

  /* Type — RangeRepsFont.swift's roles. Web sizes are the app's ramp; the
   * one exception is the page title, which scales up on wide screens. */
  --font: "Urbanist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fs-display: 32px;      /* Light */
  --fs-title: clamp(32px, 2.4vw + 22px, 48px); /* Bold — one per page */
  --fs-screen-title: 24px; /* Bold */
  --fs-section-title: 18px;/* Bold */
  --fs-row-title: 17px;    /* SemiBold */
  --fs-body: 17px;         /* Regular — the app's 15 reads small at web distance */
  --fs-label: 13px;        /* SemiBold */
  --fs-caption: 14px;      /* Regular */
  --fs-micro: 12px;        /* Regular — the floor */

  /* Spacing — brand.md's scale, nothing between the rungs */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px;
  --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px;

  /* Radius — 4 · 8 · 12, ceiling 12 */
  --r-4: 4px; --r-8: 8px; --r-12: 12px;

  /* Motion — brand.md: quick 0.2 s, settle 0.4 s; no springs */
  --quick: 0.2s ease-in-out;

  /* Tints — subtle / medium / strong */
  --tint-subtle: 0.08;
  --tint-medium: 0.15;

  --gutter: var(--sp-16);
  --wide: 1100px;
  --column: 720px;   /* the app's iPad reading column */
}

@media (min-width: 600px) { :root { --gutter: var(--sp-24); } }

@media (prefers-color-scheme: dark) {
  :root {
    --sand-50: #1C1B19;
    --sand-100: #2A2824;
    --sand-300: #4A4740;
    --text-primary: #F0F0ED;
    --text-secondary: #A8A59E;
    --text-tertiary: #9C978E;
    --green-50: #0F2914;
    --green-100: #1A3D20;
    --green-300: #2D7A3A;
    --green-500: #6DB87A;
    --green-700: #8ECB9A;
    --green-800: #A8D5B0;
    --on-green: #0D4418;
    --on-category: #1A1A17;
    --focus-blue: #6BA3D6;
    --focus-amber: #E0A64E;
    --focus-purple: #9B8DC0;
    --focus-coral: #E8907A;
  }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--quick); }
a:hover { color: var(--green-800); }
:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; border-radius: var(--r-4); }
strong { font-weight: 600; }
.wrap { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -48px; background: var(--green-500); color: var(--on-green); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-8); z-index: 10; }
.skip:focus { top: var(--sp-8); color: var(--on-green); }

/* ── The mark (the 2.0 icon's R) — takes ink from tokens so it flips with the theme ── */
.mark-ink { fill: var(--green-700); }
.mark-bar { fill: var(--green-500); }

/* ── Nav ── */
.site-nav { border-bottom: 1px solid var(--sand-300); background: var(--sand-50); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-8); text-decoration: none; min-height: 44px; }
.brand svg { width: 32px; height: 32px; flex: none; }
.wordmark { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--green-700); line-height: 1; }
.nav-links { display: flex; align-items: center; gap: var(--sp-4); }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-10); font-size: 15px; font-weight: 600; color: var(--text-secondary); text-decoration: none; border-radius: var(--r-8); }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a[aria-current="page"] { color: var(--green-700); }
.nav-links a.btn-primary { color: var(--on-green); padding: 0 var(--sp-16); margin-left: var(--sp-8); }
.nav-links a.btn-primary:hover { color: var(--on-green); }
@media (max-width: 767px) {
  .site-nav .wrap { flex-wrap: wrap; row-gap: 0; padding-top: var(--sp-4); }
  .nav-links { order: 3; width: 100%; justify-content: space-between; margin: 0 calc(-1 * var(--sp-10)); width: calc(100% + 2 * var(--sp-10)); padding-bottom: var(--sp-4); }
  .site-nav .nav-links .nav-cta { display: none; }
}
@media (min-width: 768px) { .site-nav .nav-download { display: none; } }

/* ── Buttons — the app's RRPrimaryButtonStyle / RRSecondaryButtonStyle ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 48px; padding: 0 var(--sp-24); border-radius: var(--r-12); font: 600 var(--fs-row-title)/1 var(--font); text-decoration: none; transition: opacity var(--quick); white-space: nowrap; }
.btn:hover { opacity: 0.85; }
.btn-primary, .btn-primary:hover { background: var(--green-500); color: var(--on-green); }
.btn-secondary, .btn-secondary:hover { background: var(--sand-100); color: var(--green-700); }
.btn-small { min-height: 44px; padding: 0 var(--sp-16); font-size: 15px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ── Type roles ── */
.eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-700); }
.page-title { font-size: var(--fs-title); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.section-heading { font-size: clamp(24px, 1.2vw + 18px, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.lede { font-size: 19px; line-height: 1.5; color: var(--text-secondary); }
.meta { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.5; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--text-tertiary)); flex: none; }

/* Category hooks — a block or card sets --cat from its Focus Category */
.cat-long-game { --cat: var(--cat-long-game); }
.cat-irons { --cat: var(--cat-irons); }
.cat-short-game { --cat: var(--cat-short-game); }
.cat-putting { --cat: var(--cat-putting); }
.cat-mixed { --cat: var(--cat-mixed); }

/* ── Badges: Free = green ink on the green tint; Pro = onGreen on green700 ── */
.badge { display: inline-flex; align-items: center; font-size: var(--fs-micro); font-weight: 700; line-height: 1; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-4); vertical-align: 0.15em; letter-spacing: 0.02em; white-space: nowrap; }
.badge-free { background: var(--green-50); color: var(--green-700); }
.badge-pro { background: var(--green-700); color: var(--on-green); }

/* ── Cards — rrCard: sand100, radius 12, padding 16 ── */
.card { display: block; background: var(--sand-100); border-radius: var(--r-12); padding: var(--sp-16); color: inherit; text-decoration: none; }
a.card { transition: box-shadow var(--quick); }
a.card:hover { color: inherit; box-shadow: inset 0 0 0 1px var(--sand-300); }
.card-emphasized { background: var(--green-50); }
.template-group .pro-cta { margin-top: var(--sp-16); color: var(--text-secondary); }
.inset { background: var(--sand-50); border-radius: var(--r-8); padding: var(--sp-10) var(--sp-12); }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--sand-300); padding: var(--sp-32) 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16); }
.footer-left { display: flex; align-items: center; gap: var(--sp-8); }
.footer-left svg { width: 20px; height: 20px; }
.footer-copy { font-size: var(--fs-caption); color: var(--text-tertiary); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-8); margin: 0 calc(-1 * var(--sp-8)); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-8); font-size: var(--fs-caption); color: var(--text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════════
   Home
   ════════════════════════════════════════════════════════════════ */
.hero { padding: var(--sp-48) 0; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--sp-48); align-items: center; }
.hero .eyebrow { margin-bottom: var(--sp-12); }
.hero .page-title { margin-bottom: var(--sp-16); max-width: 14em; }
.hero .lede { margin-bottom: var(--sp-24); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }
.hero .meta { margin-top: var(--sp-16); }

/* A screenshot sits in a card as an inset tile — rrCard holding rrInset */
.shot { background: var(--sand-100); border-radius: var(--r-12); padding: var(--sp-12); }
.shot img { border-radius: var(--r-8); width: 100%; }
.shot-phone { max-width: 320px; margin: 0 auto; }
.shot-watch { max-width: 260px; margin: 0 auto; }
.shot-caption { font-size: var(--fs-caption); color: var(--text-secondary); text-align: center; margin-top: var(--sp-8); }

.band { padding: var(--sp-48) 0; }
.band .eyebrow { margin-bottom: var(--sp-8); }
.band-alt { background: var(--sand-100); }
.band-alt .shot, .band-alt .card, .band-alt .btn-secondary { background: var(--sand-50); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--sp-48); align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.feature.flip .feature-media { order: -1; }
.feature .eyebrow { margin-bottom: var(--sp-8); }
.feature .section-heading { margin-bottom: var(--sp-12); }
.feature .feature-text > p:not(.eyebrow) { color: var(--text-secondary); margin-bottom: var(--sp-16); max-width: 36em; }
.points { list-style: none; display: grid; gap: var(--sp-12); margin-bottom: var(--sp-16); }
.points li { position: relative; padding-left: var(--sp-24); }
.points li::before { content: ""; position: absolute; left: var(--sp-4); top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--green-500)); }
.points strong { color: var(--text-primary); }
.feature-symbol { width: 32px; height: 32px; color: var(--green-500); margin-bottom: var(--sp-12); }

.program-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-16); margin-top: var(--sp-24); }
.program-card, .cards .program-card { display: flex; flex-direction: row; gap: var(--sp-12); align-items: stretch; }
.program-card .tile { flex: none; width: 40px; height: 40px; border-radius: var(--r-8); background: var(--cat); display: grid; place-items: center; }
.program-card .tile svg { width: 20px; height: 20px; fill: none; stroke: var(--sand-50); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Warm fills take onCategory ink (brand.md: 5.54 / 8.08 on amber, 4.78 / 7.23 on coral). */
.program-card.cat-short-game .tile svg, .program-card.cat-mixed .tile svg { stroke: var(--on-category); }
.program-text { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.program-card h2, .program-card h3 { font-size: var(--fs-row-title); font-weight: 600; line-height: 1.3; margin: 0; }
.program-card p { font-size: 15px; color: var(--text-secondary); line-height: 1.45; margin: 0; }
.program-card .meta { font-size: var(--fs-caption); margin-top: auto; padding-top: var(--sp-4); }

.also { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-16); margin-top: var(--sp-24); }
.also .card h3 { font-size: var(--fs-row-title); font-weight: 600; margin-bottom: var(--sp-4); }
.also .card p { font-size: 15px; color: var(--text-secondary); line-height: 1.5; }

.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-16); margin-top: var(--sp-24); }
.library .card { display: flex; flex-direction: column; gap: var(--sp-4); }
.library .count { font-size: var(--fs-display); font-weight: 300; line-height: 1.1; color: var(--text-primary); }
.library h3 { font-size: var(--fs-row-title); font-weight: 600; }
.library p { font-size: 15px; color: var(--text-secondary); }
.library .go { margin-top: auto; padding-top: var(--sp-8); font-size: 15px; font-weight: 600; color: var(--green-700); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-16); margin-top: var(--sp-24); }
.plan h3 { font-size: var(--fs-section-title); font-weight: 700; margin-bottom: var(--sp-4); }
.plan .price { font-size: var(--fs-display); font-weight: 300; line-height: 1.2; margin-bottom: var(--sp-12); }
.plan .price:has(+ .price-alt) { margin-bottom: 0; }
.plan .price-alt { font-size: var(--fs-caption); color: var(--text-secondary); margin-bottom: var(--sp-12); }
.plan .price span { font-size: var(--fs-caption); font-weight: 400; color: var(--text-secondary); }
.plan ul { list-style: none; display: grid; gap: var(--sp-8); font-size: 15px; }
.plan li { padding-left: var(--sp-16); position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); }
.closing { text-align: center; }
.closing .section-heading { margin-bottom: var(--sp-8); }
.closing p { color: var(--text-secondary); margin-bottom: var(--sp-24); }
.closing .actions { justify-content: center; }

@media (max-width: 860px) {
  .hero .wrap, .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
  .feature.flip .feature-media { order: 0; }
  .hero { padding-top: var(--sp-32); }
  .shot-phone { max-width: 280px; }
}

/* ════════════════════════════════════════════════════════════════
   Reading pages — content (programs, drills, templates) and legal
   ════════════════════════════════════════════════════════════════ */
main.content { max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: var(--sp-48) var(--gutter); }
main.content.content-wide { max-width: calc(var(--wide) + 2 * var(--gutter)); }
.content .page-title { margin-bottom: var(--sp-12); }
.content > .lede { margin-bottom: var(--sp-16); }
.content h2 { font-size: var(--fs-screen-title); font-weight: 700; line-height: 1.25; margin: var(--sp-48) 0 var(--sp-12); }
.content h3 { font-size: var(--fs-section-title); font-weight: 700; line-height: 1.3; }
.content h4 { font-size: var(--fs-row-title); font-weight: 600; line-height: 1.35; }
.content p { margin: 0 0 var(--sp-12); }
.content .meta { margin-bottom: var(--sp-8); }
.content ul, .content ol { padding-left: var(--sp-24); margin: 0 0 var(--sp-12); }
.content li { margin-bottom: var(--sp-4); }
.content li::marker { color: var(--text-tertiary); }
.content .intro { margin: var(--sp-32) 0 0; }
.content .intro h2 { font-size: var(--fs-section-title); margin: var(--sp-32) 0 var(--sp-8); }
.instructions { font-size: 16px; }
.instructions p, .instructions ul, .instructions ol { margin: 0 0 var(--sp-8); }
.instructions ul, .instructions ol { padding-left: var(--sp-24); }
.content .content-version { margin-top: var(--sp-48); font-size: var(--fs-caption); color: var(--text-tertiary); }
.breadcrumb { font-size: var(--fs-caption); margin-bottom: var(--sp-16); }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.breadcrumb a:hover { color: var(--text-primary); }

/* Category chip: a dot (the mark) + the category name in secondary ink */
.cat-chip { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-label); font-weight: 600; color: var(--text-secondary); }
.cat-chip .dot { width: 8px; height: 8px; }

/* Index cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-16); margin-top: var(--sp-24); }
.cards .card { display: flex; flex-direction: column; gap: var(--sp-6); }
.cards .card h2, .cards .card h3 { font-size: var(--fs-row-title); font-weight: 600; line-height: 1.3; margin: 0; }
.cards .card p { font-size: 15px; color: var(--text-secondary); margin: 0; line-height: 1.45; }
.cards .card .meta { margin: auto 0 0; padding-top: var(--sp-4); font-size: var(--fs-caption); }
.cards .card .cat-chip { margin-bottom: var(--sp-2); }

.page-actions { margin-top: var(--sp-24); }

/* Program page */
.program-head { border-left: 4px solid var(--cat); padding-left: var(--sp-16); }
.comparison { margin: var(--sp-24) 0 0; }
.comparison .eyebrow { margin-bottom: var(--sp-6); }
.comparison p { margin: 0; }
.sessions { display: grid; gap: var(--sp-12); }
.session { background: var(--sand-100); border-radius: var(--r-12); padding: var(--sp-16); }
.session h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-8); margin-bottom: var(--sp-6); font-size: var(--fs-row-title); font-weight: 600; }
.session h3 .num { color: var(--text-tertiary); font-weight: 600; min-width: 1.5em; }
.session h3 .meta { margin: 0 0 0 auto; font-weight: 400; }
.session > p { color: var(--text-secondary); font-size: 15px; margin-bottom: var(--sp-8); }
.session .block-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.session .block-list li { font-size: var(--fs-caption); background: var(--sand-50); border-radius: var(--r-8); padding: var(--sp-4) var(--sp-8); margin: 0; }
.session .block-list .score { color: var(--text-secondary); }
.session-full { padding: var(--sp-16); }
.session-full .eyebrow { margin-bottom: var(--sp-6); }
.session-full .block { background: var(--sand-50); border-radius: var(--r-8); padding: var(--sp-12); margin-top: var(--sp-12); }
.block h4 { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-2); }
.block .meta { margin-bottom: var(--sp-8); }
.block .instructions:last-child > :last-child { margin-bottom: 0; }

/* Template page */
.template-blocks { display: grid; gap: var(--sp-12); }
.template-blocks .block { background: var(--sand-100); border-radius: var(--r-12); padding: var(--sp-16); }
.template-group { margin-top: var(--sp-48); }
.template-group h2 { margin: 0 0 var(--sp-4); }

/* ── Drill library ── */
.jump { position: sticky; top: 0; z-index: 5; background: var(--sand-50); border-bottom: 1px solid var(--sand-300); margin-top: var(--sp-24); padding: var(--sp-8) 0; }
.jump ol { list-style: none; display: flex; gap: var(--sp-6); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.jump ol::-webkit-scrollbar { display: none; }
.jump li { margin: 0; flex: none; }
.jump a { display: inline-flex; align-items: center; gap: var(--sp-6); min-height: 44px; padding: 0 var(--sp-12); border-radius: var(--r-8); background: var(--sand-100); color: var(--text-primary); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.jump a:hover { box-shadow: inset 0 0 0 1px var(--sand-300); color: var(--text-primary); }
.jump a[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--cat); }
.jump .count { font-weight: 400; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.jump .short { display: none; }
@media (max-width: 599px) {
  .jump { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .jump li { flex: 1 1 0; }
  .jump a { width: 100%; justify-content: center; padding: 0 var(--sp-6); gap: var(--sp-4); }
  .jump .long, .jump .count { display: none; }
  .jump .short { display: inline; }
}
.drill-tools { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); align-items: center; padding: var(--sp-12) 0 0; }
.drill-tools[hidden] { display: none; }
.drill-tools input[type="search"] { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 var(--sp-12); border-radius: var(--r-8); border: 1px solid var(--sand-300); background: var(--sand-100); color: var(--text-primary); font: 400 16px var(--font); }
.drill-tools input[type="search"]::placeholder { color: var(--text-tertiary); }
.segmented { display: inline-flex; background: var(--sand-100); border-radius: var(--r-8); padding: var(--sp-2); }
.segmented button { min-height: 40px; min-width: 56px; padding: 0 var(--sp-12); border: 0; border-radius: var(--r-8); background: transparent; color: var(--text-secondary); font: 600 15px var(--font); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--sand-50); color: var(--text-primary); box-shadow: 0 0 0 1px var(--sand-300); }
.drill-status { font-size: var(--fs-caption); color: var(--text-secondary); min-height: 1.5em; margin: var(--sp-8) 0 0; }

.category { scroll-margin-top: 72px; padding-top: var(--sp-32); }
.category-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); padding-bottom: var(--sp-8); border-bottom: 3px solid var(--cat); margin-bottom: var(--sp-8); }
.category-head h2 { margin: 0; display: flex; align-items: center; gap: var(--sp-8); }
.category-head .meta { margin: 0; }
.area { margin-top: var(--sp-24); }
.area > h3 { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--sp-8); display: flex; align-items: center; gap: var(--sp-6); }
/* Columns, not a grid: free drills carry their instructions and run several
 * times the height of a Pro card, and a grid would leave a hole beside each. */
.drill-list { columns: 3 300px; column-gap: var(--sp-12); }
.drill-list > .drill { break-inside: avoid; margin-bottom: var(--sp-12); }
.drill { background: var(--sand-100); border-radius: var(--r-12); padding: var(--sp-16); scroll-margin-top: 72px; }
.drill:target { box-shadow: inset 0 0 0 2px var(--green-500); }
.drill h4 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-8); margin-bottom: var(--sp-4); }
.drill > p { font-size: 15px; color: var(--text-secondary); margin-bottom: var(--sp-8); line-height: 1.5; }
.drill > p:last-child { margin-bottom: 0; }
.drill .meta { margin-bottom: var(--sp-8); }
.drill .instructions { font-size: 15px; background: var(--sand-50); border-radius: var(--r-8); padding: var(--sp-10) var(--sp-12); }
.drill .instructions > :last-child { margin-bottom: 0; }
.drill .tags { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-bottom: var(--sp-8); }
.drill .tag { font-size: var(--fs-micro); font-weight: 600; color: var(--text-secondary); background: var(--sand-50); border-radius: var(--r-4); padding: var(--sp-2) var(--sp-6); }
.drill[hidden], .area[hidden], .category[hidden] { display: none; }

/* ── Legal pages (support, privacy, terms) ── */
.prose h2 { font-size: var(--fs-section-title); margin: var(--sp-32) 0 var(--sp-8); }
.prose .updated { font-size: var(--fs-caption); color: var(--text-tertiary); margin-bottom: var(--sp-24); }
.prose ul { padding-left: var(--sp-24); }
.faq { display: grid; gap: var(--sp-12); margin-top: var(--sp-16); }
.faq .card h3 { font-size: var(--fs-row-title); font-weight: 600; margin-bottom: var(--sp-6); }
.faq .card p { font-size: 16px; margin: 0; }
.contact { margin-top: var(--sp-16); }
.contact p:last-child { margin-bottom: 0; }

@media print {
  .site-nav, .site-footer, .jump, .drill-tools { display: none; }
  body { background: #fff; color: #000; }
}
@media (max-width: 860px) { #programs .feature-media { display: none; } }