/* Sideline — shared stylesheet for every page.
   Deliberately single-theme: this is broadcast football graphics, so the dark
   ground is the identity rather than a dark-mode variant, and every colour is
   painted explicitly. Lives in one file so the four pages cannot drift apart. */

/* Sideline — deliberately single-theme. This is broadcast football graphics;
   the dark ground is the identity, so every colour is painted explicitly and
   nothing is left to the host's theme. */
:root{
  --bg:#0F1317; --surface:#171D23; --surface-2:#1D242B;
  --line:#242C34; --line-2:#3A4550;
  --text:#EDF1F4; --text-2:#C6CFD7; --muted:#93A0AB; --dim:#5C6873;
  --red:#EF0107; --red-dark:#9C0105;
  --gold:#FFB81C; --gold-dim:#C09A45; --gold-bg:#2A2113;
  --live:#35C46F; --live-bg:#14231A; --live-line:#1F3A2A;
  --bad:#E36868; --bad-bg:#351D1D;
  --measure:64ch;
  --skin:#D2AC90;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Barlow','Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  line-height:1.03; text-wrap:balance; margin:0;
}
h1{font-size:clamp(2.75rem,7vw,4.75rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.3rem; letter-spacing:.03em}
p{margin:0}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--red)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{width:min(1120px,100% - 2.5rem); margin-inline:auto}
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.lede{font-size:1.15rem; color:var(--text-2); max-width:var(--measure)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- header ---------- */
header{padding:1.5rem 0; border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:.65rem}
.mark{
  width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  display:grid; place-items:center;
}
.brand b{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1.45rem; letter-spacing:.09em; text-transform:uppercase;
}
nav{display:flex; gap:1.5rem; font-size:.9rem}
nav a{color:var(--muted)}
nav a:hover{color:var(--text)}
@media(max-width:720px){nav{display:none}}

/* ---------- hero ---------- */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero p.lede{margin-top:1.15rem}
.hero .eyebrow{margin-bottom:1rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; align-items:center}
.btn{
  display:inline-block; border:0; border-radius:12px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:1rem;
  padding:.95rem 1.6rem; background:var(--red); color:#fff;
}
.btn:hover{filter:brightness(1.1); color:#fff}
.btn-quiet{background:transparent; border:1px solid var(--line-2); color:var(--text-2)}
.btn-quiet:hover{border-color:var(--muted); color:var(--text); filter:none}
.btn-gold{background:var(--gold); color:#0F1317; border:0}
.btn-gold:hover{filter:brightness(1.08); color:#0F1317}
.buy-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem}
.buy-row .btn{flex:1 1 auto; justify-content:center; text-align:center}
.buy-row .btn[disabled]{opacity:.45; cursor:not-allowed; filter:none}
.buy-note{margin-top:.75rem; font-size:.85rem; color:var(--muted)}
.licence-box{margin-top:1.25rem; padding:1rem 1.15rem; border:1px solid var(--gold);
  border-radius:10px; background:rgba(255,184,28,.06)}
.licence-box h4{margin:0 0 .4rem; font-size:1rem; color:var(--gold)}
.licence-box p{margin:0 0 .7rem; font-size:.85rem; color:var(--text-2)}
.licence-key{display:block; overflow-x:auto; padding:.6rem .7rem; border-radius:6px;
  background:rgba(0,0,0,.35); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.95rem; letter-spacing:.06em; color:var(--text); user-select:all}
.note{font-size:.85rem; color:var(--dim)}

/* ---------- the panel, rendered for real ---------- */
.browser{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#0a0d10; box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.chrome{
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem .9rem; background:#12171c; border-bottom:1px solid var(--line);
}
.dot{width:10px; height:10px; border-radius:50%; background:var(--line-2)}
.addr{
  flex:1; margin-left:.5rem; height:22px; border-radius:6px;
  background:#0c1013; border:1px solid var(--line);
}
.stage{display:grid; grid-template-columns:1fr 300px; min-height:430px}
@media(max-width:520px){.stage{grid-template-columns:1fr} .stage .page{display:none}}
.page{padding:1.4rem; display:flex; flex-direction:column; gap:.7rem}
.skel{height:9px; border-radius:4px; background:#141a1f}
.skel.w70{width:70%} .skel.w45{width:45%} .skel.w85{width:85%} .skel.w30{width:30%}
.skel.tall{height:78px; margin-top:.4rem}

.panel{
  border-left:1px solid var(--line); background:var(--bg);
  padding:.9rem .85rem 1.1rem; display:flex; flex-direction:column; gap:.6rem;
  font-size:14px; line-height:1.45;
}
.panel-top{display:flex; align-items:center; justify-content:space-between}
.panel-top .brand b{font-size:1.05rem}
.panel-top .mark{width:22px; height:22px; border-radius:6px}
.livebar{
  display:flex; align-items:center; gap:.55rem;
  background:var(--live-bg); border:1px solid var(--live-line);
  border-radius:9px; padding:.5rem .7rem;
}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--live); flex:0 0 auto}
@media(prefers-reduced-motion:no-preference){
  .pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
}
.livebar .tag{font-size:.72rem; font-weight:600; color:var(--live); letter-spacing:.09em}
.livebar .score{flex:1; font-weight:600; font-size:.85rem}
.livebar .clock{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}

.pcard{background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden}
.stripe{height:3px; background:linear-gradient(90deg,var(--red),var(--gold))}
.phead{display:flex; align-items:center; gap:.7rem; padding:.85rem .8rem .6rem}
.face{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  border:2px solid var(--gold); display:grid; place-items:center;
  font-weight:600; font-size:.9rem; color:#fff;
}
.pname{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1.2rem; text-transform:uppercase; letter-spacing:.02em; line-height:1;
}
.pmeta{font-size:.72rem; color:var(--muted)}
.chip{
  font-size:.66rem; font-weight:600; border-radius:999px; padding:.15rem .55rem;
  background:var(--live-bg); color:var(--live); white-space:nowrap;
}
.gridcap{
  padding:0 .8rem .45rem; font-size:.62rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; padding:0 .8rem .75rem}
.stat{background:var(--surface-2); border-radius:9px; padding:.45rem 0; text-align:center}
.stat b{display:block; font-size:1rem; font-weight:600; font-variant-numeric:tabular-nums}
.stat span{font-size:.58rem; color:var(--muted); letter-spacing:.05em}
.stat.gold{background:var(--gold-bg)}
.stat.gold b{color:var(--gold)} .stat.gold span{color:var(--gold-dim)}
.events{display:flex; gap:.4rem; padding:.5rem .8rem; border-top:1px solid var(--line); flex-wrap:wrap}
.ev{
  display:inline-flex; align-items:center; gap:.3rem; border-radius:999px;
  padding:.2rem .55rem; font-size:.68rem; font-weight:600;
  background:var(--surface-2); color:var(--text-2);
}
.ev.goal{background:var(--live-bg); color:var(--live)}
@media(prefers-reduced-motion:no-preference){
  .ev.fresh{animation:pop .5s ease-out both}
  @keyframes pop{from{opacity:0; transform:translateY(4px) scale(.94)}to{opacity:1; transform:none}}
}
.rowcard{
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem;
}
.rowcard .face{width:34px; height:34px; border:0; font-size:.72rem; background:var(--surface-2); color:var(--text-2)}
.rowcard .n{font-weight:600; font-size:.82rem}
.rowcard .s{font-size:.7rem; color:var(--muted)}
.pts{text-align:right; flex:0 0 auto}
.pts b{display:block; color:var(--gold); font-weight:600; font-size:.9rem}
.pts span{font-size:.58rem; color:var(--muted)}

/* ---------- sections ---------- */
section{padding:clamp(3.5rem,7vw,6rem) 0}
.section-head{max-width:var(--measure); margin-bottom:2.5rem}
.section-head h2{margin-top:.75rem}
.section-head p{margin-top:1rem; color:var(--text-2)}

.pull{
  border-left:3px solid var(--red); padding:.4rem 0 .4rem 1.4rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  font-size:clamp(1.4rem,3vw,2rem); line-height:1.2; text-transform:uppercase;
  color:var(--text); max-width:22ch;
}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:1.4rem;
}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted); font-size:.95rem}
.card .k{
  font-size:.66rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-dim); display:block; margin-bottom:.7rem;
}

