/* =====================================================================
   WGE Sports Live — shared stylesheet
   No grid overlays, no seam borders, no boxed-in scaffolding.
   Layout is flexbox + spacing. Separation is done with space and
   surface colour, not lines.
   ===================================================================== */

:root{
  --field:#0A0C10;
  --slab:#151A22;
  --slab-hi:#1D242F;
  --edge:rgba(255,255,255,.07);
  --chalk:#F2F4F7;
  --steel:#8892A3;
  --steel-dim:#6C7788;
  --orange:#FF6B00;
  --orange-hi:#FF8A33;
  --live:#FF2D2D;
  --good:#3DD68C;
  --display:'Bebas Neue',Impact,sans-serif;
  --body:'Barlow Condensed',"Arial Narrow",sans-serif;
  --r:6px;
  --shadow:0 12px 34px rgba(0,0,0,.42);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Author `display:` rules outrank the UA sheet's [hidden] rule, so any
   element given display:flex here would ignore the hidden attribute. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--field);
  color:var(--chalk);
  font-family:var(--body);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(10,12,16,.9);
  backdrop-filter:blur(14px);
}
.bar{display:flex;align-items:center;gap:28px;height:72px}
.brand{
  font-family:var(--display);font-size:26px;letter-spacing:.06em;
  line-height:1;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.brand .mark{width:8px;height:26px;background:var(--orange);border-radius:2px;display:block}
.brand em{font-style:normal;color:var(--orange)}
nav{
  display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--steel);
}
nav a{transition:color .15s}
nav a:hover{color:var(--chalk)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 24px;border-radius:var(--r);
  background:transparent;color:var(--chalk);cursor:pointer;
  border:1px solid var(--edge);
  transition:background .15s,color .15s,border-color .15s,transform .1s;
  display:inline-block;text-align:center;
}
.btn:hover{background:var(--slab-hi);color:var(--chalk)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--orange);border-color:var(--orange);color:#0A0C10}
.btn.solid:hover{background:var(--orange-hi);border-color:var(--orange-hi);color:#0A0C10}
.btn.ghost{border-color:transparent;padding-left:0;padding-right:0;color:var(--steel)}
.btn.ghost:hover{background:transparent;color:var(--orange)}
.btn.sm{font-size:13px;padding:9px 16px}
.btn.block{display:block;width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;transform:none}
.btn.solid[disabled]:hover{background:var(--orange)}

/* ---------- hero ---------- */
.hero{padding:88px 0 76px}
.eyebrow{
  font-size:14px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--orange);margin-bottom:20px;
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(56px,10vw,124px);
  line-height:.86;letter-spacing:.005em;text-transform:uppercase;font-weight:400;
}
.hero h1 span{display:block;color:var(--steel)}
.lede{max-width:54ch;margin-top:24px;font-size:20px;color:var(--steel)}

/* countdown — free-standing numerals, no boxes */
.count{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
.count div{min-width:64px}
.count b{
  display:block;font-family:var(--display);font-size:52px;line-height:1;
  font-weight:400;font-variant-numeric:tabular-nums;
}
.count small{
  display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel-dim);margin-top:6px;
}

/* ---------- day cards (flex, spaced, no seams) ---------- */
.cardrow{display:flex;gap:20px;flex-wrap:wrap;margin-top:52px}
.cardrow > *{flex:1 1 320px}
.daycard{
  background:var(--slab);border-radius:var(--r);padding:28px 26px;
}
.daycard .time{
  font-family:var(--display);font-size:36px;letter-spacing:.02em;
  color:var(--orange);line-height:1;font-weight:400;
}
.daycard h3{
  font-family:var(--display);font-size:26px;letter-spacing:.03em;
  text-transform:uppercase;margin:12px 0 8px;font-weight:400;
}
.daycard p{font-size:16px;color:var(--steel)}
.tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);margin-bottom:14px;
}

/* ---------- section heads ---------- */
section{padding:76px 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:34px;flex-wrap:wrap}
.sec-head h2{
  font-family:var(--display);font-size:46px;letter-spacing:.03em;
  text-transform:uppercase;font-weight:400;line-height:1;
}
.sec-head span{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-dim)}

/* ---------- feature board ---------- */
.board{background:var(--slab);border-radius:var(--r);overflow:hidden}
.board-top{
  display:flex;align-items:center;gap:12px;padding:16px 26px;
  font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel);
}
.dot{
  width:9px;height:9px;border-radius:50%;background:var(--live);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,45,45,.7);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 11px rgba(255,45,45,0)}
  100%{box-shadow:0 0 0 0 rgba(255,45,45,0)}
}
.board-main{
  display:flex;align-items:center;justify-content:center;
  padding:44px 30px 48px;gap:30px;flex-wrap:wrap;text-align:center;
}
.team{flex:1 1 260px}
.team .school{
  font-family:var(--display);font-size:clamp(28px,4.2vw,48px);line-height:.94;
  letter-spacing:.02em;text-transform:uppercase;font-weight:400;
}
.team .loc{
  font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel-dim);margin-top:12px;
}
.vs{
  font-family:var(--display);font-size:clamp(30px,4.4vw,52px);color:var(--orange);
  letter-spacing:.04em;flex:0 0 auto;font-weight:400;
}
.board-bot{
  padding:20px 26px 24px;background:rgba(0,0,0,.22);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
}
.board-bot b{color:var(--chalk);font-weight:600;font-variant-numeric:tabular-nums}
.pull{margin-top:24px;font-size:17px;color:var(--steel);max-width:64ch}
.pull strong{color:var(--chalk);font-weight:600}

