/* =============================================================================================
   iPLEXsports — THE PUBLIC SITE'S ONE STYLESHEET
   index.html · tournament.html · assignors.html · officials.html · tickets.html

   ONE FILE ON PURPOSE. The five pages used to carry five copied stylesheets, and every comment in
   them was about how the copies had drifted. Now a page owns its words and its hero picture, and
   nothing about how it looks. Change a rule here and all five change together.

   CloudFront caches nothing on this host (measured 2026-09-13: every request a Miss, no
   Cache-Control), so an upload is live on the next request. The pages still ask for
   site.css?v=<date> so a browser's heuristic cache cannot hold an old copy either -- bump the
   date in all five <link>s when this file changes.

   THE LOOK: a score sheet and a scoreboard. Warm paper, court-navy boards, the brand amber,
   condensed display type for headlines, IBM Plex for the words (iPLEX, Plex -- it was too good to
   leave) and Plex Mono for every label that would be printed on a sheet. Court lines are the
   only ornament.
============================================================================================= */

:root {
  --paper:    #f6f3ec;
  --paper-2:  #eee9dd;
  --card:     #fffdf8;
  --ink:      #0d1524;
  --ink-2:    #3f4858;
  --ink-3:    #5f6777;   /* was #687080: 4.11:1 on --paper-2, under AA for its small mono captions; now 4.69 (2026-10-05) */
  --rule:     #e0d9ca;
  --rule-2:   #cbc2ae;

  --navy:     #0b1322;
  --navy-2:   #111b2d;
  --navy-3:   #1c2942;
  --navy-rule: rgba(255,255,255,.10);
  --on-navy:   #eef1f6;
  --on-navy-2: rgba(238,241,246,.72);
  --on-navy-3: rgba(238,241,246,.56);   /* was .50: 4.35:1 on --navy-3 (.offer small); now 5.07 (2026-10-05) */

  --amber:      #f4a723;
  --amber-hot:  #ffb83a;
  --amber-logo: #e0930c;
  /* amber as TEXT on paper. #f4a723 is 2:1 on the paper colour; this is 5:1 -- and 5:1 on the worst place it
     is set, a pill's --amber-wash over --paper-2 (#955400 was 4.49 there; 2026-10-05). */
  --amber-deep: #8a4e00;
  --amber-ink:  #1a1204;
  --amber-wash: color-mix(in srgb, var(--amber) 16%, transparent);

  --live:  #15803d;  --live-on-navy: #4ade80;
  --stop:  #b42318;  --stop-on-navy: #fb8a7e;

  --f-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4.5vw, 64px);
  --wrap: 1480px;
  --r: 14px;
  --r-lg: 22px;

  --t-hero: clamp(3rem, 1.5rem + 5.6vw, 6.6rem);
  --t-h2:   clamp(2.3rem, 1.5rem + 3vw, 4.1rem);
  --t-h3:   clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  --t-lede: clamp(1.06rem, 1rem + .35vw, 1.26rem);

  --shadow: 0 1px 0 rgba(13,21,36,.04), 0 28px 56px -32px rgba(13,21,36,.38);

  /* A volleyball court from above: the 18 x 9 outline, the centre line and both attack lines. */
  --court-ink:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 900' fill='none' stroke='%230d1524' stroke-width='8'%3E%3Crect x='4' y='4' width='1792' height='892'/%3E%3Cpath d='M900 4v892M600 4v892M1200 4v892'/%3E%3C/svg%3E");
  --court-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 900' fill='none' stroke='%23ffffff' stroke-width='8'%3E%3Crect x='4' y='4' width='1792' height='892'/%3E%3Cpath d='M900 4v892M600 4v892M1200 4v892'/%3E%3C/svg%3E");
  --tick-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4a723' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --tick-ink:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1204' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --cross-red:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px;
  background: var(--amber); color: var(--amber-ink); font-weight: 700; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }
#top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ---- the wordmark: i + PLEX + sports, PLEX bold and amber. Always text, never an image. ---- */
.wm { font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.wm b { font-weight: 700; color: var(--amber-logo); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ink); text-decoration: none; font-size: 1.2rem; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--solid, var(--ink)); color: var(--amber);
  font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; line-height: 1;
}

/* =============================================================================================
   BUTTONS -- 48px minimum on both axes, because a thumb is about that wide
============================================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; max-width: 100%; padding: 0 22px; border-radius: 12px;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-align: center;
  font-weight: 700; font-size: .98rem; letter-spacing: -.005em; text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform .18s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-demo { background: var(--amber); color: var(--amber-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 28px -16px color-mix(in srgb, var(--amber-deep) 95%, transparent); }
.btn-demo:hover { background: var(--amber-hot); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { border-color: rgba(255,255,255,.28); color: var(--on-navy); background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.btn-lg { min-height: 58px; padding: 0 28px; font-size: 1.05rem; border-radius: 14px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .93rem; border-radius: 10px; }
.btn-block { width: 100%; }
@media (max-width: 420px) { .btn { white-space: normal; } }

/* ---- labels ---- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--f-mono); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber-deep);
}
.kicker .n {
  display: inline-grid; place-items: center; min-width: 2.4em; height: 1.9em; padding: 0 .45em; border-radius: 6px;
  background: var(--solid, var(--ink)); color: var(--amber); font-size: .74rem;
}
.tag {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px;
  font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-2);
}
.tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-wash); }
.tname { font-family: var(--f-mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ---- display type ---- */
.display { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.004em; line-height: .9; }
.h1 { font-size: var(--t-hero); }
.h2 { font-size: var(--t-h2); line-height: .94; }
.h2s { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); line-height: .95; }

/*  A NEW CONCEPT, SAID LOUDER (owner, 2026-10-06: tournament.html's League Scheduling -- "a whole new concept compared to
    the rest of the page, I don't want to lose it"). Near hero-size heading, and a kicker big enough to read as a label. */
.h-new { font-size: clamp(3rem, 1.4rem + 5vw, 6.2rem); line-height: .9; }
.kicker-lg { font-size: clamp(.95rem, .85rem + .3vw, 1.15rem); gap: 14px; margin-bottom: 24px; }
.kicker-lg .n { font-size: .9em; height: 2em; padding: 0 .6em; }

/*  THE HIGHLIGHTER. A marker stroke through the lower half of the words that carry the sentence,
    drawn on once when the page opens. box-decoration-break so a wrapped phrase gets a stroke
    on each line rather than one stroke broken across two. */
