/* Game Cast — the public site.
One stylesheet for every page; there is no framework and no build step.
The look is the app's look, not a second brand: the same dark ground, the
same green, the same one-radius-scale discipline. What the site adds is the
scoreboard voice from the Game Cast documents — Barlow Condensed set large
and uppercase for anything that reads as a number or a headline, Barlow for
prose. Numbers are tabular everywhere, because a price column and a line
score both look broken when they are not.
House rules that are decisions, not taste:
- No emoji, anywhere (Austin, 2026-09-24). Marks are geometric or a short
letter code set in the condensed face.
- Dark only, painted explicitly. The app is a single committed theme and a
site that flipped to a light palette under prefers-color-scheme would not
look like the same product on the same phone.
- Home team left, away right, wherever a score appears. Same as every
surface in the app.
*/
@import url('/fonts/fonts.css');
:root{
/* Ground and ink: the app's --bg/--ink, with the documents' panel steps. */
--bg:#07090D; --bg2:#0B0F14; --panel:#131A22; --panel2:#0F151C;
--ink:#F5F7FA; --dim:#9AA6B2; --faint:rgba(245,247,250,.45);
--line:#26313C; --line2:rgba(255,255,255,.10);
/* The three signal colours, unchanged from the app. */
--go:#34D65C; --go-deep:#1C9A47; --go-ink:#04200D; --go-bg:rgba(52,214,92,.11);
--amber:#F5B83D; --amber-bg:rgba(245,184,61,.10);
--live:#FF453A;
--glass:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.03) 55%,rgba(255,255,255,.05));
--sheen:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.25);
--lift:0 18px 44px rgba(0,0,0,.5);
--display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
--ui:"Barlow","Helvetica Neue",Arial,sans-serif;
/* One radius scale, like the app's --r-sm/md/lg. */
--r-sm:10px; --r-md:14px; --r-lg:20px;
--pad:clamp(18px,4vw,28px);
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--ui);
font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
a{color:var(--go);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--go);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--go);color:var(--go-ink);
padding:10px 14px;border-radius:var(--r-sm);font-weight:700}
/* ---------- type ---------- */
h1,h2,h3,.dspl{font-family:var(--display);font-weight:800;letter-spacing:-.005em;
line-height:.94;margin:0;text-wrap:balance}
h1{font-size:clamp(46px,9vw,104px);text-transform:uppercase;font-weight:900}
h2{font-size:clamp(32px,5.2vw,58px);text-transform:uppercase}
h3{font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;font-weight:700}
h4{font:700 17px/1.3 var(--ui);margin:0}
p{margin:0 0 15px;max-width:66ch}
.lede{font-size:clamp(18px,2.1vw,22px);line-height:1.45;color:var(--ink);max-width:52ch}
.dim{color:var(--dim)}
.small{font-size:14.5px}
.tiny{font-size:12.5px;color:var(--dim)}
.eyebrow{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.18em;
text-transform:uppercase;color:var(--go);margin:0 0 10px;display:block}
.eyebrow.amber{color:var(--amber)}
.hl{color:var(--go)}
strong,b{font-weight:600}
ul.ticks{list-style:none;padding:0;margin:0 0 16px;max-width:60ch}
ul.ticks li{position:relative;padding-left:26px;margin-bottom:9px}
/* The tick is a geometric mark drawn in CSS, not a character: no emoji, and
nothing that depends on a font shipping the glyph. */
ul.ticks li::before{content:"";position:absolute;left:4px;top:.52em;width:9px;height:9px;
border-radius:2px;background:var(--go);transform:rotate(45deg)}
ul.ticks li.no::before{background:var(--line);transform:none;border-radius:50%}
/* ---------- shell ---------- */
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,28px)}
.wrap.narrow{max-width:820px}
section{padding-block:clamp(44px,7vw,86px)}
section.tight{padding-block:clamp(30px,4vw,48px)}
/* A hero already carries its own bottom padding; a tight section straight
after one left a dead band the height of a phone screen. */
.hero + section.tight, .hero + section > .wrap:first-child{padding-block-start:0}
.rule{border:0;border-top:1px solid var(--line);margin:0}
/* ---------- nav ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(7,9,13,.86);
backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:center;gap:10px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;
font-size:23px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px;display:block}
nav.links{display:none;margin-left:auto;align-items:center;gap:4px}
nav.links a{color:var(--dim);font-weight:500;font-size:15.5px;padding:9px 11px;border-radius:var(--r-sm)}
nav.links a:hover{color:var(--ink);background:rgba(255,255,255,.05);text-decoration:none}
nav.links a[aria-current]{color:var(--ink);background:rgba(255,255,255,.07)}
.navcta{display:flex;align-items:center;gap:8px;margin-left:auto}
.cartlink{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;
border:1px solid var(--line);border-radius:999px;color:var(--ink);font:600 14px var(--ui)}
.cartlink:hover{border-color:var(--go);text-decoration:none}
.cartlink .n{min-width:20px;height:20px;border-radius:999px;background:var(--go);color:var(--go-ink);
font:800 12px/20px var(--display);text-align:center;padding:0 5px}
/* Below 560px the bar holds the brand, the cart and the burger and nothing
else; "Open the app" is the first item in the drawer. Four things did not
fit and the wordmark wrapped onto two lines. */
@media(max-width:559px){ .navcta .btn{display:none} .brand{font-size:20px} .cartlink{padding:8px 11px} }
.burger{margin-left:6px;width:42px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);
background:rgba(255,255,255,.04);display:grid;place-items:center;gap:4px;cursor:pointer}
.burger i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px}
.drawer{display:none;border-top:1px solid var(--line);padding-block:8px 14px}
.drawer.on{display:block}
.drawer a{display:block;padding:11px 2px;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line2)}
.drawer a:last-child{border-bottom:0}
@media(min-width:1000px){ nav.links{display:flex} .burger{display:none} .drawer{display:none!important} }
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font:700 16px/1 var(--ui);padding:15px 22px;border-radius:999px;border:1px solid transparent;
cursor:pointer;text-align:center;transition:transform .12s ease,filter .12s ease;
/* A button in a tight flex row was allowed to wrap, and "Save" came out as
four letters stacked down the page. A button's label is one line. */
white-space:nowrap;flex-shrink:0}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.go{background:var(--go);color:var(--go-ink);box-shadow:0 10px 26px rgba(52,214,92,.22)}
.btn.ghost{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--go)}
.btn.wide{width:100%}
.btn.sm{font-size:14.5px;padding:11px 16px}
.btn[disabled],.btn.off{opacity:.55;pointer-events:none}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 0}
/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font:700 11.5px/1 var(--ui);
letter-spacing:.09em;text-transform:uppercase;padding:7px 11px;border-radius:999px;
border:1px solid var(--line);color:var(--dim);background:rgba(255,255,255,.04);white-space:nowrap}
.chip.go{color:var(--go);border-color:rgba(52,214,92,.45);background:var(--go-bg)}
.chip.amber{color:var(--amber);border-color:rgba(245,184,61,.42);background:var(--amber-bg)}
.chip.live{color:#fff;border-color:transparent;background:var(--live)}
.chip.live .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.chip.live .dot{animation:none}}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
/* ---------- panels and grids ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad)}
.panel.flat{background:var(--panel2)}
.panel.glass{background:var(--glass);box-shadow:var(--sheen)}
.panel.go{border-color:var(--go-deep);background:linear-gradient(180deg,rgba(52,214,92,.09),transparent 60%),var(--panel)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media(min-width:720px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
@media(min-width:520px) and (max-width:719px){ .g3{grid-template-columns:1fr 1fr} }
.split{display:grid;gap:clamp(22px,4vw,46px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){ .split{grid-template-columns:1.05fr .95fr} .split.rev>*:first-child{order:2} }
/* A feature tile: number or code up top in the display face, then the claim. */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
padding:20px 18px 18px;display:flex;flex-direction:column;gap:7px}
.tile .k{font-family:var(--display);font-weight:900;font-size:46px;line-height:.86;color:var(--go)}
.tile .k em{display:block;font:700 10.5px/1.3 var(--ui);font-style:normal;letter-spacing:.1em;
text-transform:uppercase;color:var(--dim);margin-top:8px;max-width:16ch}
.tile h4{font-family:var(--display);font-size:24px;font-weight:700;text-transform:uppercase;line-height:1}
.tile p{margin:0;color:var(--dim);font-size:15px;line-height:1.45;max-width:none}
/* ---------- the scoreboard widget (hero) ---------- */
.board{background:linear-gradient(180deg,#0E141B,#0A0F15);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift)}
.board .head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);
background:rgba(255,255,255,.03)}
.board .head .who{font:700 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.board .teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:16px 14px}
.board .side{display:flex;align-items:center;gap:11px;min-width:0}
.board .side.away{flex-direction:row-reverse;text-align:right}
.board .logo{width:44px;height:44px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
font:800 19px var(--display);color:#fff;box-shadow:var(--sheen)}
.board .nm{font-family:var(--display);font-weight:700;font-size:21px;line-height:1;text-transform:uppercase;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .nm em{display:block;font:600 10.5px/1.4 var(--ui);font-style:normal;letter-spacing:.11em;color:var(--faint)}
.board .runs{font-family:var(--display);font-weight:900;font-size:clamp(40px,8vw,58px);line-height:.85;
display:inline-flex;align-items:center;gap:6px}
/* The separator is a centred bar, not a dash character: an en dash sits on the
baseline of a 58px numeral and reads as an underscore. */
.board .runs .sep{width:14px;height:4px;border-radius:2px;background:var(--line);display:block}
.board .mid{display:flex;flex-direction:column;align-items:center;gap:6px;padding-inline:4px}
.board .status{font:700 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--live)}
.board .inn{font-family:var(--display);font-weight:700;font-size:15px;color:var(--dim);white-space:nowrap}
.board .count{display:flex;flex-wrap:wrap;gap:14px;padding:11px 14px;border-top:1px solid var(--line);
font:600 12px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);align-items:center}
.board .count b{color:var(--ink);font-weight:700}
.pips{display:inline-flex;gap:4px;vertical-align:middle;margin-left:6px}
.pips i{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);display:block}
.pips i.on{background:var(--go);border-color:var(--go)}
.pips i.out.on{background:var(--live);border-color:var(--live)}
.board .foot{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);
background:rgba(52,214,92,.06);flex-wrap:wrap}
/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2)}
table{border-collapse:collapse;width:100%;font:15px var(--ui)}
/* Only a table inside .tablewrap gets a minimum width, because that wrapper is
what scrolls. Putting the floor on every table made the spec table on a
product page 520px wide inside a 390px grid column, and the whole page ran
off the right edge of a phone. */
.tablewrap table{min-width:520px}
th{text-align:left;font:700 11.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
padding:12px 14px;border-bottom:2px solid var(--line);background:rgba(0,0,0,.25);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.c,th.c{text-align:center}
td.n,th.n{text-align:right;white-space:nowrap}
td.y{color:var(--go);font-weight:700}
td.no{color:var(--dim)}
td.part{color:var(--amber);font-weight:600}
.tablewrap .cap{padding:10px 14px;color:var(--dim);font-size:13px;border-top:1px solid var(--line)}
/* ---------- pricing tiers ---------- */
.tiers{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){ .tiers{grid-template-columns:repeat(3,1fr);align-items:start} }
.tier{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad);
display:flex;flex-direction:column;gap:12px;position:relative}
.tier.hi{border-color:var(--go);box-shadow:0 0 0 1px rgba(52,214,92,.35),var(--lift)}
.tier .flag{position:absolute;top:-11px;left:var(--pad);font:800 10.5px/1 var(--ui);letter-spacing:.12em;
text-transform:uppercase;background:var(--go);color:var(--go-ink);padding:7px 11px;border-radius:999px}
.tier h3{font-size:30px}
.tier .who{font:600 12px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--go)}
.tier .price{font-family:var(--display);font-weight:900;font-size:52px;line-height:.9;display:flex;
align-items:baseline;gap:7px;flex-wrap:wrap}
.tier .price small{font:500 14px var(--ui);color:var(--dim);letter-spacing:0}
.tier ul.ticks{margin-bottom:0;font-size:15.5px}
.tier .btn{margin-top:auto}
/* ---------- products ---------- */
.prods{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(min-width:780px){ .prods{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1060px){ .prods{grid-template-columns:repeat(4,1fr)} }
.prod{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
display:flex;flex-direction:column;color:var(--ink)}
.prod:hover{border-color:var(--go-deep);text-decoration:none}
.shot{aspect-ratio:4/3;background:radial-gradient(120% 90% at 50% 0%,#18212B,#0C1117);
display:grid;place-items:center;padding:12px;border-bottom:1px solid var(--line);position:relative}
.shot svg{width:100%;height:100%;display:block}
.shot .flag{position:absolute;top:10px;left:10px}
.prod .body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .nm{font-family:var(--display);font-weight:700;font-size:21px;text-transform:uppercase;line-height:1.02}
.prod .tag{color:var(--dim);font-size:14px;line-height:1.4;flex:1}
.prod .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px}
.price{font-family:var(--display);font-weight:800;font-size:27px;line-height:1}
.price s{font-size:17px;color:var(--faint);font-weight:600;margin-left:7px}
.stock{font:600 11.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--go)}
.stock.low{color:var(--amber)}
.stock.out{color:var(--dim)}
/* product detail */
.pdp{display:grid;gap:clamp(20px,4vw,42px);grid-template-columns:1fr}
@media(min-width:900px){ .pdp{grid-template-columns:1.1fr .9fr;align-items:start} }
.pdp .gallery{background:radial-gradient(120% 90% at 50% 0%,#18212B,#0B1016);border:1px solid var(--line);
border-radius:var(--r-lg);padding:clamp(16px,3vw,30px)}
.pdp .gallery svg{width:100%;height:auto;display:block}
.swatches{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 0}
.swatch{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
padding:8px 13px;font:600 14px var(--ui);cursor:pointer;background:rgba(255,255,255,.04);color:var(--ink)}
.swatch i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.swatch.on{border-color:var(--go);background:var(--go-bg);color:var(--ink)}
.spec{width:100%;min-width:0;font-size:15px;table-layout:fixed}
.spec td{word-break:break-word}
.spec th{width:38%;font:600 13px var(--ui);letter-spacing:.04em;text-transform:none;color:var(--dim);
background:none;border-bottom:1px solid var(--line2);padding:10px 0;white-space:normal}
.spec td{border-bottom:1px solid var(--line2);padding:10px 0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:40px;height:44px;background:rgba(255,255,255,.04);border:0;color:var(--ink);
font:700 19px var(--ui);cursor:pointer}
/* Wins over the global input[type=number]{width:100%}, which stretched the
stepper across the whole column and put the two buttons at the far edges. */
.qty input[type=number]{width:62px;flex:0 0 auto;height:44px;background:transparent;border:0;border-radius:0;
color:var(--ink);text-align:center;font:700 16px var(--ui);padding:0;-moz-appearance:textfield}
.qty input[type=number]:focus{box-shadow:none}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* ---------- cart ---------- */
.lines{display:flex;flex-direction:column;gap:12px}
.line{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;
background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
.line .mini{width:76px;height:60px;border-radius:var(--r-sm);background:#0C1117;display:grid;place-items:center;padding:6px}
.line .mini svg{width:100%;height:100%}
/* Rendered product photographs (tools/shots.sh). The render carries its own
margin inside the frame, so the frame's padding comes off when it holds one;
a picture with padding round it reads as a sticker on a card. */
.shot.pic{padding:0}
.shot.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pdp .gallery.pic{padding:0;overflow:hidden}
.pdp .gallery.pic img{width:100%;height:auto;display:block}
.line .mini.pic{padding:0;overflow:hidden}
.line .mini.pic img{width:100%;height:100%;object-fit:cover;display:block}
.line .nm{font-weight:600;font-size:16px}
.line .var{color:var(--dim);font-size:13.5px}
.totals{display:flex;flex-direction:column;gap:10px}
.totals .r{display:flex;justify-content:space-between;gap:12px;font-size:15.5px}
.totals .r.big{font-family:var(--display);font-size:28px;font-weight:800;border-top:1px solid var(--line);
padding-top:12px;text-transform:uppercase;align-items:baseline}
/* ---------- forms ---------- */
form.stack{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font:600 13px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
width:100%;background:#0C1117;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);
font:400 16px var(--ui);padding:13px 14px;appearance:none}
textarea{min-height:110px;resize:vertical}
select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--go);box-shadow:0 0 0 3px var(--go-bg)}
.two{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){ .two{grid-template-columns:1fr 1fr} }
.checks{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:620px){ .checks{grid-template-columns:1fr 1fr} }
.check{display:flex;gap:11px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);
border-radius:var(--r-sm);padding:13px;cursor:pointer;font-size:15px}
.check input{margin:2px 0 0;width:19px;height:19px;accent-color:var(--go);flex:0 0 auto}
.check.on{border-color:var(--go-deep);background:var(--go-bg)}
.check b{display:block;font-weight:600}
.check span{color:var(--dim);font-size:13.5px}
.hp{position:absolute;left:-9999px}
.note{background:var(--amber-bg);border-left:3px solid var(--amber);border-radius:0 var(--r-sm) var(--r-sm) 0;
padding:12px 15px;font-size:15px;margin:0 0 16px}
.note.go{background:var(--go-bg);border-left-color:var(--go)}
.err{background:rgba(255,69,58,.12);border-left:3px solid var(--live);border-radius:0 var(--r-sm) var(--r-sm) 0;
padding:12px 15px;font-size:15px;margin:0 0 16px}
/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(34px,6vw,70px) clamp(30px,5vw,54px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-10% -20% auto;height:70%;pointer-events:none;
background:radial-gradient(60% 100% at 50% 0%,rgba(52,214,92,.16),transparent 70%)}
/* The chain-link wash: the fence a phone gets clamped to, drawn as a pattern so
it costs one gradient pair rather than an image request. */
.fence{position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 13px),
repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 13px);
mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%)}
.hero>*{position:relative}
.kicker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);background:var(--bg2);padding-block:40px 30px;margin-top:20px}
footer.site .cols{display:grid;gap:26px;grid-template-columns:1fr 1fr}
@media(min-width:860px){ footer.site .cols{grid-template-columns:1.4fr 1fr 1fr 1fr} }
footer.site h5{font:700 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
footer.site a{display:block;color:var(--ink);font-size:15px;padding:5px 0;font-weight:500}
footer.site a:hover{color:var(--go)}
footer.site .legal{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;color:var(--dim);
font-size:13px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
footer.site .legal a{display:inline;color:var(--dim);font-size:13px;padding:0}
.addr{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em}
/* ---------- misc ---------- */
.stats{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:800px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:.9;color:var(--ink)}
.stat span{display:block;font:600 11.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.stat.go b{color:var(--go)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;padding:16px 2px;font:600 17px var(--ui);list-style:none;display:flex;
justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--dim);
border-bottom:2px solid var(--dim);transform:rotate(45deg);flex:0 0 auto;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 2px 18px;color:var(--dim);max-width:70ch}
.faq .a p{color:var(--dim)}
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
/* minmax(0,1fr), not 1fr. A bare 1fr track has an AUTO minimum, so it can
never be narrower than its item's min-content -- and a step that carries a
phone contains an ![]()
with a width attribute of 640, whose percentage CSS
width counts as auto for intrinsic sizing. Three tracks went to 1021px each
inside a 1104px row and the whole document scrolled sideways at 3179px. */
/* Three across is a FLEX row, not three grid tracks, and the reason is height.
The cards have to be the same height -- "Everyone else" carries a paragraph a
line shorter than the other two and came out 719px against their 743px, which
reads as a mistake -- and a flex row stretches its items to the tallest for
free. Grid will not do it here: align-items:stretch gives the cards a
definite height, the ![]()
starts contributing its intrinsic
width again exactly as the note above describes, and the three cards went to
990px each inside a 1104px row with the document scrolling sideways at
1903px. Both ways measured in a real browser, 2026-09-30.
flex:1 1 0 with min-width:0 is what keeps the three equal AND keeps the image
out of the width calculation -- the same job minmax(0,1fr) was doing. */
@media(min-width:760px){
.steps{display:flex}
.steps > .step{flex:1 1 0;min-width:0}
}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 18px}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:34px;height:34px;
border-radius:9px;background:var(--go);color:var(--go-ink);font:800 19px var(--display);margin-bottom:12px}
.step h4{font-family:var(--display);font-size:22px;text-transform:uppercase;font-weight:700;margin-bottom:5px}
.step p{margin:0;color:var(--dim);font-size:15px}
.band{background:var(--panel2);border-block:1px solid var(--line)}
.band.go{background:linear-gradient(180deg,rgba(52,214,92,.10),transparent),var(--panel2)}
.cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media(min-width:860px){ .cta{flex-direction:row;align-items:center;justify-content:space-between} }
.logostrip{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;color:var(--faint);
font:700 13px var(--ui);letter-spacing:.14em;text-transform:uppercase}
/* Phone: the scoreboard is the one component where the numbers and the names
compete for the same row, and the names lose. Give them the space back. */
@media(max-width:430px){
.board .runs{font-size:38px}
.board .nm{font-size:18px}
.board .logo{width:38px;height:38px;font-size:16px;border-radius:9px}
.board .teams{gap:7px;padding:14px 12px}
.board .count{gap:10px;font-size:11.5px}
}
/* ---------- a screen of the app, in a phone ----------
Every picture on /features is a real capture of the app at 390x844, so the
frame is drawn at that ratio and the image fills it. The bezel is CSS and
not part of the picture: a bezel baked into the file cannot be re-shot
without redrawing it, and these get re-shot every time the app moves. */
.phone{position:relative;width:min(300px,78vw);margin-inline:auto;
border-radius:38px;padding:9px;
background:linear-gradient(170deg,#2B3642,#121820 58%,#1F2833);
box-shadow:var(--lift),inset 0 1px 0 rgba(255,255,255,.14)}
.phone img{display:block;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top center;
border-radius:30px;background:var(--bg2)}
/* No drawn notch. The captures have no status bar of their own, so a notch
sits on top of the app's real top row -- it covered the count bar on the
scoring screen. The bezel alone reads as a phone. */
/* a detail crop, shown flat: two pictures joined, not one screen */
.detail{width:min(430px,100%);margin-inline:auto;border-radius:var(--r-md);overflow:hidden;
border:1px solid var(--line);box-shadow:var(--lift)}
.detail img{display:block;width:100%;height:auto}
.shotcap{margin:15px auto 0;max-width:33ch;text-align:center;font-size:13.5px;line-height:1.45;color:var(--dim)}
.split.shots{align-items:center}
@media(min-width:900px){
.split.shots{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.split.shots.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
/* An "in build" block on /features has no capture, because there is nothing
yet to capture, so the phone frame holds a plain screen with the chip on it:
the same width and aspect as a real shot, so the page keeps its rhythm, and
four grey bars that read as a wireframe rather than as the feature. It is
replaced by a real capture the day the feature runs. */
.phone.soon .screen{aspect-ratio:390/844;border-radius:30px;border:1px solid var(--line);
background:linear-gradient(180deg,#121A23,#0B1017);
display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;
padding:28px 22px;text-align:center}
.phone.soon .screen b{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;
text-transform:uppercase;color:var(--ink)}
.phone.soon .screen p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.45;max-width:22ch}
.phone.soon .screen .fx{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:6px}
.phone.soon .screen .fx i{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.06)}
.phone.soon .screen .fx i:nth-child(2){width:72%}
.phone.soon .screen .fx i:nth-child(3){width:88%}
.phone.soon .screen .fx i:nth-child(4){width:56%}
#inbuild{scroll-margin-top:84px}
/* ---------- the landing page's pictures ----------
The same real captures as /features, in the same CSS frame.
The hero carries ONE screen, the fan's page, drawn larger than a /features
shot because it is the first thing a stranger sees and it is standing in for
the whole product. Every other capture on this page belongs to a claim
further down; nothing is shown twice, because the second showing of a
picture is where a marketing page starts to feel like padding. */
.stage{display:flex;justify-content:center}
.stage .phone{width:min(330px,74vw)}
@media(min-width:900px){ .stage .phone{width:min(342px,30vw)} }
/* ---------- a picture that has to fit one screenful ----------
`.stage.fit` caps the frame by the viewport HEIGHT as well as by its width,
so the section it sits in is readable without scrolling through it. At a
flat 342px the hero ran 906px tall (off a 1366x768 laptop by 138px) and "The
record" ran 965px (off the same laptop by 197px).
--gutter is the ONLY knob: everything that is on screen BESIDE the picture,
plus about 20px of slack for font loading and rounding.
hero 63 nav + 124 section padding + 20 slack = 225
record 172 section padding + 74 caption and its margin + 20 = 284
The rest is arithmetic and is the same for both. The frame is border-box, so
the picture is the width less 18px of bezel; a 390x844 capture is 0.462 as
wide as it is tall; add the bezel back. The 342px cap still wins on anything
about 1000px tall or more, so a big monitor loses nothing.
Measure with a real browser after changing either number -- the columns are
centred, so the picture stops being the constraint once it is small enough
and the text column takes over. */
.stage.fit{--gutter:225px}
.record .stage.fit{--gutter:284px}
@media(min-width:900px){
.stage.fit .phone{width:min(342px,30vw,calc((100vh - var(--gutter)) * 0.462 + 18px))}
}
/* A numbered step that carries a screen. The phone is deliberately smaller
than a /features shot: three of them sit in one laptop row without the
section turning into a scroll of its own. */
/* Do NOT make this a flex or grid container to bottom-align the caption. It
was tried on 2026-09-30 and it brought back the sideways blowout the note on
.steps above describes: as a flex container the card's min-content width
picks up the ![]()
again, the three tracks went past 1000px each
and the whole document scrolled sideways. Equal heights come from
align-items:stretch on .steps, which needs nothing here. */
.step.shot{padding-bottom:22px}
/* 100%, not a vw: at 768px three tracks are 228px wide and a 62vw phone is
224px, which overflowed its own card. The card is the constraint here. */
.step.shot .phone{width:min(224px,100%);margin:16px auto 18px}
.step.shot .cap{display:block;margin-top:10px;color:var(--faint);font-size:13px;line-height:1.4}
/* Equal cards are not enough on their own: with a paragraph a line shorter than
its neighbours, the third caption floated 23px above the other two. Reserving
four lines in every card puts all three captions on one line. 6.2em is the
same 4 lines for anything that does not know the lh unit. */
.step.shot p{min-height:6.2em;min-height:4lh}