:root{
    --red:#e53935; --red-dark:#c62828; --black:#000; --panel:#111; --panel2:#1a1a1a;
    --border:#222; --border2:#333; --muted:#aaa; --dim:#555; --green:#00c853;
  }
  /* Kentucky Wildcats campaign theme: blue/black instead of the site-wide red accent.
     Scoped to body.theme-blue, toggled by applyTheme() in render() for any route
     resolved to the kentucky-wildcats campaign — every page within that campaign
     inherits it automatically since every accent color in this file runs through
     var(--red)/var(--red-dark), plus the few hardcoded rgba(229,57,53,*) instances
     overridden explicitly below. */
  body.theme-blue{ --red:#1d4ed8; --red-dark:#1e40af; }
  /* Per-campaign team colours: new variables -- --team-accent/--team-accent-dark/
     --team-accent-text (and, for a campaign with a second colour, --team-accent-2-text),
     deliberately neither --red/--red-dark (generalising those would also repaint the Kentucky
     block just above, which this feature is not meant to touch) nor the bare --accent already
     used a few hundred lines down by some join-flow validation styling (.jp-warn, .input-bad and
     friends) -- an unrelated, pre-existing variable this file never actually defines anywhere, so
     reusing its name here would have switched those warning colours over to a team's own colour
     by accident. applyTheme() in public/index.html sets these as inline styles on :root, and ONLY
     while a club/semi-pro campaign with its own colour is the page on screen (every other route
     clears them) -- so the selectors below that read var(--team-accent, var(--red)) /
     var(--team-accent-text, var(--red)) pick it up there and fall straight back to the site's
     normal red everywhere else, including every other existing campaign, which never has these
     variables set at all.

     Two of the three primary variables, not one, because a team's real colour plays two different
     roles here and a single adjusted value can't serve both -- see services/color.js's own
     comment on ensureSafeAccent() for the full reasoning. --team-accent/--team-accent-dark are
     the FILL variant (a button's background, the progress bar, a border) and only ever darken a
     colour that started out too light. --team-accent-text is the separately-lightened TEXT
     variant (a stat number, a label, a link) -- without it, a club's real navy would either look
     washed out as a button or be unreadable as a stat number, because the same value was being
     forced to do both jobs.

     .nav-logo (the "ROSTER" half of the wordmark) and .nav-logo span (the "WALLET" half), right
     below, read --team-wordmark-roster/--team-wordmark-wallet -- a THIRD pair, set only when a
     campaign has BOTH a primary and a second colour (applyTheme()'s own signal that a club wants
     its full two-tone branding, header included, not just an accent on its own page). Every
     campaign that has only ever set one colour, or none, falls straight back to white/red here --
     the wordmark staying the site's own colours remains the default for everyone except a club
     that explicitly asked for both.

     --team-wordmark-o is a fourth, narrower one: a single letter inside "ROSTER" (.nav-logo-o,
     just the "O") picked out in a campaign's own secondary colour -- opt-in on top of the pair
     above, not implied by them, so a club with both colours set still gets a plain white "ROSTER"
     unless it also turns this on. See db/index.js's own comment on
     campaigns.theme_wordmark_accent_letter. */
  body.theme-blue .pill.red{ background:rgba(29,78,216,.15); border-color:rgba(29,78,216,.4); }
  body.theme-blue .price-card.hi{ background:linear-gradient(180deg,#0a1230,#111); }
  body.theme-blue .pb-col.hi{ background:linear-gradient(180deg,#0a1230,#1a1a1a); }
  body.theme-blue .hero2-grid{ background-image:linear-gradient(rgba(29,78,216,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(29,78,216,.08) 1px,transparent 1px); }
  body.theme-blue .calc-savings2{ background:rgba(29,78,216,.08); border-color:rgba(29,78,216,.3); }
  body.theme-blue .card[style*="160707"]{ background:linear-gradient(180deg,#0a1230,#111) !important; }

  /* Per-campaign page-background theme -- see db/index.js's own comment on campaigns.bg_theme and
     public/index.html's applyTheme(), which toggles these two classes and sets --bg-grad-start/
     --bg-grad-end as inline styles on :root, same mechanism as --team-accent just above. Neither
     class applies for 'black' (the default) or on any non-campaign route, so this is a no-op for
     every campaign that has never set bg_theme -- the plain html,body{background:var(--black)}
     rule a few lines up still wins for all of them, completely unchanged.

     Gradient deliberately touches ONLY the page background, nothing else: every card, player card,
     the donation grid and the sticky Donate bar are already dark panels (var(--panel)/var(--panel2),
     both near-black) with light text, and a dark panel reads exactly as well sitting on a dark blue
     wash as it does on flat black -- so none of them need their own override here, and nothing about
     the surrounding black-background site changes for any other campaign. */
  body.bg-theme-gradient{ background:linear-gradient(180deg, var(--bg-grad-start,#0b1220) 0%, var(--bg-grad-end,#000) 100%); }
  /* .hero (the public campaign page's own top banner) is the one element between here and the page
     body that paints its own flat var(--panel) fill rather than leaving the body's background to
     show through -- left solid, it would show as a flat near-black band at the very top with a hard
     seam where the gradient starts just below it. Transparent here lets the same gradient run
     underneath it uninterrupted, border-bottom kept as the one subtle seam that's actually meant to
     be there (the same divider every other campaign already has, just var(--border) now resolving
     against a dark blue wash instead of flat black). */
  body.bg-theme-gradient .hero{ background:transparent; }

  /* Light flips the page the other way: an off-white background with dark text, so every token the
     rest of this file already reads through (var(--black)/var(--panel)/var(--panel2)/var(--border)/
     var(--border2)/var(--muted)/var(--dim)) just resolves to a light-mode value instead -- the same
     "redefine the variable, not every selector that uses it" approach body.theme-blue already uses
     for --red above. The few spots in this file that hardcode white text rather than reading a
     variable (because on the plain black theme that is always correct) are patched individually
     right below, scoped to body.bg-theme-light so no other campaign's CSS changes at all. */
  body.bg-theme-light{
    --black:#f5f3ef; --panel:#ffffff; --panel2:#f0eee9;
    --border:#e2ddd4; --border2:#d3cdc1; --muted:#6b6b66; --dim:#8f8c84;
  }
  body.bg-theme-light{ color:#17171a; }
  body.bg-theme-light .activity-text{ color:#4a4a46; }
  body.bg-theme-light .activity-text strong{ color:#17171a; }
  body.bg-theme-light .donate-btn{ color:#17171a; }
  body.bg-theme-light .btn-outline{ color:#17171a; }
  body.bg-theme-light .input, body.bg-theme-light textarea.input, body.bg-theme-light select.input{ color:#17171a; }
  body.bg-theme-light .progress-bar{ background:#e2ddd4; }
  body.bg-theme-light ::placeholder{ color:#8f8c84; }

  * { margin:0; padding:0; box-sizing:border-box; }
  html,body{ background:var(--black); }
  /* Safety net, not the fix -- the actual overflow causes (a grid/flex item refusing to shrink
     below its content's width, an oversized element) are fixed at their own source throughout this
     file. This just guarantees a future one can never add a sideways scrollbar to the whole page. */
  html,body{ overflow-x:hidden; }
  body { background: var(--black); color: #fff; font-family: 'Arial Black', Arial, sans-serif; min-height:100vh; }
  a { text-decoration: none; color: inherit; }
  button, input, select, textarea{ font-family:inherit; }
  ::placeholder{ color:#666; }

  /* min-height, not height: with flex-wrap a hard height lets the second row
     of links spill out of the nav and over the page. */
  nav { background: rgba(0,0,0,.9); backdrop-filter: blur(10px); border-bottom: 2px solid var(--team-accent, var(--red)); padding: 0 40px; display: flex; align-items: center; justify-content: space-between; min-height: 64px; position: fixed; top:0; left:0; right:0; z-index: 100; flex-wrap:wrap; }
  /* The space kept clear beneath the fixed nav. 64px is only correct while
     the nav is a single row; on a phone it is a three-row column and was
     covering the top 136px of every page. syncNavHeight() measures the real
     thing and sets --nav-h; the fallback is the old value, so the page is
     still readable if that never runs. */
  body{ padding-top: var(--nav-h, 64px); }
  .nav-logo { font-size: 22px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; cursor:pointer; color: var(--team-wordmark-roster, #fff); }
  .nav-logo span { color: var(--team-wordmark-wallet, var(--red)); }
  /* The single "O" in "ROSTER" -- see db/index.js's own comment on campaigns.theme_wordmark_accent_letter.
     var(--team-wordmark-o, inherit) means every campaign that hasn't turned this on gets `inherit`,
     i.e. the exact same colour as the rest of "ROSTER" right above (--team-wordmark-roster, or
     plain white) -- a no-op, not a second thing to keep in sync with the first. */
  /* .nav-logo .nav-logo-o, not the bare class -- .nav-logo-o is still a <span>, so the existing
     .nav-logo span rule just above (specificity 0,1,1) would otherwise beat a bare .nav-logo-o
     (0,1,0) and win regardless of source order, silently falling back to --team-wordmark-wallet's
     own red instead of inherit. This compound selector (0,2,0) clears that. */
  .nav-logo .nav-logo-o { color: var(--team-wordmark-o, inherit); }
  .nav-links { display: flex; gap: 28px; flex-wrap:wrap; }
  .nav-links a { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #aaa; transition: color 0.2s; cursor:pointer; padding:8px 0;}
  .nav-links a:hover, .nav-links a.active { color: var(--team-accent-text, var(--red)); }
  .nav-dropdown{ position:relative; }
  .nav-dropdown-toggle{ display:inline-flex; align-items:center; gap:4px; }
  .nav-dropdown-caret{ font-size:9px; transition:transform .15s; }
  .nav-dropdown.open .nav-dropdown-caret{ transform:rotate(180deg); }
  /* Fixed, not absolute: on a phone .nav-links scrolls its own strip
     (overflow-x:auto below), which clips an absolutely-positioned child at
     the strip's own edge instead of the viewport's. Fixed positioning
     escapes that, at the cost of needing its coordinates set from
     toggleNavDropdown() rather than from CSS. */
  .nav-dropdown-menu{ display:none; flex-direction:column; gap:2px; position:fixed; min-width:170px; background:var(--panel); border:1px solid var(--border2); border-radius:4px; padding:6px; box-shadow:0 12px 28px rgba(0,0,0,.5); z-index:150; }
  .nav-dropdown.open .nav-dropdown-menu{ display:flex; }
  .nav-dropdown-menu a{ padding:10px 12px !important; border-radius:4px; white-space:nowrap; }
  .nav-dropdown-menu a:hover{ background:var(--panel2); }
  .nav-user { background: var(--red); color: #fff; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; letter-spacing: 1px; flex-shrink:0; }
  .nav-right{ display:flex; align-items:center; gap:16px; }
  .live-badge{ display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:2px; color:var(--green); font-weight:700; }
  .live-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

  .wrap{ max-width:1200px; margin:0 auto; padding:40px; }
  .card { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 28px; margin-bottom: 24px; }
  .section-title { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; border-left: 3px solid var(--team-accent, var(--red)); padding-left: 12px; }
  .section-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--team-accent-text, var(--red)); margin-bottom: 16px; }
  .btn{ display:inline-block; background:var(--team-accent, var(--red)); color:var(--team-btn-text, #fff); border:none; padding:14px 22px; font-size:12px; font-weight:900; letter-spacing:3px; text-transform:uppercase; cursor:pointer; border-radius:4px; transition:background .2s; text-align:center; }
  .btn:hover{ background:var(--team-accent-dark, var(--red-dark)); }
  .btn-outline{ background:var(--panel2); border:1px solid var(--border2); color:#fff; }
  .btn-outline:hover{ border-color:var(--team-accent, var(--red)); color:var(--team-accent-text, var(--red)); background:var(--panel2); }
  .btn-sm{ padding:8px 14px; font-size:10px; letter-spacing:2px; }
  .input, textarea.input, select.input{ width:100%; background:var(--panel2); border:1px solid var(--border2); color:#fff; padding:12px 14px; font-size:13px; border-radius:4px; outline:none; font-family:Arial, sans-serif; font-weight:400; }
  .input:focus{ border-color:var(--red); }
  /* Shown under a donate form's name field only when submitted with no name and "anonymous" isn't
     checked (see submitDonation/mqdSubmit). Hidden by default in markup; toggled via JS, never CSS. */
  .donor-field-error{ color:#e06c62; font-size:11px; font-family:Arial,sans-serif; margin:0 0 10px 2px; }
  label.field-label{ display:block; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; margin-top:14px; }
  label.field-label:first-child{ margin-top:0; }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .toast { position: fixed; bottom: 30px; right: 30px; background: var(--red); color: #fff; padding: 14px 24px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: 4px; opacity: 0; transform: translateY(20px); transition: all 0.3s; z-index: 999; pointer-events: none; max-width:320px; }
  .toast.show { opacity: 1; transform: translateY(0); }
  .pill{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }
  .pill.red{ background:rgba(229,57,53,.15); color:var(--red); border:1px solid rgba(229,57,53,.4); }
  .pill.green{ background:rgba(0,200,83,.15); color:var(--team-accent-text, var(--green)); border:1px solid var(--team-accent, rgba(0,200,83,.4)); }
  .pill.gray{ background:var(--panel2); color:var(--muted); border:1px solid var(--border2); }
  .empty{ color:var(--dim); font-size:12px; font-family:Arial,sans-serif; padding:20px 0; text-align:center; letter-spacing:1px; }
  #app{ min-height:70vh; }
  .foot{ text-align:center; padding:40px; color:var(--dim); font-size:10px; letter-spacing:2px; }

  /* HERO (landing) */
  .lhero{ background:radial-gradient(circle at 50% 0%, #1a0505 0%, #000 60%); border-bottom:1px solid var(--border); padding:100px 40px 80px; text-align:center; }
  .lhero .tag{ font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--red); margin-bottom:20px; }
  .lhero h1{ font-size:56px; font-weight:900; text-transform:uppercase; letter-spacing:2px; line-height:1.05; margin-bottom:20px; }
  .lhero h1 span{ color:var(--red); }
  .lhero p{ color:var(--muted); font-size:15px; max-width:560px; margin:0 auto 36px; font-family:Arial,sans-serif; line-height:1.6; letter-spacing:.3px; }
  .lhero .cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .stat-strip{ display:flex; justify-content:center; gap:70px; margin-top:60px; flex-wrap:wrap; }
  .stat-strip .val{ font-size:32px; font-weight:900; color:var(--red); }
  .stat-strip .lbl{ font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-top:4px; }

  .feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  /* The /golf landing page's four feature blocks specifically -- a dedicated class rather than
     reusing .feat-grid's own 3-column layout, which would leave four items an uneven 3-then-1. Its
     own @media rule (not an inline style) is what lets it still collapse to one column on a phone --
     an inline grid-template-columns would out-specificity any later media query and defeat that. */
  .golf-feat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .golf-feat-grid > *{ min-width:0; }
  @media(max-width:600px){ .golf-feat-grid{ grid-template-columns:1fr; } }
  .feat{ background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:26px; }
  .feat .ico{ font-size:26px; margin-bottom:14px; }
  .feat h3{ font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
  .feat p{ color:var(--muted); font-size:12px; font-family:Arial,sans-serif; line-height:1.6; }

  .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .price-card{ background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:32px 26px; display:flex; flex-direction:column; }
  .price-card.hi{ border-color:var(--red); background:linear-gradient(180deg,#160707,#111); position:relative; }
  .price-card.hi:before{ content:'MOST POPULAR'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--red); font-size:9px; font-weight:900; letter-spacing:2px; padding:4px 12px; border-radius:20px; }
  .price-name{ font-size:14px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:10px; }
  .price-amt{ font-size:38px; font-weight:900; margin-bottom:2px; }
  .price-amt span{ font-size:13px; color:var(--muted); font-weight:700; }
  .price-fee{ font-size:11px; color:var(--red); font-weight:700; letter-spacing:1px; margin-bottom:20px; }
  .price-list{ list-style:none; font-size:12px; color:#ddd; font-family:Arial,sans-serif; line-height:2.1; margin-bottom:24px; flex:1; }
  .price-list li:before{ content:'✓ '; color:var(--green); font-weight:900; }
  .price-grid-2{ grid-template-columns:1fr 1fr; max-width:820px; margin:0 auto; }
  .price-amt span{ display:inline-block; margin-left:4px; }

  .pricing-breakdown{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; }
  .pb-col{ background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:22px; }
  .pb-col.hi{ border-color:var(--red); background:linear-gradient(180deg,#160707,#1a1a1a); }
  .pb-head{ font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); }
  .pb-row{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:8px; font-family:Arial,sans-serif; color:#ddd; }
  .pb-row .l{ color:var(--muted); }
  .pb-total{ display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-weight:900; font-size:18px; }

  .product-strip-wrap{ margin-top:56px; padding-top:40px; border-top:1px solid var(--border); }
  .product-strip{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
  .product-chip{ background:var(--panel2); border:1px solid var(--border2); border-radius:20px; padding:9px 18px; font-size:12px; font-weight:700; color:#ddd; }
  /* Not yet orderable, and it has to look it — a chip that reads as available
     is a promise the store cannot keep. Dimmed rather than hidden, because
     "what else is coming" is a fair question for a club choosing a platform. */
  .product-chip-soon{ background:transparent; border-style:dashed; color:var(--dim); font-weight:400; }
  .strip-label{ text-align:center; font-size:10px; letter-spacing:1.6px; text-transform:uppercase;
                color:var(--muted); font-family:Arial,sans-serif; margin:0 0 10px; }
  .strip-label-soon{ color:var(--dim); margin-top:18px; }
  .pricing-breakdown.two{ grid-template-columns:repeat(2,1fr); }
  @media(max-width:900px){ .price-grid-2{ grid-template-columns:1fr; } .pricing-breakdown,.pricing-breakdown.two{ grid-template-columns:1fr; } }

  .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .how-step { text-align: center; padding: 20px; }
  .how-num { width: 48px; height: 48px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; margin: 0 auto 16px; }
  .how-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
  .how-desc { font-size: 12px; color: var(--muted); line-height: 1.6; font-family:Arial,sans-serif;}

  /* The optional "Follow live -> Leaderboard" strip (golfPublicHtml, shown only when a golfer has
     set golf_profiles.leaderboard_url) -- sits flush above .hero, a slim full-width bar rather
     than a card, so it reads as a live status strip, not another section. */
  .golf-leaderboard-banner{ display:block; background:var(--red); color:#fff; text-align:center; padding:10px 16px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; text-decoration:none; font-family:Arial,sans-serif; }
  .golf-leaderboard-banner:hover{ background:var(--red-dark); }

  /* campaign page */
  .hero { background: var(--panel); border-bottom: 1px solid var(--border); padding: 60px 40px; text-align: center; }
  .hero-label { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--team-accent-2-text, var(--red)); margin-bottom: 16px; }
  .campaign-logo{ width:96px; height:96px; object-fit:contain; border-radius:8px; background:#fff; padding:6px; margin-bottom:16px; display:block; border:2px solid var(--team-accent, var(--red)); }
  .hero h1 { font-size: 44px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 12px; }
  /* The campaign page's h1 is now the team name (Bing wanted a real campaign/athlete name as the
     page's H1 -- see pageCampaign's own comment), reusing .hero-label's exact look: .hero
     h1.hero-label (two classes) outranks the plain .hero h1 rule above on specificity, so this
     doesn't inherit the big "Fund the roster"-style sizing meant for a bare <h1>. Golf, semipro and
     a multi-team roster's own hero all keep a plain <h1> with no hero-label class, so none of them
     are touched by this. */
  .hero h1.hero-label{ font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--team-accent-2-text, var(--red)); margin-bottom: 16px; }
  /* ...and the campaign's own headline moves to a div carrying the exact size/weight/spacing the
     old <h1> had -- see body.on-campaign-page's override of this same class further down, which
     used to override .hero h1 on this one page instead. */
  .hero .hero-campaign-title{ font-size: 44px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 12px; }
  .hero .sub { color: var(--muted); font-size: 14px; letter-spacing: 1px; margin-bottom: 40px; font-family:Arial,sans-serif; }
  .hero-stats { display: flex; justify-content: center; gap: 60px; margin-bottom: 40px; flex-wrap:wrap; }
  /* A shortcut straight to the donate card, shown only on a narrow (mobile) screen -- on desktop the
     card is already visible without scrolling, so the button would just be a second way to do
     something already in view. Hidden by default, shown at the same 700px breakpoint the rest of
     this file already treats as "mobile". The compound .hero-mobile-donate.btn selector (rather
     than .hero-mobile-donate alone) is deliberate: the 900px touch-target rule further down this
     stylesheet forces EVERY .btn to display:inline-flex below 900px, at equal specificity to a
     bare .hero-mobile-donate rule, so a single-class selector here would lose that fight below
     900px and the button would wrongly show between 701-900px. Two classes outranks one. */
  .hero-mobile-donate.btn{ display:none; }
  @media(max-width:700px){ .hero-mobile-donate.btn{ display:inline-block; margin-bottom:28px; } }
  /* The golf journey page's own hero Donate button -- the exact opposite visibility of
     .hero-mobile-donate just above, now that golfPublicHtml has its own sticky .mobile-donate-bar
     (see pageCampaign's own copy of that component): shown on desktop, where there is no sticky bar
     to use instead, hidden under the same 700px breakpoint once the sticky bar takes over, so a
     phone never shows two Donate buttons for the same page at once. Compound .golf-hero-donate.btn
     selector for the same reason .hero-mobile-donate.btn is one, not a bare class -- see that
     rule's own comment on the 900px touch-target rule further down this file. */
  .golf-hero-donate.btn{ display:inline-block; margin-bottom:28px; }
  @media(max-width:700px){ .golf-hero-donate.btn{ display:none; } }
  .hero-stat .val { font-size: 36px; font-weight: 900; color: var(--team-accent-text, var(--red)); }
  .hero-stat .lbl { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

  /* A real Donate call-to-action directly under the stats, on every screen size -- the HTML this
     styles is unconditional (pageCampaign), unlike the shortcut row above which only ever shows for
     a campaign that opted into mobileQuickActions. Coffee sits below it, smaller and secondary,
     only rendered at all when the campaign actually has coffee to sell. */
  .hero-cta-row{ display:flex; flex-direction:column; gap:10px; max-width:360px; margin:0 auto 32px; }
  .hero-cta-coffee{ font-size:11px; padding:9px 14px; letter-spacing:2px; }

  /* The optional About-section photo/video gallery (public/index.html's galleryHtml) -- see
     db/index.js's own comment on campaign_media. Three across on desktop/tablet, the same
     max-width:700px breakpoint the rest of this page's own mobile treatment already uses (not the
     sitewide 900px/600px .feat-grid breakpoints a couple of rules up this file -- this is scoped
     to its own classes specifically so it can never touch that shared grid or any other page that
     uses it). A video always spans every column in the row (grid-column:1/-1), full width on
     either size, same as the spec asks for either way. Borders and captions read the campaign's
     own --team-accent/--team-accent-text custom properties (set once per page by applyTheme, see
     that function's own comment), falling back to the site default red/grey the same way every
     other themed element on this page already does -- Oregon's green/yellow gallery borders need
     no code here beyond that fallback already existing. */
  .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
  @media(max-width:700px){ .gallery-grid{ grid-template-columns:1fr 1fr; gap:8px; } }
  .gallery-item{ border-radius:6px; overflow:hidden; border:1px solid var(--team-accent, var(--border)); background:var(--panel2); }
  .gallery-photo{ cursor:pointer; }
  .gallery-photo img{ width:100%; height:140px; object-fit:cover; display:block; }
  .gallery-video{ grid-column:1 / -1; }
  .gallery-video-thumb{ position:relative; width:100%; aspect-ratio:16/9; background:#000; cursor:pointer; }
  .gallery-video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gallery-video-thumb iframe{ width:100%; height:100%; display:block; border:none; }
  .gallery-play-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:20px; pointer-events:none; }
  .gallery-video-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    color:var(--team-accent-text, var(--muted)); font-weight:700; letter-spacing:1px; font-size:12px; }
  .gallery-caption{ padding:6px 8px; font-size:11px; color:var(--team-accent-text, var(--muted));
    font-family:Arial,sans-serif; line-height:1.4; }

  /* Full-screen photo lightbox (public/index.html's openLightbox/renderLightbox) -- not scoped to
     --team-accent on purpose: a dark overlay over the whole screen reads the same regardless of
     which campaign it belongs to, the one place on this page that deliberately doesn't themed. */
  .lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:1000;
    display:flex; align-items:center; justify-content:center; flex-direction:column; padding:16px; }
  .lightbox-img{ max-width:92vw; max-height:80vh; object-fit:contain; }
  .lightbox-close{ position:absolute; top:16px; right:16px; background:none; border:none; color:#fff;
    font-size:34px; line-height:1; cursor:pointer; z-index:1001; }
  .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
    border:none; color:#fff; font-size:30px; line-height:1; width:46px; height:46px; border-radius:50%; cursor:pointer; }
  .lightbox-prev{ left:12px; }
  .lightbox-next{ right:12px; }
  .lightbox-caption{ color:#fff; font-family:Arial,sans-serif; font-size:13px; margin-top:14px; text-align:center; max-width:80vw; }

  /* The campaign page's own header: crest, then the team name once (no more "org · team"), then the
     title at roughly half its old size so a long one still fits on 1-2 lines on a phone. Scoped to
     on-campaign-page and not to the bare .hero/.campaign-logo/.hero-label rules, which golf, semipro
     and a multi-team roster's own hero also use -- those stay exactly as they were. Deliberately not
     inside a @media block: unlike the rest of this page's mobile-only compaction further below, this
     particular restyle was asked for at every width, not just a phone's. */
  body.on-campaign-page .campaign-logo{ width:80px; height:80px; margin:0 auto 16px; }
  body.on-campaign-page .hero .hero-campaign-title{ font-size:22px; letter-spacing:1px; }

  /* The fixed bar that follows a phone down the page -- see pageCampaign's own trailing
     .mobile-donate-bar element, and golfPublicHtml's own copy of it. Hidden above 700px: on a wider
     screen the in-hero Donate button just above is already on screen without scrolling, so a
     second, permanently-docked copy would only ever be covering content instead of saving a
     scroll. body.on-campaign-page/on-golf-page's own padding-bottom (below) keeps the bar from
     ever sitting over the page's last real content or the footer once someone scrolls all the way
     down. */
  .mobile-donate-bar{ display:none; }
  @media(max-width:700px){
    .mobile-donate-bar{
      display:block; position:fixed; left:0; right:0; bottom:0; z-index:40;
      background:var(--panel); border-top:1px solid var(--border);
      padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-donate-bar .btn{ width:100%; }
    body.on-campaign-page, body.on-golf-page{ padding-bottom:76px; }
  }
  /* stickyDonateOnScroll (see db/index.js's own comment) adds this class alongside the plain
     .mobile-donate-bar above -- same fixed bar, same always-on-mobile display:block from the rule
     above, but it starts hidden/slid off the bottom edge until initCampaignPage's own
     IntersectionObserver adds .visible once the hero's own #heroDonateBtn scrolls out of view, and
     removes .visible again when that button scrolls back into view. Only opacity/transform animate
     here, never display, so the bar is always present (and always measurable) for the observer; the
     plain bar above is completely untouched, so every campaign without this flag keeps the exact
     always-visible-once-on-mobile behaviour it has today. */
  .mobile-donate-bar-scroll{ opacity:0; transform:translateY(100%); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
  .mobile-donate-bar-scroll.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }

  /* Mobile-only compaction for the public campaign page specifically (see render()'s own
     on-campaign-page toggle) -- a shorter title, a tighter "why we're raising" line, a smaller
     crest, stats guaranteed onto one row instead of wrapping, and a nav that steps back out of the
     way of the Donate buttons now doing the actual work on this page. Nothing here touches any
     other route: a dashboard, store, or admin page keeps its existing sizing untouched. */
  @media(max-width:700px){
    body.on-campaign-page .hero{ padding:32px 20px; }
    body.on-campaign-page .hero .hero-campaign-title{ margin-bottom:8px; }
    body.on-campaign-page .hero .sub{ font-size:12.5px; margin-bottom:18px; }
    body.on-campaign-page .hero-stats{
      display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
      max-width:360px; margin:0 auto 20px;
    }
    body.on-campaign-page .hero-stat .val{ font-size:19px; }
    body.on-campaign-page .hero-stat .lbl{ font-size:8px; letter-spacing:1.5px; }
    body.on-campaign-page .nav-right .btn-sm{ padding:5px 8px; font-size:9px; letter-spacing:1px; }
  }
  .hero-progress { max-width: 600px; margin: 0 auto; }
  .hero-flank-row{ display:flex; align-items:flex-start; justify-content:center; gap:24px; max-width:1080px; margin:0 auto; flex-wrap:wrap; }
  .hero-flank-row .hero-progress{ flex:1 1 320px; max-width:460px; margin-top:16px; }
  .hero-mini-card{ flex:1 1 220px; max-width:250px; background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:14px 16px; text-align:left; }
  .hero-mini-title{ font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--team-accent-text, var(--red)); margin-bottom:10px; }
  .hero-mini-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; padding:6px 0; border-bottom:1px solid var(--border); }
  .hero-mini-row:last-child{ border-bottom:none; }
  .hero-mini-opp{ font-weight:700; line-height:1.3; }
  .hero-mini-date{ color:var(--muted); font-size:9px; letter-spacing:.5px; text-transform:uppercase; }
  .hero-mini-exp-row{ padding:5px 0; }
  .hero-mini-exp-top{ display:flex; justify-content:space-between; font-size:10.5px; margin-bottom:3px; }
  .hero-mini-exp-top .amt{ color:var(--team-accent-text, var(--red)); font-weight:700; }
  .hero-mini-bar{ height:4px; background:#222; border-radius:2px; overflow:hidden; }
  .hero-mini-bar-fill{ height:100%; background:var(--team-accent, var(--red)); border-radius:2px; }
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* AI Coach. Mobile-first: each prompt is a block that reads top to bottom,
     because it is read on a phone between other things. */
  /* The line under the donate button pointing at the roster. */
  .donate-to-player{ font-size:12px; line-height:1.7; color:var(--muted); font-family:Arial,sans-serif;
                     margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
  .donate-to-player a{ color:var(--team-accent-text, var(--red)); font-weight:700; cursor:pointer; }

  /* The worked-examples list on the home page. Mobile-first: each row reads
     top to bottom with the arrow tucked to the side. */
  .ex-list{ display:flex; flex-direction:column; gap:10px; }
  .ex-row{ display:flex; gap:14px; align-items:center; justify-content:space-between;
           border:1px solid var(--border2); border-left:3px solid var(--red); border-radius:6px;
           padding:14px; background:var(--panel2); cursor:pointer; }
  .ex-row:hover{ border-color:var(--red); }
  .ex-what{ font-size:13px; font-weight:900; letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
  .ex-detail{ font-size:12px; line-height:1.65; color:var(--muted); font-family:Arial,sans-serif; }
  .ex-meta{ font-size:11px; color:var(--dim); font-family:Arial,sans-serif; margin-top:7px; }
  .ex-go{ font-size:20px; color:var(--red); flex:none; }

  /* Club coffee shop. Mobile-first: the calculator inputs stack, the KPI grid
     drops to one column, and the queue rows read top to bottom. */
  /* The Supporter Jackpot. Mobile first: one prize a row on a phone, two from
     560px, three from 860px. A club setting this up is as likely to be on a
     phone at a training session as at a desk. */
  .jp-card{ margin-top:18px; }
  .jp-card-quiet{ opacity:.75; }
  .jp-blurb{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif;
             line-height:1.7; margin:8px 0 16px; }
  .jp-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .jp-actions .btn{ flex:1 1 auto; min-width:150px; }
  .jp-skip-row{ display:flex; align-items:center; justify-content:space-between;
                gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted);
                font-family:Arial,sans-serif; }
  .jp-warn{ font-size:11px; color:var(--accent); font-family:Arial,sans-serif;
            line-height:1.6; margin-top:8px; }
  .input-bad{ border-color:var(--accent); }

  .jp-chosen{ display:flex; gap:14px; align-items:center; margin:6px 0 16px; }
  .jp-chosen-img{ width:76px; height:76px; flex-shrink:0; border-radius:6px;
                  background:var(--bg2); display:flex; align-items:center;
                  justify-content:center; overflow:hidden; }
  .jp-chosen-img img{ width:100%; height:100%; object-fit:contain; }
  .jp-chosen-name{ font-size:13px; font-weight:900; text-transform:uppercase;
                   letter-spacing:.5px; }
  .jp-chosen-cost{ font-size:18px; font-weight:900; margin-top:4px; }
  .jp-chosen-note,
  .jp-tile-note{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; }

  /* An estimate is labelled as one. Every seeded price is a plausible guess
     rather than a supplier quote, and a club budgeting off it deserves to
     know which it is looking at. */
  .jp-est{ font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
           color:var(--muted); border:1px solid var(--border2); border-radius:3px;
           padding:1px 4px; vertical-align:middle; }

  /* .modal-card sets max-width:420px and width:100%, and sits later in this
     stylesheet — at equal specificity it won, so a grid meant to show three
     prizes across was rendering one. Qualified with .modal-card so the
     override actually lands rather than looking like it does. */
  .modal-card.jp-picker{ max-width:900px; }
  .jp-bands{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 18px; }
  .jp-band{ font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
            padding:7px 12px; border-radius:4px; border:1px solid var(--border2);
            background:var(--bg2); color:var(--muted); cursor:pointer; }
  .jp-band.on{ border-color:var(--accent); color:var(--accent); }

  .jp-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
  @media (min-width:560px){ .jp-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width:860px){ .jp-grid{ grid-template-columns:repeat(3,1fr); } }

  .jp-tile{ text-align:left; padding:0; border:1px solid var(--border2);
            border-radius:6px; background:var(--bg2); color:var(--text);
            cursor:pointer; overflow:hidden; display:flex; flex-direction:column; }
  .jp-tile:hover{ border-color:var(--accent); }
  .jp-tile-img{ position:relative; height:150px; background:var(--bg);
                display:flex; align-items:center; justify-content:center;
                border-bottom:1px solid var(--border2); }
  .jp-tile-img img{ width:100%; height:100%; object-fit:contain; }
  .jp-icon{ font-size:44px; }
  /* Said out loud rather than left to look like a broken image. */
  .jp-nophoto{ position:absolute; left:0; right:0; bottom:0; text-align:center;
               font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
               color:var(--muted); background:var(--bg2); padding:4px;
               border-top:1px solid var(--border2); }
  .jp-tile-body{ padding:12px; display:flex; flex-direction:column; gap:5px; }
  .jp-tile-name{ font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
  .jp-tile-cost{ font-size:17px; font-weight:900; }
  .jp-tile-why{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
                line-height:1.6; }
  .jp-tile-meta{ font-size:10px; color:var(--dim); font-family:Arial,sans-serif;
                 border-top:1px solid var(--border2); padding-top:7px; margin-top:2px; }
  .jp-cap{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
           line-height:1.6; margin-top:16px; }

  .jp-preview{ border:1px solid var(--border2); border-radius:6px; padding:16px; }
  .jp-preview-img{ height:200px; display:flex; align-items:center; justify-content:center;
                   background:var(--bg2); border-radius:4px; margin-bottom:14px; }
  .jp-preview-img img{ width:100%; height:100%; object-fit:contain; }
  .jp-preview-name{ font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
  .jp-preview-desc{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif;
                    line-height:1.7; margin:8px 0 14px; }
  .jp-tiers{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
  .jp-tier{ display:flex; justify-content:space-between; font-size:12px;
            font-family:Arial,sans-serif; border:1px solid var(--border2);
            border-radius:4px; padding:9px 12px; }
  /* The free route is given the same visual weight as the paid tiers. It is
     not a footnote — it is what makes this a sweepstakes rather than a
     paid-entry draw. */
  .jp-free{ border-top:1px solid var(--border2); padding-top:14px; }
  .jp-free a{ font-size:13px; font-weight:900; text-transform:uppercase;
              letter-spacing:.5px; color:var(--accent); cursor:pointer; }
  .jp-legal{ font-size:10px; color:var(--muted); font-family:Arial,sans-serif;
             line-height:1.6; margin-top:8px; }

  .jp-sums{ display:flex; flex-direction:column; gap:2px; }
  .jp-sum{ display:flex; justify-content:space-between; font-size:12px;
           font-family:Arial,sans-serif; padding:9px 0;
           border-bottom:1px solid var(--border2); font-variant-numeric:tabular-nums; }
  .jp-sum-total{ font-weight:900; font-size:14px; border-bottom:none; }
  .jp-assume{ font-size:10px; color:var(--muted); font-family:Arial,sans-serif;
              line-height:1.7; margin:12px 0 0; padding-left:16px; }

  /* Premium tier: a branded blank, priced accordingly. Deliberately a quiet
     label rather than a shout — it is information, not a promotion. */
  /* Sits BELOW the category tag, not on top of it. Both top corners of a
     product card are already taken — category on the left, fulfilment on the
     right — and top:10px/left:10px would have put this exactly over the
     first. Same pill shape as its neighbours so it reads as one family of
     labels rather than a sticker. */
  .tier-premium{ position:absolute; top:38px; left:10px; z-index:2; font-size:9px;
                 font-weight:800; letter-spacing:1px; text-transform:uppercase;
                 padding:3px 8px; border-radius:20px;
                 background:var(--text); color:var(--panel); }
  /* Somebody else's brand is on this garment and stays on it. A fact about
     the product, so it sits with the product rather than in a policy page. */
  .cobrand-note{ font-size:10px; color:var(--muted); font-family:Arial,sans-serif;
                 line-height:1.5; padding:8px 14px 0; }

  /* The setup preview: the club's crest laid over Printful's photograph of
     the undecorated garment. Two elements, never flattened into one image and
     never saved — what a supporter buys from is the real mockup. */
  .prev-wrap{ position:relative; width:100%; height:100%; }
  .prev-garment{ width:100%; height:100%; object-fit:contain; }
  /* .product-img2 img{ height:100% } (below) outranks .prev-crest on its own —
     one extra element-type selector beats one class alone — so the wordmark's
     inline width:NN% carried a browser-assigned height:100% of the card
     regardless of the image's real proportions: a landscape wordmark stretched
     into a tall sliver, its actual legible width collapsed to a fraction of
     what top/left/width intended, on top of ending up read as invisible
     against the garment. .prev-wrap img.prev-crest is specific enough to win
     and let object-fit:contain size it by its own aspect ratio instead. */
  .prev-wrap img.prev-crest{ position:absolute; height:auto; transform:translate(-50%,-50%); object-fit:contain; }
  /* Only on a campaign with a background-removed crest (campaign.logoTransparent --
     productImageHtml's own "embroidered" check) -- a flat, non-transparent crest under this filter
     would just look like a drop-shadowed square, which is the opposite of the point. A soft
     light-from-above / shadow-from-below pair reads as a slightly raised, stitched mark sitting on
     the fabric rather than a sticker printed flat on top of it; the small saturate() pull keeps it
     from looking like thread-bright vinyl against a duller garment. */
  .prev-wrap img.prev-crest-embroidered{
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.14)) drop-shadow(0 -1px 1.5px rgba(0,0,0,.5)) saturate(.9);
  }
  /* The flat garment is an unpainted base: white fabric carrying only its own
     shading and folds. Multiplied over the colour it becomes that colour, with
     the shading intact — the same compositing Printful does. The white ground
     behind it keeps the multiply honest where the base is transparent. */
  .prev-tint{ display:block; width:100%; height:100%; background:#fff; }
  .prev-multiply{ mix-blend-mode:multiply; }

  /* The designer. */
  .designer-preview{ position:relative; height:280px; border-radius:6px; overflow:hidden;
                     display:flex; align-items:center; justify-content:center;
                     background:var(--bg2); }
  .designer-preview > img{ width:100%; height:100%; object-fit:contain; }
  /* Roughly where a front print sits. Called "rough placing" on the screen
     because it is: the true position comes back in Printful's mockup, and
     pretending otherwise here would be the old bug in miniature. */
  .designer-overlay{ position:absolute; inset:24% 30% 30% 30%; display:flex;
                     align-items:center; justify-content:center; pointer-events:none; }
  .designer-overlay img{ max-width:100%; max-height:100%; object-fit:contain; }
  .designer-caption{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
                     text-align:center; margin-top:8px; }
  .designer-warn{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
                  line-height:1.6; border:1px solid var(--border2); border-radius:4px;
                  padding:10px 12px; margin-top:10px; }
  .swatch-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .swatch{ width:30px; height:30px; border-radius:50%; border:2px solid var(--border2);
           cursor:pointer; padding:0; }
  .swatch.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
  .font-pick{ font-size:13px; font-weight:700; padding:8px 14px; border-radius:4px;
              border:1px solid var(--border2); background:var(--bg2); color:var(--text);
              cursor:pointer; }
  .font-pick.on{ border-color:var(--accent); color:var(--accent); }
  .dz-chip{ font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
            border:1px solid var(--border2); border-radius:3px; padding:2px 5px;
            color:var(--muted); }
  .dz-chip-bad{ color:var(--accent); border-color:var(--accent); }
  .swatch-dot{ display:inline-block; width:18px; height:18px; border-radius:50%; border:1px solid var(--border2); flex:none; }
  .swatch{ display:inline-block; width:26px; height:26px; border-radius:50%; border:2px solid transparent;
           outline:1px solid var(--border2); outline-offset:1px; cursor:pointer; flex:none; }
  .swatch.selected{ border-color:var(--red); }
  .swatch-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }

  /* Said over a blank product, so nobody reads it as the club's own garment.
     Quiet, because it is a normal few seconds of waiting rather than a
     problem. */
  .img-note{ position:absolute; left:0; right:0; bottom:0; text-align:center;
             font-size:10px; letter-spacing:.5px; text-transform:uppercase;
             font-weight:700; color:var(--muted); background:var(--bg2);
             padding:5px 8px; border-top:1px solid var(--border2); }

  /* An item nobody can make. Deliberately quiet rather than alarming — it is
     a gap in the club's setup, not the supporter's problem. */
  .unavail{ font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
            color:var(--dim); border:1px solid var(--border2); border-radius:4px;
            padding:8px 12px; }
  .unavail-why{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
                line-height:1.6; padding:0 14px 14px; }

  /* Three ways to support. One row each on a phone, which is where a
     supporter opens a team page. */
  .sw3{ display:flex; flex-direction:column; gap:10px; }
  .sw3-item{ display:flex; align-items:center; gap:14px; padding:14px;
             border:1px solid var(--border2); border-left:3px solid var(--team-accent, var(--red));
             border-radius:6px; background:var(--panel2); cursor:pointer; }
  .sw3-item:hover{ border-color:var(--team-accent, var(--red)); }
  .sw3-ic{ font-size:22px; flex:none; }
  .sw3-b{ flex:1; min-width:0; }
  .sw3-t{ font-size:13px; font-weight:900; letter-spacing:.5px; }
  .sw3-s{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
          margin-top:4px; line-height:1.6; }
  .sw3-go{ font-size:19px; color:var(--team-accent-text, var(--red)); flex:none; }

  /* The club record. Mobile-first: rows stack, the pack reads as a document
     at 375px, and nothing needs a sideways scroll. */
  .sup-item{border-bottom:1px solid var(--line);}
.sup-item:last-child{border-bottom:none;}
.sup-amount{flex:none;font-weight:700;font-size:14px;white-space:nowrap;padding-left:10px;}
.sup-history{padding:2px 0 14px;}
.sup-tx{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:8px 0;font-size:12px;font-family:Arial,sans-serif;border-top:1px dashed var(--line);}
.sup-tag{display:inline-block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:3px;padding:1px 5px;color:var(--muted);}
.sup-note{font-size:12px;font-family:Arial,sans-serif;color:var(--muted);line-height:1.5;
  padding:8px 0;}
.sup-note a{text-decoration:underline;cursor:pointer;}
.ev-when{font-size:12px;font-family:Arial,sans-serif;color:var(--muted);margin-top:4px;}
.ev-left{font-size:12px;font-family:Arial,sans-serif;color:var(--accent,#d64545);margin-top:10px;}
.ev-type{border:1px solid var(--line);border-radius:5px;padding:12px;margin-top:10px;cursor:pointer;}
.ev-type.on{border-color:var(--accent,#d64545);}
.ev-type.gone{opacity:.5;cursor:default;}
.ev-type-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;}
.ev-price{font-weight:700;white-space:nowrap;}
.ev-type-desc{font-size:12px;font-family:Arial,sans-serif;color:var(--muted);margin-top:4px;line-height:1.5;}
.ev-split{font-size:12px;font-family:Arial,sans-serif;color:var(--muted);margin-top:8px;line-height:1.55;}
.ev-gone{font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin-top:8px;color:var(--muted);}
.ev-note{font-size:11px;font-family:Arial,sans-serif;color:var(--muted);margin-top:6px;line-height:1.5;}
.ev-warn{font-size:12px;font-family:Arial,sans-serif;color:#e06c62;margin-top:12px;line-height:1.5;}
.ev-total{border-top:1px solid var(--line);margin-top:16px;padding-top:12px;}
.ev-total-row{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;}
.ev-figures{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;}
.ev-fig{font-size:11px;font-family:Arial,sans-serif;color:var(--muted);line-height:1.4;}
.ev-fig span{display:block;font-size:16px;font-weight:700;color:var(--text,inherit);}
.door-answer{border-radius:6px;padding:18px 16px;margin-bottom:14px;text-align:center;}
.door-answer.in{background:rgba(60,160,90,.14);border:1px solid rgba(60,160,90,.5);}
.door-answer.warn{background:rgba(214,69,69,.12);border:1px solid rgba(214,69,69,.5);}
.door-who{font-size:18px;font-weight:700;}
.door-num{font-size:12px;font-family:Arial,sans-serif;color:var(--muted);margin-top:2px;}
.door-msg{font-size:15px;margin-top:8px;}
.door-sub{font-size:11px;font-family:Arial,sans-serif;color:var(--muted);margin-top:4px;}
.door-figures{display:flex;gap:18px;margin-top:12px;}
.door-video{width:100%;border-radius:5px;margin-top:12px;background:#000;aspect-ratio:1;object-fit:cover;}
.ticket-card{text-align:center;}
.ticket-qr{margin:18px auto 6px;max-width:220px;}
.ticket-qr svg{width:100%;height:auto;display:block;border-radius:4px;}
.ticket-number{font-size:44px;font-weight:700;line-height:1;margin-top:10px;}
.ticket-code{font-size:11px;font-family:monospace;letter-spacing:.12em;color:var(--muted);margin-top:6px;}
.ticket-holder{font-size:14px;margin-top:12px;}
.ticket-warn{font-size:12px;font-family:Arial,sans-serif;line-height:1.5;color:#e06c62;
  border:1px solid rgba(214,69,69,.5);border-radius:5px;padding:10px;margin-bottom:14px;}
.till-card{text-align:center;}
.till-qr{margin:16px auto 12px;max-width:280px;}
.till-qr svg{width:100%;height:auto;display:block;border-radius:6px;}
.till-say{font-size:13px;font-family:Arial,sans-serif;line-height:1.6;margin:0 0 12px;}
.till-url{font-size:11px;font-family:monospace;letter-spacing:.06em;color:var(--muted);
  word-break:break-all;}
.till-why{margin-top:14px;}
.till-block{font-size:12px;font-family:Arial,sans-serif;line-height:1.55;color:var(--muted);
  border-top:1px dashed var(--line);padding:10px 0;}
.till-block span{display:inline-block;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:3px;
  padding:1px 5px;margin-right:8px;}
.till-block.ours span{border-color:var(--accent,#d64545);color:var(--accent,#d64545);}
.till-block.done{opacity:.7;}
/* The owner-only strip above their own store. Deliberately quiet: it is a
   control for one person on a page built for everybody else. */
.store-owner-bar{background:var(--panel,#111);border-bottom:1px solid var(--line);}
.sob-inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:12px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;}
.sob-inner strong{font-size:13px;}
.sob-inner span{font-size:12px;font-family:Arial,sans-serif;color:var(--muted);
  display:block;margin-top:2px;}
@media(max-width:600px){
  .sob-inner{flex-direction:column;align-items:stretch;}
  .sob-inner .btn{width:100%;}
}
.rng-card{border:1px solid var(--line);}
.rng-card.on{border-color:var(--red);}
.rng-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.rng-always{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;padding:4px 9px;flex:none;}
.rng-brands{font-size:12px;font-family:Arial,sans-serif;color:var(--muted);margin-top:4px;}
.rng-figures{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;}
.rng-fig{font-size:11px;font-family:Arial,sans-serif;color:var(--muted);line-height:1.4;max-width:150px;}
.rng-fig span{display:block;font-size:20px;font-weight:700;color:var(--text,inherit);}
.rng-fee{font-size:12px;font-family:Arial,sans-serif;color:var(--muted);line-height:1.55;
  border-top:1px solid var(--line);margin-top:14px;padding-top:12px;}
.rng-item{border-bottom:1px solid var(--line);}
.rng-item:last-child{border-bottom:none;}
.rng-break{padding:4px 0 14px;}
.rng-line{display:flex;justify-content:space-between;font-size:12px;font-family:Arial,sans-serif;
  padding:6px 0;color:var(--muted);}
.rng-line.total{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;
  color:var(--text,inherit);font-size:14px;}
.rng-warn{font-size:12px;font-family:Arial,sans-serif;color:#e06c62;margin-top:10px;line-height:1.5;}
.cr-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
  .cr-sub{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
           margin-top:4px; line-height:1.6; }
  .cr-warn{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif;
            line-height:1.7; border-left:2px solid var(--red); padding-left:12px;
            margin:12px 0; }
  .cr-list{ display:flex; flex-direction:column; gap:8px; }
  .cr-row{ display:flex; gap:14px; justify-content:space-between; align-items:flex-start;
           border:1px solid var(--border); border-radius:4px; padding:12px 14px;
           background:var(--panel2); }
  .cr-pack{ margin-top:18px; border-top:1px solid var(--border); padding-top:16px; }
  .cr-h2{ font-size:13px; font-weight:900; letter-spacing:1px; text-transform:uppercase;
          margin:20px 0 8px; }
  .cr-p{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif;
         line-height:1.75; margin:2px 0; }
  .cr-li{ font-size:12px; font-family:Arial,sans-serif; line-height:1.75;
          margin:6px 0 2px; padding-left:14px; position:relative; }
  .cr-li:before{ content:'-'; position:absolute; left:0; color:var(--red); }
  /* An absent section, shown rather than hidden. Italic and dimmed so the
     gaps in a record are visible at a glance. */
  .cr-none{ font-size:12px; color:var(--dim); font-family:Arial,sans-serif;
            font-style:italic; line-height:1.75; margin:4px 0 4px 2px; }
  .cr-rule{ height:1px; background:var(--border); margin:14px 0; }
  .cr-code{ font-family:monospace; font-size:12px; word-break:break-all;
            background:var(--panel2); border:1px solid var(--border2);
            border-radius:4px; padding:12px; }
  .cr-subject{ font-size:12px; font-weight:700; margin:10px 0 8px; }
  .cr-body{ font-size:12px; font-family:Arial,sans-serif; color:var(--muted);
            line-height:1.75; white-space:pre-wrap; word-wrap:break-word; margin:0;
            background:var(--panel); border:1px solid var(--border);
            border-radius:4px; padding:12px; }
  .cr-steps{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  .cr-step{ display:flex; align-items:center; gap:8px; font-size:12px;
            font-family:Arial,sans-serif; color:var(--muted); }
  @media(max-width:700px){
    .cr-row{ flex-direction:column; }
    .cr-row > div:last-child{ text-align:left !important; }
  }

  /* Membership dues. Mobile-first: the member rows stack, the KPI grid drops
     to one column, and the drafts stay readable at 375px. */
  .kpi-grid.du-kpis{ grid-template-columns:repeat(4,1fr); }
  .du-sub{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
           margin-top:5px; line-height:1.6; }
  .du-note{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif;
            line-height:1.7; border-left:2px solid var(--border2); padding-left:12px;
            margin:12px 0 16px; }
  .du-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
  .du-list{ display:flex; flex-direction:column; gap:8px; }
  .du-row{ display:flex; gap:14px; justify-content:space-between; align-items:flex-start;
           border:1px solid var(--border); border-radius:4px; padding:14px;
           background:var(--panel2); }
  .du-right{ text-align:right; flex:none; }
  .du-out{ font-weight:900; font-size:15px; }
  .du-bar{ height:4px; background:var(--border); border-radius:2px; margin-top:10px;
           overflow:hidden; max-width:260px; }
  .du-bar-fill{ height:100%; background:var(--red); }
  .du-draft{ border:1px solid var(--border); border-left:3px solid var(--red);
             border-radius:4px; padding:14px; background:var(--panel2); margin-bottom:10px; }
  .du-draft-head{ display:flex; gap:12px; justify-content:space-between;
                  align-items:flex-start; flex-wrap:wrap; margin-bottom:10px; }
  .du-subject{ font-size:12px; font-weight:700; margin-bottom:8px; }
  .du-body{ font-size:12px; font-family:Arial,sans-serif; color:var(--muted);
            line-height:1.7; white-space:pre-wrap; word-wrap:break-word; margin:0;
            background:var(--panel); border:1px solid var(--border); border-radius:4px;
            padding:12px; max-height:260px; overflow-y:auto; }
  @media(max-width:700px){
    .kpi-grid.du-kpis{ grid-template-columns:1fr; }
    .du-row{ flex-direction:column; }
    .du-right{ text-align:left !important; }
    .du-bar{ max-width:none; }
  }

  /* The basket. A bar pinned to the bottom on a phone, which is where a
     store is actually used, and a panel that slides up over it. */
  .cart-bar{ position:fixed; left:0; right:0; bottom:0; z-index:60;
             display:flex; align-items:center; justify-content:space-between;
             gap:14px; padding:14px 18px; background:var(--red); color:#fff;
             font-family:Arial,sans-serif; font-size:13px; font-weight:700;
             cursor:pointer; border:none; }
  .cart-panel{ position:fixed; left:0; right:0; bottom:0; z-index:61;
               max-height:80vh; overflow-y:auto; padding:20px;
               background:var(--panel); border-top:2px solid var(--red);
               transform:translateY(102%); transition:transform .22s ease; }
  .cart-panel.open{ transform:translateY(0); }
  .cart-panel-head{ display:flex; align-items:center; justify-content:space-between;
                    margin-bottom:16px; }
  .cart-x{ background:none; border:none; color:var(--muted); font-size:26px;
           line-height:1; cursor:pointer; padding:0 4px; }
  .cart-row{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
             border-bottom:1px solid var(--border); padding:12px 0; }
  .cart-sub{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
             margin-top:4px; line-height:1.6; }
  .cart-qty{ display:flex; align-items:center; gap:10px; flex:none; }
  .cart-qty input{ width:62px; padding:8px; text-align:center; }
  .cart-line-total{ font-weight:900; font-size:13px; min-width:64px; text-align:right; }
  .cart-total-row{ display:flex; justify-content:space-between; align-items:center;
                   padding-top:16px; font-family:Arial,sans-serif; font-size:14px; }
  .buy-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  @media(prefers-reduced-motion:reduce){ .cart-panel{ transition:none; } }

  /* Roast and grind on a store card. Two selects side by side on a phone,
     which is where most of these are bought. */
  .cv-host{ margin:10px 0 4px; }
  .cv-picker{ display:flex; gap:8px; }
  .cv-select{ flex:1; min-width:0; font-size:12px; padding:8px 10px; }
  .cv-weight{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; margin-top:6px; }

  .cf-inputs{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:14px; align-items:end; }
  .cf-toggle{ display:flex; align-items:center; gap:8px; font-size:12px; white-space:nowrap;
              font-family:Arial,sans-serif; color:var(--muted); padding-bottom:10px; }
  .kpi-grid.cf-kpis{ grid-template-columns:repeat(4,1fr); }
  .kpi.cf-total{ border-color:var(--red); }
  .cf-sub{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
           margin-top:5px; line-height:1.6; }
  .cf-note{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.75;
            border-left:2px solid var(--border2); padding-left:14px; margin-top:4px; }
  .cf-assume{ margin:8px 0 12px; padding-left:18px; }
  .cf-assume li{ margin-bottom:4px; }
  .cf-warn{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.7;
            border-left:2px solid var(--red); padding-left:12px; margin:12px 0; }
  .cf-list{ display:flex; flex-direction:column; gap:8px; }
  .cf-row{ display:flex; gap:14px; justify-content:space-between; align-items:flex-start;
           border:1px solid var(--border); border-radius:4px; padding:12px 14px;
           background:var(--panel2); }
  .cf-chips{ display:flex; gap:10px; flex-wrap:wrap; padding-top:6px; }
  .cf-chip{ display:flex; align-items:center; gap:6px; font-size:12px;
            font-family:Arial,sans-serif; color:var(--muted); }
  .cf-colours{ display:flex; gap:16px; flex-wrap:wrap; }
  .cf-colour{ display:flex; flex-direction:column; gap:6px; font-size:11px;
              font-family:Arial,sans-serif; color:var(--muted); }
  .cf-colour input{ width:56px; height:34px; border:1px solid var(--border2);
                    background:var(--panel2); border-radius:4px; cursor:pointer; }
  .cf-blends{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  .cf-blend{ border:1px solid var(--border); border-radius:4px; padding:14px;
             background:var(--panel2); }
  .cf-blend-name{ margin-bottom:8px; }
  .cf-label{ display:block; width:100%; max-width:280px; height:auto;
             border:1px solid var(--border2); border-radius:4px; background:#fff; }
  @media(max-width:700px){
    .cf-inputs{ grid-template-columns:1fr 1fr; }
    .kpi-grid.cf-kpis{ grid-template-columns:1fr; }
    .cf-blends{ grid-template-columns:1fr; }
    .cf-row{ flex-direction:column; align-items:flex-start; gap:8px; }
    .cf-row > div:last-child{ text-align:left !important; }
  }

  .cch-list{ display:flex; flex-direction:column; gap:12px; }

  .cch{ border:1px solid var(--border2); border-left:3px solid var(--team-accent, var(--red)); border-radius:6px;
        padding:14px; background:var(--panel2); }
  .cch-head{ font-size:13.5px; font-weight:900; line-height:1.45; margin-bottom:7px; }
  .cch-why{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.6; margin-bottom:10px; }
  .cch-do{ font-size:12.5px; font-family:Arial,sans-serif; line-height:1.6; margin-bottom:12px; }
  .cch-do b{ color:var(--team-accent-text, var(--red)); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:10px;
             display:block; margin-bottom:3px; }
  .cch-btns{ display:flex; gap:8px; flex-wrap:wrap; }
  .cch-btns .btn{ flex:1 1 auto; }
  .cch-empty{ font-size:12.5px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.7; }
  .cch-send{ display:flex; flex-direction:column; gap:10px; }
  .cch-send textarea{ min-height:200px; font-family:Arial,sans-serif; font-size:13px; line-height:1.6; }
  .cch-send-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .cch-send-row .btn{ flex:1 1 auto; }


  /* Gift Aid. Mobile-first: the declaration is a stack of full-width fields,
     because it is filled in on a phone with one thumb while the card details
     are still to come. */
  .ga-box{ border:1px solid var(--border2); border-radius:6px; padding:14px; margin-bottom:16px; background:var(--panel2); }
  .ga-head{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; }
  .ga-head input{ width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--red); }
  .ga-title{ font-size:12px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
  .ga-uplift{ font-size:12.5px; color:var(--green); font-weight:700; font-family:Arial,sans-serif; margin-top:3px; }
  .ga-fields{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
  .ga-row{ display:flex; flex-direction:column; gap:9px; }
  @media(min-width:520px){ .ga-row{ flex-direction:row; } .ga-row .input{ flex:1 1 0; } }
  .ga-legal{ font-size:11px; line-height:1.65; color:var(--muted); font-family:Arial,sans-serif; margin-top:12px;
             border-top:1px solid var(--border); padding-top:11px; white-space:pre-wrap; }
  .ga-enduring{ display:flex; gap:10px; align-items:flex-start; margin-top:11px; font-size:11.5px;
                color:var(--muted); font-family:Arial,sans-serif; cursor:pointer; }
  .ga-enduring input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--red); }
  .ga-reason{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border);
              font-size:11.5px; font-family:Arial,sans-serif; color:var(--muted); }
  .ga-reason b{ color:#fff; font-weight:700; white-space:nowrap; }


  /* Safari on iOS zooms the page in when you focus a text field whose font is
     under 16px, and never zooms back out — so a single tap on any box left the
     whole site oversized. 16px here is Safari's threshold, not a type choice. */
  .hero-mini-total{ display:flex; justify-content:space-between; font-size:10.5px; font-weight:700; padding-top:8px; margin-top:4px; border-top:1px solid var(--border); }

  /* Standings. Mobile-first: every row is a block that reads top to bottom.
     A five-column table is the obvious shape for standings and the wrong one
     on a phone, which is where a parent checks where their kid's team sits. */
  .stand-list{ display:flex; flex-direction:column; gap:16px; }
  .stand-row{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; padding-left:8px; border-left:2px solid transparent; }
  .stand-row.leader{ border-left-color:var(--team-accent, var(--red)); }
  .stand-rank{ font-size:15px; font-weight:900; color:var(--dim); line-height:1.25; font-variant-numeric:tabular-nums; }
  .stand-row.leader .stand-rank{ color:var(--team-accent-text, var(--red)); }
  .stand-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:7px; }
  .stand-name{ font-size:12.5px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
  .stand-age{ font-size:9.5px; font-weight:700; letter-spacing:1px; color:var(--muted); background:var(--panel2); border:1px solid var(--border2); border-radius:3px; padding:2px 6px; margin-left:8px; white-space:nowrap; }
  .stand-amt{ font-size:13px; font-weight:900; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .stand-sub{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:7px; font-size:10.5px; font-family:Arial,sans-serif; color:var(--muted); }
  .stand-foot{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); font-size:11px; font-family:Arial,sans-serif; color:var(--muted); }

  /* Kit quote. Mobile-first: the product grid is one column until there is
     room for two, and the quote table scrolls inside its own box rather than
     pushing the page sideways. */
  /* Kit design. Mobile-first: the shirt sits above the controls until there
     is width for them side by side. */
  .kd-wrap { display:grid; grid-template-columns:1fr; gap:18px; }
  @media (min-width:820px){ .kd-wrap { grid-template-columns:minmax(0,1fr) 320px; } }
  .kd-stage-wrap { display:flex; flex-direction:column; gap:10px; }
  .kd-stage { background:#dcdee6; border-radius:10px; padding:14px; min-height:200px;
              display:flex; align-items:center; justify-content:center; }
  .kd-stage svg { display:block; width:100%; height:auto; }
  .kd-views { display:flex; gap:6px; justify-content:center; }
  .kd-view { min-height:36px; padding:7px 16px; border-radius:6px; border:1px solid #333;
             background:#141414; color:var(--muted); font-family:Arial,sans-serif;
             font-size:11px; font-weight:700; letter-spacing:.08em; cursor:pointer; }
  .kd-view.on { background:var(--red); border-color:var(--red); color:#fff; }
  .kd-controls .field-label { margin-top:18px; }
  .kd-presets { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .kd-preset { display:flex; align-items:center; gap:6px; background:#141414;
               border:1px solid #2a2a2a; border-radius:8px; padding:8px 10px; cursor:pointer;
               color:var(--fg); font-family:Arial,sans-serif; font-size:12px; min-height:40px; }
  .kd-preset:hover { border-color:#555; }
  .kd-chip { width:13px; height:13px; border-radius:3px; flex:none; }
  .kd-patterns { display:flex; flex-wrap:wrap; gap:6px; }
  .kd-pat { min-height:36px; padding:7px 12px; border-radius:6px; border:1px solid #2a2a2a;
            background:#141414; color:var(--muted); font-family:Arial,sans-serif;
            font-size:12px; cursor:pointer; }
  .kd-pat.on { background:var(--red); border-color:var(--red); color:#fff; }
  .kd-colours { display:flex; gap:14px; flex-wrap:wrap; }
  .kd-colour { display:flex; flex-direction:column; align-items:center; gap:5px;
               font-size:11px; color:var(--muted); font-family:Arial,sans-serif; }
  .kd-colour input { width:46px; height:34px; padding:0; border:1px solid #333;
                     border-radius:6px; background:none; cursor:pointer; }
  .kd-note { font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
             line-height:1.6; margin:8px 0 0; }
  /* The kit card on the campaign page. Small on purpose — it sits beside the
     schedule and the spend breakdown, not instead of them. */
  .kit-hero-body { display:flex; gap:12px; align-items:center; }
  .kit-hero-shirt { flex:0 0 88px; width:88px; background:#dcdee6;
                    border-radius:8px; padding:6px; }
  .kit-hero-shirt svg { display:block; width:100%; height:auto; }
  .kit-hero-text { min-width:0; }
  .kit-hero-cost { font-size:22px; font-weight:900; line-height:1.1; }
  .kit-hero-sub { font-size:11px; color:var(--muted); font-family:Arial,sans-serif; margin-top:2px; }
  .kit-hero-note { font-size:10px; color:var(--dim); font-family:Arial,sans-serif; margin-top:3px; }
  .kit-prod-grid { display:grid; grid-template-columns:1fr; gap:10px; }
  @media (min-width:560px){ .kit-prod-grid { grid-template-columns:1fr 1fr; } }
  @media (min-width:900px){ .kit-prod-grid { grid-template-columns:1fr 1fr 1fr; } }
  .kit-prod { text-align:left; background:#141414; border:1px solid #2a2a2a; border-radius:8px;
              padding:12px 14px; cursor:pointer; color:var(--fg); font-family:Arial,sans-serif;
              display:flex; flex-direction:column; gap:4px; min-height:44px; }
  .kit-prod:hover { border-color:#444; }
  .kit-prod.on { border-color:var(--red); background:#1b1414; }
  .kit-prod-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .kit-prod-name { font-weight:700; font-size:14px; }
  .kit-prod-meta { font-size:11px; color:var(--muted); }
  .kit-prod-price { font-size:15px; font-weight:900; }
  .kit-qty-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
                 padding:10px 0; border-bottom:1px solid #222; }
  .kit-qty-row:last-of-type { border-bottom:0; }
  .kit-warn, .kit-note, .kit-good { font-family:Arial,sans-serif; font-size:13px; line-height:1.7;
              border-radius:8px; padding:12px 14px; margin-top:12px; }
  .kit-warn { background:#2a1a12; border-left:3px solid #d08a2c; }
  .kit-note { background:#161d28; border-left:3px solid #4a7fb5; }
  .kit-good { background:#132318; border-left:3px solid var(--green); }
  .kit-raise { background:#0f1a13; border:1px solid #1d3527; border-radius:10px;
               padding:16px 18px; margin-top:16px; font-family:Arial,sans-serif; }
  .kit-raise-head { font-size:13px; line-height:1.7; color:var(--muted); }
  .kit-raise-head strong { color:var(--fg); display:block; margin-bottom:2px; }
  .kit-raise-input { display:flex; align-items:center; gap:8px; margin:14px 0 0;
                     font-size:13px; color:var(--muted); }
  .kit-raise-input .input { width:92px; margin:0; }
  .kit-raise-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; }
  @media (min-width:520px){ .kit-raise-grid { grid-template-columns:repeat(3,1fr); } }
  .kit-raise-grid > div { background:#0b120e; border-radius:8px; padding:10px 12px; }
  .kit-raise-grid .l { display:block; font-size:10px; letter-spacing:.1em;
                       text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
  .kit-raise-grid .n { display:block; font-size:20px; font-weight:900; }
  .kit-raise-grid .hi .n { color:var(--green); }
  .kit-raise-foot { font-size:11px; color:var(--muted); margin-top:10px; }
  .kit-facts { display:flex; gap:22px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid #222; }
  .kit-facts .n { display:block; font-size:19px; font-weight:900; }
  .kit-facts .l { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  /* Director questions and the team list. Mobile-first: a team row stacks
     until there is width for the name and age side by side. */
  .dir-q { display:flex; align-items:center; justify-content:space-between; gap:12px;
           padding:9px 0; border-bottom:1px solid #222; }
  .dir-q:last-child { border-bottom:0; }
  .dir-label { font-family:Arial,sans-serif; font-size:14px; font-weight:700; }
  .dir-toggle { display:flex; gap:6px; flex:none; }
  .dir-btn { min-width:56px; min-height:36px; padding:7px 14px; border-radius:6px;
             border:1px solid #333; background:#141414; color:var(--muted);
             font-family:Arial,sans-serif; font-size:12px; font-weight:700; cursor:pointer; }
  .dir-btn:hover { border-color:#555; color:var(--fg); }
  .dir-btn.on { background:var(--red); border-color:var(--red); color:#fff; }
  /* Kit preview during setup. Mobile-first: the shirt sits above the words
     until there is room beside them. */
  .wiz-kit-note.with-shirt { display:grid; grid-template-columns:1fr; gap:14px; align-items:center; }
  @media (min-width:560px){ .wiz-kit-note.with-shirt { grid-template-columns:118px 1fr; } }
  .wiz-kit-shirt { background:#dcdee6; border-radius:8px; padding:8px; cursor:pointer;
                   position:relative; }
  .wiz-kit-shirt svg { display:block; width:100%; height:auto; }
  .wiz-kit-tap { display:block; text-align:center; font-size:9px; letter-spacing:.08em;
                 text-transform:uppercase; color:#6b7280; margin-top:4px; }
  .season-costs { margin:12px 0 14px; }
  .season-head { display:flex; justify-content:space-between; align-items:baseline;
                 font-family:Arial,sans-serif; font-size:13px; font-weight:700; margin-bottom:4px; }
  .season-total { font-size:18px; font-weight:900; }
  .season-row { display:flex; gap:10px; align-items:center; padding:7px 0;
                border-bottom:1px solid #1c1c1c; opacity:.45; }
  .season-row.on { opacity:1; }
  .season-row:last-child { border-bottom:0; }
  .season-tick { flex:none; width:22px; height:22px; border-radius:5px; cursor:pointer;
                 border:1px solid #333; background:#141414; color:var(--green);
                 font-size:12px; font-weight:900; line-height:1; }
  .season-row.on .season-tick { border-color:var(--green); }
  .season-label { flex:1 1 auto; min-width:0; font-family:Arial,sans-serif; font-size:12.5px; }
  .season-hint { display:block; font-size:10.5px; color:var(--dim); }
  .season-amt { width:84px; margin:0; flex:none; }
  .dues-notes { margin:8px 0 12px; padding-left:18px; font-size:11.5px; color:var(--muted);
                font-family:Arial,sans-serif; line-height:1.7; }
  .dues-notes li { margin-bottom:4px; }
  .wiz-parts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .wiz-part { min-height:34px; padding:6px 11px; border-radius:6px; border:1px solid #2a2a2a;
              background:#141414; color:var(--muted); font-family:Arial,sans-serif;
              font-size:11.5px; cursor:pointer; }
  .wiz-part.on { background:var(--green); border-color:var(--green); color:#08150c; font-weight:700; }
  .wiz-est { margin-top:14px; padding-top:12px; border-top:1px solid #1d3527; }
  .wiz-est-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; }
  .wiz-est-row .input { width:78px; margin:0; }
  .wiz-est-out { display:flex; gap:18px; margin:12px 0 8px; }
  .wiz-est-out .l { display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .wiz-est-out .n { display:block; font-size:20px; font-weight:900; }
  .wiz-est-note { font-size:11px; color:var(--muted); line-height:1.6; margin:0 0 10px; }
  .wiz-est-done { display:inline-block; margin-left:10px; font-size:11px; color:var(--green); }
  .wiz-kit-note { background:#132318; border-left:3px solid var(--green); border-radius:8px;
                  padding:12px 14px; margin-top:12px; font-family:Arial,sans-serif;
                  font-size:13px; line-height:1.7; color:var(--muted); }
  .wiz-kit-note strong { color:var(--fg); display:block; margin-bottom:2px; }
  .team-rows { display:flex; flex-direction:column; gap:8px; }
  .team-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
  @media (min-width:520px){ .team-row { grid-template-columns:2fr 1fr auto; } }
  .team-row .input { margin:0; }
  .progress-bar { background: #222; border-radius: 2px; height: 8px; overflow:hidden;}
  .progress-fill { background: var(--team-accent, var(--red)); height: 8px; border-radius: 2px; transition:width .4s; }
  .progress-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--muted); letter-spacing: 1px; }

  /* ── NIL product tiers ──────────────────────────────────────────────
     Stacked on a phone and staying stacked: the row is a picture, a
     sentence and a price, and the sentence is the part that must not be
     squeezed. It is the only place a supporter is told what the athlete
     earns. */
  .nil-tier{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center;
    padding:14px 0; border-bottom:1px solid var(--border); cursor:pointer; }
  .nil-tier:last-of-type{ border-bottom:none; }
  .nil-tier:hover{ opacity:.85; }
  .nil-tier-img{ width:64px; height:64px; border-radius:4px; background:var(--panel);
    border:1px solid var(--border); overflow:hidden; flex-shrink:0; }
  .nil-tier-name{ font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
  .nil-tier-line{ font-size:11.5px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.55; }
  .nil-tier-note{ font-size:10.5px; color:var(--muted); font-family:Arial,sans-serif; margin-top:5px; opacity:.8; }
  .nil-tier-price{ font-size:15px; font-weight:900; white-space:nowrap; }
  @media(max-width:420px){
    /* The price moves under the name rather than shrinking the sentence. */
    .nil-tier{ grid-template-columns:52px 1fr; }
    .nil-tier-img{ width:52px; height:52px; }
    .nil-tier-price{ grid-column:2; margin-top:6px; }
  }

  .nil-gift-notice{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif;
    line-height:1.6; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }

  /* ── the club's view, before publishing ─────────────────────────── */
  .nil-club-tier{ border:1px solid var(--border); border-radius:6px; padding:16px; margin-bottom:14px; }
  .nil-club-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
  .nil-club-name{ font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
  .nil-club-desc{ font-size:11.5px; color:var(--muted); font-family:Arial,sans-serif; margin-top:4px; line-height:1.5; }
  .nil-waterfall{ width:100%; font-family:Arial,sans-serif; font-size:12.5px; }
  .nil-waterfall td{ padding:5px 0; border:none; }
  .nil-waterfall td:last-child{ text-align:right; font-weight:700; white-space:nowrap; }
  .nil-waterfall .nil-total td{ border-top:1px solid var(--border); padding-top:9px; font-weight:900; }
  .nil-blocked{ margin-top:12px; padding:10px 12px; border-radius:4px; background:rgba(214,69,69,.08);
    border:1px solid rgba(214,69,69,.3); font-size:11.5px; font-family:Arial,sans-serif;
    line-height:1.55; color:var(--muted); }

  .main { max-width: 1200px; margin: 0 auto; padding: 40px; display: grid; grid-template-columns: 1fr 340px; gap: 32px; }
  @media(max-width:900px){ .main{ grid-template-columns:1fr; } .price-grid,.feat-grid,.how-grid,.player-grid,.store-grid{ grid-template-columns:1fr 1fr; } .lhero h1{ font-size:36px;} }
  @media(max-width:600px){ .price-grid,.feat-grid,.how-grid,.player-grid,.store-grid{ grid-template-columns:1fr; } .wrap{padding:20px;} .main{padding:20px;} }

  /* /create's own type-selection page (public/index.html's pageCreateChooseType) -- three cards
     (Club/School, Pro, Golf Journey) that used to sit in a hardcoded 2-column grid (an inline style
     on .feat-grid, moved into .create-type-grid instead so this can actually override it) all the
     way down to a phone, each column narrower than the text and buttons inside it, running the
     whole page off the right edge. Scoped to .create-choose-type/.create-type-grid specifically,
     never the bare .feat-grid/.card/.section-title/.btn classes those two rules already restyle
     above -- this page is the only thing allowed to look any different below 768px; the homepage,
     every campaign page and golf's own pages all keep using exactly those shared rules untouched. */
  @media(max-width:767px){
    .create-type-grid{ grid-template-columns:1fr; gap:16px; }
    .wrap.create-choose-type{ padding:24px 16px; }
    .create-choose-type .card{ padding:18px; margin-bottom:0; }
    .create-choose-type .card .section-title{ font-size:24px; letter-spacing:1px; margin-bottom:14px; }
    .create-choose-type .card .btn{ width:100%; font-size:11px; letter-spacing:1px; white-space:nowrap; }
  }

  /* The compact nav: two rows instead of four.

     Applies from 900px down, not 600px, because the wrap starts long before a
     phone — at 700px the old nav was already 160px tall. The logo and the
     account buttons share the first row; the links take the second as one
     swipeable line. */
  @media(max-width:900px){
    nav{ padding:0 16px; flex-direction:row; flex-wrap:wrap; align-items:center; }
    .nav-logo{ order:1; font-size:17px; letter-spacing:1px; padding:11px 0; }
    .nav-right{ order:2; margin-left:auto; gap:8px; padding:11px 0; }
    /* The badge only repeats what the avatar beside it already says. */
    .nav-right .live-badge{ display:none; }
    .nav-right .btn-sm{ padding:7px 11px; }

    .nav-links{
      order:3; flex:0 0 100%; width:100%;
      flex-wrap:nowrap;            /* one line, scrolled — not a block that wraps */
      gap:20px;
      overflow-x:auto;
      overscroll-behavior-x:contain;   /* swiping the strip must not swipe the page */
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      border-top:1px solid var(--border);
    }
    .nav-links::-webkit-scrollbar{ display:none; }
    .nav-links a{ flex:0 0 auto; white-space:nowrap; padding:11px 0; }

    /* Fades the right edge only while there is more strip to reach, so it
       reads as "keep going" rather than as a permanent decoration. */
    .nav-links.is-scrollable{
      -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
      mask-image: linear-gradient(to right, #000 84%, transparent 100%);
    }
  }

  /* A phone held sideways is about 375px tall, where the same nav that costs
     8% of a portrait screen costs a quarter of this one. Height is the scarce
     thing when the screen is short, so the rows lose their padding. */
  @media(max-width:900px) and (max-height:500px){
    .nav-logo{ font-size:15px; padding:6px 0; }
    .nav-right{ padding:6px 0; }
    .nav-right .btn-sm{ padding:5px 10px; }
    .nav-links a{ padding:7px 0; }
  }

  .player-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .player-card { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; }
  .player-card:hover { border-color: var(--team-accent, var(--red)); }
  .player-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--team-accent, var(--red)); color: var(--team-btn-text, #fff); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; margin: 0 auto 12px; }
  .player-name { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
  .player-pos { font-size: 10px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
  .player-raised { font-size: 16px; font-weight: 900; color: var(--team-accent-text, var(--red)); margin-top: 10px; }
  .player-bar { background: #333; height: 4px; border-radius: 2px; margin-top: 8px; overflow:hidden;}
  .player-bar-fill { background: var(--team-accent, var(--red)); height: 4px; border-radius: 2px; }
  .player-link { display: block; margin-top: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--team-accent-text, var(--red)); }

  .store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .store-item { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; }
  .store-item:hover { border-color: var(--red); }
  .store-img { width: 80px; height: 80px; background: radial-gradient(circle at 50% 40%, #fdfdfd 0%, #ddd 100%); border-radius: 4px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 30px; padding:10px; }
  .store-img svg{ width:44px; height:44px; }
  .store-name { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
  .store-price { font-size: 16px; font-weight: 900; color: var(--team-accent-text, var(--red)); margin-top: 6px; }
  .store-sold{ font-size:10px; color:var(--dim); margin-top:4px; letter-spacing:1px; }

  /* ============ FULL TEAM STORE PAGE ============ */
  .store-hero{ background:radial-gradient(circle at 30% 0%, #1a0505 0%, #000 60%); border-bottom:1px solid var(--border); padding:56px 40px; text-align:center; }
  .store-hero-inner{ max-width:800px; margin:0 auto; }
  .store-hero-label{ font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--team-accent-2-text, var(--red)); margin-bottom:14px; }
  .store-hero h1{ font-size:38px; font-weight:900; text-transform:uppercase; letter-spacing:2px; margin-bottom:12px; }
  .store-hero p{ color:var(--muted); font-size:13px; font-family:Arial,sans-serif; max-width:480px; margin:0 auto 28px; line-height:1.6; }
  .store-hero-stats{ display:flex; justify-content:center; gap:50px; flex-wrap:wrap; }
  @media(max-width:480px){ .store-hero{ padding:56px 20px; } .store-hero-stats{ gap:14px; } }
  .store-hero-stats .n{ display:block; font-size:24px; font-weight:900; color:var(--red); }
  .store-hero-stats .l{ display:block; font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:4px; }

  .how-store-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:30px 0; }
  .hsw-item{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:18px; display:flex; gap:12px; align-items:flex-start; }
  .hsw-ico{ font-size:20px; flex-shrink:0; }
  .hsw-title{ font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
  .hsw-desc{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.5; }
  @media(max-width:900px){ .how-store-strip{ grid-template-columns:1fr 1fr; } }
  @media(max-width:600px){ .how-store-strip{ grid-template-columns:1fr; } }

  .store-layout{ display:grid; grid-template-columns:200px 1fr; gap:30px; margin-top:30px; }
  /* Sticks below the nav, whatever height the nav is — 80px was the desktop
     figure and slid under a wrapped nav everywhere else. */
  .store-sidebar{ position:sticky; top:calc(var(--nav-h, 64px) + 16px); align-self:start; }
  .store-sidebar-title{ font-size:11px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
  .cat-nav-item{ display:flex; justify-content:space-between; width:100%; text-align:left; background:none; border:none; color:var(--muted); padding:9px 10px; font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; cursor:pointer; border-radius:4px; transition:all .15s; }
  .cat-nav-item span{ color:var(--dim); font-weight:400; }
  .cat-nav-item:hover{ background:var(--panel2); color:#fff; }
  .cat-nav-item.active{ background:var(--red); color:#fff; }
  .cat-nav-item.active span{ color:rgba(255,255,255,.75); }
  .store-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
  .store-item-count{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; }
  @media(max-width:800px){ .store-layout{ grid-template-columns:1fr; } .store-sidebar{ position:static; } .cat-nav-item{ display:inline-flex; width:auto; margin-right:6px; margin-bottom:6px; border:1px solid var(--border2); } .store-sidebar{ display:flex; flex-wrap:wrap; } .store-sidebar-title{ width:100%; } }

  .product-grid2{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .product-card2{ background:var(--panel); border:1px solid var(--border); border-radius:6px; overflow:hidden; position:relative; transition:all .2s; }
  .product-card2:hover{ border-color:var(--red); transform:translateY(-3px); }
  .product-cat-tag{ position:absolute; top:10px; left:10px; z-index:2; background:rgba(0,0,0,.65); border:1px solid var(--border2); color:#eee; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:20px; }
  .fulfill-tag{ position:absolute; top:10px; right:10px; z-index:2; font-size:9px; font-weight:700; letter-spacing:.3px; padding:3px 8px; border-radius:20px; font-family:Arial,sans-serif; text-transform:none; }
  .fulfill-tag.pod{ background:rgba(0,200,83,.15); border:1px solid rgba(0,200,83,.4); color:var(--green); }
  .fulfill-tag.manual{ background:rgba(255,255,255,.08); border:1px solid var(--border2); color:var(--muted); }
  .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:999; display:flex; align-items:center; justify-content:center; padding:20px; }
  .modal-card{ background:var(--panel); border:1px solid var(--border2); border-radius:8px; padding:28px; max-width:420px; width:100%; position:relative; max-height:90vh; overflow-y:auto; }
  .modal-close{ position:absolute; top:14px; right:18px; font-size:22px; color:var(--muted); cursor:pointer; line-height:1; }
  .modal-close:hover{ color:#fff; }
  .order-row{ display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--panel2); border:1px solid var(--border); border-radius:4px; margin-bottom:8px; flex-wrap:wrap; gap:10px; }
  /* position:relative so the note about a blank product can sit along the
     bottom edge of the picture it is describing. */
  .product-img2{ position:relative; height:170px; background:radial-gradient(circle at 50% 40%, #fdfdfd 0%, #eee 65%, #ddd 100%); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); padding:20px; overflow:hidden; }
  .product-img2 svg{ width:80px; height:80px; filter:drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
  .product-img2 img{ width:100%; height:100%; object-fit:contain; object-position:center; }
  .product-body2{ padding:16px; }
  .product-name2{ font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
  .product-desc2{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.5; margin-bottom:10px; min-height:32px; }
  .size-row{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
  .size-pill{ font-size:9px; font-weight:700; color:var(--muted); border:1px solid var(--border2); border-radius:3px; padding:2px 6px; }
  /* The real, pickable size row under a colour's swatches (dvSwatchRow) -- same pill look as the
     plain label above, but clickable: a product with more than one size shows these instead of the
     single flat guess every item used to show regardless of what Printful actually had. */
  .size-row-pick .size-pill{ cursor:pointer; user-select:none; }
  .size-row-pick .size-pill.selected{ color:var(--text); border-color:var(--red); background:rgba(239,68,68,.08); }
  /* BASKET/BUY NOW while a real colour/size choice is still unmade -- buyRowHtml (public/
     index.html). Disabled, not hidden: the buttons stay in place so the layout doesn't jump the
     instant a swatch is picked, just greyed out with the reason underneath. */
  .btn:disabled{ opacity:.4; cursor:not-allowed; }
  .select-size-msg{ font-size:10px; color:var(--muted); font-family:Arial,sans-serif; letter-spacing:.2px; width:100%; margin-top:6px; text-align:right; }
  /* "Size guide" -- sizeGuideOpen (public/index.html), real per-size measurements from Printful. */
  .size-guide-link{ font-size:10px; color:var(--accent); text-decoration:underline; margin-left:8px; cursor:pointer; }
  .size-guide-table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:12px; font-family:Arial,sans-serif; }
  .size-guide-table th, .size-guide-table td{ padding:6px 10px; text-align:center; border-bottom:1px solid var(--border2); font-variant-numeric:tabular-nums; }
  .size-guide-table th:first-child, .size-guide-table td:first-child{ text-align:left; color:var(--muted); }
  .size-guide-table thead th{ color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px; font-size:10px; }
  .product-footer2{ display:flex; justify-content:space-between; align-items:flex-end; }
  .product-price2{ font-size:17px; font-weight:900; color:var(--red); }
  .product-sold2{ font-size:9px; color:var(--dim); letter-spacing:.5px; margin-top:2px; }

  /* The colour/size swipe gallery -- product-img-wrap just holds the image and its two arrow
     buttons together so the arrows can be positioned relative to the picture without the picture
     itself (pimg-ID) needing to know they exist; dvPick only ever replaces pimg-ID's own
     innerHTML, so the arrows (and the swipe listeners on pimg-ID itself) survive every colour
     switch untouched. touch-action:pan-y lets the page still scroll vertically through a swipe
     gesture aimed at the image -- only a clearly horizontal drag (dvSwipeEnd's own 32px floor)
     is read as "change colour". */
  .product-img-wrap{ position:relative; }
  .product-img-wrap .product-img2{ touch-action:pan-y; }
  .dv-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%;
    background:rgba(0,0,0,.55); color:#fff; border:none; font-size:18px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; z-index:2; padding:0; }
  .dv-arrow:hover{ background:rgba(0,0,0,.8); }
  .dv-arrow-prev{ left:6px; }
  .dv-arrow-next{ right:6px; }
  .swatch-label{ font-size:10px; color:var(--muted); font-family:Arial,sans-serif; letter-spacing:.2px; margin:4px 0 2px; }
  /* Narrower than this, a visitor is on a phone -- arrows crowd a small image and a thumb already
     has swipe, so they step aside and leave the whole picture free to drag. */
  @media (max-width:560px){
    .dv-arrow{ display:none; }
  }

  .shop-by-player-section{ margin-top:50px; padding-top:40px; border-top:1px solid var(--border); }
  .player-shop-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
  .player-shop-card{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:14px 10px; text-align:center; cursor:pointer; transition:all .2s; }
  .player-shop-card:hover{ border-color:var(--red); transform:translateY(-2px); }
  .player-shop-name{ font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.3px; line-height:1.3; }
  .player-shop-pos{ font-size:9px; color:var(--dim); margin-top:2px; }
  @media(max-width:800px){ .player-shop-grid{ grid-template-columns:repeat(3,1fr); } }

  .vendor-section{ margin-top:50px; padding-top:40px; border-top:1px solid var(--border); }
  .vendor-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .vendor-card{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:24px; position:relative; text-align:center; }
  .vendor-badge{ position:absolute; top:12px; right:12px; background:var(--panel2); border:1px solid var(--border2); color:var(--muted); font-size:8px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:20px; }
  .vendor-icon{ font-size:36px; margin-bottom:12px; }
  .vendor-name{ font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
  .vendor-by{ font-size:10px; color:var(--dim); font-family:Arial,sans-serif; margin-bottom:10px; }
  .vendor-desc{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.6; margin-bottom:12px; }
  .vendor-price{ font-size:13px; font-weight:900; color:#fff; }
  @media(max-width:900px){ .product-grid2{ grid-template-columns:1fr 1fr; } .vendor-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:600px){ .product-grid2{ grid-template-columns:1fr; } .vendor-grid{ grid-template-columns:1fr; } }



  .activity-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid #1a1a1a; }
  .activity-item:last-child { border-bottom: none; }
  .activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-top: 5px; flex-shrink: 0; }
  .activity-dot.green { background: var(--green); }
  .activity-text { font-size: 13px; color: #ccc; line-height: 1.5; font-family:Arial,sans-serif;}
  .activity-text strong { color: #fff; }
  .activity-time { font-size: 10px; color: var(--dim); letter-spacing: 1px; margin-top: 4px; }

  /* One-time/Monthly toggle above the donate-amounts grid -- see public/index.html's
     donateFreqToggleHtml()/setDonateFrequency(). Only ever rendered at all when a campaign has
     allow_monthly_donations on, so this never shows or applies for any other campaign. A plain
     two-segment control: var(--team-accent, var(--red)) fill on whichever side is .active, so a
     campaign with its own colour (Kentucky's blue) picks that up automatically, same as every
     other donate-card element already does. */
  .donate-freq-toggle{ display:flex; border:1px solid var(--border2); border-radius:4px; overflow:hidden; margin-bottom:14px; }
  .freq-btn{ flex:1; background:var(--panel2); border:none; color:var(--muted); padding:10px; font-size:11px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:all .15s; }
  .freq-btn.active{ background:var(--team-accent, var(--red)); color:var(--team-btn-text, #fff); }
  .donate-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  /* A wider amount grid (campaign and player donate cards both use this for
     a long list of presets). Its own class rather than an inline style, so
     the phone override below can win over it. */
  .donate-amounts-4{ grid-template-columns: repeat(4, 1fr); }
  /* Four columns of $1,000/£1,000-wide buttons don't fit a phone's width —
     each column's own minimum content size (a grid item won't shrink below
     its text) pushes the whole row, and the card, past the screen edge. Three
     columns leaves enough room per button for the widest label. */
  @media(max-width:480px){ .donate-amounts-4{ grid-template-columns: repeat(3, 1fr); } }
  .donate-btn { background: var(--panel2); border: 1px solid var(--border2); color: #fff; padding: 14px; text-align: center; font-size: 16px; font-weight: 900; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
  .donate-btn:hover, .donate-btn.selected { background: var(--team-accent, var(--red)); border-color: var(--team-accent, var(--red)); color: var(--team-btn-text, #fff); }
  .donate-breakdown { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 4px; padding: 16px; margin-bottom: 16px; }

  /* Guided tour: a spotlight cut into a dark backdrop via one giant box-shadow,
     plus a small card of copy and nav next to whatever it's pointed at. */
  #tourOverlay { position: fixed; inset: 0; z-index: 9990; }
  .tour-spot { position: fixed; z-index: 9991; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.75); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
  .tour-card { position: fixed; z-index: 9992; background: #161616; border: 1px solid var(--red); border-radius: 8px; padding: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.6); font-family: Arial, sans-serif; transition: top .25s ease, left .25s ease; }
  .tour-card h4 { margin: 4px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: #fff; }
  .tour-card p { margin: 0 0 14px; font-size: 12px; color: #ccc; line-height: 1.6; }
  .tour-step { font-size: 10px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
  .tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .tour-close { position: absolute; top: 6px; right: 10px; cursor: pointer; color: var(--muted); font-size: 18px; background: none; border: none; line-height: 1; }
  .tour-close:hover { color: #fff; }
  .tour-help-btn { margin-left: auto; }
  .breakdown-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }
  .breakdown-row .lbl { color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
  .breakdown-row .lbl em { display:block; font-style:normal; text-transform:none; letter-spacing:0; font-size:10px; color:var(--dim); margin-top:2px; }
  .breakdown-row .val { font-weight: 900; }
  .breakdown-row .val.red { color: var(--red); }
  .breakdown-row .val.green { color: var(--green); }
  .share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .match-result{ background:var(--panel2); border:1px solid var(--border2); border-radius:4px; padding:12px; margin-bottom:8px; }
  .match-result.hit{ border-color:rgba(0,200,83,.35); }
  .match-name{ font-size:12px; font-weight:900; text-transform:uppercase; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .match-notes{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; margin-top:4px; line-height:1.5; }
  .match-est{ font-size:12px; color:var(--green); font-weight:700; margin-top:8px; font-family:Arial,sans-serif; }
  .match-row{ display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--panel2); border:1px solid var(--border); border-radius:4px; margin-bottom:8px; flex-wrap:wrap; gap:10px; }

  /* table */
  table{ width:100%; border-collapse:collapse; font-family:Arial,sans-serif; font-size:12px; }
  th{ text-align:left; color:var(--muted); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:10px 8px; border-bottom:1px solid var(--border); }
  td{ padding:10px 8px; border-bottom:1px solid #1a1a1a; color:#ddd; }
  tr:last-child td{ border-bottom:none; }
  /* Store sales panel. Mobile-first: the feed rows stack their two halves and
     the KPI grid drops to one column rather than squeezing three. */
  .sw-live{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted);
            font-family:Arial,sans-serif; margin-bottom:18px; }
  .sw-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex:none;
           animation:swPulse 2s ease-in-out infinite; }
  @keyframes swPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.2 } }
  .kpi-grid.sw-kpis{ grid-template-columns:repeat(3,1fr); }
  .sw-sub{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; margin-top:5px;
           line-height:1.6; }
  .sw-note{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.75;
            border-left:2px solid var(--border2); padding-left:14px; margin:4px 0 22px; }
  .sw-head{ font-size:11px; font-weight:900; letter-spacing:2px; text-transform:uppercase;
            color:var(--dim); margin:22px 0 10px; }
  .sw-list{ display:flex; flex-direction:column; gap:8px; }
  .sw-row{ display:flex; gap:14px; align-items:center; justify-content:space-between;
           border:1px solid var(--border); border-radius:4px; padding:12px 14px;
           background:var(--panel2); }
  /* A sale that landed since the last check. Fades from a green wash back to
     the normal row so it catches the eye once without staying loud. */
  .sw-new{ animation:swLand 2.4s ease-out; }
  @keyframes swLand{
    0%{ background:rgba(0,200,83,.22); border-color:var(--green); }
    100%{ background:var(--panel2); border-color:var(--border); }
  }
  @media(prefers-reduced-motion:reduce){
    .sw-dot{ animation:none } .sw-new{ animation:none; border-color:var(--green); }
  }
  @media(max-width:700px){
    .kpi-grid.sw-kpis{ grid-template-columns:1fr; }
    .sw-row{ flex-direction:column; align-items:flex-start; gap:8px; }
    .sw-row > div:last-child{ text-align:left !important; }
  }

  .kpi-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:24px; }

  .kpi{ background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:20px; }
  .kpi .val{ font-size:26px; font-weight:900; color:var(--red); }
  .kpi .lbl{ font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:4px; }
  @media(max-width:700px){ .kpi-grid{ grid-template-columns:1fr 1fr; } }
  .row-actions button{ margin-right:6px; }
  .player-form-row{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; margin-bottom:8px; align-items:center; }
  .player-form-row-wide{ grid-template-columns:1fr 1fr 1fr 1.3fr 1fr auto; }
  @media(max-width:900px){ .player-form-row-wide{ grid-template-columns:1fr 1fr; } }
  .del-x{ background:var(--panel2); border:1px solid var(--border2); color:var(--red); width:34px; height:34px; border-radius:4px; cursor:pointer; font-weight:900; }
  .admin-tab-select-wrap{ margin-bottom:24px; }
  .admin-tab-select{ width:auto; min-width:220px; max-width:100%; font-weight:900; letter-spacing:1px; text-transform:uppercase; font-size:11px; border-color:var(--red); }
  .deal-card{ background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:18px; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:10px; }
  .expense-row{ margin-bottom:16px; }
  .expense-row-top{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
  .expense-row-top .cat{ font-weight:700; }
  .expense-row-top .amt{ color:var(--red); font-weight:700; }
  .expense-bar{ height:8px; background:var(--panel2); border-radius:4px; overflow:hidden; }
  .expense-bar-fill{ height:100%; background:var(--red); border-radius:4px; }
  .expense-total{ display:flex; justify-content:space-between; padding-top:14px; margin-top:6px; border-top:1px solid var(--border); font-size:13px; font-weight:700; }
  .schedule-row{ background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:10px; }
  .schedule-date{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:700; min-width:80px; }
  .schedule-opp{ font-size:14px; font-weight:700; }
  .schedule-meta{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; margin-top:2px; }
  .share-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .share-grid a, .share-grid button{ text-align:center; }
  @media(max-width:600px){ .share-grid{ grid-template-columns:1fr; } }
  .payout-options{ display:flex; flex-direction:column; gap:10px; }
  .payout-option{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--panel2); border:1px solid var(--border2); border-radius:4px; cursor:pointer; font-size:13px; font-family:Arial,sans-serif; transition:border-color .2s; }
  .payout-option:hover{ border-color:var(--red); }
  .payout-option input{ accent-color:var(--red); width:16px; height:16px; }

  /* ============ LANDING PAGE (v2 layout) ============ */
  .lsection{ padding:90px 40px; }
  .lsection.alt{ background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .lsection-inner{ max-width:1200px; margin:0 auto; }
  .lsection-head{ margin-bottom:44px; max-width:640px; }
  .leyebrow{ font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--red); margin-bottom:12px; }
  .ltitle{ font-size:38px; font-weight:900; text-transform:uppercase; letter-spacing:1px; line-height:1.05; margin-bottom:14px; }
  .lsub{ color:var(--muted); font-size:14px; line-height:1.7; font-family:Arial,sans-serif; }

  /* new hero */
  .hero2{ min-height:calc(100vh - 64px); display:flex; align-items:center; padding:60px 40px; position:relative; overflow:hidden; background:radial-gradient(circle at 80% 0%, #1a0505 0%, #000 55%); border-bottom:1px solid var(--border); }
  .hero2-grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(229,57,53,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(229,57,53,.06) 1px,transparent 1px); background-size:50px 50px; pointer-events:none; }
  .hero2-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; position:relative; z-index:1; width:100%; }
  /* A grid track defaults to never shrinking below its content's own min-content width, so one
     long unbroken word (the "RosterWallet" now inside the H1, or a future long one) can force this
     whole column -- and everything else sharing its row -- wider than the screen. min-width:0 on
     the grid item is the standard fix: it lets the column actually shrink to the track's size and
     wrap its own content instead of blowing the row out. */
  .hero2-inner > *{ min-width:0; }
  .hero2-eyebrow{ font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--red); margin-bottom:18px; }
  .hero2 h1{ font-size:52px; font-weight:900; text-transform:uppercase; letter-spacing:1px; line-height:.98; margin-bottom:20px; }
  .hero2 h1 .accent{ color:var(--red); display:block; }
  /* The word "RosterWallet" Bing wanted inside the H1 (see pageHome's own comment) rides inline
     with the rest of the heading on desktop -- these two rules only matter once the mobile media
     query below turns each into its own line. */
  .hero2 h1 .hero2-brand-accent{ color:var(--red); }
  .hero2-sub{ color:var(--muted); font-size:15px; line-height:1.75; font-family:Arial,sans-serif; max-width:480px; margin-bottom:30px; }
  .hero2-sub strong{ color:#fff; }
  .hero2-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
  /* The homepage's "Who's it for?" row, directly under Start A Campaign. Desktop wraps naturally
     (flex-wrap) rather than fighting a fixed column count; the @media rule below switches it to an
     explicit 2x2 grid under 600px, per spec, with min-width:0 on each pill so a slightly longer
     label ("Athletic department") can never force the row wider than the screen. */
  .hero2-whofor{ margin-bottom:44px; }
  .hero2-whofor-label{ font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .hero2-whofor-row{ display:flex; flex-wrap:wrap; gap:10px; }
  .hero2-pill{ padding:9px 16px; font-size:11px; letter-spacing:1.5px; }
  @media(max-width:600px){
    .hero2-whofor-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .hero2-whofor-row > *{ min-width:0; }
    .hero2-pill{ width:100%; text-align:center; }
  }
  .hero2-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:320px; }
  .hero2-stat{ border-top:2px solid var(--red); padding-top:10px; }
  .hero2-stat .n{ font-size:26px; font-weight:900; color:var(--red); }
  .hero2-stat .l{ font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:2px; }

  /* Homepage hero on a phone -- the desktop version above (52px uppercase "ROSTERWALLET: FUND THE
     ROSTER...") was the actual cause of the sideways-scroll bug on an iPhone-width screen: a CSS
     grid column never shrinks below its content's own width by default, so the one long unbroken
     word "ROSTERWALLET:" at 52px forced the whole row wider than the phone, and .hero2's own
     overflow:hidden clipped the result instead of wrapping it (see .hero2-inner > * above for the
     general fix). This rewrites the same markup at every width under 600px: the "RosterWallet"
     brand line drops to eyebrow-sized text of its own line, instead of sharing the giant headline's
     font-size, and the headline itself scales with clamp() instead of a fixed 52px so it can never
     again be wider than the screen that's showing it. */
  @media(max-width:600px){
    .hero2{ padding:40px 20px; }
    .hero2-eyebrow{ font-size:9px; letter-spacing:2px; }
    .hero2 h1{ font-size:11px; letter-spacing:3px; margin-bottom:10px; }
    .hero2 h1 .hero2-brand{ display:block; }
    .hero2 h1 .hero2-headline{ display:block; font-size:clamp(40px, 12vw, 64px); line-height:1.0; letter-spacing:1px; margin-top:10px; }
    .hero2-sub{ font-size:16px; line-height:1.5; max-width:none; }
    .hero2-actions .btn{ width:100%; }
  }

  .comp-card{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:28px; position:relative; overflow:hidden; }
  .comp-card:before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--red); }
  .comp-card-title{ font-size:12px; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
  .comp-head-row{ display:grid; grid-template-columns:1fr 90px 90px; gap:8px; margin-bottom:6px; }
  .comp-head-row span{ font-size:10px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; text-align:center; color:var(--muted); }
  .comp-head-row span:first-child{ text-align:left; visibility:hidden; }
  .comp-head-row span.them{ color:#ff6b6b; }
  .comp-head-row span.us{ color:var(--green); }
  .comp-row2{ display:grid; grid-template-columns:1fr 90px 90px; gap:8px; padding:9px 0; border-bottom:1px solid #1a1a1a; align-items:center; }
  .comp-row2 .l{ font-size:12px; color:#ccc; font-family:Arial,sans-serif; }
  .comp-row2 .them{ text-align:center; font-weight:900; font-size:13px; color:#ff6b6b; }
  .comp-row2 .us{ text-align:center; font-weight:900; font-size:13px; color:var(--green); }
  .comp-totals{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
  .comp-total-box{ padding:14px; border-radius:4px; text-align:center; }
  .comp-total-box.bad{ background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.3); }
  .comp-total-box.good{ background:rgba(0,200,83,.08); border:1px solid rgba(0,200,83,.3); }
  .comp-total-box .l2{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .comp-total-box .n2{ font-size:24px; font-weight:900; }
  .comp-total-box.bad .n2{ color:#ff6b6b; } .comp-total-box.good .n2{ color:var(--green); }

  .hero-highlight-list{ display:flex; flex-direction:column; gap:18px; }
  .hero-highlight-item{ display:flex; gap:14px; align-items:flex-start; }
  .hero-highlight-ico{ font-size:22px; line-height:1; flex-shrink:0; width:32px; text-align:center; }
  .hero-highlight-item strong{ font-size:14px; color:#fff; }
  .hero-highlight-item p{ margin:3px 0 0; font-size:12.5px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.55; }

  .problem-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
  .problem-list2{ display:flex; flex-direction:column; gap:14px; }
  .problem-item2{ display:flex; gap:14px; padding:16px; background:rgba(255,107,107,.05); border:1px solid rgba(255,107,107,.2); border-left:3px solid #ff6b6b; border-radius:2px; }
  .problem-item2 .ic{ font-size:20px; flex-shrink:0; }
  .problem-item2 h4{ font-size:12px; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
  .problem-item2 p{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.5; }
  .fee-visual{ background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:26px; }
  .fee-visual-title{ font-size:11px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
  .fee-row2{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .fee-row2 .fl{ font-size:11px; color:var(--muted); width:130px; font-family:Arial,sans-serif; flex-shrink:0; }
  .fee-bar-track{ flex:1; height:8px; background:#222; border-radius:4px; overflow:hidden; }
  .fee-bar-fill2{ height:100%; background:#ff6b6b; border-radius:4px; }
  .fee-row2 .fa{ width:56px; text-align:right; font-size:12px; font-weight:900; color:#ff6b6b; }
  .fee-total-row2{ display:flex; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
  .fee-total-row2 .ftl{ font-size:12px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
  .fee-total-row2 .fta{ font-size:20px; font-weight:900; color:#ff6b6b; }

  .calc-box2{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:40px; position:relative; }
  .calc-box2:before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--red); }
  .calc-inputs2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px; }
  .calc-results2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .calc-col{ padding:18px; border-radius:4px; }
  .calc-col.them{ background:rgba(255,107,107,.05); border:1px solid rgba(255,107,107,.25); }
  .calc-col.us{ background:rgba(0,200,83,.05); border:1px solid rgba(0,200,83,.25); }
  .calc-col-head{ font-size:11px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
  .calc-col.them .calc-col-head{ color:#ff6b6b; } .calc-col.us .calc-col-head{ color:var(--green); }
  .calc-line2{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:8px; font-family:Arial,sans-serif; }
  .calc-line2 .cl{ color:var(--muted); }
  .calc-line2 .cv.red{ color:#ff6b6b; font-weight:700; } .calc-line2 .cv.green{ color:var(--green); font-weight:700; }
  .calc-total2{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
  .calc-total2 .n3{ font-size:24px; font-weight:900; }
  .calc-col.them .n3{ color:#ff6b6b; } .calc-col.us .n3{ color:var(--green); }
  .calc-savings2{ margin-top:20px; padding:18px; background:rgba(229,57,53,.08); border:1px solid rgba(229,57,53,.3); border-radius:4px; text-align:center; }
  .calc-savings2 .sl{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
  .calc-savings2 .sn{ font-size:34px; font-weight:900; color:var(--red); }
  .calc-footnote{ text-align:center; font-size:11px; color:var(--dim); font-family:Arial,sans-serif; margin-top:14px; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.5; }

  .testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .testi-card{ background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:26px; position:relative; }
  .testi-stars{ color:var(--red); font-size:13px; margin-bottom:10px; letter-spacing:2px; }
  .testi-text{ font-size:13px; color:#ccc; font-style:italic; line-height:1.7; font-family:Arial,sans-serif; margin-bottom:18px; }
  .testi-author{ display:flex; align-items:center; gap:10px; }
  .testi-avatar{ width:36px; height:36px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; }
  .testi-name{ font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
  .testi-role{ font-size:10px; color:var(--muted); font-family:Arial,sans-serif; }

  .sister-callout{ background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:30px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
  .sister-callout-icon{ font-size:34px; flex-shrink:0; }
  .sister-callout h4{ font-size:15px; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
  .sister-callout p{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.6; max-width:520px; }
  .final-cta{ background:linear-gradient(135deg,#1a0505,#000); border-top:1px solid var(--border); padding:90px 40px; text-align:center; }
  .final-cta h2{ font-size:36px; font-weight:900; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
  .final-cta p{ color:var(--muted); font-size:14px; font-family:Arial,sans-serif; margin-bottom:30px; }

  @media(max-width:900px){ .hero2-inner{ grid-template-columns:1fr; } .problem-grid2{ grid-template-columns:1fr; } .calc-inputs2,.calc-results2{ grid-template-columns:1fr; } .testi-grid{ grid-template-columns:1fr; } .ltitle{ font-size:28px;} }

  /* ============ WIZARD ============ */
  .wiz-wrap{ max-width:820px; margin:0 auto; padding:50px 40px; }
  .wiz-progress{ display:flex; justify-content:space-between; margin-bottom:36px; position:relative; }
  .wiz-progress:before{ content:''; position:absolute; top:16px; left:16px; right:16px; height:2px; background:var(--border); z-index:0; }
  .wiz-dot-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; z-index:1; flex:1; }
  .wiz-dot{ width:32px; height:32px; border-radius:50%; background:var(--panel2); border:2px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:var(--muted); }
  .wiz-dot.active{ border-color:var(--red); color:var(--red); background:#1a0505; }
  .wiz-dot.done{ border-color:var(--red); background:var(--red); color:#fff; }
  .wiz-step-label{ font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--red); margin-bottom:8px; }
  .wiz-nav{ display:flex; justify-content:space-between; margin-top:30px; }
  .wiz-review-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #1a1a1a; font-size:12px; font-family:Arial,sans-serif; }
  .wiz-review-row .rl{ color:var(--muted); } .wiz-review-row .rv{ color:#fff; font-weight:700; }
  .split-bar{ display:flex; height:14px; border-radius:8px; overflow:hidden; margin:14px 0 6px; }
  .split-bar div:nth-child(1){ background:var(--red); }
  .split-bar div:nth-child(2){ background:var(--green); }
  .split-bar div:nth-child(3){ background:#666; }
  .split-legend{ display:flex; gap:16px; font-size:11px; color:var(--muted); font-family:Arial,sans-serif; flex-wrap:wrap; }
  .split-legend span{ display:flex; align-items:center; gap:6px; }
  .split-legend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }
  .split-slider-row{ display:grid; grid-template-columns:150px 1fr 50px; gap:14px; align-items:center; margin-bottom:16px; }
  .split-slider-row .ssl{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.3; }
  .split-slider-row .ssl > span{ display:flex; align-items:center; gap:8px; }
  .split-slider-row .ssl small{ color:var(--dim); font-size:9px; font-weight:400; }
  .split-slider-row .ssl i{ width:10px; height:10px; border-radius:2px; display:inline-block; flex-shrink:0; }
  .split-slider-row .ssv{ font-size:14px; font-weight:900; text-align:right; }
  .split-slider{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:var(--border2); outline:none; }
  .split-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--red); cursor:pointer; border:2px solid #fff; }
  .split-slider::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--red); cursor:pointer; border:2px solid #fff; }
  .wiz-dot-label{ font-size:9px; letter-spacing:.5px; text-transform:uppercase; color:var(--dim); text-align:center; }

  /* AI Store Generator */
  .ai-audience-chip{ background:var(--panel2); border:1px solid var(--border2); border-radius:20px; padding:8px 16px; font-size:11px; font-weight:700; cursor:pointer; font-family:Arial,sans-serif; text-transform:none; letter-spacing:0; }
  .ai-audience-chip.checked{ border-color:var(--green); color:var(--green); }
  .ai-checklist{ display:flex; flex-direction:column; gap:12px; }
  .ai-check-row{ font-size:13px; color:var(--dim); font-family:Arial,sans-serif; transition:color .3s; }
  .ai-check-row.done{ color:var(--green); font-weight:700; }
  .ai-product-card{ }
  .ai-mockup-text{ font-size:12px; color:#ccc; font-family:Arial,sans-serif; margin-top:8px; line-height:1.6; }
  .ai-mockup-text strong{ color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:1px; }
  .ai-note{ font-size:11px; color:#d4a83c; font-family:Arial,sans-serif; margin-top:10px; background:rgba(212,168,60,.08); border:1px solid rgba(212,168,60,.25); border-radius:4px; padding:8px 10px; }
  .ai-price-box{ background:#0a0a0a; border:1px solid var(--border); border-radius:4px; padding:14px; min-width:180px; flex-shrink:0; }
  .ai-price-row{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); padding:3px 0; font-family:Arial,sans-serif; }
  .ai-price-row.total{ border-top:1px solid var(--border); margin-top:6px; padding-top:8px; color:var(--green); font-weight:900; font-size:13px; }
  .ai-card-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px; }
  .ai-summary-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  @media(max-width:700px){ .ai-summary-grid{ grid-template-columns:1fr 1fr; } }

  .region-toggle{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; background:var(--panel); border-bottom:1px solid var(--border); padding:10px 20px; }
  .region-toggle .rt-label{ font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
  .rt-btn{ background:var(--panel2); border:1px solid var(--border2); color:#ccc; padding:6px 14px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.5px; cursor:pointer; transition:all .2s; }
  .rt-btn:hover{ border-color:var(--red); color:#fff; }
  .rt-btn.active{ background:var(--red); border-color:var(--red); color:#fff; }

  /* ===== Print stylesheet: Player Sign-Up Instructions, one page ===== */
  @media print {
    nav, .region-toggle { display:none !important; }
    body { background:#fff !important; color:#000 !important; }
    .instructions-print { max-width:100% !important; padding:10px 16px !important; }
    .instructions-print .btn, .instructions-print .btn-outline, .instructions-print button { display:none !important; }
    .instructions-print > p { font-size:9px !important; line-height:1.3 !important; color:#333 !important; margin-bottom:10px !important; }
    .instructions-print .section-label { font-size:8px !important; margin-bottom:2px !important; color:#000 !important; }
    .instructions-print .section-title { font-size:15px !important; margin-bottom:8px !important; border-left:2px solid #000 !important; padding-left:8px !important; color:#000 !important; }
    .instructions-print .card { padding:8px 14px !important; margin-bottom:6px !important; border:1px solid #ccc !important; background:#fff !important; page-break-inside:avoid; }
    .instructions-print .card .section-label { margin-top:0 !important; }
    .instructions-print #joinQr canvas, .instructions-print #joinQr img, .instructions-print #joinQr table { width:70px !important; height:70px !important; margin:4px auto !important; }
    .instructions-print .how-grid { gap:2px 14px !important; }
    .instructions-print .how-step { padding:3px !important; text-align:left !important; }
    .instructions-print .how-num { width:18px !important; height:18px !important; font-size:10px !important; margin:0 0 3px 0 !important; background:#000 !important; color:#fff !important; }
    .instructions-print .how-title { font-size:9.5px !important; margin-bottom:1px !important; color:#000 !important; }
    .instructions-print .how-desc { font-size:8px !important; line-height:1.25 !important; color:#333 !important; }
    .instructions-print p { color:#000 !important; }
  }

  /* ===================== GOLF JOURNEY CAMPAIGNS ===================== */
  .golf-kpis{ grid-template-columns:repeat(2,1fr); }
  .golf-next{ margin:18px auto 0; max-width:640px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-family:Arial,sans-serif; }
  .golf-next b{ color:#fff; letter-spacing:1px; }
  .golf-ms{ padding:14px 0; border-bottom:1px solid var(--border); }
  .golf-ms:last-child{ border-bottom:none; }
  .golf-ms-top{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:8px; }
  .golf-ms-title{ font-weight:900; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
  .golf-ms-amt{ font-weight:900; font-size:14px; white-space:nowrap; }
  .golf-ms-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; font-size:11px; color:var(--muted); font-family:Arial,sans-serif; flex-wrap:wrap; }
  .golf-ms-note{ margin-top:6px; font-size:11px; color:var(--dim); font-family:Arial,sans-serif; }
  .golf-ms.current .golf-ms-title{ color:var(--red); }
  .golf-ms.funded .progress-fill{ background:var(--green); }
  .golf-fact{ padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; font-family:Arial,sans-serif; line-height:1.6; }
  .golf-fact:last-child{ border-bottom:none; }
  .golf-fact > span{ display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
  /* golfGoalListHtml's own list, when a golfer's season goals split into more than one -- same
     font/line-height as the plain-text version it replaces, just one goal per line instead of
     them all running together in one sentence. */
  .golf-goal-list{ margin:0; padding-left:18px; }
  .golf-goal-list li{ margin-bottom:4px; }
  .golf-goal-list li:last-child{ margin-bottom:0; }
  .golf-supporter{ padding:10px 0; border-bottom:1px solid var(--border); font-family:Arial,sans-serif; }
  .golf-supporter:last-child{ border-bottom:none; }
  .golf-supporter-top{ display:flex; justify-content:space-between; gap:10px; font-size:13px; flex-wrap:wrap; }
  .golf-supporter-top span{ color:var(--muted); font-size:12px; }
  .golf-supporter-msg{ margin-top:4px; font-size:13px; color:var(--muted); line-height:1.6; }
  .golf-add{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .golf-ms-edit{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 0; }
  .golf-ms-edit .input{ flex:1; min-width:130px; }
  .golf-road{ display:flex; flex-direction:column; }
  .golf-stage{ display:flex; gap:14px; align-items:center; padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:var(--panel2); }
  .golf-stage-dot{ width:26px; height:26px; border-radius:50%; border:2px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; flex:none; color:var(--muted); }
  .golf-stage-label{ font-weight:900; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
  .golf-stage-meta{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; margin-top:2px; }
  .golf-stage.completed{ border-color:rgba(0,200,83,.5); }
  .golf-stage.completed .golf-stage-dot{ background:var(--green); border-color:var(--green); color:#000; }
  .golf-stage.current{ border-color:var(--red); }
  .golf-stage.current .golf-stage-dot{ border-color:var(--red); color:var(--red); }
  .golf-stage.planned{ opacity:.7; }
  .golf-stage-arrow{ text-align:center; color:var(--dim); font-size:14px; line-height:1.4; }
  .golf-update{ padding:14px 0; border-bottom:1px solid var(--border); }
  .golf-update:last-child{ border-bottom:none; }
  .golf-update-top{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--muted); font-family:Arial,sans-serif; }
  .golf-update-title{ font-weight:900; font-size:14px; margin-top:8px; }
  .golf-video{ position:relative; padding-top:56.25%; margin-top:8px; border-radius:6px; overflow:hidden; background:#000; }
  .golf-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .golf-sponsor-tile{ display:flex; align-items:center; justify-content:center; background:#fff; border-radius:6px; padding:12px 18px; min-height:48px; }
  .golf-pack{ padding:14px 0; border-bottom:1px solid var(--border); }
  .golf-pack:last-of-type{ border-bottom:none; }
  .golf-pack-top{ display:flex; justify-content:space-between; gap:10px; font-size:14px; margin-bottom:6px; }
  .golf-pack-desc{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; margin-bottom:6px; }
  .golf-pack-list{ margin:0 0 12px 18px; padding:0; font-size:12px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.7; }
  .golf-bars{ display:flex; align-items:flex-end; gap:3px; height:80px; margin-top:16px; }
  .golf-bar{ flex:1; background:var(--red); min-height:2px; border-radius:2px 2px 0 0; opacity:.85; }
  .golf-bars-axis{ display:flex; justify-content:space-between; font-size:10px; color:var(--dim); font-family:Arial,sans-serif; margin-top:4px; }
  .golf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:20px; }
  .golf-card{ background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:18px; cursor:pointer; }
  .golf-card:hover{ border-color:var(--red); }
  .golf-card-top{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
  .golf-card-top img, .golf-card-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; }
  .golf-card-avatar{ background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; }
  .golf-card-name{ font-weight:900; font-size:14px; letter-spacing:1px; text-transform:uppercase; }
  .golf-card-sub{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; margin-top:2px; }
  .golf-card-path{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; margin-bottom:10px; }
  .golf-card-money{ font-size:13px; margin-bottom:8px; }
  .golf-card-foot{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; margin-top:8px; line-height:1.5; }
  .golf-home-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
  @media(max-width:900px){ .golf-home-grid{ grid-template-columns:1fr; } }

  /* ===================== SPONSOR FINDER =====================
     AI-assisted local business outreach. Coach/admin only — players
     never send these. Uses var(--red) throughout so the Kentucky
     blue campaign theme carries over automatically. */
  .sp-locbox{ display:flex; align-items:center; gap:12px; background:var(--panel2); border:1px solid var(--border2); border-radius:6px; padding:14px 16px; max-width:460px; }
  .sp-locbox .sp-pin{ color:var(--red); font-size:16px; }
  .sp-locbox .sp-loc{ font-size:13px; font-weight:900; letter-spacing:1px; }
  .sp-locbox .sp-edit{ margin-left:auto; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); cursor:pointer; border-bottom:1px solid var(--border2); }
  .sp-locbox .sp-edit:hover{ color:var(--red); border-color:var(--red); }

  .sp-radius{ width:100%; max-width:460px; accent-color:var(--red); height:28px; }
  .sp-radius-read{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; margin-top:2px; }

  .sp-chips{ display:flex; flex-wrap:wrap; gap:9px; }
  .sp-chip{ background:var(--panel2); border:1px solid var(--border2); border-radius:20px; padding:9px 16px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:all .15s; }
  .sp-chip:hover{ border-color:var(--red); color:#fff; }
  .sp-chip.on{ background:var(--red); border-color:var(--red); color:#fff; }

  .sp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
  .sp-card{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:18px; cursor:pointer; position:relative; transition:all .15s; }
  .sp-card:hover{ border-color:var(--border2); transform:translateY(-2px); }
  .sp-card.on{ border-color:var(--red); background:var(--panel2); }
  .sp-card.on:after{ content:'✓'; position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; }
  .sp-name{ font-size:14px; font-weight:900; letter-spacing:.5px; padding-right:28px; }
  .sp-meta{ font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:6px; }
  .sp-why{ font-size:11.5px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.6; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
  .sp-card.sp-taken{ opacity:.5; cursor:default; }
  .sp-card.sp-taken:hover{ transform:none; border-color:var(--border); }
  .sp-owner-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--panel2); border:1px dashed var(--border2); border-radius:6px; padding:12px 16px; margin-bottom:20px; }
  .sp-owner-bar .sp-ob-tag{ font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--dim); }

  /* flip card — the draft lives on the back, coach must turn it to read */
  .sp-flip{ perspective:1400px; height:290px; }
  .sp-flip-in{ position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.4,.1,.2,1); transform-style:preserve-3d; cursor:pointer; }
  .sp-flip.on .sp-flip-in{ transform:rotateY(180deg); }
  .sp-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:6px; padding:18px; display:flex; flex-direction:column; overflow:hidden; }
  .sp-face.sp-front{ background:var(--panel); border:1px solid var(--border); }
  .sp-face.sp-back{ background:var(--panel2); border:1px solid var(--red); transform:rotateY(180deg); }
  .sp-cue{ margin-top:auto; font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--red); display:flex; align-items:center; gap:8px; }
  .sp-cue:before{ content:''; width:18px; height:1px; background:var(--red); }
  .sp-draft-head{ font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--red); margin-bottom:10px; flex:none; }
  .sp-draft{ font-size:11.5px; line-height:1.65; color:#ddd; font-family:Arial,sans-serif; overflow-y:auto; flex:1; }
  .sp-draft b{ color:#fff; }
  .sp-draft-foot{ flex:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--border2); display:flex; gap:14px; }
  .sp-draft-foot span{ font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--muted); cursor:pointer; }
  .sp-draft-foot span:hover{ color:var(--red); }

  .sp-inbox{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--panel2); border:1px solid var(--border2); border-left:3px solid var(--green); border-radius:6px; padding:14px 16px; }
  .sp-inbox .sp-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; flex:none; }
  .sp-inbox .sp-addr{ font-size:12px; font-weight:900; letter-spacing:1px; }
  .sp-inbox .sp-sub{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; }

  .sp-row{ display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .sp-row .sp-rn{ font-size:12.5px; font-weight:700; flex:1; min-width:150px; }
  .sp-state{ font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--dim); flex:none; }
  .sp-state.sent{ color:var(--green); }

  .sp-note{ font-size:11.5px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.7; border-left:2px solid var(--border2); padding-left:14px; }
  .sp-note b{ color:#ddd; }

  .sp-bar-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .sp-bar-lbl{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; width:130px; flex:none; }
  .sp-bar-track{ flex:1; height:18px; background:var(--panel2); border-radius:3px; overflow:hidden; }
  .sp-bar-fill{ height:100%; background:var(--border2); }
  .sp-bar-fill.top{ background:var(--red); }
  .sp-bar-val{ font-size:11px; font-weight:900; width:38px; flex:none; text-align:right; }

  @media(max-width:700px){
    .sp-bar-lbl{ width:96px; font-size:10px; }
    .sp-flip{ height:310px; }
  }
  @media(prefers-reduced-motion:reduce){
    .sp-flip-in, .sp-card{ transition:none; }
  }
  /* --- NIL media profile --- */
  .nil-help{ font-size:13px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.65; margin:0 0 16px; }
  .nil-nav{ display:flex; gap:8px; align-items:center; margin-top:22px; flex-wrap:wrap; }
  .nil-nav .btn{ flex:1 1 auto; min-height:46px; }
  .nil-nav .btn-sm{ flex:0 0 auto; }
  .nil-row-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
  .nil-pkg{ border:1px solid var(--border2); border-radius:6px; padding:12px; margin-bottom:10px; display:flex; flex-direction:column; gap:8px; }
  .nil-stat-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
  .nil-stat-row .input{ margin:0; }
  @media(max-width:480px){ .nil-stat-row{ grid-template-columns:1fr 1fr; } .nil-stat-row .btn{ grid-column:1 / -1; } }
  .nil-photos{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .nil-photo{ position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; border:1px solid var(--border2); background:var(--panel2); }
  .nil-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .nil-photo-x{ position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(0,0,0,.66); color:#fff; font-size:17px; line-height:1; cursor:pointer; }
  .nil-photo-add{ display:flex; align-items:center; justify-content:center; cursor:pointer; border-style:dashed; }
  .nil-photo-add span{ font-size:30px; color:var(--muted); }
  .nil-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:1px solid var(--border2); background:#000; }
  .nil-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .nil-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; text-align:center; }
  .nil-stat-tile{ border:1px solid var(--border2); border-radius:6px; padding:10px 8px; background:var(--panel2); }
  .nil-stat-tile .v{ font-size:18px; font-weight:900; color:var(--red); line-height:1.2; }
  .nil-stat-tile .l{ font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-top:3px; font-family:Arial,sans-serif; }
  .nil-spinner{ width:34px; height:34px; border:3px solid var(--border2); border-top-color:var(--red); border-radius:50%; margin:0 auto; animation:nilspin .9s linear infinite; }
  @keyframes nilspin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .nil-spinner{ animation:none; } }
  @media(min-width:700px){ .nil-photos{ grid-template-columns:repeat(4,1fr); } }
  /* Stops iOS Safari zooming the page when a field gets focus. */
  @media(max-width:600px){
    .nil-nav .btn{ width:100%; }
    /* iOS zooms the whole page when a focused field is under 16px. The
       textarea rule needs the element selector too — .input alone loses to
       the existing textarea styling. */
    #nilBody input.input, #nilBody textarea.input, #nilBody select.input{ font-size:16px; }
    /* Thumb-sized targets. The shared .btn-sm is 32px, which is fine for a
       mouse and awkward on a phone — raised only inside this flow so nothing
       else shifts. */
    #nilBody .btn, #nilBody .btn-sm{ min-height:46px; }
    .nil-photo-x{ width:34px; height:34px; font-size:20px; }
  }
  /* --- schedule & budget upload --- */
  .up-help{ font-size:13px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.65; margin:0 0 14px; }
  .up-drop{ display:block; border:2px dashed var(--border2); border-radius:8px; padding:30px 18px; text-align:center; cursor:pointer; background:var(--panel2); }
  .up-drop:hover{ border-color:var(--red); }
  .up-drop-icon{ font-size:32px; margin-bottom:8px; }
  .up-drop-main{ font-weight:700; font-size:14px; margin-bottom:4px; }
  .up-drop-sub{ font-size:11px; color:var(--muted); font-family:Arial,sans-serif; }
  .up-rows{ display:flex; flex-direction:column; gap:12px; }
  .up-row{ border:1px solid var(--border2); border-radius:6px; padding:12px; }
  .up-row.flagged{ border-color:#c9a227; background:rgba(201,162,39,.06); }
  .up-flag{ font-size:11px; color:#e0b93a; font-family:Arial,sans-serif; margin-bottom:8px; font-weight:700; }
  .up-row-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
  .up-row-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .up-toggle{ display:flex; gap:0; border:1px solid var(--border2); border-radius:4px; overflow:hidden; }
  .up-tog{ background:none; border:none; color:var(--muted); padding:9px 16px; font-size:11px; font-weight:700; letter-spacing:.5px; cursor:pointer; min-height:40px; }
  .up-tog.on{ background:var(--red); color:#fff; }
  .up-cat{ border:1px solid var(--border2); border-radius:6px; padding:12px; margin-bottom:12px; }
  .up-cat.is-hidden{ opacity:.5; }
  .up-item{ display:grid; grid-template-columns:1fr; gap:6px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--border2); }
  .up-item.is-hidden{ opacity:.45; }
  .up-preview{ border:1px solid var(--border2); border-radius:6px; padding:14px; margin-bottom:16px; background:var(--panel2); }
  .up-prev-row{ margin-bottom:10px; }
  .up-prev-top{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
  .up-prev-top .amt{ color:var(--muted); }
  .up-prev-total{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; padding-top:8px; border-top:1px solid var(--border2); }
  @media(min-width:640px){
    .up-row-grid{ grid-template-columns:1fr 1fr; }
    .up-item{ grid-template-columns:1fr 130px auto; align-items:center; }
  }
  @media(max-width:600px){
    #upBody .input, #wizBody .input{ font-size:16px; }
    #upBody .btn, #wizBody .btn{ min-height:46px; }
  }
  /* --- supporter sweepstakes --- */
  .sweep-card{ border-left:3px solid var(--red); }
  .sweep-lead{ font-size:14px; line-height:1.75; margin:0 0 12px; }
  .sweep-tiers{ display:grid; grid-template-columns:1fr; gap:6px; margin-top:14px; }
  .sweep-tier{ display:flex; justify-content:space-between; padding:9px 12px; border:1px solid var(--border2); border-radius:4px; font-size:13px; }
  .sweep-tier .amt{ color:var(--red); font-weight:700; }
  /* Both routes in are the same size with the same button treatment. The
     headline sells contributing; this is what keeps the free path from
     becoming a footnote underneath it. */
  .sweep-routes{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px; }
  .sweep-route{ border:1px solid var(--border2); border-radius:6px; padding:16px; background:var(--panel2); display:flex; flex-direction:column; }
  .sweep-route-title{ font-weight:700; font-size:14px; margin-bottom:6px; }
  .sweep-route-text{ font-size:12px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.6; margin:0 0 14px; flex:1; }
  .sweep-legal{ margin-top:16px; padding:12px 14px; border:1px solid var(--border2); border-radius:4px; font-size:11px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.7; }
  .sweep-legal strong{ color:#fff; letter-spacing:.4px; }
  .sweep-result{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border2); }
  .sweep-hash{ font-family:monospace; font-size:10px; color:var(--muted); word-break:break-all; margin:6px 0 0; }
  @media(min-width:620px){
    .sweep-routes{ grid-template-columns:1fr 1fr; }
    .sweep-tiers{ grid-template-columns:repeat(3,1fr); }
  }
  @media(max-width:600px){
    #swBody .input, #enterBody .input{ font-size:16px; }
    #swBody .btn, #enterBody .btn, .sweep-route .btn{ min-height:46px; }
  }
  /* ---- Mobile overrides. Last on purpose: these exist to beat the component
     rules above, and a block placed earlier loses to them. ---- */
  @media(max-width:900px){
    .input, input.input, textarea.input, select.input,
    input[type="text"], input[type="email"], input[type="number"],
    input[type="tel"], input[type="password"], input[type="search"],
    textarea, select{ font-size:16px; }
  }

  /* Big enough to hit. 44px is the smallest target Apple calls reliable, and
     the small button style is 28px. */
  @media(max-width:900px){
    .btn, .btn-sm, .donate-btn, .cat-nav-item, .kd-view, .kd-pat, .kd-preset,
    .rt-btn, .del-x,
    .admin-tab-select{
      min-height:44px;
      display:inline-flex; align-items:center; justify-content:center;
    }
    /* Several buttons are laid out full width by an inline style, which beats
       a stylesheet — !important here is aimed at that, not at specificity. */
    .btn[style*="display:block"]{ display:flex !important; }
    /* The nav keeps smaller buttons so the two-row nav does not grow back —
       36px is still a third bigger than the 28px it was. */
    nav .btn, nav .btn-sm{ min-height:34px; }
  }

  /* Campaign page sideways-scroll on a phone (~390px). Root cause: .player-grid, .store-grid and
     .how-grid are each a plain `grid-template-columns: repeat(3, 1fr)`, and a bare 1fr track never
     shrinks below its content's own min-content width -- the existing @media(max-width:600px) rule
     further up this file that tries to collapse them to one column is itself overridden, because
     the plain (3-column) versions of these same three classes are declared AGAIN, later in this
     file, at equal specificity, and a later rule wins a tie. Re-asserting the one-column version
     here, after everything else, is what actually makes it stick. Once the roster grid can shrink
     to the real column width instead of forcing it to ~467px, every OTHER card sharing that same
     column (About/Our Story included, even though its own text was never the cause) stops being
     dragged along with it. Scoped to body.on-campaign-page so nothing outside the public campaign
     page is touched -- player pages don't use any of these three classes and were already clean. */
  @media(max-width:600px){
    body.on-campaign-page .player-grid,
    body.on-campaign-page .store-grid,
    body.on-campaign-page .how-grid{ grid-template-columns:1fr; }
    /* Belt-and-suspenders for the grid column itself, and explicit hardening for the About/Our
       Story card specifically, exactly as asked: a fixed width or wide margin can't push it
       off-screen, and a long line in a club's own story text can't refuse to wrap either. */
    body.on-campaign-page .main > div{ min-width:0; }
    body.on-campaign-page .card{ width:100%; max-width:100%; box-sizing:border-box; padding:18px; }
    body.on-campaign-page .card p{ overflow-wrap:break-word; word-break:normal; font-size:16px; line-height:1.5; }
  }

/* ===== University / foundation messaging (flag: universities) =====
   New classes only -- nothing above this line is changed. Uses the site's own colour variables so
   it follows the light/dark/team themes like everything else. */
.trust-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; padding:18px 40px; background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-item{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--border2); border-radius:999px; font-family:Arial,sans-serif; font-size:12px; letter-spacing:.3px; color:var(--muted); background:var(--black); line-height:1.3; }
.trust-ico{ font-size:15px; line-height:1; }
@media(max-width:700px){ .trust-strip{ padding:14px 16px; gap:8px; } .trust-item{ font-size:11.5px; padding:7px 12px; } }

.faq-list{ max-width:820px; margin:0; display:grid; gap:12px; }
.faq-item{ background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:0 22px; }
.faq-item summary{ cursor:pointer; list-style:none; padding:18px 0; font-size:14px; text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; float:right; color:var(--red); font-size:20px; line-height:1; }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ color:var(--muted); font-family:Arial,sans-serif; font-size:14px; line-height:1.7; padding:0 0 20px; margin:0; }
.faq-item summary:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.uni-compare{ max-width:980px; margin:0 auto; border:1px solid var(--border2); border-radius:4px; overflow:hidden; background:var(--panel); }
.uni-row{ display:grid; grid-template-columns:1.1fr 1.3fr 1.9fr; border-top:1px solid var(--border); }
.uni-row:first-child{ border-top:none; }
.uni-row > div{ padding:16px 20px; font-family:Arial,sans-serif; font-size:14px; line-height:1.55; }
.uni-head > div{ font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); background:var(--panel2); }
.uni-head > .uni-us{ color:var(--red); }
.uni-label{ font-weight:700; color:inherit; }
.uni-them{ color:var(--muted); }
.uni-row .uni-us{ border-left:3px solid var(--red); }
.uni-head > .uni-us{ border-left:3px solid var(--red); }
@media(max-width:700px){
  .uni-head{ display:none; }
  .uni-row{ grid-template-columns:1fr; }
  .uni-row > div{ padding:10px 18px; }
  .uni-label{ padding-top:16px !important; font-size:15px !important; }
  .uni-them::before, .uni-us::before{ content:attr(data-label); display:block; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); margin-bottom:3px; }
  .uni-row .uni-us{ border-left:3px solid var(--red); margin-bottom:10px; }
}

.uni-flow{ display:flex; align-items:stretch; justify-content:center; gap:14px; flex-wrap:wrap; max-width:980px; margin:0 auto; }
.uni-flow-step{ flex:1 1 220px; max-width:300px; background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:24px 20px; text-align:center; font-family:Arial,sans-serif; font-size:14px; line-height:1.5; }
.uni-flow-step strong{ display:block; }
.uni-flow-num{ width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 12px; }
.uni-flow-arrow{ align-self:center; color:var(--red); font-size:26px; }
@media(max-width:760px){ .uni-flow{ flex-direction:column; align-items:center; } .uni-flow-step{ width:100%; max-width:420px; flex:0 0 auto; } .uni-flow-arrow{ transform:rotate(90deg); } }

.uni-four{ grid-template-columns:repeat(2,1fr); max-width:980px; margin:0 auto; }
@media(max-width:600px){ .uni-four{ grid-template-columns:1fr; } }

/* The /universities headline has a 12-letter word in it, which the shared phone headline size would clip. */
@media(max-width:700px){ .hero2 h1.uni-h1 .hero2-headline{ font-size:clamp(24px, 7.4vw, 44px); overflow-wrap:anywhere; } .hero2 h1.uni-h1 .accent{ margin-top:4px; } }

.uni-banner{ max-width:820px; margin:0 auto; text-align:center; border:1px solid var(--red); border-radius:4px; padding:30px 28px; background:var(--panel); }
.uni-banner p{ font-family:Arial,sans-serif; font-size:17px; line-height:1.6; margin:0; }

.uni-contact{ max-width:560px; margin:0 auto; text-align:center; }
.uni-contact-name{ font-size:20px; font-weight:700; }
.uni-contact-role{ color:var(--muted); font-family:Arial,sans-serif; font-size:13px; margin-bottom:12px; }
.uni-contact-lines{ display:flex; flex-direction:column; gap:6px; font-family:Arial,sans-serif; font-size:15px; }
.uni-contact-lines a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }