.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
nav.top{position:sticky;top:0;z-index:100;background:rgba(7,9,13,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:20px;padding-top:15px;padding-bottom:15px}
nav.top .links{margin-left:auto;display:flex;gap:22px;align-items:center;font-size:14px;color:var(--mute)}
nav.top .links a:hover{color:var(--ink)}
@media(max-width:700px){nav.top .links a:not(.btn){display:none}}

.hero-s{padding:70px 0 60px;text-align:center;position:relative;overflow:hidden}
.hero-s::before{content:"";position:absolute;inset:-40% 0 auto;height:620px;background:radial-gradient(circle,rgba(255,90,31,.16),transparent 62%);pointer-events:none}
.hero-s .balls{display:flex;justify-content:center;gap:-20px;margin-bottom:26px;position:relative}
.hero-s .balls>div{margin:0 -14px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.55))}
.hero-s h1{font:800 clamp(34px,6vw,62px)/1.04 var(--mono);letter-spacing:-2.6px;margin-bottom:18px;position:relative}
.hero-s h1 em{font-style:normal;background:linear-gradient(120deg,var(--hot),#ffbe6b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-s .sub{color:var(--mute);font-size:clamp(15px,2vw,19px);max-width:56ch;margin:0 auto 30px;position:relative}
.hero-s .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
.hero-s .fine{margin-top:16px;color:var(--dim);font-size:12.5px;position:relative}

section.band{padding:62px 0;border-top:1px solid var(--line)}
section.band h2{font:800 clamp(25px,3.6vw,38px)/1.12 var(--mono);letter-spacing:-1.4px;margin-bottom:12px;text-align:center}
section.band .lede{color:var(--mute);text-align:center;max-width:58ch;margin:0 auto 38px}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:16px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:.16s}
.feat:hover{border-color:#31405a;transform:translateY(-3px)}
.feat .ico{font-size:26px;margin-bottom:13px;display:block}
.feat h3{font:800 17px/1.25 var(--mono);letter-spacing:-.5px;margin-bottom:8px;text-transform:none;color:var(--ink)}
.feat p{color:var(--mute);font-size:14px;line-height:1.62}

.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:14px}
.roster div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 10px;text-align:center;transition:.16s}
.roster div:hover{border-color:var(--hot);transform:translateY(-4px)}
.roster b{display:block;font:700 13px/1 var(--mono);margin-top:9px}
.roster small{color:var(--mute);font-size:11px}

.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:18px;align-items:start}
.price{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;position:relative}
.price.best{border-color:var(--hot);box-shadow:0 20px 60px rgba(255,90,31,.16)}
.price.best::before{content:"MOST POPULAR";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--hot);color:#0a0a0a;font:800 9px/1 var(--mono);letter-spacing:1.3px;padding:6px 13px;border-radius:999px}
.price h3{font:800 17px/1 var(--mono);color:var(--ink);text-transform:none;letter-spacing:-.3px;margin-bottom:6px}
.price .amt{font:800 42px/1 var(--mono);letter-spacing:-2.2px;margin:14px 0 4px}
.price .amt small{font:600 14px/1 var(--sans);color:var(--mute);letter-spacing:0}
.price .why{color:var(--mute);font-size:13.5px;margin-bottom:20px;min-height:40px}
.price ul{list-style:none;margin-bottom:22px}
.price li{padding:8px 0 8px 25px;position:relative;font-size:14px;border-bottom:1px solid #141c28}
.price li:last-child{border-bottom:0}
.price li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.price li.off{color:var(--dim)}
.price li.off::before{content:"\2212";color:var(--dim)}

.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:17px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;align-items:center}
.faq summary::after{content:"+";margin-left:auto;color:var(--hot);font:800 20px/1 var(--mono)}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--mute);margin-top:12px;line-height:1.68;font-size:14px}

footer.site{border-top:1px solid var(--line);padding:38px 0;color:var(--dim);font-size:13px}
footer.site .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer.site .links{margin-left:auto;display:flex;gap:18px}
footer.site a:hover{color:var(--ink)}