.hl {
  background-image: linear-gradient(var(--hl, var(--amber)), var(--hl, var(--amber))); background-repeat: no-repeat;
  background-size: 100% .32em; background-position: 0 86%; padding-inline: .03em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.js .hl { background-size: 0 .32em; animation: hl-draw .9s .3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes hl-draw { to { background-size: 100% .32em; } }
.on-navy .hl { background-image: none; color: var(--amber); }

/* =============================================================================================
   HEADER -- the same bar on all five pages. Transparent paper at the top, a rule once scrolled.
============================================================================================= */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
  padding-top: env(safe-area-inset-top);
}
.site-head.stuck { border-bottom-color: var(--rule); box-shadow: 0 12px 30px -26px rgba(13,21,36,.5); }
.head-row { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.nav { display: none; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; color: var(--ink-2); transition: background .15s, color .15s;
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.head-signin { padding: 10px 12px; font-weight: 600; font-size: .95rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.head-signin:hover { color: var(--ink); }

.burger {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; cursor: pointer;
  background: var(--card); border: 0; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink);
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .2s ease, background .2s ease;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

.mnav { padding-block: 4px 20px; border-top: 1px solid var(--rule); }
.mnav a:not(.btn) {
  display: flex; justify-content: space-between; align-items: center; padding: 15px 2px;
  border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 600;
}
.mnav a[aria-current="page"]::after { content: "You are here"; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--amber-deep); }
.mnav .btn { width: 100%; margin-top: 16px; }

@media (min-width: 1340px) {          /* seven products in the bar need the room (2026-09-30: Hotels added; 2026-10-01: Store) */
  .nav { display: flex; }
  .head-actions { margin-left: 10px; }
  .burger, .mnav { display: none !important; }
}
@media (max-width: 1339px) { .head-signin { display: none; } }
@media (max-width: 560px)  { .head-actions .btn { display: none; } }

/* =============================================================================================
   HERO
============================================================================================= */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(34px, 6vw, 84px) clamp(52px, 7vw, 100px); }
.hero::before {
  content: ""; position: absolute; z-index: -1; right: -14%; bottom: -24%; width: min(1100px, 90vw); aspect-ratio: 2 / 1;
  background: var(--court-ink) center / contain no-repeat; opacity: .07; transform: rotate(-9deg);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 76px); align-items: center; }
@media (min-width: 1060px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hero .tag { margin-bottom: 24px; }
.hero-sub { margin-top: 26px; font-size: var(--t-lede); color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.promise { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; font-size: .93rem; color: var(--ink-2); }
/* THE PITCH ABOVE THE FOLD ON A LAPTOP (2026-10-05). Sized by width alone, the headline was ~96px on a 1280 screen
   and four lines tall, so on a 1366 x 768 laptop the sentence saying what the product is, the button and the price
   all sat below the fold. On a wide screen the headline now also answers to the screen's HEIGHT, and the air above
   it is trimmed -- a 1080-tall monitor still gets the full size. */
@media (min-width: 1060px) {
  :root { --t-hero: clamp(3rem, min(1.5rem + 5.6vw, 8.6vh), 6.6rem); }
  .hero { padding-top: clamp(26px, 2.6vw, 44px); }
  .hero .tag { margin-bottom: 18px; }
  .hero-sub { margin-top: 18px; }
  .hero-cta { margin-top: 24px; }
  .promise { margin-top: 18px; }
}
.promise li { display: inline-flex; align-items: center; gap: 9px; }
.promise li::before { content: ""; flex: none; width: 19px; height: 19px; border-radius: 50%; background: var(--solid, var(--ink)) var(--tick-amber) center / 11px no-repeat; }
.free-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px;
  font-weight: 600; color: var(--ink);
}
.free-line .badge {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--amber); color: var(--amber-ink);
}
.free-line a { color: var(--amber-deep); text-decoration: none; white-space: nowrap; }
.free-line a:hover { text-decoration: underline; }

.hero-visual { position: relative; }
.visual-cap {
  margin-top: 14px; text-align: right;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

/* =============================================================================================
   THE BOARD -- the scoreboard card each hero draws its page's story on. Built in HTML, not a
   picture, so it is sharp at any size and the scores can move.
============================================================================================= */
.board {
  position: relative; isolation: isolate; overflow: hidden; padding: 8px; border-radius: var(--r-lg);
  background: var(--navy); color: var(--on-navy); font-size: .95rem;
  box-shadow: 0 0 0 1px #050a14, 0 48px 90px -44px rgba(13,21,36,.75);
}
.board::before {
  content: ""; position: absolute; z-index: -1; inset: 0; background: var(--court-light) center / 120% no-repeat; opacity: .035;
}
.board-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px 14px;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-3);
}
.board-top .title { color: var(--on-navy); font-weight: 600; }
.board-top .meta { margin-left: auto; color: var(--amber); }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--live-on-navy); font-weight: 600; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } }
.board-body { display: grid; gap: 6px; }
.brow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 13px 14px; border-radius: 12px; background: var(--navy-2); border: 1px solid var(--navy-rule);
}
.brow .lab {
  min-width: 4.4em; line-height: 1.3;
  font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--amber);
}
.brow .main { min-width: 0; font-weight: 600; line-height: 1.35; }
.brow .main small { display: block; margin-top: 2px; font-weight: 400; font-size: .8rem; color: var(--on-navy-3); }
.score { font-family: var(--f-display); font-weight: 800; font-size: 1.8rem; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.board-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 14px 10px;
  font-size: .8rem; color: var(--on-navy-3);
}
.board-foot b { color: var(--on-navy); font-weight: 600; }
.flash { animation: flash 1s ease; }
@keyframes flash { 0% { color: var(--amber); text-shadow: 0 0 18px color-mix(in srgb, var(--amber) 75%, transparent); } 100% { text-shadow: none; } }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.chip.ok   { background: rgba(74,222,128,.12);  color: var(--live-on-navy); box-shadow: inset 0 0 0 1px rgba(74,222,128,.3); }
.chip.wait { background: color-mix(in srgb, var(--amber) 14%, transparent);  color: var(--amber);        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 36%, transparent); }
.chip.open { background: rgba(251,138,126,.12); color: var(--stop-on-navy); box-shadow: inset 0 0 0 1px rgba(251,138,126,.32); }
.chip.mute { background: rgba(255,255,255,.06); color: var(--on-navy-2); }
.panel .chip.ok   { background: #e0f1e5; color: var(--live); box-shadow: none; }
.panel .chip.wait { background: #fbebcc; color: var(--amber-deep); box-shadow: none; }
.panel .chip.open { background: #fbe3df; color: var(--stop); box-shadow: none; }
.panel .chip.mute { background: var(--paper-2); color: var(--ink-3); box-shadow: none; }

/* a standings table inside a board */
.board-table { overflow-x: auto; border-radius: 12px; background: var(--navy-2); border: 1px solid var(--navy-rule); }
.stand { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.stand th {
  padding: 9px 12px; text-align: right; font-weight: 600;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-3);
}
.stand td { padding: 10px 12px; text-align: right; border-top: 1px solid var(--navy-rule); white-space: nowrap; }
.stand th:nth-child(-n+2), .stand td:nth-child(-n+2) { text-align: left; }
.stand td:first-child { width: 2em; font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; line-height: 1; color: var(--amber); }
.stand td:nth-child(2) { font-weight: 600; }
.stand tr.lead td { background: color-mix(in srgb, var(--amber) 8%, transparent); }

/* the phone (officials) */
.phone {
  width: min(370px, 100%); margin-inline: auto; padding: 11px; border-radius: 44px; background: var(--navy);
  box-shadow: 0 0 0 2px #26324a, 0 50px 90px -40px rgba(13,21,36,.75);
}
.phone-screen { padding: 12px 12px 16px; border-radius: 34px; background: var(--navy-2); color: var(--on-navy); overflow: hidden; }
.phone-notch { width: 104px; height: 24px; margin: -12px auto 12px; border-radius: 0 0 16px 16px; background: var(--navy); }
.phone-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 12px; }
.phone-head b { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; line-height: 1; }
.phone-head span { font-family: var(--f-mono); font-size: .7rem; color: var(--on-navy-3); text-transform: uppercase; letter-spacing: .06em; }
.offer { padding: 14px; border-radius: 16px; background: var(--navy-3); border: 1px solid var(--navy-rule); }
.offer + .offer { margin-top: 8px; }
.offer-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .7rem; color: var(--amber); text-transform: uppercase; letter-spacing: .05em; }
.offer b { display: block; margin: 8px 0 2px; font-weight: 600; line-height: 1.3; }
.offer small { color: var(--on-navy-3); font-size: .8rem; }
.offer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.offer-actions span { display: grid; place-items: center; min-height: 38px; border-radius: 10px; font-weight: 700; font-size: .88rem; }
.offer-actions .yes { background: var(--amber); color: var(--amber-ink); }
.offer-actions .no  { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: var(--on-navy-2); }
.phone-total { display: flex; justify-content: space-between; align-items: end; gap: 10px; padding: 16px 6px 2px; color: var(--on-navy-2); font-size: .85rem; }
.phone-total b { font-family: var(--f-display); font-weight: 800; font-size: 2.2rem; line-height: .9; color: var(--amber); }

/* the ticket (tickets) */
.ticket-stack { position: relative; }
.ticket {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden;
  width: min(460px, 92%); margin: -44px 0 0 auto; border-radius: 20px; background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule-2), 0 36px 60px -30px rgba(13,21,36,.55); transform: rotate(-2.2deg);
}
.ticket-main { padding: 20px 22px; min-width: 0; }
.ticket-main .tname { color: var(--amber-deep); }
.ticket-main b { display: block; margin-top: 6px; font-family: var(--f-display); font-weight: 800; font-size: 1.9rem; line-height: .95; text-transform: uppercase; }
.ticket-main small { display: block; margin-top: 6px; color: var(--ink-3); font-size: .85rem; }
.ticket-stub { position: relative; display: grid; place-items: center; gap: 8px; padding: 16px 18px; background: var(--paper-2); border-left: 2px dashed var(--rule-2); }
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); }
.ticket-stub::before { top: -12px; }
.ticket-stub::after  { bottom: -12px; }
.ticket-stack .board { padding-bottom: 56px; }
[data-qr] { display: block; width: 92px; height: 92px; border-radius: 4px; background: #fff; }
.qr { width: 92px; height: 92px; display: block; }
.scan { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 999px; }
.scan.ok   { background: #e0f1e5; color: var(--live); }
.scan.open { background: #fbe3df; color: var(--stop); }

/* =============================================================================================
   THE FACT STRIP -- four numbers under the hero. A FIXED 4 / 2 / 1 grid, so every cell is the
   same width whether or not its row is full.
============================================================================================= */
.facts { background: var(--card); border-block: 1px solid var(--rule); }
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding: 28px clamp(16px, 2.2vw, 32px); border-left: 1px solid var(--rule); }
.fact:first-child { border-left: 0; }
.fact b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem); line-height: .92; letter-spacing: -.01em; }
.fact span { display: block; margin-top: 8px; font-size: .93rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 1000px) {
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(odd) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .facts-grid { grid-template-columns: 1fr; }
  .fact { border-left: 0; }
  .fact + .fact { border-top: 1px solid var(--rule); }
}

