/* Rally's own front door: the splash, the two ways in, the builder's page, the page-by-page details and the thank-you.
 * One system for all of them, the one the 2026-10-15 style tile draws (the marketing set's 06-design-renders): flannel
 * cream as the ground, a panel one step lighter for the bar and the cards, a rail one step darker for every hairline and
 * chip, ink for the words and the one filled button, and the red of a baseball's stitching twice — seam red where
 * something is filled (the LIVE dot, a filled diamond) and deep red where it is read (a link, an eyebrow).
 * Playfair Display for every headline, Archivo for everything operated, Oswald for the eyebrows and the uppercase
 * labels. Script is the mark and nothing more: the wordmark is the supplied artwork, never typed. One look, no dark
 * mode, so no club's colour ever leaks into Rally's own chrome. Fonts are self-hosted: the CSP allows font-src 'self'.
 *
 * The builder's own host chrome (the Save row, the Design ID, the price and the buy form) is in build.css and is
 * loaded by /build alone. What is here is what every page shares. */
@font-face { font-family: "Playfair Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/playfair-display-600.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-style: italic; font-display: swap; src: url("/assets/fonts/playfair-display-600i.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("/assets/fonts/archivo-variable.woff2") format("woff2"); }
/* The chrome's Oswald is its own copy of the kit's file under its own family name: on /build the builder's sheet declares
 * "Oswald" from the hashed kit file, and the render check counts a kit file fetched with the lettering fold shut as a
 * stray. A different name, an unhashed file, and the nav never touches the kit. */
