/* ==========================================================================
   Tempo — design lab stylesheet
   Single source of truth for the visual language. Iterate here.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Surfaces. Navy, not black — black reads cheap on OLED phones. */
  --bg:        #070B13;
  --bg-raise:  #0C121D;
  --bg-panel:  #111926;
  --bg-inset:  #0A0F19;

  /* Hairlines instead of card borders everywhere. */
  --line:      rgba(255, 255, 255, 0.08);
  --line-mid:  rgba(255, 255, 255, 0.14);
  --line-hi:   rgba(255, 255, 255, 0.24);

  /* Ink. The ratio shown is the WORST case across all four surfaces below,
     which is always --bg-panel — the lightest one. Sizing a muted grey against
     --bg alone is the trap: --ink-3 was #6A7789, which looked fine at 4.33:1
     on --bg and was really 3.87:1 on a panel. All three now clear AA (4.5:1)
     everywhere. Re-run the check if you add a surface lighter than --bg-panel. */
  --ink:       #F4F7FC;  /* 16.4:1 */
  --ink-2:     #9FADC0;  /*  7.7:1 */
  --ink-3:     #7A8799;  /*  4.8:1 */

  /* Product accents. Overridden per page by [data-product]. */
  --blue:      #2E9BFF;
  --blue-hi:   #8CCBFF;
  --blue-deep: #0B4FA8;
  --amber:     #FF8A3C;
  --amber-hi:  #FFC08A;
  --amber-deep:#A34C11;

  --accent:      var(--blue);
  --accent-hi:   var(--blue-hi);
  --accent-deep: var(--blue-deep);
  --accent-tint: rgba(46, 155, 255, 0.12);
  --on-accent:   #04101F;

  /* Discord embed semantics — mirrors bot/ui/colors.py */
  --ok:   #2ECC71;
  --warn: #F1C40F;
  --bad:  #E74C3C;
  --info: #3498DB;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-display: clamp(2.75rem, 7.4vw, 5.5rem);
  --fs-h1:      clamp(2.1rem, 5.2vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3.8vw, 2.6rem);
  --fs-h3:      clamp(1.2rem, 2.2vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-label:   0.75rem;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --gutter:  clamp(20px, 5vw, 40px);
  --section: clamp(64px, 9vw, 128px);
  --max:     1200px;
  --radius:  14px;
  --radius-sm: 9px;
}

[data-product="hoops"] {
  --accent:      var(--amber);
  --accent-hi:   var(--amber-hi);
  --accent-deep: var(--amber-deep);
  --accent-tint: rgba(255, 138, 60, 0.12);
  --on-accent:   #1B0A00;
}

/* --- 2. Base ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, .lab-type {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* --- 3. Layout primitives ------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 760px; }

.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }
.section + .section { border-top: 1px solid var(--line); }
.section-raise { background: var(--bg-raise); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.eyebrow-plain::before { display: none; }

.lede {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--s4); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .lede { margin-inline: auto; }
.eyebrow-center { justify-content: center; }

.stack-4 > * + * { margin-top: var(--s4); }
.stack-5 > * + * { margin-top: var(--s5); }
.stack-6 > * + * { margin-top: var(--s6); }

/* --- 4. Brand mark ------------------------------------------------------- */

/* The mark and the TEMPO lettering are the artwork on file in assets/brand.
   They are fixed blue/chrome, so the lockup never takes the product accent —
   only the product tag beside it does. `--bm` scales the whole lockup. */
.brandmark { --bm: 30px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
@media (max-width: 560px) { .site-header .brandmark { --bm: 26px; } }
.brandmark .bm-mark { height: var(--bm); width: auto; flex: none; }
.brandmark .bm-type { height: calc(var(--bm) * 0.5); width: auto; flex: none; }
.brandmark .product {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  align-self: center;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line-mid);
  line-height: 1;
}

