/* ─────────────────────────────────────────────────────────────
   ParlayBuilder Landing — CLEAN stylesheet
   ───────────────────────────────────────────────────────────── */

:root{
  /* shifted toward #081924 base */
  --pb-bg: #081924;

  /* text + subtle variants (slightly stronger on darker base) */
  --pb-text: #EAF7F4;
  --pb-muted: rgba(234,247,244,.82);

  /* surfaces & dividers (a touch more opacity for contrast on #081924) */
  --pb-line: rgba(255,255,255,.12);
  --pb-panel: rgba(255,255,255,.07);
  --pb-panel-strong: rgba(255,255,255,.10);

  /* brand accents (kept consistent) */
  --pb-accent: #7CE3D8;
  --pb-teal: #00D3BD;
  --pb-teal-300: #49C6FF;

  /* status & depth */
  --pb-red: #FF6B6B;
  --pb-shadow: 0 10px 40px -10px rgba(0,0,0,.65);
}

/* The landing overlay — opaque + self-contained (like the demo body) so the app
   theme behind it can't bleed through the translucent fades/cards (that bleed was
   the source of the edge "band" + brown cast). Fades below MUST match this color. */
#cover-page{ position: fixed; inset:0; overflow-y:auto; background:#060d12; z-index:9;}
/* absolute (page-relative, scrolls with content) with blobs anchored in px to the very
   TOP (behind the hero) and very BOTTOM (behind the CTA/footer) — so the carousel and
   research in the middle of the page stay clean, with no glow beside them. */
#cover-page .cover-aurora{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
#cover-page .aurora{ position:absolute; border-radius:9999px; filter:blur(80px); animation:pb-float 16s ease-in-out infinite; opacity:.16; }
#cover-page .aurora.a1{ width:420px; height:420px; top:-140px; left:-80px; background:#00d3bd; }
#cover-page .aurora.a2{ width:440px; height:440px; top:-120px; right:-120px; background:#35d1ff; animation-duration:20s; }
#cover-page .aurora.a3{ width:360px; height:360px; bottom:-120px; left:38%; background:#00d3bd; opacity:.10; animation-duration:22s; }

#cover-page .cover-grid{
  position:absolute; inset:0;
  background-image: radial-gradient(#0D202B 1px, transparent 1px);
  background-size:20px 20px;
  opacity:.10;
}

#cover-page .cover-vignette{
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 50% -10%,
    rgba(8,25,36,0) 40%,
    rgba(8,25,36,0) 85%);
}

/* Layout */
.landing-hero{ position:relative; z-index:1; padding: 72px 8px 32px; }
.landing-inner{ max-width:1540px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:24px; }

/* Hero text */
.hero-copy{ color:var(--pb-text); text-align:center; }
.hero-title{ font-size: clamp(30px, 8.6vw, 48px); font-weight:800; line-height:1.1; margin:0 0 10px; }
.brand-accent{ color:var(--pb-accent); }
.hero-desc{ color:var(--pb-muted); font-size: clamp(17px, 4.8vw, 19px); line-height: 1.55; max-width: 48ch; margin: 0 auto 16px; }

/* CTAs */
.hero-ctas{ display:flex; flex-direction:column; align-items:center; gap:22px; margin:12px 0 8px; }
.btn-cta{
  appearance:none; cursor:pointer; padding: 14px 18px; border-radius:16px; font-weight:600;
  font-size: clamp(16px, 4.9vw, 18px); min-height: 48px;
  border:1px solid rgba(34,221,182,.45); color:#071317;
  background-image:linear-gradient(180deg, rgba(124,227,216,.98), rgba(34,221,182,.98));
  box-shadow:0 6px 24px rgba(34,221,182,.25), inset 0 1px 0 rgba(255,255,255,.18);
  text-decoration: none;
}
.btn-cta-small{
  padding:10px 16px;
  border-radius:14px;
  font-size: clamp(15px, 4.6vw, 17px);
  min-height: 42px;
  box-shadow:0 6px 24px rgba(34,221,182,.05), inset 0 1px 0 rgba(255,255,255,.08);
  background-image: linear-gradient(180deg, rgba(82,218,203,.7), rgba(27,177,146,.7));
}
.btn-cta:hover{ filter:brightness(1.03); }
.btn-cta:active{ filter:brightness(.98); transform:translateY(1px); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius:16px;
  font-size: clamp(15px, 4.6vw, 17px);
  border:1px solid var(--pb-line);
  color:var(--pb-text); text-decoration:none; font-weight:600;
  background:rgba(255,255,255,.05);
}
.btn-ghost.small{ padding:8px 12px; border-radius:12px; font-size: clamp(14px, 4.2vw, 16px); }

/* Social proof */
.hero-social-proof{ display:flex; align-items:center; gap:12px; margin-top:6px; color:var(--pb-muted); font-size: clamp(14px, 4.0vw, 15.5px); }