/* Numbered because setup genuinely is a sequence. */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; counter-reset:step}
.step{counter-increment:step; padding-top:1.2rem; border-top:2px solid var(--line-2)}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.6rem;
  color:var(--red); display:block; margin-bottom:.4rem;
}
.step h3{font-size:1.1rem; margin-bottom:.35rem}
.step p{color:var(--muted); font-size:.95rem}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem; align-items:start}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.75rem}
.plan.pro{border-color:var(--gold-dim); background:linear-gradient(180deg,rgba(255,184,28,.05),transparent 45%),var(--surface)}
.plan h3{font-size:1.5rem}
.price{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:3rem; line-height:1; margin:.75rem 0 .25rem;
}
.plan.pro .price{color:var(--gold)}
.price small{font-size:1rem; font-weight:600; color:var(--muted); letter-spacing:0}
.alt{font-size:.88rem; color:var(--muted)}
.feat{list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-direction:column; gap:.65rem}
.feat li{display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; color:var(--text-2)}
.feat svg{flex:0 0 auto; margin-top:.3rem}
.plan .badge{
  display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); background:var(--gold-bg);
  border-radius:999px; padding:.2rem .7rem; margin-bottom:.6rem;
}

/* ---------- data / facts ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.fact{background:var(--surface); padding:1.4rem}
.fact b{
  display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1.9rem; line-height:1; margin-bottom:.35rem;
}
.fact span{font-size:.9rem; color:var(--muted)}

/* ---------- privacy ---------- */
.policy{max-width:var(--measure)}
.policy h3{margin:2rem 0 .6rem; font-size:1.15rem; color:var(--text)}
.policy p, .policy li{color:var(--text-2); font-size:.98rem}
.policy p{margin-top:.75rem}
.policy ul{margin:.75rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.5rem}
code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.86em;
  background:var(--surface-2); border-radius:5px; padding:.1rem .35rem; color:var(--text);
}

