/* livecastnow.com — stadium / broadcast.
   Night game: near-black, stadium glow, saturated cyan, scoreboard numerals,
   heavy compressed display type. Nothing shared with the other sites. */

:root{
  --black:#08090b;
  --black-2:#101318;
  --panel:#161a21;
  --line:#252b35;
  --grey:#8e97a5;
  --pale:#dde3ea;
  --white:#fff;
  --cyan:#00e5ff;
  --hot:#ff2d55;
  --green:#2bd97c;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--black);
  color:var(--pale);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:70ch}

h1,h2,h3{
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.005em;
  margin:0;
  color:var(--white);
}
h1{font-size:clamp(2.9rem,8.6vw,6rem);transform:skewX(-4deg)}
h2{font-size:clamp(2.1rem,5.2vw,3.6rem);margin-bottom:.8rem}
h3{font-size:1.24rem;margin-bottom:.4rem}

p{margin:0 0 1.05rem;max-width:70ch}
.lead{font-size:1.2rem;color:var(--grey)}

a{color:var(--cyan)}
strong{color:var(--white);font-weight:600}

.mono{font-family:'Space Mono',ui-monospace,monospace}

/* ---------- stadium glow ---------- */

.glow{
  position:relative;
  background:
    radial-gradient(1200px 520px at 18% -10%, rgba(0,229,255,.16), transparent 62%),
    radial-gradient(900px 460px at 86% 4%, rgba(255,45,85,.13), transparent 60%),
    var(--black);
}

/* ---------- live pill ---------- */

.livepill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Space Mono',monospace;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hot);
  border:1px solid rgba(255,45,85,.45);
  border-radius:999px;
  padding:7px 16px;
}
.livepill::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--hot);
  animation:blip 1.8s ease-in-out infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.livepill::before{animation:none}}

/* ---------- masthead ---------- */

.brandbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.mark{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:1.5rem;letter-spacing:.02em;color:var(--white);
}
.mark b{color:var(--cyan);font-weight:400}
.brandbar .tag{
  font-family:'Space Mono',monospace;
  font-size:.76rem;color:var(--grey);letter-spacing:.12em;text-transform:uppercase;
}

header.mast{padding:0 0 76px}
header.mast .hero{padding-top:70px}
header.mast h1{margin:1.5rem 0 1.4rem}
header.mast h1 em{font-style:normal;color:var(--cyan)}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.04em;
  background:var(--cyan);color:var(--black);
  text-decoration:none;
  padding:16px 36px;min-height:50px;
  border:2px solid var(--cyan);
  border-radius:3px;
  transform:skewX(-4deg);
}
.btn span{display:inline-block;transform:skewX(4deg)}
.btn:hover,.btn:focus{background:#5cf3ff;border-color:#5cf3ff}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus{border-color:var(--cyan);color:var(--cyan);background:transparent}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}

/* ---------- sections ---------- */

section{padding:80px 0;border-top:1px solid var(--line)}
section.lit{background:var(--black-2)}

.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:1rem;
}

/* ---------- channel picker ---------- */