/* Animation */
@keyframes pb-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* Wide spacing bump */
@media (min-width:1000px){
  .landing-hero{ padding-top:100px; }
  .hero-copy{ padding-top:40px; }
  .hero-title{ font-size:clamp(40px, 5vw, 56px); }
}

/* App stays hidden until "Start Building" */
#main-app-wrapper{ display:none; }

/* Features */
.landing-features{
  position:relative;
  z-index:1;
  padding: 60px 0 40px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 211, 189, 0.02) 50%, transparent 100%);
}
@media (min-width:1000px){ .landing-features{ padding: 80px 0 60px; } }
/* fluid: grows with the screen (min side gutters via vw) instead of hard-capping at 1180 */
.landing-container{ width:100%; max-width:min(1600px, 94vw); margin:0 auto; padding: 0 20px; }

.feature-card{
  position:relative;
  border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border:1px solid var(--pb-line);
  padding: 28px 24px;
  backdrop-filter:blur(8px) saturate(130%);
  -webkit-backdrop-filter:blur(8px) saturate(130%);
  box-shadow:0 10px 40px -10px rgba(0,0,0,.5);
  overflow:hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.6);
}
.feature-card-icon{
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 211, 189, 0.15) 0%, rgba(0, 211, 189, 0.05) 100%);
  border: 1px solid rgba(0, 211, 189, 0.2);
  color:var(--pb-accent);
  margin-bottom:16px;
}
.feature-card-icon .icon{ width:26px; height:26px; }
.feature-card-icon i{ font-size:22px; }
.feature-card-title{ font-size: clamp(18px, 5vw, 20px); font-weight:700; color:var(--pb-text); margin:0 0 10px; }
.feature-card-body{ font-size: clamp(15px, 4.4vw, 16px); color:var(--pb-muted); line-height:1.65; margin: 0; }
.feature-card-hover{ position:absolute; inset:0; border-radius:20px; pointer-events:none; border:1px solid transparent; transition:border-color .2s ease; }
.feature-card:hover .feature-card-hover{ border-color:rgba(0, 211, 189,.4); }

/* Research Showcase */
.landing-research{
  position:relative;
  z-index:1;
  padding: 60px 0 60px;
  background: transparent;
}
@media (min-width:1000px){ .landing-research{ padding: 80px 0 80px; } }

.research-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
@media (min-width:1000px){
  .research-layout{
    grid-template-columns:.92fr 1.08fr;
    gap:48px;
  }
}

.research-copy h2{
  font-size: clamp(28px, 7vw, 36px);
  color:var(--pb-text);
  font-weight:800;
  margin:0 0 16px;
  line-height:1.2;
}

.research-desc{
  color:var(--pb-muted);
  font-size: clamp(16px, 4.4vw, 18px);
  line-height:1.6;
  margin:0 0 24px;
}

.research-highlights{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.research-highlights li{
  position:relative;
  padding-left:28px;
  color:var(--pb-muted);
  font-size: clamp(15px, 4.4vw, 16px);
  line-height:1.6;
}
.research-highlights li::before{
  content:'\f00c';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  position:absolute;
  left:0;
  top:2px;
  color:var(--pb-accent);
  font-size:14px;
}

/* FAQ */
.landing-faq{
  position:relative;
  z-index:1;
  padding: 60px 0 60px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 211, 189, 0.015) 50%, transparent 100%);
}
@media (min-width:1000px){ .landing-faq{ padding: 80px 0 80px; } }

.landing-faq h2{
  text-align:center;
  margin:0 0 40px;
  font-size: clamp(28px, 7vw, 36px);
  color:var(--pb-text);
  font-weight:800;
}

.faq-list{
  max-width: 720px;
  margin: 0 auto;
}

