/* Botcoin v3 · grokbot vs gpt dot. Black & white, friendly, mobile first. Mono only for numbers. */
:root{--ink:#000;--paper:#fff;--soft:#f4f4f4;--line:#e6e6e6;--grey:#6e6e6e;--up:#12a150;--down:#d92d3a;--gold:#FFC21A;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
[hidden]{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.up{color:var(--up)} .down{color:var(--down)}
.demo-banner{background:var(--ink);color:#fff;text-align:center;font-size:13px;padding:7px 12px}
.demo-banner a{color:#fff}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;text-decoration:none;letter-spacing:-.01em}
.brand img{width:28px;height:28px;border-radius:50%}
.top-r{display:flex;align-items:center;gap:8px}
.live-pill{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--grey);padding:5px 10px;border:1px solid var(--line);border-radius:999px}
.live-pill b{font-weight:500}
.live-pill i{width:8px;height:8px;border-radius:50%;background:#bbb}
.is-live .live-pill i{background:var(--up);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}
.icon-x{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;text-decoration:none}
.btn{background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:9px 14px;border-radius:10px}

main{max-width:1080px;margin:0 auto;padding:0 18px}

/* hero */
.hero{text-align:center;padding:26px 0 18px}
.hero-pile svg{width:min(330px,82vw);height:auto;overflow:visible}
.hero-pile .vs{font:800 34px var(--sans);fill:var(--ink)}
.hero-pile .bob{animation:bob 4.6s ease-in-out infinite}
.hero-pile .b2{animation-delay:-2.2s}
@keyframes bob{50%{transform:translateY(-5px)}}
.hero-pile .crown{opacity:0;transition:opacity .4s}
.hero-pile[data-lead=grokbot] .c-grokbot,.hero-pile[data-lead=gpt] .c-gpt{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-pile .bob{animation:none}}
h1{font-size:clamp(44px,11vw,96px);line-height:.95;letter-spacing:-.055em;font-weight:800;margin:22px 0 14px}
h1 span{color:#b5b5b5;font-weight:700}
.lede{font-size:clamp(19px,4.6vw,26px);line-height:1.3;margin:0 auto;max-width:22em;letter-spacing:-.015em;font-weight:500}
.hero-lead{display:inline-block;margin:22px 0 0;font-size:17px;background:var(--soft);padding:10px 18px;border-radius:999px}
.hero-lead b{font-weight:700}

/* blocks */
.block{padding:44px 0 0}
h2{font-size:clamp(24px,5.5vw,34px);letter-spacing:-.035em;font-weight:800;margin:0 0 16px}
.duo{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:760px){.duo{grid-template-columns:1fr 1fr;gap:18px}}
.note{color:var(--grey);font-size:14px;margin:14px 2px 0}

/* scoreboard */
.fighter{position:relative;border:2px solid var(--ink);border-radius:24px;padding:26px 24px 24px;background:var(--paper)}
.fighter.lead{background:var(--ink);color:#fff}
.fighter .who{display:flex;align-items:center;gap:14px}
.fighter.lead .blob-i circle[fill="#000"]{stroke:#fff;stroke-width:3}
.fighter h3{margin:0;font-size:28px;letter-spacing:-.035em;font-weight:800;line-height:1}
.model{font-size:14px;color:var(--grey);margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fighter.lead .model{color:#a8a8a8}
.pill{font-size:12px;font-weight:600;border:1.5px solid currentColor;border-radius:999px;padding:1px 9px;color:var(--ink)}
.fighter.lead .pill{color:#fff}
.pill.ghost{color:var(--grey);border-style:dashed}
.fighter.lead .pill.ghost{color:#cfcfcf}
.bal{font-size:clamp(44px,10vw,64px);font-weight:600;line-height:1;margin:26px 0 10px;letter-spacing:-.05em}
.delta{font-size:19px;font-weight:600}
.delta .pctx{font-weight:400;opacity:.8}
.fighter.lead .up{color:#4ade80} .fighter.lead .down{color:#ff6b75}
.quip{margin:16px 0 0;font-size:18px;color:var(--grey);font-style:italic}
.fighter.lead .quip{color:#d6d6d6}
.crown-wrap{position:absolute;top:-17px;right:20px;display:flex;align-items:center;gap:6px;background:var(--gold);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:4px 14px 4px 8px;font-weight:800;font-size:14px}
.crown-wrap .crown-i{width:26px;height:18px}
.crown-wrap.tie{background:var(--paper);padding:4px 14px}

/* cards */
.card{background:var(--soft);border-radius:20px;padding:20px 22px}
.now-h{display:flex;align-items:center;gap:10px;font-size:18px}
.now-h b{font-weight:800;letter-spacing:-.02em}
.when{margin-left:auto;font-size:13px;color:var(--grey);white-space:nowrap;padding-left:10px}
.now p{font-size:clamp(20px,4.8vw,24px);line-height:1.3;letter-spacing:-.02em;margin:14px 0 2px;font-weight:600}
.moves ul{list-style:none;margin:12px 0 0;padding:0}
.moves li{display:flex;align-items:baseline;gap:8px;padding:12px 0;border-top:1px solid #e2e2e2;font-size:17px}
.moves li:first-child{border-top:0}
.moves li b{font-weight:700}
.moves li.none{color:var(--grey);font-style:italic}

/* how it works */
.how ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:12px}
@media (min-width:760px){.how ol{grid-template-columns:repeat(5,1fr)}}
.how li{counter-increment:n;border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;font-size:15.5px;color:#333}
.how li::before{content:counter(n);display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:700 14px var(--mono);align-items:center;justify-content:center;margin-bottom:10px}
.how li b{display:block;color:var(--ink);margin-bottom:3px}

/* nerd stats */
.nerd{border:1.5px solid var(--line);border-radius:18px;padding:0 20px}
.nerd summary{cursor:pointer;padding:18px 0;font-weight:800;font-size:20px;letter-spacing:-.02em;list-style:none}
.nerd summary::-webkit-details-marker{display:none}
.nerd summary::before{content:"+";display:inline-block;width:22px;font-family:var(--mono)}
.nerd[open] summary::before{content:"–"}
.nerd summary span{font-weight:400;font-size:14px;color:var(--grey);margin-left:8px}
.nerd-in{padding:0 0 18px;overflow-x:auto}
.nerd table{width:100%;border-collapse:collapse;font-size:15px}
.nerd th{text-align:right;font-weight:700;padding:8px 6px;border-bottom:2px solid var(--ink)}
.nerd td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.nerd td:first-child{text-align:left;color:var(--grey)}
.nerd-view{margin-top:16px;font-size:14px}
.nerd-view p{margin:4px 0 0;color:#444;line-height:1.5;font-family:var(--mono);font-size:12.5px}
.nerd-view .when{margin-left:6px}

.foot{max-width:1080px;margin:0 auto;padding:44px 18px 40px;color:var(--grey);font-size:14px;text-align:center}
@media (max-width:420px){.btn{padding:8px 11px;font-size:13px}.live-pill{display:none}.fighter{padding:24px 20px 22px}}
.moves li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline}
.moves li.none{display:block}
@media (max-width:759px){
  .how ol{gap:0;border:1.5px solid var(--line);border-radius:18px;padding:6px 16px}
  .how li{border:0;border-radius:0;border-top:1px solid var(--line);padding:14px 0 14px 40px;position:relative}
  .how li:first-child{border-top:0}
  .how li::before{position:absolute;left:0;top:14px;margin:0;width:26px;height:26px;font-size:13px}
}
.dot-i{object-fit:contain;display:block;flex:none}
@media (min-width:760px){.how ol{grid-template-columns:repeat(4,1fr)}}