footer{border-top:1px solid var(--line); padding:2.5rem 0 3.5rem; margin-top:2rem}
.foot{display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center}
.foot p{font-size:.85rem; color:var(--dim)}
.foot nav{display:flex; gap:1.25rem; font-size:.85rem}

/* ======================================================================
   Scroll-driven hero
   ----------------------------------------------------------------------
   A tall track scrolls past a sticky stage. Scroll position drives one
   custom property, --p (0 to 1), written once per frame by hero.js; every
   moving part below reads from it or from a value derived from it. Nothing
   here animates on a timer, so the sequence is fully reversible and lands
   exactly where the user's scroll leaves it.

   Only transform and opacity are animated — never layout properties — so
   the whole sequence stays on the compositor.
   ====================================================================== */

.scrolly { position: relative; padding: 0; }
/* The track's height IS the animation's duration. 300vh gives the six beats
   room to read without turning the page into a tunnel. */
.scrolly-track { height: 300vh; }
.scrolly-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* ---------- pitch geometry ----------
   The backdrop is the markings themselves, drawn at barely-there contrast.
   Each line is stroked on by scroll via dashoffset, so the pitch assembles
   under the product rather than sitting behind it as wallpaper. */
.pitchlines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--line-2); opacity: .5; pointer-events: none;
}
.pitchlines .draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: calc(var(--len, 1200) * (1 - var(--drawn, 0)));
}

/* ---------- showcase ---------- */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: min(1120px, 100% - 2.5rem);
}
.device { position: relative; }
.device .browser {
  /* Lifts and gains shadow as the panel arrives, so the product reads as
     stepping forward rather than merely appearing. */
  translate: 0 var(--lift, 18px);
  scale: var(--zoom, .97);
  box-shadow: 0 30px 70px rgba(0, 0, 0, calc(.25 + var(--open, 0) * .35));
  will-change: translate, scale;
}
/* The panel slides over the page rather than resizing it: animating a grid
   column is layout work on every frame, and the overlay reads truer to how a
   side panel actually opens. */
.device .stage { position: relative; grid-template-columns: 1fr; }
.device .page { transition: none; opacity: calc(1 - var(--open, 0) * .55); }
.device .panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 300px;
  translate: calc((1 - var(--open, 0)) * 105%) 0;
  box-shadow: -18px 0 40px rgba(0, 0, 0, .45);
  will-change: translate;
}
@media (max-width: 1040px) { .device .panel { width: 270px; } }

/* Panel contents arrive after the panel itself, staggered. */
.device .livebar, .device .pcard, .device .rowcard {
  opacity: var(--fill, 0);
  translate: 0 calc((1 - var(--fill, 0)) * 10px);
}
.device .ev { opacity: var(--evo, 0); scale: var(--evs, .9); }