/* login + legal */
.auth{min-height:100vh;display:grid;place-content:center;padding:24px}
.authbox{width:min(400px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px;text-align:center}
.authbox h1{font:800 24px/1.15 var(--mono);letter-spacing:-1px;margin:16px 0 6px}
.authbox p{color:var(--mute);font-size:14px;margin-bottom:24px}
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font:700 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.field input{width:100%}
.note{margin-top:18px;padding:12px;border-radius:10px;background:rgba(46,168,255,.09);border:1px solid rgba(46,168,255,.28);color:var(--cool);font-size:12.5px;line-height:1.55}

.legal{max-width:780px;margin:0 auto;padding:44px 22px 80px}
.legal h1{font:800 32px/1.1 var(--mono);letter-spacing:-1.4px;margin-bottom:8px}
.legal .upd{color:var(--dim);font-size:13px;margin-bottom:34px}
.legal h2{font:800 18px/1.3 var(--mono);letter-spacing:-.5px;margin:32px 0 10px;color:var(--hot)}
.legal p,.legal li{color:var(--mute);line-height:1.75;margin-bottom:11px}
.legal ul{padding-left:22px}
.legal .tabs{display:flex;gap:9px;margin-bottom:30px;flex-wrap:wrap}
.legal .tabs button{padding:9px 16px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font-size:13px;font-weight:600}
.legal .tabs button.on{background:rgba(255,90,31,.14);border-color:var(--hot);color:var(--hot)}
.legal section{display:none}.legal section.on{display:block}

/* ------------------------------------------------------- band rhythm
   One accent per band, cycling hot, cool, grape and good, so scrolling the
   page reads as a sequence instead of the same orange twenty times. */
section.band{position:relative;--accent:var(--hot)}
section.band:nth-of-type(4n+2){--accent:var(--cool)}
section.band:nth-of-type(4n+3){--accent:var(--grape)}
section.band:nth-of-type(4n){--accent:var(--good)}
section.band::before{content:"";position:absolute;top:-1px;left:50%;width:132px;height:2px;margin-left:-66px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
section.band .eyebrow{display:block;width:max-content;max-width:100%;margin:0 auto 14px;background:transparent;border:1px solid var(--accent);color:var(--accent);text-align:center}
section.band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.todo.center{text-align:center;margin-top:16px}
.contact-line{text-align:center;margin-top:16px;color:var(--mute);font-size:14px}
.contact-line a{color:var(--hot);font-weight:700}

/* -------------------------------------------- family, team and league */
.pricing-split{margin:46px 0 26px;text-align:center}
.pricing-split h3{font:800 clamp(20px,2.6vw,28px)/1.18 var(--mono);letter-spacing:-1px;color:var(--ink);margin-bottom:10px}
.pricing-split p{color:var(--mute);max-width:58ch;margin:0 auto}
.price .seats{display:block;color:var(--mute);font-size:13px;line-height:1.5;margin:9px 0 15px}
.group-note{max-width:62ch;margin:26px auto 0;text-align:center;color:var(--mute);font-size:14.5px;line-height:1.65}
.group-note b{color:var(--ink)}

/* Four account facts sit better as a square than as three and a lonely one. */
#accounts .why{grid-template-columns:repeat(2,1fr)}
@media(max-width:620px){#accounts .why{grid-template-columns:1fr}}

/* --------------------------------------------------- photo placeholders
   The four photo slots are art direction, not a missing asset: each one
   carries the frame we intend to shoot, held like a contact sheet until the
   shoot happens. Nothing here is stock and nothing here is generated. */
.use .ph{position:relative}

.use .ph>*{position:relative}
.use .ph span{filter:drop-shadow(0 8px 14px rgba(15,21,34,.35))}
.use .ph em{background:rgba(11,15,22,.3);border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:5px 10px}

/* --------------------------------------------------- nav and narrow screens
   Everything above has to survive a 360px phone. The nav holds eleven section
   links plus two buttons, which is more than a 1140 wrap ever fitted, so the
   links stopped wrapping onto three lines and step aside in order instead:
   a wider bar carries the full set, then the five secondary sections go, then
   the log in button, then the links altogether. */
nav.top .links a{white-space:nowrap}
/* Two more sections (Game mode, Record) means the full set no longer fits the
   1380 bar it used to: measured at 1440 it ran 159px past the edge. The
   breakpoint that shows every link moves up with the link count. */
@media(min-width:1620px){nav.top .wrap{max-width:1580px}nav.top .links{gap:18px}}
@media(max-width:1619px){nav.top .links a.sec{display:none}}
@media(max-width:1100px){nav.top .links{gap:15px;font-size:13.5px}}
@media(max-width:980px){nav.top .links a.btn:not(.primary){display:none}}
@media(max-width:880px){nav.top .links a:not(.btn){display:none}}
@media(max-width:560px){
  nav.top .links{gap:12px}
  section.band{padding:48px 0}
  .pricing-split{margin:36px 0 22px}
}
@media(max-width:420px){
  .wrap{padding:0 16px}
  nav.top .wrap{gap:12px}
  nav.top .mark{font-size:17px;gap:7px}
  nav.top .mark .mark-logo{width:26px;height:26px}
  nav.top .links{gap:10px}
  nav.top .links a.btn{padding:11px 14px;font-size:14px}
  nav.top .theme-sw span{display:none}
  .price{padding:22px 20px}
  .price .amt{font:800 36px/1 var(--mono);letter-spacing:-1.8px}
  .prices{gap:14px}
}

/* =========================================== measured against logged
   The two column ledger IS the argument of the game band: the camera
   measures how a body moves, a person logs what the ball did. It has to read
   as two separate columns on a laptop and as two stacked blocks on a phone,
   and never as one merged list, because merging them is exactly the claim
   this product refuses to make. Green is measured, blue is logged, and that
   pairing repeats on the stat card below it and inside the app. */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:16px}
.led{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;border-top:3px solid var(--line)}
.led.meas{border-top-color:var(--good)}
.led.logg{border-top-color:var(--cool)}
.led p{color:var(--mute);font-size:14px;line-height:1.6;margin:12px 0 14px}
.led ul{list-style:none;display:grid;gap:9px}
.led li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.led li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%}
.led.meas li::before{background:var(--good)}
.led.logg li::before{background:var(--cool)}

.srcpill{display:inline-block;font:900 9.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
/* The colour is carried by the dot and the border, never by the text: --good
   and --cool as TEXT on a pale day-theme panel sit near 2.5:1, which is too
   thin for a 9.5px label. Ink on panel2 passes in both themes. */
.srcpill::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:-1px;background:var(--line)}
.srcpill.meas{border-color:var(--good)}
.srcpill.meas::before{background:var(--good)}
.srcpill.logg{border-color:var(--cool)}
.srcpill.logg::before{background:var(--cool)}

/* ------------------------------------------------------- the run card
   The gamified card, with the source of every number stamped on the column
   it sits in. Two columns that never merge, cells that stay legible at 360px. */
.statcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;margin-top:26px}
.sc-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.sc-head b{font:900 20px/1.15 var(--mono);letter-spacing:-.7px;color:var(--ink)}
.sc-head span{color:var(--mute);font-size:13px}
.sc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:9px;margin-top:13px}
.sc-cell{background:var(--panel2);border:1px solid var(--line);border-top:2px solid var(--line);border-radius:12px;padding:10px 7px 11px;text-align:center}
.sc-cell b{display:block;font:900 19px/1 var(--mono);letter-spacing:-.7px;color:var(--ink)}
/* Same reason as .srcpill: the source colour is the top edge, the number is ink. */
.sc-cell.m{border-top-color:var(--good)}
.sc-cell.l{border-top-color:var(--cool)}
.sc-cell small{display:block;font:800 8.5px/1.25 var(--mono);letter-spacing:.9px;text-transform:uppercase;color:var(--mute);margin-top:7px}
.sc-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--mute);font-size:13px;line-height:1.6}

/* ---------------------------------------------- grouped comparison rows
   The plan table grew past thirty rows, so it gets headers. They are a row,
   not a caption, so the table stays one scrollable block on a phone. */
.cmp tr.grp td{background:var(--panel2);font:900 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--mute);text-align:left;padding:12px 16px}
.cmp tbody tr.grp:hover td{background:var(--panel2)}

@media(max-width:560px){
  .led{padding:18px}
  .statcard{padding:18px}
  .sc-grid{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:7px}
  .sc-cell b{font-size:17px}
}