/* Hoopers Lists — "/" marketing landing page (anonymous visitors only).
   Full homepage per docs/ui_content_recommendations.md §1 (2026-08-04
   decision), matching reference/preview/hoopers-lists-homepage.html.
   Tokens match docs/color-palette.md ("Blacktop+") - redeclared under
   .landing-page (harmless, identical to static/css/base.css's :root
   tokens) so this file stays self-contained. */

.landing-page {
  /* Every token below except --live comes straight from base.css's :root
     and cascades here unchanged - do NOT redeclare them. A palette swap
     should mean editing base.css's :root once, not hunting through every
     page's own CSS for a second copy of the same values. */
  --live: #34D399; /* Diverged from docs/color-palette.md's teal/live alias
    by request - win streaks and the "latest" badge read as green, not
    teal. --teal itself is untouched (still used for Team Manager
    elsewhere on this page). */

  background: var(--bg);
  color: var(--text);
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.6;
}

.landing-page .mono { font-family: "JetBrains Mono", monospace; }
.landing-page a { color: inherit; text-decoration: none; }
.landing-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ─── Header / nav ────────────────────────────────────────────────── */
.landing-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 2px;
}

.landing-brand-mark {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.landing-brand:hover .landing-brand-mark,
.landing-brand:focus-visible .landing-brand-mark {
  transform: rotate(-12deg) scale(1.08);
}
.landing-brand:active .landing-brand-mark {
  transform: rotate(-4deg) scale(0.9);
}

.landing-brand-name {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.landing-brand-name .accent,
.landing-headline .accent {
  color: var(--primary);
}

.landing-nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-secondary);
}

.landing-nav-links a:hover { color: var(--text); }

/* "Log in" is a button (opens the coming-soon modal), not a real link, but
   sits among plain <a> nav links above - reset the browser's default
   button chrome so it reads identically (mirrors .landing-footer-link-btn
   below). */
.landing-nav-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.landing-nav-link-btn:hover { color: var(--text); }

/* Hamburger trigger for .landing-mobile-nav-dialog - hidden until the
   560px breakpoint (below) hides .landing-nav-links and shrinks the CTA,
   leaving no other way to reach Features/Roles/Mobile/Log in on mobile. */
.landing-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
}
.landing-nav-toggle:hover { border-color: var(--text-secondary); }
.landing-nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Match the {% icon %} call's own size=20 rather than shrinking a larger
   intrinsic SVG via CSS - one source of truth for the rendered size
   instead of relying on CSS width/height to always out-specificity the
   tag's own width/height attributes. */
.landing-nav-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 11px 22px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
}

.landing-btn-primary { background: var(--primary); color: var(--on-primary); }
.landing-btn-primary:hover { background: var(--primary-hover); }
.landing-btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.landing-btn-ghost:hover { border-color: var(--text-secondary); }
.landing-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ─── Hero ────────────────────────────────────────────────────────── */
.landing-hero { padding: 76px 0 64px; position: relative; overflow: hidden; }
.landing-hero-watermark { position: absolute; top: -40px; right: -60px; width: 520px; height: 520px; opacity: 0.12; pointer-events: none; z-index: 0; }
.landing-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; position: relative; z-index: 1; }

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}

.landing-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  margin-right: 2px;
}

.landing-headline {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0;
  font-size: 52px;
  line-height: 1.05;
}

.landing-lede {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 22px 0 32px;
}

.landing-ctas { display: flex; gap: 14px; margin-bottom: 34px; flex-wrap: wrap; }
.landing-hero-note { font-size: 13px; color: var(--text-muted); margin: 0; }
.landing-hero-note a { color: var(--text-secondary); text-decoration: underline; }
.landing-hero-note a:hover { color: var(--text); }

/* "Log in here" is a button (opens the coming-soon modal), not a real
   link - reset the browser's default button chrome so it reads
   identically to .landing-hero-note a above (mirrors
   .landing-footer-link-btn/.landing-nav-link-btn). */
.landing-hero-note-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-secondary);
  text-decoration: underline;
}
.landing-hero-note-link-btn:hover { color: var(--text); }

