/* site/assets/css/base.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Bet Gaffer — base: tokens, type, shell, primitives.
   Ported from the brand stylesheet (betgaffer/assets/css/bg.css) and trimmed to
   what this site renders. Token values are the brand's, verbatim. Dark only.

   The build concatenates base.css, fixtures.css, record.css, content.css and
   waitlist.css (in that order) into /assets/css/site.css. No inline styles
   anywhere: the CSP is style-src 'self'.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#0B1017;
  --surface:#101822;
  --surface-2:#131C27;
  --surface-3:#192432;
  --line:#22303F;
  --line-2:#2E3F52;
  --muted-2:#55677E;
  --muted:#8494A8;          /* 6.2:1 on --bg: legal for body copy */
  --ink-2:#C0CAD8;
  --ink:#EDF1F6;            /* 16.9:1 */

  --accent:#22C55E;         /* 8.2:1 on --bg */
  --accent-hi:#4ADE80;
  --accent-lo:#16A34A;
  --accent-quiet:rgba(34,197,94,.12);
  --on-accent:#04160B;

  /* Outcome semantics. Green is reserved for settled-won (and the accent). */
  --won:#22C55E;
  --lost:#E5484D;
  --hold:#F0B542;
  --void:#55677E;

  /* The recommended pick's star and eyebrow, and NOTHING else (fixtures.css). */
  --gold:#F5B301;

  --r-1:10px;
  --r-2:14px;
  --r-3:18px;
  --r-pill:999px;

  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:80rem;
  --gutter:16px;
  --bar-h:56px;
  --bar-h-lg:64px;
  --tap:44px;               /* minimum touch target */
  color-scheme:dark;
}
@media (min-width:640px){ :root{ --gutter:24px; } }

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}

/* ── 2. BASE ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; min-width:0; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--bg);
  /* Anchor jumps (the skip link, #main) land below the sticky bar, not under it. */
  scroll-padding-top:calc(var(--bar-h) + 52px);
}
@media (min-width:640px){ html{ scroll-padding-top:calc(var(--bar-h) + 12px); } }

body{
  margin:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--font-ui);
  font-size:15px;            /* 15, not 14: this is read on phones */
  line-height:1.6;
  max-width:100%;
  overflow-x:clip;           /* belt and braces; every component also wraps or truncates */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video{ max-width:100%; height:auto; }
svg{ display:block; }

a{ color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--accent-hi); }

h1,h2,h3,h4{ color:var(--ink); }

/* A long unbreakable string (a URL, a hash, a club name) sets a track's
   min-content width and pushes the page sideways at 360px. */
p,li,dd,dt,td,th,h1,h2,h3,h4,summary,.mono{ overflow-wrap:anywhere; }

::selection{ background:rgba(34,197,94,.28); color:var(--ink); }

:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:2px; }
main:focus{ outline:none; }   /* the skip-link target is not a control */

hr{ border:0; border-top:1px solid var(--line); margin:24px 0; }

details > summary{ cursor:pointer; }
details > summary::-webkit-details-marker{ display:none; }

ul[role="list"],ol[role="list"]{ list-style:none; margin:0; padding:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Screen-reader text. .visually-hidden is the brand doc's name for the same rule. */
.vh,.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── 3. TYPE ───────────────────────────────────────────────────────────────── */
.t-d1{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,7.5vw,46px); line-height:1.03; letter-spacing:-.03em;  color:var(--ink); margin:0; }
.t-d2{ font-family:var(--font-display); font-weight:800; font-size:clamp(21px,5vw,30px);   line-height:1.1;  letter-spacing:-.025em; color:var(--ink); margin:0; }
.t-h { font-family:var(--font-display); font-weight:700; font-size:clamp(17px,3.6vw,20px); line-height:1.25; letter-spacing:-.015em; color:var(--ink); margin:0; }
.t-b { font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; }
.t-s { font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; }
.t-lbl{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0;
}
.t-lbl--quiet{ color:var(--muted); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ── 4. LAYOUT ─────────────────────────────────────────────────────────────── */
.bg-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.bg-page{ flex:1 0 auto; padding-block:20px 56px; }
@media (min-width:1024px){ .bg-page{ padding-block:28px 72px; } }

.bg-stack{ display:flex; flex-direction:column; gap:14px; }
.bg-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bg-rule{ flex:1; height:1px; background:var(--line); }

.bg-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  padding:16px;
}
@media (min-width:640px){ .bg-card{ padding:20px 22px; } }

/* ── 5. SKIP LINK ──────────────────────────────────────────────────────────── */
.bg-skip{
  position:absolute; left:var(--gutter); top:8px; z-index:100;
  display:inline-flex; align-items:center; min-height:var(--tap); padding:0 16px;
  background:var(--accent); color:var(--on-accent); border-radius:var(--r-1);
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  transform:translateY(-200%);
}
.bg-skip:focus,.bg-skip:focus-visible{ transform:none; color:var(--on-accent); }

/* ── 6. TOPBAR ─────────────────────────────────────────────────────────────────
   Sticky glass bar. backdrop-filter makes it a containing block for fixed
   descendants, so nothing position:fixed may live inside it.
   Below 600px the nav drops to its own full-width row of three equal tabs:
   it wraps, it never scrolls sideways, and it needs no JS and no hamburger.
   ─────────────────────────────────────────────────────────────────────────── */
.bg-topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,16,23,.88);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.bg-topbar__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; column-gap:16px;
  min-height:var(--bar-h);
}

