/* ─────────────────────────────────────────────────────────────────────────
   Rally site: landing page + legal pages (privacy, terms, support,
   impressum). The live board (board/) carries its own inline styles so it
   stays a single self-contained file.

   The visual system is the app's own token set (STYLE_GUIDE.md): chalk
   light ground and court-night dark ground, court blue for "us" and clay
   for "them" (load-bearing semantics, never decorative), the optic ball
   only ever as the serve indicator. Dark leads marketing, so the landing
   opens dark and alternates dark and light bands; the legal pages stay on
   the light ground because they are read, not scanned.

   The watch and phone on the landing are drawn in CSS from the real token
   values and the real screen contracts, so nothing here can go stale
   against a screenshot. CONTENT RULE: whenever app features change, the
   landing changes in the same round.

   Motion is CSS only and lives inside prefers-reduced-motion:
   no-preference; with reduce, nothing on the page moves.

   NO EXTERNAL REQUESTS. Fonts are the system stack (STYLE_GUIDE names
   Archivo for marketing surfaces; hotlinking fonts.googleapis.com would
   send every visitor's IP to Google, which a German company serving an
   Impressum must not do, LG Muenchen I, 3 O 17493/20; a self-hosted OFL
   file would be the compliant way to bring Archivo back later).
   ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 760px;
  --wrapwide: 1160px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  /* Light (chalk) tokens, STYLE_GUIDE.md */
  --ground: #F4F7F9;
  --surface: #FFFFFF;
  --ink: #16232E;
  --ink-soft: #45586A;
  --ink-faint: #5A6E80;
  --line: #D5DEE6;
  --us: #1A66C7;
  --them: #C75A28;
  --them-ink: #B04A20;
  --serve: #B7C821;
  --fresh: #2E8B5A;
  --us-chip: rgba(26, 102, 199, 0.12);
  --them-chip: rgba(199, 90, 40, 0.12);
  --shadow: 0 1px 2px rgba(22, 35, 46, 0.06), 0 12px 32px rgba(22, 35, 46, 0.08);

  /* Dark (court night) tokens */
  --d-ground: #0B1622;
  --d-surface: #101E2D;
  --d-ink: #E7EEF4;
  --d-ink-soft: #A7B8C7;
  --d-ink-faint: #74879A;
  --d-line: #22374B;
  --d-us: #5B96E8;
  --d-them: #E08350;
  --d-serve: #D9E44A;
  --d-fresh: #4EA97C;
  --d-us-chip: rgba(91, 150, 232, 0.16);
  --d-them-chip: rgba(224, 131, 80, 0.16);
}

/* A dark band swaps the working tokens, so every component reads the
   same variable names on either ground. */
.dark {
  --ground: var(--d-ground);
  --surface: var(--d-surface);
  --ink: var(--d-ink);
  --ink-soft: var(--d-ink-soft);
  --ink-faint: var(--d-ink-faint);
  --line: var(--d-line);
  --us: var(--d-us);
  --them: var(--d-them);
  --them-ink: var(--d-them);
  --serve: var(--d-serve);
  --fresh: var(--d-fresh);
  --us-chip: var(--d-us-chip);
  --them-chip: var(--d-them-chip);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0 0 1rem; }

/* Every interactive surface reads as one: pointer cursor, visible focus. */
a, button, [role="button"], summary { cursor: pointer; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--us); outline-offset: 3px; border-radius: 6px; }

/* The court-sides mark, inline SVG: the fills follow the ground. */
.mark .m-us { fill: var(--us); }
.mark .m-them { fill: var(--them); }

/* ── Bands and wraps ─────────────────────────────────────────────────── */
.band {
  padding: clamp(4rem, 9vw, 7.5rem) var(--pad);
  background: var(--ground);
  color: var(--ink);
}
.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap.wide { max-width: var(--wrapwide); }
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
}

