/* ==========================================================================
   Braidwood Sports, the home page below the hero (Grant, 15 Oct 2026: "build the suggestions"). Loaded after home.css, which
   is the hero alone. Every section has its own shape instead of the same label, heading and paragraph: a pitch-side LED board,
   "Stop chasing payments." with a club's payments coming in, a phone beside the four steps (pinned on a computer), a deck of
   feature cards that stack on a phone (a lit grid on a laptop), a Last One Standing scoreboard, pricing beside its heading, a
   two-column FAQ, the founder's words lighting up as you read, and a floodlit finish (order: Grant, 16 Oct 2026). Script: js/home/sections.js. Both themes; colour only from tokens (no hex, no rgb(),
   no named colours). Mobile first: the base is a 320 to 390 phone. Motion stops for reduced motion and while the tab is
   hidden (site.css: html[data-paused]).
   ========================================================================== */

/* ---------------------------------------------------------------- the pitch-side LED board */
.led-sec { position: relative; z-index: 2; margin-top: calc(-1 * clamp(12px, 3vw, 40px)); padding-block: var(--sp-4) clamp(8px, 2vw, 24px); overflow: clip; }
.led { position: relative; display: flex; overflow: hidden; rotate: -1.4deg; margin-inline: -3%; padding-block: 12px;
  background-color: var(--led-off);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--led-green) 10%, transparent) 0 1px, transparent 1.4px);
  background-size: 3px 3px;
  border-block: 1px solid color-mix(in srgb, var(--led-green) 34%, transparent);
  box-shadow: 0 0 46px -12px var(--glow), 0 24px 40px -24px var(--overlay), inset 0 1px 0 color-mix(in srgb, var(--led-green) 18%, transparent); }
.led::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; /* the dots, standing still as on a real board */
  background: radial-gradient(circle, transparent 0 1.15px, var(--led-off) 1.45px); background-size: 3px 3px; }
.led::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; /* the board's glass: a sheen across it */
  background: linear-gradient(180deg, color-mix(in srgb, var(--led-white) 7%, transparent), transparent 45%, color-mix(in srgb, var(--led-off) 40%, transparent)); }
.led__track { display: flex; flex: none; min-width: 100%; align-items: center; animation: led-run 52s linear infinite; will-change: translate; }
/* The letters are drawn in dots, like a real board: the grid of dots above (.led::before) stands still and the letters slide under it.
   It used to be a mask on the moving text, which moved the dots too: on a tilted board that flickered, and a computer had to redraw the
   whole board every frame (Grant, 20 Oct 2026: "the frame rate is terrible on the scrolling LED board"). Now only the letters move,
   drawn once and slid along by the graphics chip. */
.led__track span { display: inline-flex; align-items: center; gap: 26px; padding-inline: 13px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); letter-spacing: .02em;
  color: var(--led-green); text-shadow: 0 0 14px color-mix(in srgb, var(--led-green) 55%, transparent), 0 0 2px currentColor; }
.led__track span:nth-child(3n + 2) { color: var(--led-blue); text-shadow: 0 0 14px color-mix(in srgb, var(--led-blue) 55%, transparent), 0 0 2px currentColor; }
.led__track span:nth-child(3n) { color: var(--led-white); text-shadow: 0 0 12px color-mix(in srgb, var(--led-white) 40%, transparent); }
.led__track span::after { content: ""; width: 9px; height: 9px; border-radius: 2px; rotate: 45deg; background: currentColor; opacity: .8; }
@keyframes led-run { to { translate: -100% 0; } }
.led.is-paused .led__track, .led-sec:hover .led__track, .led-sec:focus-within .led__track { animation-play-state: paused; }
.led__pause { position: absolute; z-index: 3; right: var(--gutter); top: 50%; translate: 0 -50%; width: var(--tap); padding: 0; justify-content: center; box-shadow: var(--shadow-2); }
@media (min-width: 768px) { .led__pause { right: var(--gutter-lg); } }

/* ---------------------------------------------------------------- stop chasing payments: the first thing under the hero, to win a
   club over (Grant, 16 Oct 2026: "something eye catching that will lure in customers"; the founder's words move down the page).
   A big promise, a club's payments card where four card payments come in and the month's total climbs, and three plain facts. */
