/* ============================================================================
   Calibrated — "Calibrated Scope" landing page.
   Toned-down Signal/Oscilloscope: phosphor bars + green/cyan palette + the
   prediction-card styling, on a disciplined dark blue-slate base (no CRT
   scanlines/vignette/glow). Per-page sheet — see predictions.css for the
   predictions view (the two views use divergent class systems on purpose).
   ============================================================================ */
:root{
  --bg:#0B1119; --panel:#121B27; --line:#23303F;
  --ink:#E6ECF3; --dim:#93A4B8;
  --green:#46E0A0; --cyan:#4FC8E6; --amber:#F2B544;
  --disp:'Chakra Petch',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
  --sp:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;font-size:16px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.label{font-family:var(--disp);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);font-weight:600}
.mono{font-family:var(--mono)}

/* HEADER */
header.site{position:sticky;top:0;z-index:50;background:rgba(11,17,25,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:60px}
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--green);
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.02em}
.mark span{color:var(--ink)}
header nav{margin-left:auto;display:flex;align-items:center;gap:22px}
header nav a{font-family:var(--disp);font-size:13px;letter-spacing:.08em;color:var(--dim);font-weight:500}
header nav a:hover,header nav a.active{color:var(--ink)}

/* HERO — thesis-led editorial */
.hero{padding:72px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:48px;align-items:start}
.kicker{margin-bottom:20px}
h1.thesis{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.4vw,58px);
  line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
h1.thesis em{font-style:normal;color:var(--green)}
.lede{margin-top:22px;max-width:46ch;font-size:17px;color:var(--dim)}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;
  font-size:14px;letter-spacing:.04em;padding:13px 20px;border-radius:7px;border:1px solid var(--green);
  background:var(--green);color:#06241A}
.btn:hover{background:#5BEBAD}
.btn .arr{font-family:var(--mono)}
.hero-stat{display:flex;align-items:center;gap:13px;padding-left:23px;border-left:1px solid var(--line)}
.hero-stat .num{font-family:var(--mono);font-weight:700;font-size:38px;line-height:.85;color:var(--green)}
.hero-stat .lbl{font-family:var(--disp);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);line-height:1.35}
.hero-context{margin-top:18px;max-width:52ch;font-size:13px;color:var(--dim);line-height:1.55}
.hero-context b{color:var(--ink);font-weight:600}

/* SCOPE instrument readout */
.scope{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.scope-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.scope svg{display:block;width:100%;height:auto}
.scope-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--dim)}
.scope-legend i{display:inline-block;width:18px;height:0;vertical-align:middle;margin-right:6px}
.lg-dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.lg-line{border-top:2px dashed var(--cyan)}
.stamp{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:8px}