/* --- 5. Header / navigation ---------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 11, 19, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: 68px;
}
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: color 0.15s;
  position: relative;
  padding-block: 6px;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
}
.nav-cta { margin-left: 4px; }
.burger {
  margin-left: auto;
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-mid);
  border-radius: 10px;
}
.burger span {
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  position: relative;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }

.mobile-menu {
  position: fixed;
  inset: 68px 0 0 0;
  background: var(--bg);
  z-index: 55;
  padding: var(--s6) var(--gutter) var(--s8);
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a.m-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu a.m-link[aria-current="page"] { color: var(--accent); }
.mobile-menu a.m-link .m-tag {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  color: var(--ink-3); text-transform: uppercase; font-weight: 400;
}
.mobile-menu .m-foot { margin-top: var(--s7); display: grid; gap: var(--s3); }

@media (max-width: 900px) {
  .nav .nav-links, .nav .nav-cta { display: none; }
  .nav .burger { display: flex; }
}

/* --- 6. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding-inline: 22px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 0.14s ease, background 0.14s, border-color 0.14s, color 0.14s;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hi); }

.btn-secondary { border: 1px solid var(--line-hi); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); background: rgba(255,255,255,0.04); }

.btn-ghost { padding-inline: 0; height: auto; color: var(--accent); }
.btn-ghost:hover { color: var(--accent-hi); }
.btn-ghost:hover svg { transform: translateX(3px); }
.btn-ghost svg { transition: transform 0.14s; }

.btn-sm { height: 40px; padding-inline: 16px; font-size: 0.875rem; }
.btn-lg { height: 56px; padding-inline: 30px; font-size: 1.0625rem; }
.btn-block { width: 100%; }

/* Placeholder: an action the real site will wire up later. Drops any solid fill
   it inherits from .btn-primary — a dimmed label on a live-looking accent button
   reads as broken rather than as not-yet-wired. */