.bg-wordmark{
  display:inline-flex; align-items:center; min-height:52px;
  font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1;
  letter-spacing:-.035em; color:#fff; text-decoration:none; white-space:nowrap;
  margin-right:auto;
}
.bg-wordmark em{ font-style:normal; color:var(--accent); }
a.bg-wordmark:hover{ color:#fff; }
@media (min-width:1024px){ .bg-wordmark{ font-size:21px; } }

.bg-topbar__nav{ flex:1 1 100%; margin-inline:calc(var(--gutter) * -1); border-top:1px solid var(--line); }
.bg-topbar__nav ul{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.bg-topbar__nav a{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:var(--tap); padding:6px 6px;
  color:var(--muted); text-decoration:none;
  font-family:var(--font-mono); font-size:11px; font-weight:600; line-height:1.2;
  letter-spacing:.06em; text-transform:uppercase;
  border-bottom:2px solid transparent;
  transition:color .14s ease, background .14s ease, border-color .14s ease;
}
.bg-topbar__nav a:hover{ color:var(--ink); background:var(--surface-2); }
.bg-topbar__nav a[aria-current]{ color:var(--accent); border-bottom-color:var(--accent); }
.bg-topbar__nav a:focus-visible{ outline-offset:-3px; }

@media (min-width:600px){
  .bg-topbar__in{ flex-wrap:nowrap; }
  .bg-topbar__nav{ flex:0 1 auto; margin-inline:0; border-top:0; }
  .bg-topbar__nav ul{ display:flex; gap:4px; }
  .bg-topbar__nav a{
    padding:0 14px; border-radius:var(--r-1); border-bottom:0;
    font-size:11.5px; letter-spacing:.07em; white-space:nowrap;
  }
  .bg-topbar__nav a[aria-current]{ background:var(--accent-quiet); }
}
@media (min-width:1024px){ .bg-topbar__in{ min-height:var(--bar-h-lg); } }

/* ── 7. STALENESS BANNER ───────────────────────────────────────────────────────
   Empty and hidden in the static HTML; stale.js fills it with textContent and
   removes [hidden]. [hidden] must win over the display below.
   ─────────────────────────────────────────────────────────────────────────── */
.stale{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  margin:0 0 18px; padding:12px 14px 12px 16px;
  background:rgba(240,181,66,.08); color:var(--ink);
  border:1px solid rgba(240,181,66,.32); border-left:3px solid var(--hold);
  border-radius:var(--r-1);
  font-size:14px; line-height:1.5;
}
.stale[hidden]{ display:none; }
.stale a{ color:var(--hold); font-weight:600; }

/* ── 8. BUTTONS, CHIPS ─────────────────────────────────────────────────────── */
.bg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap;
  min-height:44px; padding:0 20px; border-radius:var(--r-1);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  font-family:var(--font-mono); font-weight:600; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.bg-btn--primary{ background:var(--accent); color:var(--on-accent); }
.bg-btn--primary:hover{ background:var(--accent-hi); color:var(--on-accent); transform:translateY(-1px); }
.bg-btn--primary:active{ background:var(--accent-lo); transform:none; }
.bg-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.bg-btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
/* Narrow phones: a long label wraps onto two centred lines instead of overflowing the viewport. */
@media (max-width:399.98px){ .bg-btn{ white-space:normal; text-align:center; } }
.bg-btn[disabled],.bg-btn[aria-disabled="true"]{
  background:var(--surface-2); border-color:var(--line); color:var(--muted-2); cursor:not-allowed; transform:none;
}

.bg-chip{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; line-height:1.4;
  letter-spacing:.09em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--muted);
}
.bg-chip--won { color:var(--won);  background:var(--accent-quiet);      border-color:transparent; }
/* --lost (#E5484D) is the edge/border red; as 10.5px text on its tint it falls below 4.5:1, so the
   chip text uses the lighter #F87171 (5.1:1 or better on every surface). */
.bg-chip--lost{ color:#F87171;     background:rgba(229,72,77,.12);      border-color:transparent; }
.bg-chip--open{ color:var(--hold); background:rgba(240,181,66,.12);     border-color:transparent; }
/* --void is #55677E: too dark for text, so it tints the chip and the text stays --muted. */
.bg-chip--void{ color:var(--muted); background:rgba(85,103,126,.18);    border-color:transparent; }

/* ── 9. EMPTY STATES ───────────────────────────────────────────────────────── */
.bg-empty{
  background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r-3);
  padding:38px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.bg-empty h2,.bg-empty h3{
  font-family:var(--font-display); font-weight:800; font-size:19px; line-height:1.25;
  letter-spacing:-.02em; color:var(--ink); margin:0;
}
.bg-empty p{ margin:0; font-size:13.5px; color:var(--muted); max-width:48ch; }
.bg-empty__row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px; }

/* ── 10. TABLES ────────────────────────────────────────────────────────────────
   Below 640px a .bg-table stacks: each row becomes a block and each cell shows
   its column name from data-label. Nothing scrolls sideways at 360px.
   ─────────────────────────────────────────────────────────────────────────── */
.bg-table{ width:100%; border-collapse:collapse; font-size:14px; }
.bg-table th,.bg-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.bg-table th{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.bg-table td.num,.bg-table th.num{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
@media (max-width:639.98px){
  /* The .vh clip pattern. A table-header-group ignores width and overflow, so thead, its row and
     its cells all become 1px blocks: no header box is laid out beyond the viewport. */
  .bg-table thead{
    display:block; position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .bg-table thead tr,.bg-table thead th{ display:block; width:1px; height:1px; padding:0; overflow:hidden; border:0; }
  .bg-table,.bg-table tbody,.bg-table tr,.bg-table td,.bg-table th[scope="row"]{ display:block; width:100%; }
  .bg-table tr{ padding:10px 0; border-bottom:1px solid var(--line); }
  .bg-table td,.bg-table th[scope="row"]{ border:0; padding:3px 0; }
  .bg-table td[data-label]{ display:flex; justify-content:space-between; gap:12px; }
  .bg-table td[data-label]::before{
    content:attr(data-label); flex:0 0 auto;
    font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted); padding-top:2px;
  }
  .bg-table td.num{ text-align:right; }
}

/* ── 11. FOOTER ────────────────────────────────────────────────────────────── */
.bg-foot{
  flex-shrink:0;
  background:var(--surface); border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.55; color:var(--muted);
}
.bg-foot__in{
  display:grid; grid-template-columns:minmax(0,1fr); gap:24px;
  padding-block:32px 28px;
}
@media (min-width:640px){
  .bg-foot__in{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:28px; }
  .bg-foot__brand{ grid-column:1 / -1; }
}
@media (min-width:1024px){
  .bg-foot__in{ grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); padding-block:40px 32px; }
  .bg-foot__brand{ grid-column:auto; }
}
.bg-foot p{ margin:0; }
.bg-foot__brand{ display:flex; flex-direction:column; gap:12px; max-width:52ch; }
.bg-foot__mark{ font-size:18px; min-height:0; margin:0; }
.bg-foot__statement{ color:var(--ink-2); }
.bg-foot__age{ display:flex; align-items:center; gap:10px; }
.bg-age{
  display:inline-grid; place-items:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:var(--r-pill);
  border:1.5px solid var(--ink-2); color:var(--ink);
  font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:-.02em;
}
.bg-foot__col{ display:flex; flex-direction:column; gap:8px; }
.bg-foot__col h2{ margin:0 0 2px; }
.bg-foot__col ul{ display:flex; flex-direction:column; }
.bg-foot__col a{ color:var(--ink-2); text-decoration:none; }
.bg-foot__col a:hover{ color:var(--accent); text-decoration:underline; }
.bg-foot__col ul a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.bg-foot__col p a{ display:inline-block; padding-block:10px; }
.bg-foot__legal{
  grid-column:1 / -1;
  padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted);
}

/* site/assets/css/fixtures.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Bet Gaffer — the day card: header, accuracy ring, competition groups,
   fixture rows, "How this card was built", day links.
   Markup: site/lib/fixtures.js + site/lib/ring.js. Tokens: base.css.

   Phone first (360px): every track is minmax(0, …), names clamp to two lines,
   and the price never wraps away from its selection. Nothing scrolls sideways.
   The 3px left edge mirrors the row's state; the state is always also written.
   ═══════════════════════════════════════════════════════════════════════════ */

.day{ display:flex; flex-direction:column; gap:18px; }

/* ── 1. HEADER ─────────────────────────────────────────────────────────────── */
.day-head{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:14px 28px; align-items:start;
}
.day-head__title{ display:flex; flex-direction:column; gap:6px; }
.day-head__title .t-lbl{ margin-bottom:2px; }
/* "Today"/"Tomorrow": empty and hidden in the static HTML; stale.js fills it for the visitor's date. */
.day-head__rel[hidden],.day-strip__tag[hidden]{ display:none; }
.day-head__date{ margin:0; font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.day-head__count{ margin:0; font-size:12.5px; color:var(--muted); }
.day-head__note{ margin:0; font-size:13px; line-height:1.55; color:var(--muted); max-width:62ch; }
.day-head__note a{ color:var(--ink-2); }
.day-head__note a:hover{ color:var(--accent); }

.day-receipt{ margin:0; font-size:11.5px; line-height:1.6; color:var(--muted-2); }
.day-receipt__link{
  display:inline-flex; align-items:center; min-height:var(--tap);
  color:var(--ink-2); text-decoration-color:var(--line-2);
}
.day-receipt__link:hover{ color:var(--accent); text-decoration-color:currentColor; }

@media (min-width:760px){
  .day-head{ grid-template-columns:minmax(0,1fr) minmax(0,380px); }
  .day-head__title{ grid-column:1; grid-row:1; align-self:center; }
  .day-head .ring{ grid-column:2; grid-row:1 / span 2; }
  .day-head__note{ grid-column:1; grid-row:2; }
  .day-receipt{ grid-column:1 / -1; }
}

/* ── 2. THE RING ───────────────────────────────────────────────────────────────
   The one loud thing on the card. The fraction is the hero (it is the part a
   stranger can check); the percentage sits small in the dial.
   ─────────────────────────────────────────────────────────────────────────── */
.ring{
  display:flex; align-items:center; gap:16px;
  padding:14px 16px 14px 14px;
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:var(--r-3);
}
.ring[data-state="graded"]{ border-color:rgba(34,197,94,.3); }

.ring__dial{
  order:-1; position:relative; flex:0 0 auto;
  width:72px; height:72px; display:grid; place-items:center;
}
.ring__svg{ position:absolute; inset:0; width:72px; height:72px; }
.ring__track{ fill:none; stroke:var(--line); stroke-width:4.5; }
/* No results yet: an open, dashed dial (the dash pattern is an SVG attribute). */
.ring__track--empty{ stroke:var(--line-2); stroke-width:2.5; }
.ring__arc{ fill:none; stroke:var(--accent); stroke-width:4.5; stroke-linecap:round; }
.ring__pct{
  position:relative; font-size:12.5px; font-weight:700; color:var(--accent);
  letter-spacing:-.03em;
}

.ring__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ring__label{ font-size:12.5px; line-height:1.4; color:var(--ink-2); }
.ring__hero{
  font-size:15px; font-weight:600; line-height:1.15; color:var(--muted);
  letter-spacing:-.01em;
}
.ring__hero b{ font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.04em; }
.ring__landed{ color:var(--ink-2); }
.ring[data-state="empty"] .ring__hero{
  font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--ink);
}
.ring__stated{ font-size:12.5px; line-height:1.45; color:var(--ink-2); }
.ring__meta{ font-size:11px; color:var(--muted); }

/* ── 3. COMPETITION GROUPS ─────────────────────────────────────────────────── */
.day-groups{ display:flex; flex-direction:column; gap:8px; }

.comp{ border-top:1px solid var(--line); }
.comp:first-child{ border-top:0; }
.comp > summary{
  display:flex; align-items:center; gap:10px; min-height:var(--tap);
  padding:6px 2px; list-style:none;
}
.comp > summary::after{
  content:''; flex:0 0 auto; width:7px; height:7px; margin:0 6px 3px 2px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg); transition:transform .15s ease;
}
.comp[open] > summary::after{ transform:rotate(-135deg); margin-bottom:-3px; }
.comp > summary:hover .comp__name{ color:var(--ink); }
/* An <h2> inside the summary, styled as the summary line (no heading margins or scale). */
.comp__name{
  flex:1 1 auto; min-width:0; margin:0;
  font-family:var(--font-ui); line-height:1.4; letter-spacing:0;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.comp__count{ flex:0 0 auto; font-size:11px; color:var(--muted-2); }

.fx-list{ display:flex; flex-direction:column; gap:6px; padding-bottom:10px; container-type:inline-size; }

/* ── 4. FIXTURE ROW ────────────────────────────────────────────────────────── */
/* The 56px time column fits the longest status word (POSTPONED, WITHDRAWN) at 9px without breaking it. */
.fx{
  display:grid; grid-template-columns:56px minmax(0,1fr);
  column-gap:12px; row-gap:9px; align-items:center;
  padding:11px 13px 11px 10px;
  background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:var(--r-2);
  overflow-wrap:normal;
}
.fx[data-state="won"]{ border-left-color:var(--won); }
.fx[data-state="lost"]{ border-left-color:var(--lost); }
.fx[data-state="pending"]{ border-left-color:var(--hold); }
.fx[data-state="push"],
.fx[data-state="void"],
.fx[data-state="withdrawn"]{ border-left-color:var(--void); }

.fx__time{ grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.fx__ko{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.fx__time em{
  font-style:normal; font-family:var(--font-mono); font-size:9px; line-height:1.25;
  letter-spacing:.03em; text-transform:uppercase; color:var(--muted);
  overflow-wrap:anywhere;
}
.fx__time em[data-live]{ display:inline-flex; align-items:center; gap:4px; color:var(--accent); }
/* A static dot, not a pulse: the status is as of the last update, not this second. */
.fx__time em[data-live]::before{ content:''; width:5px; height:5px; border-radius:var(--r-pill); background:var(--accent); }

.fx__teams{ grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.fx__team{
  font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; overflow-wrap:anywhere;
}

/* The outcome block: pick, withdrawn, late or nothing. */
.fx__pick{
  grid-column:1 / -1; grid-row:2;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:baseline;
  padding-top:9px; border-top:1px solid var(--line);
}
.fx__pick p{ margin:0; }
.fx__pickhead{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.fx__sel{ grid-column:1; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 7px; min-width:0; }
.fx__selname{ min-width:0; font-size:14px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.fx__prob{ grid-column:2; grid-row:2; text-align:right; white-space:nowrap; }
.fx__cap{ display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.fx__prob--none{ font-size:12px; color:var(--muted); white-space:normal; max-width:12ch; line-height:1.3; }
.fx__why,.fx__note,.fx__msg{ grid-column:1 / -1; }
.fx__why{ font-size:12.5px; line-height:1.45; color:var(--muted); }
.fx__note{
  font-size:12.5px; line-height:1.45; color:var(--hold);
  padding-left:9px; border-left:2px solid var(--hold);
}
.fx__msg{ font-size:13px; line-height:1.45; color:var(--muted); }
.fx__noprice{ font-size:12px; font-style:italic; color:var(--muted); white-space:nowrap; }

/* Grade chip: the written state. Slightly tighter than the base chip. */
.fx__grade{ padding:3px 9px; font-size:10px; }

/* Estimated price: the chip is the marker; its full meaning is in title + .vh text. */
.fx__est{
  padding:1px 7px; font-size:9.5px; letter-spacing:.06em; text-transform:none;
  color:var(--hold); border-color:rgba(240,181,66,.38); background:transparent;
  align-self:center;
}

/* Rows without a recommendation stay quiet. */
.fx__pick--none{ grid-template-columns:minmax(0,1fr); }
.fx[data-state="late"] .fx__team,
.fx[data-state="nopick"] .fx__team{ color:var(--ink-2); }

/* Withdrawn: the published pick stays visible, struck, and plainly not graded. */
.fx__pick--struck s{ text-decoration-thickness:1px; text-decoration-color:var(--muted); }
.fx__pick--struck .fx__selname,
.fx__pick--struck .bg-odds,
.fx__pick--struck .bg-prob{ color:var(--muted); }
.fx__offcard{
  font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.fx[data-state="withdrawn"] .fx__team{ color:var(--ink-2); }

/* Kickoff moved before the freeze: shown, never counted. */
.fx[data-uncounted] .fx__grade{ border-style:dashed; border-color:currentColor; }

/* Pick-block leaves shared with the brand (bg.css §11). */
.bg-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--gold); white-space:nowrap;
}
.bg-star{ color:var(--gold); font-size:13px; line-height:1; text-shadow:0 0 11px rgba(245,179,1,.45); }
.bg-odds{
  flex:0 0 auto; white-space:nowrap;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:13px; letter-spacing:-.01em; color:var(--ink);
}
.bg-prob{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:17px; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--accent);
}

/* Wide rows: kickoff | teams | pick rail. Revealed by the list's own width. */
@container (min-width:720px){
  .fx{
    grid-template-columns:56px minmax(0,1fr) minmax(300px,380px);
    padding:12px 16px 12px 12px;
  }
  .fx__pick{
    grid-column:3; grid-row:1;
    padding:0 0 0 16px; border-top:0; border-left:1px solid var(--line);
  }
}

/* ── 5. EMPTY DAY ──────────────────────────────────────────────────────────── */
.day-empty{ margin-top:4px; }

/* ── 6. HOW THIS CARD WAS BUILT ────────────────────────────────────────────── */
.day-how{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
}
.day-how > summary{
  display:flex; align-items:center; min-height:var(--tap); padding:6px 16px;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
}
.day-how > summary::after{
  content:'+'; margin-left:auto; padding-left:12px;
  font-family:var(--font-mono); font-size:16px; color:var(--muted);
}
.day-how[open] > summary::after{ content:'−'; }
.day-how__body{
  display:flex; flex-direction:column; gap:10px;
  padding:2px 16px 16px; font-size:13.5px; line-height:1.6; color:var(--muted); max-width:72ch;
}
.day-how__body p{ margin:0; }

/* ── 7. DAY LINKS ──────────────────────────────────────────────────────────── */
.day-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.day-nav__link{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  min-height:var(--tap); padding:9px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  text-decoration:none; color:var(--ink);
}
.day-nav__link:hover{ border-color:var(--line-2); background:var(--surface-2); color:var(--ink); }
.day-nav__link--prev{ grid-column:1; }
.day-nav__link--next{ grid-column:2; text-align:right; }
.day-nav__dir{
  font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.day-nav__date{ font-size:13.5px; font-weight:600; }

/* ── 8. HOME, ARCHIVE AND STATUS (build.mjs, day.js, stale.js) ─────────────────
   The 7-day strip shares the width evenly (minmax(0,1fr) columns: seven days fit
   at 360px with no sideways scroll). Archive stubs reuse the day header; day.js
   swaps the full card into #day-root or appends an error box.
   ─────────────────────────────────────────────────────────────────────────── */
.stale p{ margin:0; }

.day-strip__list{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; }
.day-strip__link{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:var(--tap); padding:6px 2px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-1);
  color:var(--ink-2); text-decoration:none;
}
.day-strip__link:hover{ border-color:var(--line-2); background:var(--surface-2); color:var(--ink); }
.day-strip__link[aria-current]{ border-color:var(--accent); background:var(--accent-quiet); color:var(--ink); }
.day-strip__dow{
  font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.day-strip__date{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12px; font-weight:600; white-space:nowrap; }
.day-strip__tag{ font-size:9.5px; line-height:1.2; color:var(--accent); overflow-wrap:anywhere; }
@media (min-width:640px){
  .day-strip__dow{ font-size:10.5px; }
  .day-strip__date{ font-size:13px; }
  .day-strip__tag{ font-size:10.5px; }
}

.home-head{ margin-bottom:4px; }
.home-notice{
  padding:12px 14px 12px 16px; border-radius:var(--r-1);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--hold);
  font-size:14px; line-height:1.5; color:var(--ink-2);
}
.home-notice p{ margin:0; }
.home-next{ margin:0 0 4px; font-size:14px; line-height:1.5; color:var(--ink-2); }
.home-next a{ color:var(--accent); font-weight:600; }
.home-empty{ margin-top:8px; }
main > .home-notice,
main > .home-next,
main > .day-strip{ margin-bottom:16px; }

.day-stub__note{ margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); }
.day-stub__note a{ color:var(--ink-2); overflow-wrap:anywhere; }
.day-load{ margin:0; font-size:13.5px; color:var(--muted); }
.day-error{ margin-top:4px; border-color:rgba(229,72,77,.45); }
.day-error a{ color:var(--ink-2); overflow-wrap:anywhere; }

.nf{ margin-block:24px; }
.nf h1{ margin:0; }

/* site/assets/css/record.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Bet Gaffer — /our-record/ (site/lib/record.js).
   The 30-day fraction is the one loud thing on the page; everything around it
   is quiet. Numbers are mono and tabular so columns of counts line up.
   No inline styles: the meter's widths are SVG attributes, never style=.
   ═══════════════════════════════════════════════════════════════════════════ */

.rec-intro{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; max-width:62ch; }
.rec-intro__lede{ color:var(--muted); }

.rec-muted{ color:var(--muted); }

/* ── Headline: the fraction first, then the facts that make it checkable ── */
.rec-head{
  display:grid; grid-template-columns:minmax(0,1fr); gap:22px;
  padding:20px 16px 18px;
  background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-3);
}
@media (min-width:640px){ .rec-head{ padding:26px 26px 22px; } }
@media (min-width:960px){
  .rec-head{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:40px; align-items:start; padding:32px 34px; }
  .rec-head__h{ grid-column:1 / -1; }
}
.rec-head__h{ margin:0; font-size:14px; font-weight:600; letter-spacing:-.005em; color:var(--muted); }

.rec-head__main{ display:flex; flex-direction:column; gap:8px; }
.rec-hero{
  margin:0; color:var(--ink);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-weight:700; font-size:clamp(34px,10vw,64px); line-height:1; letter-spacing:-.045em;
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.28em; row-gap:4px;
}
.rec-hero .mono{ font-weight:700; }
.rec-hero__won{ color:var(--accent); }
.rec-hero__of{
  font-family:var(--font-ui); font-weight:500; font-size:.42em; letter-spacing:0;
  color:var(--muted);
}
.rec-hero--empty{ font-family:var(--font-display); font-size:clamp(22px,5vw,30px); letter-spacing:-.02em; }
.rec-hero__cap{ margin:0; font-size:16px; color:var(--ink-2); max-width:44ch; }

.rec-pct{ display:flex; align-items:center; gap:14px; margin-top:10px; max-width:30rem; }
.rec-pct__v{ flex:0 0 auto; font-size:20px; font-weight:600; color:var(--ink); }
.rec-meter{ flex:1 1 auto; width:100%; height:6px; border-radius:var(--r-pill); overflow:hidden; }
.rec-meter__track{ fill:var(--surface-3); }
.rec-meter__fill{ fill:var(--accent-lo); }
.rec-meter__ci{ fill:var(--accent-hi); }

.rec-facts{ margin:0; display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line); }
@media (min-width:960px){ .rec-facts{ border-top:0; border-left:1px solid var(--line); padding-left:28px; } }
.rec-fact{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:11px 0; border-bottom:1px solid var(--line); }
.rec-fact:last-child{ border-bottom:0; padding-bottom:0; }
@media (min-width:960px){ .rec-fact:first-child{ padding-top:0; } }
@media (min-width:480px){ .rec-fact{ grid-template-columns:8.5rem minmax(0,1fr); gap:14px; } }
.rec-fact dt{ font-size:13px; font-weight:600; color:var(--muted); }
.rec-fact dd{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.rec-fact dd .mono{ color:var(--ink); }

.rec-scope{ display:flex; flex-direction:column; gap:6px; margin:16px 0 0; max-width:72ch; }
.rec-scope p{ margin:0; }

/* ── Sections ── */
.rec-sec{ margin-top:40px; display:flex; flex-direction:column; gap:12px; }
.rec-sec__lede{ margin-top:-6px; }

/* ── Six-day strip: 2 → 3 → 6 columns, never sideways ── */
.rec-strip{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
@media (min-width:640px){ .rec-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .rec-strip{ grid-template-columns:repeat(6,minmax(0,1fr)); } }

.rec-day{ display:flex; }
.rec-day__link,.rec-day__in{
  flex:1; display:flex; flex-direction:column; gap:4px;
  padding:12px 14px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  color:inherit; text-decoration:none;
}
.rec-day__link{ transition:border-color .14s ease, background .14s ease; }
.rec-day__link:hover{ border-color:var(--line-2); background:var(--surface-2); color:inherit; }
.rec-day--today .rec-day__link,.rec-day--today .rec-day__in{ border-color:var(--hold); }
.rec-day p{ margin:0; }
.rec-day__date{ font-size:12.5px; color:var(--muted); }
.rec-day__frac{ font-size:19px; font-weight:700; line-height:1.2; color:var(--ink); letter-spacing:-.02em; }
.rec-day__of{ font-family:var(--font-ui); font-size:12.5px; font-weight:500; color:var(--muted); letter-spacing:0; }
.rec-day__pct{ font-size:13.5px; color:var(--ink-2); }
.rec-day__none{ font-size:14px; color:var(--muted); padding-block:4px; }
/* Two classes: outranks `.rec-day p{ margin:0 }` by specificity alone. */
.rec-day .rec-day__state{ margin-top:auto; padding-top:6px; }

/* ── Status chips: sentence case here, not the shouting caps of the base chip ── */
.rec-chip{ text-transform:none; letter-spacing:.01em; font-size:11.5px; white-space:normal; }
.rec-chip--confirmed{ color:var(--ink); border-color:var(--line-2); }

/* ── Month table ── */
.rec-months-card{ padding:4px 16px; }
@media (min-width:640px){ .rec-months-card{ padding:6px 22px; } }
.rec-months th[scope="row"]{ font-family:var(--font-ui); font-size:14.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); white-space:normal; }
.rec-months tbody tr:last-child th,.rec-months tbody tr:last-child td{ border-bottom:0; }
.rec-months td.num{ color:var(--ink); }
.rec-month{ display:block; }
.rec-note{ display:block; margin-top:3px; font-size:12.5px; font-weight:400; line-height:1.45; color:var(--muted); max-width:34ch; }
@media (max-width:639.98px){
  .rec-months tbody tr:last-child{ border-bottom:0; }
  .rec-months th[scope="row"]{ padding-bottom:6px; }
}

/* ── Footnotes ── */
.rec-foot{
  list-style:none; margin:36px 0 0; padding:18px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px; max-width:78ch;
}
.rec-foot a{ overflow-wrap:anywhere; }

.rec-empty{ margin-top:8px; }

/* site/assets/css/content.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Bet Gaffer — content pages: features, privacy, terms, refunds (Task 5).
   Long-form legal on dark. Every legal section is a two-column grid —
   "Now (this site)" | "At full launch" — that stacks below 640px with the
   column label repeated per section. Reading measure capped at ~70ch per
   column. Uses base.css tokens only; no inline styles anywhere (CSP).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DOCUMENT + HERO ────────────────────────────────────────────────────── */
.ct-doc{ display:flex; flex-direction:column; }

.ct-hero{ display:flex; flex-direction:column; gap:12px; padding-block:8px 24px; }
.ct-hero > *{ max-width:70ch; }
.ct-hero .t-d1{ max-width:22ch; }
.ct-meta{ margin:0; font-size:12px; letter-spacing:.04em; color:var(--muted); }
.ct-meta time{ color:var(--ink-2); }
.ct-lead{ margin:0; font-size:16.5px; line-height:1.6; color:var(--ink-2); }
@media (min-width:640px){ .ct-lead{ font-size:17.5px; } }
.ct-lead strong{ color:var(--ink); font-weight:600; }
.ct-pos{
  margin:4px 0 0; padding:10px 14px;
  font-size:13.5px; line-height:1.55; color:var(--muted);
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-1);
  background:var(--surface);
}

/* ── 2. OPERATOR IDENTITY ──────────────────────────────────────────────────── */
.ct-ident{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  padding:14px 16px;
}
.ct-ident dl{
  margin:0; display:grid; gap:12px 24px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:640px){
  .ct-ident{ padding:16px 20px; }
  .ct-ident dl{ grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
}
.ct-ident dt{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 3px;
}
.ct-ident dd{ margin:0; color:var(--ink); font-size:14px; line-height:1.5; }
.ct-ident dd a{ display:inline-block; padding-block:4px; }

/* ── 3. HOW-TO-READ + CONTENTS ─────────────────────────────────────────────── */
.ct-howto{ margin-top:20px; }
.ct-howto p{ margin:0; max-width:70ch; font-size:14px; line-height:1.6; color:var(--muted); }
.ct-howto strong{ color:var(--ink-2); font-weight:600; }

.ct-toc{ margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.ct-toc h2{ margin:0 0 6px; }
.ct-toc ol{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:24px; }
@media (min-width:640px){ .ct-toc ol{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .ct-toc ol{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ct-toc a{
  display:flex; align-items:center; gap:12px; min-height:var(--tap);
  color:var(--ink-2); text-decoration:none; font-size:14px; line-height:1.35;
  border-bottom:1px solid var(--line);
}
.ct-toc a:hover{ color:var(--accent); }
.ct-toc a .mono{ flex:0 0 auto; font-size:11px; color:var(--muted-2); letter-spacing:.06em; }
.ct-toc a:hover .mono{ color:var(--accent); }

/* ── 4. TWO-COLUMN SECTIONS ────────────────────────────────────────────────────
   Mobile: columns stack, each with its own label. ≥640px: a sticky column
   header names the columns once; the per-section labels stay in the DOM for
   screen readers (the header is aria-hidden) but are visually hidden.
   ─────────────────────────────────────────────────────────────────────────── */
.ct-colhead{ display:none; }

.ct-sec{ padding-block:28px; border-top:1px solid var(--line); }
.ct-sec__h{
  display:flex; align-items:baseline; gap:12px; margin:0 0 16px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(17px,3.6vw,20px);
  line-height:1.3; letter-spacing:-.015em; color:var(--ink);
}
.ct-sec__n{ flex:0 0 auto; font-size:12px; font-weight:600; color:var(--muted-2); letter-spacing:.06em; }

.ct-cols{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }

.ct-col{ padding-left:14px; border-left:2px solid rgba(34,197,94,.55); }
.ct-col--launch{ border-left:2px dashed var(--line-2); }
.ct-col > *{ max-width:70ch; }

.ct-col__lbl{
  margin:0 0 8px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
}
.ct-col--launch .ct-col__lbl{ color:var(--muted); }

.ct-col p{ margin:0 0 12px; font-size:15px; line-height:1.65; color:var(--ink-2); }
.ct-col ul{ margin:0 0 12px; padding-left:1.15em; }
.ct-col li{ font-size:15px; line-height:1.6; color:var(--ink-2); }
.ct-col li + li{ margin-top:6px; }
.ct-col li::marker{ color:var(--muted-2); }
.ct-col > :last-child{ margin-bottom:0; }
.ct-col strong{ color:var(--ink); font-weight:600; }
.ct-col--launch p,.ct-col--launch li{ color:var(--ink-2); }
.ct-col .ct-same{ color:var(--muted); }

@media (min-width:640px){
  .ct-colhead{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px;
    position:sticky; top:var(--bar-h); z-index:10;
    margin-top:28px; padding-block:10px;
    background:rgba(11,16,23,.94);
    border-bottom:1px solid var(--line-2);
    font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase;
  }
  .ct-colhead span{ padding-left:16px; position:relative; }
  .ct-colhead span::before{
    content:""; position:absolute; left:0; top:50%; width:8px; height:8px; margin-top:-4px;
    border-radius:var(--r-pill);
  }
  .ct-colhead__now{ color:var(--accent); }
  .ct-colhead__now::before{ background:var(--accent); }
  .ct-colhead__launch{ color:var(--muted); }
  .ct-colhead__launch::before{ border:1.5px dashed var(--muted); }

  .ct-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; }
  .ct-col__lbl{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  /* Anchor jumps land below the topbar AND the sticky column header. */
  .ct-sec{ scroll-margin-top:44px; }
  .ct-colhead + .ct-sec{ border-top:0; }
}
@media (min-width:1024px){ .ct-colhead{ top:var(--bar-h-lg); } }

/* ── 5. CONTACT BLOCK ──────────────────────────────────────────────────────── */
.ct-contact{
  margin-top:12px; padding:18px 18px 16px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-2);
  display:flex; flex-direction:column; gap:8px;
}
.ct-contact h2{ margin:0 0 2px; }
.ct-contact p{ margin:0; max-width:70ch; font-size:15px; line-height:1.6; color:var(--ink-2); }
.ct-contact__addr{ font-size:13.5px; color:var(--muted); }
.ct-contact p.ct-contact__addr{ color:var(--muted); font-size:13.5px; }

/* ── 6. FEATURES ───────────────────────────────────────────────────────────── */
.ct-breadth{
  align-self:flex-start; max-width:100%;
  margin:6px 0 0; padding:10px 14px;
  font-size:14px; line-height:1.55; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-1);
}
.ct-breadth strong{ color:var(--ink); font-weight:700; }

.ct-fsec{ margin-top:36px; }
@media (min-width:1024px){ .ct-fsec{ margin-top:48px; } }
.ct-fsec > .t-d2,.ct-fsec__head{ margin:0 0 16px; }
.ct-fsec__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; }
.ct-fsec__head .t-d2{ margin:0; }

.ct-feats{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
@media (min-width:640px){ .ct-feats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .ct-feats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }

.ct-feat{
  display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  padding:18px;
}
@media (min-width:640px){ .ct-feat{ padding:20px 22px; } }
.ct-feat__n{ margin:0; font-size:11.5px; font-weight:600; letter-spacing:.1em; color:var(--accent); }
.ct-feat .t-h{ margin:0; }
.ct-feat p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:62ch; }
.ct-feat--soon{ background:transparent; border-style:dashed; border-color:var(--line-2); }

.ct-pricing p{ max-width:70ch; margin:0 0 12px; }
.ct-pricing > p:first-of-type{ font-size:15.5px; color:var(--ink-2); }
.ct-tiers{ max-width:28rem; margin:4px 0 10px; }

.ct-waitlist{
  padding:20px 18px; border:1px solid var(--line-2); border-radius:var(--r-3);
  background:var(--surface);
}
@media (min-width:640px){ .ct-waitlist{ padding:26px 28px; } }

.ct-features > .ct-ident{ margin-top:36px; }

/* site/assets/css/waitlist.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Bet Gaffer — founding waitlist form and its no-JS result pages (plan Task 7).
   Concatenated last into /assets/css/site.css; uses base.css tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

.bg-wl{
  display:flex; flex-direction:column; gap:14px;
  max-width:34rem;
  padding:18px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
}
@media (min-width:640px){ .bg-wl{ padding:22px 24px; } }

/* "500 founding places" → "n of 500 founding places left" (JS). Never a date. */
.bg-wl__places{
  margin:0;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent);
}

.bg-wl__field{ display:flex; flex-direction:column; gap:6px; }
.bg-wl__label{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.bg-wl__input{
  width:100%; min-height:var(--tap); padding:10px 12px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-1);
  font-family:var(--font-ui); font-size:16px;   /* 16px: phones do not zoom on focus */
  line-height:1.4;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.bg-wl__input::placeholder{ color:var(--muted-2); }
.bg-wl__input:hover{ border-color:var(--muted-2); }
.bg-wl__input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-quiet); }
.bg-wl__input:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:1px; }

/* The 18+ box: the whole row is a 44px target via its label. */
.bg-wl__check{ display:flex; align-items:center; gap:10px; min-height:var(--tap); }
.bg-wl__check label{ color:var(--ink); font-size:15px; cursor:pointer; padding-block:8px; }
.bg-wl__box{
  flex:0 0 auto; width:20px; height:20px; margin:0;
  accent-color:var(--accent); cursor:pointer;
}

.bg-wl__consent{ margin:0; font-size:13px; line-height:1.55; color:var(--muted); }

.bg-wl__actions{ display:flex; }
.bg-wl__actions .bg-btn{ width:100%; }
@media (min-width:480px){ .bg-wl__actions .bg-btn{ width:auto; } }
.bg-btn[disabled]{ pointer-events:none; }

/* Live region: empty until the script writes into it. */
.bg-wl__status{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); }
.bg-wl__status[data-state="ok"]{
  padding:10px 12px; border-radius:var(--r-1);
  background:var(--accent-quiet); color:var(--ink); border-left:3px solid var(--accent);
}
.bg-wl__status[data-state="error"]{
  padding:10px 12px; border-radius:var(--r-1);
  background:rgba(229,72,77,.10); color:var(--ink); border-left:3px solid var(--lost);
}

.bg-wl[aria-busy="true"]{ cursor:progress; }

/* ── no-JS result pages: /waitlist/<kind>/ ─────────────────────────────── */
.bg-wl-result{ display:flex; flex-direction:column; gap:14px; max-width:40rem; padding-block:12px 8px; }
.bg-wl-result .bg-wl{ margin-top:6px; }
.bg-wl-result__back{ margin:6px 0 0; font-size:14px; color:var(--muted); }
.bg-wl-result__back a{ display:inline-block; padding-block:10px; }