@font-face { font-family: "Oswald Front"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/oswald-400.woff2") format("woff2"); }

:root {
  /* The style tile's palette. The names are the handles the sheets and the builder's shared sheet have always read; the
   * values are the tile's: Flannel, Panel, Rail, Ink, Muted, Seam red (fills) and Deep red (text). */
  --cream: #F1E8D6; --cream-2: #EBE0C9; --paper: #FDF9F0; --paper-2: #F7F0E1;
  --ink: #171512; --ink-2: #5E574B; --ink-3: #5E574B; --line: #EBE0C9; --line-2: #EBE0C9; --hair: #EBE0C9;
  /* A rule that has to show on the flannel itself (the hairline is tuned for the panel). */
  --rule: rgba(23, 21, 18, .16);
  /* The edge of a field a visitor types in: at least 3:1 on white and on the paper, where the hairline is not. */
  --field-line: #8A8170;
  --red: #C11A21; --deep: #A3161D; --red-soft: #F5D9DA;
  --on-ink-2: #BDB5A6; --ink-line: #2E2A25;
  --green: #2E6B47; --green-soft: #DCE9DE;
  /* The old accent's name, kept because the builder's shared sheet reads it for the ring on a chosen tile: the deep red
   * stands where the gold rule stood. The tile has no gold. */
  --gold: var(--deep); --gold-soft: var(--red-soft); --gold-line: var(--deep);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --label: "Oswald Front", "Oswald", "Arial Narrow", sans-serif;
  /* One type scale. Every size on every page is one of these. Archivo runs 13 to 17, the labels 11 and 12. */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-note: 13px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 17px; --fs-xl: 20px; --fs-h3: 26px; --fs-sign: 46px;
  --fs-h2: clamp(30px, 3.4vw, 44px); --fs-h1: clamp(36px, 4.4vw, 58px); --fs-hero: clamp(38px, 4.8vw, 64px);
  /* The splash's poster sizes (2026-10-17): the hero's line, the statement, the first pitch and the sign-off, the line of
   * what a club gets, and the sentence under the statement. */
  --fs-display: clamp(44px, 6.4vw, 100px); --fs-statement: clamp(44px, 8vw, 128px); --fs-statement-sm: clamp(38px, 5.6vw, 84px);
  --fs-marquee: clamp(30px, 4.4vw, 60px); --fs-big: clamp(24px, 2.6vw, 36px);
  /* One spacing scale. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --r: 8px; --r-lg: 14px; --r-xl: 28px; --r-phone: 30px; --r-pill: 999px; --gutter: 24px; --max: 1120px; --max-wide: 1360px; --measure: 60ch;
  /* Only a window (a laptop, a phone, a plate) gets a shadow; a card never does. */
  --shadow-1: 0 1px 2px rgba(23, 21, 18, .06), 0 18px 40px -22px rgba(23, 21, 18, .35);
  --shadow-2: 0 2px 6px rgba(23, 21, 18, .08), 0 30px 60px -28px rgba(23, 21, 18, .4);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 70px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--fs-md)/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* The text link: deep red, underlined. */
a { color: var(--deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
p { margin: 0 0 var(--s-3); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--cream); padding: 8px 14px; border-radius: var(--r-pill); z-index: 50; }
.skip:focus { left: 12px; }
/* The don't-count-me switch saying it took (assets/site.js, ?nocount=1 / ?nocount=0). */
.count-note { position: fixed; left: 50%; bottom: var(--s-4); transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100vw - 32px); margin: 0; background: var(--ink); color: var(--cream); padding: 10px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-2); font: 500 var(--fs-sm)/1.4 var(--sans); text-align: center; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-2); }
/* The eyebrow: Oswald, uppercase, wide, in the deep red. The one idiom for anything short above a heading. */
.eyebrow { margin: 0 0 var(--s-3); font: 400 var(--fs-xs)/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
.caret { display: inline-block; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ico { width: 1.4em; height: 1.4em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- buttons, links, chips and menus ---------------------------------------------- */
/* Secondary by default: panel fill, hairline rail, pill. Primary is the ink fill with flannel words. */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 46px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 11px 22px; border-radius: var(--r-pill); font: 600 var(--fs-sm)/1.2 var(--sans); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn.primary:hover { background: #2B2723; border-color: #2B2723; color: var(--paper); }
.btn.ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.btn.on-ink { border-color: var(--cream); background: var(--cream); color: var(--ink); }
.btn.on-ink:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn.small { min-height: 36px; padding: 7px 14px; font-size: var(--fs-note); }
.btn.big { min-height: 56px; padding: 14px 30px; font-size: var(--fs-md); text-transform: capitalize; }
.btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* The arrow a way in wears, drawn by the sheet so the words stay the words. */
.arrow::after { content: "\2192"; display: inline-block; margin-left: .35em; font-weight: 400; }
/* A text link beside a button, or on its own line: Archivo, deep red, underlined. */
.link { font: 600 var(--fs-md)/1.3 var(--sans); color: var(--deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { color: var(--ink); }
/* Chips: a rail hairline and a pill. LIVE: the red-soft fill, the seam-red dot and an Oswald label. */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font: 500 var(--fs-note)/1.2 var(--sans); color: var(--ink); }
.live { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--red-soft); font: 400 var(--fs-xs)/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
/* A card: the flannel on the panel, rounded, with no border and no shadow (2026-10-17: the crisp front door). */
.card { border: 0; border-radius: var(--r-xl); background: var(--cream); }

details.menu { position: relative; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary.btn { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* A menu floats over the page, so it is the one card-shaped thing with a shadow: it has to read as above, not beside. */
.menu-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 300px; padding: var(--s-2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); display: grid; gap: 2px; }
.menu-panel.right { left: auto; right: 0; }
.menu-panel.center { left: 50%; transform: translateX(-50%); }
.menu-item { display: block; padding: 9px 10px; border-radius: var(--r); color: var(--deep); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; }
.menu-item:hover { background: var(--cream); color: var(--ink); }
.menu-item b { display: block; font: 600 var(--fs-lg)/1.2 var(--serif); }
.menu-item span { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.menu-note { margin: 6px 10px 6px; font-size: var(--fs-note); line-height: 1.5; color: var(--ink-2); }
.menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.form-msg { margin: 0; min-height: 1.4em; font-size: var(--fs-note); color: var(--ink-2); }
.form-msg.ok { color: var(--green); }
.form-msg.err { color: var(--deep); }

/* ---- the bar: the same on every page, 54px tall ----------------------------- */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(253, 249, 240, .78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); }
.bar-inner { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 22px; min-height: 53px; }
.bar-mark { display: block; flex: none; }
.bar-mark img { display: block; height: 27px; width: auto; }
.bar-nav { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.bar-nav::-webkit-scrollbar { display: none; }
.bar-nav a { display: inline-flex; align-items: center; padding: 8px 10px; color: var(--ink); font: 400 var(--fs-xs)/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
.bar-nav a:hover { color: var(--deep); border-bottom-color: var(--line); }
.bar-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.bar-right { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
/* Signed in, the button wears the person's address, which is as long as it is. Cut, so the links beside it keep their room. */
#auth-summary { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: var(--fs-note); }
.auth-panel { gap: var(--s-2); padding: var(--s-3); }
.auth-panel label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-note); color: var(--ink-2); }
.auth-panel input[type="email"], .auth-panel input[type="password"], .auth-panel input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: var(--r); background: #fff; color: var(--ink); font: 400 var(--fs-md)/1.4 var(--sans); }
.auth-panel input:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.auth-panel .check { flex-direction: row; align-items: center; gap: var(--s-2); }
.auth-panel .row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.auth-panel .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-status { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
/* Where the bar is too narrow for both menus, the Coaches note moves into the sign-in panel (below). */
.auth-coach { display: none; padding: var(--s-2) 0 0; border-top: 1px solid var(--line); }

/* ---- page furniture --------------------------------------------------------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.wrap.wide { max-width: var(--max-wide); }
.wrap.narrow { max-width: 820px; }
.section { padding-block: var(--s-9) var(--s-9); }
.section-head { max-width: var(--measure); margin-bottom: var(--s-6); }
.section-head.center { margin-inline: auto; text-align: center; }
h1, h2, h3 { text-wrap: balance; }
h1 { margin: 0 0 var(--s-4); font: 600 var(--fs-h1)/1.04 var(--serif); letter-spacing: -.02em; }
h2 { margin: 0 0 var(--s-3); font: 600 var(--fs-h2)/1.08 var(--serif); letter-spacing: -.015em; }
h3 { margin: 0; font: 600 var(--fs-h3)/1.2 var(--serif); letter-spacing: -.01em; }
em, i { font-style: italic; }
h1 em, h2 em { font-weight: 600; }
.lede { margin: 0 0 var(--s-5); color: var(--ink-2); font: 400 var(--fs-lg)/1.6 var(--sans); max-width: var(--measure); text-wrap: pretty; }
.lede.serif { font: 400 var(--fs-lg)/1.6 var(--sans); color: var(--ink-2); }
.section-head p { margin: 0; color: var(--ink-2); font-size: var(--fs-md); }
.anchor-alias { display: block; height: 0; overflow: hidden; }
/* A hairline across the page, and the roman numeral that opens a section: the two marks of the programme's order. */
.rule { height: 1px; border: 0; margin: 0; background: var(--rule); }
.numeral { display: block; margin: 0 0 var(--s-3); font: 400 var(--fs-xs)/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
/* Back from Stripe, or a sentence from a link that was followed: one line at the top of a page, or nothing. */
.return-note { width: min(calc(100% - 2 * var(--gutter)), calc(var(--max) - 2 * var(--gutter))); margin: 16px auto 0; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--r); background: var(--paper); font-size: var(--fs-md); line-height: 1.55; }
.return-note:empty { display: none; }
/* A page's head, centred like the splash's sections: the eyebrow, the headline at a poster's size, and the lede. No
 * stitched rule under it (owner, 2026-10-26: "I dont like the red dotted line"). */
.page-head { padding-block: var(--s-8) var(--s-7); text-align: center; }
.page-head h1 { margin: 0 auto var(--s-4); max-width: 18ch; font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.03em; }
.page-head h1 em { color: var(--deep); }
.page-head .lede { margin: 0 auto; max-width: 58ch; }

/* ---- a plate: a picture of a club's page, mounted. A window, so it is the one thing that casts a shadow. ---------- */
.plate { position: relative; margin: 0; padding: 14px; background: var(--cream); border: 0; border-radius: var(--r-xl); }
.plate img { display: block; width: 100%; height: auto; border: 0; border-radius: var(--r-lg); box-shadow: 0 24px 48px -28px rgba(23, 21, 18, .45); }
.plate.phone { width: min(100%, 300px); margin-inline: auto; padding: 8px; }
.plate.phone img { border-radius: 22px; }
.plate figcaption { margin: var(--s-3) 2px 2px; font: 400 var(--fs-sm)/1.45 var(--sans); color: var(--ink-2); text-align: center; }

/* ---- the splash --------------------------------------------------------------- *
 * One long page, crisp and still (owner, 2026-10-17: "a premium top tier site… a long… splash page… all our new
 * verbiage", then "less gimmick and more fresh Apple Store feeling"). The panel is the ground, each section opens on a
 * centred eyebrow and heading with room around it, the product is shown big and plain, and the only motion is a soft
 * fade as a section comes into view, the bar going frosted once the page moves, and the slow strip of clubs the owner
 * asked for. In order: the hero; the rail of clubs and the platforms Rally works with (the owner: "the two most
 * important things", no longer under the foot); the statement; the Front Office's toolkit; the tiles of what a club's
 * site does; the live clubs; what a club gets; the first pitch under the lights; the price; the sign-off. */
.splash-page .bar { border-bottom-color: transparent; transition: border-color .3s; }
.splash-page .bar.is-scrolled { border-bottom-color: var(--line); }
.splash { overflow-x: clip; }
.section-intro { max-width: 820px; margin: 0 auto var(--s-8); text-align: center; }
.section-intro .eyebrow { margin-bottom: var(--s-3); }
.section-intro h2 { margin: 0; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.025em; }
.section-intro h2 em, .statement-head em, .signoff em { color: var(--deep); }

/* The hero: centred, under the rail. The wordmark, the headline and the line under it, the lede, the way in and a way down the
 * page; then the product, big, under it. The clubs are named once, in the rail above it (owner: "repetitive"). */
.hero { padding: var(--s-8) var(--gutter) 0; text-align: center; }
.hero-copy { max-width: 980px; margin: 0 auto; display: grid; justify-items: center; gap: var(--s-5); }
.hero-mark { display: block; width: clamp(150px, 12vw, 190px); margin: 0; }
.hero-mark img { display: block; width: 100%; height: auto; }
.hero h1 { margin: 0; font-size: var(--fs-display); line-height: 1; letter-spacing: -.035em; }
.hero h1 em { color: var(--deep); }
/* The line under the headline (owner, 2026-10-26): the headline is the rallying cry, this says what Rally does. */
.hero-sub { margin: 0; font: 600 var(--fs-h2)/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* The one line an ad's own link fills (splash.js CAMPAIGNS): the tool's name as the ad set it, then the ad's headline,
   as a pill that goes to the toolkit row showing that tool. Hidden for everybody else. */
.hero-hook { margin: 0; }
.hero-hook a { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--s-1) var(--s-3); min-height: 40px; padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; }
.hero-hook a:hover { border-color: var(--deep); }
.hook-tool { font: 400 var(--fs-xs)/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
.hook-line { font: italic 600 var(--fs-lg)/1.3 var(--serif); }
.hero .lede { margin: 0; max-width: 34ch; font-size: var(--fs-xl); line-height: 1.5; color: var(--ink-2); text-align: center; }
/* The one price, under the one way in (owner, 2026-10-18: an ad's visitor asks the price first). */
.hero-price { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.hero-incl { margin: calc(-1 * var(--s-4)) 0 0; font-size: var(--fs-note); color: var(--ink-2); }
.hero-terms, .price-terms { margin: 0; font-size: var(--fs-note); color: var(--ink-2); }
.hero-terms a, .price-terms a { color: inherit; text-decoration: underline; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) var(--s-6); }
.hero-collage { position: relative; width: min(100%, 1240px); margin: var(--s-7) auto 0; }
.hero-collage img { display: block; width: 100%; height: auto; }
/* The product, one page of a club's site after another (owner, 2026-10-17: "swapping between ALL product images"): each
 * picture rests, then crossfades into the next. splash.js lays them over the first, and only when motion is welcome. */
.js-motion .hero-collage .shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-out); }
.js-motion .hero-collage .shot.is-on { opacity: 1; }
.js-motion .hero-collage > img:first-child { transition: opacity 1.1s var(--ease-out); }
.js-motion .hero-collage.is-away > img:first-child { opacity: 0; }
/* The way to stop it: a small round control at the picture's foot, two bars to pause and a triangle to play. */
.shots-pause { position: absolute; right: var(--s-3); bottom: var(--s-3); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(253, 249, 240, .9); color: var(--ink); cursor: pointer; }
.shots-pause:hover { border-color: var(--ink); }
.shots-pause span { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.shots-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; margin-left: 3px; }

/* The rail: the clubs on Rally, then what Rally works with, at the very top of the page under the bar (owner,
 * 2026-10-17: "I want these at the top header"), on the splash and on every tab (2026-10-21). Black, Rally's own ink, and slim (owner, 2026-10-21: "when I zoom out
 * to about 50% the 2 header bars/logos look good. They are too big as is. Also, just make the header bars black"): two
 * rows of 40px split by a hairline one step lighter than the band. The platforms' marks are in their own colours, with
 * nothing that drains or fades them ("I want the compatible with logos below them to be in color"); the two drawn
 * white for a dark ground, GameChanger and Perfect Game, are at home on the black. */
.rail { background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--ink-line); }
.rail :focus-visible { outline-color: var(--paper); }
/* The red ring is under 3:1 on the black sections too. */
.showcase-sec :focus-visible, .pitch :focus-visible { outline-color: var(--paper); }
.compat { border-top: 1px solid var(--ink-line); }
.compat-inner { max-width: var(--max-wide); margin: 0 auto; padding: 6px var(--gutter); display: flex; align-items: center; justify-content: flex-start; gap: var(--s-6); }
/* The two labels are one width and the two rows one gap, so the platforms' marks start where the clubs' do, right after
 * their label (owner, 2026-10-26: "why is there such a weird gap on the works with line?"; the row was spread across the
 * width and its marks began 457px after the label at 1440). */
.clubs-label, .compat-label { min-width: 100px; }
.compat-label { flex: none; margin: 0; font: 400 var(--fs-2xs)/1.2 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-2); }
.compat-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); max-width: 780px; }
.compat-list li { flex: none; display: flex; align-items: center; }
/* 28px at every width, the wordmark half that, from files twice the size they are drawn: sharp on a fine screen, and
 * light, because the rail is on every tab. */
.compat-list img { display: block; height: 28px; width: auto; }
.compat-list .wide img { height: 14px; }

/* The statement: the motto at a poster's size, and its sentence under it. */
.statement { padding: var(--s-9) var(--gutter) var(--s-6); }
.statement-inner { max-width: 1100px; margin: 0 auto; padding-block: var(--s-6); text-align: center; }
.statement-head { margin: 0 0 var(--s-6); font-size: var(--fs-statement); line-height: .98; letter-spacing: -.04em; }
.statement-body { margin: 0 auto; max-width: 32ch; font: 400 var(--fs-big)/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink-2); text-wrap: balance; }

/* What a club's site does: five still tiles, the way a product page lays out its parts. Each is the panel's rounded
 * card in the flannel, two sentences over a phone that runs off its bottom edge; scores, the first, takes two columns. */
.features { padding-block: var(--s-9); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.tile { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-height: 560px; border-radius: var(--r-xl); background: var(--cream); }
.tile.wide { grid-column: span 2; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.tile-copy { padding: var(--s-7) var(--s-6) var(--s-4); }
.tile.wide .tile-copy { padding: var(--s-7); }
.tile-num { margin: 0 0 var(--s-3); font: 400 var(--fs-xs)/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--deep); }
.tile h3 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.015em; }
.tile.wide h3 { font-size: var(--fs-h2); }
.tile h3 em { color: var(--deep); }
.tile-copy p:last-child { margin: 0; max-width: 36ch; font-size: var(--fs-md); color: var(--ink-2); }
.tile-phone { align-self: end; justify-self: center; width: min(68%, 250px); margin: 0; }
.tile.wide .tile-phone { align-self: end; width: min(62%, 280px); padding-top: var(--s-7); }
.tile-phone img { display: block; width: 100%; height: auto; border: 6px solid var(--ink); border-bottom: 0; border-radius: var(--r-phone) var(--r-phone) 0 0; }

/* The Front Office's toolkit (owner, 2026-10-17: "promoting this like a coaches toolkit that can be customized per team",
 * then "people rarely read. We need to show more… way more"): a row per part of the toolkit, the words short on one side
 * and the tool itself on the other, a second screen laid over the corner of the first; the rows trade sides. Every
 * screen is the Front Office as it draws, on an invented roster, with every dollar figure but the one price blurred. */
.toolkit-sec { padding-block: var(--s-9); border-top: 1px solid var(--line); }
.section-sub { margin: var(--s-4) auto 0; max-width: 54ch; font-size: var(--fs-lg); color: var(--ink-2); }
.toolkit { display: grid; gap: var(--s-9); }
.kit { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.kit:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.kit:nth-child(even) .kit-copy { order: 2; }
.kit-label { display: block; margin-bottom: var(--s-3); font: 400 var(--fs-xs)/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--deep); }
.kit h3 { margin: 0 0 var(--s-5); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.kit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.kit li { position: relative; padding-left: 18px; font-size: var(--fs-md); line-height: 1.45; color: var(--ink-2); }
.kit li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; background: var(--red); transform: rotate(45deg); }
.kit-shot { position: relative; margin: 0; padding-bottom: var(--s-8); }
.kit-shot img { display: block; height: auto; border-radius: var(--r-lg); box-shadow: 0 30px 60px -32px rgba(23, 21, 18, .55), 0 0 0 1px rgba(23, 21, 18, .1); }
.kit-main { width: 100%; }
/* Two screens of one tool side by side, each its own card. */
.kit-shot.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.kit-inset { position: absolute; right: calc(var(--s-6) * -1); bottom: 0; width: 44%; }
.kit:nth-child(even) .kit-inset { right: auto; left: calc(var(--s-6) * -1); }
.kit-more { margin: var(--s-8) auto 0; max-width: 60ch; text-align: center; color: var(--ink-2); font-size: var(--fs-md); }
.kit-more .link { margin-left: var(--s-2); }

/* The live clubs, on the ink: a laptop's page and a phone's, side by side. */
.showcase-sec { padding-block: var(--s-9); background: var(--ink); color: var(--cream); }
.showcase-sec .eyebrow { color: var(--red-soft); }
.showcase-sec .section-intro h2 { color: var(--paper); }
.showcase-sec .section-intro h2 em { color: var(--red-soft); }
.showcase.two { width: min(100%, 1100px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: var(--s-6); align-items: end; }
.showcase-sec .plate { background: rgba(241, 232, 214, .06); border-color: rgba(241, 232, 214, .14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.showcase-sec .plate img { border-color: rgba(241, 232, 214, .2); }
.showcase-sec .plate figcaption { color: rgba(241, 232, 214, .7); font-family: var(--label); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; }
/* Each caption is the way to the club's own site, in a new tab. */
.showcase-sec .plate figcaption a { color: inherit; text-decoration-color: rgba(241, 232, 214, .35); text-underline-offset: 4px; }
.showcase-sec .plate figcaption a:hover { color: var(--paper); text-decoration-color: var(--red); }
.showcase.two .plate.phone { width: 100%; margin: 0; }

/* Every page a club gets, as a still, centred run of chips closing the website's section (the band they stood in said
 * again what the toolkit and the tiles above it say). The Front Office, the admin, is the filled one. */
.gets-wrap { margin-top: var(--s-8); text-align: center; }
.gets-head { margin: 0 0 var(--s-5); font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; }
.gets { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.gets li { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; border-radius: var(--r-pill); background: var(--cream); font: 500 var(--fs-lg)/1.2 var(--sans); color: var(--ink); }
.gets li:last-child { background: var(--ink); color: var(--paper); }

/* Before the first pitch: the lights over the field, and the promise. */
.pitch { position: relative; isolation: isolate; overflow: hidden; padding: var(--s-9) var(--gutter); background: var(--ink); color: var(--paper); text-align: center; }
.pitch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(23, 21, 18, .35), rgba(23, 21, 18, .85)), url("/assets/hero/lights.webp") center / cover no-repeat; }
.pitch-inner { max-width: 1000px; margin: 0 auto; padding-block: var(--s-8); }
.pitch h2 { margin: 0; font-size: var(--fs-statement-sm); line-height: 1.04; letter-spacing: -.03em; color: var(--paper); }
.pitch h2 em { display: block; margin-top: var(--s-3); color: var(--cream); }

/* The price, with no figure: one plain card, centred, the way in to the price under its sentence. */
.offer-sec { padding-block: var(--s-9) var(--s-7); }
.offer { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-8) var(--s-7); border: 0; border-radius: var(--r-xl); background: var(--cream); text-align: center; }
.offer .eyebrow { margin: 0; }
.offer h2 { margin: 0; font-size: var(--fs-h1); }
.offer p { margin: 0; color: var(--ink-2); max-width: 52ch; font-size: var(--fs-md); }

/* The close: the motto at a poster's size, and the way in again. */
.close { text-align: center; padding-block: var(--s-8) var(--s-9); }
.close-inner { max-width: 900px; margin: 0 auto; padding-inline: var(--gutter); display: grid; justify-items: center; gap: var(--s-5); }
.close .signoff { margin: 0; font-size: var(--fs-statement-sm); line-height: 1; letter-spacing: -.035em; }
.close p { margin: 0; color: var(--ink-2); max-width: 46ch; font-size: var(--fs-lg); }

/* A section comes up softly, once, as it scrolls into view. Only once splash.js has said motion is welcome
 * (html.js-motion), so a page with no script, or a visitor who asked for less motion, sees everything at once. */
.js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- the foot: the small wordmark over the year on the left; on the right the sign-off, the line for a coach who ----
 * already has a club and the six links (Home, Start, Build, Details, Privacy, Terms). The splash's (.compact) carries the
 * same six and a support line since issue 708 item 96; its sign-off stays in .close. The inner pages draw the wordmark
 * from a 352-px copy of the artwork: /build and /thanks have no room in their picture budgets for the hero's file. */
.foot { border-top: 1px solid var(--rule); padding: var(--s-7) var(--gutter) var(--s-7); color: var(--ink-2); font-size: var(--fs-sm); }
.foot-inner { max-width: var(--max-wide); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-6); }
.foot-brand { display: grid; gap: var(--s-2); }
.foot-brand img { display: block; width: 176px; height: auto; }
.foot-brand p { margin: 0; }
.foot-note { max-width: 46ch; }
.foot-note b { color: var(--ink); font-weight: 600; }
.foot .signoff { font-size: var(--fs-h3); margin-bottom: var(--s-2); color: var(--ink); }
.foot p { margin: 0 0 var(--s-2); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-4) 0 0; }
.foot-nav a { color: var(--ink); font: 400 var(--fs-xs)/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.foot-nav a:hover { color: var(--deep); text-decoration: underline; }
.foot.compact { padding-block: var(--s-7) var(--s-6); }

/* ---- the clubs bar: the clubs on Rally, on a slow strip in the rail at the top of the splash ---------------------- *
 * Drawn by assets/clubs.js from /data/clubs.json. Its window keeps its height from the first paint, so the strip landing
 * in it moves nothing; with no list its label is hidden (no list, nothing to read). The strip is two or more identical rows
 * side by side, slid left by exactly one run (half of it), so the loop has no seam; it stops under the pointer and while
 * focus is inside it. */
.clubs-bar { background: transparent; color: var(--paper); }
.clubs-inner { max-width: var(--max-wide); margin: 0 auto; padding: 0 calc(var(--gutter) + 36px) 0 var(--gutter); display: flex; align-items: center; gap: var(--s-6); }
.clubs-label { flex: none; margin: 0; font: 400 var(--fs-2xs)/1.2 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-2); }
.clubs-window { flex: 1; min-width: 0; min-height: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.clubs-track { display: flex; width: max-content; animation: clubs-run var(--clubs-dur, 40s) linear infinite; }
.clubs-bar:hover .clubs-track, .clubs-bar:focus-within .clubs-track { animation-play-state: paused; }
/* The strip's own stop, for a visitor who wants it still without holding a pointer over it: at the end of the clubs'
 * row, in the room the row keeps for it. Stopped, the strip can be slid by hand. */
.rail { position: relative; }
.clubs-pause { position: absolute; z-index: 1; top: 6px; right: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--on-ink-2); border-radius: var(--r-pill); background: var(--ink); color: var(--paper); cursor: pointer; }
.clubs-pause:hover { border-color: var(--paper); }
.clubs-pause span { width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.clubs-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; margin-left: 2px; }
.clubs-bar.is-paused .clubs-track { animation-play-state: paused; }
.clubs-bar.is-paused .clubs-window { overflow-x: auto; scrollbar-width: none; }
.clubs-bar.is-paused .clubs-window::-webkit-scrollbar { display: none; }
@keyframes clubs-run { to { transform: translateX(-50%); } }
.clubs-set { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.clubs-set li { display: flex; flex: none; align-items: center; }
.clubs-set li::after { content: ""; width: 5px; height: 5px; background: var(--red); transform: rotate(45deg); opacity: .8; }
/* Logos only (owner, 2026-10-21): a club is its crest, and its name is the link's name and tooltip. */
.clubs-set a { display: flex; align-items: center; min-height: 40px; padding: 0 var(--s-3); color: var(--paper); text-decoration: none; }
/* Each crest on its own transparent ground at its own shape, with no roundel behind it (owner, 2026-10-21: "I dont
 * want the logos to be confined to a circle bacground"), fitted inside one 40 by 28 box, so every row of the strip is
 * the same width whatever shape a club's crest is. A club with no crest that loads is its initials in the same box. */
.clubs-set img, .clubs-mono { flex: none; width: 40px; height: 28px; }
.clubs-set img { object-fit: contain; }
.clubs-mono { display: grid; place-items: center; color: var(--on-ink-2); font: 400 var(--fs-sm)/1 var(--label); letter-spacing: .06em; }
/* Until a club is drawn the band says nothing: a label over an empty strip is not a bar. */
.clubs-bar:has(.clubs-track:empty) .clubs-label { visibility: hidden; }
/* Reduced motion: no strip at all. The clubs sit in one still row at the band's own height, centred, and where they do not
 * all fit the window scrolls sideways (a swipe, or the keyboard moving along them), so the page under it never moves. */
@media (prefers-reduced-motion: reduce) {
  .clubs-window { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .clubs-window::-webkit-scrollbar { display: none; }
  .clubs-track { margin-inline: auto; }
  .clubs-set li:last-child::after { display: none; }
  .clubs-set[aria-hidden="true"] { display: none; }
}

/* ---- /start: two ways in, and how it goes ------------------------------------------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.way { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr; gap: var(--s-3); min-height: 520px; padding: var(--s-7) var(--s-7) 0; overflow: hidden; isolation: isolate; border: 0; border-radius: var(--r-xl); background: var(--cream); transition: background .2s; }
.way:hover { background: var(--cream-2); }
.way:focus-within { outline: 2px solid var(--red); outline-offset: 3px; }
.way .numeral { margin: 0; }
.way h2 { margin: 0; }
.way p { margin: 0; max-width: 34ch; color: var(--ink-2); font-size: var(--fs-md); }
.way .btn { justify-self: start; align-self: start; position: static; }
.way .btn::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.way.is-assist { grid-template-rows: auto auto auto auto auto 1fr; }
/* The basics are a way into guided setup, not a fourth card: a link that sits above the card's whole-card button. */
.way-alt { justify-self: start; position: relative; z-index: 4; font-size: var(--fs-sm); }
.way-art { position: relative; align-self: end; margin: var(--s-4) calc(-1 * var(--s-7)) 0 var(--s-7); overflow: hidden; height: 230px; }
.way-art img { display: block; width: 100%; height: auto; border-top-left-radius: var(--r-lg); box-shadow: 0 24px 48px -28px rgba(23, 21, 18, .5); }
.steps { list-style: none; counter-reset: step; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); position: relative; }
.steps li { counter-increment: step; position: relative; padding: var(--s-5) 0 0; border-top: 1px solid var(--ink); }
.steps li::before { content: counter(step, upper-roman); display: block; margin-bottom: var(--s-3); font: 400 var(--fs-xs)/1.3 var(--label); letter-spacing: .12em; color: var(--deep); }
.steps h3 { margin-bottom: var(--s-2); }
.steps p { margin: 0; color: var(--ink-2); font-size: var(--fs-md); max-width: 30ch; }
.ways-more { margin: var(--s-5) 0 0; color: var(--ink-2); font-size: var(--fs-md); }
.how-after { margin: var(--s-5) 0 0; max-width: 70ch; color: var(--ink-2); font-size: var(--fs-md); }

/* ---- /details: every page of a club's site, one at a time -------------------------- */
/* The jump list is a row of chips: a rail hairline and a pill, one for each page. */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); max-width: 900px; margin: var(--s-6) auto 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border: 0; border-radius: var(--r-pill); background: var(--cream); color: var(--ink); font: 500 var(--fs-sm)/1.2 var(--sans); text-decoration: none; transition: background .15s, color .15s; }
.jump a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.pages { display: flex; flex-direction: column; gap: 0; margin-top: var(--s-7); }
.pg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; padding-block: var(--s-8); border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.pg:nth-child(even) .pg-shot { order: 2; }
.pg-shot { min-width: 0; }
.pg-body { min-width: 0; }
.pg-body .numeral { margin-bottom: var(--s-2); }
.pg-body h2 { margin-bottom: var(--s-3); }
.pg-body > p { color: var(--ink-2); max-width: 52ch; }
.points { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.points li { position: relative; padding-left: 22px; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); }
.points li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 7px; height: 7px; border: 1.5px solid var(--red); transform: rotate(45deg); }
.points b { color: var(--ink); font-weight: 600; }
.path { display: inline-block; margin: 0 0 var(--s-3); font: 400 var(--fs-xs)/1.6 var(--label); letter-spacing: .12em; color: var(--ink-2); }
/* The closing card: the flannel on the panel, the Rally wordmark over it (owner, 2026-10-17: the stitch arc "needs to be
 * replaced with our rally logo"), and the one price. */