/* ---------- schedule (flex list, no rules) ---------- */
.sched-list{display:flex;flex-direction:column;gap:12px}
.sched-item{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--slab);border-radius:var(--r);padding:22px 26px;
  transition:background .15s;
}
.sched-item:hover{background:var(--slab-hi)}
.sched-item .date{
  font-family:var(--display);font-size:26px;letter-spacing:.03em;
  color:var(--orange);flex:0 0 92px;line-height:1;font-weight:400;
}
.sched-item .match{flex:1 1 260px;font-size:19px;font-weight:600}
.sched-item .match em{
  display:block;font-style:normal;font-size:15px;color:var(--steel);font-weight:400;
}
.sched-item .meta{
  flex:0 0 auto;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
}
.sched-item .price{font-family:var(--display);font-size:28px;flex:0 0 auto;font-weight:400}
.sched-item .go{flex:0 0 auto}
.live-chip{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--live);
}
.owned-chip{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--good);
}

/* ---------- pricing (separate cards, no seams) ---------- */
.plans{display:flex;gap:20px;flex-wrap:wrap;align-items:stretch}
.plan{
  flex:1 1 300px;background:var(--slab);border-radius:var(--r);
  padding:32px 28px;display:flex;flex-direction:column;
}
.plan.feature{background:var(--slab-hi);box-shadow:var(--shadow)}
.plan.feature .ribbon{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;
}
.plan h3{
  font-family:var(--display);font-size:27px;letter-spacing:.04em;
  text-transform:uppercase;font-weight:400;
}
.plan .amt{font-family:var(--display);font-size:58px;line-height:1;margin:14px 0 4px;font-weight:400}
.plan .amt sup{font-size:24px;vertical-align:super;color:var(--steel)}
.plan ul{list-style:none;margin:20px 0 28px;font-size:16px;color:var(--steel)}
.plan li{padding:7px 0 7px 22px;position:relative}
.plan li::before{
  content:"";position:absolute;left:0;top:17px;width:10px;height:2px;
  background:var(--orange);border-radius:2px;
}
.plan .btn{margin-top:auto}
.note{margin-top:24px;font-size:16px;color:var(--steel);max-width:70ch}

/* ---------- steps ---------- */
.steps-row{display:flex;gap:38px;flex-wrap:wrap;margin-top:8px}
.step{flex:1 1 260px}
.step .n{
  font-family:var(--display);font-size:15px;letter-spacing:.2em;color:var(--orange);
  margin-bottom:12px;font-weight:400;
}
.step h4{font-size:19px;font-weight:700;margin-bottom:8px}
.step p{font-size:16px;color:var(--steel)}

/* ---------- faq ---------- */
.faq-list{display:flex;flex-direction:column;gap:8px}
details{background:var(--slab);border-radius:var(--r);overflow:hidden}
summary{
  cursor:pointer;list-style:none;padding:20px 52px 20px 24px;position:relative;
  font-size:19px;font-weight:600;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:22px;top:17px;
  font-family:var(--display);font-size:28px;color:var(--orange);line-height:1;
}
details[open] summary::after{content:"\2013"}
details .ans{padding:0 24px 22px;color:var(--steel);max-width:82ch;font-size:17px}

/* ---------- support ---------- */
.support-box{
  background:var(--slab);border-radius:var(--r);padding:34px 30px;
  display:flex;gap:26px;justify-content:space-between;align-items:center;flex-wrap:wrap;
}
.support-box h3{
  font-family:var(--display);font-size:33px;letter-spacing:.03em;
  text-transform:uppercase;font-weight:400;
}
.support-box p{color:var(--steel);margin-top:6px;font-size:17px}

/* ---------- footer ---------- */
footer{padding:56px 0 72px;font-size:15px;color:var(--steel)}
.foot-row{display:flex;gap:40px;justify-content:space-between;flex-wrap:wrap}
.foot-links{
  display:flex;gap:22px;flex-wrap:wrap;letter-spacing:.1em;
  text-transform:uppercase;font-size:14px;
}
.foot-links a{transition:color .15s}
.foot-links a:hover{color:var(--chalk)}
.disclaimer{margin-top:28px;max-width:72ch;font-size:14px;line-height:1.65;color:var(--steel-dim)}