/* =============================================================================================
   SECTIONS
============================================================================================= */
.section { position: relative; padding-block: clamp(60px, 7vw, 100px); }   /* 128 -> 100 at the top end (2026-10-05): shorter pages, same rhythm */
.section-alt { background: var(--paper-2); border-block: 1px solid var(--rule); }
.section-tight { padding-block: clamp(48px, 6vw, 84px); }
.sec-head.compact { margin-bottom: 28px; }
.on-navy { background: var(--navy); color: var(--on-navy); isolation: isolate; overflow: hidden; }
.on-navy::before {
  content: ""; position: absolute; z-index: -1; left: -10%; top: -30%; width: min(1200px, 100vw); aspect-ratio: 2 / 1;
  background: var(--court-light) center / contain no-repeat; opacity: .045; transform: rotate(7deg);
}
.on-navy .kicker { color: var(--amber); }
.on-navy .kicker .n { background: var(--amber); color: var(--amber-ink); }
.sec-head { display: grid; gap: 18px 72px; align-items: end; margin-bottom: clamp(34px, 4vw, 54px); }
@media (min-width: 980px) { .sec-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.lede { font-size: var(--t-lede); color: var(--ink-2); }
.on-navy .lede { color: var(--on-navy-2); }
.lede a { color: var(--amber-deep); font-weight: 600; }

/* ---- lists with a tick ---- */
.checks { display: grid; gap: 12px; margin-top: 24px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.5; color: var(--ink-2); }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--solid, var(--ink)) var(--tick-amber) center / 12px no-repeat; }
.checks b { color: var(--ink); }
.on-navy .checks li { color: var(--on-navy-2); }
.on-navy .checks li::before { background: var(--amber) var(--tick-ink) center / 12px no-repeat; }
.on-navy .checks b { color: var(--on-navy); }

/* =============================================================================================
   WITHOUT / WITH -- a two-position switch. With scripting off both panels show side by side.
============================================================================================= */
.seg { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 26px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); max-width: 100%; }
.seg button { border: 0; background: transparent; cursor: pointer; padding: 11px 18px; border-radius: 10px; font-weight: 700; font-size: .95rem; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button[data-show="with"][aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); }
html:not(.js) .seg { display: none; }
.vs { display: grid; gap: 18px; }
@media (min-width: 900px) { html:not(.js) .vs { grid-template-columns: 1fr 1fr; } }
.vs-panel { padding: clamp(26px, 3.6vw, 48px); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.vs-panel.with { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.js .vs-panel { animation: rise .35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vs-panel h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: var(--t-h3); line-height: .95; margin-bottom: 26px; }
.vs-list { display: grid; gap: 16px 48px; }
@media (min-width: 760px) { .vs-list { grid-template-columns: 1fr 1fr; } }
.vs-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; line-height: 1.5; color: var(--ink-2); }
.vs-list li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: #f6dcd6 var(--cross-red) center / 12px no-repeat; }
.with .vs-list li { color: var(--on-navy-2); }
.with .vs-list li::before { background: var(--amber) var(--tick-ink) center / 13px no-repeat; }

/* =============================================================================================
   THE PLAYBOOK -- the feature grid. Fixed 3 / 2 / 1 tracks, ruled like a score sheet.
============================================================================================= */
.plays {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden;
  border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule);
}
@media (max-width: 1000px) { .plays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .plays { grid-template-columns: 1fr; } }
.play { position: relative; padding: clamp(24px, 2.8vw, 36px); box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule); }
.play::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--amber); transition: width .35s ease; }
.play:hover::before { width: 100%; }
.play .no { font-family: var(--f-mono); font-size: .76rem; font-weight: 600; letter-spacing: .06em; color: var(--amber-deep); }
.play h3 { margin: 14px 0 8px; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.play p { font-size: .97rem; color: var(--ink-2); }

/* =============================================================================================
   PRODUCTS -- the six parts, on the overview
============================================================================================= */
.products { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .products { grid-template-columns: 1fr; } }
.product {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .2s ease, transform .2s ease;
}
.product:hover { box-shadow: inset 0 0 0 1px var(--rule-2), var(--shadow); transform: translateY(-2px); }
.product .shot { aspect-ratio: 16 / 7.4; border-bottom: 1px solid var(--rule); }
.product-body { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.8vw, 36px); }
.product-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.product h3 { margin-top: 10px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1.5rem + 1.2vw, 2.6rem); line-height: .92; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  background: var(--amber-wash); color: var(--amber-deep);
}
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; margin-top: 20px; }
@media (max-width: 420px) { .ticks { grid-template-columns: 1fr; } }
.ticks li { display: flex; gap: 10px; font-size: .95rem; color: var(--ink-2); line-height: 1.45; }
.ticks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .45em; background: var(--amber); transform: rotate(45deg); }
.product-foot { margin-top: auto; padding-top: 26px; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--amber); padding-bottom: 2px; }
.more .arr { transition: transform .18s ease; }
.more:hover .arr { transform: translateX(4px); }

/* =============================================================================================
   SCREENSHOTS -- every one opens full size. The link works with scripting off; with it on,
   the picture opens in a lightbox instead of a new tab.
============================================================================================= */
.shot { position: relative; display: block; overflow: hidden; background: var(--paper-2); cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .6s ease; }
.shot:hover img { transform: scale(1.03); }
.shot.contain img { object-fit: contain; object-position: center; padding: 14px; }
.shot .zoom {
  position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(11,19,34,.8); color: #fff; transition: background .18s, color .18s, transform .18s;
}
.shot:hover .zoom { background: var(--amber); color: var(--amber-ink); transform: scale(1.06); }
.shot-frame { border-radius: var(--r-lg); border: 1px solid var(--rule-2); box-shadow: var(--shadow); }
.shot-frame.tall { aspect-ratio: 4 / 3; }

.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 36px) / 3)); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent;
}
@media (max-width: 900px) { .gallery { grid-auto-columns: minmax(260px, 78%); } }
.gallery figure { scroll-snap-align: start; }
.gallery .shot { aspect-ratio: 4 / 3; border-radius: var(--r); border: 1px solid var(--rule-2); }
.gallery figcaption { margin-top: 12px; font-size: .93rem; color: var(--ink-2); line-height: 1.45; }
.gallery figcaption b { display: block; color: var(--ink); font-weight: 700; }
.gallery-hint { margin-top: 10px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgba(6,10,18,.88); backdrop-filter: blur(4px); }
.lightbox img { max-width: min(96vw, 1900px); max-height: 84vh; width: auto; height: auto; margin-inline: auto; border-radius: 12px; background: #fff; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 0 2px 12px; color: #fff; font-size: .92rem; }
.lb-close { flex: none; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem; line-height: 1; }
.lb-close:hover { background: var(--amber); color: var(--amber-ink); }

/* =============================================================================================
   SPLIT ROWS AND PANELS
============================================================================================= */
.split { display: grid; gap: clamp(34px, 5vw, 88px); align-items: center; }
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.flip > :first-child { order: 2; }
}
.split + .split { margin-top: clamp(64px, 8vw, 112px); }
.split .copy p { margin-top: 16px; color: var(--ink-2); }
.on-navy .split .copy p { color: var(--on-navy-2); }
.split .copy .btn { margin-top: 28px; }

.panel { overflow: hidden; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow); }
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px;
  background: var(--paper-2); border-bottom: 1px solid var(--rule); font-weight: 700;
}
.panel-head span:last-child { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--rule); }
.prow:last-child { border-bottom: 0; }
.prow b { display: block; font-weight: 700; line-height: 1.35; }
.prow small { color: var(--ink-3); font-size: .86rem; }

/* league / tournament */
.halves { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .halves { grid-template-columns: 1fr; } }
.half { padding: clamp(26px, 3.4vw, 44px); border-radius: var(--r-lg); background: var(--navy-2); border: 1px solid var(--navy-rule); }
.half h3 { margin: 14px 0 10px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.8rem); line-height: .92; }
.half > p { color: var(--on-navy-2); }
.half .pill { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }

/* =============================================================================================
   STEPS -- four across, the number set in display type above a heavy rule
============================================================================================= */
.steps { display: grid; gap: 26px 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } }
.step { padding-top: 20px; border-top: 3px solid var(--ink); }
.on-navy .step { border-top-color: var(--amber); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero); display: block; margin-bottom: 16px;
  font-family: var(--f-display); font-weight: 800; font-size: 3.8rem; line-height: .8; color: var(--amber-deep);
}
.on-navy .step::before { color: var(--amber); }
.step h3 { font-size: 1.16rem; font-weight: 700; line-height: 1.3; }
.step p { margin-top: 8px; font-size: .97rem; color: var(--ink-2); }
.on-navy .step p { color: var(--on-navy-2); }

/* THE WEEKEND RAIL -- nine steps in three phases, on the overview */
.rail { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .rail { grid-template-columns: 1fr; } }
.phase { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--navy-2); border: 1px solid var(--navy-rule); }
.phase-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--amber); }
.phase-head h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 2rem; line-height: .9; }
.phase-head span { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-3); }
.phase li { position: relative; padding: 18px 0 18px 52px; border-bottom: 1px solid var(--navy-rule); }
.phase li:last-child { border-bottom: 0; padding-bottom: 4px; }
.phase li::before {
  content: attr(data-n); position: absolute; left: 0; top: 18px; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber);
  font-family: var(--f-mono); font-size: .8rem; font-weight: 600;
}
.phase h4 { font-size: 1.04rem; font-weight: 700; line-height: 1.3; }
.phase p { margin-top: 5px; font-size: .93rem; color: var(--on-navy-2); }