.tuner{
  display:grid;
  grid-template-columns:minmax(240px,340px) 1fr;
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  margin-top:36px;
}
.dial{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.dial button{
  appearance:none;
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  background:var(--panel);
  color:var(--pale);
  border:none;border-left:4px solid transparent;
  font-family:'Archivo',sans-serif;
  font-size:1.02rem;font-weight:600;
  padding:16px 18px;min-height:56px;
  cursor:pointer;
}
.dial button .num{
  font-family:'Space Mono',monospace;
  font-size:.78rem;color:var(--grey);letter-spacing:.06em;
}
.dial button:hover{background:#1c212a}
.dial button[aria-selected="true"]{
  background:#1c212a;
  border-left-color:var(--cyan);
  color:var(--white);
}
.dial button[aria-selected="true"] .num{color:var(--cyan)}
.dial button:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

.readoutpanel{background:var(--panel);padding:30px 30px 34px;display:flex;flex-direction:column;justify-content:center}
.readoutpanel h3{color:var(--cyan);font-size:1.5rem;margin-bottom:.7rem}
.readoutpanel p{color:var(--grey);margin-bottom:0;max-width:46ch}
.readoutpanel .who{
  font-family:'Space Mono',monospace;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-bottom:1rem;
}

/* ---------- revenue calculator ---------- */

.calc{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:5px;
  padding:30px;
  margin-top:36px;
  max-width:660px;
}
.calc label{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-bottom:.6rem;
}
.calc .field{margin-bottom:26px}
.calc input[type=range]{width:100%;accent-color:var(--cyan);height:32px}
.calc .val{
  font-family:'Anton',sans-serif;font-size:1.7rem;color:var(--white);
  display:block;margin-bottom:.3rem;
}
.calc .out{
  border-top:1px solid var(--line);
  padding-top:24px;margin-top:6px;
}
.calc .out .big{
  font-family:'Anton',sans-serif;
  font-size:clamp(2.6rem,9vw,4rem);
  color:var(--green);line-height:1;
}
.calc .out .k{
  font-family:'Space Mono',monospace;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-top:.7rem;
}
.calc .disclaim{
  font-size:.86rem;color:var(--grey);
  margin:1.4rem 0 0;border-top:1px solid var(--line);padding-top:1.1rem;
}

/* ---------- grids ---------- */

.cols{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-top:36px;background:var(--line)}
.cols > div{background:var(--black);padding:28px}
section.lit .cols > div{background:var(--panel)}
.cols p{margin-bottom:0;font-size:.97rem;color:var(--grey)}
.cols h3{color:var(--cyan)}

/* ---------- steps ---------- */

ol.steps{counter-reset:s;list-style:none;padding:0;margin:36px 0 0;display:grid;gap:26px}
ol.steps li{counter-increment:s;position:relative;padding-left:76px;max-width:68ch}
ol.steps li::before{
  content:counter(s);
  position:absolute;left:0;top:-8px;
  font-family:'Anton',sans-serif;font-size:3.4rem;line-height:1;
  color:var(--line);
}
ol.steps p{color:var(--grey);margin-bottom:0}

/* ---------- image slots ---------- */

.slot{
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  background:var(--black-2);
  border:1px solid var(--line);border-radius:5px;
  min-height:250px;margin:34px 0;
}
/* Placeholder art: stadium floodlight rays from above, over broadcast
   scanlines. Covered entirely by ::after once a real file lands. */
.slot::before{
  content:"";position:absolute;inset:0;
  background-image:
    conic-gradient(from 196deg at 50% -18%,
      transparent 0deg 4deg, rgba(0,229,255,.20) 4deg 7deg,
      transparent 7deg 13deg, rgba(0,229,255,.13) 13deg 17deg,
      transparent 17deg 24deg, rgba(0,229,255,.17) 24deg 27deg,
      transparent 27deg 40deg),
    radial-gradient(760px 260px at 50% -12%, rgba(255,45,85,.16), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.bleed::before{
  content:"";position:absolute;inset:0;
  background-image:
    conic-gradient(from 200deg at 50% -14%,
      transparent 0deg 5deg, rgba(0,229,255,.15) 5deg 8deg,
      transparent 8deg 16deg, rgba(0,229,255,.10) 16deg 19deg,
      transparent 19deg 34deg),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
/* --imgpos lets one slot steer its own crop. These slots are much wider than
   they are tall, so `cover` on a portrait source keeps a thin horizontal strip
   from the middle and discards everything else — which for a grandstand shot
   throws away the crowd, the only reason to use it. Defaults to center. */
.slot::after{
  content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;
  background-position:var(--imgpos, center);
}
.slot.tall{min-height:400px}

/* The fee breakdown under the calculator. Deliberately NOT .disclaim-sized: the
   headline number is now net, and the arithmetic that got it there has to be
   readable, not buried in small print. */
.fees{
  margin:16px 0 0;font-size:.94rem;line-height:1.6;color:var(--pale);
  border-left:2px solid var(--cyan);padding-left:16px;max-width:74ch;
}
.fees .mono{color:var(--white);font-weight:700}

/* The fan's-eye view, built rather than screenshotted. A bitmap mockup would be
   unreadable at 375px — the same problem the signal diagram has — and would go
   stale the moment the real screen changes. As markup it stays sharp, restyles
   with the site, and is legible to a screen reader via the label on .screen. */
.fanview{
  display:grid;gap:36px;align-items:start;margin-top:40px;
  grid-template-columns:minmax(0,262px) minmax(0,1fr);
}
@media(max-width:680px){ .fanview{grid-template-columns:1fr} }
.phone{
  max-width:262px;margin:0 auto;padding:12px;
  background:var(--black-2);
  border:2px solid var(--line);border-radius:28px;
  box-shadow:0 0 0 1px rgba(0,229,255,.07), 0 20px 54px rgba(0,0,0,.62);
}
.screen{background:var(--black);border-radius:18px;padding:20px 15px 17px;text-align:center}
.vlogo{
  font-weight:800;letter-spacing:.15em;font-size:.74rem;color:var(--cyan);
  border:1px dashed var(--line);border-radius:5px;padding:11px 6px;margin-bottom:15px;
}
.ev{
  font-size:.7rem;color:var(--grey);margin:0 0 13px;
  text-transform:uppercase;letter-spacing:.13em;
}
.chs{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:8px;text-align:left}
.chs li{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;font-size:.9rem;color:var(--pale);
  display:flex;align-items:center;gap:9px;
}
.listen{
  background:var(--cyan);color:#001417;
  font-weight:800;letter-spacing:.13em;font-size:.86rem;
  border-radius:10px;padding:14px;
}
.fanpoints{display:grid;gap:24px}
.fanpoints h3{margin:0 0 .32rem}
.fanpoints p{margin:0;color:var(--grey);font-size:.98rem}

/* Diagrams, unlike the photo slots above, are an <img> rather than a cropped
   background: `cover` would cut the labels off, and a wiring diagram with its
   labels cropped is worse than no diagram. Sits on its own light card because
   the artwork has a near-white ground and would otherwise glow against the
   page. At 375px the labels are too small to read, so the figure is wrapped in
   a link to the file itself — tap to open, then pinch. */
.diagram{margin:34px 0}
.diagram a{display:block;border-radius:6px;overflow:hidden;background:#fff;padding:10px}
.diagram img{border-radius:3px}
.diagram figcaption{
  margin-top:12px;font-size:.88rem;color:var(--muted);max-width:76ch;
}
.diagram .zoom{display:none}
@media (max-width:640px){
  .diagram .zoom{display:inline;font-weight:700}
}

.bleed{position:relative;min-height:340px;display:grid;place-items:center;background:var(--black-2)}
.bleed::after{
  content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;
  background-position:var(--imgpos, center);
  opacity:.32;
}
.bleed .inner{position:relative;z-index:1;text-align:center;padding:64px 24px;max-width:60ch}
.bleed p{color:var(--pale);margin-left:auto;margin-right:auto}

/* ---------- footnote ---------- */

.footnote{
  font-size:.87rem;color:#5a6473;
  border-top:1px solid var(--line);
  padding-top:20px;margin-top:36px;max-width:76ch;
}

/* ---------- cta ---------- */

.cta{text-align:center;padding:88px 0}
.cta p{margin-left:auto;margin-right:auto;max-width:54ch}
.cta .btnrow{justify-content:center}

/* ---------- footer ---------- */

footer{background:#050609;color:#5a6473;padding:46px 0 60px;font-size:.9rem;border-top:1px solid var(--line)}
footer a{color:var(--cyan)}
footer p{max-width:74ch}
footer .fine{font-size:.83rem;margin-top:1.4rem;color:#454e5c}

@media (max-width:760px){
  .tuner{grid-template-columns:1fr}
}
@media (max-width:640px){
  section{padding:56px 0}
  header.mast{padding-bottom:52px}
  header.mast .hero{padding-top:46px}
  .btn{width:100%;text-align:center}
  ol.steps li{padding-left:56px}
  ol.steps li::before{font-size:2.6rem}
}

/* Powered-by attribution in the brandbar, above the fold. */
.brandbar .poweredby{
  display:block;
  width:100%;
  font-family:"Space Mono",monospace;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey);
  margin-top:.45rem;
}
.brandbar .poweredby a{color:var(--cyan);text-decoration:none}
.brandbar .poweredby a:hover{text-decoration:underline}
/* ---------- brand logo ----------
   Replaces the .mark text. The supplied artwork is navy ink on a TRANSPARENT
   ground, which is not the same as artwork made for a dark page: measured against
   this masthead the wordmark scores 1.06:1. So it sits on a light card, the same
   treatment operationscast needs and for the same reason. Delete .brandlogo-card
   and this comment if a knockout variant of the artwork ever lands. */
.brandlogo-card{
  display:inline-block;flex:none;line-height:0;
  background:#fff;border-radius:8px;padding:7px 12px;
}
.brandlogo{
  height:clamp(44px,7.5vw,74px);width:auto;display:block;
}
@media(max-width:560px){ .brandlogo{height:40px} }