/* ---------- auth dialog ---------- */
dialog.sheet{
  border:0;padding:0;background:transparent;color:var(--chalk);
  max-width:440px;width:calc(100% - 32px);
  /* the * reset above zeroes margin, which is what centres a modal
     <dialog> — put it back explicitly */
  margin:auto;
}
dialog.sheet::backdrop{background:rgba(4,6,9,.78);backdrop-filter:blur(3px)}
.sheet-in{
  background:var(--slab-hi);border-radius:10px;padding:32px 30px 30px;
  box-shadow:var(--shadow);
}
.sheet-in h2{
  font-family:var(--display);font-size:34px;letter-spacing:.04em;
  text-transform:uppercase;font-weight:400;line-height:1;
}
.sheet-in .sub{color:var(--steel);font-size:16px;margin-top:8px}
.field{margin-top:18px}
.field label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel);margin-bottom:7px;
}
.field input{
  width:100%;background:var(--field);color:var(--chalk);
  border:1px solid var(--edge);border-radius:var(--r);
  padding:13px 14px;font-family:var(--body);font-size:17px;
}
.field input:focus{outline:none;border-color:var(--orange)}
.field .hint{margin-top:8px;font-size:14px;line-height:1.45;color:var(--steel-dim)}
.msg{margin-top:16px;font-size:16px;border-radius:var(--r);padding:12px 14px;display:none}
.msg.show{display:block}
.msg.err{background:rgba(255,45,45,.12);color:#FF8B8B}
.msg.ok{background:rgba(61,214,140,.12);color:var(--good)}
.sheet-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.sheet-actions .btn{flex:1 1 auto}
.swap{margin-top:18px;font-size:16px;color:var(--steel);text-align:center}
.swap button{
  background:none;border:0;color:var(--orange);font-family:var(--body);
  font-size:16px;cursor:pointer;text-decoration:underline;padding:0;
}

/* ---------- watch page ---------- */
.stage{background:#000;border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:16/9}
.stage mux-player{width:100%;height:100%;display:block}
.gate{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:32px 24px;background:var(--slab);gap:8px;
}
.gate h2{
  font-family:var(--display);font-size:clamp(30px,4.4vw,46px);letter-spacing:.04em;
  text-transform:uppercase;font-weight:400;line-height:1;
}
.gate p{color:var(--steel);max-width:46ch;font-size:17px;margin-top:6px}
.gate .btn{margin-top:20px}
.gate .count{justify-content:center;margin-top:26px;gap:26px}
.gate .count b{font-size:40px}
.watch-head{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;margin-bottom:22px}
.watch-head h1{
  font-family:var(--display);font-size:clamp(32px,5vw,54px);letter-spacing:.03em;
  text-transform:uppercase;font-weight:400;line-height:1;
}
.watch-head .where{color:var(--steel);font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.watch-note{margin-top:20px;color:var(--steel);font-size:16px;max-width:70ch}

/* ---------- account page ---------- */
.acct-list{display:flex;flex-direction:column;gap:12px}
.acct-item{
  background:var(--slab);border-radius:var(--r);padding:22px 26px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.acct-item .t{flex:1 1 260px;font-size:19px;font-weight:600}
.acct-item .t em{display:block;font-style:normal;font-size:15px;color:var(--steel);font-weight:400}
.acct-item .amt{font-family:var(--display);font-size:26px;font-weight:400}
.empty{background:var(--slab);border-radius:var(--r);padding:40px 30px;text-align:center;color:var(--steel)}

/* ---------- legal pages ---------- */
.legal{padding:64px 0 90px;max-width:78ch}
.legal h1{
  font-family:var(--display);font-size:clamp(38px,6vw,62px);letter-spacing:.03em;
  text-transform:uppercase;font-weight:400;line-height:1;margin-bottom:10px;
}
.legal .updated{color:var(--steel-dim);font-size:15px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:34px}
.legal h2{
  font-family:var(--display);font-size:28px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:400;margin:38px 0 12px;
}
.legal h3{font-size:19px;font-weight:700;margin:24px 0 8px}
.legal p{color:var(--steel);margin-bottom:14px;font-size:17px}
.legal ul{color:var(--steel);margin:0 0 16px 22px;font-size:17px}
.legal li{margin-bottom:8px}
.legal strong{color:var(--chalk);font-weight:600}
.legal a{color:var(--orange);text-decoration:underline}

/* ---------- responsive ---------- */
@media(max-width:880px){
  body{font-size:17px}
  section{padding:56px 0}
  .hero{padding:56px 0 52px}

  /* Header: brand + the one link that matters + sign in, on one line.
     "Passes" is the only nav item worth the space on a phone; the rest
     of this page is a single scroll, and the footer carries the others. */
  .bar{gap:14px;height:64px}
  .brand{font-size:21px}
  .brand .mark{height:21px;width:7px}
  nav{display:flex;gap:0;margin-left:auto;font-size:13px}
  nav a{display:none}
  nav a[href$="#pricing"]{display:block}
  .btn.sm{font-size:12px;padding:8px 12px;letter-spacing:.1em}

  /* Four countdown cells across 375px, without wrapping onto a second row. */
  .count{gap:10px}
  .count div{min-width:0;flex:1 1 0}
  .count b{font-size:34px}
  .count small{font-size:10px;letter-spacing:.1em}

  .sched-item{gap:14px}
  .sched-item .date{flex-basis:100%}
  .sched-item .price{margin-left:auto}
  .board-main{padding:34px 22px 38px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}