/* =============================================================================================
   THE CALCULATOR -- sliders on a board, the answer on a receipt. Every rate in it is a
   published price; nothing is estimated.
============================================================================================= */
/*  align-items:start, not stretch: the receipt is the taller card, and stretched to match it the
    sliders' panel ended in a block of empty navy. */
.calc { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 940px) { .calc { grid-template-columns: 1fr; } }
.calc-in { display: grid; gap: 30px; align-content: start; padding: clamp(24px, 3.2vw, 44px); border-radius: var(--r-lg); background: var(--navy); color: var(--on-navy); }
.field label { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-weight: 600; }
.field output { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 1.8rem + 1vw, 2.8rem); line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.field small { display: block; margin-top: 4px; font-size: .86rem; font-weight: 400; color: var(--on-navy-3); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin-top: 12px; background: transparent; cursor: pointer; --fill: 50%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(var(--amber), var(--amber)) 0 / var(--fill) 100% no-repeat, var(--navy-3); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--amber); border: 5px solid var(--navy); box-shadow: 0 0 0 1.5px var(--amber); }
.range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--navy-3); }
.range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--amber); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--amber); border: 5px solid var(--navy); box-shadow: 0 0 0 1.5px var(--amber); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1.5px var(--amber), 0 0 0 7px color-mix(in srgb, var(--amber) 30%, transparent); }
.opts { display: grid; gap: 10px; }
.opt { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--navy-rule); cursor: pointer; line-height: 1.4; }
.opt:has(input:checked) { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.opt input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--amber); }
.opt small { display: block; color: var(--on-navy-3); font-size: .86rem; margin-top: 2px; }
.opts-legend { font-weight: 600; margin-bottom: 4px; }
fieldset.opts { border: 0; margin: 0; padding: 0; min-width: 0; }

.receipt { display: flex; flex-direction: column; padding: clamp(24px, 3.2vw, 44px); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2), var(--shadow); }
.receipt-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.rline { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--rule-2); }
.rline span small { display: block; color: var(--ink-3); font-size: .84rem; }
.rline b { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rline.free b { color: var(--live); }
.rtotal { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-top: auto; padding-top: 22px; }
.rtotal span { font-weight: 700; line-height: 1.3; }
.rtotal span small { font-weight: 400; font-size: .86rem; color: var(--ink-3); }
.rtotal b { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 2rem + 2.4vw, 4.2rem); line-height: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rnote { margin-top: 14px; font-size: .86rem; color: var(--ink-3); }
.receipt .btn { margin-top: 22px; }

/* =============================================================================================
   PRICING
============================================================================================= */
.tiers { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiers.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .tiers, .tiers.two { grid-template-columns: 1fr; } }
.tier { display: flex; flex-direction: column; padding: clamp(26px, 3.2vw, 42px); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.tier.feature { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.tier.feature .tname { color: var(--amber); }
.tier .price { margin-top: 16px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.4rem, 2.6rem + 2.4vw, 4.8rem); line-height: .85; }
.tier .price small { margin-left: 6px; font-family: var(--f-body); font-weight: 600; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.tier.feature .price small { color: var(--on-navy-3); }
.tier .who { margin-top: 14px; color: var(--ink-2); }
.tier.feature .who, .tier.feature .checks li { color: var(--on-navy-2); }
.tier.feature .checks li::before { background: var(--amber) var(--tick-ink) center / 12px no-repeat; }
.tier .checks { margin-block: 24px 30px; }
.tier .btn { margin-top: auto; width: 100%; }
.tier-note { margin-top: -10px; margin-bottom: 26px; padding: 14px 16px; border-radius: 12px; background: var(--amber-wash); font-size: .93rem; line-height: 1.5; }
.tier.feature .tier-note { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--on-navy); }
.fine { margin-top: 26px; font-size: .95rem; color: var(--ink-2); }
.fine a { color: var(--amber-deep); font-weight: 600; }

/* the one-line price, said very large (officials) */
.bigfree { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(4.5rem, 2.5rem + 9vw, 12rem); line-height: .8; letter-spacing: -.01em; }

/* =============================================================================================
   THE DEMO -- where every page ends up
============================================================================================= */
.demo-grid { display: grid; gap: clamp(34px, 5vw, 80px); align-items: center; }
@media (min-width: 1020px) { .demo-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.agenda { margin-top: 36px; counter-reset: agenda; }
.agenda li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--navy-rule); }
.agenda li::before { counter-increment: agenda; content: counter(agenda, decimal-leading-zero); font-family: var(--f-display); font-weight: 800; font-size: 2.8rem; line-height: .82; color: var(--amber); }
.agenda h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.agenda p { margin-top: 5px; font-size: .98rem; color: var(--on-navy-2); }
.book { padding: clamp(26px, 3.6vw, 46px); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 50px 90px -40px rgba(0,0,0,.85); }
.book h3 { margin-top: 10px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.4rem); line-height: .9; }
.book > p { margin-top: 12px; color: var(--ink-2); }
.book .btn { width: 100%; margin-top: 24px; }
.book .btn + .btn { margin-top: 10px; }
.or { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule-2); }
.contact { display: grid; gap: 10px; }
.contact a {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; text-decoration: none;
  font-weight: 600; overflow-wrap: anywhere; box-shadow: inset 0 0 0 1px var(--rule-2); transition: box-shadow .15s;
}
.contact a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.contact svg { flex: none; color: var(--amber-deep); }
.bring { margin-top: 18px; font-size: .9rem; color: var(--ink-3); }

/* =============================================================================================
   FAQ -- <details>, so it works with scripting off
============================================================================================= */
.faq-grid { display: grid; gap: 28px 72px; }
@media (min-width: 980px) {
  .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .faq-grid > .faq-side { position: sticky; top: 110px; }
}
.faq-side .lede { margin-top: 16px; }
.faq details { border-top: 1px solid var(--rule-2); }
.faq details:last-child { border-bottom: 1px solid var(--rule-2); }
.faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 18px; align-items: center; padding: 22px 0;
  list-style: none; cursor: pointer; font-weight: 700; font-size: 1.08rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 1.3rem; font-weight: 500; line-height: 1;
  transition: transform .2s ease, background .2s ease;
}
.faq summary:hover::after { box-shadow: inset 0 0 0 1.5px var(--ink); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--amber); color: var(--amber-ink); box-shadow: none; }
.faq details p { padding: 0 52px 24px 0; color: var(--ink-2); }
.faq details p a { color: var(--amber-deep); font-weight: 600; }

/* =============================================================================================
   THE PLATFORM ROW -- the same six cards on every page, the current one marked
============================================================================================= */
/* A SLIM BAND, NOT A SECTION (2026-10-05). It sits above every hero and it is a menu, so it stays short: the page's
   own pitch -- the headline, the sentence that says what the product is, Book a demo and the price -- has to be in
   the first screen under it. It used to carry a sentence on every card and wrap below 1320px: two rows of cards on
   a laptop, seven stacked on a phone, the headline two screens down. Now a card is its audience and its name, one
   line of seven down to a tablet, and on a phone a swipe row with this page's card first and the next peeking in.
   (The home page's own "Six parts" section is where each product gets its sentence.) */
section[aria-labelledby="platform-h"] { padding-block: clamp(18px, 1.6vw, 26px); }
section[aria-labelledby="platform-h"] .sec-head { margin-bottom: 14px; }
section[aria-labelledby="platform-h"] .kicker { display: none; }
section[aria-labelledby="platform-h"] .h2s { font-size: clamp(1.4rem, 1.1rem + .7vw, 1.8rem); }
.platform { display: grid; gap: 10px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pcard {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; border-radius: var(--r); text-decoration: none;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .15s ease, transform .15s ease;
}
.pcard:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.pcard b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, .3rem + .95vw, 1.35rem); line-height: .92; overflow-wrap: anywhere; }
.pcard .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard > span:last-child { display: none; }
.pcard[aria-current="page"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.pcard[aria-current="page"] .tname { color: var(--amber); }
@media (max-width: 900px) {
  .platform {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 3px var(--gutter) 4px; scroll-padding-inline: var(--gutter);
  }
  .platform::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 auto; min-width: 148px; scroll-snap-align: start; }
  .pcard b { font-size: 1.3rem; }
  .pcard:hover { transform: none; }
  .pcard[aria-current="page"] { order: -2; }   /* ahead of the intake's picks (order -1) */
}