.landing-faq details{
  border: 1px solid var(--pb-line);
  border-radius: 16px;
  padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  margin: 12px 0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.landing-faq details:hover{
  border-color: rgba(0, 211, 189, 0.3);
}
.landing-faq details[open]{
  border-color: rgba(0, 211, 189, 0.4);
  box-shadow: 0 0 20px rgba(0, 211, 189, 0.1);
}

.landing-faq summary{
  cursor: pointer;
  color: var(--pb-text);
  font-weight: 600;
  font-size: clamp(16px, 4.6vw, 18px);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  transition: color 0.2s ease;
}
.landing-faq summary::-webkit-details-marker{ display: none; }
.landing-faq summary::after{
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: var(--pb-accent);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.landing-faq details[open] summary::after{
  transform: rotate(45deg);
}
.landing-faq details[open] summary{
  color: var(--pb-accent);
}

.landing-faq p{
  color: var(--pb-muted);
  margin: 0;
  padding: 0 20px 18px;
  font-size: clamp(15px, 4.4vw, 16px);
  line-height: 1.65;
}

/* Gold "What is Dueling?" card */
.landing-faq details:last-child{
  border-color: rgba(255, 199, 0, 0.35);
  background: linear-gradient(180deg, rgba(255, 199, 0, 0.10) 0%, rgba(255, 199, 0, 0.04) 100%);
}
.landing-faq details:last-child:hover{
  border-color: rgba(255, 199, 0, 0.55);
}
.landing-faq details:last-child[open]{
  border-color: rgba(255, 199, 0, 0.6);
  box-shadow: 0 0 24px rgba(255, 199, 0, 0.18);
}
.landing-faq details:last-child summary{
  color: #FFD54F;
}
.landing-faq details:last-child summary::after{
  color: #FFD54F;
}
.landing-faq details:last-child[open] summary{
  color: #FFC700;
}

/* Final CTA Section */
.landing-cta{
  position: relative;
  z-index: 1;
  padding: 80px 0;
  text-align: center;
}
@media (min-width:1000px){ .landing-cta{ padding: 100px 0; } }

.cta-content{
  max-width: 600px;
  margin: 0 auto;
}

.cta-title{
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  color: var(--pb-text);
  margin: 0 0 16px;
  line-height: 1.2;
}

.cta-title .accent{
  color: var(--pb-accent);
}

.cta-desc{
  font-size: clamp(16px, 4.4vw, 18px);
  color: var(--pb-muted);
  margin: 0 0 32px;
  line-height: 1.6;
}

.cta-buttons{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media (min-width:500px){
  .cta-buttons{
    flex-direction: row;
    justify-content: center;
  }
}

.cta-buttons .btn-cta{
  padding: 16px 32px;
  font-size: clamp(17px, 4.8vw, 19px);
}

.cta-note{
  margin-top: 20px;
  font-size: clamp(13px, 3.6vw, 14px);
  color: rgba(234, 247, 244, 0.5);
}

/* Footer */
.landing-footer{ position:relative; z-index:1; border-top:1px solid var(--pb-line); margin-top:0; padding:40px 16px calc(40px + var(--pb-bottom-nav-height, 0px)); color:rgba(203,234,228,.8); font-size:clamp(13px,3.6vw,14px); }
.footer-top{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:10px; color:var(--pb-text); }
.footer-logo-circle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#000; overflow:hidden; flex-shrink:0; }
.footer-logo{ width:64px; height:64px; object-fit:contain; margin-top:-4px; margin-left:3px; }
.footer-name{ font-weight:700; font-size:20px; }
.footer-socials{ display:flex; gap:22px; align-items:center; }
.footer-socials a{ display:flex; align-items:center; justify-content:center; color:rgba(234,247,244,.45); transition:color .2s ease, transform .2s ease; }
.footer-socials a:hover{ color:#49C6FF; transform:scale(1.15); }
.footer-socials svg{ width:28px; height:28px; }
.footer-bottom{ margin-top:16px; text-align:center; font-size:16px; color:rgba(234,247,244,.5); }
@media (max-width:1000px){
  .footer-logo-circle{ width:52px; height:52px; }
  .footer-logo{ width:72px; height:72px; margin-top:-5px; margin-left:4px; }
  .footer-name{ font-size:28px; }
  .footer-socials svg{ width:40px; height:40px; }
  .footer-socials{ gap:32px; }
  .footer-bottom{ font-size:20px; }
}

/* Landing header (nav) — now global (outside #cover-page) */
.landing-nav{
  position: sticky;
  top: 0;
  /* Key: create higher, isolated stacking context above #cover-page (999) */
  z-index: 2000000000 !important;
  isolation: isolate;
  transform: translateZ(0); 
  background: transparent;
  border-bottom: 0;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border-bottom:1px solid var(--pb-line);
  overflow: hide; /* ensure absolutely-positioned children are not clipped */
}

.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width: none;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: 14px;
  padding-left: calc(24px + env(safe-area-inset-left, 0px));
  padding-right: calc(28px + env(safe-area-inset-right, 0px));
}
@media (min-width:1001px){
  .nav-inner{ padding-top:8px; padding-bottom:5px; padding-left:0px; }
}
.nav-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.nav-logo{ width:56px; height:56px; flex:0 0 auto; }
.nav-logo-full{ height:50px; width:auto; flex:0 0 auto; }
@media (min-width:1001px){ .nav-logo-full{ height:38px; margin-left:16px; } }
.nav-name{ color: #00D3BD; font-weight:600; font-size: clamp(18px, 6.6vw, 22px); letter-spacing:.2px; }

.nav-links{ display:none; gap:28px; align-items:center; justify-content:center; color:rgba(203,234,228,.9); }
@media (min-width:1000px){ .nav-links{ display:flex; } }
.nav-link{ text-decoration:none; font-size: clamp(15px, 4.8vw, 18px); color:rgba(175,235,226,.9); transition:color .15s ease; }
/* disabling nav links for now */
.nav-link{display: none;}
.nav-link:hover{ color:var(--pb-text); }

.nav-right{ display:flex; align-items:center; gap:12px; }
.nav-login{
  padding: 8px 14px; border-radius:14px; font-weight:600;
  font-size: clamp(15.5px, 4.8vw, 18px); min-height:44px;
  color:rgba(175,235,226,.9);
  background:transparent; border:1px solid var(--pb-line);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-login:hover{ background:rgba(255,255,255,.05); color:var(--pb-text); border-color:rgba(255,255,255,.14); }

/* Sport selector (UNSCOPED) */

/* ── Sport logo size — SINGLE SOURCE OF TRUTH ─────────────────────────────────
   One knob for EVERY league logo/icon (NBA, MLB, World Cup, NFL) across the
   header toggle button, the dropdown, and the cover's hero toggle. To resize
   them all, edit just two values: --sport-logo-size below (default / desktop)
   and its mobile override in the @media (max-width:1000px) block further down. */
:root{ --sport-logo-size: 28px; }
.landing-nav #sport-toggle .sport-logo,
.landing-nav #sport-dropdown .sport-item .sport-logo,
.hero-sport-toggle .sport-toggle-btn .sport-logo{
  width: var(--sport-logo-size); height: var(--sport-logo-size);
  object-fit: contain; flex: 0 0 auto;
}

.landing-nav .sport-selector{ position:relative; display:flex; align-items:center; z-index: auto; margin-left:8px; }
.landing-nav #sport-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:16px;
  padding:8px 12px; border-radius:14px; font-weight:600;
  font-size: clamp(15.5px, 4.8vw, 18px); min-height:44px; min-width:110px;
  color:rgba(175,235,226,.9);
  background:transparent; border:1px solid var(--pb-line);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease; cursor:pointer;
}
.landing-nav #sport-toggle:hover{ background:rgba(255,255,255,.05); color:var(--pb-text); border-color:rgba(255,255,255,.14); }
.landing-nav #sport-toggle:active{ transform:translateY(1px);  }
.landing-nav #sport-toggle i{ font-size:.95em; opacity:.9; transition:transform .15s ease, opacity .15s ease; }
.landing-nav #sport-toggle[aria-expanded="true"] i{ transform:rotate(180deg); opacity:1; }
/* League logo inside the toggle button (the closed "preview" state).
   Logo size is centralized in --sport-logo-size (top of this section). */
.landing-nav #sport-toggle .sport-toggle-label{ display:inline-flex; align-items:center; gap:8px; }

.landing-nav #sport-dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:180px; padding:6px; margin:0; list-style:none;
  border-radius:14px; background:var(--pb-panel); border:1px solid var(--pb-line);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.45);
  backdrop-filter:blur(8px) saturate(130%); -webkit-backdrop-filter:blur(8px) saturate(130%);
  display:none;
  z-index: 13000;
  transform: translateZ(0);      /* prevent weird clipping on Safari */
  background: #021225;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.landing-nav #sport-dropdown .sport-item{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px;
  color:var(--pb-text); font-size: clamp(15px, 4.8vw, 18px); cursor:pointer; white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
/* League logo left of each dropdown item (size via --sport-logo-size). */
.landing-nav #sport-dropdown .sport-item .sport-logo{ opacity:.85; }
.landing-nav #sport-dropdown .sport-item.active .sport-logo{ opacity:1; }
/* Badge sits right after the label using the flex gap (drop its extra margin). */
.landing-nav #sport-dropdown .sport-item .offseason-badge{ margin-left:0; }
.landing-nav #sport-dropdown .sport-item:hover{ background:rgba(255,255,255,.08); }
.landing-nav #sport-dropdown .sport-item.active{ background:rgba(0,211,189,.18); outline:1px solid rgba(0,211,189,.35); color:#d8fffa; }

/* Hide header sport selector on cover page, show hero sport selector instead */
body.cover-active .landing-nav .sport-selector{ display:none; }

/* Hero sport toggle (below Start Building button on cover page) */
.hero-sport-toggle{ display:none; } /* Hidden by default (for non-cover pages) */
body.cover-active .hero-sport-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--pb-line);
  border-radius:16px;
  padding:4px;
  gap:4px;
  min-height:48px;
  box-sizing:border-box;
}
.hero-sport-toggle .sport-toggle-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:12px; font-weight:600;
  font-size: clamp(16px, 4.9vw, 18px);
  color:rgba(175,235,226,.6);
  background:transparent; border:none;
  transition:background .15s ease, color .15s ease, transform .05s ease, opacity .15s ease;
  cursor:pointer;
}
.hero-sport-toggle .sport-toggle-btn .sport-logo{
  /* size via --sport-logo-size */
  opacity:.8;
  transition:opacity .15s ease;
}
.hero-sport-toggle .sport-toggle-btn:hover:not(.active){
  background:rgba(255,255,255,.06); color:rgba(175,235,226,.85);
}
.hero-sport-toggle .sport-toggle-btn:hover:not(.active) .sport-logo{ opacity:.85; }
.hero-sport-toggle .sport-toggle-btn:active{ transform:translateY(1px); }
.hero-sport-toggle .sport-toggle-btn.active{
  background:rgba(0,211,189,.2);
  color:#d8fffa;
  box-shadow:0 0 0 1px rgba(0,211,189,.4);
}
.hero-sport-toggle .sport-toggle-btn.active .sport-logo{ opacity:1; }