.btn-todo,
.btn-todo:hover {
  background: transparent;
  border: 1px dashed var(--line-hi);
  color: var(--ink-2);
  cursor: not-allowed;
}
.btn-todo:active { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* On a phone the large CTAs go full width — a thumb-sized target beats a
   tidy shrink-wrapped one, and it keeps the primary/secondary order obvious. */
@media (max-width: 540px) {
  .btn-lg { width: 100%; }
  .btn-row .btn-ghost { width: auto; }
}

/* --- 7. Chips & tags ----------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-mid);
  color: var(--ink-2);
  line-height: 1;
}
.chip-accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-tint); }
.chip-soon   { color: var(--ink-3); border-style: dashed; }
.chip-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}

.cmd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--accent-tint);
  color: var(--accent-hi);
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}

/* --- 8. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -340px; left: 50%;
  width: 1100px; height: 760px;
  transform: translateX(-58%);
  background: radial-gradient(ellipse at center, rgba(46,155,255,0.16), transparent 62%);
  pointer-events: none;
}
[data-product="hoops"] .hero::before { background: radial-gradient(ellipse at center, rgba(255,138,60,0.14), transparent 62%); }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
}
.hero h1 { font-size: var(--fs-display); margin-bottom: var(--s5); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { max-width: 46ch; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.hero-facts li {
  font-size: 0.875rem; color: var(--ink-3);
  position: relative; padding-left: 14px;
}
.hero-facts li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* The price, directly under the buttons. A sentence rather than a pricing
   card on purpose: one number, stated once, with no table built around it. */
.hero-price {
  margin-top: var(--s5);
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 44ch;
}
.hero-price strong { color: var(--accent); font-weight: 600; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
}

/* --- 9. Product visuals -------------------------------------------------- */
/* One family: the Discord frame and the overview video that frames it.
   Our product's output, drawn in CSS. Not a clone of the Discord client.
   Every frame is one exchange — channel bar, one coach message, one Tempo reply. */

.dsc {
  background: var(--bg-inset);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 28px 60px -30px rgba(0,0,0,0.85);
}
.dsc-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
}
.dsc-bar .hash { color: var(--ink-3); font-weight: 600; }
.dsc-bar .ch {
  font-size: 0.875rem; font-weight: 600; color: var(--ink-2);
}
.dsc-bar .dsc-meta {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.dsc-body { padding: var(--s5) var(--s4) var(--s5); display: grid; gap: var(--s5); }

.dsc-msg { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 13px; }
.dsc-av {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  color: #fff; background: #3a4a60; letter-spacing: 0;
}
.dsc-av-bot { background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: var(--on-accent); }
.dsc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dsc-name { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.dsc-name-bot { color: var(--accent-hi); }
.dsc-bot {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em;
  background: var(--accent); color: var(--on-accent);
  padding: 2px 5px; border-radius: 4px; font-weight: 600; text-transform: uppercase;
  position: relative; top: -1px;
}
.dsc-time { font-size: 0.6875rem; color: var(--ink-3); }
.dsc-text { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }

/* Two things Discord renders rather than stores, and the bot leans on both.
   Mentions resolve to the coach's nickname, which is why the draft ping works;
   timestamps resolve to each viewer's own timezone, which is the whole point of
   the schedule post. Drawing them as plain text loses the feature. */
.dsc-mention {
  background: var(--accent-tint); color: var(--accent-hi);
  padding: 1px 5px; border-radius: 4px; font-weight: 500;
}
.dsc-ts { background: rgba(255,255,255,0.07); border-radius: 4px; padding: 1px 5px; }

.dsc-embed {
  border-left: 3px solid var(--accent);
  background: var(--bg-panel);
  border-radius: 5px;
  padding: 14px 16px;
  max-width: 440px;
}
.dsc-embed-ok   { border-left-color: var(--ok); }
.dsc-embed-warn { border-left-color: var(--warn); }
.dsc-embed-bad  { border-left-color: var(--bad); }
.dsc-embed-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 6px;
}
.dsc-embed-desc { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
/* set_author() — the league name above the title, real on the open-teams and
   rivalry boards. It is what makes a board feel like it belongs to your league
   rather than to the bot. */
.dsc-author {
  font-size: 0.75rem; font-weight: 600; color: var(--ink-2); margin-bottom: 7px;
}
.dsc-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px 18px; margin-top: 13px;
}
.dsc-field-name {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
.dsc-field-val { font-size: 0.875rem; color: var(--ink); font-weight: 500; line-height: 1.35; }
/* Discord's inline=False fields span the row. The real /upgrade card uses one
   for the upgrade itself, which is what makes it read as the card's headline. */
.dsc-field-wide { grid-column: 1 / -1; }
.dsc-foot {
  margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 0.6875rem; color: var(--ink-3);
}
/* Discord's own footer on an ephemeral reply. Worth drawing: the activation
   panel is private, and that is the reassurance a commissioner wants before
   typing a billing command into a channel 30 people can read. */
.dsc-only-you { margin-top: 9px; font-size: 0.6875rem; color: var(--ink-3); }

.dsc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-width: 440px; }
.dsc-btn {
  font-size: 0.8125rem; font-weight: 500;
  padding: 8px 14px; border-radius: 6px;
  background: #3d4657; color: #fff;
}
.dsc-btn-primary { background: var(--info); }
.dsc-btn-ok      { background: var(--ok); color: #06210f; font-weight: 600; }
.dsc-btn-bad     { background: var(--bad); }
.dsc-btn-off     { background: transparent; border: 1px solid var(--line-mid); color: var(--ink-3); }

/* Overview video. The poster is a live Discord frame rather than an image, so
   it takes the product accent and never goes stale against the real UI. */
.vid { margin: 0; }
.vid-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
  background: var(--bg-inset);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.vid-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(85% 120% at 50% 0%, var(--accent-tint), transparent 68%);
}
.vid-poster {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: clamp(18px, 4vw, 56px);
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.vid-poster .dsc {
  width: min(780px, 100%);
  opacity: 0.5;
  box-shadow: none;
}
/* A 16:9 stage on a phone is shorter than the frame it holds. Rather than
   clipping mid-embed, anchor the channel bar to the top and fade the frame out
   at the bottom edge, so it reads as a channel continuing past the crop. */
@media (max-width: 700px) {
  .vid-poster { align-items: start; }
  .vid-poster .dsc {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
  }
}

.vid-play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s5);
  background: linear-gradient(to bottom, rgba(7,11,19,0.5), rgba(7,11,19,0.78));
  transition: opacity 0.3s ease;
}
.vid-play-circle {
  width: clamp(60px, 7vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  box-shadow: 0 14px 44px -10px rgba(0, 0, 0, 0.8);
  transition: transform 0.18s ease, background 0.18s;
}
.vid-play:hover .vid-play-circle { transform: scale(1.06); background: var(--accent-hi); }
.vid-play:active .vid-play-circle { transform: scale(0.98); }
.vid-play-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.vid-stage video {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.vid:not(.is-playing) .vid-stage video { display: none; }
.vid.is-playing .vid-poster,
.vid.is-playing .vid-play { opacity: 0; pointer-events: none; }

.vid-cap, .vid-note {
  margin-top: var(--s4);
  font-size: 0.875rem;
  color: var(--ink-2);
  text-align: center;
}
/* Swapped in only if the clip itself is missing, so the spot still reads as
   finished while the file is being cut. */
.vid-note { display: none; }
.vid.is-unavailable .vid-note { display: block; }
.vid.is-unavailable .vid-cap { display: none; }

/* --- 10. Product split (homepage centrepiece) ---------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.split-panel {
  --accent:      var(--blue);
  --accent-hi:   var(--blue-hi);
  --accent-tint: rgba(46,155,255,0.12);
  --on-accent:   #04101F;
  position: relative;
  padding: clamp(40px, 5.5vw, 76px) clamp(24px, 4vw, 60px);
  display: flex; flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  transition: background 0.25s;
}
.split-panel + .split-panel { border-left: 1px solid var(--line); }
/* Full-bleed, but the copy still lands on the same grid as every .wrap above. */
.split-panel:first-child { padding-left: calc(max(0px, (100vw - var(--max)) / 2) + var(--gutter)); }
.split-panel:last-child { padding-right: calc(max(0px, (100vw - var(--max)) / 2) + var(--gutter)); }
.split-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-tint), transparent 70%);
  opacity: 0.85;
}
.split-panel:hover { background: rgba(255,255,255,0.015); }
.split-hoops {
  --accent:      var(--amber);
  --accent-hi:   var(--amber-hi);
  --accent-tint: rgba(255,138,60,0.12);
  --on-accent:   #1B0A00;
}
/* The availability chip never breaks mid-phrase — if the row runs out of room
   it takes its own line instead. */