/* =============================================================================================
   FOOTER, AND THE PHONE'S DEMO DOCK
============================================================================================= */
.site-foot { padding-block: 60px 34px; background: var(--navy); color: var(--on-navy-2); font-size: .95rem; border-top: 1px solid var(--navy-rule); }   /* the rule: the demo band above it is navy too (2026-10-05) */
.site-foot .brand { color: var(--on-navy); }
.site-foot .brand-mark { background: var(--amber); color: var(--amber-ink); }
.site-foot .wm b { color: var(--amber); }
.foot-grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand p { margin-top: 14px; color: var(--on-navy-3); }
.foot-grid h3 { margin-bottom: 14px; font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-3); }
.foot-grid a { display: inline-block; padding: 5px 0; color: var(--on-navy-2); text-decoration: none; overflow-wrap: anywhere; }
.foot-grid a:hover { color: var(--amber); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--navy-rule); font-size: .86rem; color: var(--on-navy-3); }

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11,19,34,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--navy-rule);
  transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
}
.dock.show { transform: none; visibility: visible; transition: transform .25s ease; }
.dock p { flex: 1; min-width: 0; color: var(--on-navy-2); font-size: .82rem; line-height: 1.3; }
.dock p b { display: block; color: var(--on-navy); font-size: .92rem; }
.dock .btn { flex: none; }
@media (min-width: 761px) { .dock { display: none; } }
@media (max-width: 760px) { .site-foot { padding-bottom: 104px; } }
@media (max-width: 360px) { .dock p { display: none; } .dock .btn { flex: 1; } }

/* =============================================================================================
   BOOK A DEMO (/demo/) -- the booking itself, on the PantherSIS scheduler. public/demo/index.pl
   draws it; assets/js/demo.js runs it.
============================================================================================= */
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.demo-page { padding-block: clamp(26px, 4vw, 56px) clamp(64px, 8vw, 110px); }
/*  minmax(0, 1fr) on the ONE-column layouts too, not just the two-column ones. An implicit grid
    column is "auto", and an auto track grows to its widest child's intrinsic size -- here the zone
    <select>, whose intrinsic width is its longest option. On a phone that pushed the whole card,
    the heading beside it and the menu button off the right edge of the screen. */
.demo-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 72px; align-items: end; margin-bottom: clamp(28px, 3.6vw, 48px); }
@media (min-width: 980px) { .demo-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.bk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.bk-side, .bk-main { min-width: 0; }
.bk-tz select { max-width: 100%; }
@media (min-width: 1100px) { .bk { grid-template-columns: minmax(320px, .7fr) minmax(0, 1.6fr); } }

.bk-side { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 3vw, 38px); border-radius: var(--r-lg); background: var(--navy); color: var(--on-navy); }
.bk-side::before { content: ""; position: absolute; z-index: -1; right: -40%; bottom: -10%; width: 160%; aspect-ratio: 2 / 1; background: var(--court-light) center / contain no-repeat; opacity: .04; transform: rotate(-8deg); }
.bk-side .tname { color: var(--amber); }
.bk-side h2 { margin-top: 10px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.2rem); line-height: .9; }
.bk-side .hl { background-image: none; color: var(--amber); }
.bk-host { margin-top: 8px; color: var(--on-navy-2); }
.bk-facts { display: grid; gap: 8px; margin-top: 24px; }
.bk-fact { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--navy-2); border: 1px solid var(--navy-rule); }
.bk-fact .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); }
.bk-fact b { display: block; font-weight: 600; line-height: 1.3; }
.bk-fact small { display: block; color: var(--on-navy-3); font-size: .84rem; line-height: 1.35; }
.bk-fact .bk-clock { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; }
.bk-tz { margin-top: 18px; }
.bk-tz label { display: block; margin-bottom: 6px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-3); }
.bk-tz select { width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--navy-rule); background: var(--navy-2); color: var(--on-navy); font: inherit; }
.bk-tz p { margin-top: 8px; font-size: .86rem; color: var(--on-navy-3); }
.bk-side .agenda { margin-top: 22px; }
.bk-side .agenda li { grid-template-columns: 52px minmax(0, 1fr); padding: 16px 0; }
.bk-side .agenda li::before { font-size: 2.2rem; }
.bk-side .agenda h3 { font-size: 1rem; }
.bk-side .agenda p { font-size: .9rem; }

.bk-main { min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow); }
.stepper { display: flex; overflow-x: auto; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.stepper li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 16px 20px; white-space: nowrap; border-right: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.stepper li:last-child { border-right: 0; }
.stepper li span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--rule-2); }
.stepper li em { font-style: normal; }
.stepper li[aria-current="step"] { background: var(--card); color: var(--ink); }
.stepper li[aria-current="step"] span { background: var(--amber); color: var(--amber-ink); box-shadow: none; }
.stepper li.done span { background: var(--solid, var(--ink)); color: var(--amber); box-shadow: none; }
@media (max-width: 600px) { .stepper li { padding: 12px; } .stepper li:not([aria-current]) em { display: none; } }

.bk-panel { padding: clamp(20px, 3vw, 38px); }
.bk-time { display: grid; gap: 28px; }
@media (min-width: 780px) { .bk-time { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-head b, .slots-head b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.7rem; line-height: .95; }
.cal-nav { width: 42px; height: 42px; border-radius: 10px; border: 0; cursor: pointer; background: var(--paper-2); font-size: 1.1rem; }
.cal-nav:hover { background: var(--rule); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { padding: 6px 0; text-align: center; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cal-day { position: relative; aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal-day:hover:not([disabled]) { background: var(--paper-2); }
.cal-day[disabled] { color: #cdc6b6; cursor: default; }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--rule-2); }
.cal-day.none { color: var(--ink-3); font-weight: 400; }
.cal-day.has::after { content: ""; position: absolute; left: 50%; bottom: 12%; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); transform: translateX(-50%); }
.cal-day[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }

.slots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; min-height: 42px; }
.slots-head .tname { white-space: nowrap; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 430px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; padding: 8px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--rule-2); background: #fff; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); transition: border-color .15s, background .15s, transform .15s; }
.slot:hover { border-color: var(--ink); transform: translateY(-1px); }
.slot:active { background: var(--amber); border-color: var(--amber); }
.slot small { font-size: .72rem; font-weight: 400; color: var(--ink-3); }
.bk-empty { grid-column: 1 / -1; padding: 22px; border-radius: 12px; background: var(--paper-2); text-align: center; color: var(--ink-2); }

.chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 26px; padding: 16px 20px; border-radius: 14px; background: var(--navy); color: var(--on-navy); }
.chosen small { display: block; font-size: .84rem; color: var(--on-navy-3); }
.chosen b { display: block; margin: 2px 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); line-height: .95; }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.fld label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .94rem; }
.fld label i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--rule-2); background: #fff; color: var(--ink); font: inherit; }
.fld textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--amber-wash); }
.fld-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; }
.fld-check input { width: 20px; min-height: 0; height: 20px; margin-top: 2px; accent-color: var(--amber); }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.bk-actions.center { justify-content: center; }
.bk-hint, .bk-sub { font-size: .9rem; color: var(--ink-3); }
.bk-msg { min-height: 1.4em; margin-top: 14px; font-weight: 600; color: var(--stop); }
.bk-msg.ok { color: var(--live); }
.link-btn { border: 0; background: none; padding: 4px 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--amber-deep); text-decoration: underline; }
.link-btn:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }

.otp { max-width: 520px; margin: 0 auto; padding-block: 10px; text-align: center; }
.otp h2 { margin: 8px 0 12px; }
.otp > p:not(.tname):not(.bk-msg) { color: var(--ink-2); }
.otp input { display: block; width: 100%; max-width: 340px; min-height: 76px; margin: 24px auto 0; padding: 0 0 0 .5em; text-align: center;
  border-radius: 14px; border: 2px solid var(--rule-2); background: #fff; color: var(--ink);
  font-family: var(--f-mono); font-size: 2.2rem; font-weight: 600; letter-spacing: .5em; }
.otp input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 5px var(--amber-wash); }
.otp .bk-sub { margin-top: 18px; }

.done { max-width: 640px; margin: 0 auto; padding-block: 14px; text-align: center; }
.done .tick { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; background: var(--amber) var(--tick-ink) center / 42px no-repeat; animation: rise .4s ease; }
.done h2 { margin: 6px 0 14px; }
.done-when { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); line-height: 1; }
.done > p:last-of-type { margin-top: 16px; color: var(--ink-2); }
.done-prep { margin-top: 26px; padding: 20px 22px; border-radius: 14px; background: var(--paper-2); text-align: left; }
.done-prep .checks { margin-top: 12px; }

.bk-off { display: grid; justify-items: center; }
.bk-off .book { width: min(560px, 100%); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow); }
.bk-off .book a:not(.btn) { text-decoration: underline; }

/* =============================================================================================
   REAL SCREENS (2026-09-24) -- the redrafted pages show the app itself, not illustrations.
   Every picture under images/site/ is the real screen rendered by tools/screens/render.pl from
   the gatekeeper's own markup, over invented rows. A desktop screen sits in .window (a browser
   frame), a phone screen in .device. .feat is one feature: its words beside its screen, and
   .flip puts the screen first on a wide page.
============================================================================================= */
/* THE iPAD (owner, 2026-09-24: "all major images ... inside ipad frames"). A landscape tablet: a thin
   dark bezel of even width (halved the same day: "a little too THICK"), a thin lighter rim where a real
   one catches the light, the camera centred in the top bezel, and the screen's own rounded corners. The
   markup still carries .window-bar (its address line names the screen for anybody reading the source);
   an iPad has none, so it is hidden. */
