:root{
  --navy:#070F1A; --navy2:#0D1B2C; --navy3:#132639;
  --gold:#D6B25E; --hot:#E4562C; --ice:#6EC2E8; --mint:#68CFA8;
  --txt:#EDF3F9; --dim:#8399B0; --line:rgba(237,243,249,.10); --line-gold:rgba(214,178,94,.26);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--txt);
  font-family:Inter,Helvetica,Arial,sans-serif; font-weight:300; font-size:16px; line-height:1.65;
  background-image:
    radial-gradient(900px 520px at 84% 0%, rgba(228,86,44,.13), transparent 60%),
    radial-gradient(820px 520px at 6% 22%, rgba(110,194,232,.09), transparent 62%);
  background-attachment:fixed;
}
a{color:inherit} img{max-width:100%}
.wrap{width:min(1280px,92vw); margin-inline:auto}
h1,h2,h3{margin:0; font-family:"Barlow Condensed",Impact,sans-serif; font-weight:700; line-height:.9; letter-spacing:-.005em}

/* lockup */
.lock{display:inline-flex; align-items:center; gap:14px; text-decoration:none}
.lock img{height:40px; width:auto; aspect-ratio:360/189; display:block}
.lock .stack{display:flex; flex-direction:column; line-height:1}
.lock .fs{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold); margin-bottom:2px}
.lock .pb{font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:30px; text-transform:uppercase; letter-spacing:.005em}
.lock:hover .pb{color:var(--hot)}