.chase { overflow: clip; isolation: isolate; }
.chase__in { display: grid; gap: clamp(28px, 5vw, 56px); }
.chase__copy { display: grid; gap: var(--sp-4); justify-items: start; align-content: center; }
.chase__h { font-family: var(--font-display); font-weight: 850; font-size: clamp(2.6rem, 1.4rem + 5vw, 5.25rem); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.chase__h .grad { padding-right: .04em; }
.chase__copy .btn-pair { margin-top: var(--sp-2); width: 100%; }
@media (min-width: 640px) { .chase__copy .btn-pair { width: auto; } .chase__copy .btn-pair .btn { flex: 0 0 auto; } }
.chase__feed { display: grid; gap: var(--sp-3); width: 100%; max-width: 30rem; justify-self: center; padding: clamp(18px, 3vw, 28px); box-shadow: var(--edge-light), var(--ring), var(--shadow-3); }
.chase__top { display: flex; align-items: center; gap: .7em; }
.chase__top > span { display: grid; min-width: 0; flex: 1; }
.chase__top small { color: var(--text-3); font-size: var(--fs-sm); }
.chase__live { flex: none; font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 4px 10px; border-radius: var(--r-pill); color: var(--ok-fg); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.chase__total { margin: 0; font-family: var(--font-display); font-weight: 850; font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.chase__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.chase__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75em; padding: .6em .75em; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.chase__row > span:nth-child(2) { display: grid; min-width: 0; }
.chase__row small { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chase__av { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; font-size: .8em; font-weight: 700; color: var(--on-primary); background: var(--grad-brand); }
.chase__amt { font-variant-numeric: tabular-nums; color: var(--accent-text); }
.chase__foot { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
/* the payments come in one by one (sections.js); written in the finished state, so without scripts all four show */
.js .chase__row { transition: opacity .5s var(--ease), translate .5s var(--ease-out), scale .5s var(--ease-out); }
.js .chase__row.is-waiting { opacity: 0; translate: 0 .7em; scale: .97; }
.chase__row.is-new { animation: chase-ping 1.6s var(--ease) both; }
@keyframes chase-ping { 0%, 30% { background-color: var(--ok-bg); border-color: var(--ok-line); } 100% { background-color: var(--card); border-color: var(--line); } }
.chase__total.is-up { color: var(--accent-text); transition: color .3s var(--ease); }
@media (min-width: 960px) {
  .chase__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); }
  .chase__feed { justify-self: end; }
}

/* ---------------------------------------------------------------- the founder's words */
/* The founder's letter (Grant, 29 Oct 2026): straight after the hero and the LED board, as plain words in full contrast, signed. It was a large
   quote near the end, with a giant quote mark and words that lit up one by one as the page scrolled, so most of it read as faint grey. */
/* Grant, 29 Oct 2026 ("still looks a bit weak"): the promise in big type on the left, the letter beside it on a computer, stacked on a phone. */
.statement { padding-block: clamp(56px, 8vw, 112px); border-block: 1px solid var(--line); }
.statement__in { display: grid; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 960px) { .statement__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.statement__lead { display: grid; gap: var(--sp-6); }
.statement__h { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.1; color: var(--text-2); }
.statement__promise { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1.02; letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
.statement__promise em { font-style: normal; color: var(--accent-text); }
.statement__promise::after { content: ""; display: block; width: 72px; height: 6px; margin-top: var(--sp-6); background: var(--bw-gold); }
.statement__body { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) { .statement__body { padding-left: var(--sp-7); border-left: 3px solid var(--line); } }
.statement__quote { margin: 0; }
.statement__quote p { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); line-height: 1.6; color: var(--text); text-wrap: pretty; }
.statement__quote p + p { margin-top: var(--sp-5); }
.statement__by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.statement__by > span:nth-child(2) { display: grid; }
.statement__by b { font-size: 1.125rem; }
.statement__by small { color: var(--text-2); font-size: var(--fs-sm); }
.statement__by .founder__mark { width: 52px; height: 52px; background: var(--bw-gold); color: var(--on-gold); box-shadow: none; }
.statement__by .link { min-height: var(--tap); display: inline-flex; align-items: center; }
@media (min-width: 640px) { .statement__by .link { margin-left: auto; } }

/* ---------------------------------------------------------------- how it works: on a computer the phone stays put while the steps
   scroll past it. On a phone or tablet it scrolls with the page and plays its four screens in turn, with a Pause button: pinned
   there, it sat over the words and they could not be read (Grant, 16 Oct 2026). */
.howto-sec { padding-top: clamp(32px, 6vw, 72px); }
.howto__head { display: grid; gap: var(--sp-4); max-width: 40rem; margin-bottom: clamp(20px, 4vw, 48px); }
.howto { position: relative; display: grid; gap: 0; }
.howto__stage { position: relative; z-index: 2; display: grid; justify-items: center; padding-block: var(--sp-2) var(--sp-3); }
.howto .howto__phone { position: relative; left: auto; top: auto; translate: none; --ph-w: min(220px, 56vw); }
.howto .howto__screen { height: 31.5em; }
.howto__pause { justify-self: center; }
.howto__steps { position: relative; padding-top: var(--sp-5); }
.howto .steps { gap: 0; grid-template-columns: minmax(0, 1fr); }
.howto .step { grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-4); }
.howto .step.is-on .step__n { background: var(--primary); color: var(--on-primary); box-shadow: none; }
/* the line runs from the first number to the last (sections.js measures where the last one is; this is the guess without it) */
.howto .steps__line { left: 27px; right: auto; top: calc(var(--sp-5) + 48px); bottom: var(--line-end, 160px); width: 2px; height: auto; }
.howto .steps__line i { transform-origin: 50% 0; scale: 1 var(--draw); background: var(--primary); }
.howto .step__body h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
@media (min-width: 960px) {
  .howto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .howto__stage { position: sticky; top: calc(var(--hdr-h) + 6vh); margin: 0; padding: 0; }
  .howto__pause { display: none; }
  .howto__steps { padding-top: var(--sp-4); }
  .howto .howto__phone { --ph-w: min(300px, 24vw); }
  /* Every step in full from the start, and closer together (Grant, 29 Oct 2026): faint grey steps that light up as you scroll read as an AI template. */
  .howto .step { min-height: 40vh; align-content: center; padding-block: var(--sp-6); }
  .howto .step:first-child { min-height: 34vh; align-content: start; padding-top: 6vh; }
  .howto .step:last-child { min-height: 46vh; }
  .howto .step__body p { font-size: 1.125rem; max-width: 46ch; }
  .howto .steps__line { top: calc(6vh + 48px); bottom: var(--line-end, 23vh); }
}
@media (min-width: 960px) and (max-height: 760px) { .howto .howto__phone { --ph-w: min(250px, 22vw); } }
@media (min-width: 960px) and (max-height: 560px) { .howto__stage { position: relative; top: auto; } }

/* the phone's screen: the app's own look in the page's theme (the hero's phone shows the other look in turn) */
.howto__screen { --s-bg: var(--panel); --s-card: var(--card); --s-text: var(--text); --s-muted: var(--text-3); --s-line: var(--line); --s-accent: var(--accent-text); --s-bubble: var(--selected-bg);
  background: var(--s-bg); color: var(--s-text); padding: 3.4em 1.1em 1em; gap: .6em; }
.howto__screen::after { display: none; }
.howto .story__bar { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: .95em; }
.howto .story__scene { position: absolute; left: 1.1em; right: 1.1em; display: grid; gap: .6em; opacity: 0; translate: 0 .8em; transition: opacity .5s var(--ease), translate .5s var(--ease); pointer-events: none; }
.howto .story__scene.is-on { opacity: 1; translate: 0 0; }
.howto .story__eyebrow { margin: 0; font-size: .7em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--s-accent); }
.howto .story__title { margin: 0 0 .2em; font-family: var(--font-display); font-weight: 800; font-size: 1.45em; line-height: 1.1; color: var(--s-text); }
.howto .story__card { display: flex; align-items: center; gap: .7em; border-radius: .9em; background: var(--s-card); border: 1px solid var(--s-line); }
.howto .story__card > span:nth-child(2) { display: grid; gap: .1em; min-width: 0; flex: 1; }
.howto .story__card b { font-size: .95em; }
.howto .story__card small { font-size: .72em; font-weight: 500; color: var(--s-muted); }
.howto .story__card--dim { opacity: .75; }
.howto .story__card--new { box-shadow: 0 0 0 2px var(--s-accent); }
.howto .story__pill { margin-left: auto; font-style: normal; font-size: .72em; font-weight: 700; padding: .25em .7em; border-radius: 99px; color: var(--s-accent); border: 1px solid currentColor; }
.howto .story__bubble { padding: .7em .85em; border-radius: 1em 1em 1em .3em; background: var(--s-bubble); font-size: .88em; line-height: 1.35; }
.howto .story__btn { display: grid; place-items: center; min-height: 2.8em; margin-top: .3em; border-radius: .9em; font-weight: 700; color: var(--on-primary); background: var(--grad-brand); }
.howto .story__dots { position: absolute; left: 1.1em; right: 1.1em; bottom: 1em; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; font-size: .62em; font-weight: 700; color: var(--s-muted); text-align: center; }
.howto .story__dots li { padding-top: .6em; border-top: 3px solid var(--s-line); }
.howto .story__dots li.is-on { color: var(--s-accent); border-color: var(--s-accent); }
/* round initials for made-up people, and the made-up club's crest */
.howto .story__avatar, .deck .story__avatar { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; font-size: .8em; font-weight: 700; color: var(--on-primary); background: var(--grad-brand); }
/* Millbrook Rovers, the made-up club in How it works and the payments card, wears its crest (scripts/make-hero-crests.py) */
.demo-crest { flex: none; display: inline-block; width: 1.5em; height: 1.8em; font-style: normal;
  background: url("/img/crests/millbrook-rovers.svg") center / contain no-repeat; filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--overlay) 60%, transparent)); }