.window {
  position: relative; padding: clamp(6px, .75vw, 11px); border-radius: clamp(16px, 1.8vw, 26px);
  background: linear-gradient(145deg, #2a2d33, #121418 60%, #1d1f24);
  box-shadow: inset 0 0 0 1px #474b53, inset 0 0 0 2px #0b0c0f, 0 1px 0 rgba(13,21,36,.04), 0 40px 70px -34px rgba(13,21,36,.6);
}
.window::before {
  content: ""; position: absolute; top: calc(clamp(6px, .75vw, 11px) / 2); left: 50%; transform: translate(-50%, -50%);
  width: clamp(3px, .3vw, 5px); height: clamp(3px, .3vw, 5px); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b4a63, #0a0d12 70%); box-shadow: 0 0 0 1px #24272d;
}
.window-bar { display: none; }
.window .shot { border-radius: clamp(6px, .7vw, 11px); background: #fff; }

.device { width: min(330px, 78vw); margin-inline: auto; padding: 11px; border-radius: 46px; background: var(--navy);
  box-shadow: 0 50px 90px -40px rgba(13,21,36,.75), inset 0 0 0 1px rgba(255,255,255,.08); }
.device .shot { aspect-ratio: 780 / 1688; border-radius: 35px; }

/* the hero: the dashboard in a window, the phone standing in front of it */
.hero-stack { position: relative; }
.hero-stack .window { margin-right: 0; }
.hero-stack .device { position: absolute; right: -18px; bottom: -44px; width: min(210px, 34%); padding: 8px; border-radius: 32px; }
.hero-stack .device .shot { border-radius: 25px; }
@media (max-width: 700px) {
  .hero-stack .window { display: none; }
  .hero-stack .device { position: static; width: min(300px, 80vw); padding: 11px; border-radius: 46px; }
  .hero-stack .device .shot { border-radius: 35px; }
}

/* a feature's screen with a phone standing in front of it (tournament.html: the score sheet, and the page its
   QR code opens). Unlike the hero, both stay on a phone -- the phone only shrinks. */
.shot-stack { position: relative; padding-bottom: 36px; }
.shot-stack .device { position: absolute; right: -14px; bottom: 0; width: min(190px, 30%); padding: 6px; border-radius: 28px; }
.shot-stack .device .shot { border-radius: 22px; }
@media (max-width: 700px) {
  .shot-stack { padding-bottom: 24px; }
  .shot-stack .device { right: -6px; width: 32%; padding: 4px; border-radius: 18px; }
  .shot-stack .device .shot { border-radius: 14px; }
}

.feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) {
  .feat { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .feat.flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
  .feat.flip > .feat-copy { order: 2; }
  .feat.narrow-shot { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.feat + .feat { margin-top: clamp(80px, 10vw, 140px); }
.feat-copy h3 { margin-top: 14px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: var(--t-h3); line-height: .95; }
.feat-copy > p { margin-top: 16px; color: var(--ink-2); }
.on-navy .feat-copy > p { color: var(--on-navy-2); }
.feat .visual-cap { text-align: left; }
.see { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 700; color: var(--amber-deep); text-decoration: none; }
.see:hover { text-decoration: underline; }
.on-navy .see { color: var(--amber); }

/* the turnback notice table, straight from the manual */
.notice { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: .95rem; }
.notice th, .notice td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--navy-rule); }
.notice th { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-3); }
.notice td:last-child, .notice th:last-child { text-align: right; font-family: var(--f-mono); font-weight: 600; }
.notice tr:first-child td:last-child { color: var(--live-on-navy); }
.notice tr:last-child td:last-child { color: var(--stop-on-navy); }

/* the fifteen checks, as chips */
.checklist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.checklist li { padding: 7px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule-2); font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.pair { display: grid; gap: clamp(34px, 5vw, 80px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.pair .feat-copy h3 { margin-top: 0; }
.steps-cta { margin-top: 40px; }
.feat-copy .fine { margin-top: 18px; font-size: .88rem; color: var(--ink-3); }
.hero-stack + .visual-cap { text-align: left; margin-top: 18px; }
/* one feature across the whole width: its words above a screen too wide to sit beside them */
@media (min-width: 1000px) { .feat.full { grid-template-columns: minmax(0, 1fr); } .feat.full .feat-copy { max-width: 820px; } }

/* THE WIDE HERO (owner, 2026-09-24: "that image can load larger"): the homepage's iPad holds a wide screenshot, so
   its column takes the larger share, the tablet runs a little past the column into the page gutter, and the phone
   shrinks and drops to the corner so it covers less of the screen behind it. */
@media (min-width: 1060px) {
  .hero-wide .hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 3.5vw, 56px); }
  .hero-wide .hero-stack .window { margin-right: calc(var(--gutter) * -0.6); }
  .hero-wide .hero-stack .device { width: min(160px, 20%); right: calc(var(--gutter) * -0.9); bottom: -150px; }
}

/* =============================================================================================
   LIGHT / DARK AND THE VISITOR'S OWN ACCENT (2026-09-24) -- "Make it yours"
   The page opens light, in the brand amber. The header's palette button opens a panel where a
   visitor picks dark mode and an accent (eight swatches, or any colour); site.js saves the choice
   in localStorage and each page's first inline script puts it back before anything is painted.
   Dark is data-theme="dark" on <html>. A custom accent is a handful of --amber-* values set on
   <html> by the script -- every rule above reads the accent through those variables, so there is
   no second stylesheet to keep in step. --solid is the dark block behind the brand mark, the
   numbered labels and the tick discs, which must stay dark when --ink turns light.
============================================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:   #0d1320;
  --paper-2: #121a29;
  --card:    #162033;
  --ink:     #edf0f5;
  --ink-2:   #b8c0cc;
  --ink-3:   #8c95a4;
  --rule:    #243047;
  --rule-2:  #33415b;
  --navy:    #070b14;
  --navy-2:  #0c1320;
  --navy-3:  #172237;
  --solid:   #1f2c45;
  --amber-deep: var(--amber);
  --hl: color-mix(in srgb, var(--amber) 55%, transparent);
  --live: #4ade80;
  --stop: #fb8a7e;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 28px 56px -32px rgba(0,0,0,.85);
  --court-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 900' fill='none' stroke='%23ffffff' stroke-width='8'%3E%3Crect x='4' y='4' width='1792' height='892'/%3E%3Cpath d='M900 4v892M600 4v892M1200 4v892'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .panel .chip.ok,
:root[data-theme="dark"] .scan.ok   { background: color-mix(in srgb, var(--live) 16%, transparent); }
:root[data-theme="dark"] .panel .chip.wait { background: color-mix(in srgb, var(--amber) 16%, transparent); }
:root[data-theme="dark"] .panel .chip.open,
:root[data-theme="dark"] .scan.open { background: color-mix(in srgb, var(--stop) 16%, transparent); }
:root[data-theme="dark"] .cal-day[disabled] { color: #3a4558; }
:root[data-theme="dark"] .slot,
:root[data-theme="dark"] .fld input, :root[data-theme="dark"] .fld select, :root[data-theme="dark"] .fld textarea,
:root[data-theme="dark"] .otp input { background: var(--card); }
:root[data-theme="dark"] .site-head.stuck { box-shadow: 0 12px 30px -26px rgba(0,0,0,.9); }
/* "You are here" is the dark card in both themes: on a light --ink its amber label read at 1.76:1 (2026-10-05) */
:root[data-theme="dark"] .pcard[aria-current="page"] { background: var(--solid); color: var(--on-navy); box-shadow: inset 0 0 0 1px var(--rule); }

/* ---- the header button that opens the panel ---- */
.theme-btn {
  display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 11px; cursor: pointer;
  background: var(--card); border: 0; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink);
  transition: box-shadow .15s ease;
}
.theme-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.theme-btn svg { width: 22px; height: 22px; }
.theme-btn .dot { fill: var(--amber); }

