/* Collaboranker — /welcome landing page styles.
   Kept in its own file (not inline) because the app's Content-Security-Policy
   has no 'unsafe-inline' for style-src — see CONTENT_SECURITY_POLICY in
   app.py. Font paths below are plain relative /static/... URLs rather than
   {{ url_for(...) }} because Flask serves .css files as-is, with no Jinja
   processing. */

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600 700;
  font-display:swap;
  src:url('/static/fonts/IBMPlexMono-Bold.ttf') format('truetype');
}

:root{
  --bg: #12151b;
  --bg-raised: #1a1e26;
  --line: #2a2f3a;
  --ink: #edeef0;
  --ink-dim: #8b93a1;
  --flag: #5B87C9;
  --flag-dim: #233A5C;
  --flag-bright: #9AB8E5;
  --flag-hover: #2A52BE;
  --pen: #E4362B;
  --pen-dim: #5c1710;
  --good: #3aa66a;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; }
h1,h2,h3{ font-family:'Oswald',sans-serif; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:var(--flag-bright); }
a:hover{ color:var(--flag-hover); }
.mono{ font-family:'IBM Plex Mono',monospace; }
::selection{ background:var(--flag); color:#fff; }
.hidden{ display:none; }

/* ---------- page shell ---------- */
.page{ width:100%; background:var(--bg); overflow-x:hidden; padding-bottom:120px; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---------- reusable "eyebrow" row (small dash + mono label) ---------- */
.eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.eyebrow-dash{ width:18px; height:2px; background:var(--flag); display:inline-block; }
.eyebrow-label{ font-size:11px; letter-spacing:0.18em; color:var(--flag-bright); }

.section-heading{ font-size:32px; font-weight:600; color:var(--ink); max-width:680px; margin-bottom:16px; }
.section-lede{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.7; color:var(--ink-dim); max-width:680px; }
.section-lede strong{ color:var(--ink); }

/* ---------- nav ----------
   flex-wrap is on unconditionally (harmless on desktop — the row always
   fits on one line there) so that on a narrow phone, once "Browse Boards"
   plus the CTA no longer both fit beside the logo, the whole nav-right
   GROUP drops to its own line instead of Flexbox's default fallback:
   shrinking each item individually until the words themselves wrap mid
   line ("BROWSE" / "BOARDS" stacked next to a lone "CREATE A" / "BOARD").
   white-space:nowrap on the link/button text plus flex-shrink:0 on both
   halves of the row is what forces that choice — see the mobile query
   below for the corresponding right-alignment/spacing pass. */
.nav{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; row-gap:14px; max-width:1180px; margin:0 auto; padding:28px 32px 0; }
.nav-logo{ height:28px; width:auto; display:block; }
.nav-logo-link{ display:inline-block; line-height:0; flex-shrink:0; }
.nav-logo-link:hover{ opacity:0.85; }
/* flex-wrap + max-width:100% here too (added 2026-09-09, once a signed-in
   visitor's "My Boards" link and account chip joined Browse/Create as up
   to 4 items) — a flex item doesn't wrap its own children until its own
   width is actually constrained, so max-width:100% (resolving against
   .nav's content box) is what makes the wrap below actually take effect
   once this group drops to its own line under the logo. */
.nav-right{ display:flex; flex-wrap:wrap; align-items:center; gap:28px; row-gap:12px; flex-shrink:0; margin-left:auto; max-width:100%; }
.nav-link{ font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-dim); text-decoration:none; padding:8px 2px; border-bottom:2px solid transparent; white-space:nowrap; }
.nav-link:hover{ color:var(--ink); }
.nav-link.is-current{ color:var(--flag-bright); border-bottom-color:var(--flag); }
.nav-cta{ font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:7px; padding:10px 18px; white-space:nowrap; }
.nav-cta:hover{ border-color:var(--flag-hover); color:var(--flag-hover); }
.nav-cta.is-current{ border-color:var(--flag); color:var(--flag-bright); }

/* A signed-in visitor's account chip — same class/treatment as style.css's
   own (the logged-in app shell), so it reads as the same control wherever
   it shows up on the site. Hidden by default; nav-auth.js reveals it once
   /api/auth/me confirms a session. */
.account-chip{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-dim); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.account-chip button{ background:none; border:1px solid var(--line); color:var(--ink-dim); border-radius:6px; padding:6px 10px; font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; }
.account-chip button:hover{ color:var(--pen); border-color:var(--pen-dim); }

/* Below ~640px, "Browse Boards" + the CTA can't both sit beside the full
   wordmark without cramming (found 2026-09-06, from real phone
   screenshots after the Browse Boards link shipped) — give the row a
   little less padding and a tighter gap so the wrapped nav-right line has
   more room to breathe next to the logo's own line above it. */
@media (max-width: 640px){
  .nav{ padding:20px 20px 0; }
  .nav-right{ gap:16px; }
  .account-chip{ font-size:10px; gap:6px; }
  .account-chip button{ padding:5px 9px; font-size:10px; }
}

/* The narrowest phones still in real use (~320-360px, e.g. an older
   Android or an iPhone SE 1st-gen) don't have room for "Browse" + "My
   Boards" + "Create" + the account chip at full size even on their own
   wrapped line — trim all of them down a notch rather than let anything
   clip off the right edge. Same trim values style.css uses for its own
   .header-right at this breakpoint, so a signed-in visitor sees the same
   sizing whichever page they're on. */
@media (max-width: 360px){
  .nav-right{ gap:10px; }
  .nav-link{ font-size:12px; }
  .nav-cta{ font-size:12px; padding:9px 13px; }
  .account-chip{ font-size:10px; gap:5px; }
  .account-chip button{ padding:4px 8px; font-size:10px; }
}

/* ---------- hero ---------- */
.hero-row{ max-width:1180px; margin:0 auto; padding:64px 32px 0; display:flex; gap:56px; align-items:center; flex-wrap:wrap; }
.hero-left{ flex:1 1 480px; min-width:320px; display:flex; flex-direction:column; gap:22px; }
.hero-h1{ font-size:46px; line-height:1.08; font-weight:600; color:var(--ink); }
.hero-tagline{ font-family:'Inter',sans-serif; font-size:18px; line-height:1.6; color:var(--ink-dim); max-width:520px; }
.hero-cta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.hero-cta-hint{ font-size:12px; color:var(--ink-dim); }

.btn-primary{ font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:0.04em; background:var(--flag); color:#f5f7ff; border-radius:7px; padding:14px 26px; text-decoration:none; display:inline-block; border:none; cursor:pointer; }
.btn-primary:hover{ background:var(--flag-hover); color:#f5f7ff; }
.btn-primary-lg{ padding:15px 30px; margin-top:8px; }
.btn-secondary{ font-family:'Oswald',sans-serif; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--flag-bright); text-decoration:none; border:1px solid var(--flag-dim); border-radius:6px; padding:8px 16px; display:inline-block; }
.btn-secondary:hover{ color:var(--flag-hover); border-color:var(--flag-hover); }

.hero-right{ flex:1 1 380px; min-width:300px; max-width:420px; }
.hero-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:20px; box-shadow:0 24px 60px -20px rgba(0,0,0,0.6); }
.hero-card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.hero-card-title{ font-size:11px; letter-spacing:0.1em; color:var(--ink-dim); }
.hero-card-badge{ font-size:10px; letter-spacing:0.08em; color:var(--ink-dim); border:1px solid var(--line); border-radius:5px; padding:2px 6px; }
.hero-card-rows{ display:flex; flex-direction:column; gap:7px; }
.hero-card-more{ padding-left:38px; font-size:10px; color:var(--ink-dim); }
.hero-card-footer{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.hero-card-footer span{ font-size:10px; color:var(--ink-dim); }

/* team leaderboard rows (hero card + aggregation demo) */
.team-row{ display:flex; align-items:center; gap:10px; }
.team-row-index{ width:16px; font-size:13px; color:var(--ink-dim); text-align:right; }
.team-chip{ flex:1; border-radius:8px; padding:6px 12px; display:flex; align-items:center; gap:10px; }
/* Football-shaped badge, matching the real app's crest badge (see
   footballBadgeSVG() in app.js) — replaced the old hollow circle
   2026-09-08. Each instance is a self-contained inline SVG with its own
   fill/text colors hardcoded per team (this page has no JS to compute
   accentColorFor() at render time), so .crest/.crest-sm/.agg-header .crest
   only need to size the container; the badge's own 100:64 viewBox fills it. */
.crest, .crest-sm, .agg-header .crest{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.crest svg, .crest-sm svg{ display:block; width:100%; height:100%; }
.crest{ width:41px; height:26px; }
.crest-sm{ width:25px; height:16px; }
.team-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; color:currentColor; text-transform:uppercase; }
.move-up{ color:var(--good); font-size:13px; width:16px; text-align:center; }
.move-down{ color:var(--pen); font-size:13px; width:16px; text-align:center; }
.move-steady{ color:var(--ink-dim); font-size:13px; width:16px; text-align:center; }
.move-new{ color:var(--flag-bright); font-size:9px; width:26px; text-align:center; font-weight:600; }

/* real team color pairings (matches app.js's accentColorFor() output) */
.team-kc{ background:#E31837; color:#FFB81C; }
.team-phi{ background:#004C54; color:#A5ACAF; }
.team-buf{ background:#00338D; color:#f5f5f5; }
.team-bal{ background:#241773; color:#9E7C0C; }
.team-dal{ background:#002244; color:#869397; }
.team-gb{ background:#203731; color:#FFB612; }

/* ---------- what-is-it / three-up card grids ---------- */
.three-up{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.three-up-spaced{ margin-top:36px; }
.section-heading-spaced{ margin-bottom:40px; }
.section-lede-spaced{ margin-bottom:36px; }
.legend-good{ color:var(--good); }
.legend-pen{ color:var(--pen); }
.legend-dim{ color:var(--ink-dim); }
.legend-flag{ color:var(--flag-bright); }

.card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:10px; padding:22px; }
.card-title{ font-size:17px; font-weight:600; color:var(--ink); margin-top:14px; margin-bottom:8px; }
.card-text{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; color:var(--ink-dim); }

.feature-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:10px; padding:26px; display:flex; flex-direction:column; gap:14px; }
.feature-card h3{ font-size:17px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.feature-card p{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.65; color:var(--ink-dim); }
.feature-footer{ font-size:11px; color:var(--ink-dim); margin-top:auto; padding-top:8px; border-top:1px solid var(--line); min-height:64px; display:flex; align-items:center; justify-content:center; text-align:center; }
.feature-footer-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 16px; margin-top:auto; padding-top:8px; border-top:1px solid var(--line); min-height:64px; align-items:center; justify-content:center; }
.feature-footer-grid span{ font-size:11px; white-space:nowrap; text-align:center; }

/* ---------- how it works ---------- */
.steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:flex; gap:24px; padding:24px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step-num{ font-size:13px; color:var(--flag-bright); width:28px; flex-shrink:0; padding-top:2px; }
.step-body{ flex:1; min-width:0; }
.step-body h3{ font-size:18px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.step-body p{ font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.65; color:var(--ink-dim); max-width:640px; }

/* ---------- leagues ----------
   Read-only echo of the real create-board sport selector's markup/classes
   (style.css's .sport-grid/.sport-card/.sport-badge/.sport-name/.sport-status,
   themselves promoted from the Board Sport Selector mockup — see boards.py's
   VALID_SPORTS) so a visitor recognizes the same five badges when they get
   to /create. Duplicated here rather than shared because welcome.html only
   loads this stylesheet, not style.css. No .enabled/.selected/hover states:
   nothing here is clickable, so "Live" replaces "Selected" as the status
   this page can truthfully show. */
.sport-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px;
}
.sport-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:9px; padding:18px 10px 14px; background:var(--bg-raised);
}
.sport-card.disabled .sport-badge{ opacity:0.55; }
.sport-card.disabled .sport-name{ color:var(--ink-dim); }
/* Fixed-height wrapper so all five badges share a baseline despite their
   different viewBox aspect ratios (football 100x64, puck 100x74, ball 100x100). */
.sport-badge{ height:40px; display:flex; align-items:center; justify-content:center; }
.sport-badge svg{ width:50px; height:auto; display:block; }
/* CFB's upright football (64x100) sizes by height, like style.css's rule. */
.sport-badge svg.football-badge-vertical{ width:auto; height:40px; }
.sport-name{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase;
  letter-spacing:0.03em; color:var(--ink);
}
.sport-status{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:4px; padding:2px 7px; white-space:nowrap;
}
.sport-status.live{ color:var(--flag-bright); background:rgba(91,135,201,0.14); border:1px solid var(--flag-dim); }
.sport-status.soon{ color:var(--ink-dim); background:var(--bg); border:1px solid var(--line); }

/* ---------- ranking sizes (interactive) ---------- */
.size-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.size-pill{ cursor:pointer; font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.02em; text-transform:uppercase; border-radius:7px; padding:10px 16px; border:1px solid var(--line); background:transparent; color:var(--ink-dim); }
.size-pill.is-selected{ background:var(--flag); color:#f5f7ff; border-color:var(--flag); }

.size-panel{ background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:32px; }
.size-panel-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.size-panel-head h3{ font-size:22px; font-weight:600; color:var(--ink); }
.size-badge{ font-size:11px; color:var(--flag-bright); border:1px solid var(--flag-dim); background:var(--flag-dim); border-radius:5px; padding:3px 8px; }
.size-panel-text{ font-family:'Inter',sans-serif; font-size:15px; line-height:1.65; color:var(--ink-dim); max-width:560px; margin-bottom:26px; }

.explainer{ border-top:1px solid var(--line); padding-top:22px; }
.explainer-label{ font-size:10px; letter-spacing:0.1em; color:var(--ink-dim); }
.explainer-text{ font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.7; color:var(--ink); max-width:600px; margin-top:10px; }
.explainer-text strong{ color:var(--ink); }
.explainer-chips{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.chip{ font-size:12px; color:var(--ink-dim); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 12px; }
.chip-result{ color:#f5f7ff; background:var(--flag); border-color:var(--flag); }

.scoring-rows{ display:flex; flex-direction:column; gap:0; margin-top:14px; max-width:440px; }
.scoring-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); }
.scoring-row-label{ font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); }
.scoring-row-label.is-dim{ color:var(--ink-dim); }
.scoring-row-label.is-hm{ color:var(--pen); }
.scoring-row-points{ font-size:13px; font-weight:600; color:var(--ink); }
.scoring-row-points.is-dim{ color:var(--ink-dim); }
.scoring-row-points.is-hm{ color:var(--pen); }
.explainer-footnote{ font-family:'Inter',sans-serif; font-size:13px; line-height:1.6; color:var(--ink-dim); max-width:520px; margin-top:16px; }

/* ---------- aggregation ---------- */
.agg-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:32px; max-width:640px; }
.agg-header{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
/* Standalone icon use (not inside a colored .team-chip bar like the hero
   card/share thumb), so it carries its own small primary-color swatch
   behind the badge — same "primary bar, ink-colored badge on top" pairing
   the real ranking rows use, just at icon scale. */
.agg-header .crest{ width:44px; height:32px; background:#E31837; border-radius:6px; padding:4px; }
.agg-header .crest svg{ display:block; width:100%; height:100%; }
.agg-header-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; color:var(--ink); }
.agg-rows{ display:flex; flex-direction:column; }
.agg-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line); }
.agg-row-label{ font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); }
.agg-row-label.is-dim{ color:var(--ink-dim); }
.agg-row-label.is-hm{ color:var(--pen); }
.agg-row-points{ font-size:13px; font-weight:600; color:var(--ink); }
.agg-row-points.is-dim{ color:var(--ink-dim); }
.agg-row-points.is-hm{ color:var(--pen); }
.agg-total{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 0; border-top:1px solid var(--line); margin-top:4px; }
.agg-total-label{ font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; color:var(--ink); text-transform:uppercase; letter-spacing:0.02em; }
.agg-total-value{ font-size:16px; font-weight:600; color:#f5f7ff; background:var(--flag); border-radius:6px; padding:5px 11px; }

/* ---------- shareable results ---------- */
.share-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:44px; display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.share-copy{ flex:1 1 380px; min-width:280px; }
.share-heading{ font-size:26px; font-weight:600; color:var(--ink); margin-bottom:14px; }
.share-text{ font-family:'Inter',sans-serif; font-size:15px; line-height:1.7; color:var(--ink-dim); max-width:460px; }

.share-thumb-wrap{ flex:0 0 auto; }
.share-thumb{ width:250px; height:312px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:22px 18px 16px; display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:0 20px 50px -18px rgba(0,0,0,0.7); }
.share-thumb-tri-a{ position:absolute; top:-40px; right:-70px; width:220px; height:220px; background:rgba(237,238,240,0.035); transform:rotate(28deg); clip-path:polygon(50% 0%, 100% 100%, 0% 100%); }
.share-thumb-tri-b{ position:absolute; bottom:-60px; left:-60px; width:180px; height:180px; background:rgba(91,135,201,0.06); transform:rotate(-18deg); clip-path:polygon(50% 0%, 100% 100%, 0% 100%); }
.share-thumb-head{ position:relative; text-align:center; margin-bottom:14px; }
.share-thumb-eyebrow{ font-size:9px; font-weight:700; letter-spacing:0.1em; color:var(--flag-bright); margin-bottom:3px; }
.share-thumb-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; color:var(--ink); letter-spacing:0.01em; }
.share-thumb-rows{ position:relative; display:flex; flex-direction:column; gap:5px; }
.share-row{ display:flex; align-items:center; gap:7px; }
.share-row-index{ width:12px; font-size:11px; font-weight:700; color:var(--ink); text-align:right; }
.share-chip{ flex:1; border-radius:5px; padding:4px 8px; display:flex; align-items:center; gap:6px; }
.share-team-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:9px; color:currentColor; text-transform:uppercase; }
.share-thumb-footer{ position:relative; margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:center; gap:5px; }
.share-thumb-footer span{ font-size:6.5px; letter-spacing:0.06em; color:var(--ink-dim); }
.share-thumb-footer img{ height:9px; width:auto; opacity:0.9; }

/* ---------- footer CTA ---------- */
.footer{ max-width:820px; margin:130px auto 0; padding:0 32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.footer-heading{ font-size:34px; font-weight:600; color:var(--ink); }
.footer-text{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; color:var(--ink-dim); max-width:460px; }
.kofi-block{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; }
.kofi-text{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; color:var(--ink-dim); max-width:360px; }
.kofi-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.footer-brand{ margin-top:32px; padding-top:24px; border-top:1px solid var(--line); width:100%; display:flex; align-items:center; justify-content:center; gap:10px; }
.footer-brand img{ height:16px; width:auto; opacity:0.7; }
.footer-brand span{ font-size:11px; color:var(--ink-dim); }

/* Ko-fi support line for pages that don't already have their own kofi-block
   (added 2026-09-09 for /browse-boards, which had no Ko-fi mention at all).
   /welcome doesn't use this — its own .kofi-block above already covers it,
   with its own button, so repeating the mention here would be redundant. */
.footer-support{
  margin-top:10px; text-align:center; max-width:640px; margin-left:auto; margin-right:auto;
  font-family:'IBM Plex Mono',monospace; font-size:10px; line-height:1.5;
  color:var(--ink-dim); opacity:0.65;
}
.footer-support a{ color:var(--flag-bright); text-decoration:underline; }
.footer-support a:hover{ color:var(--flag-hover); }

/* Trademark disclaimer — same legal notice as style.css's .league-disclaimer
   (real team crests/colors for multiple leagues, not affiliated with any of
   them), just centered to match this page's own .footer-brand above it
   rather than style.css's left-aligned flex-row version. Added 2026-09-09
   to both /welcome and /browse-boards, which previously had no disclaimer
   at all — only the app shell (index.html) did. */
.footer-disclaimer{
  margin-top:10px; text-align:center; max-width:640px; margin-left:auto; margin-right:auto;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; line-height:1.5;
  color:var(--ink-dim); opacity:0.5;
}

/* ---------- section spacing ---------- */
.mt-hero-next{ margin-top:130px; }
.mt-section{ margin-top:120px; }

@media (max-width: 720px){
  .hero-row{ flex-direction:column; }
  .three-up{ grid-template-columns:1fr !important; }
}