.split-panel .split-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); margin-bottom: var(--s6); }
.split-panel .split-top .chip { white-space: nowrap; }
.split-panel h3 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  margin-bottom: var(--s4);
}
.split-panel h3 .sport { display: block; color: var(--accent); font-style: italic; }
.split-panel .split-desc { color: var(--ink-2); max-width: 34ch; margin-bottom: var(--s5); }
.split-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 9px var(--s4);
  margin-bottom: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.split-list li {
  font-size: 0.875rem; color: var(--ink-2);
  position: relative; padding-left: 21px;
}
.split-list li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 12px; height: 2px;
  background: var(--accent); opacity: 0.8;
}
.split-panel .btn-row { margin-top: auto; }

/* Price sits above the buttons and takes over the job of pushing them down,
   so both panels line their buttons up whatever the list length. */
.split-price {
  margin-top: auto;
  padding-top: var(--s5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.split-price + .btn-row { margin-top: var(--s4); }
.split-panel.is-soon { background: rgba(255,255,255,0.012); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-panel + .split-panel { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  /* Availability leads, then the games it covers — both wrap badly side by side. */
  .split-panel .split-top {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--s3);
  }
}

/* --- 11. Benefit row ----------------------------------------------------- */

.bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.bens > li { padding: var(--s5) var(--s5) var(--s5) 0; }
.bens > li + li { border-left: 1px solid var(--line); padding-left: var(--s5); }
.bens h3 { font-size: 1.0625rem; letter-spacing: -0.01em; margin-bottom: 9px; }
.bens p { font-size: var(--fs-sm); color: var(--ink-2); }
.bens .num {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  color: var(--accent); display: block; margin-bottom: var(--s4);
}
@media (max-width: 760px) {
  .bens { grid-template-columns: 1fr; }
  .bens > li { padding: var(--s5) 0; border-top: 1px solid var(--line); }
  .bens > li + li { border-left: 0; padding-left: 0; }
}

/* --- 12. Feature rows (Football / Hoops pages) --------------------------- */

.frow {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(48px, 6.5vw, 92px);
}
.frow + .frow { border-top: 1px solid var(--line); }
.frow-rev .frow-copy { order: 2; }
.frow-rev .frow-vis  { order: 1; }
.frow-num {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em;
  color: var(--accent); margin-bottom: var(--s4); display: block;
}
.frow h2 { font-size: var(--fs-h2); margin-bottom: var(--s4); }
.frow-copy p { color: var(--ink-2); max-width: 46ch; }
.frow-points { margin-top: var(--s5); display: grid; gap: 10px; }
.frow-points li {
  font-size: var(--fs-sm); color: var(--ink-2);
  position: relative; padding-left: 19px;
}
.frow-points li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--accent); border-radius: 1px; transform: rotate(45deg);
}
.frow-points strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .frow { grid-template-columns: 1fr; gap: var(--s6); }
  /* Copy always leads on mobile, regardless of desktop alternation. */
  .frow-rev .frow-copy { order: 1; }
  .frow-rev .frow-vis  { order: 2; }
}