/* ---------- beat copy ---------- */
.beats { position: relative; height: 100%; }
.beat {
  position: absolute; inset: 0;
  display: grid; align-content: center;
  opacity: var(--o, 0);
  translate: 0 var(--ty, 12px);
  /* Hidden beats must not swallow clicks meant for the visible one. */
  pointer-events: none;
  transition: opacity .28s ease, translate .28s ease;
}
.beat.on { pointer-events: auto; }
.beat-inner { max-width: 30rem; }
.beat h1, .beat h2 { margin-bottom: 1rem; }
.beat p { color: var(--text-2); font-size: 1.1rem; }
.beat .eyebrow { margin-bottom: .9rem; }

/* Progress rail — tells the reader this section has a length and they are
   moving through it, rather than leaving them unsure why scroll feels sticky. */
.scrolly-rail {
  position: absolute; left: 50%; translate: -50% 0; bottom: 1.6rem;
  display: flex; gap: .4rem; align-items: center;
}
.scrolly-rail i {
  display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--line-2); transition: background .25s ease;
}
.scrolly-rail i.on { background: var(--red); }

.scroll-hint {
  position: absolute; left: 50%; translate: -50% 0; bottom: 3.4rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); opacity: var(--hint, 1); transition: opacity .3s ease;
}

/* ----------------------------------------------------------------------
   Fallbacks.
   The sequence is an enhancement, never the only route to the content: if
   motion is unwelcome or the viewport is too small to stage it, the track
   collapses to its natural height and every beat is shown stacked and
   static. The copy is identical either way.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce), (max-width: 760px) {
  .scrolly-track { height: auto; }
  .scrolly-stage {
    position: static; height: auto; min-height: 0;
    padding: clamp(2.5rem, 8vw, 4rem) 0;
  }
  .beats { height: auto; display: grid; gap: clamp(2rem, 6vw, 3rem); }
  .beat {
    position: static; opacity: 1; translate: none; pointer-events: auto;
    transition: none;
  }
  .scrolly-rail, .scroll-hint { display: none; }
  .pitchlines { display: none; }
  /* Everything the sequence would have revealed is simply already there. */
  .showcase { grid-template-columns: 1fr; gap: 2.5rem; }
  .device .browser { translate: none; scale: none; }
  .device .stage { grid-template-columns: 1fr 300px; }
  .device .panel { position: static; width: auto; translate: none; box-shadow: none; }
  .device .page { opacity: 1; }
  .device .livebar, .device .pcard, .device .rowcard { opacity: 1; translate: none; }
  .device .ev { opacity: 1; scale: 1; }
}

/* ---------- policy pages ---------- */
.policy-page section { padding-top: 1.5rem; }
.policy-page .section-head { margin-bottom: 1.5rem; padding-top: clamp(2.5rem, 6vw, 4rem); }

/* The three policies are siblings, so each links to the other two rather than
   sending the reader back to the footer to change documents. */
.policy-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.policy-nav .pill {
  font-size: .82rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem 1rem;
}
.policy-nav .pill:hover { color: var(--text); border-color: var(--line-2); }
.policy-nav .pill.on {
  color: var(--gold); border-color: var(--gold-dim); background: var(--gold-bg);
}
nav a[aria-current="page"] { color: var(--text); }

/* ---------- 404 ---------- */
.notfound { padding: clamp(4rem, 12vw, 8rem) 0; text-align: center; }
.notfound .code {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(5rem, 18vw, 10rem); line-height: .9; color: var(--red);
}
.notfound p { color: var(--text-2); margin: 1rem auto 2rem; max-width: 36ch; }


/* ---------- account ---------- */
.authbar {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
  align-items: center; justify-content: space-between;
  margin-top: 2rem; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.authcopy { max-width: 46ch; }
.authcopy h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.authcopy p { color: var(--muted); font-size: .92rem; }
.authcard { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.authwho { display: flex; align-items: center; gap: .7rem; }
.authwho img { border-radius: 50%; }
.authwho b { display: block; font-size: .95rem; }
.authwho span { display: block; font-size: .8rem; color: var(--muted); }
.plan-tag {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: .3rem .8rem;
  background: var(--surface-2); color: var(--muted);
}
.plan-tag.is-premium { background: var(--gold-bg); color: var(--gold); }
.authcard button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--muted); text-decoration: underline;
}
.authcard button:hover { color: var(--text); }