.closing { margin-top: var(--s-8); padding: var(--s-8) var(--s-7); border: 0; border-radius: var(--r-xl); background: var(--cream); text-align: center; }
.closing-mark, .thanks-mark { display: block; width: 132px; height: auto; margin: 0 auto var(--s-5); }
.closing h2 { margin-bottom: var(--s-2); }
.closing > p { color: var(--ink-2); max-width: 54ch; margin-inline: auto; }
.price { display: grid; justify-items: center; gap: var(--s-4); max-width: 760px; margin: var(--s-6) auto 0; padding: var(--s-6) 0 0; border-top: 1px solid var(--rule); }
.price-fig { margin: 0; font: 600 var(--fs-h1)/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.02em; color: var(--ink); }
.price-fig small { display: block; margin-top: var(--s-2); font: 400 var(--fs-md)/1.3 var(--sans); color: var(--ink-2); letter-spacing: 0; }
.price-what { margin: 0; max-width: 56ch; color: var(--ink-2); font-size: var(--fs-md); }
.price-proof { margin: 0; max-width: 56ch; color: var(--ink-2); font-size: var(--fs-note); }
.price-help { margin: var(--s-2) 0 0; font: 400 var(--fs-md)/1.5 var(--sans); color: var(--ink-2); }
.closing .btn-row { justify-content: center; margin-top: var(--s-5); }
.limits { margin-top: var(--s-6); }
/* /details: the way in under the lede, and the questions above the price. The questions are the limits fold's own cards, shut. */
.page-cta { justify-content: center; margin-top: var(--s-5); }
.faq { margin-top: var(--s-8); }
.faq h2 { margin: 0 0 var(--s-4); font-size: var(--fs-h3); }
.faq-list { display: grid; gap: var(--s-2); }
.faq .fold-body { padding-top: 0; border-top: 0; }
.faq .fold-body p { margin: 0; max-width: 70ch; color: var(--ink-2); }
/* The support line under the questions (issue 708 item 105): the foot's own look (its colour, size and measure), so the
 * one way to reach a person from /details reads as the Home foot's line does. */