/* HERO live next-match readout (the proof-by-example element) */
.heronext{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;color:inherit;text-decoration:none;transition:border-color .15s}
.heronext:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.heronext__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.heronext__kick{font-family:var(--disp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600}
.heronext__when{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.heronext__cd{font-family:var(--mono);font-size:12px;color:var(--amber)}
.heronext__abs{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.heronext__abs::before{content:"· ";color:var(--dim)}
.heronext__ev{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-bottom:14px}
.heronext__teams{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:3px}
.heronext__teams .nm{font-family:var(--disp);font-weight:600;font-size:16px}
.heronext__teams .nm.b{text-align:right}
.heronext__pcts{display:flex;justify-content:space-between;font-family:var(--mono);font-weight:700;font-size:27px;line-height:1;margin-bottom:9px}
.heronext__pcts .a{color:var(--green)} .heronext__pcts .b{color:var(--cyan)}
.heronext__gauge{height:12px;border-radius:6px;background:var(--cyan);overflow:hidden;margin-bottom:13px}
.heronext__gauge span:not(.gtag){display:block;height:100%;background:var(--green)}
.heronext__favors{font-size:12.5px;color:var(--dim);margin-bottom:2px}
.heronext__favors b{color:var(--ink);font-weight:600}
.heronext__thin{margin:8px 0 2px;padding:8px 11px;border:1px solid var(--amber);border-radius:8px;
  background:rgba(242,181,68,.07);font-size:12px;color:var(--ink);line-height:1.45}
.heronext__thin b{color:var(--amber);font-family:var(--disp);letter-spacing:.03em}
.heronext__drv{margin-top:14px;padding-top:15px;border-top:1px solid var(--line)}
.heronext__cov{margin-top:13px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.heronext__commit{margin-top:10px;display:flex;gap:8px;align-items:flex-start;font-size:11.5px;
  color:var(--dim);line-height:1.4}
.heronext__commit .ic{color:var(--green);font-family:var(--mono);flex:none}
.heronext__commit .hash{font-family:var(--mono);color:var(--cyan);word-break:break-all}
.heronext__foot{font-size:12.5px;color:var(--dim);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.heronext__foot.fend{justify-content:flex-end}
.heronext__foot b{color:var(--ink);font-weight:600}
.heronext__more{color:var(--cyan);white-space:nowrap}
.heronext__sealed{font-size:13px;color:var(--dim);margin:4px 0 12px}

/* SECTIONS */
section.block{padding:30px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.sec-head h2{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:.02em}
.sec-head .meta{font-family:var(--mono);font-size:12px;color:var(--dim);margin-left:auto}

/* CARD */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-top{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.ev{font-family:var(--disp);font-size:13px;letter-spacing:.04em;color:var(--ink)}
.ev span{color:var(--dim)}
.pill{font-family:var(--mono);font-size:11px;padding:3px 8px;border:1px solid var(--line);border-radius:20px;
  color:var(--dim)}
.countdown{font-family:var(--mono);font-size:13px;color:var(--amber);margin-left:auto}
.card-body{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.card-body{grid-template-columns:1fr;gap:22px}}

/* GAUGE */
.teams{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}
.team{display:flex;flex-direction:column;gap:3px}
.team.b{align-items:flex-end;text-align:right}
.team .nm{font-family:var(--disp);font-weight:600;font-size:16px}
.team .pct{font-family:var(--mono);font-weight:700;font-size:28px;line-height:1}
.team.a .pct{color:var(--green)} .team.b .pct{color:var(--cyan)}
.gauge{height:12px;border-radius:6px;background:var(--cyan);overflow:hidden;display:flex}
.gauge .fill{height:100%;background:var(--green)}
/* GAUGE TEAM LABELS — short token rides each coloured fill (colour-blind cue;
   the full team name sits above the gauge). Dark ink on the green/cyan fills. */
.gauge,.heronext__gauge{position:relative}
.gtag{position:absolute;top:50%;transform:translateY(-50%);max-width:44%;line-height:1;
  font-family:var(--mono);font-size:9.5px;font-weight:700;color:#06241A;letter-spacing:.04em;z-index:2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtag.a{left:8px} .gtag.b{right:8px}
.favors{margin-top:11px;font-size:12.5px;color:var(--dim)}
.favors b{color:var(--ink);font-weight:600}

/* DRIVER DEFLECTION — diverging bars off a clean 0-axis. Label lives in a fixed
   left gutter (NOT over the axis), the bar is pinned to the centre line and grows
   outward, magnitude reads on the right. Mirrors the predictions .drow layout so
   the two views read identically; every bar starts at the same 0. */
.drv-title{font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px}
.drv-row{display:grid;grid-template-columns:86px 1fr 34px;align-items:center;gap:10px;margin-bottom:7px}
.drv-lab{font-size:10.5px;color:var(--dim);font-family:var(--body);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.drv-track{position:relative;height:14px}
.drv-track::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--line)}
.drv-bar{position:absolute;top:2px;height:9px;border-radius:3px;
  animation:grow .7s cubic-bezier(.2,.7,.3,1) both}
.drv-bar.l{right:50%;background:var(--green);transform-origin:right center}
.drv-bar.r{left:50%;background:var(--cyan);transform-origin:left center}
.drv-bar.thin{opacity:.55;background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(11,17,25,.5) 3px,rgba(11,17,25,.5) 5px)}
.drv-mag{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:right}
.drv-cap{margin-top:12px;font-size:11px;color:var(--dim);line-height:1.45}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* commitment / thin */
.commit{padding:14px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);
  display:flex;gap:10px;align-items:flex-start}
.commit .hash{font-family:var(--mono);color:var(--cyan)}
.commit .ic{color:var(--green);font-family:var(--mono);flex:none}
/* copyable fingerprint chip — abbreviated label, click copies the full 64-char hash */
.fp{appearance:none;-webkit-appearance:none;font:inherit;background:none;border:0;padding:0;margin:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;vertical-align:baseline;
  font-family:var(--mono);color:var(--cyan)}
.fp__short{border-bottom:1px dotted transparent}
.fp:hover .fp__short,.fp:focus-visible .fp__short{border-bottom-color:currentColor}
.fp__ic{opacity:.6;font-size:.95em}
.fp:hover .fp__ic,.fp:focus-visible .fp__ic{opacity:1}
.fp.copied{color:var(--green)}
.nohash .ic{color:var(--dim)}
.thinband{margin:0 20px 16px;padding:10px 14px;border:1px solid var(--amber);border-radius:8px;
  background:rgba(242,181,68,.07);font-size:12.5px;color:var(--ink)}
.thinband b{color:var(--amber);font-family:var(--disp);letter-spacing:.04em}

/* RESULT specifics */
.badge{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.08em;padding:5px 12px;
  border-radius:6px}
.badge.ok{background:var(--green);color:#06241A}
.badge.miss{background:var(--amber);color:#2A1C02}
.outcome{font-size:13px;color:var(--ink);margin-top:11px}
.outcome .res{font-family:var(--mono);font-weight:700;color:var(--green)}
.outcome .res.miss{color:var(--cyan)}

/* TRACK RECORD band — no section fill: the rounded stat card + ladder carry the
   structure. A flat panel slab here read as a hard-edged "cut off" rectangle. */
/* No overflow:hidden — border-radius already clips the grid's own bg/border, and
   the cells have no background, so clipping is unneeded here and would cut off the
   term tooltips (this band is a single short row). */
.record-grid{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.stat{flex:1 1 150px;padding:18px 22px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .v{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--ink)}
.stat .v.acc{color:var(--green)}
.stat .k{font-size:11.5px;color:var(--dim);margin-top:4px}
.ladder{margin-top:18px}
.ladder-row{display:grid;grid-template-columns:170px 1fr 64px;gap:14px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.ladder-row:last-child{border-bottom:none}
.ladder-row .nm{color:var(--dim)}
.ladder-row.us .nm{color:var(--ink);font-weight:600}
.track-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.track-bar i{display:block;height:100%;background:var(--dim)}
.ladder-row.us .track-bar i{background:var(--green)}
.ladder-row .sc{font-family:var(--mono);font-size:13px;text-align:right;color:var(--ink)}
.ladder-row.us .sc{color:var(--green);font-weight:700}
.ladder-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  flex-wrap:wrap;margin-bottom:12px}
.ladder-head>span:first-child{font-family:var(--disp);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.ladder-head .hint{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.ladder-cap{margin-top:13px;font-size:11.5px;color:var(--dim);line-height:1.55;max-width:74ch}

/* HOW IT WORKS */
.how{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:680px){.how{grid-template-columns:1fr}}
.hcard{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:var(--panel)}
.hcard h3{font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:.03em;margin-bottom:7px}
.hcard h3 .n{font-family:var(--mono);color:var(--green);margin-right:8px}
.hcard p{font-size:13.5px;color:var(--dim);line-height:1.5}
.hcard p b{color:var(--ink);font-weight:600}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:28px 0 48px;margin-top:24px}
footer .legal{font-size:12px;color:var(--dim);line-height:1.7;max-width:74ch}
footer .legal a{color:var(--cyan)}
footer .legal b{color:var(--ink)}

/* status line (loading / honest empty / error) */
.status{font-size:14px;color:var(--dim);padding:18px 0}
.status strong{color:var(--ink);font-weight:600}

/* TOOLTIP — plain term on the surface, the precise detail one hover/focus away */
.term{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;background:none;border:0;
  border-bottom:1px dotted var(--cyan);padding:0;cursor:help;position:relative;
  text-transform:inherit;letter-spacing:inherit}
.term .tip{position:absolute;left:0;bottom:calc(100% + 8px);width:max-content;max-width:260px;
  background:#0d1726;border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  font-family:var(--body);font-size:12.5px;font-weight:400;line-height:1.45;color:var(--ink);
  text-transform:none;letter-spacing:normal;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;
  z-index:80;box-shadow:0 10px 28px rgba(0,0,0,.45);pointer-events:none}
.term:hover .tip,.term:focus .tip{opacity:1;visibility:visible;transform:translateY(0)}
.term.r .tip{left:auto;right:0}
@media(max-width:560px){.term .tip{max-width:220px}}
@media(prefers-reduced-motion:reduce){.term .tip{transition:none}}

@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:32px}.hero{padding:48px 0 40px}}
/* The .hero-stat border-left is an INLINE separator between the button and the
   stat; once the CTA row wraps on narrow screens it would orphan as a stray
   hairline, so drop it there (the flex gap still separates them). */
@media(max-width:560px){.hero-stat{border-left:0;padding-left:0}}
@media(prefers-reduced-motion:reduce){.drv-bar{animation:none}}