/* ---- the panel ---- */
.theme-dlg {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 0; border: 0;
  border-radius: var(--r-lg); background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule), 0 50px 100px -40px rgba(0,0,0,.6);
}
.theme-dlg::backdrop { background: rgba(6,10,18,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.theme-dlg[open] { animation: rise .25s ease; }
.td-bar { height: 4px; background: linear-gradient(90deg, var(--amber), var(--amber-hot)); }
.td-in { position: relative; padding: clamp(22px, 4vw, 36px); }
.td-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink); font-size: 1.5rem; line-height: 1;
}
.td-close:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.td-in .tag { margin-bottom: 18px; }
.td-in h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; padding-right: 48px; }
.td-in > p { margin-top: 12px; color: var(--ink-2); }
.td-label { display: block; margin: 26px 0 10px; font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.td-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 14px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.td-mode button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--ink-2); font-weight: 700; font-size: 1rem;
}
.td-mode button svg { width: 20px; height: 20px; }
.td-mode button[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--amber-deep) 95%, transparent); }
.td-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 440px) { .td-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.td-sw {
  display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--rule); background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: .92rem;
  transition: border-color .15s ease, transform .15s ease;
}
.td-sw:hover { border-color: var(--rule-2); transform: translateY(-1px); }
.td-sw[aria-pressed="true"] { border-color: var(--ink); background: var(--card); }
.td-sw i { width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.td-custom {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--rule-2); font-weight: 700;
}
.td-custom.on { border-style: solid; border-color: var(--ink); }
.td-custom input { flex: none; width: 52px; height: 40px; padding: 2px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--card); cursor: pointer; }
.td-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.td-note { margin-top: 14px; font-size: .84rem; color: var(--ink-3); text-align: right; }
html:not(.js) .theme-btn { display: none; }

/* ---- NOT READY FOR A DEMO? (2026-09-27) -- site.js [data-later]; the panel is the theme panel's ---- */
html:not(.js) [data-later] { display: none; }
.later-dlg { width: min(640px, calc(100vw - 32px)); }
.ld-ask > p { margin-top: 12px; color: var(--ink-2); }
.later-dlg form { margin-top: 22px; }
.later-dlg .form-grid { margin-top: 18px; }
.later-dlg .td-actions { margin-top: 10px; }
.ld-days-row { display: flex; align-items: center; gap: 12px; }
.ld-days-row input { width: 120px; flex: none; }
.ld-days-row span { font-weight: 700; }
.ld-when { display: block; min-height: 1.4em; margin-top: 8px; color: var(--ink-3); font-size: .9rem; }
.ld-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ld-chips button {
  min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--rule); background: var(--paper-2); color: var(--ink); font: inherit; font-weight: 700; font-size: .9rem;
}
.ld-chips button:hover { border-color: var(--rule-2); }
.ld-chips button[aria-pressed="true"] { border-color: var(--ink); background: var(--card); }
.ld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ld-done { text-align: center; }
.ld-done .tag { margin-bottom: 14px; }
.ld-done h2 { padding-right: 0; }
.ld-done > p { margin-top: 12px; color: var(--ink-2); }
.ld-done .td-actions { justify-content: center; }
.ld-done .tick { width: 72px; height: 72px; margin: 6px auto 18px; border-radius: 50%; background: var(--amber) var(--tick-ink) center / 34px no-repeat; animation: rise .4s ease; }
.bk-later { margin-top: 22px; text-align: center; color: var(--ink-2); }

/* ---- THE INTAKE (site.js, 2026-10-05): the offer card, the four questions, and the site set up after ----
   The dialog is the theme panel's (.theme-dlg); its answers are .ix-opt cards, pressed like the swatches. */
.ix-card {
  position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 32px)); padding: 20px 20px 18px; border-radius: var(--r-lg);
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2), 0 30px 70px -30px rgba(0,0,0,.55);
  animation: rise .3s ease;
}
.ix-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ix-card-top .brand { font-size: 1.1rem; }
.ix-card-top .brand-mark { width: 32px; height: 32px; font-size: 1.25rem; }
.ix-card-h { display: block; font-size: 1.12rem; line-height: 1.3; }
.ix-card p { margin-top: 6px; color: var(--ink-2); font-size: .94rem; line-height: 1.45; }
.ix-card-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ix-card-x {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font-size: 1.3rem; line-height: 1;
}
.ix-offer .dock { display: none; }   /* one thing at the foot of a phone at a time */

.ix-dlg { width: min(640px, calc(100vw - 32px)); }
.ix-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 52px 20px 0; }
.ix-progress i { height: 5px; border-radius: 5px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.ix-progress i.on { background: var(--amber); box-shadow: none; }
.ix-sub { margin-top: 8px; color: var(--ink-2); }
.ix-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 20px; }
.ix-opt {
  position: relative; display: grid; gap: 3px; min-height: 64px; padding: 13px 44px 13px 16px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--rule); background: var(--paper-2); color: var(--ink); font: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.ix-opt b { font-size: 1rem; line-height: 1.25; }
.ix-opt small { color: var(--ink-2); font-size: .86rem; line-height: 1.35; }
.ix-opt:hover { border-color: var(--rule-2); }
.ix-opt::after {
  content: ""; position: absolute; top: 50%; right: 14px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--rule-2); background: var(--card);
}
.ix-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--card); }
.ix-opt[aria-pressed="true"]::after { box-shadow: none; background: var(--amber) var(--tick-ink) center / 13px no-repeat; }
.ix-form { margin-top: 20px; }
.ix-look { display: grid; gap: 10px; margin-top: 16px; }   /* the theme panel's mode switch, swatches and any-colour, as question 3 */
/* question 3, condensed (owner, 2026-10-05: "needs to reduce in size / condense so that it fits in the card without forcing it
   to scroll"): the swatches are chips -- dot beside the name -- and the switch and any-colour row are slimmer. Only here; the
   palette panel keeps its tiles. */
.ix-look .td-mode { padding: 4px; }
.ix-look .td-mode button { min-height: 38px; font-size: .94rem; }
.ix-look .td-swatches { gap: 8px; }
.ix-look .td-sw { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: .86rem; line-height: 1.2; text-align: left; }
.ix-look .td-sw i { flex: none; width: 18px; height: 18px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.ix-look .td-custom { margin-top: 0; gap: 10px; padding: 7px 12px; border-radius: 12px; font-size: .92rem; }
.ix-look .td-custom input { width: 40px; height: 30px; border-radius: 8px; }
.ix-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 20px; }   /* page 1, the blurb */
.ix-about-i { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.ix-about-i b { font-size: 1rem; line-height: 1.25; }
.ix-about-i span { color: var(--ink-2); font-size: .88rem; line-height: 1.4; }
.ix-about-next { grid-column: 1 / -1; margin-top: 6px; color: var(--ink-2); font-size: .94rem; }
.ix-dlg .td-actions { margin-top: 18px; }
.ix-dlg .bk-msg:empty { display: none; }
.ix-done { text-align: center; }
.ix-done .tag { margin-bottom: 14px; }
.ix-done h2 { padding-right: 0; }
.ix-done > p { margin-top: 12px; color: var(--ink-2); }
.ix-done .tick { width: 72px; height: 72px; margin: 6px auto 18px; border-radius: 50%; background: var(--amber) var(--tick-ink) center / 34px no-repeat; animation: rise .4s ease; }
.ix-go { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 16px; text-align: left; }
.ix-link { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.ix-link:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ix-link b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; line-height: .95; }
.ix-link span { color: var(--ink-2); font-size: .86rem; line-height: 1.35; }
.ix-link.is-here { background: var(--amber); color: var(--amber-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 28px -16px color-mix(in srgb, var(--amber-deep) 95%, transparent); }
.ix-link.is-here:hover { background: var(--amber-hot); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 28px -14px color-mix(in srgb, var(--amber-deep) 95%, transparent); }
.ix-link.is-here span { color: var(--amber-ink); font-weight: 700; font-size: .92rem; }
.ix-link.is-here span::after { content: " \2192"; }
.ix-done .td-actions { justify-content: center; }

/* set up for them: their picks first and marked, in the band and both menus */
.ix-redo { margin-left: 14px; font-size: .9rem; }
.sec-head .ix-redo { display: inline-block; }
.pcard.is-pick { order: -1; box-shadow: inset 0 0 0 1.5px var(--amber); }
.pcard.is-pick .tname { color: var(--amber-deep); }
.nav a.is-pick, .mnav a.is-pick:not(.btn) { position: relative; }
.nav a.is-pick::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.mnav a.is-pick:not([aria-current="page"])::after { content: "Your pick"; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--amber-deep); }
.ix-foot { border: 0; background: none; padding: 5px 0; cursor: pointer; font: inherit; color: var(--on-navy-2); text-align: left; }
.ix-foot:hover { color: var(--amber); }

/* the AI bubble, bottom right: opens the questions. Above the phone's dock, and gone while the offer card is up */
.ix-bubble {
  position: fixed; z-index: 65; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; place-items: center; align-content: center; gap: 1px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--amber); color: var(--amber-ink); font: 800 .78rem/1 var(--f-body); letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 30px -12px color-mix(in srgb, var(--amber-deep) 95%, transparent);
  transition: transform .15s ease, background-color .15s ease, bottom .25s ease; animation: rise .3s ease;
}
.ix-bubble:hover { background: var(--amber-hot); transform: translateY(-2px); }
.ix-bubble:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ix-bubble svg { width: 20px; height: 20px; }
.ix-offer .ix-bubble { display: none; }
@media (max-width: 760px) { body:has(.dock.show) .ix-bubble { bottom: calc(84px + env(safe-area-inset-bottom)); } }   /* above the dock only while it is up */

/* ---- LEGAL PAGES (terms.html, privacy.html; owner, 2026-10-02) -------------------------------------
   The documents themselves sit in .legal-doc, which the app's Company Profile tabs also show (v2/core/legal.pm),
   styled there by core/theme.pm's .cp-legal in the person's own colours. Full width, as every page here. */