/* Disabled / offseason sport items */
.hero-sport-toggle .sport-toggle-btn.sport-disabled{
  opacity:.35; cursor:default; pointer-events:auto;
}
.hero-sport-toggle .sport-toggle-btn.sport-disabled:hover{
  background:transparent; color:rgba(175,235,226,.6); transform:none;
}
.hero-sport-toggle .sport-toggle-btn.sport-disabled .sport-logo{ opacity:.35; }

.landing-nav #sport-dropdown .sport-item.sport-disabled{
  opacity:.4; cursor:default;
}
.landing-nav #sport-dropdown .sport-item.sport-disabled:hover{ background:transparent; }
.offseason-badge{
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  background:rgba(255,255,255,.08); color:rgba(175,235,226,.5);
  padding:2px 6px; border-radius:4px; margin-left:6px; vertical-align:middle;
}

/* Offseason toast */
.offseason-toast{
  position:absolute; transform:translateX(-50%) translateY(4px);
  background:rgba(20,20,30,.92); color:#d8fffa; border:1px solid rgba(0,211,189,.3);
  padding:10px 20px; border-radius:10px; font-size:14px; font-weight:500;
  white-space:nowrap;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; z-index:9999;
  transition:opacity .25s ease, transform .25s ease;
}
.offseason-toast.show{
  opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;
}

/* ===== Sub-1000px layout-specific tweaks ===== */
@media (max-width:1000px){

  /* revert the fluid width to the original fixed cap for ≤1000px (legacy mobile layout) */
  .landing-container{ max-width:1180px; padding-left:24px; padding-right:24px; }
  .landing-hero{ padding-left:24px; padding-right:24px; padding-top: calc(96px + env(safe-area-inset-top, 0px)); }

  .nav-logo{ width:46px; height:46px; }
  .nav-name{ font-size:24px; }
  .nav-login{ font-size:20px; min-height:62px; padding:14px 20px; border-radius:18px; }
  .landing-nav #sport-toggle{ font-size:20px; min-height:62px; min-width:130px; padding:14px 20px; border-radius:18px; }
  .landing-nav #sport-dropdown .sport-item{ padding:24px 26px; font-size:27px; gap:18px; border-radius:16px; }
  .landing-nav #sport-dropdown .sport-item + .sport-item{ margin-top:8px; }
  /* Sport logos — MOBILE size (the one mobile knob; pairs with the --sport-logo-size default). */
  :root{ --sport-logo-size: 36px; }
  .offseason-badge{ font-size:16px; padding:6px 12px; border-radius:7px; }
  .offseason-toast{
    font-size:24px;
   }
  .offseason-toast.show{
    transform:translateX(-50%) translateY(16%);
  }

  .landing-nav #sport-dropdown{
    min-width: 324px;
    padding: 12px;
    border-radius: 22px;
    box-shadow: 0 26px 60px -16px rgba(0,0,0,.58);
    margin-top: 10px !important;
    right: -20px;
  }

  .hero-title{
    margin-left:auto;
    margin-right:auto;
    margin-top: 100px;
    margin-bottom: 0;
    font-size: clamp(38px, 9.8vw, 60px); }

  .hero-ctas{ flex-direction:column; align-items:center; justify-content:center; gap:46px; margin-top:46px; margin-bottom:16px; }
  .hero-ctas .btn-cta{
    padding: 26px 38px;
    min-height: 64px;
    border-radius: 18px;
    font-size: 32px;
  }
  .hero-sport-toggle{
    min-height:82px !important;
    border-radius:18px;
    padding:6px;
  }
  .hero-sport-toggle .sport-toggle-btn{
    padding:16px 24px;
    border-radius:14px;
    font-size:32px;
  }
  .hero-sport-toggle .sport-toggle-btn .sport-logo{
    width:48px; height:48px;
  }
  .btn-ghost{ font-size:18px; }
  .btn-ghost.small{ font-size:16.5px; }

  /* Features section mobile */
  .feature-card{ padding: 28px 28px; }
  .feature-card-icon{ width: 56px; height: 56px; }
  .feature-card-icon i{ font-size: 26px; }
  .feature-card-title{ font-size: clamp(24px, 6.2vw, 28px); }
  .feature-card-body{ font-size: clamp(21px, 5.6vw, 25px); }

  /* Research showcase mobile */
  .research-copy h2{ font-size: clamp(32px, 8.5vw, 40px); }
  .research-desc{ font-size: clamp(21px, 5.6vw, 25px); }
  .research-highlights li{ font-size: clamp(21px, 5.6vw, 25px); }
  .research-highlights li::before{ top:6px; font-size:16px; }

  /* FAQ section mobile */
  .landing-faq h2{ font-size: clamp(32px, 8.5vw, 40px); }
  .landing-faq details{ margin: 16px 0; border-radius: 18px; }
  .landing-faq summary{ font-size: clamp(24px, 6.2vw, 28px); padding: 28px 28px; }
  .landing-faq summary::after{ font-size: 28px; }
  .landing-faq p{ font-size: clamp(21px, 5.6vw, 25px); padding: 0 28px 24px; }

  /* CTA section mobile */
  .landing-cta{ padding: 60px 0; }
  .cta-buttons .btn-cta{
    padding: 30px 22px;
    font-size: clamp(24px, 6vw, 28px);
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  .landing-footer{ font-size: clamp(14px, 4.2vw, 15.5px); }
  .footer-disclaimer{ font-size: clamp(16.5px, 5.2vw, 19.5px); line-height:1.65; }
  .footer-bottom{ font-size: clamp(15px, 4.8vw, 17.5px); }

  .landing-footer .landing-container{ max-width:none; padding-left:0; padding-right:0; }
  .footer-top, .footer-bottom{
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}

/* small extra tuning */
@media (max-width: 1000px){
  .hero-desc{ margin-bottom: 14px; }
  .hero-ctas{ margin-bottom: 12px; }
}

/* Logo tweaks */
.nav-logo{
  width:100px;
  height:60px;
  margin-top: -10px;
}
.nav-name{
  font-size:30px;
  font-weight:500;
  margin-left:-53px;
  margin-top:-8px;
  margin-bottom:-26px;
}
@media (max-width:1000px){
  .nav-logo{ width:102px; height:76px; margin-left:-20px; margin-top:-17px; }
  .nav-name{ 
    font-size:34px; 
    font-weight:500; 
    margin-left:-52px; 
    margin-top:-6px; 
    margin-bottom:-26px; }
}

/* Retire old top nav if still present */
.navbar { display: none !important;}


.landing-nav{
  margin-bottom: 0px;
}

/* When the cover is active, let #cover-page flow normally so the global footer is reachable */
body.cover-active #cover-page {
  position: relative;
  inset: auto;
  min-height: 100vh;
  overflow: visible;
}

/* When the cover is active, make the landing header a fixed top bar */
body.cover-active .landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  /* keep your existing stuff */
  z-index: 30000;
  isolation: isolate;
  transform: translateZ(0);
}


/* ── Chips header widget (chips migration, plan §4.1) ─────────────────── */
.pb-chips-widget {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  /* Match the sport selector pill (#sport-toggle: min-height 44px, r14).
     border-box is REQUIRED for the height match: #sport-toggle is a
     <button> (UA border-box), this is a <div> (content-box default) —
     without it the same min-height renders 18px taller. */
  box-sizing: border-box;
  min-height: 44px;
  border-radius: 14px;
  /* Transparent like #sport-toggle (founder 2026-07-22 — no pill fill);
     same hover fill as the selector for the click affordance. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  color: #e6edf3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Branded chip coin (static/css/used-imgs/pb-chip.png, transparent circle) —
   was the 🪙 emoji. Block display kills the inline baseline gap.
   28px would push the 44px pill taller (28+16 pad+2 border=46) — the
   negative block margin shrinks its LAYOUT box back to 20px so the
   coin overdraws into the padding instead of growing the pill. */
.pb-chips-widget .pb-chips-ico {
  width: 28px; height: 28px; margin-block: -4px;
  display: block; border-radius: 50%;
  object-fit: contain; flex-shrink: 0;
}
.pb-chips-widget .pb-chips-val { color: var(--theme-accent, #00d3bd); }
.pb-chips-widget .pb-chips-delta {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  animation: pb-chips-pulse 1.2s ease 2;
  transition: opacity 0.6s;
}
.pb-chips-widget .pb-chips-delta.up {
  color: #00d3bd;
  background: rgba(0, 211, 189, 0.12);
}
.pb-chips-widget .pb-chips-delta.down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}
/* Fade fully out (0.6s transition on the base class); the widget JS removes
   the span after the transition so the pill shrinks back to icon+balance. */
.pb-chips-widget .pb-chips-delta.fade { opacity: 0; animation: none; }
@keyframes pb-chips-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* ── Chips daily-claim popover (Phase 4) ──────────────────────────────── */
.pb-chips-widget { cursor: pointer; position: relative; }
.pb-chips-widget:hover { background: rgba(255, 255, 255, .05); }
/* Inline branded coin — drop-in replacement for the 🪙 emoji anywhere in
   the app (sizes to the surrounding text). */
.pb-coin {
  width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.18em;
  border-radius: 50%; object-fit: contain;
}
/* Chips pill tracks the sport selector per breakpoint (#sport-toggle:
   desktop 44/r14, ≤1000px 62/r18). MUST come after the base rules —
   equal specificity, cascade decides. */
@media (max-width:1000px){
  .pb-chips-widget{ min-height:64px; border-radius:18px; padding:14px 20px; font-size:24px; gap:12px; }
  .pb-chips-widget .pb-chips-ico{ width:36px; height:36px; margin-block:0; }
}
.pb-chips-widget .pb-chips-claim-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f5b942;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
  animation: pb-claim-glow 1.6s ease infinite;
}
@keyframes pb-claim-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
.pb-chips-popover {
  position: fixed;
  z-index: 2000000001; /* above the cover nav */
  width: 270px;
  background: #0d1420;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 16px;
  font-family: Inter, system-ui, sans-serif;
  color: #e6edf3;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.pb-chips-pop-balance {
  font-size: 22px;
  font-weight: 800;
  color: var(--theme-accent, #00d3bd);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.pb-chips-pop-busted {
  font-size: 12.5px;
  line-height: 1.5;
  color: #f5b942;
  background: rgba(245, 185, 66, 0.08);
  border: 1px solid rgba(245, 185, 66, 0.3);
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 10px;
}
.pb-chips-claim-btn {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: var(--theme-accent, #00d3bd);
  color: #00110f;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}
.pb-chips-claim-btn:disabled { opacity: 0.6; cursor: default; }
.pb-chips-claimed {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-accent, #00d3bd);
  padding: 10px 0;
}
.pb-chips-pop-hint {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8b949e;
}

/* ================= Cover redesign: features marquee + research card (scoped) ================= */
#cover-page{ --pb-dim: rgba(234,247,244,.52); --pb-teal-bright:#00F5D4; --pb-good:#a3e635; --pb-line-2:rgba(255,255,255,.16); }

/* features marquee (no edge fades — they read as a glow/vignette on the carousel sides
   because the cards sit lighter than the base; cards simply clip at the container edge) */
#cover-page .features-carousel-wrap{ position:relative; }
#cover-page .features-carousel{ display:flex; overflow:hidden; padding:12px 0; }
#cover-page .features-group{ display:flex; flex:none; width:2528px; animation:pb-marquee 58s linear infinite; will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
#cover-page .features-carousel:hover .features-group{ animation-play-state:paused; }
/* -2528px == one group == 8 cards x (300px + 16px margin); keep both in sync if cards change */
@keyframes pb-marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-2528px,0,0); } }
@media (prefers-reduced-motion:reduce){ #cover-page .features-group{ animation:none; } }

/* marquee cards — reset the production grid-card look to the flat demo look */
/* opaque, a touch lighter than the #060d12 base so cards read as raised panels (no aurora bleed-through) */
#cover-page .features-carousel .feature-card{ flex:0 0 300px; margin-right:16px; background:#0f151c; border:1px solid var(--pb-line); border-radius:16px; padding:22px; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; overflow:visible; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
#cover-page .features-carousel .feature-card:hover{ transform:translateY(-4px); border-color:rgba(0,211,189,.28); background:#18212a; box-shadow:none; }
#cover-page .features-carousel .feature-card .feature-card-hover{ display:none; }
#cover-page .features-carousel .feature-card-icon{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px; background:rgba(0,211,189,.10); border:none; color:var(--pb-teal); }
#cover-page .features-carousel .feature-card-icon svg{ width:20px; height:20px; }
#cover-page .features-carousel .feature-card-title{ font-size:16px; font-weight:700; color:var(--pb-text); margin:0 0 8px; }
#cover-page .features-carousel .feature-card-body{ font-size:13.5px; line-height:1.55; color:var(--pb-muted); margin:0; }

/* mobile (≤1000px): a PURE CSS transform-marquee — same mechanism as desktop, no native
   scroll. Swipe is intentionally disabled here: a native scroller + programmatic scrollLeft
   + iOS touch momentum kept blanking the carousel, and no native scroll means none of that
   can happen. Placed AFTER the base card rules so these same-specificity overrides win. */
@media (max-width:1000px){
  #cover-page .features-carousel{ padding: 8px 0 28px; }               /* overflow:hidden inherited from base */
  /* wider landscape cards → 8 × (440 + 16 margin) = 3648px group, which matches the
     pixel-exact loop distance in @keyframes pb-marquee-mobile below. Speed = 3648/56.8s ≈
     64.2px/s. */
  #cover-page .features-group{ width:3648px; animation-name: pb-marquee-mobile; animation-duration: 56.8s; }
  #cover-page .cover-aurora{ display:none; }                          /* drop the ambient glows on mobile */
  #cover-page .features-carousel .feature-card{ flex-basis:440px; padding:22px 28px; }
  #cover-page .features-carousel .feature-card:hover{ transform:none; } /* no sticky-hover lift on touch */
  #cover-page .features-carousel .feature-card-icon{ width:48px; height:48px; border-radius:13px; margin-bottom:14px; }
  #cover-page .features-carousel .feature-card-icon svg{ width:25px; height:25px; }
  #cover-page .features-carousel .feature-card-title{ font-size: clamp(22px, 5.8vw, 26px); margin-bottom:9px; }
  #cover-page .features-carousel .feature-card-body{ font-size: clamp(18px, 5vw, 21px); line-height:1.45; }
}
/* mobile group is wider than desktop → its own pixel-exact distance (Safari mis-resolves % translates) */
@keyframes pb-marquee-mobile{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-3648px,0,0); } }
/* touch devices (no real hover): a tap fires a sticky :hover — keep the marquee running,
   don't let tapping a card freeze it. Desktop mouse hover-pause is unaffected. */
@media (hover: none){
  #cover-page .features-carousel:hover .features-group{ animation-play-state:running; }
}
/* reduced-motion mobile: kill the marquee (must re-assert here — the mobile rule above wins
   over the base reduced-motion rule by source order) and let the user swipe instead */
@media (max-width:1000px) and (prefers-reduced-motion:reduce){
  #cover-page .features-group{ animation:none; }
  #cover-page .features-carousel{ overflow-x:auto; scrollbar-width:none; }
  #cover-page .features-carousel::-webkit-scrollbar{ display:none; }
}

/* research dashboard card */
#cover-page .research-image .dash{ background:linear-gradient(180deg,#0c0f14,#090b0f); border:1px solid var(--pb-line-2); border-radius:18px; box-shadow:var(--pb-shadow); padding:18px; }
#cover-page .dash-head{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--pb-line); }
#cover-page .dash-head .av{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.08); border:1px solid var(--pb-line-2); flex:none; }
#cover-page .dash-head .who{ flex:1; min-width:0; }
#cover-page .dash-head .who .n{ font-size:15px; font-weight:700; color:var(--pb-text); }
#cover-page .dash-head .who .m{ font-size:12px; color:var(--pb-dim); }
#cover-page .dash-head .score{ text-align:right; }
#cover-page .dash-head .score .v{ font-size:24px; font-weight:800; color:var(--pb-teal-bright); line-height:1; }
#cover-page .dash-head .score .l{ font-size:8.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--pb-dim); }
#cover-page .dash-body{ display:grid; grid-template-columns:1.25fr 1fr; gap:22px; margin-top:16px; align-items:stretch; }
#cover-page .dash-col{ display:flex; flex-direction:column; }
#cover-page .dash-sec-title{ font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--pb-dim); margin-bottom:12px; }
#cover-page .dash-sec-title .lc{ text-transform:none; }
#cover-page .dash-log{ flex:1; display:flex; align-items:flex-end; gap:7px; min-height:96px; }
#cover-page .dash-log .g{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
#cover-page .dash-log .bar{ width:100%; border-radius:4px 4px 0 0; min-height:10px; background:linear-gradient(180deg,var(--pb-teal-bright),var(--pb-teal)); box-shadow:0 0 9px rgba(0,211,189,.35); }
#cover-page .dash-log .gl{ font-size:8px; color:var(--pb-dim); }
#cover-page .dash-stats{ display:flex; flex-direction:column; gap:12px; }
#cover-page .dash-stat .srow{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; margin-bottom:6px; }
#cover-page .dash-stat .k{ color:var(--pb-dim); }
#cover-page .dash-stat .v{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--pb-text); }
#cover-page .dash-stat .v.up{ color:var(--pb-good); }
#cover-page .dash-stat .v.tl{ color:var(--pb-teal-bright); }
#cover-page .dash-stat .mbar{ height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
#cover-page .dash-stat .mbar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--pb-teal),var(--pb-teal-bright)); }
#cover-page .dash-context{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
#cover-page .dash-context .c{ font-size:11px; color:var(--pb-muted); background:rgba(255,255,255,.04); border:1px solid var(--pb-line); border-radius:7px; padding:6px 10px; }
#cover-page .dash-context .c b{ color:var(--pb-teal); font-weight:700; }

/* research section + dashboard card — mobile (≤1000px): squeeze the block inward (more side
   breathing room) and grow the visual card taller with scaled-up internals */
@media (max-width:1000px){
  /* text back to its earlier (squeezed) width; card stays squeezed on its own */
  #cover-page .research-copy{ padding-left:4.8%; padding-right:4.8%; }
  #cover-page .research-image{ margin-left:6%; margin-right:6%; }
  #cover-page .research-image .dash{ padding:24px; border-radius:22px; }
  #cover-page .dash-head{ gap:16px; padding-bottom:18px; }
  #cover-page .dash-head .av{ width:56px; height:56px; }
  #cover-page .dash-head .who .n{ font-size:22px; }
  #cover-page .dash-head .who .m{ font-size:15px; }
  #cover-page .dash-head .score .v{ font-size:34px; }
  #cover-page .dash-head .score .l{ font-size:11px; }
  /* narrower chart, more room for the matchup column (base is 1.25fr 1fr) */
  #cover-page .dash-body{ grid-template-columns:1fr 1.15fr; gap:20px; margin-top:22px; }
  #cover-page .dash-sec-title{ font-size:14px; margin-bottom:16px; }
  #cover-page .dash-log{ min-height:160px; gap:9px; }
  #cover-page .dash-log .gl{ font-size:11px; }
  #cover-page .dash-stats{ gap:18px; }
  #cover-page .dash-stat .srow{ font-size:16px; margin-bottom:8px; }
  #cover-page .dash-stat .mbar{ height:7px; }
  #cover-page .dash-context{ margin-top:22px; gap:10px; }
  #cover-page .dash-context .c{ font-size:14px; padding:9px 13px; }
}