/* ============================================================
   Eggbeater — Flagship Marketing Site
   Liquid-glass design system, scoped under .ebSite
   Built on the Eggbeater Water Polo brand tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

.ebSite {
  /* ── Brand ─────────────────────────────────────────── */
  --royal:        #002868;
  --royal-dark:   #001a4a;
  --royal-deep:   #000f2e;   /* deepest abyss */
  --royal-mid:    #1a4898;
  --navy-cta:     #1d4ed8;

  --teal-deep:    #0d4044;
  --teal-brand:   #155c63;
  --teal-mid:     #0d8a93;
  --teal-bright:  #4dd6d2;
  --teal-glow:    #6ff0ec;

  --gold:         #c7901c;
  --gold-light:   #e6c987;

  --red-live:     #ff4d4d;
  --green:        #34d399;

  /* Neutrals (cool) */
  --ink:          #0a1124;
  --gray-900:     #11182b;
  --gray-700:     #334155;
  --gray-600:     #475569;
  --gray-500:     #64748b;
  --gray-400:     #94a3b8;
  --gray-300:     #cbd5e1;
  --gray-200:     #e2e8f0;
  --gray-100:     #eef1f7;
  --gray-50:      #f6f8fc;
  --white:        #ffffff;

  /* Accent (tweakable) */
  --accent:       var(--teal-bright);
  --accent-glow:  var(--teal-glow);
  --accent-deep:  var(--teal-mid);

  /* Glass (intensity tweakable) — cool underwater tint */
  --glass-blur:   22px;
  --glass-sat:    150%;
  --glass-bg:     rgba(86,168,190,0.16);
  --glass-bg-2:   rgba(14,44,68,0.12);
  --glass-brd:    rgba(180,235,240,0.22);
  --glass-hi:     rgba(220,255,255,0.5);

  /* Type */
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Radii — Apple continuous-corner feel */
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  --maxw: 100%;

  font-family: var(--font);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv11";
  text-rendering: optimizeLegibility;
}
.ebSite *, .ebSite *::before, .ebSite *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ebSite button, .ebSite a { font-family: inherit; text-decoration: none; color: inherit; cursor: pointer; border: none; }
.ebSite button { background: none; }
.ebSite img { display: block; max-width: 100%; }
.ebSite ::selection { background: var(--accent); color: var(--royal-deep); }
.ebSite a:focus-visible, .ebSite button:focus-visible, .ebSite input:focus-visible {
  outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .ebSite *, .ebSite *::before, .ebSite *::after { animation: none !important; transition-duration: .01ms !important; }
  .ebSite .reveal { opacity: 1 !important; transform: none !important; }
}

/* Glass intensity presets (set on .ebSite via data-glass) */
.ebSite[data-glass="subtle"] { --glass-blur: 12px; --glass-bg: rgba(86,168,190,0.10); --glass-bg-2: rgba(14,44,68,0.08); --glass-brd: rgba(180,235,240,0.14); --glass-hi: rgba(220,255,255,0.32); }
.ebSite[data-glass="heavy"]  { --glass-blur: 34px; --glass-sat: 180%; --glass-bg: rgba(96,178,200,0.24); --glass-bg-2: rgba(14,44,68,0.16); --glass-brd: rgba(190,245,250,0.30); --glass-hi: rgba(225,255,255,0.62); }

/* Motion off */
.ebSite[data-motion="off"] *,
.ebSite[data-motion="off"] *::before,
.ebSite[data-motion="off"] *::after { animation: none !important; transition: none !important; }
.ebSite[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }

/* ============================================================
   Glass primitives
   ============================================================ */
.glass {
  position: relative;
  background:
    linear-gradient(160deg, var(--glass-bg) 0%, var(--glass-bg-2) 100%);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 24px 60px rgba(0,8,30,0.40);
}
/* specular sweep highlight on top edge */
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0) 44%);
  pointer-events: none;
  mix-blend-mode: screen;
}
/* faint colored refraction rim — the iOS-26 liquid-glass tell */
.glass::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 40%, rgba(111,240,236,0.18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Light glass (for content sections on white) */
.glass-light {
  background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 48px rgba(8,30,72,0.10);
}

/* ============================================================
   Shared layout
   ============================================================ */
.eb-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 76px); }
.eb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-deep);
}
.eb-eyebrow.on-dark { color: var(--accent); }
.eb-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }

.eb-h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -1.3px;
}
.eb-lede { font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--gray-500); max-width: 640px; }
.eb-section { padding: clamp(64px, 8vw, 112px) 0; position: relative; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.1px;
  padding: 14px 26px; border-radius: var(--r-pill);
  transition: transform .2s var(--ease, ease), box-shadow .25s, background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  color: var(--royal-deep);
  background: linear-gradient(135deg, var(--accent-glow), var(--accent));
  box-shadow: 0 10px 30px rgba(77,214,210,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(77,214,210,0.5), inset 0 1px 0 rgba(255,255,255,0.7); }
.btn-ghost {
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.btn-dark {
  color: var(--white);
  background: linear-gradient(135deg, var(--royal), var(--royal-dark));
  box-shadow: 0 10px 26px rgba(0,40,104,0.30);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,40,104,0.42); }

/* ============================================================
   NAV
   ============================================================ */
.ebNav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: background .3s, border-color .3s, box-shadow .3s, padding .3s;
  padding: 18px 0;
  border-bottom: 1px solid transparent;
}
.ebNav.scrolled {
  padding: 11px 0;
  background: linear-gradient(180deg, rgba(0,15,46,0.82), rgba(0,15,46,0.62));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 30px rgba(0,8,30,0.35);
}
.ebNav .row { display: flex; align-items: center; justify-content: space-between; }
.ebNav .links { display: flex; gap: 6px; }
.ebNav .links a {
  color: rgba(255,255,255,0.74); font-size: 14.5px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--r-pill); transition: color .15s, background .15s;
}
.ebNav .links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.ebNav .navcta { display: flex; align-items: center; gap: 10px; }
.ebNav .navcta .btn { padding: 10px 20px; font-size: 14px; }
.ebNav .menu-btn { display: none; }
@media (max-width: 880px) {
  .ebNav .links { display: none; }
}

/* ============================================================
   HERO — underwater glass
   ============================================================ */
