/* BetHub — "betting slip" design. Plain paper and ink, condensed headings,
   one signal colour (slip yellow) used for the things you press and the answers you get.
   No inline styles anywhere, so the security policy can stay strict. */
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(fonts/source-sans-3-400.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(fonts/source-sans-3-600.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:700;font-display:swap;src:url(fonts/source-sans-3-700.woff2) format("woff2")}

:root{
  --bg:#eef0ec; --paper:#ffffff; --ink:#121613; --muted:#59625b; --faint:#7d867f; --line:#d3d8d2; --line2:#e4e8e3;
  --slip:#ffd21f; --slip-ink:#1d1700; --win:#0f7f46; --win-bg:#e3f4ea; --loss:#c42b2b; --loss-bg:#fbe7e6; --amber:#9a6a00; --amber-bg:#fdf3d6;
  --link:#0c5d3a; --field:#ffffff;
  --head:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1210; --paper:#171b18; --ink:#edf0eb; --muted:#a0a9a2; --faint:#7b847d; --line:#2b322d; --line2:#222823;
  --win:#46cf86; --win-bg:#13291c; --loss:#ff6f6f; --loss-bg:#2e1515; --amber:#f2c14b; --amber-bg:#2b230f;
  --link:#7fd4a6; --field:#111512; color-scheme:dark}}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font:17px/1.55 var(--body);background:var(--bg);color:var(--ink);min-height:100vh;font-variant-numeric:tabular-nums}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--slip);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--slip);color:var(--slip-ink);padding:8px 12px;z-index:20}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.02;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(40px,6vw,64px);text-transform:uppercase}
h2{font-size:30px;text-transform:uppercase;margin-bottom:8px}
h3{font-size:20px;margin-bottom:4px}
.h2{font-size:34px;text-transform:uppercase;margin-bottom:8px}
.h3{font-size:22px}
p{margin-bottom:10px}
.wrap{max-width:1140px;margin:0 auto;padding:32px 20px}
.wrap.narrow{max-width:760px}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:14px} .xs{font-size:12px}
.pos{color:var(--win)} .neg{color:var(--loss)} .warn{color:var(--amber)}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt18{margin-top:18px}.mt30{margin-top:30px}.mb18{margin-bottom:18px}
.center{text-align:center} .inline{display:inline}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* header */
.nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 20px;max-width:1140px;margin:0 auto}
.topline{border-bottom:2px solid var(--ink);background:var(--paper)}
.logo{display:inline-flex;align-items:center;gap:6px;font:800 26px/1 var(--head);text-transform:uppercase;color:var(--ink);text-decoration:none!important;letter-spacing:.01em}
.logo b{background:var(--slip);color:var(--slip-ink);padding:2px 6px 1px;transform:rotate(-2deg);display:inline-block}
.logo small{font:600 13px var(--body);color:var(--faint);text-transform:none;letter-spacing:0}
.nav-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-left:auto;font-weight:600;font-size:16px}
.nav-links a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding:2px 0}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-color:var(--slip)}
.nav-links a.btn{border:0;padding:8px 14px}

/* buttons & fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--slip);color:var(--slip-ink);font:700 17px/1 var(--head);text-transform:uppercase;letter-spacing:.04em;padding:12px 20px;border:0;border-radius:3px;cursor:pointer;text-decoration:none!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.btn:hover{filter:brightness(.96)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-red{background:var(--loss);color:#fff}
.btn-sm{padding:8px 12px;font-size:14px}
.btn-lg{padding:16px 26px;font-size:20px}
.btn-block{width:100%;margin-top:18px}
input,select{width:100%;font:17px var(--body);color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:3px;padding:10px 12px;font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--slip)}
label{display:block;font-size:14px;font-weight:600;color:var(--muted);margin:12px 0 5px}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;line-height:1.4}
label.check input{width:auto;margin-top:3px;accent-color:var(--ink)}
.hint{font-size:13px;color:var(--faint);margin-top:6px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:22px;margin-bottom:18px}
.auth-box{max-width:440px;margin:40px auto;border-top:6px solid var(--slip)}
.err,.msg{padding:10px 14px;border-radius:3px;font-size:15px;margin:12px 0;border-left:4px solid}
.err{background:var(--loss-bg);color:var(--loss)}
.msg{background:var(--win-bg);color:var(--win)}
.row{display:grid;gap:14px}.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:repeat(3,1fr)}.row.c4{grid-template-columns:repeat(4,1fr)}
.row .end{display:flex;align-items:flex-end}
.row .end .btn-block{margin-top:0}

/* tables */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;margin-top:12px}
th{font:700 12px var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--faint);text-align:left;padding:8px;border-bottom:2px solid var(--ink);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
td.r,th.r{text-align:right}
.chip{display:inline-block;font:700 12px var(--body);letter-spacing:.05em;padding:3px 9px;border-radius:2px;border:0}
button.chip{cursor:pointer}
.chip.g{background:var(--win-bg);color:var(--win)}.chip.r{background:var(--loss-bg);color:var(--loss)}.chip.y{background:var(--amber-bg);color:var(--amber)}
.kv{display:grid;grid-template-columns:1fr auto;gap:0 24px}
.kv .k,.kv .v{padding:7px 0;border-bottom:1px dotted var(--line)}
.kv .k{color:var(--muted)} .kv .v{font-weight:700;text-align:right}
canvas{width:100%;background:var(--bg);border-radius:3px;margin-top:16px;display:block}
#bk_chart{height:180px}