.faq-note { margin: var(--s-4) 0 0; max-width: 46ch; color: var(--ink-2); font-size: var(--fs-sm); }
/* /details: where families' details live, then the honest limits, between the Front Office and the pages (owner, 2026-10-18,
   from the front-door audit: the questions a club director asks before the pages, not after them). */
.trust { margin-top: var(--s-7); }
.privacy { padding: var(--s-6) var(--s-7); border-radius: var(--r-xl); background: var(--cream); }
.privacy h2 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.privacy p { margin: 0; max-width: 70ch; color: var(--ink-2); font-size: var(--fs-md); }
details.fold { background: var(--cream); border: 0; border-radius: var(--r-xl); }
details.fold[open] { background: var(--cream-2); }
details.fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 18px 22px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); transition: transform .15s; }
details.fold[open] > summary::after { transform: rotate(-135deg); }
.fold-title { grid-column: 1; grid-row: 1; font: 600 var(--fs-lg)/1.3 var(--sans); }
.fold-sub { grid-column: 1; grid-row: 2; font-size: var(--fs-note); color: var(--ink-2); }
.fold-body { padding: 6px 22px 22px; border-top: 1px solid var(--line); }

/* ---- the buy bar (owner, 2026-10-25, the copy review): the price and the way in, fixed to the foot of the window on the splash
 * and /details, once the page's own "Build your site" buttons have scrolled away (assets/site.js, the buy bar). Shut by default:
 * hidden, so it is not a tab stop, and with no script it never shows. The page pads its foot by the bar's height, and a
 * focused control is scrolled clear of it, so it covers nothing. A visitor who asked for less motion gets no slide (the rule at
 * the top of this sheet removes every transition). Not printed. */