/* the four screens in the phone */
.howto__scene { top: 5.9em; }
.howto__file .howto__xls { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .6em; font-size: .7em; font-weight: 800; color: var(--on-primary); background: var(--grad-brand); }
.howto__file small { color: var(--s-accent) !important; font-weight: 700 !important; }
.howto__scene .story__card { animation: none; padding: .5em .7em; }
.howto__more { margin: -.1em 0 0; font-size: .74em; font-weight: 600; color: var(--s-muted); text-align: center; }
.js .howto__scene.is-on > * { animation: scene-in .5s var(--ease-out) both; }
.js .howto__scene.is-on > :nth-child(2) { animation-delay: .05s; } .js .howto__scene.is-on > :nth-child(3) { animation-delay: .12s; }
.js .howto__scene.is-on > :nth-child(4) { animation-delay: .2s; } .js .howto__scene.is-on > :nth-child(5) { animation-delay: .28s; }
.js .howto__scene.is-on > :nth-child(6) { animation-delay: .36s; } .js .howto__scene.is-on > :nth-child(7) { animation-delay: .44s; }
@keyframes scene-in { from { opacity: 0; translate: 0 .7em; } }
.howto__out { justify-self: end; border-radius: 1em 1em .3em 1em; background: var(--s-bubble); max-width: 88%; }
.howto__link { display: grid; gap: .35em; padding: .75em .85em; border-radius: .9em; background: var(--s-card); border: 1px solid var(--s-line); font-size: .9em; }
.howto__linkbar { display: flex; align-items: center; gap: .5em; }
.howto__link small { color: var(--s-muted); font-size: .76em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.howto__opt { display: flex; justify-content: space-between; padding: .45em .65em; border-radius: .6em; border: 1px solid var(--s-line); font-weight: 600; font-size: .9em; }
.howto__opt em { font-style: normal; color: var(--s-accent); }
.howto__seen { justify-self: end; font-size: .7em; font-weight: 600; color: var(--s-muted); }
.howto__undo { position: relative; overflow: hidden; display: flex; align-items: center; gap: .6em; padding: .7em .8em; border-radius: .8em; font-size: .78em; background: var(--s-text); color: var(--s-bg); }
.howto__undo > span { flex: 1; }
.howto__undo em { font-style: normal; font-weight: 800; color: var(--s-accent); }
.howto__undo i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--s-accent); transform-origin: 0 50%; }
.howto__scene.is-on .howto__undo i { animation: undo-count 10s linear .6s both; }
@keyframes undo-count { from { scale: 1 1; } to { scale: 0 1; } }
.howto__money { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 2.6em; line-height: 1; letter-spacing: -.03em; color: var(--s-accent); font-variant-numeric: tabular-nums; }
.howto__bars { display: flex; align-items: flex-end; gap: .35em; height: 4.6em; }
.howto__bars i { flex: 1; height: var(--h); border-radius: .3em .3em .1em .1em; background: var(--s-accent); transform-origin: bottom; opacity: .85; }
.howto__bars i:last-child { opacity: 1; }
.howto__scene.is-on .howto__bars i { animation: bar-up .9s var(--ease-out) both; }
.howto__scene.is-on .howto__bars i:nth-child(2) { animation-delay: .06s; } .howto__scene.is-on .howto__bars i:nth-child(3) { animation-delay: .12s; }
.howto__scene.is-on .howto__bars i:nth-child(4) { animation-delay: .18s; } .howto__scene.is-on .howto__bars i:nth-child(5) { animation-delay: .24s; }
.howto__scene.is-on .howto__bars i:nth-child(6) { animation-delay: .3s; } .howto__scene.is-on .howto__bars i:nth-child(7) { animation-delay: .36s; }
.howto__screen .story__dots li { transition: color .3s, border-color .3s; }