/* --- 13. Feature catalog (Features page) --------------------------------- */

.toggle {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.toggle button {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-3);
  transition: background 0.16s, color 0.16s;
}
.toggle button:hover { color: var(--ink-2); }
.toggle button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.toggle button .t-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.cat { padding-block: clamp(36px, 4.5vw, 60px); }
.cat + .cat { border-top: 1px solid var(--line); }
.cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
}
.cat h2 { font-size: var(--fs-h3); margin-bottom: 10px; }
.cat-desc { font-size: var(--fs-sm); color: var(--ink-3); }
.flist { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 2px; }
.fitem {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-top: 1px solid var(--line);
}
.fitem h3 {
  font-size: 0.9375rem; font-family: var(--font-body); font-weight: 600;
  letter-spacing: 0; margin-bottom: 5px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.fitem p { font-size: 0.875rem; color: var(--ink-3); line-height: 1.5; }
.fitem .cmd { font-size: 0.75rem; }
@media (max-width: 820px) {
  .cat-grid { grid-template-columns: 1fr; gap: var(--s5); }
}

/* --- 14. Steps (Install page) -------------------------------------------- */

.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 300px);
  gap: var(--s5);
  padding-block: var(--s6);
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
/* Same mono index as the product rows use — one numbering voice site-wide. */
.step-n {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em;
  color: var(--accent); line-height: 1; padding-top: 0.45em;
}
.step h2 { font-size: var(--fs-h3); margin-bottom: 10px; }
.step p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 52ch; }
.step-side { display: grid; gap: var(--s3); }
@media (max-width: 860px) {
  .step { grid-template-columns: 44px minmax(0,1fr); }
  .step-side { grid-column: 1 / -1; }
}

.callout {
  border: 1px solid var(--line-mid);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  padding: var(--s4) var(--s5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.callout strong { color: var(--ink); font-weight: 600; }
.callout-todo { border-left-color: var(--ink-3); border-style: dashed; border-left-style: solid; }

/* --- 15. FAQ ------------------------------------------------------------- */

.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-group > h2 {
  font-size: var(--fs-h3);
  padding-bottom: var(--s4);
  margin-bottom: 0;
}
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; gap: var(--s4);
  text-align: left;
  padding: var(--s5) 0;
  font-size: 1.0625rem; font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.faq-q:hover { color: var(--accent-hi); }
.faq-icon {
  margin-left: auto; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-hi);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: transform 0.22s ease, border-color 0.18s, color 0.18s;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); border-color: var(--accent); color: var(--accent); }
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p { color: var(--ink-2); font-size: var(--fs-sm); padding-bottom: var(--s5); max-width: 68ch; }
.faq-a p + p { padding-top: var(--s3); }

/* --- 16. CTA band + footer ----------------------------------------------- */