/* the slip: result panels look like a printed betting slip */
.result{position:relative;background:var(--paper);border:1px solid var(--line);border-top:0;margin-top:22px;padding:30px 18px 18px;border-radius:0 0 4px 4px}
.result::before{content:"Result";position:absolute;left:0;right:0;top:0;height:22px;background:var(--slip);color:var(--slip-ink);font:700 13px/22px var(--head);letter-spacing:.12em;text-transform:uppercase;padding-left:18px}
.result::after{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:radial-gradient(circle at 6px -1px,transparent 5px,var(--slip) 5.5px) 0 0/12px 6px repeat-x}
.result .lbl{font:700 13px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.result .big{font:800 44px/1.05 var(--head);color:var(--ink)}
.result .big.neg{color:var(--loss)}
.result .kv{margin-top:10px}

/* home */
.hero{border-bottom:2px solid var(--ink);background:var(--paper)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-block:56px}
.kicker{font:700 14px var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px}
.hero h1 mark{background:var(--slip);color:var(--slip-ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .lead{font-size:20px;color:var(--muted);max-width:48ch;margin:18px 0 26px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.trust{margin-top:18px;font-size:14px;color:var(--faint)}
.try{background:var(--bg);border:2px solid var(--ink);border-radius:4px;padding:18px 18px 14px;box-shadow:8px 8px 0 var(--slip)}
.try h2{font-size:22px;display:flex;align-items:center;gap:8px}
.try .row{gap:10px}
.try label{margin-top:8px}
.section{padding:56px 0;border-bottom:1px solid var(--line)}
.section .wrap{padding-block:0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.sec-head p{color:var(--muted);max-width:52ch;margin:0}

/* tool index: a ruled list, not a card grid */
.tlist{list-style:none;border-top:2px solid var(--ink)}
.tlist a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.tlist a:hover{background:var(--paper)}
.tlist .ico-box{width:44px;height:44px;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--ink);border-radius:3px}
.tlist a:hover .ico-box{background:var(--slip);color:var(--slip-ink)}
.tlist .nm{font:800 22px/1.1 var(--head);text-transform:uppercase}
.tlist .ln{color:var(--muted);font-size:15px}
.tlist .fx{font:600 14px var(--body);color:var(--faint);white-space:nowrap}
.tlist .go{grid-column:3;grid-row:1 / span 2;font:700 15px var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--link)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}

/* what we are / aren't */
.facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.facts li{padding:18px 18px 18px 0;border-right:1px solid var(--line)}
.facts li+li{padding-left:18px}
.facts li:last-child{border-right:0}
.facts b{display:block;font:800 22px/1.1 var(--head);text-transform:uppercase;margin-bottom:6px}
.facts span{color:var(--muted);font-size:15px}

/* pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:4px;background:var(--paper)}
.plan{padding:26px}
.plan+.plan{border-left:2px solid var(--ink)}
.plan h3{font-size:26px;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.price{font:800 54px/1 var(--head);margin:6px 0 2px}
.price small{font:400 16px var(--body);color:var(--muted)}
.plan ul{list-style:none;margin:14px 0 20px}
.plan li{padding:8px 0;border-bottom:1px dotted var(--line);font-size:16px}
.plan li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--ink);margin-right:10px;vertical-align:2px}
.tag{display:inline-block;font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;vertical-align:middle}
.tag.free{background:var(--win-bg);color:var(--win)} .tag.soon{background:var(--amber-bg);color:var(--amber)}
.wl-form{display:flex;gap:8px;flex-wrap:wrap}
.wl-form input{flex:1 1 200px}

/* tool pages */
.tools-layout{display:flex;max-width:1140px;margin:0 auto;padding:0 20px}
.sidebar{width:250px;flex:none;padding:24px 20px 24px 0;position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto}
.sidebar h2{font:700 12px var(--body);color:var(--faint);text-transform:uppercase;letter-spacing:.1em;margin:18px 0 6px}
.sidebar h2:first-child{margin-top:0}
.sidebar a{display:flex;align-items:center;gap:10px;color:var(--ink);padding:7px 8px;border-radius:3px;font-weight:600;font-size:15px;text-decoration:none}
.sidebar a .ico{width:20px;height:20px;color:var(--muted)}
.sidebar a:hover{background:var(--paper)}
.sidebar a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.sidebar a[aria-current="page"] .ico{color:var(--slip)}
.content{flex:1;min-width:0;padding:24px 0 24px 28px;border-left:1px solid var(--line)}
.tool-head{display:flex;gap:16px;align-items:center;margin-top:6px}
.tool-head .ico-box{width:58px;height:58px;display:grid;place-items:center;background:var(--slip);color:var(--slip-ink);border-radius:4px;flex:none}
.tool-head .ico{width:32px;height:32px;stroke-width:1.7}
.content h1{font-size:clamp(34px,4.6vw,50px)}
.formula{display:inline-block;margin:10px 0 4px;font:600 15px var(--body);background:var(--paper);border:1px dashed var(--muted);padding:4px 10px;border-radius:3px;color:var(--muted)}
.desc{color:var(--muted);font-size:18px;margin:10px 0 20px;max-width:64ch}
.para-row{display:grid;grid-template-columns:1fr 44px;gap:8px;margin-bottom:8px;align-items:end}
.para-row label{margin-top:0}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
details{border-bottom:1px solid var(--line);padding:12px 0}
summary{cursor:pointer;font-weight:700;font-size:17px}
details p{color:var(--muted);margin-top:8px}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.links a{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);padding:5px 10px;border-radius:3px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none}
.links a .ico{width:16px;height:16px}
.links a:hover{border-color:var(--ink)}

/* breadcrumbs, prose */
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--faint)}
.crumb li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumb a{color:var(--faint)}
.prose h1{margin-bottom:12px}
.prose h2{margin-top:30px;font-size:26px}
.prose p,.prose li{max-width:68ch}
.prose ul{margin:0 0 12px 20px}
.prose li{margin-bottom:6px}