/* ─── Scoreboard signature card ──────────────────────────────────── */
.landing-scoreboard {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px 24px;
  position: relative;
}

.landing-scoreboard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.landing-scoreboard-title { font-size: 13px; letter-spacing: 1.5px; color: var(--text-secondary); }

.landing-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--live);
  letter-spacing: 0.5px;
}

.landing-live-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
}

table.landing-standings { width: 100%; border-collapse: collapse; font-size: 13px; }
table.landing-standings th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border);
}
table.landing-standings th.num, table.landing-standings td.num { text-align: right; }
table.landing-standings td { padding: 9px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
table.landing-standings tr:last-child td { border-bottom: none; }
table.landing-standings td.team { display: flex; align-items: center; gap: 9px; font-weight: 500; }

table.landing-standings tbody tr { transition: background 0.15s ease; }
table.landing-standings tbody tr:hover { background: rgba(245, 241, 236, 0.035); }

table.landing-standings tr.leader {
  background: linear-gradient(90deg, rgba(242, 106, 16, 0.10), transparent 65%);
  box-shadow: inset 3px 0 0 var(--primary);
}
table.landing-standings tr.leader:hover { background: linear-gradient(90deg, rgba(242, 106, 16, 0.14), transparent 65%); }
table.landing-standings tr.leader .team { font-weight: 700; }

.landing-standings .rank {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: none;
}

.landing-standings tr.leader .rank { background: var(--primary); color: var(--on-primary); }

.landing-standings td.pct {
  position: relative;
  background-image: linear-gradient(90deg, rgba(242, 106, 16, 0.16) var(--pct, 0%), transparent var(--pct, 0%));
}

.landing-standings td.streak { color: var(--live); font-weight: 600; }
.landing-standings td.streak::before { content: "\25b2"; font-size: 8px; margin-right: 3px; position: relative; top: -1px; }
.landing-standings td.streak.cold { color: var(--alert); }
.landing-standings td.streak.cold::before { content: "\25bc"; }

.team-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
  display: inline-block;
  border: 1px solid rgba(245, 241, 236, 0.15);
}
.team-dot.dot-white { background: #F5F1EC; }
.team-dot.dot-green { background: #22C55E; border-color: transparent; }
.team-dot.dot-blue { background: #4E8CFF; border-color: transparent; }
.team-dot.dot-red { background: #E5484D; border-color: transparent; }
.team-dot.dot-yellow { background: var(--gold); border-color: transparent; }
.team-dot.dot-black { background: #121113; border-color: rgba(245, 241, 236, 0.35); }

.landing-scoreboard-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── Sections ────────────────────────────────────────────────────── */
.landing-page section { padding: 64px 0; border-top: 1px solid var(--border); }
.landing-section-head { max-width: 560px; margin-bottom: 40px; }
.landing-section-head .landing-eyebrow { margin-bottom: 14px; }
.landing-section-head h2 { font-size: 30px; margin-bottom: 12px; }
.landing-section-head p { color: var(--text-secondary); font-size: 15px; margin: 0; }

/* ─── Stats strip ─────────────────────────────────────────────────── */
.landing-stats-strip { padding: 44px 0; }
.landing-stats-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.landing-stats-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.landing-stats-head .landing-eyebrow { margin-bottom: 0; }
.landing-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.landing-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  background: radial-gradient(140px 90px at 12% -12%, rgba(242, 106, 16, 0.14), transparent 70%), var(--bg-raised);
  border: 1px solid var(--border);
  border-top: 2px solid transparent;
  border-radius: 12px;
  padding: 20px 20px 20px 18px;
}
.landing-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.landing-stat-icon svg { width: 20px; height: 20px; }
.landing-stat-body { display: flex; flex-direction: column; }
.landing-stat-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.landing-stat:nth-child(1) { border-top-color: var(--primary); }
.landing-stat:nth-child(1) .landing-stat-value { color: var(--primary-hover); }
.landing-stat:nth-child(1) .landing-stat-icon { background: rgba(242, 106, 16, 0.16); color: var(--primary-hover); }
.landing-stat:nth-child(2) { border-top-color: var(--teal); }
.landing-stat:nth-child(2) .landing-stat-value { color: var(--teal); }
.landing-stat:nth-child(2) .landing-stat-icon { background: rgba(47, 211, 196, 0.15); color: var(--teal); }
.landing-stat:nth-child(3) { border-top-color: var(--gold); }
.landing-stat:nth-child(3) .landing-stat-value { color: var(--gold); }
.landing-stat:nth-child(3) .landing-stat-icon { background: rgba(245, 195, 75, 0.15); color: var(--gold); }
.landing-stat-label {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── League directory (search, per-page limit, grid/list view) ──── */
.landing-league-banner { padding: 44px 0 56px; }
.landing-league-banner .landing-eyebrow { margin-bottom: 8px; }
.landing-league-banner-head { font-size: 20px; margin: 0; }
.landing-league-banner-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.landing-league-count {
  flex: none;
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.landing-league-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.landing-league-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 280px;
  min-width: 0;
}
.landing-league-search-field { position: relative; width: 100%; max-width: 360px; }
.landing-league-search {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 36px 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.landing-league-search::placeholder { color: var(--text-muted); }
.landing-league-search:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(242, 106, 16, 0.18);
}
.landing-league-search::-webkit-search-cancel-button { display: none; }

.landing-league-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.landing-league-search-clear:hover { background: var(--bg-card); color: var(--text); }

.landing-league-result-count {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* No-JS visitors get controls that can't do anything - hide them rather
   than ship dead UI (page-loader.js strips .no-js as soon as JS runs). */
.no-js .landing-league-controls { display: none; }

/* Single-column list - the only layout now (grid/list toggle removed,
   see landing.js). */
.landing-league-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

a.landing-league-card {
  /* Element-qualified selector: .landing-page a { color: inherit } (base.css
     pattern, near the top of this file) ties .landing-league-card on class
     specificity (1 each) and wins the tiebreak via its own element
     selector - without "a." here, cards silently render at full --text
     brightness instead of the intended muted --text-secondary at rest. */
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
  min-width: 0;
}
.landing-league-card:first-child { border-top: 1px solid var(--border); }
.landing-league-card .landing-league-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-league-card:hover { color: var(--text); background: var(--bg-raised); }
.landing-league-card:hover img,
.landing-league-card:hover .landing-league-logo-fallback { transform: scale(1.08); }
.landing-league-card:active { transform: scale(0.99); }
.landing-league-card[hidden] { display: none; }

.landing-league-row-arrow { display: inline-flex; flex: none; margin-left: auto; color: var(--text-muted); transform: rotate(90deg); transition: transform 0.2s ease, color 0.2s ease; }
.landing-league-card:hover .landing-league-row-arrow { color: var(--text); transform: rotate(90deg) translateX(3px); }
.landing-league-row-arrow svg { width: 14px; height: 14px; }

/* Per-card staggered entrance, distinct from the page's larger [data-reveal]
   blocks - shorter travel/duration suits a small grid tile, and the delay
   (set inline per card via --reveal-delay) is clamped so a long roster of
   leagues doesn't stretch the reveal out for several seconds. */
.landing-league-card[data-reveal] {
  transform: translateY(10px) scale(0.97);
  transition-property: opacity, transform, border-color, box-shadow, color, background;
  transition-duration: 0.45s, 0.45s, 0.2s, 0.2s, 0.2s, 0.2s;
  /* Only the entrance properties (opacity/transform) get the staggered
     delay - hover/tap feedback (border-color/box-shadow/color/background)
     must stay instant, or hovering a card that's already visible would
     feel laggy by however much of its entrance delay happened to be set. */
  transition-delay: min(var(--reveal-delay, 0ms), 480ms), min(var(--reveal-delay, 0ms), 480ms), 0s, 0s, 0s, 0s;
}
.landing-league-card[data-reveal].is-visible { transform: translateY(0) scale(1); }
/* Explicit :hover override, specific enough to beat the [data-reveal]
   .is-visible resting-transform rule above on the property they share
   (equal-specificity + source order would otherwise let the resting
   state silently swallow it) - a flat row just re-asserts the resting
   transform on hover rather than lifting like a grid tile would. */
.landing-league-card[data-reveal].is-visible:hover { transform: translateY(0) scale(1); }

.landing-league-card img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.2s ease;
}
.landing-league-logo-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--primary-hover);
  font-family: "Saira Condensed", sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.landing-league-empty {
  display: none;
  padding: 20px 0 4px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}
.landing-league-empty:not([hidden]) { display: block; }

.landing-league-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}
.landing-league-pager-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.landing-league-pager-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.landing-league-pager-btn:disabled { opacity: 0.4; cursor: default; }
.landing-league-pager-icon-prev { transform: rotate(-90deg); }
.landing-league-pager-icon-next { transform: rotate(90deg); }
.landing-league-pager-status { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 6ch; text-align: center; }
.no-js .landing-league-pager { display: none; }

@media (max-width: 860px) {
  .landing-stats-grid { grid-template-columns: 1fr; }
  .landing-league-banner-head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ─── Action banner: full-bleed illustration ─────────────────────── */
.landing-action-banner { border-top: none; padding: 0; }
.landing-action-banner-inner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0C0B0C;
  border: 1px solid var(--border);
}
.landing-action-banner-inner svg { display: block; width: 100%; height: auto; }
.landing-action-caption { position: absolute; left: 32px; bottom: 28px; max-width: 320px; }
.landing-action-caption .landing-eyebrow { margin-bottom: 10px; }
.landing-action-caption h2 { font-size: 26px; line-height: 1.15; color: var(--text); margin: 0; }

/* ─── Court map illustration ─────────────────────────────────────── */
.landing-court-map-wrap { margin-bottom: 36px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0E0D0E; }
.landing-court-map-wrap svg { display: block; width: 100%; height: auto; }
.landing-court-legend { display: flex; flex-wrap: wrap; padding: 16px 20px 20px; font-size: 13px; color: var(--text-secondary); }
.landing-court-legend-item { display: flex; align-items: center; padding-right: 20px; margin: 4px 20px 4px 0; border-right: 1px solid var(--border); }
.landing-court-legend-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.landing-court-legend-item em { font-style: normal; color: var(--text-muted); margin-left: 4px; }
.landing-court-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-right: 8px; display: inline-block; }

/* ─── Mobile showcase ─────────────────────────────────────────────── */
.landing-mobile-showcase { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.landing-phone-frame { display: flex; justify-content: center; }
.landing-phone-frame svg { width: 100%; max-width: 280px; height: auto; }
.landing-mobile-copy h2 { font-size: 30px; margin-bottom: 14px; }
.landing-mobile-copy p { color: var(--text-secondary); font-size: 15px; margin-bottom: 22px; max-width: 46ch; }
.landing-mobile-points { display: flex; flex-direction: column; gap: 14px; }
.landing-mobile-point { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-secondary); }
.landing-mobile-point svg { flex: none; width: 18px; height: 18px; color: var(--primary-hover); margin-top: 2px; }

/* ─── Features grid ───────────────────────────────────────────────── */
.landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.landing-feature { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.landing-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.landing-feature-icon svg { width: 21px; height: 21px; }
.landing-feature:nth-child(1) .landing-feature-icon { background: rgba(242, 106, 16, 0.16); color: var(--primary-hover); }
.landing-feature:nth-child(2) .landing-feature-icon { background: rgba(47, 211, 196, 0.15); color: var(--teal); }
.landing-feature:nth-child(3) .landing-feature-icon { background: rgba(155, 123, 255, 0.16); color: var(--violet); }
.landing-feature:nth-child(4) .landing-feature-icon { background: rgba(182, 226, 74, 0.15); color: var(--lime); }
.landing-feature:nth-child(5) .landing-feature-icon { background: rgba(245, 195, 75, 0.15); color: var(--gold); }
.landing-feature:nth-child(6) .landing-feature-icon { background: rgba(242, 106, 16, 0.16); color: var(--primary-hover); }
.landing-feature h3 { font-size: 16px; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.landing-feature p { font-size: 14px; color: var(--text-secondary); margin: 0; }

/* ─── Roles / hierarchy strip ─────────────────────────────────────── */
.landing-roles { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.landing-role {
  flex: 1;
  padding: 26px 22px;
  border-right: 1px solid var(--border);
  background: var(--bg-raised);
  border-top: 2px solid transparent;
}
.landing-role:last-child { border-right: none; }
.landing-role.r-orange { border-top-color: var(--primary); }
.landing-role.r-teal { border-top-color: var(--teal); }
.landing-role.r-violet { border-top-color: var(--violet); }
.landing-role.r-gold { border-top-color: var(--gold); }
.landing-role.r-lime { border-top-color: var(--lime); }
.landing-role .tag { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; display: block; font-weight: 600; }
.landing-role.r-orange .tag { color: var(--primary-hover); }
.landing-role.r-teal .tag { color: var(--teal); }
.landing-role.r-violet .tag { color: var(--violet); }
.landing-role.r-gold .tag { color: var(--gold); }
.landing-role.r-lime .tag { color: var(--lime); }
.landing-role h3 { font-size: 16px; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.landing-role p { font-size: 13px; color: var(--text-secondary); margin: 0; }

/* ─── CTA band ─────────────────────────────────────────────────────── */
.landing-cta-band { border-top: 1px solid var(--border); text-align: center; padding: 70px 0; }
.landing-cta-band h2 { font-size: 30px; margin-bottom: 14px; }
.landing-cta-band p { color: var(--text-secondary); margin-bottom: 28px; }

/* ─── Footer ──────────────────────────────────────────────────────── */
.landing-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 0;
  background: linear-gradient(180deg, transparent, rgba(242, 106, 16, 0.05));
}
.landing-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}
.landing-footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.landing-footer-col a { color: var(--text-secondary); transition: color 0.2s ease; }
.landing-footer-col a:hover { color: var(--text); }

/* "Start a league" is a button (opens the modal), not a real link, but
   sits in the same column as plain <a> footer links above - reset the
   browser's default button chrome so it reads identically. */
.landing-footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.landing-footer-link-btn:hover { color: var(--text); }
.landing-footer-col-head {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.landing-footer-brand-col .landing-brand { pointer-events: none; margin-bottom: 2px; }
.landing-footer-brand-col .landing-brand-name { font-size: 19px; }
.landing-footer-tagline { color: var(--text-secondary); font-size: 14px; margin: 0; max-width: 32ch; }
.landing-footer-domain { color: var(--text-muted); font-size: 12px; letter-spacing: 0.3px; }
.landing-footer-bottom {
  border-top: 1px solid var(--border);
  /* Longhand top/bottom only - a `padding: 20px 0` shorthand here would
     zero out the 24px left/right inset .landing-wrap already gives this
     element (same specificity, defined later wins), pulling the
     copyright text flush against the viewport edge on mobile and out of
     alignment with the footer columns above it on desktop. */
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .landing-hero-grid { grid-template-columns: 1fr; }
  .landing-features { grid-template-columns: 1fr 1fr; }
  .landing-roles { flex-direction: column; }
  .landing-role { border-right: none; border-bottom: 1px solid var(--border); }
  .landing-role:last-child { border-bottom: none; }
  .landing-headline { font-size: 38px; }
  .landing-mobile-showcase { grid-template-columns: 1fr; }
  .landing-phone-frame { order: -1; }
  .landing-action-caption { left: 20px; bottom: 20px; max-width: 78%; }
  .landing-action-caption h2 { font-size: 21px; }
  .landing-footer-grid { grid-template-columns: 1fr 1fr; }
  .landing-footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .landing-features { grid-template-columns: 1fr; }
  .landing-nav-links { display: none; }
  .landing-ctas { flex-direction: column; }
  .landing-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .landing-hero-watermark { width: 340px; height: 340px; top: -20px; right: -90px; }
  .landing-action-caption { position: static; padding: 20px 20px 24px; max-width: 100%; }
  .landing-action-caption h2 { font-size: 22px; }
  .landing-brand-name { font-size: 17px; letter-spacing: 1px; }
  /* Header keeps only brand + hamburger below 560px - "Start a league" isn't
     lost, it's still the first thing in .landing-mobile-nav-footer, so the
     header row doesn't have to carry two competing CTAs (button + burger). */
  .landing-nav .landing-btn-primary { display: none; }
  .landing-nav-toggle { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   Polish pass: page loader, scroll-triggered reveals, ambient motion,
   micro-interactions. Every animated rule below is scoped inside
   `prefers-reduced-motion: no-preference` (or explicitly zeroed under
   `reduce`) so motion-sensitive visitors get an instant, static page.
   ═══════════════════════════════════════════════════════════════════ */

/* Page loader: moved to static/css/page-loader.css (shared across
   public pages) - landing.html now includes it directly. */

/* ─── Sticky header ───────────────────────────────────────────────── */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 8, 10, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.landing-header.is-scrolled {
  background: rgba(8, 8, 10, 0.92);
  border-bottom-color: var(--border-strong);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}

/* ─── Mobile nav drawer ───────────────────────────────────────────────
   Native <dialog> (same top-layer/free-focus-trap/Escape reasoning as
   modal.css's .hl-modal-dialog) styled as a right-edge sheet instead of a
   centered card. Only reachable via .landing-nav-toggle, which only
   exists below the 560px breakpoint, so no separate "hide on desktop"
   rule is needed here - it's simply never opened above that width. */
dialog.landing-mobile-nav-dialog,
dialog.landing-mobile-nav-dialog *,
dialog.landing-mobile-nav-dialog *::before,
dialog.landing-mobile-nav-dialog *::after {
  box-sizing: border-box;
}

dialog.landing-mobile-nav-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  width: min(80vw, 320px);
  height: 100dvh;
  max-height: none;
  box-shadow: -16px 0 40px -16px rgba(0, 0, 0, 0.6);
}

dialog.landing-mobile-nav-dialog::backdrop {
  background: rgba(6, 5, 4, 0.72);
  backdrop-filter: blur(3px);
}

.landing-mobile-nav-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Faint radial glow anchored top-right, same ballgrad-adjacent orange as
     the hero watermark - ties the drawer back to the rest of the page
     instead of reading as a bare generic sheet. */
  background: radial-gradient(220px 160px at 100% 0%, rgba(242, 106, 16, 0.12), transparent 70%);
}

.landing-mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.landing-mobile-nav-brand { gap: 2px; }
.landing-mobile-nav-brand .landing-brand-name { font-size: 15px; letter-spacing: 1px; }
.landing-mobile-nav-brand .landing-brand-mark { width: 26px; height: 26px; }

.landing-mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.landing-mobile-nav-close:hover { background: var(--bg-card); color: var(--text); transform: rotate(90deg); }
.landing-mobile-nav-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.landing-mobile-nav-eyebrow {
  padding: 16px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.landing-mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 4px 10px 8px;
  overflow-y: auto;
}
.landing-mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.landing-mobile-nav-links a:hover,
.landing-mobile-nav-links a:focus-visible {
  background: var(--bg-card);
  color: var(--text);
  transform: translateX(3px);
}
.landing-mobile-nav-links a.is-active {
  background: var(--bg-card);
  color: var(--text);
}

.landing-mobile-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border-strong);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
/* Same positional accent rotation as modal.css's .hl-modal-feature-item
   nth-child rule and landing.css's own .landing-feature-icon rotation -
   one recurring color language across the page, not a one-off palette. */
.landing-mobile-nav-links a:nth-child(1) .landing-mobile-nav-dot { background: var(--primary); }
.landing-mobile-nav-links a:nth-child(2) .landing-mobile-nav-dot { background: var(--teal); }
.landing-mobile-nav-links a:nth-child(3) .landing-mobile-nav-dot { background: var(--violet); }
.landing-mobile-nav-links a:nth-child(4) .landing-mobile-nav-dot { background: var(--gold); }
.landing-mobile-nav-links a:nth-child(5) .landing-mobile-nav-dot { background: var(--lime); }
.landing-mobile-nav-links a:nth-child(6) .landing-mobile-nav-dot { background: var(--primary); }
.landing-mobile-nav-links a.is-active .landing-mobile-nav-dot {
  box-shadow: 0 0 0 3px rgba(242, 106, 16, 0.18);
}

.landing-mobile-nav-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.landing-mobile-nav-footer .landing-btn { width: 100%; }

/* Same body-scroll-lock convention as modal.css (:has() over a JS helper). */
body:has(dialog.landing-mobile-nav-dialog[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  dialog.landing-mobile-nav-dialog {
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                overlay 0.28s ease allow-discrete,
                display 0.28s ease allow-discrete;
  }
  dialog.landing-mobile-nav-dialog[open] {
    transform: translateX(0);
  }
  @starting-style {
    dialog.landing-mobile-nav-dialog[open] {
      transform: translateX(100%);
    }
  }

  dialog.landing-mobile-nav-dialog::backdrop {
    opacity: 0;
    transition: opacity 0.28s ease, overlay 0.28s ease allow-discrete, display 0.28s ease allow-discrete;
  }
  dialog.landing-mobile-nav-dialog[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    dialog.landing-mobile-nav-dialog[open]::backdrop {
      opacity: 0;
    }
  }
}

/* ─── Scroll reveal ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

  .landing-features[data-reveal-group] .landing-feature:nth-child(1) { --reveal-delay: 0s; }
  .landing-features[data-reveal-group] .landing-feature:nth-child(2) { --reveal-delay: 0.08s; }
  .landing-features[data-reveal-group] .landing-feature:nth-child(3) { --reveal-delay: 0.16s; }
  .landing-features[data-reveal-group] .landing-feature:nth-child(4) { --reveal-delay: 0.24s; }
  .landing-features[data-reveal-group] .landing-feature:nth-child(5) { --reveal-delay: 0.32s; }
  .landing-features[data-reveal-group] .landing-feature:nth-child(6) { --reveal-delay: 0.4s; }

  .landing-roles[data-reveal-group] .landing-role:nth-child(1) { --reveal-delay: 0s; }
  .landing-roles[data-reveal-group] .landing-role:nth-child(2) { --reveal-delay: 0.08s; }
  .landing-roles[data-reveal-group] .landing-role:nth-child(3) { --reveal-delay: 0.16s; }
  .landing-roles[data-reveal-group] .landing-role:nth-child(4) { --reveal-delay: 0.24s; }
  .landing-roles[data-reveal-group] .landing-role:nth-child(5) { --reveal-delay: 0.32s; }

  .landing-stats-grid[data-reveal-group] .landing-stat:nth-child(1) { --reveal-delay: 0s; }
  .landing-stats-grid[data-reveal-group] .landing-stat:nth-child(2) { --reveal-delay: 0.08s; }
  .landing-stats-grid[data-reveal-group] .landing-stat:nth-child(3) { --reveal-delay: 0.16s; }
}
/* JS-disabled fallback: content must never stay hidden without an observer to reveal it. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ─── Ambient motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .landing-hero-watermark { animation: landing-rotate 18s linear infinite; }
  .landing-scoreboard { animation: landing-float 6s ease-in-out infinite; }
  .landing-phone-frame svg { animation: landing-float 7s ease-in-out infinite; }
  .landing-action-figure { animation: landing-figure-hang 3.4s ease-in-out infinite; }
  .landing-action-ball {
    transform-box: fill-box;
    offset-path: path("M578 48 Q760 4 906 88");
    offset-rotate: auto;
    animation: landing-shot 3.4s cubic-bezier(0.3, 0, 0.2, 1) infinite;
  }
  .landing-action-net { transform-box: fill-box; transform-origin: 50% 0%; animation: landing-net-flick 3.4s ease-in-out infinite; }

  /* Footer + drawer only here - CSS animations start the instant an
     element is styled, and the footer/drawer brand copies are either
     below the fold or inside a <dialog> that starts closed, so by the
     time either is actually seen the bounce has either not happened yet
     (drawer opens later, restarting it - display:none -> block always
     replays a CSS animation, no JS needed) or already finished off-
     screen (footer). The header copy is deliberately NOT included here -
     see .landing-brand-replay below - because it sits in the one spot
     that's on-screen from first paint, which on this page means "hidden
     behind .page-loader" (z-index 9999) for its entire 0.6s/0.5s run. */
  .landing-footer-brand-col .landing-brand-mark,
  .landing-mobile-nav-brand .landing-brand-mark {
    animation: landing-brand-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .landing-footer-brand-col .landing-brand-name,
  .landing-mobile-nav-brand .landing-brand-name {
    animation: landing-brand-in 0.5s ease-out 0.15s both;
  }

  /* Header copy: static/js/landing.js adds .landing-brand-replay once
     [data-page-loader] actually clears, so this plays where it can be
     seen instead of racing (and losing to) the loader overlay. */
  .landing-brand-replay .landing-brand-mark { animation: landing-brand-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .landing-brand-replay .landing-brand-name { animation: landing-brand-in 0.5s ease-out 0.15s both; }
}
@keyframes landing-rotate { to { transform: rotate(360deg); } }
@keyframes landing-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes landing-brand-drop {
  0% { opacity: 0; transform: translateY(-16px) rotate(-20deg) scale(0.7); }
  65% { opacity: 1; transform: translateY(2px) rotate(4deg) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes landing-brand-in {
  0% { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes landing-figure-hang {
  0%, 8% { transform: translateY(0); }
  22% { transform: translateY(-3px); }
  50% { transform: translateY(-1px); }
  70%, 100% { transform: translateY(0); }
}
@keyframes landing-shot {
  0%, 8% { offset-distance: 0%; opacity: 1; }
  50% { offset-distance: 100%; opacity: 1; }
  54% { offset-distance: 100%; opacity: 0; }
  55% { offset-distance: 0%; opacity: 0; }
  63%, 100% { offset-distance: 0%; opacity: 1; }
}
@keyframes landing-net-flick {
  0%, 46% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.85); opacity: 0.65; }
  56%, 100% { transform: scaleY(1); opacity: 1; }
}

/* ─── Live dot pulse ──────────────────────────────────────────────── */
.landing-live-dot { position: relative; }
.landing-live-dot::before { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .landing-live-dot::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live);
    transform: translateY(-50%);
    animation: landing-pulse-ring 1.8s cubic-bezier(0.2, 0.7, 0.4, 1) infinite;
  }
}
@keyframes landing-pulse-ring {
  0% { opacity: 0.6; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(3.2); }
}

/* ─── Micro-interactions ─────────────────────────────────────────── */
.landing-btn {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(242, 106, 16, 0.55); }
.landing-btn-primary:active { transform: translateY(0); box-shadow: none; }
.landing-btn-ghost:hover { transform: translateY(-2px); }
.landing-btn-ghost:active { transform: translateY(0); }

.landing-nav-links a { transition: color 0.2s ease; }

.landing-feature {
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.landing-feature:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.65);
}
.landing-feature-icon { transition: transform 0.3s ease; }
.landing-feature:hover .landing-feature-icon { transform: scale(1.08); }

.landing-stat {
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.landing-stat:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.65);
}

.landing-role { transition: transform 0.3s ease, background 0.3s ease; }
.landing-role:hover { transform: translateY(-3px); background: var(--bg-card); }

.landing-court-legend-item .dot { transition: transform 0.2s ease; }
.landing-court-legend-item:hover .dot { transform: scale(1.3); }

.landing-mobile-point svg { transition: transform 0.2s ease; }
.landing-mobile-point:hover svg { transform: scale(1.15); }

/* ─── CTA band ambient glow ───────────────────────────────────────── */
.landing-cta-band { position: relative; overflow: hidden; }
.landing-cta-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(242, 106, 16, 0.16) 0%, rgba(242, 106, 16, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .landing-cta-band::before { animation: landing-glow-pulse 5s ease-in-out infinite; }
}
@keyframes landing-glow-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.landing-cta-band > .landing-wrap { position: relative; z-index: 1; }

/* Back-to-top button: moved to static/css/back-to-top.css (shared across
   public pages) - landing.html now includes it directly. */

/* ─── Smooth in-page scrolling (offset for the sticky header) ────── */
/* scroll-behavior itself lives in back-to-top.css (html:has(.back-to-top)) */
#features, #roles, #mobile { scroll-margin-top: 84px; }