.cta-band {
  text-align: center;
  padding-block: clamp(64px, 8vw, 112px);
  background:
    radial-gradient(70% 130% at 50% 0%, var(--accent-tint), transparent 68%),
    var(--bg-raise);
  border-top: 1px solid var(--line);
}
.cta-band h2 { font-size: var(--fs-h1); margin-bottom: var(--s4); }
.cta-band .lede { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--s6); }

.site-footer { border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); background: var(--bg); }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  padding-bottom: var(--s7);
}
.foot-grid h2 {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s4);
}
.foot-grid li + li { margin-top: 10px; }
.foot-grid a { font-size: var(--fs-sm); color: var(--ink-2); }
.foot-grid a:hover { color: var(--ink); }
.foot-blurb { font-size: var(--fs-sm); color: var(--ink-3); max-width: 34ch; margin-top: var(--s4); }
.foot-bar {
  border-top: 1px solid var(--line);
  padding-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--ink-3);
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
  .foot-grid > *:first-child { grid-column: 1 / -1; }
}

/* --- 17. Page intro band ------------------------------------------------- */

.page-hero {
  padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; top: -260px; left: -120px;
  width: 780px; height: 560px;
  background: radial-gradient(ellipse at center, var(--accent-tint), transparent 64%);
  pointer-events: none;
}
.page-hero-inner { position: relative; }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: var(--s5); max-width: 18ch; }

/* Product pages open the way the home page does: the claim on the left, the
   thing itself on the right. Left as one column, the headline wraps to four
   lines and the empty half of the screen reads as an image that failed to
   load. The columns are even rather than the home page's 1:1.02, because the
   product h1 is --fs-h1 and does not need the extra room. */
.page-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
.page-hero-split .callout { max-width: none; }

@media (max-width: 900px) {
  .page-hero-split { grid-template-columns: 1fr; gap: var(--s7); }
}

/* --- 17b. Long-form prose (privacy, terms) -------------------------------- */

/* Legal pages are the one place on the site with a genuine wall of text, so
   they get a measure and a rhythm rather than the display treatment. */
.prose { color: var(--ink-2); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.prose h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink);
  margin-top: var(--s6);
}
.prose ul { margin-left: 0; }
.prose li {
  position: relative;
  padding-left: var(--s5);
  font-size: var(--fs-sm);
}
.prose li + li { margin-top: var(--s3); }
.prose li::before {
  content: "";
  position: absolute; left: 2px; top: 0.62em;
  width: 5px; height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.prose code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; color: var(--ink);
}
.prose-updated {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- 18. Design lab ------------------------------------------------------ */

.lab-sec { padding-block: var(--s8); border-top: 1px solid var(--line); }
.lab-sec > h2 {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s6);
}
.lab-note { font-size: 0.875rem; color: var(--ink-3); margin-bottom: var(--s5); max-width: 62ch; }
.lab-row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); }

.spec { border-top: 1px solid var(--line); padding-block: var(--s4); display: grid; grid-template-columns: 132px 1fr; gap: var(--s5); align-items: baseline; }
.spec-meta { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.1em; }

.sw { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.sw-chip { height: 76px; }
.sw-meta { padding: 11px 13px; background: var(--bg-panel); }
.sw-name { font-size: 0.8125rem; font-weight: 600; }
.sw-hex { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-3); text-transform: uppercase; }

.space-bar { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.space-bar div { text-align: center; }
.space-bar i { display: block; background: var(--accent); height: 26px; border-radius: 2px; }
.space-bar span { font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-3); display: block; margin-top: 6px; }

.surface-demo { padding: var(--s5); border-radius: var(--radius); border: 1px solid var(--line); }

.vp-frame {
  border: 1px solid var(--line-mid); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-inset);
}
.vp-frame > iframe { display: block; width: 100%; height: 560px; border: 0; background: var(--bg); }
.vp-bar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg-panel); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.vp-bar button { padding: 5px 10px; border: 1px solid var(--line-mid); border-radius: 6px; color: var(--ink-3); }
.vp-bar button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.vp-scroll { overflow-x: auto; }

/* --- 19. Utilities ------------------------------------------------------- */

.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }
.accent-text { color: var(--accent); }
.center { text-align: center; }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 8px 8px; font-weight: 600; font-size: var(--fs-sm);
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }