/* ─────────────────────────────────────────────────────────────
   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 */
#cover-page{ position: fixed; inset:0; overflow-y:auto; background:transparent; z-index:9;}
#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(60px); animation:pb-float 14s ease-in-out infinite; opacity:.28; }
#cover-page .aurora.a1{ width:340px; height:340px; top:-60px; left:-60px; background:#35d1ff33; }
#cover-page .aurora.a2{ width:360px; height:360px; top:33%; right:-80px; background:#00d3bd33; animation-duration:18s; }
#cover-page .aurora.a3{ width:280px; height:280px; bottom:-40px; left:35%; background:#76e1ff33; animation-duration:20s; }

#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); }

/* ─────────────────────────────────────────────────────────────
   HERO SHOWCASE (Build / Save / Duel)
   ───────────────────────────────────────────────────────────── */

.hero-showcase{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  max-width:1540px;
  margin:0 auto;
}

.showcase-item{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.showcase-label{
  text-transform:uppercase;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--pb-accent);
}

.showcase-img{
  width:100%;
  aspect-ratio:1290 / 1491;
  object-fit:fill;
  border-radius:16px;
  box-shadow:0 22px 48px -18px rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.08);
  display:block;
}

.showcase-desc{
  color:var(--pb-muted);
  font-size:clamp(14px, 3.8vw, 15px);
  margin:0;
  line-height:1.5;
}

/* 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; } }
.landing-container{ max-width:1120px; margin:0 auto; padding: 0 16px; }

.features-head{ text-align:center; margin-bottom:40px; }
.features-head h2{
  font-size: clamp(28px, 7vw, 36px);
  color:var(--pb-text);
  font-weight:800;
  margin-bottom: 12px;
}
.features-head p{
  color: var(--pb-muted);
  font-size: clamp(16px, 4.4vw, 18px);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.6;
}

.features-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:768px){ .features-grid{ grid-template-columns:repeat(2, 1fr); gap:24px; } }

.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:1fr 1fr;
    gap:40px;
  }
  .research-image{ order:-1; }
}

.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;
}

.research-image img{
  width:100%;
  border-radius:16px;
  box-shadow:0 22px 48px -18px rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.08);
  display:block;
}

/* 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){

  .landing-container{ 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; }

  .hero-showcase{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    gap:0;
  }
  .hero-showcase::-webkit-scrollbar{ display:none; }
  .showcase-item{
    flex:0 0 100%;
    scroll-snap-align:center;
  }
  .showcase-label{
    font-size:32px;
    letter-spacing:2px;
    order:-2;
  }
  .showcase-desc{
    font-size:28px;
    order:-1;
  }

  /* Features section mobile */
  .features-head h2{ font-size: clamp(32px, 8.5vw, 40px); }
  .features-head p{ font-size: clamp(21px, 5.6vw, 25px); }
  .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; }
}

/* Showcase carousel dots */
.showcase-dots{ display:none; }
@media (max-width:1000px){
  .showcase-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:8px;
  }
  .showcase-dot{
    width:10px; height:10px;
    border-radius:50%;
    border:none;
    padding:0;
    cursor:pointer;
    background:rgba(255,255,255,.25);
    transition:background .2s ease;
  }
  .showcase-dot.active{
    background:var(--pb-accent);
  }
}

/* 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);
}