.ebHero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(77,214,210,0.22) 0%, transparent 45%),
    radial-gradient(90% 70% at 10% 100%, rgba(13,138,147,0.30) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% -10%, #06335a 0%, transparent 60%),
    linear-gradient(170deg, #001230 0%, #00112e 38%, #03283f 78%, #073b41 100%);
  color: #fff;
  padding: clamp(140px, 17vh, 220px) 0 clamp(90px, 12vh, 140px);
}
/* caustic light texture */
.ebHero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(111,240,236,0.10), transparent 18%),
    radial-gradient(circle at 70% 60%, rgba(111,240,236,0.08), transparent 22%),
    radial-gradient(circle at 85% 25%, rgba(111,240,236,0.07), transparent 16%);
  mix-blend-mode: screen;
}
/* faint plus-grid */
.ebHero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M32 12v40M12 32h40' stroke='%236ff0ec' stroke-width='1' stroke-opacity='0.05'/></svg>");
}
.ebHero .inner {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
}
.ebHero h1 {
  font-size: clamp(2.9rem, 6vw, 5rem);
  font-weight: 800; line-height: 1.0; letter-spacing: -1.8px;
  margin: 22px 0 22px;
}
.ebHero h1 .grad {
  background: linear-gradient(110deg, var(--accent-glow), var(--accent) 55%, #2bb5b0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ebHero .sub { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: rgba(255,255,255,0.78); max-width: 500px; line-height: 1.62; }
.ebHero .ctas { display: flex; gap: 14px; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.ebHero .micro { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 8px; }
.ebHero .micro .av { display: inline-flex; }
.ebHero .micro .av span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #06283f; margin-left: -7px; background: linear-gradient(135deg,#4dd6d2,#155c63); }

/* Hero stage: floating phone + glass tiles */
.heroStage { position: relative; height: 600px; display: flex; align-items: center; justify-content: flex-start; padding-left: clamp(0px, 3vw, 48px); }
.heroGlow { position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(77,214,210,0.40), transparent 62%); filter: blur(20px); }

.heroPhone {
  position: relative; z-index: 4;
  width: 290px; padding: 11px; border-radius: 52px;
  background: linear-gradient(155deg, #16171c, #0a0a0c);
  box-shadow: 0 45px 90px rgba(0,8,24,0.5), inset 0 0 0 1.5px rgba(255,255,255,0.08);
  animation: floaty 7s ease-in-out infinite;
}
.heroScreen { position: relative; border-radius: 42px; overflow: hidden; aspect-ratio: 402 / 874; background: #06262b; }
.heroScreen .devPoster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.heroScreen iframe { z-index: 2; }
.heroPhone .ph-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-16px) rotate(0.6deg); } }

/* floating real assets — Live Activity card + Watch */
.heroFloat { position: absolute; z-index: 6; }
.heroFloat img { display: block; width: 100%; height: auto; }
.heroFloat.la {
  width: 178px; right: 4px; bottom: 140px; z-index: 7;
  animation: floaty 7s ease-in-out infinite;
}
.heroFloat.watch {
  width: 178px; right: 4px; bottom: 16px; z-index: 7;
  animation: floaty 6s ease-in-out infinite reverse;
}
/* Apple Watch Smart Stack chip — built in code (mirrors WatchSmallContent .small) */
.watchChip { border-radius: 30px; padding: 12px 15px 13px; color: #fff;
  background: linear-gradient(150deg, var(--royal) 0%, var(--teal-mid) 100%);
  box-shadow: 0 26px 54px rgba(0,8,24,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.16); }
.wcTop { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.wcTop i { width: 5px; height: 5px; border-radius: 50%; background: var(--red-live); box-shadow: 0 0 6px var(--red-live); animation: livepulse 1.4s ease-in-out infinite; }
.wcBody { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 9px; }
.wcTeam { display: flex; align-items: center; gap: 7px; }
.wcTeam.away { justify-content: flex-end; }
.wcTeam b { font-size: 25px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.wcBadge { width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: rgba(255,255,255,0.2); }
.wcBadge.logo { background: rgba(255,255,255,0.92); padding: 2px; overflow: hidden; }
.wcBadge.logo img { width: 100%; height: 100%; object-fit: contain; }
.wcMid { text-align: center; }
.wcMid b { display: block; font-size: 10px; font-weight: 800; color: var(--accent-glow); letter-spacing: .02em; }
.wcMid span { font-size: 11px; color: rgba(255,255,255,0.82); font-weight: 700; }
/* Live Activity card — mirrors LiveActivityView LockScreenContent (brand-tinted glass) */
.laCard { position: relative; overflow: hidden; border-radius: 18px; padding: 13px 15px; color: #fff;
  background: linear-gradient(155deg, rgba(27,80,189,0.42), rgba(13,138,147,0.30)), linear-gradient(155deg, #101d2e, #0a121d);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 28px 60px rgba(0,8,24,0.55), inset 0 1px 0 rgba(255,255,255,0.14); }
.laTop { display: flex; justify-content: space-between; align-items: center; }
.laBrand { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,0.74); }
.laSport { font-size: 12px; }
.laLive { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; }
.laLive i { width: 6px; height: 6px; border-radius: 50%; background: var(--red-live); box-shadow: 0 0 8px var(--red-live); animation: livepulse 1.4s ease-in-out infinite; }
.laMid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 13px 0 12px; }
.laT { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.laBadge { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.laBadge.home { background: linear-gradient(135deg, #2bb5b0, #155c63); }
.laBadge.away { background: linear-gradient(135deg, #5b8def, #2a4fb0); }
.laBadge.logo { background: rgba(255,255,255,0.1); padding: 2px; overflow: hidden; }
.laBadge.logo img { width: 100%; height: 100%; object-fit: contain; }
.laT b { font-size: 27px; font-weight: 900; letter-spacing: -1.2px; line-height: 1; }
.laNm { font-size: 11px; color: rgba(255,255,255,0.66); font-weight: 600; }
.laC { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.laQ { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: .04em; }
.laClk { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85); }
.laFoot { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 9px; font-size: 11.5px; color: rgba(255,255,255,0.62); }
@keyframes floaty2 { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-22px) rotate(2deg); } }
@keyframes livepulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* stat strip under hero */
.heroStats { position: relative; z-index: 3; margin-top: clamp(56px, 8vh, 96px); }
.heroStats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.statCard { padding: 22px 24px; border-radius: var(--r); text-align: left; }
.statCard .n { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -1px; color: #fff; line-height: 1; }
.statCard .n .u { color: var(--accent); }
.statCard .l { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,0.6); margin-top: 8px; text-transform: uppercase; }

@media (max-width: 960px) {
  .ebHero .inner { grid-template-columns: 1fr; }
  .heroStage { height: 480px; margin-top: 20px; }
  .heroStats .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SHARED dark band (between hero & content)
   ============================================================ */
.bandDark {
  background: linear-gradient(180deg, #073b41 0%, #001a3a 40%, #00112e 100%);
  color: #fff; position: relative; overflow: hidden;
}
.bandDark .eb-lede { color: rgba(255,255,255,0.7); }

/* ============================================================
   LIVE SCORING showpiece
   ============================================================ */
.liveScore { background: linear-gradient(180deg, #00112e 0%, #042a3a 60%, #073b41 100%); color: #fff; position: relative; overflow: hidden; }
.liveScore::before { content:''; position:absolute; width: 700px; height: 700px; right: -200px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(77,214,210,0.16), transparent 60%); }
.liveScore .inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.liveScore .copy h2 { color: #fff; }
.liveScore .copy .eb-lede { color: rgba(255,255,255,0.72); margin-top: 18px; }
.featList { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.featList .it { display: flex; gap: 14px; align-items: flex-start; }
.featList .ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent);
  background: rgba(77,214,210,0.12); border: 1px solid rgba(77,214,210,0.25); }
.featList .it h4 { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.featList .it p { font-size: 14.5px; color: rgba(255,255,255,0.62); margin-top: 3px; }

.devPhoneWrap { display: flex; justify-content: center; position: relative; }
.devPhone {
  position: relative; width: 322px; padding: 12px; border-radius: 54px;
  background: linear-gradient(155deg, #16171c, #0a0a0c);
  box-shadow: 0 45px 90px rgba(0,8,24,0.5), inset 0 0 0 1.5px rgba(255,255,255,0.08);
}
.devScreen {
  position: relative; width: 100%; aspect-ratio: 402/874; border-radius: 42px; overflow: hidden;
  background: linear-gradient(160deg, #0a2330, #06262b);
}
.devScreen .devPoster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.devPhone iframe { position: absolute; inset: 0; z-index: 2; }
.callout {
  position: absolute; padding: 12px 16px; border-radius: 14px; z-index: 5;
  font-size: 13px; max-width: 196px; line-height: 1.4; font-weight: 500;
  color: #fff;
  background: linear-gradient(160deg, #16273f, #0e1b2e);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px rgba(0,8,24,0.5);
}
.callout b { color: var(--accent); font-weight: 800; }
.ebSite[data-theme="light"] .callout { background: #fff; color: var(--gray-700); border-color: rgba(8,30,72,0.08); box-shadow: 0 18px 40px rgba(8,30,72,0.18); }
.ebSite[data-theme="light"] .callout b { color: var(--teal-mid); }
.livePoster { display: block; width: 100%; height: 100%; padding: 0; cursor: pointer; position: relative; }
.livePoster img { width: 100%; height: 100%; object-fit: cover; }
.livePoster .playBtn {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 13px 22px; border-radius: 999px; color: var(--royal-deep); font-weight: 800; font-size: 14px;
  background: linear-gradient(135deg, var(--accent-glow), var(--accent));
  box-shadow: 0 12px 30px rgba(0,8,24,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .2s, box-shadow .2s;
}
.livePoster:hover .playBtn { transform: translateX(-50%) translateY(-2px); box-shadow: 0 18px 40px rgba(0,8,24,0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
.livePoster::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, rgba(0,18,30,0.32), transparent); pointer-events: none; }
@media (max-width: 960px) { .liveScore .inner { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   BENTO feature grid (light)
   ============================================================ */
.bento { background: linear-gradient(180deg, #f6f8fc, #eaf0f8); }
.bentoGrid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; gap: 18px; margin-top: 52px; }
.bentoCard {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 26px;
  background: var(--white); border: 1px solid rgba(8,30,72,0.07);
  box-shadow: 0 1px 3px rgba(8,30,72,0.04), 0 18px 40px rgba(8,30,72,0.06);
  transition: transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s;
  display: flex; flex-direction: column;
}
.bentoCard:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(8,30,72,0.14); }
.bentoCard .bi { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--royal), var(--teal-mid)); box-shadow: 0 8px 20px rgba(13,138,147,0.3); }
.bentoCard h3 { font-size: 19px; font-weight: 800; color: var(--royal); letter-spacing: -0.4px; }
.bentoCard p { font-size: 14.5px; color: var(--gray-500); margin-top: 7px; }
.bentoCard.span3 { grid-column: span 3; }
.bentoCard.span2 { grid-column: span 2; }
.bentoCard.span4 { grid-column: span 4; }
.bentoCard.tall { grid-row: span 2; }
.bentoCard.dark { background: linear-gradient(160deg, var(--royal), var(--royal-dark)); border-color: transparent; }
.bentoCard.dark h3 { color: #fff; }
.bentoCard.dark p { color: rgba(255,255,255,0.7); }
.bentoCard.dark .bi { background: linear-gradient(135deg, var(--teal-bright), var(--teal-mid)); color: var(--royal-deep); }
.bentoCard .shotwrap { margin-top: auto; }
.bentoCard.miniwrap { overflow: hidden; }
.bentoCard .miniphone { position: absolute; right: -6px; bottom: -34px; width: 190px; border-radius: 26px; display: block;
  box-shadow: 0 26px 54px rgba(0,8,30,0.5); }
@media (max-width: 900px) {
  .bentoGrid { grid-template-columns: repeat(2, 1fr); }
  .bentoCard.span3,.bentoCard.span4,.bentoCard.span2 { grid-column: span 2; }
}

/* ============================================================
   NATIVE section (dark) — iOS + Android + ecosystem
   ============================================================ */
.native { background: linear-gradient(180deg, #00112e 0%, #042231 55%, #073b41 100%); color: #fff; position: relative; overflow: hidden; padding-top: clamp(52px, 6vw, 80px); }
.native::before { content:''; position:absolute; inset:0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M32 12v40M12 32h40' stroke='%236ff0ec' stroke-width='1' stroke-opacity='0.04'/></svg>"); }
.native .inner { position: relative; z-index: 2; }
.twoPhones, .threePhones { display: flex; justify-content: center; align-items: flex-end; gap: 30px; margin-top: 56px; perspective: 1600px; position: relative; }
.threePhones { gap: 22px; }
.osPhone { width: 280px; aspect-ratio: 441/920; border-radius: 48px; overflow: hidden; position: relative;
  box-shadow: 0 50px 100px rgba(0,8,24,0.6); transition: transform .4s; }
.threePhones .osPhone { width: 232px; }
.osPhone img { width: 100%; height: 100%; object-fit: cover; }
.osPhone .tag { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.osPhone.ios { transform: translateY(-22px); z-index: 3; }
.osPhone.la { transform: rotateY(9deg) translateY(6px); }
.osPhone.android { transform: rotateY(-9deg) translateY(6px); }
.watchFloat { position: absolute; width: 132px; right: 2%; bottom: -18px; z-index: 5;
  filter: drop-shadow(0 22px 44px rgba(0,8,24,0.6)); animation: floaty 6s ease-in-out infinite; }
.watchFloat img { width: 100%; display: block; }
.ecoRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.ecoCard { padding: 24px; border-radius: var(--r-lg); }
.ecoCard .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: rgba(77,214,210,0.12); border: 1px solid rgba(77,214,210,0.22); margin-bottom: 14px; }
.ecoCard h4 { font-size: 16px; font-weight: 800; color: #fff; }
.ecoCard p { font-size: 13.5px; color: rgba(255,255,255,0.62); margin-top: 5px; }
@media (max-width: 900px) { .ecoRow { grid-template-columns: repeat(2,1fr); } .twoPhones, .threePhones { gap: 12px; flex-wrap: wrap; } .osPhone, .threePhones .osPhone { width: 168px; } .watchFloat { display: none; } }

/* ============================================================
   ADMIN / For Clubs (light) — browser window
   ============================================================ */
.admin { background: linear-gradient(180deg, #ffffff, #f2f6fc); }
.admin .inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.admin .copy h2 { color: var(--royal); }
.browserWin {
  border-radius: var(--r-lg); overflow: hidden;
  background: #fff; border: 1px solid rgba(8,30,72,0.08);
  box-shadow: 0 40px 90px rgba(8,30,72,0.22);
}
.browserBar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #eef1f7; border-bottom: 1px solid rgba(8,30,72,0.06); }
.browserBar .dots { display: flex; gap: 7px; }
.browserBar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.browserBar .url { flex: 1; background: #fff; border-radius: 8px; padding: 6px 14px; font-size: 12.5px; color: var(--gray-500); border: 1px solid rgba(8,30,72,0.07); display: flex; align-items: center; gap: 8px; }
.browserWin .shot { width: 100%; display: block; }
.adminFeats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 30px; }
.adminFeats .af { display: flex; gap: 12px; align-items: flex-start; }
.adminFeats .af .ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--teal-mid); background: var(--teal-subtle, #e6f9f8); }
.adminFeats .af h4 { font-size: 15px; font-weight: 800; color: var(--royal); }
.adminFeats .af p { font-size: 13.5px; color: var(--gray-500); margin-top: 2px; }
@media (max-width: 960px) { .admin .inner { grid-template-columns: 1fr; } }

/* ============================================================
   WHITE-LABEL branding
   ============================================================ */
.brandWL { background: #fff; }
.brandWL .inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.brandWL h2 { color: var(--royal); }
.wlCard { padding: 34px; border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--club, #002868), color-mix(in srgb, var(--club, #002868) 60%, #000)); color: #fff; }
.wlCard .clublogo { height: 56px; margin-bottom: 22px; }
.wlCard .clublogo img { height: 100%; width: auto; }
.wlSwatches { display: flex; gap: 12px; margin-top: 24px; }
.wlSwatch { width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.4); cursor: pointer; transition: transform .15s; }
.wlSwatch:hover { transform: scale(1.1); }
.wlSwatch.active { box-shadow: 0 0 0 3px #fff; }
.wlStrip { margin-top: 26px; font-size: 12px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 8px; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { background: linear-gradient(180deg, #f6f8fc, #eef2f9); }
.priceGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; align-items: stretch; }
.priceCard { background: #fff; border: 1px solid rgba(8,30,72,0.08); border-radius: var(--r-lg); padding: 30px 26px; display: flex; flex-direction: column; position: relative;
  box-shadow: 0 14px 36px rgba(8,30,72,0.06); transition: transform .3s, box-shadow .3s; }
.priceCard:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(8,30,72,0.12); }
.priceCard.featured { background: linear-gradient(165deg, var(--royal), var(--royal-dark)); color: #fff; border-color: transparent; transform: translateY(-14px);
  box-shadow: 0 36px 80px rgba(0,40,104,0.40); }
.priceCard.featured:hover { transform: translateY(-20px); }
.priceCard .tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-glow), var(--accent)); color: var(--royal-deep); padding: 6px 14px; border-radius: 999px; }
.priceCard .pn { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--teal-mid); }
.priceCard.featured .pn { color: var(--accent); }
.priceCard .pr { font-size: 42px; font-weight: 900; letter-spacing: -1.5px; margin-top: 10px; }
.priceCard .pr .u { font-size: 14px; font-weight: 600; color: var(--gray-500); }
.priceCard.featured .pr .u { color: rgba(255,255,255,0.6); }
.priceCard .pd { font-size: 13.5px; color: var(--gray-500); margin: 8px 0 18px; min-height: 38px; }
.priceCard.featured .pd { color: rgba(255,255,255,0.7); }
.priceCard ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 22px; }
.priceCard li { font-size: 14px; display: flex; gap: 9px; align-items: flex-start; color: var(--gray-700); }
.priceCard.featured li { color: rgba(255,255,255,0.85); }
.priceCard li::before { content: '✓'; color: var(--teal-mid); font-weight: 900; flex-shrink: 0; }
.priceCard.featured li::before { color: var(--accent); }
.priceCard .pbtn { margin-top: auto; padding: 13px; border-radius: var(--r-pill); font-weight: 800; font-size: 14px; background: var(--gray-100); color: var(--royal); transition: background .15s, transform .15s; }
.priceCard .pbtn:hover { background: var(--gray-200); }
.priceCard.featured .pbtn { background: linear-gradient(135deg, var(--accent-glow), var(--accent)); color: var(--royal-deep); }
@media (max-width: 900px) { .priceGrid { grid-template-columns: 1fr 1fr; } .priceCard.featured { transform: none; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq .inner { max-width: 820px; margin: 0 auto; }
.faqItem { border-bottom: 1px solid var(--gray-200); }
.faqQ { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; text-align: left; padding: 24px 4px; font-size: 18px; font-weight: 700; color: var(--royal); }
.faqQ .pm { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); color: var(--teal-mid); transition: transform .3s, background .2s; font-size: 18px; }
.faqItem.open .faqQ .pm { transform: rotate(45deg); background: var(--teal-mid); color: #fff; }
.faqA { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faqA p { padding: 0 4px 24px; font-size: 15.5px; color: var(--gray-600); line-height: 1.65; max-width: 680px; }

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.ctaBand { position: relative; overflow: hidden; padding: clamp(80px,11vw,140px) 0;
  background:
    radial-gradient(110% 100% at 80% 0%, rgba(77,214,210,0.25), transparent 50%),
    linear-gradient(160deg, #001230, #00112e 45%, #073b41); color: #fff; text-align: center; }
.ctaCard { max-width: 860px; margin: 0 auto; padding: 56px 40px; border-radius: var(--r-xl); text-align: center; }
.ctaCard h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 900; letter-spacing: -1.6px; line-height: 1.03; }
.ctaCard p { color: rgba(255,255,255,0.74); font-size: 1.15rem; margin: 18px auto 32px; max-width: 520px; }
.ctaCard .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.storeBadges { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.storeBadge { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; }
.storeBadge .big { font-size: 16px; font-weight: 700; line-height: 1; }
.storeBadge .sm { font-size: 10.5px; color: rgba(255,255,255,0.6); }

.ebFoot { background: #00112e; color: rgba(255,255,255,0.6); padding: 70px 0 36px; }
.ebFoot .grid { display: grid; grid-template-columns: 1.5fr repeat(6, 1fr); gap: 28px 22px; align-items: start; }
.ebFoot .brand p { font-size: 13.5px; max-width: 280px; margin-top: 16px; line-height: 1.6; }
.ebFoot h5 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 16px; }
.ebFoot ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ebFoot a { font-size: 13.5px; line-height: 1.3; color: rgba(255,255,255,0.6); transition: color .15s; }
.ebFoot a:hover { color: var(--accent); }
.ebFoot .bottom { margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 10px; }
@media (max-width: 980px) { .ebFoot .grid { grid-template-columns: repeat(3, 1fr); } .ebFoot .brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ebFoot .grid { grid-template-columns: 1fr 1fr; } }

/* hero app-store badges */
.heroStore { margin-top: 24px; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.heroStore .hsLabel { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.ebSite[data-theme="light"] .heroStore .hsLabel { color: var(--gray-500); }

/* Real App Store / Google Play buttons */
.storeRow { display: flex; gap: 12px; flex-wrap: wrap; }
.storeRow .appbtn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px;
  background: #0a0f1c; color: #fff; border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 24px rgba(0,8,24,0.28); transition: transform .2s, box-shadow .2s; cursor: pointer; }
.storeRow .appbtn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,8,24,0.4); }
.ab-tx { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.ab-sm { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.72); letter-spacing: .02em; }
.ab-bg { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: #fff; }
.betaTag { position: absolute; top: -8px; right: -7px; background: linear-gradient(135deg, #f59e0b, #e8590c); color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(232,89,12,0.45); white-space: nowrap; }
.storeRow.compact .appbtn { padding: 7px 12px; gap: 8px; border-radius: 10px; }
.storeRow.compact .ab-bg { font-size: 13px; }
.storeRow.compact .ab-sm { font-size: 8px; }

/* on-dark wordmark tweaks already handled by wordmark.css --on-dark */

/* ============================================================
   DARK THEME — flip the light content sections too
   ============================================================ */
.ebSite[data-theme="dark"] {
  --gray-900: #eaf1ff; --gray-700: #cdd9f0; --gray-600: #aab9d8; --gray-500: #8b9bbd; --gray-400: #6b7a9c;
  --gray-50: #0c1f38; --gray-100: #12273f; --gray-200: rgba(255,255,255,0.12);
  --ink: #eaf1ff;
  background: #00112e;
}
.ebSite[data-theme="dark"] .bento,
.ebSite[data-theme="dark"] .platform,
.ebSite[data-theme="dark"] .realShots,
.ebSite[data-theme="dark"] .how,
.ebSite[data-theme="dark"] .clubs,
.ebSite[data-theme="dark"] .brandWL,
.ebSite[data-theme="dark"] .resources,
.ebSite[data-theme="dark"] .featList2,
.ebSite[data-theme="dark"] .printables,
.ebSite[data-theme="dark"] .pricing,
.ebSite[data-theme="dark"] .blog,
.ebSite[data-theme="dark"] .faq { background: linear-gradient(180deg, #001a3a, #042a44); }
.ebSite[data-theme="dark"] .eb-section h1,
.ebSite[data-theme="dark"] .eb-section h2,
.ebSite[data-theme="dark"] .eb-section h3,
.ebSite[data-theme="dark"] .eb-section h4,
.ebSite[data-theme="dark"] .eb-h2 { color: #eaf1ff !important; }
.ebSite[data-theme="dark"] .eb-eyebrow { color: var(--teal-bright); }
/* cards → dark glass */
.ebSite[data-theme="dark"] :is(.bentoCard:not(.dark), .flCard, .blogCard, .printCard, .priceCard:not(.featured)) {
  background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1);
  box-shadow: 0 18px 40px rgba(0,8,24,0.3);
}
.ebSite[data-theme="dark"] .bentoCard.dark { background: linear-gradient(160deg, #06335a, #042033); }
.ebSite[data-theme="dark"] .printCard { background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); }
/* segmented tabs */
.ebSite[data-theme="dark"] .segTabs { background: rgba(255,255,255,0.06); }
.ebSite[data-theme="dark"] .segTab { color: rgba(255,255,255,0.7); }
.ebSite[data-theme="dark"] .segTab.on { background: rgba(255,255,255,0.14); color: #fff; box-shadow: none; }
/* feature-list checks + toggle + price button */
.ebSite[data-theme="dark"] .flCard .ck { background: rgba(77,214,210,0.14); color: var(--teal-bright); }
.ebSite[data-theme="dark"] .pf .pfi { background: rgba(77,214,210,0.12); }
.ebSite[data-theme="dark"] .clubPoints .cpCheck { box-shadow: none; }
.ebSite[data-theme="dark"] .flToggle { background: rgba(255,255,255,0.08); color: #eaf1ff; }
.ebSite[data-theme="dark"] .pbtn { background: rgba(255,255,255,0.08); color: #eaf1ff; }
.ebSite[data-theme="dark"] .priceCard.featured .pbtn { background: linear-gradient(135deg, var(--accent-glow), var(--accent)); color: var(--royal-deep); }
/* faq */
.ebSite[data-theme="dark"] .faqItem { border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .faqQ .pm { background: rgba(255,255,255,0.08); color: var(--teal-bright); }
.ebSite[data-theme="dark"] .faqItem.open .faqQ .pm { background: var(--teal-mid); color: #fff; }
.ebSite[data-theme="dark"] .faqA p { color: #aab9d8; }
/* misc */
.ebSite[data-theme="dark"] .fmtChip { background: rgba(77,214,210,0.1); color: var(--teal-bright); border-color: rgba(77,214,210,0.22); }
.ebSite[data-theme="dark"] .poweredBy { border-top-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .figCap, .ebSite[data-theme="dark"] .shotFig figcaption { color: #8b9bbd; }
.ebSite[data-theme="dark"] .priceCard .pn { color: var(--teal-bright); }

/* ============================================================
   Hero proof chips
   ============================================================ */
.heroProof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pchip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(10px); }
.pchip .d { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pchip .d.live { background: var(--red-live); box-shadow: 0 0 10px var(--red-live); animation: livepulse 1.4s ease-in-out infinite; }

/* ============================================================
   THREE MOMENTS (signature proof)
   ============================================================ */
.moments { background: linear-gradient(180deg, #073b41 0%, #042231 45%, #00112e 100%); color: #fff; position: relative; overflow: hidden; }
.moments::before { content:''; position:absolute; width: 620px; height: 620px; left: -160px; top: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(77,214,210,0.14), transparent 62%); }
.momentGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; position: relative; z-index: 2; }
.momentCard { padding: 28px; border-radius: var(--r-lg); display: flex; flex-direction: column; }
.momentCard .mHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.momentCard .mNum { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.momentCard .mIc { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: rgba(77,214,210,0.12); border: 1px solid rgba(77,214,210,0.22); }
.momentCard h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.2; color: #fff; }
.momentCard p { font-size: 14px; color: rgba(255,255,255,0.64); margin-top: 8px; }
.mData { margin-top: 20px; padding: 16px; border-radius: 14px; background: rgba(0,12,28,0.42); border: 1px solid rgba(255,255,255,0.1); }
.mData .mRow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mLive { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--red-live); padding: 3px 8px; border-radius: 999px; }
.mLive .pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: livepulse 1.4s ease-in-out infinite; }
.mMeta { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 600; }
.mBig { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.9); }
.mBig b { font-weight: 900; font-size: 19px; }
.mTag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px; width: fit-content; }
.mTag.warn { color: #fda4a4; background: rgba(204,31,31,0.18); border: 1px solid rgba(204,31,31,0.32); }
.mTag.ok { color: #6ee7b7; background: rgba(52,211,153,0.14); border: 1px solid rgba(52,211,153,0.28); }
b.warn { color: #ff7a7a; } b.ok { color: #34d399; }
.mScore { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 700; color: #fff; padding: 4px 0; }
.mScore b { font-size: 26px; font-weight: 900; letter-spacing: -1px; }
.mScore.dim { color: rgba(255,255,255,0.55); }
.mScore.dim b { color: rgba(255,255,255,0.7); }
.mGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mGrid > div { display: flex; flex-direction: column; }
.mGrid b { font-size: 26px; font-weight: 900; letter-spacing: -1px; color: #fff; line-height: 1; }
.mGrid span { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 4px; font-weight: 600; }
@media (max-width: 900px) { .momentGrid { grid-template-columns: 1fr; } }

/* ============================================================
   Format chips + figure caption (League Builder)
   ============================================================ */
.fmtChips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.fmtChip { font-size: 12.5px; font-weight: 700; color: var(--royal); padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--teal-subtle, #e6f9f8); border: 1px solid rgba(13,138,147,0.22); }
.figCap { margin-top: 16px; font-size: 13px; color: var(--gray-500); text-align: center; }
.admin .url { font-size: 11.5px; }

/* ============================================================
   REAL SCREENSHOTS
   ============================================================ */
.realShots { background: linear-gradient(180deg, #ffffff, #f2f6fc); padding-bottom: clamp(44px, 5vw, 72px); }
.shotRow { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; margin-top: 52px; align-items: start; }
.shotRow:has(.shotFig.wide + .shotFig.wide) { grid-template-columns: 1fr 1fr; }
.shotFig { display: flex; flex-direction: column; gap: 16px; }
.shotFig figcaption { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; }
.shotFig .browserWin, .shotFig .appCard { box-shadow: 0 40px 90px rgba(8,30,72,0.20); }
.appCard { border-radius: var(--r-lg); overflow: hidden; padding: 0; }
.appCard .shot { width: 100%; display: block; }
.poweredBy { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 40px;
  padding-top: 32px; border-top: 1px solid var(--gray-200); }
.poweredBy .pbLabel { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); }
.poweredBy .pbLogo { height: 34px; width: auto; }
.poweredBy .pbAnd { font-size: 14px; color: var(--gray-500); }
.poweredBy .pbAnd em { color: var(--teal-mid); font-style: normal; font-weight: 700; }
@media (max-width: 900px) { .shotRow { grid-template-columns: 1fr; } }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how { background: #fff; }
/* How It Works — compact horizontal strip */
.how { background: #fff; }
.howStrip { display: grid; grid-template-columns: 0.8fr 2.2fr; gap: 40px; align-items: center; }
.howLead .howTitle { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; color: var(--royal); letter-spacing: -0.8px; line-height: 1.1; margin-top: 12px; }
.howSteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.howStep { position: relative; padding: 22px 20px; border-radius: var(--r-lg); background: linear-gradient(165deg, var(--royal), var(--royal-dark)); color: #fff; overflow: hidden; }
.howStep::after { content:''; position:absolute; width: 120px; height: 120px; right: -40px; top: -40px; border-radius: 50%; background: rgba(255,255,255,0.05); }
.howNum { font-size: 13px; font-weight: 900; letter-spacing: .1em; color: var(--accent); }
.howStep h4 { font-size: 16.5px; font-weight: 800; letter-spacing: -0.3px; margin: 8px 0 6px; position: relative; z-index: 2; }
.howStep p { font-size: 13px; color: rgba(255,255,255,0.74); line-height: 1.5; position: relative; z-index: 2; }
.howArrow { position: absolute; right: -19px; top: 50%; transform: translateY(-50%); z-index: 5; color: var(--teal-mid);
  width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(8,30,72,0.15); }
@media (max-width: 900px) { .howStrip { grid-template-columns: 1fr; gap: 26px; } .howSteps { grid-template-columns: 1fr; } .howArrow { display: none; } }

/* How It Works standalone — step cards */
.hiwSteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hiwStep { position: relative; padding: 32px 28px; border-radius: var(--r-lg); background: linear-gradient(165deg, var(--royal), var(--royal-dark)); color: #fff; overflow: hidden; }
.hiwStep::after { content:''; position:absolute; width: 160px; height: 160px; right: -50px; top: -50px; border-radius: 50%; background: rgba(255,255,255,0.05); }
.hiwIc { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--royal-deep); background: linear-gradient(135deg, var(--accent-glow), var(--accent)); margin-bottom: 18px; position: relative; z-index: 2; }
.hiwNum { font-size: 13px; font-weight: 900; letter-spacing: .1em; color: var(--accent); position: relative; z-index: 2; }
.hiwStep h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 8px 0 10px; position: relative; z-index: 2; }
.hiwStep p { font-size: 14.5px; color: rgba(255,255,255,0.76); line-height: 1.6; position: relative; z-index: 2; }
@media (max-width: 860px) { .hiwSteps { grid-template-columns: 1fr; } }

/* ============================================================
   CLUB ADMINS (white-label preview)
   ============================================================ */
.clubs { background: linear-gradient(180deg, #f2f6fc, #ffffff); }
.clubs .inner { display: grid; grid-template-columns: 1fr 0.9fr; gap: 48px; align-items: center; }
.clubPoints { max-width: 660px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 20px; }

/* PLATFORM tabbed suite */
.platform { background: linear-gradient(180deg, #f6f8fc, #eef2f9); }
.segTabs { display: flex; width: fit-content; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(8,30,72,0.06); margin: 36px auto 46px; }
.segTab { padding: 11px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--gray-600); transition: background .2s, color .2s; white-space: nowrap; }
.segTab.on { background: #fff; color: var(--royal); box-shadow: 0 4px 14px rgba(8,30,72,0.12); }
.platPanel { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.platCopy h3, .platPanelCenter h3 { font-size: clamp(1.6rem,2.6vw,2.25rem); font-weight: 800; color: var(--royal); letter-spacing: -0.6px; line-height: 1.12; }
.platLede { font-size: 1.05rem; color: var(--gray-600); line-height: 1.6; margin-top: 14px; }
.platFeats { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.pf { display: flex; gap: 13px; align-items: flex-start; }
.pfi { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--teal-mid); background: var(--teal-subtle,#e6f9f8); border: 1px solid rgba(13,138,147,0.2); }
.pf h4 { font-size: 15.5px; font-weight: 800; color: var(--royal); }
.pf p { font-size: 14px; color: var(--gray-500); margin-top: 3px; }
.platVisual { position: relative; display: flex; justify-content: center; }
@media (max-width: 900px) { .platPanel { grid-template-columns: 1fr; gap: 36px; } }

/* Full feature list collapse */
.flWrap { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.flWrap.open { max-height: 1600px; }
.flToggle { display: block; margin: 32px auto 0; padding: 13px 26px; border-radius: var(--r-pill); font-weight: 800; font-size: 14px;
  background: var(--gray-100); color: var(--royal); transition: background .15s; }
.flToggle:hover { background: var(--gray-200); }
.clubPoints .cp { display: flex; gap: 13px; align-items: flex-start; }
.clubPoints .cpCheck { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--teal-mid), var(--teal-brand)); }
.clubPoints h4 { font-size: 15.5px; font-weight: 800; color: var(--royal); }
.clubPoints p { font-size: 14px; color: var(--gray-500); margin-top: 2px; }
.wlSwatches { display: flex; gap: 12px; }
.wlSwatch { width: 42px; height: 42px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.4); cursor: pointer; transition: transform .15s; }
.wlSwatch:hover { transform: scale(1.1); }
.wlSwatch.active { box-shadow: 0 0 0 3px var(--royal); border-color: #fff; }
.wlCard { padding: 34px; border-radius: var(--r-lg); position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, var(--club, #002868), color-mix(in srgb, var(--club, #002868) 55%, #000));
  box-shadow: 0 30px 70px rgba(8,30,72,0.28); transition: background .4s; }
.wlCard .clublogo { height: 50px; margin-bottom: 20px; }
.wlCard .clublogo img { height: 100%; width: auto; }
.wlCard .wlSwatches { margin-top: 22px; }
.wlCard .wlSwatch { width: 36px; height: 36px; cursor: default; }
.wlStrip { margin-top: 24px; font-size: 12px; color: rgba(255,255,255,0.62); display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .clubs .inner { grid-template-columns: 1fr; } }

/* ============================================================
   FULL FEATURE LIST
   ============================================================ */
.featList2 { background: linear-gradient(180deg, #ffffff, #eef2f9); }
.flGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.flCard { background: #fff; border: 1px solid rgba(8,30,72,0.07); border-radius: var(--r-lg); padding: 26px;
  box-shadow: 0 14px 34px rgba(8,30,72,0.05); transition: transform .25s, box-shadow .25s; }
.flCard:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(8,30,72,0.1); }
.flCard h4 { font-size: 16px; font-weight: 800; color: var(--royal); margin-bottom: 14px; letter-spacing: -0.2px; }
.flCard ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.flCard li { font-size: 13.8px; color: var(--gray-600); line-height: 1.45; display: flex; gap: 9px; align-items: flex-start; }
.flCard .ck { flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; color: var(--teal-mid); background: var(--teal-subtle, #e6f9f8); margin-top: 1px; }
@media (max-width: 900px) { .flGrid { grid-template-columns: 1fr; } }

/* ============================================================
   PRINTABLES
   ============================================================ */
.printables { background: #fff; }
.printGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.printCard { display: flex; flex-direction: column; padding: 26px; border-radius: var(--r-lg); cursor: pointer;
  background: linear-gradient(165deg, #f6f8fc, #eef2f9); border: 1px solid rgba(8,30,72,0.06); transition: transform .25s, box-shadow .25s; }
.printCard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(8,30,72,0.12); }
.pkTag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-mid); }
.printCard h4 { font-size: 16.5px; font-weight: 800; color: var(--royal); margin: 12px 0 8px; letter-spacing: -0.3px; }
.printCard p { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; flex: 1; }
.pkLink { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--teal-mid); }
@media (max-width: 900px) { .printGrid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   PRICING — six tiers + beta pill
   ============================================================ */
.priceGrid.six { grid-template-columns: repeat(3, 1fr); }
.priceCard .pn { display: flex; align-items: center; gap: 8px; }
.betaPill { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ball-orange, #f59e0b);
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); padding: 2px 7px; border-radius: 999px; }
@media (max-width: 980px) { .priceGrid.six { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .priceGrid.six { grid-template-columns: 1fr; } }

/* ============================================================
   BLOG
   ============================================================ */
.blog { background: linear-gradient(180deg, #eef2f9, #ffffff); }
.blogGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.blogCard { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); cursor: pointer;
  background: #fff; border: 1px solid rgba(8,30,72,0.07); box-shadow: 0 14px 34px rgba(8,30,72,0.05); transition: transform .25s, box-shadow .25s; }
.blogCard:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(8,30,72,0.12); }
.bCat { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-mid); }
.blogCard h3 { font-size: 18px; font-weight: 800; color: var(--royal); margin: 12px 0 10px; letter-spacing: -0.3px; line-height: 1.25; }
.blogCard p { font-size: 14px; color: var(--gray-500); line-height: 1.55; flex: 1; }
.bLink { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--teal-mid); }
.blogCard { text-decoration: none; }
.bMeta { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12.5px; color: var(--gray-400); font-weight: 600; }
.bMeta .bWho { color: var(--gray-600); }
.bMeta .bDot { color: var(--gray-300); }
.bMeta .bNew { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: var(--teal-mid); background: var(--teal-subtle, #e6f9f8); border: 1px solid rgba(13,138,147,0.25); padding: 2px 7px; border-radius: 999px; }
.blogCard.feat { background: linear-gradient(160deg, #fff8e8, #fdf0d0); border: 1.5px solid var(--ball-yellow, #c7901c); box-shadow: 0 18px 44px rgba(199,144,28,0.18); }
.blogCard.feat .bCat { color: #9a6a10; }
.blogCard.feat .bNew { color: #9a6a10; background: rgba(199,144,28,0.14); border-color: rgba(199,144,28,0.35); }
.ebSite[data-theme="dark"] .blogCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .blogCard h3 { color: #eaf1ff; }
.ebSite[data-theme="dark"] .blogCard p { color: #aab9d8; }
.ebSite[data-theme="dark"] .bMeta .bWho { color: #cdd9f0; }
.ebSite[data-theme="dark"] .blogCard.feat { background: linear-gradient(160deg, rgba(199,144,28,0.16), rgba(199,144,28,0.06)); border-color: rgba(230,201,135,0.45); }
.ebSite[data-theme="dark"] .blogCard.feat .bCat, .ebSite[data-theme="dark"] .blogCard.feat .bNew { color: var(--gold-light, #e6c987); }
@media (max-width: 900px) { .blogGrid { grid-template-columns: 1fr; } }

/* ============================================================
   CTA form + footer stores
   ============================================================ */
.ctaForm { display: flex; gap: 10px; justify-content: center; margin: 8px auto 22px; max-width: 480px; flex-wrap: wrap; }
.ctaForm input { flex: 1; min-width: 220px; padding: 14px 20px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08); color: #fff; font-size: 15px; backdrop-filter: blur(10px); }
.ctaForm input::placeholder { color: rgba(255,255,255,0.5); }
.ctaForm input:focus { outline: none; border-color: var(--accent); }
.ctaFine { font-size: 12.5px !important; color: rgba(255,255,255,0.5) !important; margin: 6px auto 22px !important; text-align: center; }
.footStores { display: flex; gap: 10px; margin-top: 18px; }
.storeBadge.sm { padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 10px; }

/* band ledes (de-inlined) keep light text in dark theme */
.moments .eb-lede, .native .eb-lede { color: rgba(255,255,255,0.7); }
.moments h2, .native h2 { color: #fff; }

/* theme toggle button in nav */
.themeToggle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  transition: background .15s, transform .15s, color .15s; }
.themeToggle:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }

/* ============================================================
   LIGHT THEME  (default) — airy colorway matching the apps
   ============================================================ */
.ebSite[data-theme="light"] {
  --glass-bg: rgba(255,255,255,0.66);
  --glass-bg-2: rgba(255,255,255,0.42);
  --glass-brd: rgba(255,255,255,0.92);
  --glass-hi: rgba(255,255,255,0.95);
  /* No black text — navy-blue family for all copy */
  --ink: #15265c;
  --gray-900: #14265a;
  --gray-700: #2b3e70;
  --gray-600: #3a4d7d;
  --gray-500: #556a9b;
  --gray-400: #8a97bd;
  background: #fff;
}
.ebSite[data-theme="light"] .glass {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 44px rgba(8,30,72,0.12);
}
.ebSite[data-theme="light"] .glass::before { background: linear-gradient(140deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 42%); }

/* nav */
.ebSite[data-theme="light"] .ebNav .links a { color: var(--gray-600); }
.ebSite[data-theme="light"] .ebNav .links a:hover { color: var(--royal); background: rgba(8,30,72,0.05); }
.ebSite[data-theme="light"] .ebNav.scrolled { background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72)); border-bottom-color: rgba(8,30,72,0.08); box-shadow: 0 8px 30px rgba(8,30,72,0.1); }
.ebSite[data-theme="light"] .themeToggle { color: var(--royal); background: rgba(8,30,72,0.05); border-color: rgba(8,30,72,0.12); }
.ebSite[data-theme="light"] .themeToggle:hover { background: rgba(8,30,72,0.1); }
.ebSite[data-theme="light"] .eb-lockup--on-dark .eb-lockup__word { color: var(--royal); }
.ebSite[data-theme="light"] .eb-lockup--on-dark .eb-lockup__sub { color: var(--teal-mid); }
.ebSite[data-theme="light"] .eb-eyebrow.on-dark { color: var(--teal-mid); }

/* hero */
.ebSite[data-theme="light"] .ebHero {
  background:
    radial-gradient(120% 90% at 80% 6%, rgba(77,214,210,0.20), transparent 46%),
    radial-gradient(90% 70% at 6% 100%, rgba(13,138,147,0.12), transparent 55%),
    linear-gradient(170deg, #f4f9ff 0%, #e8f1fc 48%, #ddf2f1 100%);
  color: var(--ink);
}
.ebSite[data-theme="light"] .ebHero::before { opacity: .35; }
.ebSite[data-theme="light"] .ebHero::after { opacity: .5; }
.ebSite[data-theme="light"] .ebHero .sub { color: var(--gray-600); }
.ebSite[data-theme="light"] .ebHero h1 { color: #1b50bd; }
.ebSite[data-theme="light"] .ebHero h1 .grad { background: linear-gradient(110deg, #0d8a93, #14a8a3 55%, #12b5b0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ebSite[data-theme="light"] .heroGlow { background: radial-gradient(circle, rgba(77,214,210,0.3), transparent 62%); }
.ebSite[data-theme="light"] .heroProof .pchip { background: rgba(255,255,255,0.72); border-color: rgba(8,30,72,0.08); color: var(--gray-700); }
.ebSite[data-theme="light"] .statCard .n { color: var(--royal); }
.ebSite[data-theme="light"] .statCard .n .u { color: var(--accent-deep); }
.ebSite[data-theme="light"] .statCard .l { color: var(--gray-500); }

/* host / live scoring */
.ebSite[data-theme="light"] .liveScore { background: linear-gradient(180deg, #f6f9fd, #edf4fb); color: var(--ink); }
.ebSite[data-theme="light"] .liveScore .copy h2 { color: var(--royal); }
.ebSite[data-theme="light"] .liveScore .copy .eb-lede { color: var(--gray-600); }
.ebSite[data-theme="light"] .liveScore .featList .ic { color: var(--teal-mid); background: var(--teal-subtle, #e6f9f8); border-color: rgba(13,138,147,0.22); }
.ebSite[data-theme="light"] .liveScore .featList .it h4 { color: var(--royal); }
.ebSite[data-theme="light"] .liveScore .featList .it p { color: var(--gray-500); }
.ebSite[data-theme="light"] .callout { color: var(--gray-700); }
.ebSite[data-theme="light"] .callout b { color: var(--teal-mid); }

/* moments */
.ebSite[data-theme="light"] .moments { background: linear-gradient(180deg, #eef4fb, #e7eff9); color: var(--ink); }
.ebSite[data-theme="light"] .moments h2 { color: var(--royal); }
.ebSite[data-theme="light"] .moments .eb-lede { color: var(--gray-600); }
.ebSite[data-theme="light"] .momentCard h3 { color: var(--royal); }
.ebSite[data-theme="light"] .momentCard p { color: var(--gray-500); }
.ebSite[data-theme="light"] .momentCard .mNum { color: var(--teal-mid); }
.ebSite[data-theme="light"] .momentCard .mIc { color: var(--teal-mid); background: var(--teal-subtle, #e6f9f8); border-color: rgba(13,138,147,0.22); }
.ebSite[data-theme="light"] .mData { background: rgba(255,255,255,0.72); border-color: rgba(8,30,72,0.08); }
.ebSite[data-theme="light"] .mBig { color: var(--royal); }
.ebSite[data-theme="light"] .mMeta { color: var(--gray-500); }
.ebSite[data-theme="light"] .mScore { color: var(--royal); }
.ebSite[data-theme="light"] .mScore.dim { color: var(--gray-400); }
.ebSite[data-theme="light"] .mScore.dim b { color: var(--gray-500); }
.ebSite[data-theme="light"] .mGrid b { color: var(--royal); }
.ebSite[data-theme="light"] .mGrid span { color: var(--gray-500); }
.ebSite[data-theme="light"] .moments::before { opacity: .5; }

/* native */
.ebSite[data-theme="light"] .native { background: linear-gradient(180deg, #f3f7fd, #eaf3f5); color: var(--ink); }
.ebSite[data-theme="light"] .native h2 { color: var(--royal); }
.ebSite[data-theme="light"] .native .eb-lede { color: var(--gray-600); }
.ebSite[data-theme="light"] .native::before { opacity: .4; filter: invert(1); }
.ebSite[data-theme="light"] .ecoCard h4 { color: var(--royal); }
.ebSite[data-theme="light"] .ecoCard p { color: var(--gray-500); }
.ebSite[data-theme="light"] .ecoCard .ic { color: var(--teal-mid); background: var(--teal-subtle, #e6f9f8); border-color: rgba(13,138,147,0.22); }

/* cta */
.ebSite[data-theme="light"] .ctaBand { background: radial-gradient(110% 100% at 80% 0%, rgba(77,214,210,0.22), transparent 50%), linear-gradient(160deg, #eaf2fc, #e1f2f1); color: var(--ink); }
.ebSite[data-theme="light"] .ctaCard h2 { color: var(--royal); }
.ebSite[data-theme="light"] .ctaCard p { color: var(--gray-600); }
.ebSite[data-theme="light"] .ctaForm input { background: #fff; border-color: rgba(8,30,72,0.12); color: var(--ink); }
.ebSite[data-theme="light"] .ctaForm input::placeholder { color: var(--gray-400); }
.ebSite[data-theme="light"] .ctaFine { color: var(--gray-400) !important; }
.ebSite[data-theme="light"] .storeBadge { background: rgba(8,30,72,0.04); border-color: rgba(8,30,72,0.1); color: var(--royal); }
.ebSite[data-theme="light"] .storeBadge .sm { color: var(--gray-500); }

/* footer */
.ebSite[data-theme="light"] .ebFoot { background: #e9eff7; color: var(--gray-600); }
.ebSite[data-theme="light"] .ebFoot h5 { color: var(--royal); }
.ebSite[data-theme="light"] .ebFoot a { color: var(--gray-600); }
.ebSite[data-theme="light"] .ebFoot a:hover { color: var(--teal-mid); }
.ebSite[data-theme="light"] .ebFoot .brand p { color: var(--gray-500); }
.ebSite[data-theme="light"] .ebFoot .bottom { border-top-color: rgba(8,30,72,0.1); }

/* ============================================================
   SUBPAGE PRIMITIVES (hosting / feature pages)
   ============================================================ */
.subHero { padding: clamp(130px, 16vh, 180px) 0 clamp(60px, 8vh, 90px); }
.subHeroInner { max-width: 820px; margin: 0 auto; text-align: center; }
.subHero h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1.02; letter-spacing: -2px; margin: 20px 0 20px; }
.subHero .sub { font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: rgba(255,255,255,0.78); max-width: 660px; margin: 0 auto; line-height: 1.6; }
.subChips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.subChip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(10px); }
.subChip svg { color: var(--accent); }
.ebSite[data-theme="light"] .subHero h1 { color: #1b50bd; }
.ebSite[data-theme="light"] .subHero .sub { color: var(--gray-600); }
.ebSite[data-theme="light"] .subChip { background: rgba(255,255,255,0.72); border-color: rgba(8,30,72,0.08); color: var(--gray-700); }

/* feature-explorer panel switches need a key-based fade */
.platPanel .platCopy, .platPanel .platVisual { animation: panelIn .45s cubic-bezier(.16,.8,.3,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* stat band */
.fieldBand { background: linear-gradient(180deg, #eef4fb, #e7eff9); }
.fieldCard { max-width: 960px; margin: 0 auto; padding: 44px 48px; border-radius: var(--r-xl); }
.fieldTitle { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; color: var(--royal); letter-spacing: -0.6px; margin-top: 12px; }
.fieldBody { font-size: 15.5px; color: var(--gray-600); line-height: 1.6; margin-top: 12px; max-width: 720px; }
.fieldStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.fieldStat b { display: block; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -1px; color: var(--teal-mid); line-height: 1; }
.fieldStat span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); margin-top: 8px; display: block; }
.fieldNote { font-size: 12.5px; color: var(--gray-400); margin-top: 24px; }
@media (max-width: 720px) { .fieldStats { grid-template-columns: 1fr 1fr; } .fieldCard { padding: 32px 26px; } }

/* case study */
.caseStudy { background: #fff; }
.caseCard { max-width: 880px; margin: 0 auto; padding: 48px 52px; border-radius: var(--r-xl); text-align: center; }
.caseTitle { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; color: var(--royal); letter-spacing: -0.5px; margin-top: 14px; }
.caseQuote { margin: 26px 0 28px; text-align: left; }
.caseQuote p { font-size: 15px; color: var(--gray-600); line-height: 1.68; margin-bottom: 14px; }
.caseBy { display: flex; align-items: center; gap: 14px; text-align: left; }
.caseAv { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--teal-mid), var(--royal)); }
.caseBy b { display: block; font-size: 15px; color: var(--royal); }
.caseBy > div > span { font-size: 13px; color: var(--gray-500); }
@media (max-width: 640px) { .caseBy .btn { display: none; } .caseCard { padding: 34px 26px; } }

/* playbooks */
.playbooks { background: linear-gradient(180deg, #f6f8fc, #eef2f9); }
.pbGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.pbCard { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-lg); cursor: pointer;
  background: #fff; border: 1px solid rgba(8,30,72,0.07); box-shadow: 0 12px 30px rgba(8,30,72,0.05); transition: transform .25s, box-shadow .25s; }
.pbCard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(8,30,72,0.12); }
.pbTag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-mid); }
.pbCard h4 { font-size: 16px; font-weight: 800; color: var(--royal); margin: 10px 0 7px; letter-spacing: -0.3px; line-height: 1.25; }
.pbCard p { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; }
@media (max-width: 900px) { .pbGrid { grid-template-columns: 1fr; } }

/* branded tournament cards (custom-branding section) */
.brandCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.brandCard { padding: 30px 28px; border-radius: var(--r-lg); color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 20px 50px rgba(8,30,72,0.2); }
.brandCard .bcEyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.brandCard h4 { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; margin-top: 6px; }
.brandCard .bcMeta { font-size: 13px; opacity: .8; margin-top: 18px; }
@media (max-width: 800px) { .brandCards { grid-template-columns: 1fr; } }

/* stat-grid chips (scorer) + rule note */
.statTiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.statTile { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 12px; background: rgba(13,138,147,0.07); border: 1px solid rgba(13,138,147,0.16); }
.statTile .stIc { color: var(--teal-mid); flex-shrink: 0; }
.statTile b { font-size: 13.5px; color: var(--royal); font-weight: 800; }
.statTile span { font-size: 12px; color: var(--gray-500); }
.ruleNote { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: rgba(204,31,31,0.06); border: 1px solid rgba(204,31,31,0.18); }
.ruleNote h5 { font-size: 14px; font-weight: 800; color: #b91c1c; display: flex; align-items: center; gap: 8px; }
.ruleNote p { font-size: 13px; color: var(--gray-600); margin-top: 6px; line-height: 1.5; }
.ebSite[data-theme="dark"] .fieldBand { background: linear-gradient(180deg, #001a3a, #042a44); }
.ebSite[data-theme="dark"] .caseStudy { background: #001226; }
.ebSite[data-theme="dark"] .playbooks { background: linear-gradient(180deg, #001a3a, #042a44); }
.ebSite[data-theme="dark"] .pbCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .pbCard h4, .ebSite[data-theme="dark"] .caseTitle, .ebSite[data-theme="dark"] .fieldTitle { color: #eaf1ff; }
.ebSite[data-theme="dark"] .fieldStat b { color: var(--teal-bright); }
.ebSite[data-theme="dark"] .statTile b { color: #eaf1ff; }

/* dark-mode treatment for glass-light cards (case study + field band) */
.ebSite[data-theme="dark"] .caseCard,
.ebSite[data-theme="dark"] .fieldCard {
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 60px rgba(0,8,30,0.4);
}
.ebSite[data-theme="dark"] .caseQuote p { color: #cdd9f0; }
.ebSite[data-theme="dark"] .caseBy b { color: #eaf1ff; }
.ebSite[data-theme="dark"] .caseBy > div > span { color: #8b9bbd; }
.ebSite[data-theme="dark"] .fieldBody { color: #aab9d8; }
.ebSite[data-theme="dark"] .fieldNote { color: #6b7a9c; }
.ebSite[data-theme="dark"] .statTile { background: rgba(77,214,210,0.08); border-color: rgba(77,214,210,0.18); }
.ebSite[data-theme="dark"] .statTile span { color: #8b9bbd; }
.ebSite[data-theme="dark"] .ruleNote { background: rgba(204,31,31,0.12); border-color: rgba(204,31,31,0.28); }
.ebSite[data-theme="dark"] .ruleNote p { color: #cdd9f0; }
.ebSite[data-theme="dark"] .mpHead span { color: rgba(255,255,255,0.85); }
.ebSite[data-theme="dark"] .figCap { color: #8b9bbd; }

/* printable reference sheet frame */
.refSheet { border-radius: var(--r-lg); overflow: hidden; background: #fff; padding: 10px;
  box-shadow: 0 30px 70px rgba(8,30,72,0.22); border: 1px solid rgba(8,30,72,0.08); }
.refSheet img { width: 100%; display: block; border-radius: 8px; }
.ebSite[data-theme="dark"] .refSheet { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

/* code-built standings / box-score / sheets panels */
.miniPanel { border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 70px rgba(8,30,72,0.18); background: #fff; border: 1px solid rgba(8,30,72,0.08); }
.mpHead { padding: 16px 20px; color: #fff; background: linear-gradient(120deg, var(--teal-brand), var(--teal-deep)); }
.mpHead b { font-size: 15px; font-weight: 800; }
.mpHead span { font-size: 12px; opacity: .8; display: block; margin-top: 2px; }
.mpBody { padding: 14px 16px; }
.mpRow { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 6px; align-items: center; padding: 9px 8px; font-size: 12.5px; border-radius: 8px; }
.mpRow.head { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-400); }
.mpRow.alt { background: var(--gray-50); }
.mpRow .team { font-weight: 700; color: var(--royal); display: flex; align-items: center; gap: 8px; }
.mpRow .team i { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; font-style: normal; }
.mpRow b { font-weight: 800; color: var(--royal); text-align: center; }
.mpRow span { text-align: center; color: var(--gray-500); }
.ebSite[data-theme="dark"] .miniPanel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .mpRow.alt { background: rgba(255,255,255,0.04); }
.ebSite[data-theme="dark"] .mpRow .team, .ebSite[data-theme="dark"] .mpRow b { color: #eaf1ff; }

/* ============================================================
   COMPARE page
   ============================================================ */
.honestCallout { max-width: 920px; margin: 0 auto; padding: 26px 30px; border-radius: var(--r-lg); }
.honestCallout .hcTag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-mid); }
.honestCallout p { font-size: 15.5px; color: var(--gray-600); line-height: 1.65; margin-top: 10px; }

.cmpCatGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.cmpCatCard { text-align: left; padding: 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(8,30,72,0.08);
  box-shadow: 0 14px 34px rgba(8,30,72,0.05); cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .2s; }
.cmpCatCard:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(8,30,72,0.12); }
.cmpCatCard.on { border-color: var(--teal-mid); box-shadow: 0 0 0 2px var(--teal-mid), 0 20px 44px rgba(8,30,72,0.12); }
.cmpCatTag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-mid); }
.cmpCatCard h3 { font-size: 21px; font-weight: 800; color: var(--royal); letter-spacing: -0.4px; margin: 9px 0 7px; }
.cmpCatCard p { font-size: 14px; color: var(--gray-500); line-height: 1.5; }
.cmpCatLink { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--teal-mid); }
@media (max-width: 820px) { .cmpCatGrid { grid-template-columns: 1fr; } }

.cmpMatchHead { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }

.cmpSummary { max-width: 900px; }
.cmpSummary h3, .cmpCases h3, .cmpBetter h3, .cmpOther h3 { font-size: clamp(1.3rem,2vw,1.7rem); font-weight: 800; color: var(--royal); letter-spacing: -0.4px; }
.cmpSummary p { font-size: 15.5px; color: var(--gray-600); line-height: 1.68; margin-top: 14px; }
.cmpVerdict { font-weight: 700; color: var(--royal) !important; }

.cmpTableWrap { margin-top: 44px; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 20px 50px rgba(8,30,72,0.1); border: 1px solid rgba(8,30,72,0.08); }
.cmpTable { width: 100%; background: #fff; }
.cmpRow { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; gap: 0; border-bottom: 1px solid var(--gray-100); }
.cmpRow:last-child { border-bottom: none; }
.cmpRow > span { padding: 14px 18px; font-size: 13.5px; }
.cmpRow.cmpHead { background: linear-gradient(120deg, var(--royal), var(--royal-dark)); }
.cmpRow.cmpHead > span { color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; padding: 16px 18px; }
.cmpRow.cmpHead .cmpC { color: var(--gray-300); }
.cmpRow.cmpHead .eb-lockup__word { color: #fff; }
.cmpRow .cmpF { font-weight: 700; color: var(--royal); }
.cmpRow .cmpE { font-weight: 600; color: var(--gray-700); border-left: 1px solid var(--gray-100); }
.cmpRow .cmpC { font-weight: 600; color: var(--gray-700); border-left: 1px solid var(--gray-100); }
.cmpRow:nth-child(even of :not(.cmpHead)) { background: #fbfcfe; }
.cmp-good { color: var(--teal-mid) !important; font-weight: 800 !important; }
.cmp-bad { color: #c0202b !important; }
.cmp-gen { color: var(--gray-500) !important; }

.cmpCases { margin-top: 56px; }
.cmpCaseGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.cmpCase { padding: 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(8,30,72,0.08); box-shadow: 0 12px 30px rgba(8,30,72,0.05); }
.cmpCaseTag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.cmpCaseTag.eg { color: var(--teal-mid); background: rgba(13,138,147,0.1); }
.cmpCaseTag.comp { color: #b45309; background: rgba(217,119,6,0.12); }
.cmpCaseTag.both { color: var(--royal); background: rgba(0,40,104,0.08); }
.cmpCase h4 { font-size: 15.5px; font-weight: 800; color: var(--royal); letter-spacing: -0.2px; }
.cmpCase p { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; margin-top: 7px; }
@media (max-width: 820px) { .cmpCaseGrid { grid-template-columns: 1fr; } }

.cmpBetter { margin-top: 56px; }
.cmpBetterLede { font-size: 14px; color: var(--gray-500); margin-top: 6px; }
.cmpBetterGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 22px; }
.cmpBetterItem { display: flex; gap: 13px; align-items: flex-start; }
.cmpBetterItem .cmpDot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--gray-300); }
.cmpBetterItem b { font-size: 15px; color: var(--royal); }
.cmpBetterItem p { font-size: 13.5px; color: var(--gray-500); line-height: 1.55; margin-top: 4px; }
@media (max-width: 820px) { .cmpBetterGrid { grid-template-columns: 1fr; } }

.cmpOther { margin-top: 56px; }
.cmpOtherGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.cmpOtherCard { padding: 20px 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(8,30,72,0.08); transition: transform .2s, box-shadow .2s; }
.cmpOtherCard:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(8,30,72,0.1); }
.cmpOtherCard b { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--royal); }
.cmpOtherCard p { font-size: 13px; color: var(--gray-500); margin-top: 6px; line-height: 1.5; }
@media (max-width: 820px) { .cmpOtherGrid { grid-template-columns: 1fr; } }

.sitTable { margin-top: 44px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(8,30,72,0.08); box-shadow: 0 14px 34px rgba(8,30,72,0.05); }
.sitRow { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--gray-100); background: #fff; }
.sitRow:last-child { border-bottom: none; }
.sitRow > span { padding: 16px 20px; font-size: 14px; color: var(--gray-700); }
.sitRow.sitHead { background: linear-gradient(120deg, var(--teal-brand), var(--teal-deep)); }
.sitRow.sitHead > span { color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.sitRow .sitPath { color: var(--teal-mid); font-weight: 700; border-left: 1px solid var(--gray-100); }
@media (max-width: 720px) { .sitRow { grid-template-columns: 1fr; } .sitRow .sitPath { border-left: none; border-top: 1px solid var(--gray-100); } }

/* dark mode for compare */
.ebSite[data-theme="dark"] .cmpCatCard, .ebSite[data-theme="dark"] .cmpCase,
.ebSite[data-theme="dark"] .cmpOtherCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .cmpCatCard h3, .ebSite[data-theme="dark"] .cmpCase h4, .ebSite[data-theme="dark"] .cmpOtherCard b,
.ebSite[data-theme="dark"] .cmpSummary h3, .ebSite[data-theme="dark"] .cmpCases h3, .ebSite[data-theme="dark"] .cmpBetter h3,
.ebSite[data-theme="dark"] .cmpOther h3, .ebSite[data-theme="dark"] .cmpVerdict, .ebSite[data-theme="dark"] .cmpBetterItem b { color: #eaf1ff !important; }
.ebSite[data-theme="dark"] .cmpTable, .ebSite[data-theme="dark"] .sitRow { background: rgba(255,255,255,0.03); }
.ebSite[data-theme="dark"] .cmpRow { border-color: rgba(255,255,255,0.08); }
.ebSite[data-theme="dark"] .cmpRow:nth-child(even of :not(.cmpHead)) { background: rgba(255,255,255,0.02); }
.ebSite[data-theme="dark"] .cmpRow .cmpF { color: #eaf1ff; }
.ebSite[data-theme="dark"] .cmpRow .cmpE, .ebSite[data-theme="dark"] .cmpRow .cmpC { color: #aab9d8; border-color: rgba(255,255,255,0.08); }
.ebSite[data-theme="dark"] .cmp-good { color: var(--teal-bright) !important; }
.ebSite[data-theme="dark"] .cmp-bad { color: #ff7a85 !important; }
.ebSite[data-theme="dark"] .honestCallout p { color: #cdd9f0; }
.ebSite[data-theme="dark"] .honestCallout {
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 18px 44px rgba(0,8,30,0.4);
}
.ebSite[data-theme="dark"] .honestCallout .hcTag { color: var(--teal-bright); }

/* Pricing feature matrix */
.pmWrap { margin-top: 48px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(8,30,72,0.08); box-shadow: 0 18px 44px rgba(8,30,72,0.08); }
.pmTable { background: #fff; }
.pmRow { display: grid; grid-template-columns: 2fr repeat(5, 1fr); align-items: center; border-bottom: 1px solid var(--gray-100); }
.pmRow:last-child { border-bottom: none; }
.pmRow > span { padding: 13px 16px; font-size: 13px; }
.pmRow.pmHead { background: linear-gradient(120deg, var(--royal), var(--royal-dark)); }
.pmRow.pmHead > span { color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .02em; text-align: center; }
.pmRow.pmHead .pmF { text-align: left; }
.pmRow .pmF { font-weight: 700; color: var(--royal); }
.pmRow .pmC { text-align: center; border-left: 1px solid var(--gray-100); }
.pmRow:nth-child(even of :not(.pmHead)) { background: #fbfcfe; }
.pmYes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--teal-mid), var(--teal-brand)); box-shadow: 0 3px 8px rgba(13,138,147,0.35); }
.pmYes svg { stroke-width: 3; }
.pmNo { color: var(--gray-300); font-weight: 700; }
.pmTag { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-mid); background: rgba(13,138,147,0.1); padding: 3px 8px; border-radius: 999px; }
@media (max-width: 820px) { .pmWrap { overflow-x: auto; } .pmTable { min-width: 720px; } }
.ebSite[data-theme="dark"] .pmTable { background: rgba(255,255,255,0.03); }
.ebSite[data-theme="dark"] .pmRow { border-color: rgba(255,255,255,0.08); }
.ebSite[data-theme="dark"] .pmRow:nth-child(even of :not(.pmHead)) { background: rgba(255,255,255,0.02); }
.ebSite[data-theme="dark"] .pmRow .pmF { color: #eaf1ff; }
.ebSite[data-theme="dark"] .pmRow .pmC { border-color: rgba(255,255,255,0.08); }
.ebSite[data-theme="dark"] .pmYes { color: #fff; background: linear-gradient(135deg, var(--teal-mid), var(--teal-bright)); }
.ebSite[data-theme="dark"] .pmNo { color: var(--gray-600); }

/* Legal / policy docs */
.legalMeta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--gray-500); }
.legalMeta b { color: var(--royal); font-weight: 800; margin-right: 5px; }
.polSec { margin-bottom: 18px; }
.polSec h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.2rem,1.9vw,1.55rem); font-weight: 800; color: var(--royal); letter-spacing: -0.4px; }
.polNum { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--teal-mid), var(--teal-brand)); }
.polSec .docLede { margin-top: 14px; }
.polGroup { margin-top: 16px; }
.polSub { font-size: 14px; font-weight: 800; color: var(--royal); margin-bottom: 8px; }
.polList { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.polList li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--gray-600); line-height: 1.6; }
.polList li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--teal-mid); transform: rotate(45deg); }
.ebSite[data-theme="dark"] .polSec h2, .ebSite[data-theme="dark"] .polSub { color: #eaf1ff; }
.ebSite[data-theme="dark"] .polList li { color: #aab9d8; }
.ebSite[data-theme="dark"] .legalMeta { color: #8b9bbd; }
.ebSite[data-theme="dark"] .legalMeta b { color: #eaf1ff; }

/* Spectator guide accordion */
.guideIntro { text-align: center; max-width: 640px; margin: 8px auto 32px; font-size: 15.5px; color: var(--gray-500); line-height: 1.6; }
.guideWrap { max-width: 860px; margin: 0 auto; }
.guideAcc { display: flex; flex-direction: column; gap: 12px; }
.gaItem { background: #fff; border: 1px solid rgba(8,30,72,0.08); border-radius: var(--r-lg); box-shadow: 0 10px 26px rgba(8,30,72,0.05); overflow: hidden; transition: box-shadow .2s; }
.gaItem.open { box-shadow: 0 18px 44px rgba(8,30,72,0.12); }
.gaQ { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px 20px; }
.gaIc { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--teal-mid); background: var(--teal-subtle, #e6f9f8); border: 1px solid rgba(13,138,147,0.18); }
.gaTitle { flex: 1; font-size: 16px; font-weight: 800; color: var(--royal); letter-spacing: -0.2px; }
.gaPm { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); color: var(--teal-mid); transition: transform .3s, background .2s; }
.gaItem.open .gaPm { transform: rotate(90deg); background: var(--teal-mid); color: #fff; }
.gaBody { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.gaInner { padding: 0 20px 20px 72px; }
.gaInner p { font-size: 14.5px; color: var(--gray-600); line-height: 1.65; }
.gaInner ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gaInner li { font-size: 14px; color: var(--gray-600); line-height: 1.5; padding-left: 18px; position: relative; }
.gaInner li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-mid); }
.gaNote { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; color: var(--teal-deep); background: rgba(13,138,147,0.08); border: 1px solid rgba(13,138,147,0.2); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.gaNote svg { flex-shrink: 0; margin-top: 2px; color: var(--teal-mid); }
@media (max-width: 600px) { .gaInner { padding-left: 20px; } }
.ebSite[data-theme="dark"] .gaItem { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .gaTitle { color: #eaf1ff; }
.ebSite[data-theme="dark"] .gaInner p, .ebSite[data-theme="dark"] .gaInner li { color: #aab9d8; }
.ebSite[data-theme="dark"] .gaPm { background: rgba(255,255,255,0.08); color: var(--teal-bright); }
.ebSite[data-theme="dark"] .gaIc { background: rgba(77,214,210,0.12); color: var(--teal-bright); }
.ebSite[data-theme="dark"] .gaNote { color: #aee9e6; background: rgba(77,214,210,0.1); border-color: rgba(77,214,210,0.22); }
.ebSite[data-theme="dark"] .guideIntro { color: #aab9d8; }

/* Doc / support / legal pages */
.docPage { background: linear-gradient(180deg, #f6f8fc, #eef2f9); }
.ebSite[data-theme="dark"] .docPage { background: linear-gradient(180deg, #001a3a, #042a44); }
.docWrap { max-width: none; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.docCard { background: #fff; border: 1px solid rgba(8,30,72,0.08); border-radius: var(--r-lg); padding: 30px 32px; box-shadow: 0 14px 34px rgba(8,30,72,0.05); }
.docCard h2 { font-size: 20px; font-weight: 800; color: var(--royal); letter-spacing: -0.3px; margin-bottom: 16px; }
.docCard h2 + .docLede, .docLede { font-size: 14.5px; color: var(--gray-600); margin-bottom: 14px; }
.docSteps { display: flex; flex-direction: column; gap: 16px; }
.docStep { display: flex; gap: 14px; align-items: flex-start; }
.docNum { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--teal-mid), var(--teal-brand)); }
.docStep h4 { font-size: 15.5px; font-weight: 800; color: var(--royal); }
.docStep p { font-size: 14px; color: var(--gray-600); margin-top: 3px; line-height: 1.55; }
.docTable { border: 1px solid var(--gray-100); border-radius: var(--r); overflow: hidden; }
.docRow { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 0; border-bottom: 1px solid var(--gray-100); }
.docRow:last-child { border-bottom: none; }
.docRow > span { padding: 13px 16px; font-size: 13.5px; color: var(--gray-700); }
.docRow.docHead { background: var(--gray-50); }
.docRow.docHead > span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); }
.docRow .docF { font-weight: 600; color: var(--royal); }
.docRow .docRet { color: var(--gray-500); }
.docPill { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; }
.docPill.del { color: #c0202b; background: rgba(204,31,31,0.1); }
.docPill.keep { color: var(--ball-orange, #c7901c); background: rgba(199,144,28,0.12); }
.docNote { font-size: 13px; color: var(--gray-500); margin-top: 14px; font-style: italic; }
.docContact { display: flex; flex-wrap: wrap; gap: 12px; }
.docContact a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--teal-mid); padding: 10px 16px; border-radius: var(--r-pill); background: var(--teal-subtle, #e6f9f8); border: 1px solid rgba(13,138,147,0.18); }
.docList { display: flex; flex-direction: column; gap: 12px; }
.docList a { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--gray-700); }
.docList a b { color: var(--royal); }
.docList .dlIc { color: var(--teal-mid); flex-shrink: 0; margin-top: 2px; }
.ebSite[data-theme="dark"] .docCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .docCard h2, .ebSite[data-theme="dark"] .docStep h4, .ebSite[data-theme="dark"] .docRow .docF, .ebSite[data-theme="dark"] .docList a b { color: #eaf1ff; }
.ebSite[data-theme="dark"] .docCard p, .ebSite[data-theme="dark"] .docStep p, .ebSite[data-theme="dark"] .docRow > span, .ebSite[data-theme="dark"] .docLede, .ebSite[data-theme="dark"] .docList a { color: #aab9d8; }
.ebSite[data-theme="dark"] .docTable, .ebSite[data-theme="dark"] .docRow { border-color: rgba(255,255,255,0.08); }
.ebSite[data-theme="dark"] .docRow.docHead { background: rgba(255,255,255,0.04); }
.ebSite[data-theme="dark"] .docContact a { background: rgba(77,214,210,0.12); border-color: rgba(77,214,210,0.22); color: var(--teal-bright); }
@media (max-width: 640px) { .docRow { grid-template-columns: 1fr; } .docCard { padding: 24px; } }
.enableGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.enableItem { padding: 16px 18px; border-radius: var(--r); background: var(--gray-50); border: 1px solid var(--gray-100); }
.enableItem h4 { font-size: 14.5px; font-weight: 800; color: var(--royal); }
.enableItem p { font-size: 13px; color: var(--gray-600); margin-top: 5px; line-height: 1.5; }
.ebSite[data-theme="dark"] .enableItem { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.ebSite[data-theme="dark"] .enableItem h4 { color: #eaf1ff; }
.ebSite[data-theme="dark"] .enableItem p { color: #aab9d8; }
.aFeat { color: var(--royal); font-size: 15px; }
.ebSite[data-theme="dark"] .aFeat { color: #eaf1ff; }
@media (max-width: 640px) { .enableGrid { grid-template-columns: 1fr; } }

/* Clubs directory + tournaments list */
.dirSearch { max-width: 460px; margin: 0 auto 32px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-pill); background: #fff; border: 1px solid rgba(8,30,72,0.1); box-shadow: 0 8px 24px rgba(8,30,72,0.06); color: var(--gray-400); }
.dirSearch input { flex: 1; border: 0; outline: 0; background: none; font-family: inherit; font-size: 15px; color: var(--ink); }
.dirGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dirCard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: #fff; border: 1px solid rgba(8,30,72,0.08); box-shadow: 0 8px 22px rgba(8,30,72,0.04); transition: transform .2s, box-shadow .2s; }
.dirCard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(8,30,72,0.1); }
.dirMono { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.02em; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.25); }
.dirMeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dirMeta b { font-size: 15px; font-weight: 800; color: var(--royal); letter-spacing: -0.2px; }
.dirPill { width: fit-content; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; color: var(--teal-mid); background: var(--teal-subtle, #e6f9f8); }
.dirPill.hs { color: var(--ball-orange, #c7901c); background: rgba(199,144,28,0.12); }
.dirChev { flex-shrink: 0; color: var(--gray-400); }
.dirEmpty { grid-column: 1/-1; text-align: center; color: var(--gray-500); padding: 30px; }
.dirFeat { display: flex; flex-wrap: wrap; gap: 10px; }
.dirFeatBtn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--royal); padding: 9px 15px; border-radius: var(--r-pill); background: var(--gray-50); border: 1px solid rgba(8,30,72,0.08); }
.dirFeatBtn .dfDot { width: 9px; height: 9px; border-radius: 50%; }
.ebSite[data-theme="dark"] .dirSearch { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .dirSearch input { color: #eaf1ff; }
.ebSite[data-theme="dark"] .dirCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .dirMeta b { color: #eaf1ff; }
.ebSite[data-theme="dark"] .dirFeatBtn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #eaf1ff; }
@media (max-width: 860px) { .dirGrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dirGrid { grid-template-columns: 1fr; } }

/* tournaments list */
.tourGroup { margin-bottom: 34px; }
.tourGroup h2 { font-size: 18px; font-weight: 800; color: var(--royal); margin-bottom: 16px; letter-spacing: -0.2px; }
.tourEmpty { font-size: 14.5px; color: var(--gray-500); font-style: italic; padding: 16px 0; }
.tourCard { display: block; padding: 24px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(8,30,72,0.08); box-shadow: 0 12px 30px rgba(8,30,72,0.05); transition: transform .2s, box-shadow .2s; }
.tourCard:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(8,30,72,0.1); }
.tourYear { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-mid); }
.tourCard h3 { font-size: 21px; font-weight: 800; color: var(--royal); letter-spacing: -0.4px; margin: 6px 0 8px; }
.tourMeta { font-size: 14px; color: var(--gray-600); }
.tourHost { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--gray-200); font-size: 13px; color: var(--gray-500); }
.ebSite[data-theme="dark"] .tourGroup h2 { color: #eaf1ff; }
.ebSite[data-theme="dark"] .tourCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .tourCard h3 { color: #eaf1ff; }
.ebSite[data-theme="dark"] .tourMeta { color: #aab9d8; }
.ebSite[data-theme="dark"] .tourHost { border-top-color: rgba(255,255,255,0.12); color: #8b9bbd; }

/* Club page hero */
.clubHero { position: relative; overflow: hidden; padding: clamp(110px,14vh,150px) 0 clamp(40px,6vh,64px);
  background: linear-gradient(150deg, var(--cb) 0%, color-mix(in srgb, var(--cb) 55%, #000) 100%); color: #fff; }
.clubHero::after { content:''; position:absolute; width: 460px; height: 460px; right: -120px; top: -160px; border-radius: 50%; background: rgba(255,255,255,0.06); }
.clubHeroInner { display: flex; align-items: center; gap: 24px; position: relative; z-index: 2; }
.clubCrest { flex-shrink: 0; width: 92px; height: 92px; border-radius: 22px; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 18px 40px rgba(0,8,24,0.35); }
.clubCrest img { width: 78%; height: 78%; object-fit: contain; }
.clubMono { font-size: 32px; font-weight: 900; color: var(--cb); letter-spacing: -1px; }
.clubLoc { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.14); padding: 4px 11px; border-radius: 999px; }
.clubHeroText h1 { font-size: clamp(2rem,4vw,3.2rem); font-weight: 800; letter-spacing: -1.4px; line-height: 1.04; margin: 12px 0 10px; }
.clubHeroText p { font-size: clamp(1rem,1.4vw,1.18rem); color: rgba(255,255,255,0.82); max-width: 520px; }
.venueGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; }
.venueCell { padding: 16px 18px; min-width: 0; }
.venueCell:first-child { border-right: 1px solid var(--gray-100); }
.venueLbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-mid); margin-bottom: 7px; }
.venueVal { font-size: 14.5px; font-weight: 600; color: var(--royal); line-height: 1.5; word-break: break-word; }
.ebSite[data-theme="dark"] .venueVal { color: #eaf1ff; }
.btn-outline { background: #fff; border: 1px solid var(--gray-200); color: var(--royal); }
.btn-outline:hover { background: var(--gray-50); }
.ebSite[data-theme="dark"] .btn-outline { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: #eaf1ff; }

/* Nav over an always-dark hero (club/tournament pages) — keep white at top in light mode */
.ebSite[data-theme="light"][data-darkhero] .ebNav:not(.scrolled) .links a,
.ebSite[data-theme="light"][data-darkhero] .ebNav:not(.scrolled) .eb-lockup--on-dark .eb-lockup__word { color: rgba(255,255,255,0.82); }
.ebSite[data-theme="light"][data-darkhero] .ebNav:not(.scrolled) .eb-lockup--on-dark .eb-lockup__sub { color: var(--teal-bright); }
.ebSite[data-theme="light"][data-darkhero] .ebNav:not(.scrolled) .links a:hover { color: #fff; background: rgba(255,255,255,0.1); }
.ebSite[data-theme="light"][data-darkhero] .ebNav:not(.scrolled) .langBtn { color: rgba(255,255,255,0.82); }
.ebSite[data-theme="light"][data-darkhero] .ebNav:not(.scrolled) .themeToggle { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.ebSite[data-darkhero] .ebNav:not(.scrolled) .navcta .btn-primary { background: #fff; color: var(--royal); box-shadow: 0 8px 22px rgba(0,0,0,0.32); }
.ebSite[data-darkhero] .ebNav:not(.scrolled) .navcta .btn-primary::before { display: none; }
.ebSite[data-darkhero] .ebNav:not(.scrolled) .navcta .btn-primary:hover { background: #fff; transform: translateY(-2px); }
/* Mono (black/gold) brand pages — neutral near-black dark-mode sections, not navy */
.ebSite[data-theme="dark"][data-brandtheme="mono"] .docPage { background: linear-gradient(180deg, #16181e 0%, #0b0c10 100%); }
/* club / tournament pages use the full width */
.ebSite[data-darkhero] .docWrap { max-width: none; }
.ebSite[data-darkhero] .tdHeroInner, .ebSite[data-darkhero] .clubHeroInner { max-width: none; }
.ebSite[data-theme="dark"] .venueCell:first-child { border-right-color: rgba(255,255,255,0.1); }
@media (max-width: 620px) { .clubHeroInner { flex-direction: column; text-align: center; } .venueGrid { grid-template-columns: 1fr; } .venueCell:first-child { border-right: none; border-bottom: 1px solid var(--gray-100); padding: 0 0 12px; } .venueCell { padding: 12px 0 0; } }

/* Tournament detail page */
.tdHero { position: relative; overflow: hidden; padding: clamp(120px,15vh,170px) 0 clamp(50px,7vh,80px);
  background: linear-gradient(150deg, var(--cb,#155c63) 0%, color-mix(in srgb, var(--cb,#155c63) 50%, #000) 100%); color: #fff; }
.tdHero::after { content:''; position:absolute; width: 500px; height: 500px; left: -140px; bottom: -220px; border-radius: 50%; background: rgba(255,255,255,0.05); }
.tdHeroInner { position: relative; z-index: 2; max-width: 760px; }
.tdHeroInner h1 { font-size: clamp(2.2rem,4.6vw,3.6rem); font-weight: 800; letter-spacing: -1.6px; line-height: 1.03; margin: 16px 0 16px; }
.tdHeroInner p { font-size: clamp(1rem,1.4vw,1.18rem); color: rgba(255,255,255,0.82); line-height: 1.6; max-width: 640px; }
.tdChips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tdChip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2); padding: 8px 14px; border-radius: 999px; }
.tdDetails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--gray-100); border-radius: var(--r); overflow: hidden; }
.tdDetail { padding: 16px 18px; border-right: 1px solid var(--gray-100); }
.tdDetail:last-child { border-right: none; }
.tdDetail .tdLbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-mid); margin-bottom: 6px; }
.tdDetail .tdVal { font-size: 14px; font-weight: 600; color: var(--royal); line-height: 1.4; }
.ebSite[data-theme="dark"] .tdDetail .tdVal { color: #eaf1ff; }
.ebSite[data-theme="dark"] .tdDetails, .ebSite[data-theme="dark"] .tdDetail { border-color: rgba(255,255,255,0.1); }
@media (max-width: 760px) { .tdDetails { grid-template-columns: 1fr 1fr; } .tdDetail:nth-child(2) { border-right: none; } .tdDetail:nth-child(1), .tdDetail:nth-child(2) { border-bottom: 1px solid var(--gray-100); } }
.ebSite[data-theme="dark"] .sitRow { border-color: rgba(255,255,255,0.08); }
.ebSite[data-theme="dark"] .sitRow > span { color: #cdd9f0; }
.ebSite[data-theme="dark"] .sitRow .sitPath { color: var(--teal-bright); }

/* ============================================================
   PRINTABLES — print-ready A4 sheets
   ============================================================ */
.printHero { padding-bottom: clamp(40px,5vw,64px); }
.sheetStage { background: linear-gradient(180deg, #e7edf6, #dde6f2); padding: clamp(40px,5vw,72px) 0; }
.ebSite[data-theme="dark"] .sheetStage { background: linear-gradient(180deg, #04162e, #061f33); }
.sheetStack { display: flex; flex-direction: column; align-items: center; gap: 30px; }

.a4Sheet { width: 100%; max-width: 820px; background: #fff; color: #1a2740; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(8,30,72,0.22); border: 1px solid rgba(8,30,72,0.08); }
.shHead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 26px;
  background: linear-gradient(120deg, var(--royal), var(--teal-brand)); color: #fff; }
.shBrand { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; }
.shBrand img { width: 26px; height: 26px; border-radius: 7px; }
.shTitle { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; text-align: right; }
.shSub { padding: 10px 26px; background: #f1f5fb; font-size: 12px; color: var(--gray-500); border-bottom: 1px solid var(--gray-100); }
.shBody { padding: 24px 26px; display: flex; flex-direction: column; gap: 20px; }
.shFoot { display: flex; align-items: center; justify-content: space-between; padding: 12px 26px; border-top: 1px solid var(--gray-100); font-size: 11px; color: var(--gray-400); }
.shBrand2 { display: inline-flex; align-items: center; gap: 6px; }
.shBrand2 img { width: 14px; height: 14px; border-radius: 4px; }

.shSec h3 { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 800; color: var(--royal); letter-spacing: -0.3px; }
.shNum { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--teal-mid), var(--teal-brand)); }
.shSecBody { margin-top: 9px; padding-left: 37px; }
.shList { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.shList.tight { gap: 3px; }
.shList li { position: relative; padding-left: 16px; font-size: 12.5px; color: #3a4d6e; line-height: 1.5; }
.shList li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 1px; background: var(--teal-mid); transform: rotate(45deg); }
.shList li b { color: var(--royal); font-weight: 700; }
.shCards { display: grid; gap: 10px; }
.shCard { padding: 12px 14px; border-radius: 10px; background: #f6f8fc; border: 1px solid rgba(8,30,72,0.07); }
.shCard h4 { font-size: 13px; font-weight: 800; color: var(--royal); }
.shCard p { font-size: 11.5px; color: var(--gray-500); margin-top: 3px; line-height: 1.45; }
.shNote { padding: 11px 15px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.shNote b { font-weight: 800; }
.shNote.amber { background: rgba(199,144,28,0.1); border: 1px solid rgba(199,144,28,0.28); color: #8a6207; }
.shNote.blue { background: rgba(13,138,147,0.08); border: 1px solid rgba(13,138,147,0.22); color: #0c5a61; }
.shNote.green { background: rgba(21,128,61,0.08); border: 1px solid rgba(21,128,61,0.22); color: #166534; }
.shNote.red { background: rgba(185,28,28,0.07); border: 1px solid rgba(185,28,28,0.22); color: #991b1b; }
.shNote h5 { font-size: 12.5px; font-weight: 800; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }

/* quick facts + before-you-start two-col */
.shTwoCol { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.shFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.shFact { padding: 11px 13px; border-radius: 10px; background: #eef5f5; border: 1px solid rgba(13,138,147,0.18); }
.shFact .fLabel { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-mid); }
.shFact .fVal { font-size: 15px; font-weight: 900; color: var(--royal); letter-spacing: -0.4px; margin-top: 2px; }
.shStepGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.shNoteGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .shTwoCol, .shStepGrid, .shNoteGrid { grid-template-columns: 1fr; } }

/* print: hide chrome, sheets fill the page */
@media print {
  .ebNav, .ebFoot, .printHero, .tweak-fab { display: none !important; }
  .ebSite, .sheetStage { background: #fff !important; padding: 0 !important; }
  /* force backgrounds/colors to actually print (browsers strip them by default) */
  html, body, .ebSite, .a4Sheet, .a4Sheet * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .sheetStack { gap: 0; display: block; }
  .reveal { opacity: 1 !important; transform: none !important; }
  @page { size: A4 portrait; margin: 0; }
  .sheetStack > * { display: block; }
  .a4Sheet {
    box-shadow: none; border: none; border-radius: 0; max-width: 100%; width: 100%;
    page-break-after: always; break-after: page;
  }
  .a4Sheet:last-child { page-break-after: auto; break-after: auto; }
  /* tighter, fit-to-page sizing */
  .shHead { padding: 9mm 11mm 5mm; }
  .shSub { padding: 3mm 11mm; }
  .shBody { padding: 6mm 11mm; gap: 3mm; }
  .shFoot { padding: 4mm 11mm 8mm; }
  .shSec h3 { font-size: 12.5px; }
  .shNum { width: 21px; height: 21px; font-size: 11px; }
  .shSecBody { margin-top: 5px; padding-left: 31px; }
  .shList { gap: 3px; }
  .shList li, .shCard p, .modD { font-size: 10px; line-height: 1.35; }
  .shList li::before { top: 6px; }
  .shCard, .modCard { padding: 8px 10px; }
  .shCard h4, .modTop b { font-size: 11.5px; }
  .modW { font-size: 9px; line-height: 1.32; }
  .shNote { padding: 7px 10px; font-size: 10px; line-height: 1.36; }
  .shNote h5 { font-size: 11px; margin-bottom: 3px; }
  .shFacts { gap: 5px; }
  .shFact { padding: 7px 9px; }
  .shFact .fVal { font-size: 12.5px; }
  .shFact .fLabel { font-size: 8.5px; }
  .shStepGrid, .shCards, .modGrid { gap: 6px; }
  .shNoteGrid { gap: 6px; }
  .refRow > span { padding: 5px 9px; font-size: 9.5px; }
  .shSub { font-size: 10px; }
  /* never split a block across pages */
  .shSec, .shNote, .modCard, .shCard, .shFact, .refRow, .shTwoCol, .shStepGrid, .shNoteGrid { break-inside: avoid; page-break-inside: avoid; }
}

/* modifier cards + ref tables (cheat sheet) */
.modGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modCard { padding: 12px 14px; border-radius: 10px; background: #f6f8fc; border: 1px solid rgba(8,30,72,0.08); }
.modTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modTop b { font-size: 14px; font-weight: 800; color: var(--royal); }
.modTag { font-size: 9px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }
.modTag.mGoal { background: linear-gradient(135deg, var(--teal-mid), var(--teal-brand)); }
.modTag.mSteal { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.modTag.mTurn { background: linear-gradient(135deg, #d99a1c, #b45309); }
.modTag.mExcl { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.modTag.mEarn { background: linear-gradient(135deg, #22c55e, #15803d); }
.modTag.mPen { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.modD { font-size: 12px; color: #3a4d6e; line-height: 1.45; margin-top: 7px; }
.modW { font-size: 11px; color: var(--gray-500); line-height: 1.4; margin-top: 6px; }
.modW b { color: var(--teal-mid); font-weight: 700; }

.refTable { border: 1px solid var(--gray-100); border-radius: 10px; overflow: hidden; }
.refRow { display: grid; grid-template-columns: 0.9fr 1.6fr 1.6fr; gap: 0; border-bottom: 1px solid var(--gray-100); }
.refRow.dbtRow, .refRow.dbtHead { grid-template-columns: 1fr 2.2fr; }
.refRow:last-child { border-bottom: none; }
.refRow > span { padding: 9px 13px; font-size: 11.5px; color: #3a4d6e; line-height: 1.4; }
.refRow.refHead { background: #eef3fb; }
.refRow.refHead > span { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--royal); }
.refRow:nth-child(even of :not(.refHead)) { background: #fbfcfe; }
.refBtn { font-weight: 800; color: var(--teal-mid) !important; }

/* printables hub cards */
.pbHubGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.pbHubCard { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); cursor: pointer;
  background: #fff; border: 1px solid rgba(8,30,72,0.08); box-shadow: 0 14px 34px rgba(8,30,72,0.06); transition: transform .25s, box-shadow .25s; }
.pbHubCard:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(8,30,72,0.13); }
.pbHubIco { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--royal), var(--teal-mid)); margin-bottom: 16px; }
.pbHubCard h3 { font-size: 20px; font-weight: 800; color: var(--royal); letter-spacing: -0.4px; }
.pbHubMeta { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-mid); margin-top: 6px; }
.pbHubCard p { font-size: 14px; color: var(--gray-500); line-height: 1.55; margin-top: 10px; flex: 1; }
.pbHubLink { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--teal-mid); }
@media (max-width: 760px) { .pbHubGrid { grid-template-columns: 1fr; } }

.ebSite[data-theme="dark"] .a4Sheet { background: #fff; }
.ebSite[data-theme="dark"] .pbHubCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .pbHubCard h3 { color: #eaf1ff; }
.ebSite[data-theme="dark"] .pbHubCard p { color: #aab9d8; }

/* A4 sheets are always white paper — keep their headings dark even in dark theme */
.ebSite[data-theme="dark"] .a4Sheet h3,
.ebSite[data-theme="dark"] .a4Sheet h4 { color: var(--royal) !important; }
.ebSite[data-theme="dark"] .a4Sheet .shTitle,
.ebSite[data-theme="dark"] .a4Sheet .shBrand { color: #fff !important; }
.ebSite[data-theme="dark"] .a4Sheet .shNote.amber h5 { color: #8a6207 !important; }
.ebSite[data-theme="dark"] .a4Sheet .shNote.blue h5 { color: #0c5a61 !important; }
.ebSite[data-theme="dark"] .a4Sheet .shNote.green h5 { color: #166534 !important; }
.ebSite[data-theme="dark"] .a4Sheet .shNote.red h5 { color: #991b1b !important; }

/* ============================================================
   CASE STUDY — Field Tested editorial
   ============================================================ */
.csHero { padding: clamp(120px,15vh,170px) 0 clamp(50px,7vh,80px); background:
  radial-gradient(120% 90% at 80% 0%, rgba(77,214,210,0.12), transparent 46%),
  linear-gradient(180deg, #eaf3fb, #dde9f5); }
.ebSite[data-theme="dark"] .csHero { background:
  radial-gradient(120% 90% at 78% 6%, rgba(77,214,210,0.18) 0%, transparent 45%),
  linear-gradient(170deg,#001230,#00112e 60%,#03283f); }
.csMast { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-mid); padding-bottom: 18px; border-bottom: 1px solid rgba(8,30,72,0.12); }
.ebSite[data-theme="dark"] .csMast { color: var(--teal-bright); border-color: rgba(255,255,255,0.12); }
.csTitle { font-size: clamp(2.4rem,5.4vw,4.4rem); font-weight: 900; line-height: 1.02; letter-spacing: -2px; color: var(--royal); margin: 26px 0 0; }
.csTitle em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; }
.ebSite[data-theme="dark"] .csTitle { color: #fff; }
.csHero .sub { font-size: clamp(1.05rem,1.6vw,1.3rem); color: var(--gray-600); max-width: 720px; margin-top: 20px; line-height: 1.55; }
.ebSite[data-theme="dark"] .csHero .sub { color: rgba(255,255,255,0.78); }
.csMeta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--gray-500); }
.csMeta span { display: inline-flex; align-items: center; gap: 7px; }
.csMeta svg { color: var(--teal-mid); }
.csMeta .csBy { color: var(--royal); font-weight: 700; }
.ebSite[data-theme="dark"] .csMeta { color: rgba(255,255,255,0.6); }
.ebSite[data-theme="dark"] .csMeta .csBy { color: #fff; }
.csHeroShot { position: relative; margin: 32px auto 0; max-width: 67%; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px rgba(8,30,72,0.28); }
.csHeroImg { width: 100%; height: auto; display: block; }
.csChipStack { position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; }
.csShotChip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.csShotChip.livePill { background: rgba(255,255,255,0.96); color: var(--royal); box-shadow: 0 6px 18px rgba(0,8,30,0.28); }
.csShotChip.livePill .live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: #fff; background: var(--red-live); padding: 3px 8px; border-radius: 999px; }
.csShotChip.livePill .live .pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: livepulse 1.4s ease-in-out infinite; }
.csShotChip.venue { background: rgba(8,18,30,0.6); color: #fff; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.csShotChip.venue .vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 8px var(--teal-bright); }
.csCapRow { display: flex; align-items: center; gap: 8px 16px; margin-top: 14px; flex-wrap: wrap; }
.csCap { font-size: 13px; font-style: italic; color: var(--gray-500); margin: 0; flex: 1 1 340px; }
.csCredit { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); white-space: nowrap; }
.csRecomp { font-size: 12px; font-weight: 700; color: var(--royal); background: #fff; border: 1px solid rgba(8,30,72,0.12); border-radius: 999px; padding: 7px 14px; white-space: nowrap; box-shadow: 0 6px 16px rgba(8,30,72,0.1); }
.csRecomp b { color: var(--teal-mid); }
.csDeckImg { width: 100%; height: auto; display: block; margin-top: 18px; border-radius: 16px; box-shadow: 0 20px 50px rgba(8,30,72,0.18); }
.ebSite[data-theme="dark"] .csCap { color: rgba(255,255,255,0.6); }
.ebSite[data-theme="dark"] .csCredit { color: rgba(255,255,255,0.45); }
.ebSite[data-theme="dark"] .csRecomp { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.16); color: #fff; }
.ebSite[data-theme="dark"] .csRecomp b { color: var(--teal-bright); }

.csNumbers { background: #fff; }
.ebSite[data-theme="dark"] .csNumbers { background: #001226; }
.csNumCard { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: center; padding: 38px 42px; border-radius: var(--r-xl); }
.csBig { font-size: clamp(3.4rem,7vw,5.5rem); font-weight: 900; letter-spacing: -3px; color: var(--teal-mid); line-height: 0.9; margin: 10px 0 12px; }
.csNumLead p { font-size: 14.5px; color: var(--gray-600); line-height: 1.6; }
.csNumGrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 20px; }
.csNum b { display: block; font-size: clamp(1.2rem,1.8vw,1.6rem); font-weight: 900; letter-spacing: -0.5px; color: var(--royal); }
.csNum span { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-400); margin-top: 4px; display: block; line-height: 1.3; }
.ebSite[data-theme="dark"] .csBig { color: var(--teal-bright); }
.ebSite[data-theme="dark"] .csNumLead p { color: #aab9d8; }
.ebSite[data-theme="dark"] .csNum b { color: #eaf1ff; }
.ebSite[data-theme="dark"] .csNumCard {
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 60px rgba(0,8,30,0.4);
}
.ebSite[data-theme="dark"] .csNum span { color: #8b9bbd; }
@media (max-width: 820px) { .csNumCard { grid-template-columns: 1fr; gap: 24px; } .csNumGrid { grid-template-columns: 1fr 1fr; } }

.csLead { background: #fff; padding-top: 0; }
.ebSite[data-theme="dark"] .csLead { background: #001226; }
.csLeadP { max-width: 760px; margin: 0 auto; font-size: clamp(1.1rem,1.7vw,1.4rem); line-height: 1.7; color: var(--gray-700); }
.csLeadP em { font-family: Georgia, serif; font-style: italic; }
.ebSite[data-theme="dark"] .csLeadP { color: #cdd9f0; }
.dropCap { float: left; font-family: Georgia, serif; font-size: 4.2rem; line-height: 0.8; font-weight: 700; color: var(--teal-mid); margin: 6px 12px 0 0; }

.csChapter { background: #fff; }
.csChapter.alt { background: linear-gradient(180deg, #f6f8fc, #eef2f9); }
.ebSite[data-theme="dark"] .csChapter, .ebSite[data-theme="dark"] .csChapter.alt { background: linear-gradient(180deg,#001a3a,#042a44); }
.csChHead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px; }
.csCh { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-mid); background: var(--teal-subtle,#e6f9f8); padding: 5px 12px; border-radius: 999px; flex-shrink: 0; }
.csChHead .eb-h2 em { font-family: Georgia, serif; font-style: italic; font-weight: 500; }
.ebSite[data-theme="dark"] .csChHead .eb-h2 { color: #eaf1ff !important; }
.ebSite[data-theme="dark"] .csCh { background: rgba(77,214,210,0.12); color: var(--teal-bright); }
.csTwo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.csSubH { font-size: clamp(1.3rem,2vw,1.7rem); font-weight: 800; color: var(--royal); letter-spacing: -0.4px; }
.ebSite[data-theme="dark"] .csSubH { color: #eaf1ff; }
.csChecks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.csChecks li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--gray-600); line-height: 1.5; }
.csChecks .csTick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,var(--teal-mid),var(--teal-brand)); margin-top: 1px; }
.csChecks code { font-family: var(--font-mono,ui-monospace,monospace); font-size: 12.5px; background: rgba(13,138,147,0.1); color: var(--teal-mid); padding: 1px 7px; border-radius: 5px; }
.ebSite[data-theme="dark"] .csChecks li { color: #aab9d8; }
.appCard { border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 860px) { .csTwo { grid-template-columns: 1fr; gap: 28px; } }

.csPhones { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.csPhoneCol { display: flex; flex-direction: column; }
.csPhoneTag { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--teal-mid); }
.csPhoneCol h4 { font-size: 16px; font-weight: 800; color: var(--royal); margin: 5px 0 12px; letter-spacing: -0.2px; }
.csPhoneShot { border-radius: 16px; overflow: hidden; background: #0a1422; box-shadow: 0 24px 54px rgba(8,30,72,0.22); }
.csPhoneShot img { width: 100%; display: block; }
.ebSite[data-theme="dark"] .csPhoneCol h4 { color: #eaf1ff; }
.csCenterCap { text-align: center; font-size: 13.5px; color: var(--gray-500); margin-top: 26px; }
.ebSite[data-theme="dark"] .csCenterCap { color: #8b9bbd; }
@media (max-width: 820px) { .csPhones { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }

.csNote { font-size: 15.5px; color: var(--gray-600); line-height: 1.6; }
.ebSite[data-theme="dark"] .csNote { color: #aab9d8; }

.csBeforeAfter { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.csBA { padding: 28px; border-radius: var(--r-lg); }
.csBA.before { background: #f3efe7; border: 1px solid #e6dcc8; }
.csBA.after { background: #fff; border: 1px solid rgba(13,138,147,0.2); box-shadow: 0 14px 34px rgba(13,138,147,0.08); }
.ebSite[data-theme="dark"] .csBA.before { background: rgba(120,100,60,0.14); border-color: rgba(180,150,90,0.25); }
.ebSite[data-theme="dark"] .csBA.after { background: rgba(13,138,147,0.1); border-color: rgba(77,214,210,0.25); }
.csBATag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-bottom: 16px; }
.csBATag.old { background: rgba(120,90,40,0.14); color: #8a6207; }
.csBATag.new { background: rgba(13,138,147,0.12); color: var(--teal-mid); }
.csBA ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.csBA li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.csBA.before li { color: #7a6a4a; }
.csBA.after li { color: var(--gray-700); }
.ebSite[data-theme="dark"] .csBA.before li { color: #c9b890; }
.ebSite[data-theme="dark"] .csBA.after li { color: #cdd9f0; }
.csX { color: #b08a40; font-weight: 800; flex-shrink: 0; }
.csCheck2 { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,var(--teal-mid),var(--teal-brand)); margin-top: 1px; }
@media (max-width: 760px) { .csBeforeAfter { grid-template-columns: 1fr; } }

.csQuote { margin-top: 32px; padding: 36px 40px; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--royal), var(--royal-dark)); color: #fff; }
.csQuote p { font-family: Georgia, serif; font-style: italic; font-size: clamp(1.05rem,1.6vw,1.3rem); line-height: 1.6; color: rgba(255,255,255,0.92); }
.csQBy { display: flex; align-items: center; gap: 13px; margin-top: 24px; flex-wrap: wrap; }
.csQBy .csAv { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--royal-deep); background: linear-gradient(135deg,var(--accent-glow),var(--accent)); }
.csQBy b { display: block; font-size: 15px; color: #fff; }
.csQBy > div > span { font-size: 13px; color: rgba(255,255,255,0.6); }

.csBuilder { background: linear-gradient(180deg,#001230,#00112e 55%,#03283f); color: #fff; }
.csBuilderInner { max-width: 720px; }
.csBuilder h2 { font-size: clamp(1.8rem,3.4vw,2.7rem); font-weight: 900; letter-spacing: -1.2px; line-height: 1.08; margin-top: 14px; }
.csBuilder .grad { background: linear-gradient(110deg,var(--accent-glow),var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: Georgia, serif; font-style: italic; font-weight: 600; }
.csBuilderBody { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.csBuilderBody p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.74); }
.csBuilderBody b { color: #fff; }
.csBuilderKick em { font-family: Georgia, serif; font-style: italic; color: rgba(255,255,255,0.9); }
.csSign { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
.csSign .csAv { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg,var(--teal-mid),var(--teal-brand)); }
.csSign b { display: block; font-size: 15px; }
.csSign span { font-size: 13px; color: rgba(255,255,255,0.6); }
.csCta { margin-top: 44px; padding: 28px 34px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 24px 60px rgba(0,8,30,0.45); }
.csCta h3 { font-size: 20px; font-weight: 800; color: var(--royal); }
.csCta h3 em { font-family: Georgia, serif; font-style: italic; font-weight: 500; }
.csCta p { font-size: 13.5px; color: var(--gray-500); margin-top: 6px; max-width: 460px; }
.csCtaBtns { display: flex; gap: 10px; flex-wrap: wrap; }
.ebSite[data-theme="dark"] .csCta h3 { color: var(--royal) !important; }
.ebSite[data-theme="dark"] .csCta h3 em { color: var(--royal) !important; }
.ebSite[data-theme="dark"] .csCta p { color: #475569 !important; }

.csColophon { background: #00112e; color: rgba(255,255,255,0.6); padding: 48px 0; }
.csColophon .eb-wrap { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.csColLeft p { font-size: 13px; line-height: 1.6; margin-top: 12px; }
.csNext { padding: 22px 26px; border-radius: var(--r-lg); max-width: 380px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px); }
.csNextTag { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-glow); }
.csNext b { display: block; font-size: 16px; color: #fff; margin: 9px 0 7px; }
.csNext p { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.78); }

/* League Builder guide — What's new banner */
.lbNew { border-radius: var(--r-lg); padding: 22px 26px; background: linear-gradient(160deg, rgba(13,138,147,0.1), rgba(13,138,147,0.04)); border: 1px solid rgba(13,138,147,0.2); }
.lbNewHead { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-mid); margin-bottom: 14px; }
.lbNewList { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.lbNewList li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--gray-600); line-height: 1.5; }
.lbNewList li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 2px; background: var(--teal-mid); transform: rotate(45deg); }
.lbNewList b { color: var(--royal); font-weight: 800; }
.ebSite[data-theme="dark"] .lbNew { background: linear-gradient(160deg, rgba(77,214,210,0.1), rgba(77,214,210,0.03)); border-color: rgba(77,214,210,0.2); }
.ebSite[data-theme="dark"] .lbNewHead { color: var(--teal-bright); }
.ebSite[data-theme="dark"] .lbNewList li { color: #aab9d8; }
.ebSite[data-theme="dark"] .lbNewList b { color: #eaf1ff; }

/* ── Blog article detail ── */
.artHero { padding: clamp(110px,13vh,150px) 0 clamp(48px,7vh,72px); }
.artHero .eb-wrap { max-width: 1180px; }
.artPill { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--royal-deep);
  background: linear-gradient(135deg, var(--gold-light, #e6c987), var(--ball-yellow, #c7901c)); padding: 7px 16px; border-radius: 999px; }
.artTitle { font-size: clamp(1.9rem,3.4vw,2.9rem); font-weight: 900; letter-spacing: -1.3px; line-height: 1.08; color: #fff; margin: 20px 0 16px; }
.artHero .sub { font-size: clamp(1rem,1.4vw,1.18rem); color: rgba(255,255,255,0.8); max-width: 620px; margin: 0; line-height: 1.6; }
.ebSite[data-theme="light"] .artTitle { color: #1b50bd; }
.ebSite[data-theme="light"] .artHero .sub { color: var(--gray-600); }

.artBody { background: linear-gradient(180deg, #f3f8fd, #ffffff); }
.ebSite[data-theme="dark"] .artBody { background: linear-gradient(180deg, #001a3a, #00112e); }
.artWrap { max-width: 1180px; }
.artLayout { display: grid; grid-template-columns: 250px 1fr; gap: 64px; align-items: start; }
.artMain { max-width: 760px; }
.artAside { position: sticky; top: 92px; }
.artToc { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.artTocH { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 14px; }
.artToc ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.artToc a { font-size: 13.5px; line-height: 1.4; color: var(--gray-600); font-weight: 600; transition: color .15s; display: block; }
.artToc a:hover { color: var(--teal-mid); }
.ebSite[data-theme="dark"] .artToc { border-top-color: rgba(255,255,255,0.12); }
.ebSite[data-theme="dark"] .artToc a { color: #aab9d8; }
@media (max-width: 940px) { .artLayout { grid-template-columns: 1fr; gap: 0; } .artAside { position: static; margin-bottom: 28px; } .artMain { max-width: none; } .artToc { display: none; } }
.artCrumb { font-size: 13px; color: var(--gray-400); }
.artCrumb a { color: var(--teal-mid); font-weight: 600; }
.artLede { font-size: clamp(1.05rem,1.5vw,1.25rem); line-height: 1.7; color: var(--gray-700); margin-bottom: 8px; }
.artH2 { font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight: 800; color: var(--royal); letter-spacing: -0.5px; margin: 40px 0 14px; }
.artP { font-size: 16px; line-height: 1.72; color: var(--gray-600); margin-bottom: 16px; }
.artP a, .artLede a, .artCallout a, .artPricing a { color: var(--teal-mid); font-weight: 600; }
.artDiv { border: none; border-top: 1px solid var(--gray-200); margin: 36px 0; }
.artStore { text-align: center; margin: 32px 0; }
.artStore .storeRow { justify-content: center; }
.appbtn.lg { padding: 12px 22px; }
.artStoreNote { font-size: 13px; color: var(--gray-400); margin-top: 12px; }
/* App Store / Play badges need a visible edge on dark navy cards */
.artCtaCard .appbtn, .artDarkCta .appbtn { border: 1px solid rgba(255,255,255,0.28); }
.artCtaCard .storeRow, .artDarkCta .storeRow { gap: 12px; flex-wrap: wrap; }
.artCallout { padding: 20px 24px; border-radius: var(--r); background: #eef4fb; border-left: 4px solid var(--teal-mid); margin: 24px 0; font-size: 14.5px; line-height: 1.65; color: var(--gray-700); }
.artCallout p { margin-bottom: 10px; }
.artCallout p:last-child { margin-bottom: 0; }
.artCallout b { color: var(--royal); }
.artFeats { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.artFeat { padding: 20px 24px; border-radius: var(--r); background: #fff; border: 1px solid rgba(8,30,72,0.08); border-left: 4px solid var(--teal-mid); box-shadow: 0 10px 28px rgba(8,30,72,0.05); }
.artFeat h4 { font-size: 16.5px; font-weight: 800; color: var(--royal); margin-bottom: 6px; }
.artFeat p { font-size: 14.5px; line-height: 1.6; color: var(--gray-600); }
.artPricing { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.artPricing li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.6; color: var(--gray-700); }
.artPricing li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--teal-mid); transform: rotate(45deg); }
.artPricing b { color: var(--royal); }
.artCtaCard { margin: 44px 0 0; padding: 32px 36px; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--royal), var(--teal-deep)); color: #fff; }
.artCtaCard h3 { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
.artCtaCard p { font-size: 14.5px; color: rgba(255,255,255,0.8); margin: 8px 0 18px; }
.artCtaBtn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 800; font-size: 14.5px; color: var(--royal-deep); background: linear-gradient(135deg, var(--accent-glow), var(--accent)); box-shadow: 0 10px 26px rgba(77,214,210,0.3); }
.artRelated { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.artRelated h3 { font-size: 18px; font-weight: 800; color: var(--royal); margin-bottom: 18px; }
.artRelGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.artRelCard { display: block; padding: 18px 20px; border-radius: var(--r); background: #fff; border: 1px solid rgba(8,30,72,0.08); font-size: 14px; font-weight: 700; color: var(--royal); line-height: 1.4; transition: transform .2s, box-shadow .2s; }
.artRelCard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(8,30,72,0.1); }
.ebSite[data-theme="dark"] .artLede { color: #cdd9f0; }
.ebSite[data-theme="dark"] .artH2, .ebSite[data-theme="dark"] .artFeat h4, .ebSite[data-theme="dark"] .artPricing b, .ebSite[data-theme="dark"] .artCallout b, .ebSite[data-theme="dark"] .artRelated h3, .ebSite[data-theme="dark"] .artRelCard { color: #eaf1ff; }
.ebSite[data-theme="dark"] .artP, .ebSite[data-theme="dark"] .artPricing li { color: #aab9d8; }
.ebSite[data-theme="dark"] .artCallout { background: rgba(77,214,210,0.08); color: #cdd9f0; }
.ebSite[data-theme="dark"] .artFeat, .ebSite[data-theme="dark"] .artRelCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); border-left-color: var(--teal-mid); }
.ebSite[data-theme="dark"] .artDiv, .ebSite[data-theme="dark"] .artRelated { border-color: rgba(255,255,255,0.12); }
@media (max-width: 760px) { .artRelGrid { grid-template-columns: 1fr; } }

/* article extra blocks */
.artOl { margin: 18px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.artOl li { font-size: 15.5px; line-height: 1.65; color: var(--gray-700); }
.artOl b { color: var(--royal); }
.artOl code, .artP code, .artPricing code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; background: rgba(13,138,147,0.1); color: var(--teal-mid); padding: 1px 6px; border-radius: 5px; }
.artSub { font-size: 17px; font-weight: 800; color: var(--teal-mid); margin: 28px 0 8px; letter-spacing: -0.2px; }
.artNum { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.artNumCard { padding: 22px 24px; border-radius: var(--r); background: #fff; border: 1px solid rgba(8,30,72,0.08); box-shadow: 0 10px 28px rgba(8,30,72,0.05); }
.artNumHead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.artNumBadge { flex-shrink: 0; width: 30px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--teal-mid), var(--teal-brand)); }
.artNumCard h4 { font-size: 16.5px; font-weight: 800; color: var(--royal); }
.artNumCard p { font-size: 14.5px; line-height: 1.6; color: var(--gray-600); margin-bottom: 8px; }
.artNumCard p:last-child { margin-bottom: 0; }
.artNumCard b { color: var(--royal); }
.artDarkCta { margin: 32px 0; padding: 30px 34px; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--royal), var(--teal-deep)); color: #fff; }
.artDarkCta h3 { font-size: 20px; font-weight: 900; letter-spacing: -0.4px; }
.artDarkCta p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 8px 0 18px; }
.artFaq { margin-top: 48px; }
.artFaq h3 { font-size: 22px; font-weight: 800; color: var(--royal); margin-bottom: 14px; }
.ebSite[data-theme="dark"] .artOl li { color: #aab9d8; }
.ebSite[data-theme="dark"] .artOl b, .ebSite[data-theme="dark"] .artNumCard h4, .ebSite[data-theme="dark"] .artNumCard b, .ebSite[data-theme="dark"] .artFaq h3 { color: #eaf1ff; }
.ebSite[data-theme="dark"] .artNumCard { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.ebSite[data-theme="dark"] .artNumCard p { color: #aab9d8; }
.ebSite[data-theme="dark"] .artFaq .faqItem { border-color: rgba(255,255,255,0.12); }
.ebSite[data-theme="dark"] .artFaq .faqA p { color: #aab9d8; }
@media (max-width: 760px) { .lbNewList { grid-template-columns: 1fr; } }

/* ============================================================
   FUNCTIONAL PAGES — iOS 26 Liquid Glass
   (Club Page · Team Page · Tournament Dashboard)
   Shared stage + frosted cards + schedule / standings / bracket / tabs.
   ============================================================ */
.fnStage { position: relative; overflow: hidden; padding: clamp(36px,5vw,60px) 0 clamp(60px,8vw,100px);
  background:
    radial-gradient(110% 80% at 86% -4%, rgba(77,214,210,0.20), transparent 50%),
    radial-gradient(90% 75% at -4% 102%, rgba(29,87,200,0.16), transparent 55%),
    linear-gradient(180deg, #eef4fb 0%, #e7eff8 55%, #e3f0f1 100%); }
.ebSite[data-theme="dark"] .fnStage { background:
    radial-gradient(110% 80% at 86% -4%, rgba(77,214,210,0.22), transparent 48%),
    radial-gradient(90% 75% at -4% 104%, rgba(29,87,200,0.24), transparent 55%),
    linear-gradient(180deg, #021428 0%, #001a33 55%, #042a3a 100%); }
.fnStage::before, .fnStage::after { content:''; position:absolute; border-radius:50%; pointer-events:none; filter: blur(34px); }
.fnStage::before { width:560px; height:560px; right:-140px; top:-90px; background: radial-gradient(circle, rgba(77,214,210,0.24), transparent 66%); }
.fnStage::after  { width:480px; height:480px; left:-160px; bottom:-130px; background: radial-gradient(circle, rgba(29,87,200,0.20), transparent 66%); }
.fnStage > .eb-wrap { position: relative; z-index: 2; }

/* Brand hero (club/team) is always dark — force readable on-dark chips regardless of theme */
.fnClubHero .subChip { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.28) !important; color: #fff !important; }
.fnClubHero .subChip svg { color: var(--accent-glow) !important; }
.fnClubHero .clubLoc { color: rgba(255,255,255,0.82); }

/* Liquid-glass card — translucent, blurred, specular top edge */
.lgCard { position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(150deg, var(--glass-bg) 0%, var(--glass-bg-2) 100%);
  backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,0.03), 0 22px 52px rgba(0,12,40,0.26);
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s, background .22s; }
.lgCard::before { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(140deg, rgba(255,255,255,0.18) 0%, transparent 32%); }
.lgCard > * { position: relative; z-index: 1; }
a.lgCard, .lgCard.tap { text-decoration: none; cursor: pointer; }
a.lgCard:hover, .lgCard.tap:hover { transform: translateY(-4px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 32px 72px rgba(0,12,40,0.36); border-color: color-mix(in oklab, var(--accent) 38%, var(--glass-brd)); }
.lgPad { padding: clamp(20px,2.4vw,30px); }

/* Light theme — give frosted cards a crisp, readable edge on the pale stage */
.ebSite[data-theme="light"] .fnStage { background:
    radial-gradient(110% 80% at 86% -4%, rgba(77,214,210,0.22), transparent 50%),
    radial-gradient(90% 75% at -4% 102%, rgba(29,87,200,0.14), transparent 55%),
    linear-gradient(180deg, #e4ecf7 0%, #d7e4f2 55%, #d3e8ea 100%); }
.ebSite[data-theme="light"] .lgCard {
  background: linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.6) 100%);
  border-color: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 1px rgba(8,30,72,0.05), inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 6px rgba(8,30,72,0.05), 0 20px 46px rgba(8,30,72,0.14); }
.ebSite[data-theme="light"] a.lgCard:hover, .ebSite[data-theme="light"] .lgCard.tap:hover {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, rgba(8,30,72,0.05)), inset 0 1px 0 rgba(255,255,255,0.95),
    0 30px 64px rgba(8,30,72,0.2); }

/* Section headers on the stage */
.lgHd { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin: 0 4px 16px; }
.lgHd h2 { font-size: clamp(1.4rem,2.4vw,1.95rem); font-weight:800; color: var(--ink); letter-spacing:-0.6px; }
.lgHd .note { font-size:14px; color: var(--gray-500); }
.lgHd.mt { margin-top: clamp(34px,4.5vw,54px); }

/* Live + status chips */
.fnLive { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.05em;
  color:#fff; background: linear-gradient(135deg,#ff5a5a,#e0383a); padding:4px 10px; border-radius:999px;
  box-shadow: 0 4px 12px rgba(224,56,58,0.4); }
.fnLiveDot { width:6px; height:6px; border-radius:50%; background:#fff; animation: livepulse 1.4s ease-in-out infinite; }
.fnDot { width:11px; height:11px; border-radius:50%; flex:none; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }

/* Teams grid (club page) */
.fnTeamGrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(216px,1fr)); gap:14px; }
.fnTeamCard { display:flex; flex-direction:column; gap:9px; padding:18px; }
.fnTeamTop { display:flex; align-items:center; gap:9px; }
.fnAge { font-size:13px; font-weight:900; letter-spacing:-0.3px; color:#fff; padding:5px 10px; border-radius:9px; box-shadow: 0 4px 12px rgba(0,12,40,0.18); }
.fnStar { color: var(--ball-yellow); margin-left:auto; filter: drop-shadow(0 1px 3px rgba(199,144,28,0.4)); }
.fnStar + .fnLive { margin-left:9px; }
.fnTeamCard .fnLive:first-child, .fnTeamTop > .fnLive { margin-left:auto; }
.fnTeamName { font-size:18px; font-weight:800; color: var(--ink); letter-spacing:-0.4px; }
.fnTeamMeta { display:flex; align-items:center; gap:10px; font-size:13px; color: var(--gray-500); }
.fnRec { color: var(--green); font-weight:800; }
.fnTeamGo { align-self:flex-end; margin-top:2px; color: var(--gray-400); transition: transform .18s, color .18s; }
.fnTeamCard:hover .fnTeamGo { color: var(--accent-deep); transform: translateX(3px); }

/* Game cards (strip + schedule) */
.fnGameStrip { display:grid; grid-template-columns: repeat(auto-fill, minmax(248px,1fr)); gap:14px; }
.fnGameCard { display:flex; flex-direction:column; gap:11px; padding:16px 18px; }
.fnGameHd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fnGameNum { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--gray-500); }
.fnGameTime { font-size:12px; font-weight:700; color: var(--accent-deep); }
.fnGameTeams { display:flex; flex-direction:column; gap:7px; }
.fnGT { display:flex; align-items:center; gap:9px; font-size:15px; color: var(--ink); }
.fnGT b { font-weight:700; }
.fnGT.win b { font-weight:800; }
.fnGS { margin-left:auto; font-size:19px; font-weight:900; color: var(--ink); letter-spacing:-0.5px; }
.fnGT.win .fnGS { color: var(--green); }
.fnGT.lose { opacity:0.62; }
.fnGameFoot { display:flex; align-items:center; gap:6px; font-size:12px; color: var(--gray-400); border-top:1px solid var(--glass-brd); padding-top:9px; }

/* Liquid-glass segmented tab bar */
.fnTabs { display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px; border-radius:999px;
  background: linear-gradient(150deg, var(--glass-bg), var(--glass-bg-2));
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  border:1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 30px rgba(0,12,40,0.18); }
.fnTab { padding:9px 18px; border-radius:999px; font-size:14px; font-weight:700; color: var(--gray-600);
  background:transparent; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition: color .18s, background .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; }
.fnTab:hover { color: var(--ink); }
.fnTab.on { color: var(--royal); background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(255,255,255,0.72));
  box-shadow: 0 6px 16px rgba(0,12,40,0.18), inset 0 1px 0 rgba(255,255,255,0.9); }
.ebSite[data-theme="dark"] .fnTab.on { color:#eaf1ff;
  background: linear-gradient(160deg, rgba(120,205,212,0.30), rgba(60,140,160,0.18)); box-shadow: 0 6px 16px rgba(0,12,40,0.4), inset 0 1px 0 rgba(255,255,255,0.18); }
.fnTab .cnt { font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px; background: rgba(8,30,72,0.10); color: var(--gray-600); }
.fnTab.on .cnt { background: color-mix(in oklab, var(--accent) 28%, transparent); color: var(--accent-deep); }

/* Age-group pills (tournament) */
.fnAgePills { display:flex; flex-wrap:wrap; gap:8px; }
.fnAgePill { padding:8px 15px; border-radius:999px; font-size:13.5px; font-weight:700; cursor:pointer; border:1px solid var(--glass-brd);
  background: linear-gradient(150deg, var(--glass-bg), var(--glass-bg-2)); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--gray-600); display:inline-flex; align-items:center; gap:7px; transition:.18s; -webkit-tap-highlight-color: transparent; }
.fnAgePill:hover { color: var(--ink); transform: translateY(-1px); }
.fnAgePill.on { color:#fff; background: linear-gradient(150deg, var(--royal), var(--royal-mid)); border-color: transparent; box-shadow: 0 10px 24px rgba(0,40,104,0.32); }
.fnAgePill .pLive { width:6px; height:6px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 8px #ff5a5a; animation: livepulse 1.4s ease-in-out infinite; }

/* Schedule / results rows inside an lgCard */
.fnDayHd { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-deep);
  padding: 6px 4px; margin-top: 6px; }
.fnDayHd:first-child { margin-top:0; }
.fnRow { display:grid; grid-template-columns: 78px 1fr auto; gap:18px; align-items:center; padding:15px 6px; border-top:1px solid var(--glass-brd); }
.fnRow:first-of-type { border-top:none; }
.fnRowWhen { display:flex; flex-direction:column; gap:2px; }
.fnRowWhen .t { font-size:14px; font-weight:800; color: var(--ink); letter-spacing:-0.2px; }
.fnRowWhen .n { font-size:11px; font-weight:700; color: var(--gray-400); }
.fnRowMatch { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fnRowTeam { display:flex; align-items:center; gap:9px; font-size:15px; color: var(--ink); }
.fnRowTeam b { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fnRowTeam.win b { font-weight:800; }
.fnRowTeam.lose { opacity:0.6; }
.fnRowVenue { font-size:12px; color: var(--gray-400); display:flex; align-items:center; gap:6px; margin-top:2px; }
.fnRowEnd { display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.fnRowScore { display:flex; align-items:center; gap:8px; font-size:20px; font-weight:900; color: var(--ink); letter-spacing:-0.5px; line-height:1; }
.fnRowScore .vs { font-size:13px; font-weight:700; color: var(--gray-400); }
.fnRowScore .w { color: var(--green); }
.fnRowScore .l { color: var(--gray-400); }
.fnRowTag { font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--accent-deep);
  background: color-mix(in oklab, var(--accent) 16%, transparent); padding:3px 9px; border-radius:999px; }
.fnRowTag.up { color: var(--royal); background: rgba(29,87,200,0.12); }
.ebSite[data-theme="dark"] .fnRowTag.up { color:#9ec3ff; }
.fnPeriods { display:flex; gap:5px; margin-top:3px; }
.fnPeriods span { font-size:10px; font-weight:700; color: var(--gray-400); background: rgba(8,30,72,0.06); padding:2px 6px; border-radius:6px; }
.ebSite[data-theme="dark"] .fnPeriods span { background: rgba(255,255,255,0.07); }

/* Live banner (next-game / in-progress highlight) */
.fnBanner { padding: clamp(22px,2.6vw,32px); display:grid; grid-template-columns: 1fr auto; gap:22px; align-items:center; }
.fnBannerL { display:flex; flex-direction:column; gap:12px; min-width:0; }
.fnBannerTop { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fnBannerNum { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--gray-500); }
.fnBannerTeams { display:flex; align-items:center; gap:18px; }
.fnBannerTeam { display:flex; align-items:center; gap:10px; }
.fnBannerTeam .nm { font-size: clamp(1.05rem,1.7vw,1.4rem); font-weight:800; color: var(--ink); letter-spacing:-0.5px; }
.fnBannerScore { font-size: clamp(2.2rem,4vw,3rem); font-weight:900; color: var(--ink); letter-spacing:-2px; line-height:1; }
.fnBannerDash { font-size:1.6rem; color: var(--gray-400); font-weight:700; }
.fnBannerMeta { font-size:13px; color: var(--gray-500); display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; }
.fnBannerR { display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
@media (max-width:680px){ .fnBanner { grid-template-columns:1fr; } .fnBannerR { align-items:flex-start; } }

/* Roster table */
.fnRoster { width:100%; border-collapse:collapse; }
.fnRoster th { font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--gray-500); text-align:center; padding:8px 6px; border-bottom:1px solid var(--glass-brd); }
.fnRoster th.l, .fnRoster td.l { text-align:left; }
.fnRoster td { font-size:14px; color: var(--ink); text-align:center; padding:11px 6px; border-top:1px solid var(--glass-brd); }
.fnRoster tr:first-child td { border-top:none; }
.fnRoster .cap { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; font-size:12px; font-weight:800; color:#fff; background: linear-gradient(135deg, var(--royal), var(--royal-mid)); }
.fnRoster .nm { font-weight:700; }
.fnRoster .pos { font-size:12px; color: var(--gray-500); }
.fnRoster tr.mine td { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.fnRoster .gk .cap { background: linear-gradient(135deg, var(--teal-deep), var(--teal-mid)); }

/* Standings table */
.fnStand { width:100%; border-collapse:collapse; }
.fnStand th { font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--gray-500); padding:9px 8px; text-align:center; border-bottom:1px solid var(--glass-brd); }
.fnStand th.l, .fnStand td.l { text-align:left; }
.fnStand td { font-size:14px; color: var(--ink); text-align:center; padding:12px 8px; border-top:1px solid var(--glass-brd); }
.fnStand tr:first-child td { border-top:none; }
.fnStand .seed { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:7px; font-size:12px; font-weight:800; color: var(--gray-600); background: rgba(8,30,72,0.07); }
.ebSite[data-theme="dark"] .fnStand .seed { background: rgba(255,255,255,0.08); color:#cdd9f0; }
.fnStand .teamc { display:flex; align-items:center; gap:9px; font-weight:700; }
.fnStand tr.top .seed { color:#fff; background: linear-gradient(135deg, var(--ball-yellow), #e0b43a); }
.fnStand tr.mine td { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.fnStand .pts { font-weight:900; color: var(--accent-deep); }

/* Bracket */
.fnBracket { display:flex; gap:30px; overflow-x:auto; padding:6px 2px 12px; }
.fnRound { display:flex; flex-direction:column; justify-content:space-around; gap:18px; min-width:210px; }
.fnRoundHd { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--accent-deep); margin-bottom:2px; text-align:center; }
.fnMatch { padding:12px 14px; border-radius:14px; background: var(--glass-bg); border:1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 var(--glass-hi); display:flex; flex-direction:column; gap:8px; }
.fnMatch .side { display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--ink); }
.fnMatch .side b { font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fnMatch .side .s { font-weight:900; color: var(--ink); }
.fnMatch .side.win b { font-weight:800; } .fnMatch .side.win .s { color: var(--green); }
.fnMatch .side.lose { opacity:0.55; }
.fnMatch .mNum { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--gray-400); }
.fnMatch.proj { border-style:dashed; }

/* Glass CTA */
.fnCta { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top: clamp(36px,4.5vw,56px); padding: clamp(26px,3vw,40px); border-radius: 26px; position:relative; overflow:hidden;
  background: linear-gradient(150deg, var(--royal), var(--royal-dark)); color:#fff;
  box-shadow: 0 30px 70px rgba(0,28,80,0.4); }
.fnCta::before { content:''; position:absolute; width:380px; height:380px; right:-90px; top:-150px; border-radius:50%;
  background: radial-gradient(circle, rgba(77,214,210,0.34), transparent 64%); filter: blur(20px); }
.fnCta > * { position:relative; z-index:1; }
.fnCta h3 { font-size: clamp(1.3rem,2vw,1.75rem); font-weight:800; letter-spacing:-0.6px; }
.fnCta p { color: rgba(255,255,255,0.8); margin-top:7px; max-width:460px; line-height:1.55; }
.fnCtaActions { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
@media (max-width:760px){ .fnCta { flex-direction:column; align-items:flex-start; } }