/* ---------------------------------------------------------------- features: a deck that stacks on a phone, a flat grid on a desktop */
.feat-head { display: grid; gap: var(--sp-4); max-width: 46rem; margin-bottom: clamp(24px, 5vw, 56px); }
.deck > .fcard { position: relative; }
/* Flat cards (Grant, 29 Oct 2026): a coloured glow round each card and gradient icon tiles read as an AI template. */
.deck > .fcard, .deck > .fcard:hover { background: var(--card); border: 1px solid var(--line); box-shadow: none; }
.deck .fcard h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); }
.deck .fcard__photo::after { background: linear-gradient(to top, var(--card), transparent 60%); }
.fcard--photo .fcard__photo + .fcard__ico { margin-top: calc(-1 * var(--sp-8)); position: relative; z-index: 1; }
.deck .ticks { gap: var(--sp-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
/* On a phone the deck's cards are shorter, so each one takes less scrolling: the picture is a band, the words a little smaller. */
@media (max-width: 999px) { .deck > .fcard { gap: var(--sp-2); } .deck .fcard__photo { aspect-ratio: 5 / 2; } .deck > .fcard p { font-size: .97rem; line-height: 1.5; } .deck .fcard h3 { font-size: 1.3rem; } }

/* a member's card payment: the amount, how often, and Paid (the pill pops in when the card comes into view) */
.pay-mock { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--ring); }
.pay-mock__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); }
.pay-mock__row > span:nth-child(2) { display: grid; min-width: 0; }
.pay-mock__row small { color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-mock__row .story__avatar { font-size: var(--fs-xs); }
.pay-mock__amt { font-family: var(--font-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.pay-mock__seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: center; color: var(--text-2); }
.pay-mock__seg span { padding: 6px 0; border-radius: var(--r-pill); }
.pay-mock__seg .is-on { background: var(--grad-brand); color: var(--on-primary); }
.pay-mock__foot { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); }
.pay-mock__pill { flex: none; font-style: normal; font-weight: var(--fw-bold); font-size: var(--fs-xs); padding: 4px 12px; border-radius: var(--r-pill); color: var(--ok-fg); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.js .pay-mock__pill { opacity: 0; scale: .6; transition: opacity .4s var(--ease-out) .9s, scale .5s var(--ease-spring) .9s; }
.js .is-in .pay-mock__pill { opacity: 1; scale: 1; }

/* the six-digit code, typed in */
.code-mini { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--ring); }
.code-mini__boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.code-mini__boxes i { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 10px; border: 1.5px solid var(--accent-text); background: var(--card); font-style: normal;
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 16%, transparent); }
.code-mini__done { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); color: var(--accent-text); }
.code-mini__done .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--grad-brand); color: var(--on-primary); }
.js .code-mini__boxes i { color: transparent; border-color: var(--line); box-shadow: none; transition: color 160ms var(--ease-out), border-color 160ms, box-shadow 160ms; transition-delay: calc(500ms + var(--i, 0) * 170ms); }
.js .is-in .code-mini__boxes i { color: var(--text); border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 16%, transparent); }
.js .code-mini__done { opacity: 0; translate: 0 6px; transition: opacity 400ms var(--ease-out) 1.7s, translate 400ms var(--ease-out) 1.7s; }
.js .is-in .code-mini__done { opacity: 1; translate: none; }