:root { --buybar-h: 73px; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: center; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); background: rgba(253, 249, 240, .94); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--line); transform: translateY(100%); visibility: hidden; transition: transform .25s var(--ease-out), visibility 0s .25s; }
.buybar.is-on { transform: none; visibility: visible; transition: transform .25s var(--ease-out), visibility 0s; }
.buybar .btn { width: 100%; max-width: 520px; background: var(--ink); border-color: var(--ink); color: var(--cream); }
.buybar .btn:hover { background: #2B2723; border-color: #2B2723; color: var(--paper); }
html:has(.buybar) { scroll-padding-bottom: calc(var(--buybar-h) + var(--s-3)); }
body:has(.buybar) .foot { padding-bottom: calc(var(--s-7) + var(--buybar-h) + env(safe-area-inset-bottom, 0px)); }
body:has(.buybar) .count-note { bottom: calc(var(--buybar-h) + var(--s-3)); }
@media print { .buybar { display: none; } }

/* ---- /thanks --------------------------------------------------------------------- */
.thanks { text-align: center; padding-block: var(--s-9) var(--s-4); }

.thanks h1 { margin-top: 0; font-size: var(--fs-hero); }
.thanks .lede { margin-inline: auto; }
.next { max-width: 640px; margin: var(--s-8) auto 0; text-align: left; }
/* Privacy and Terms (T229): long-form text on the measure, the same type as the rest of the site. */
.legal { padding-block: var(--s-8) var(--s-7); }
.legal h1 { margin-top: 0; font-size: var(--fs-h1); }
.legal h2 { margin-top: var(--s-6); font-size: var(--fs-h3); }
.legal p, .legal li { max-width: var(--measure); color: var(--ink-2); font: 400 var(--fs-md)/1.65 var(--sans); }
.legal ul { padding-left: var(--s-5); }
.legal li + li { margin-top: var(--s-2); }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--deep); text-decoration: underline; text-underline-offset: 2px; }
.next h2 { font-size: var(--fs-h2); margin-bottom: var(--s-2); }
.next .steps { grid-template-columns: 1fr; gap: 0; margin-top: var(--s-4); }
.next .steps li { padding: var(--s-5) 0 var(--s-5) 56px; border-top-color: var(--rule); }
.next .steps li::before { position: absolute; left: 0; top: calc(var(--s-5) + 6px); margin: 0; }
.next .steps p { max-width: 54ch; }
.thanks-foot { margin-top: var(--s-7); justify-content: center; }
.next.wait { margin-top: var(--s-7); }
.next.wait h2 { font-size: var(--fs-h3); }
.next.wait p { color: var(--ink-2); }
.reference { margin-top: var(--s-4); font-size: var(--fs-note); color: var(--ink-2); }
.reference code { font: 500 var(--fs-note)/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-2); }