/* nav */
.nav{position:sticky; top:0; z-index:60; background:rgba(7,15,26,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-gold)}
.nav-in{display:flex; align-items:center; gap:22px; height:76px}
.menu{margin-left:auto; display:flex; align-items:center; gap:26px}
.menu a{text-decoration:none; font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:16px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--dim)}
.menu a:hover{color:var(--txt)}
.cta{background:var(--hot); color:#fff !important; padding:11px 20px; border-radius:2px}
.cta:hover{background:#F26440}
.burger{margin-left:auto; display:none; background:none; border:1px solid var(--line); color:var(--txt); width:42px; height:38px; cursor:pointer}

/* hero */
.hero{padding:70px 0 58px; display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; border-bottom:1px solid var(--line-gold)}
.hero h1{font-size:clamp(50px,7.8vw,104px); font-weight:800; text-transform:uppercase}
.hero h1 span{display:block; color:var(--hot)}
.hero p{color:var(--dim); font-size:18px; max-width:46ch; margin:26px 0 32px}
.acts{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn{text-decoration:none; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:17px;
  letter-spacing:.09em; text-transform:uppercase; padding:15px 30px; border-radius:2px; display:inline-block}
.btn-p{background:var(--hot); color:#fff}
.btn-p:hover{background:#F26440}
.btn-s{border:1px solid var(--line); color:var(--txt)}
.btn-s:hover{border-color:var(--ice); color:var(--ice)}
.btn-ice{border:1px solid var(--ice); color:var(--ice)}
.btn-ice:hover{background:var(--ice); color:#070F1A}
.sub{margin-top:20px; color:var(--dim); font-size:15px}
.sub b{color:var(--txt); font-weight:600}
.mascot{position:relative; text-align:center}
.mascot:before{content:""; position:absolute; left:50%; top:6%; transform:translateX(-50%);
  width:min(340px,86%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(228,86,44,.24),transparent 68%)}
.mascot img{position:relative; width:min(300px,78%); height:auto; aspect-ratio:520/591; filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}

/* marquee bands */
.bands{border-bottom:1px solid var(--line-gold)}
.band{display:block; text-decoration:none; border-bottom:1px solid var(--line); position:relative; overflow:hidden; --accent:var(--ice)}
.band:last-child{border-bottom:0}
.band:before{content:""; position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,color-mix(in srgb, var(--accent) 22%, transparent),color-mix(in srgb, var(--accent) 3%, transparent) 60%,transparent);
  transition:width .42s cubic-bezier(.2,.7,.2,1)}
.band:hover:before{width:100%}
.band:after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); opacity:.7}
.band-in{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:center; padding:36px 0 36px 26px}
.band .name{font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:clamp(36px,6vw,72px);
  text-transform:uppercase; line-height:.86; letter-spacing:-.01em}
.band:hover .name{color:var(--accent)}
.band .mid p{margin:0; color:var(--dim); font-size:16px; max-width:44ch}
.band .subs{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.band .subs span{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:#9CB3C8; border:1px solid var(--line); padding:4px 11px; border-radius:2px}
.band:hover .subs span{border-color:var(--accent); color:var(--txt)}
.band .enter{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); border:1px solid var(--line); padding:12px 22px; white-space:nowrap}
.band:hover .enter{background:var(--accent); border-color:var(--accent); color:#070F1A}

.b-nfl{--accent:var(--ice)} .b-cfb{--accent:var(--mint)} .b-surv{--accent:var(--gold)}
.b-wx{--accent:#9AA9F0} .b-art{--accent:var(--hot)}

/* credentials */
.creds{padding:70px 0; background:linear-gradient(180deg,var(--navy2),var(--navy)); border-bottom:1px solid var(--line-gold)}
.creds-in{display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:center}
.creds h2{font-size:clamp(30px,3.8vw,44px); text-transform:uppercase}
.creds p{color:var(--dim); margin:16px 0 0; font-size:15.5px}
.badges{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.badges figure{margin:0; text-align:center}
.badges img{width:100%; max-width:86px; height:auto; aspect-ratio:1/1; display:block; margin:0 auto 10px}
.badges figcaption{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:14px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--dim); line-height:1.3}
.badges figcaption b{display:block; color:var(--txt); font-weight:700}

/* pricing */
.pricing{padding:84px 0 96px; text-align:center}
.pricing h2{font-size:clamp(34px,5.2vw,66px); text-transform:uppercase}
.pricing>.wrap>p{color:var(--dim); max-width:48ch; margin:18px auto 42px; font-size:17px}
.plans{display:grid; grid-template-columns:repeat(2,minmax(0,320px)); gap:18px; justify-content:center; text-align:left}
.plan{border:1px solid var(--line); padding:34px 30px; background:var(--navy2); border-radius:4px}
.plan.chill{border-color:var(--ice); background:linear-gradient(165deg,rgba(110,194,232,.13),var(--navy2) 60%)}
.plan.chill .kind{color:var(--ice)}
.plan.lit{border-color:var(--hot); background:linear-gradient(165deg,rgba(228,86,44,.13),var(--navy2) 60%)}
.plan .kind{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.plan .amt{font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:64px; line-height:.9; margin:16px 0 6px}
.plan .per{color:var(--dim); font-size:14px}
.plan p{color:var(--dim); font-size:14.5px; margin:20px 0 28px; min-height:46px}
.plan .btn{display:block; text-align:center}

footer{padding:34px 0 54px; color:var(--dim); font-size:13.5px; border-top:1px solid var(--line)}
.fin{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.fin a{text-decoration:none; color:var(--dim)} .fin a:hover{color:var(--txt)}
.fspace{margin-left:auto}
.fin .lock img{height:30px} .fin .lock .pb{font-size:22px} .fin .lock .fs{font-size:10px}

a:focus-visible,button:focus-visible{outline:2px solid var(--ice); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none !important} html{scroll-behavior:auto}}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr; gap:30px; padding:44px 0 40px}
  .mascot{display:none}
  .band-in{grid-template-columns:1fr; gap:14px; padding:28px 0 28px 20px}
  .band .enter{justify-self:start}
  .creds-in{grid-template-columns:1fr; gap:28px}
  .badges{grid-template-columns:repeat(3,1fr)}
  .menu{display:none} .burger{display:block}
  .plans{grid-template-columns:1fr; max-width:340px; margin-inline:auto}
}

/* ---------- accessibility & mobile drawer (added for production build) ---------- */
.skip-link{
  position:absolute; left:-9999px; top:auto; z-index:100;
  background:var(--hot); color:#fff; padding:12px 18px; border-radius:4px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; text-decoration:none;
}
.skip-link:focus{left:16px; top:16px}

.mobile-menu{
  display:none; flex-direction:column; gap:2px; padding:10px 0 16px;
  border-top:1px solid var(--line); background:var(--navy);
}
.mobile-menu a{
  text-decoration:none; color:var(--dim); font-family:"Barlow Condensed",sans-serif;
  font-weight:600; font-size:18px; letter-spacing:.03em; text-transform:uppercase;
  padding:14px 6vw; border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{border-bottom:0; color:var(--hot)}
.mobile-menu a:hover{color:var(--txt)}
.nav.open .mobile-menu{display:flex}
.burger[aria-expanded="true"]{border-color:var(--hot); color:var(--hot)}

/* ==========================================================================
   Weather section — appended to shared/styles.css.
   Reuses existing tokens (--navy, --navy2, --gold, --hot, --ice, --mint,
   --txt, --dim, --line, --line-gold). Adds one new accent token for the
   Weather section specifically, matching the periwinkle used for .b-wx on
   the homepage band.
   ========================================================================== */
:root{ --periwinkle:#9AA9F0; }

/* page head (sub-pages, no hero) */
.page-head{padding:52px 0 34px; border-bottom:1px solid var(--line-gold)}
.page-head h1{font-size:clamp(38px,5.6vw,64px); text-transform:uppercase}
.page-head h1 span{color:var(--periwinkle)}
.page-head p{color:var(--dim); font-size:16px; max-width:60ch; margin:16px 0 0}

/* league tabs */
.league-tabs{display:flex; gap:10px; margin:30px 0 18px}
.league-tab{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px;
  letter-spacing:.08em; text-transform:uppercase; padding:10px 24px; border-radius:2px;
  border:1px solid var(--line); background:var(--navy2); color:var(--dim); cursor:pointer}
.league-tab.active{background:var(--periwinkle); border-color:var(--periwinkle); color:#070F1A}
.league-tab:not(.active):hover{border-color:var(--periwinkle); color:var(--txt)}

/* controls row */
.controls-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:16px 18px; background:var(--navy2); border:1px solid var(--line); border-radius:4px; margin-bottom:28px}
.controls-row .label{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-right:2px}
.controls-row select,.filter-btn{font-family:Inter,sans-serif; background:var(--navy3); color:var(--txt);
  border:1px solid var(--line); border-radius:2px; padding:8px 12px; font-size:13px; font-weight:500; cursor:pointer}
.filter-btn.active{background:var(--periwinkle); color:#070F1A; border-color:var(--periwinkle)}
.week-pill{margin-left:auto; font-family:"Barlow Condensed",sans-serif; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; background:var(--navy3); border:1px solid var(--line); border-radius:2px; padding:7px 16px; font-size:13px; color:var(--dim)}

/* day group header */
.day-header{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:19px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--gold); margin:34px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.day-header:first-child{margin-top:0}

/* game grid / cards */
.game-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.game-card{background:var(--navy2); border:1px solid var(--line); border-radius:4px; padding:18px;
  display:flex; flex-direction:column; gap:13px; cursor:pointer; transition:border-color .2s ease}
.game-card:hover,.game-card:focus{border-color:var(--periwinkle); outline:none}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; font-size:12px; color:var(--dim)}
.kickoff-time{font-family:"Barlow Condensed",sans-serif; font-weight:600; letter-spacing:.03em; color:var(--txt)}
.roof-badge{font-family:"Barlow Condensed",sans-serif; padding:3px 10px; border-radius:2px; font-size:11px;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.roof-outdoor{background:rgba(104,207,168,.15); color:var(--mint)}
.roof-dome{background:rgba(110,194,232,.15); color:var(--ice)}
.roof-retractable{background:rgba(214,178,94,.15); color:var(--gold)}
.matchup{display:flex; align-items:center; justify-content:space-between}
.team{display:flex; flex-direction:column; align-items:center; gap:7px; width:40%; text-align:center}
.team img{width:42px; height:42px; object-fit:contain}
.team .abbr{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:14px; letter-spacing:.02em}
.at-sign{color:var(--dim); font-weight:600; font-size:13px}
.venue-line{font-size:12px; color:var(--dim); text-align:center}
.weather-block{display:flex; align-items:center; justify-content:space-between; background:var(--navy3);
  border-radius:3px; padding:11px 15px}
.temp{font-family:"Barlow Condensed",sans-serif; font-size:28px; font-weight:800}
.wx-details{display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:12.5px; color:var(--txt)}
.wx-metric{display:flex; align-items:center; gap:6px}
.wx-muted{color:var(--dim)}
.wx-dot{width:8px; height:8px; border-radius:50%; display:inline-block}
.wx-pending{font-size:12.5px; color:var(--dim); font-style:italic; text-align:center; padding:8px 0; width:100%}
.risk-chips{display:flex; flex-wrap:wrap; gap:7px}
.risk-chip{font-family:"Barlow Condensed",sans-serif; font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:4px 11px; border-radius:2px; background:rgba(228,86,44,.15); color:var(--hot)}
.odds-line{display:flex; justify-content:space-between; font-size:12px; color:var(--dim);
  border-top:1px solid var(--line); padding-top:11px}
.empty-state{text-align:center; color:var(--dim); padding:70px 20px; font-size:14px}

/* expanded-forecast modal */
#modalRoot{display:none; position:fixed; inset:0; background:rgba(7,15,26,.82); z-index:100;
  align-items:center; justify-content:center; padding:20px; overflow-y:auto}
#modalRoot.open{display:flex}
.modal-card{background:var(--navy2); border:1px solid var(--line-gold); border-radius:4px; max-width:580px;
  width:100%; padding:32px; position:relative; max-height:88vh; overflow-y:auto}
.modal-close{position:absolute; top:16px; right:18px; background:none; border:none; color:var(--dim);
  font-size:28px; cursor:pointer; line-height:1}
.modal-close:hover{color:var(--hot)}
.modal-header{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:8px}
.modal-header img{width:50px; height:50px; object-fit:contain}
.modal-header h2{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:22px;
  text-transform:uppercase; margin:0; text-align:center}
.modal-sub{text-align:center; color:var(--dim); font-size:13px; margin:0 0 20px}
.hourly-title{font-family:"Barlow Condensed",sans-serif; font-size:14px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--periwinkle); margin:24px 0 12px}
.hourly-table{width:100%; border-collapse:collapse; font-size:13px}
.hourly-table th,.hourly-table td{padding:7px 9px; text-align:center; border-bottom:1px solid var(--line)}
.hourly-table thead th{color:var(--dim); font-weight:500}
.hourly-table tbody th{text-align:left; font-family:"Barlow Condensed",sans-serif; color:var(--txt); font-weight:700}
.modal-source{font-size:11px; color:var(--dim); margin-top:18px}

@media (max-width:1000px){
  .game-grid{grid-template-columns:1fr}
  .controls-row{flex-direction:column; align-items:stretch}
  .week-pill{margin-left:0; text-align:center}
  .modal-card{padding:22px}
}