/* ── Brand row, type ─────────────────────────────────────────────────── */
.brandrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
a.brandrow:hover { opacity: 0.82; }
a.brandrow:active { opacity: 0.65; }
.brandrow .mark { width: 36px; height: 36px; }
.brandrow .n {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  color: var(--ink);
}
h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  text-wrap: balance;
}
h1.display {
  font-size: clamp(3.4rem, 8.5vw, 5.8rem);
  letter-spacing: -0.045em;
  line-height: 0.96;
}
h2 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  text-wrap: balance;
}
h3 { font-size: 1.15rem; margin: 0.2rem 0 0.5rem; letter-spacing: -0.015em; }
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32em;
  margin: 1.6rem 0 0;
}
.lead .us { color: var(--us); font-weight: 600; }
.lead .them { color: var(--them-ink); font-weight: 600; }
.copy { color: var(--ink-soft); max-width: 36em; font-size: 1.05rem; }
.copy strong { color: var(--ink); font-weight: 600; }
.note { font-size: 0.92rem; color: var(--ink-faint); margin: 1.2rem 0 0; max-width: 34em; }

/* ── Calls to action ─────────────────────────────────────────────────── */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 2.2rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--us); flex: none; }
.pill.static { cursor: default; }
a.pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--ink-faint); }
a.pill:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.quiet {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.quiet:hover { color: var(--ink); border-bottom-color: var(--ink); }
.quiet:active { opacity: 0.7; }

/* ── Top bar (landing) ───────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  margin: calc(-1 * clamp(2rem, 5vw, 4.5rem)) 0 clamp(3rem, 7vw, 6rem);
}
.topbar .links { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; font-size: 0.95rem; font-weight: 600; }
.topbar .links a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.topbar .links a:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
.topbar .links a:active { opacity: 0.7; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(55% 60% at 18% 22%, rgba(91, 150, 232, 0.24), transparent 65%),
    radial-gradient(45% 50% at 84% 72%, rgba(224, 131, 80, 0.2), transparent 65%);
  pointer-events: none;
}
.hero::after {
  /* Faint court lines: a grid that fades out toward the edges. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(231, 238, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 238, 244, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 60% 45%, #000 20%, transparent 100%);
  pointer-events: none;
}
.hero-grid { gap: clamp(2.5rem, 6vw, 5rem); }
.hero-copy .eyebrow { color: var(--us); }
.sportstrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0;
  margin: clamp(3rem, 7vw, 5.5rem) calc(-1 * var(--pad)) 0;
  padding: 1.1rem var(--pad);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sportstrip span + span::before { content: "·"; margin: 0 0.9rem; color: var(--line); }
@media (max-width: 1000px) {
  /* Below this the strip wraps; a separator at a line start reads wrong. */
  .sportstrip { gap: 0.5rem 1.6rem; }
  .sportstrip span + span::before { content: none; }
}