/* ---- the 404 -------------------------------------------------------------------------- */
.lost { text-align: center; padding-block: var(--s-9); }
.lost .lede { margin-inline: auto; }
.lost .btn-row { justify-content: center; }

/* ---- a little motion, never needed ------------------------------------------------------ */
/* The splash's soft fades are in its own section above, and keyed on html.js-motion; nothing else on the front door moves
 * but the strip of clubs and the controls' own colour changes. */

/* ---- wide screens ----------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  :root { --max: 1240px; }
}

/* ---- tablets and down ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .tile { min-height: 500px; }
  .kit, .kit:nth-child(even) { gap: var(--s-7); }
}
@media (max-width: 900px) {
  /* Five marks do not fit beside the label at a size that reads, so on a tablet or a phone they sit on a still strip a
   * thumb slides, faded where it runs on: one line, never wrapped (owner, 2026-10-17). */
  .compat-list { justify-content: flex-start; gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-inline-end: var(--s-6); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--s-6)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--s-6)), transparent); }
  .compat-list::-webkit-scrollbar { display: none; }
  /* A strip with nothing to focus inside is itself a Tab stop; the fade would cut a ring drawn outside it. */
  .compat-list:focus-visible { outline-offset: -2px; }
  .section { padding-block: var(--s-8) 0; }
  /* Two tiles to a row, scores across both; each row of the toolkit its words over its screens. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .tile.wide { grid-column: span 2; }
  .toolkit { gap: var(--s-8); }
  .kit, .kit:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .kit:nth-child(even) .kit-copy { order: 0; }
  .kit-copy { max-width: 60ch; }
  .kit-inset, .kit:nth-child(even) .kit-inset { right: 0; left: auto; }
  .section-intro { margin-bottom: var(--s-7); }
  .showcase.two { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--s-4); }
  .ways { grid-template-columns: 1fr; }
  .way { min-height: 460px; }
  .steps { grid-template-columns: 1fr; gap: var(--s-5); }
  .pg { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-7); }
  .pg:nth-child(even) .pg-shot { order: 0; }
  .closing { padding: var(--s-7) var(--s-5); }
  .offer { gap: var(--s-3); padding: var(--s-7) var(--s-5); }
  .foot-inner { align-items: flex-start; }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .hero { padding-block: var(--s-5) var(--s-7); }
  .hero-copy { gap: var(--s-4); }
  .hero-mark { width: 170px; }
  .hero h1 { max-width: none; }
  .hero .lede { font-size: var(--fs-lg); }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; gap: var(--s-4); }
  .hero-cta .link { align-self: center; }
  .btn.big { width: 100%; }
  /* On a phone the marks sit under the same label column as the clubs: one line each (owner, 2026-10-17). */
  .compat-inner { gap: var(--s-3); }
  .clubs-label, .compat-label { min-width: 104px; }
  .compat-label { white-space: nowrap; letter-spacing: .12em; }
  .foot-inner { flex-direction: column; }
  .clubs-inner { gap: var(--s-3); }
  .clubs-label { white-space: nowrap; letter-spacing: .12em; }
  .statement, .features, .toolkit-sec, .showcase-sec, .offer-sec { padding-block: var(--s-8); }
  .statement-inner { padding-block: var(--s-4); }
  .statement-head { margin-bottom: var(--s-5); }
  .pitch, .pitch-inner { padding-block: var(--s-7); }
  .hero-collage { margin-top: var(--s-6); }
  .section-intro { margin-bottom: var(--s-6); }
  /* One tile to a row; scores stacks like the others. */
  .tiles { grid-template-columns: 1fr; }
  .tile, .tile.wide { grid-column: auto; grid-template-columns: none; grid-template-rows: auto 1fr; min-height: 0; border-radius: var(--r-lg); }
  .tile-copy, .tile.wide .tile-copy { padding: var(--s-6) var(--s-5) var(--s-4); }
  .tile.wide h3 { font-size: var(--fs-h3); }
  /* A phone shows its top, the page's headline, and runs off the tile's edge: a tile reads, it does not scroll. */
  .tile-phone, .tile.wide .tile-phone { width: min(62%, 220px); max-height: 200px; overflow: hidden; padding-top: var(--s-2); }
  /* The toolkit's screens a little tighter, the inset a little larger so it still reads. */
  .toolkit { gap: var(--s-8); }
  .kit h3 { margin-bottom: var(--s-4); }
  .kit li { font-size: var(--fs-sm); line-height: 1.4; }
  .kit-shot { padding-bottom: var(--s-7); }
  .kit-shot img { border-radius: var(--r); }
  .kit-inset { width: 58%; }
  .showcase.two { grid-template-columns: minmax(0, 1fr); }
  .showcase.two .plate.phone { width: min(100%, 170px); margin: 0 auto; }
  .gets li { min-height: 44px; padding: 9px 18px; font-size: var(--fs-md); }
  .offer { border-radius: var(--r-lg); }
  .page-head { padding-block: var(--s-7) var(--s-5); }
  .way { padding: var(--s-5) var(--s-5) 0; min-height: 0; }
  .way-art { margin: var(--s-4) calc(-1 * var(--s-5)) 0 var(--s-4); height: 180px; }
  .privacy { padding: var(--s-5); }
  .closing { padding: var(--s-6) var(--s-4); }
  /* A phone's thank-you is held to 1400px, foot included: the air above and between its parts is what gives. */
  .thanks { padding-block: var(--s-7) var(--s-4); }
  .next { margin-top: var(--s-7); }
  .thanks-foot { margin-top: var(--s-6); }
  .next .steps li { padding-left: 44px; }
  .bar-inner { gap: 10px; }
  .bar .btn { min-height: 40px; }
  .bar-nav a { padding: 8px 6px; letter-spacing: .1em; }
  .eyebrow { letter-spacing: .1em; }
  /* The bar on a phone. Sign in hangs from the bar, not from its button, so a panel right-aligned to a button that sits
   * left of other controls never runs off the left edge of a 360px window; the sticky bar is the containing block. */
  .bar #auth-menu { position: static; }
  .bar #auth-menu .menu-panel { left: 12px; right: 12px; min-width: 0; }
  #auth-summary { max-width: 7ch; }
  .bar #coach-menu .menu-panel { position: fixed; left: 12px; right: 12px; top: 58px; min-width: 0; }
  /* Once sign-in is on, a phone's bar holds the mark, the three links and Sign in, and nothing more: the Coaches button
   * gives way to a note in the Sign in panel, so that no link in the bar is ever cut off. Where sign-in is off, Coaches stays. */
  .bar:has(#auth-menu:not([hidden])) #coach-menu { display: none; }
  .bar:has(#auth-menu:not([hidden])) .auth-coach { display: block; }
  .closing { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
}
/* Between a tablet and a phone the bar has to hold the mark, three tracked links, a signed-in address and Coaches: the
 * links give up some of their tracking and padding. */
@media (max-width: 760px) {
  .bar-inner { gap: 12px; }
  .bar-nav { gap: 2px; }
  .bar-nav a { padding: 8px 6px; letter-spacing: .1em; }
}
@media (max-width: 380px) {
  .bar-inner { gap: 4px; padding-inline: 10px; }
  .bar-nav a { padding-inline: 4px; font-size: var(--fs-2xs); letter-spacing: .06em; }
  .bar .btn.small { padding-inline: 9px; }
  /* Not shorter than "Sign in" itself: the label that has to show whole is the signed-out one. */
  #auth-summary { max-width: 6ch; }
}