/* footer */
.foot{background:var(--ink);color:var(--bg);margin-top:60px}
.foot-grid{max-width:1140px;margin:0 auto;padding:40px 20px 10px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.foot .logo{color:var(--bg)}
.foot h2{font:700 13px var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--slip);margin-bottom:10px}
.foot ul{list-style:none}.foot li{margin-bottom:6px}
.foot a{color:var(--bg);opacity:.85;text-decoration:none}
.foot a:hover{opacity:1;text-decoration:underline}
.foot p{opacity:.8;font-size:15px;max-width:46ch;margin-top:10px}
.foot .legal{max-width:1140px;margin:0 auto;padding:16px 20px 30px;font-size:13px;opacity:.6;border-top:1px solid rgba(255,255,255,.15)}
.age{background:var(--loss);color:#fff;font-weight:700;border-radius:2px;padding:1px 5px;font-size:12px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:32px;padding-block:36px}
  .tools-layout{flex-direction:column}
  .sidebar{width:auto;max-height:none;position:static;padding:14px 0;display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line)}
  .sidebar h2{display:none}
  .sidebar a{border:1.5px solid var(--line);font-size:14px}
  .content{padding:20px 0;border-left:0}
  .facts{grid-template-columns:1fr 1fr}
  .facts li:nth-child(2){border-right:0}
  .facts li:nth-child(3){padding-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .cols2{grid-template-columns:1fr}
  .row.c3,.row.c4{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .nav-links{gap:14px;font-size:15px;width:100%;margin-left:0}
  .row.c2,.row.c3,.row.c4{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}.plan+.plan{border-left:0;border-top:2px solid var(--ink)}
  .facts{grid-template-columns:1fr}.facts li{border-right:0!important;padding-left:0!important;border-top:1px solid var(--line)}
  .tlist a{grid-template-columns:40px minmax(0,1fr)}
  .tlist .go{display:none}
  .tlist .fx{white-space:normal}
  .foot-grid{grid-template-columns:1fr}
  .hide-s{display:none}
  .try{box-shadow:5px 5px 0 var(--slip)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* admin stat tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:16px}
.card p{color:var(--muted);margin:0}