.legal-page h1 { margin-top: 10px; }
.legal-sub { margin-top: 14px; color: var(--ink-2); }
.legal-sub a, .legal-doc a { color: inherit; text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.legal-doc { margin-top: 34px; padding: clamp(20px, 3vw, 40px); background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink); }
.legal-meta { font-family: var(--f-mono); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.legal-doc > p, .legal-doc section p, .legal-doc li { margin-top: 12px; }
.legal-doc ul { margin: 6px 0 0; padding-left: 1.3em; list-style: disc; }
.legal-doc ul ul { list-style: circle; }
.legal-doc section { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); scroll-margin-top: 96px; }
.legal-doc h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.legal-doc h3 { margin-top: 20px; font-size: 1.02rem; font-weight: 700; }
.legal-callout { margin-top: 18px; padding: 14px 18px; border-left: 4px solid var(--amber); border-radius: 8px; background: color-mix(in srgb, var(--amber) 9%, transparent); }
.legal-toc { margin-top: 24px; }
.legal-toc ol { margin: 0; padding-left: 1.6em; columns: 3 220px; column-gap: 34px; }
.legal-toc li { margin: 0 0 6px; break-inside: avoid; }
.legal-toc a { display: inline-block; padding-block: 2px; text-decoration: none; }   /* 26px tall: WCAG 2.5.8 wants 24 (it was 22; 2026-10-05) */
.legal-toc a:hover { text-decoration: underline; }

/* =============================================================================================
   MOVEMENT AND THE LIGHTER HOME PAGE (owner, 2026-10-05: "something that stimulates the eye and pleases the mind while
   they browse"). Four parts, all of them still for anybody who asks for reduced motion:
     .hero-see     the hero's third action as a link -- the demo is the one bright button
     .live-feed    the homepage hero: one score arriving and landing in three places, on a loop
     .tabs         one viewer for several screens (index #once), turning slowly until it is touched (site.js)
     .rv           sections and cards rising in as they scroll into view (site.js adds .rv and html.rv-on)
============================================================================================= */
.hero-cta .hero-see { margin-top: 0; align-self: center; padding: 8px 6px; }

.live-feed {
  position: absolute; z-index: 2; left: clamp(-40px, -2.6vw, -12px); bottom: -34px; display: grid; gap: 10px;   /* off the lower-left corner: over the schedule rows, never the standings */
  width: min(330px, 52%); margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.live-feed li {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--rule-2), 0 22px 44px -20px rgba(13,21,36,.5);
  font-size: .84rem; line-height: 1.3; color: var(--ink-2);
  opacity: 0; animation: lf-in 9s cubic-bezier(.2,.7,.2,1) infinite;
}
.live-feed li:nth-child(2) { animation-delay: .9s; margin-left: 26px; }
.live-feed li:nth-child(3) { animation-delay: 1.8s; margin-left: 52px; }
.live-feed b { display: block; color: var(--ink); font-size: .88rem; }
.lf-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--amber) var(--tick-ink) center / 15px no-repeat; }
.lf-ico.lf-rank { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1204' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.lf-ico.lf-live { position: relative; background: var(--solid, var(--ink)); }
.lf-ico.lf-live::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; animation: pulse 1.6s ease-out infinite; }
@keyframes lf-in {
  0%       { opacity: 0; transform: translateY(12px) scale(.97); }
  7%, 80%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-8px); }
}
@media (max-width: 700px) {
  .live-feed { left: 0; bottom: 6%; width: min(300px, 74%); gap: 8px; }
  .live-feed li { font-size: .8rem; padding: 8px 12px 8px 8px; }
  .live-feed li:nth-child(2) { margin-left: 14px; }
  .live-feed li:nth-child(3) { margin-left: 28px; }
}

/* one viewer, several screens. No script: the panels stand in a column and the tab row is not drawn. With it, the panels
   share one grid cell, so the box is as tall as the tallest and nothing below it moves when the screen changes. */
html:not(.js) .tab-list { display: none; }
.tab-list {
  display: flex; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; margin-bottom: clamp(26px, 3vw, 44px); padding: 6px;
  border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule);
}
.tab-list [role="tab"] {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; overflow: hidden;
  border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); font-weight: 700; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.tab-list [role="tab"]:hover { color: var(--ink); }
.tab-list [role="tab"][aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2), 0 8px 20px -12px rgba(13,21,36,.4); }
.tab-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--solid, var(--ink)); color: var(--amber); font-family: var(--f-mono); font-size: .78rem; }
.tab-list [role="tab"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--amber); }
.tabs.is-auto [role="tab"][aria-selected="true"]::after { animation: tab-fill var(--tab-auto, 8s) linear forwards; }
@keyframes tab-fill { to { width: 100%; } }
html.js .tabs { display: grid; grid-template-columns: minmax(0, 1fr); }
html.js .tabs > .tab-list { grid-row: 1; }
html.js .tabs > .tab-panel { grid-row: 2; grid-column: 1; }
html.js .tabs > .tab-panel + .tab-panel { margin-top: 0; }
html.js .tab-panel:not(.on) { visibility: hidden; opacity: 0; }
html.js .tab-panel.on { animation: rise .45s ease; }
html.js .tab-panel .feat-copy > .tname { display: none; }   /* the tab already says it */
@media (max-width: 640px) {
  .tab-list { width: 100%; }
  .tab-list [role="tab"] { flex: 1 1 auto; justify-content: center; padding: 0 12px; font-size: .92rem; }
}

/* rising in as they arrive. Only when site.js turns it on (html.rv-on): never without a script, never for reduced
   motion, never for a test browser -- a page photographed whole would otherwise be blank below the first screen. */
html.rv-on .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0s); }
html.rv-on .rv.in { opacity: 1; transform: none; }
.tier { transition: transform .2s ease, box-shadow .2s ease; }
.tier:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--rule-2), var(--shadow); }
.phase { transition: transform .2s ease, border-color .2s ease; }
.phase:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--amber) 45%, var(--navy-rule)); }

@media (prefers-reduced-motion: reduce) {
  .live-feed li { animation: none; opacity: 1; }
  html.rv-on .rv { opacity: 1; transform: none; }
  .tier:hover, .phase:hover { transform: none; }
}

/* THE PHONE (2026-10-05): the platform band was a quarter of the first screen before the headline; on a phone it is one
   slim row now -- the product names only, the current one filled -- so the hero starts near the top. And no label under
   12px, which a phone at arm's length cannot read. */
@media (max-width: 760px) {
  section[aria-labelledby="platform-h"] { padding-block: 14px 14px; }
  section[aria-labelledby="platform-h"] .sec-head { margin-bottom: 8px; }
  section[aria-labelledby="platform-h"] .h2s { font-size: 1.1rem; }
  .pcard { min-width: 0; padding: 9px 14px; gap: 0; }
  .pcard .tname { display: none; }
  .pcard b { font-size: 1.05rem; }
}
@media (max-width: 520px) {
  .hero .tag, .visual-cap, .kicker .n, .pill, .phase-head span, .foot-grid h3, .board-top .title, .board-top .live, .board-top .meta, .brow .lab, .brow .chip, .product-top .tname, .notice th { font-size: .75rem; }
}

/* SHORTER WITHOUT LOSING A WORD (2026-10-05). On a wide screen the six products sit three across. On a phone the products
   and the weekend's three phases become a row you swipe -- each card most of the screen wide, the next one showing at the
   edge so it reads as a row -- instead of six and three full cards stacked: the home page was 20 phone screens tall. */
@media (min-width: 1280px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .products, .rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
  }
  .products::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none; }
  .products > *, .rail > * { scroll-snap-align: start; }
  .product:hover, .phase:hover { transform: none; }
}

/* ---- THE PROMO (site.js, owner 2026-10-12): the platform reel in a modal, its two buttons under it ----
   As wide as fits both ways: the width is capped by the height too, so a short wide window gets a smaller video rather
   than black bars, and the buttons always stay on screen. */
.promo-dlg {
  width: min(1280px, calc(100vw - 32px), calc((100dvh - 120px) * 16 / 9)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--navy); color: var(--on-navy);
  box-shadow: inset 0 0 0 1px var(--navy-rule), 0 50px 100px -40px rgba(0,0,0,.7);
}
.promo-dlg::backdrop { background: rgba(6,10,18,.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.promo-dlg[open] { animation: rise .25s ease; }
.promo-frame { position: relative; background: #000; }
.promo-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.promo-sound {
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 12px; cursor: pointer; background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
}
.promo-sound svg { width: 20px; height: 20px; }
.promo-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px 16px 16px; }
@media (max-width: 520px) {
  .promo-acts .btn { flex: 1 1 100%; }
  .promo-sound { left: 8px; top: 8px; min-height: 36px; padding: 0 12px; font-size: .82rem; }   /* clear of the logo the reel opens on */
  .promo-sound svg { width: 16px; height: 16px; }
}