/* phones and tablets: the cards stack like a deck as you scroll, each one sliding over the last (home.js dims the ones underneath) */
@media (max-width: 999px) {
  .deck { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); max-width: 620px; margin-inline: auto; }
  .deck > .fcard { --fpad: var(--sp-5); }
}
@media (max-width: 999px) and (min-height: 600px) {
  .deck { gap: var(--sp-6); }
  .deck > .fcard { position: sticky; top: calc(var(--hdr-h) + 10px + var(--i, 0) * 9px); height: min(470px, calc(100svh - var(--hdr-h) - 32px)); overflow: hidden;
    transform-origin: 50% 0; scale: calc(1 - var(--cover, 0) * .06); filter: brightness(calc(1 - var(--cover, 0) * .5)); }
  .deck .fcard__vis { margin-top: auto; }
}
@media (max-width: 999px) { .deck .fcard__photo { aspect-ratio: 2 / 1; } }
@media (max-width: 999px) and (min-height: 600px) and (max-height: 760px) { .deck > .fcard p { font-size: .95rem; } }
@media (min-width: 1000px) {
  .deck > .fcard { min-height: 100%; }
  .deck > .fcard--photo .fcard__photo { aspect-ratio: 2 / 1; }
}

/* ---------------------------------------------------------------- nothing else to run: what clubs find elsewhere, beside Braidwood (Grant, 16 Oct 2026) */
.simple-head { display: grid; gap: var(--sp-4); max-width: 46rem; margin-bottom: clamp(24px, 5vw, 48px); }
/* A direct comparison, row by row, with nobody named (Grant, 20 Oct 2026: "a direct comparison between Braidwood Sports and 'others'").
   On a phone each row is its topic, then what others do, then Braidwood Sports, each labelled; from 760px the labels head two columns
   and the Braidwood Sports column is the highlighted one. */