/* ── Demo column (watch and phone share it) ──────────────────────────── */
.demo { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.demo .hint { font-size: 0.9rem; color: var(--ink-faint); margin: 0; text-align: center; max-width: 24em; }
.demo-foot { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.rulesline {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.seg-btn {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.seg-btn:hover { color: var(--ink); background: rgba(127, 150, 172, 0.14); }
.seg-btn:active { transform: scale(0.96); }
.seg-btn.is-on { background: var(--us); color: #FFFFFF; }
.seg-btn.is-on:hover { background: var(--us); color: #FFFFFF; }

/* ── Watch mockup (drawn from the watch match screen contract) ───────── */
.watch {
  width: 272px;
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  --wb: #1B2631;
  --wb2: #0C1218;
}
.watch .strap {
  width: 112px;
  height: 46px;
  background: linear-gradient(90deg, #121A22, #1E2A36 50%, #121A22);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.watch .strap.top { border-radius: 14px 14px 4px 4px; border-bottom: 0; }
.watch .strap.bottom { border-radius: 4px 4px 14px 14px; border-top: 0; }
.watch .case {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #2B3947, var(--wb) 45%, var(--wb2));
  border-radius: 66px;
  padding: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.45);
}
.watch .crown {
  position: absolute;
  right: -9px;
  top: 76px;
  width: 10px;
  height: 42px;
  border-radius: 4px;
  background: repeating-linear-gradient(180deg, #2B3947 0 2px, #141D26 2px 4px);
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.5);
}
.watch .sidebtn {
  position: absolute;
  right: -7px;
  top: 134px;
  width: 7px;
  height: 58px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1E2A36, #2B3947);
}
.watch .screen {
  position: relative;
  background: #000000;
  border-radius: 54px;
  height: 306px;
  padding: 10px 11px 9px;
  color: var(--d-ink);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
/* The status band: the sport (or, round 28, the deciding point's name)
   top left, the clock top right; the tiles have the height below it. */
.watch .statusrow {
  height: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 16px;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  color: var(--d-ink-soft);
  font-variant-numeric: tabular-nums;
}
.watch .band-lbl { color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-height: 0; }
.tile {
  position: relative;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.tile:hover { filter: brightness(1.18); }
.tile:active { transform: scale(0.96); filter: brightness(1.3); }
.tile:focus-visible { outline-color: var(--d-ink); outline-offset: 1px; }
.tile.us { background: rgba(91, 150, 232, 0.22); color: var(--d-us); }
.tile.them { background: rgba(224, 131, 80, 0.22); color: var(--d-them); }
.tile .who {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--d-ink-soft);
  line-height: 1;
}
/* Round 32 (decision 15): the side behind at an advantage draws NOTHING
   (an empty label); min-height keeps its line, so its label stays level
   with the other tile's (in the phone mockup too). */
.tile .num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  min-height: 1em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* The optic ball: on the serving tile only, on the serve court side. Near
   lane (bottom) = our serve, far lane (top) = theirs. */
.ball {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--d-serve);
  display: none;
  pointer-events: none;
}
.serving .ball { display: block; }
.ball.near { bottom: 7px; }
.ball.far { top: 7px; }
.ball.left { left: 7px; }
.ball.right { right: 7px; }
.ball.center { left: 50%; margin-left: -6px; }
/* The deciding-point card (feedback round 28, STYLE_GUIDE "The
   deciding-point card", targets/watch/DecidingPointCard.swift at the 45 mm
   layout): opaque over both tiles and nothing else, the lead line, the
   question from the wearer's position, two neutral buttons that are never
   lit, each with the court drawing. It appears and goes in one frame (no
   fade: a fading card would pass clicks) and catches every click; only the
   buttons are controls, so the card itself keeps the default cursor. */
.watch .dcard {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 16px;
  background: #1C1C1E;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 7px 12px;
  text-align: center;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.watch .dcard:focus-visible { outline-offset: 2px; }
.watch .dcard.miss { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28); }
.watch .dc-lead { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.62); }
.watch .dc-q { margin: 3px 0 0; font-size: 17px; font-weight: 700; line-height: 1.22; color: #FFFFFF; text-wrap: balance; }
.watch .dc-btns { margin-top: auto; display: flex; gap: 7px; }
.watch .dc-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 112px;
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.12s ease, transform 0.1s ease;
}
.watch .dc-btn:hover { background: rgba(255, 255, 255, 0.24); }
.watch .dc-btn:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.3); }
.watch .dc-court { width: 26px; height: 40px; flex: none; }
.dc-court .dc-box.us { fill: var(--d-us); }
.dc-court .dc-box.them { fill: var(--d-them); }
.dc-court .dc-edge { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; }
.dc-court .dc-lines { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
.dc-court .dc-net { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2; }
.dc-court .dc-serve { fill: none; stroke: var(--d-serve); stroke-width: 1.5; stroke-dasharray: 3 3; }
.dc-court .dc-optic { fill: var(--d-serve); }
.watch .bottomrow {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mini {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mini .col { display: grid; gap: 0; text-align: center; }
.mini .a { color: var(--d-us); }
.mini .b { color: var(--d-them); }
.mini .live { color: var(--d-ink); }
.mini .dim { color: var(--d-ink-faint); }
.watch .undo {
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--d-ink-soft);
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  padding: 0;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.1s ease;
}
.watch .undo svg { width: 16px; height: 16px; }
.watch .undo:hover { color: var(--d-ink); background: rgba(255, 255, 255, 0.16); }
.watch .undo:active { transform: scale(0.9); }
.watch .overlay {
  position: absolute;
  inset: 22px 12px 12px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
}
.watch .overlay[hidden] { display: none; }
.watch .ov-title { margin: 0; font-size: 17px; font-weight: 700; }
.watch .ov-sum { margin: 0; font-size: 14px; font-weight: 500; color: var(--d-ink-soft); font-variant-numeric: tabular-nums; white-space: pre; }
.watch .ov-end, .watch .ov-undo {
  border: 0;
  border-radius: 12px;
  font-weight: 600;
  transition: filter 0.12s ease, transform 0.1s ease;
}
.watch .ov-end { min-height: 38px; background: rgba(91, 150, 232, 0.5); color: #FFFFFF; font-size: 14px; }
.watch .ov-undo { min-height: 32px; background: rgba(255, 255, 255, 0.12); color: var(--d-ink); font-size: 13px; }
.watch .ov-end:hover, .watch .ov-undo:hover { filter: brightness(1.2); }
.watch .ov-end:active, .watch .ov-undo:active { transform: scale(0.97); }

/* ── Phone mockup (the courtside Board, portrait) ────────────────────── */
.phone {
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  background: linear-gradient(160deg, #26333F, #131C25 40%, #0A1017);
  border-radius: 54px;
  padding: 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 70px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.25);
}
.phone .screen {
  position: relative;
  border-radius: 44px;
  background: var(--d-ground);
  color: var(--d-ink);
  padding: 58px 16px 22px;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.phone .island {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 96px;
  height: 28px;
  margin-left: -48px;
  border-radius: 16px;
  background: #000000;
}
.phone .ptop {
  position: absolute;
  top: 18px;
  left: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}
.phone .psport {
  font-size: 14px;
  font-weight: 600;
  color: var(--d-ink-soft);
  text-align: center;
  margin: 0;
}
.ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ptile {
  position: relative;
  height: 232px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity 0.1s ease, filter 0.15s ease;
}
.ptile:hover { filter: brightness(1.14); }
.ptile:active { opacity: 0.8; }
.ptile:focus-visible { outline-color: var(--d-ink); outline-offset: 1px; }
.ptile.us { background: rgba(91, 150, 232, 0.22); color: var(--d-us); }
.ptile.them { background: rgba(224, 131, 80, 0.22); color: var(--d-them); }
.ptile .lbl {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--d-ink-soft);
}
.ptile .pts {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.05;
  min-height: 1.05em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.ptile .ball { width: 20px; height: 20px; }
.ptile .ball.near { bottom: 14px; }
.ptile .ball.far { top: 14px; }
.ptile .ball.left { left: 14px; }
.ptile .ball.right { right: 14px; }
.ptile .ball.center { margin-left: -10px; }
.phone .mini { font-size: 22px; gap: 22px; min-height: 52px; align-items: center; }
.phone .status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  color: var(--d-ink-faint);
}
.phone .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d-fresh); }
.phone .status.off .dot { background: var(--d-ink-faint); }
.phone .sharestrip {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--d-surface);
  border: 1px solid var(--d-line);
}
.phone .ss-lbl { font-size: 13px; font-weight: 600; color: var(--d-ink-soft); }
.phone .ss-code { font-size: 22px; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--d-ink); }

/* ── Steps (how it works) ────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.step { padding-top: 1.2rem; border-top: 2px solid var(--line); }
.step .num {
  display: block;
  font-size: clamp(3.2rem, 6vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--us);
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.step p { margin: 0; color: var(--ink-soft); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ── Sports grid ─────────────────────────────────────────────────────── */
.sports-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sports-head h2 { margin-bottom: 0; }
.sports-head .copy { margin: 0; }
@media (max-width: 860px) { .sports-head { grid-template-columns: 1fr; align-items: start; } }
.sports {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sport {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2.6rem 1.3rem 1.2rem;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.sport .idx {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.sport .sname { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sport .srules { display: block; margin-top: 0.45rem; font-size: 0.86rem; color: var(--ink-faint); line-height: 1.4; }
@media (max-width: 1000px) { .sports { grid-template-columns: repeat(2, 1fr); } }

/* ── Followers row, plans ────────────────────────────────────────────── */
.follows { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.follows li {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.plans { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.plan h3 { font-size: 1.5rem; margin: 0 0 0.8rem; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.4rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.plan.pro { border-color: var(--us); box-shadow: 0 0 0 1px var(--us) inset; }
.plan.pro li::before { background: var(--us); }
.plan-note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--ink-faint); }

/* ── Cards, grids ────────────────────────────────────────────────────── */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .grid3, .grid2 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.6rem 1.6rem 1.7rem;
}
.card p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.trust-grid { margin-top: clamp(2rem, 4vw, 3rem); }

/* ── Document pages ──────────────────────────────────────────────────── */
.pagehead { padding: clamp(2.5rem, 7vw, 5rem) var(--pad) clamp(1.5rem, 4vw, 2.5rem); }
.pagehead .brandrow { margin-bottom: 2.2rem; }
.pagehead h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
.stamp { margin: 1rem 0 0; color: var(--ink-faint); font-size: 0.95rem; }
.stamp a { color: var(--us); text-decoration: none; }
.stamp a:hover { text-decoration: underline; }
.doc { padding: 0 var(--pad) clamp(4rem, 9vw, 6rem); }
.prose { font-size: 16px; line-height: 1.65; }
.prose h1.section { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 0.3rem; }
.prose h2 { font-size: 1.25rem; margin: 2.4rem 0 0.6rem; letter-spacing: -0.01em; line-height: 1.3; }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { padding-left: 22px; margin: 0.6rem 0 1rem; }
.prose li { margin: 0.35rem 0; }
.prose a { color: var(--us); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose .updated { color: var(--ink-faint); font-size: 0.92rem; margin: 0 0 1.8rem; }
.callout, .contactcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.callout p:last-child, .contactcard p:last-child { margin-bottom: 0; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 4rem 0 2.5rem; }

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
  background: var(--ground);
  color: var(--ink-soft);
  padding: 3.5rem var(--pad) 4rem;
  border-top: 1px solid var(--line);
}
footer .wrap { max-width: var(--wrapwide); }
footer nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 1.6rem 0 1.4rem; }
footer nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
footer nav a:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
footer nav a:active { opacity: 0.7; }
footer .fine { font-size: 0.88rem; color: var(--ink-faint); margin: 0.3rem 0 0; }
footer .fine a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
footer .fine a:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
footer .fine a:active { opacity: 0.7; }

/* ── Motion (CSS only; nothing moves under prefers-reduced-motion) ────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* The tap hint: a ring breathing out of our tile until the first tap. */
  .watch:not(.touched) .tile.us::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 3px solid var(--d-us);
    opacity: 0;
    pointer-events: none;
    animation: tapring 2s ease-out infinite;
  }
  .watch:not(.touched) .tile.us { animation: tapglow 2s ease-out infinite; }
  @keyframes tapring {
    0% { transform: scale(0.94); opacity: 1; }
    70% { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.12); opacity: 0; }
  }
  @keyframes tapglow {
    0% { filter: brightness(1.35); }
    35% { filter: brightness(1); }
    100% { filter: brightness(1); }
  }

  /* A click the deciding-point card refused nudges it (the watch plays a
     failure haptic). */
  .watch .dcard.miss { animation: nudge 0.3s ease-out; }
  @keyframes nudge {
    0%, 100% { transform: none; }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
  }

  /* A scored number pops once. */
  .num.pop, .pts.pop { animation: pop 0.28s ease-out; }
  @keyframes pop {
    0% { transform: scale(1.14); }
    100% { transform: scale(1); }
  }

  /* The live dot breathes while updates flow. */
  .phone .status:not(.off) .dot { animation: breathe 2s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.7); opacity: 0.55; }
  }

  /* Sections rise in as they scroll into view (scroll-driven, no JS). */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
  }
}