.simple-cmp { display: grid; gap: var(--sp-3); }
.cmp__head { display: none; }
.cmp__row { display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--card-r); border: 1px solid var(--line); background: var(--raised); }
.cmp__topic { margin: 0; font-size: 1.0625rem; }
.cmp__them, .cmp__us { display: grid; gap: 2px var(--sp-3); margin: 0; line-height: 1.45; }
.cmp__who { font: var(--fw-bold) .75rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.cmp__them { color: var(--text-2); }
.cmp__them .cmp__who { color: var(--text-3); }
.cmp__us { grid-template-columns: 22px minmax(0, 1fr); padding: var(--sp-3); border-radius: calc(var(--card-r) - 6px); font-weight: var(--fw-semibold);
  background: color-mix(in srgb, var(--primary) 9%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent); }
.cmp__us .cmp__who { grid-column: 1 / -1; color: var(--accent-text); }
.cmp__us .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-text); }
@media (min-width: 760px) {
  .simple-cmp { gap: 0; border-radius: var(--card-r); border: 1px solid var(--line); overflow: hidden; background: var(--raised); }
  .cmp__head, .cmp__row { grid-template-columns: minmax(130px, .7fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 0; align-items: stretch; }
  .cmp__head { display: grid; }
  .cmp__head > span { white-space: nowrap; padding: var(--sp-4) var(--sp-5); font: var(--fw-bold) .8125rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
  .cmp__head .cmp__them { color: var(--text-3); }
  .cmp__head .cmp__us { color: var(--accent-text); border-radius: 0; box-shadow: none; }
  .cmp__row { padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .cmp__topic, .cmp__them, .cmp__us { padding: var(--sp-4) var(--sp-5); }
  .cmp__us { border-radius: 0; box-shadow: none; }
  .cmp__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.simple-foot { margin: var(--sp-5) 0 0; max-width: 60ch; color: var(--text-2); }

/* ---------------------------------------------------------------- whatever you play */
.play-sec { padding-bottom: clamp(48px, 8vw, 96px); }
.play-sec__head { display: grid; gap: var(--sp-4); max-width: 44rem; }
.play-sec .marquee-bar { align-items: flex-end; }

/* ---------------------------------------------------------------- Last One Standing: a scoreboard under gold floodlights */
/* Flat (Grant, 29 Oct 2026): the gold glow in the corner and under the panel read as an AI template. A gold edge keeps it apart. */
.los-sec .los { border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: var(--card); box-shadow: none; }
.los-sec .los::before { display: none; }
.los-sec .los__copy { display: grid; gap: var(--sp-5); justify-items: start; min-width: 0; }
.los-sec .rules { gap: var(--sp-3); }
.scoreboard { position: relative; background: linear-gradient(170deg, var(--raised), var(--panel)); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.scoreboard__big { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.scoreboard__big span { display: grid; align-content: end; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); min-width: 0; }
.scoreboard__big b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.scoreboard__big small { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scoreboard__in b { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: var(--gold-fg); text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 60%, transparent); }
.scoreboard__in b.is-flip { animation: flip-num .6s var(--ease-out); }
@keyframes flip-num { 0% { rotate: x 0deg; } 50% { rotate: x 90deg; opacity: .2; } 100% { rotate: x 0deg; } }
.scoreboard__big .board__stat--due b { color: var(--gold-fg); }
.pick.is-hit { animation: pick-hit 1s var(--ease-out); }
@keyframes pick-hit { 0%, 100% { box-shadow: var(--ring); } 30% { box-shadow: 0 0 0 2px var(--bad-line), 0 0 22px -4px var(--bad-line); } }
@media (max-width: 479px) { .scoreboard__big { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On a phone the rules are the four that matter most; the other two are on the FAQ and the game's own pages. */
@media (max-width: 639px) { .los-sec .rules li:nth-child(4), .los-sec .rules li:nth-child(6) { display: none; } }

/* ---------------------------------------------------------------- pricing: a slider for your own price, then the two plans */
.price-head { display: grid; gap: var(--sp-4); justify-items: start; align-content: start; max-width: 46rem; }
.price-grid { display: grid; gap: clamp(24px, 5vw, 48px); align-items: start; }
.price-grid .plans { max-width: none; margin: 0; }
.price-head .btn, .faq-split__head .btn { max-width: 100%; white-space: normal; }
.price-foot { margin-top: var(--sp-6); }
@media (min-width: 1100px) { .price-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .price-head { position: sticky; top: calc(var(--hdr-h) + var(--sp-6)); } }

/* ---------------------------------------------------------------- FAQ: the heading stays beside the questions on a desktop */
.faq-split { display: grid; gap: var(--sp-6); }
.faq-split__head { display: grid; gap: var(--sp-4); justify-items: start; align-content: start; }
.faq-split .suggest { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-5) 0 0; margin-top: var(--sp-3); border-top: 1px solid var(--hair); }
.faq-split .suggest p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.faq-split .suggest .link { justify-self: start; min-height: var(--tap); display: inline-flex; align-items: center; }
@media (min-width: 960px) {
  .faq-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .faq-split__head { position: sticky; top: calc(var(--hdr-h) + var(--sp-6)); }
}

/* ---------------------------------------------------------------- the finish: full width, floodlit, the centre circle chalked in */
.finale { position: relative; --chalk: color-mix(in srgb, var(--text) 26%, transparent); }
.finale .cta { border-radius: 0; box-shadow: none; padding: clamp(96px, 16vw, 200px) 0; border-block: 1px solid var(--glass-line); }
.finale .cta--photo::before { background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--page) 80%, transparent), color-mix(in srgb, var(--page) 58%, transparent) 75%),
  linear-gradient(to top, var(--page), transparent 30%, transparent 70%, var(--page)); }
.finale__copy { display: grid; gap: var(--sp-5); justify-items: center; }
.finale .h2 { font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.8rem); max-width: 15ch; line-height: 1; letter-spacing: -.035em; }
.finale .finale__lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* beats .cta--photo > * (site.css), which puts every child in the flow */
.finale__lines path, .finale__lines ellipse:not(.finale__spot) { stroke: var(--chalk); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-out); }
.finale__lines ellipse:not(.finale__spot) { transition-delay: .4s; }
.finale__lines path + ellipse + path { transition-delay: .8s; }
.finale__spot { fill: var(--chalk); opacity: 0; transition: opacity .6s var(--ease) 2s; }
.finale .is-drawn .finale__lines path, .finale .is-drawn .finale__lines ellipse:not(.finale__spot), .finale.is-drawn .finale__lines path, .finale.is-drawn .finale__lines ellipse:not(.finale__spot) { stroke-dashoffset: 0; }
.finale.is-drawn .finale__spot { opacity: 1; }

/* ---------------------------------------------------------------- reduced motion and no scripts: everything shown, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .led__track { animation: none; }
  .js .howto .step { transition: none; }
  .js .howto__scene.is-on > *, .howto__scene.is-on .howto__undo i, .howto__scene.is-on .howto__bars i { animation: none; }
  .deck > .fcard { scale: none !important; filter: none !important; }
  .js .pay-mock__pill { opacity: 1; scale: 1; transition: none; }
  .js .code-mini__boxes i { color: var(--text); border-color: var(--accent-text); transition: none; }
  .js .code-mini__done { opacity: 1; translate: none; transition: none; }
  .finale__lines path, .finale__lines ellipse { stroke-dashoffset: 0 !important; transition: none !important; }
  .finale__spot { opacity: 1; transition: none; }
  .scoreboard__in b.is-flip, .pick.is-hit { animation: none; }
  .js .chase__row, .chase__total.is-up { transition: none; }
  .chase__row.is-new { animation: none; }
}
@media print { .led-sec { display: none; } .howto__stage { position: static; } .deck > .fcard { position: static; height: auto; } }
@media (forced-colors: active) { .led, .scoreboard__big span { border: 1px solid CanvasText; } }

/* ---------------------------------------------------------------- how members pay: card, and the official Apple Pay and Google Pay marks
   (Grant, 19 Oct 2026). The marks are shown exactly as supplied: never recoloured, stretched, dotted or animated (the brand rules), so they
   are not on the moving LED board, which only names them. 32px tall, with clear space round them. */
.paymark { display: inline-block; height: 32px; width: auto; vertical-align: middle; }
.pay-ways { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.pay-ways__card { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 70%, transparent); font-weight: 700; color: var(--text); }
.pay-ways__card .ico { width: 18px; height: 18px; color: var(--accent-text); }
.pay-ways__mark { display: inline-flex; padding: 0; }
.pay-ways__mark .paymark { height: 40px; } /* the same height as the Card, Direct Debit and Cash pills, so all five read as one set */
.pay-ways__note { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); }
/* On a phone the five ways sit on two tidy rows, each filling the width (Grant, 20 Oct 2026: "Direct Debit has its own line and it does not look right";
   Cash added 23 Oct 2026, and five would not fit one line): Card, Direct Debit and Cash, then the Apple Pay and Google Pay marks. */
@media (max-width: 639px) {
  .pay-ways { gap: 6px; }
  .pay-ways__card { flex: 1 1 auto; justify-content: center; gap: 5px; min-height: 36px; padding: 0 9px; font-size: .8125rem; white-space: nowrap; order: 1; }
  .pay-ways__card .ico { width: 15px; height: 15px; }
  .pay-ways::after { content: ""; order: 2; flex: 0 0 100%; height: 0; } /* a line break, so the marks always start their own row */
  .pay-ways__mark { flex: 0 0 auto; order: 3; } /* side by side under the pills, the same height as them (Grant, 30 Oct 2026: they were spread far apart and uneven) */
  .pay-ways__mark .paymark { height: 36px; }
}

/* One full-width photograph between Payments and Seasons, with one sentence on it (Grant, 29 Oct 2026: real team photos replace it once clubs
   agree). The photo is from Pexels and credited on the credits page. The shade under the words follows the theme, as on the finale. */
.photo-band { position: relative; display: grid; align-items: end; min-height: clamp(320px, 52vw, 560px); overflow: hidden; isolation: isolate; }
.photo-band__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--page) 88%, transparent)); }
.photo-band__in { padding-block: var(--sp-7); }
.photo-band__line { margin: 0; max-width: 30em; font: 700 clamp(1.25rem, 1rem + 1.2vw, 2rem)/1.25 var(--font-display); color: var(--text); }