/* Written by tools/pages.mjs from the solved palette. Do not edit. */
:root{
  --ground:#dcf3f9; --band:#b7e4f0; --band-soft:#c4e9f2;
  --surface:#f3fafc; --raised:#fbfeff; --line:#a4c4cc; --deep:#062935;
  --ink:#0c2228; --ink-muted:#35484d; --ink-faint:#526367;
  --accent:#673a09; --accent-alt:#0a496f; --mark:#b66b18; --on-mark:#1d1005;
  --on-deep:#d6e8ec; --on-deep-muted:#95a6aa; --accent-on-deep:#d57f1e;
  --good:#126e39; --warn:#855610; --bad:#af3331;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:18px; --rl:26px;
  --shadow:0 1px 2px rgba(6,41,53,.05), 0 8px 24px rgba(6,41,53,.07);
  --shadow-lg:0 2px 6px rgba(6,41,53,.08), 0 24px 60px rgba(6,41,53,.14);
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.62 var(--sans);letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.022em;line-height:1.08}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* SCROLL REVEAL, SCOPED TO .js. Unscoped, 40 elements start at opacity 0 and
   the whole page is invisible to anyone without JavaScript. The class is set
   by an inline script before any stylesheet loads. */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].seen{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto}

/* ---------- nav ---------- */
.bar{position:fixed;inset:14px 0 auto;z-index:60;pointer-events:none}
.bar-in{max-width:var(--wrap);margin:0 auto;padding:0 16px;display:flex;justify-content:center}
.bar-pill{pointer-events:auto;display:flex;align-items:center;gap:6px;
  background:color-mix(in oklab,var(--raised) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);
  border:1px solid color-mix(in oklab,var(--line) 46%,transparent);
  border-radius:999px;padding:7px 8px 7px 16px;box-shadow:var(--shadow);max-width:100%}
.bar-mark{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--serif);
  font-size:20px;letter-spacing:-.02em;padding-right:10px;white-space:nowrap}
.bar-mark svg{width:20px;height:20px;flex:none}
.bar-nav{display:flex;gap:2px}
.bar-nav a{text-decoration:none;color:var(--ink-muted);font-size:14.5px;padding:8px 12px;border-radius:999px;
  white-space:nowrap;transition:background .18s,color .18s}
.bar-nav a:hover{background:color-mix(in oklab,var(--band) 70%,transparent);color:var(--ink)}
.bar-nav a[aria-current]{color:var(--ink);background:color-mix(in oklab,var(--band) 82%,transparent)}
/* THE CTA IS ONE CLASS AND .bar-nav a IS TWO. A sibling shipped its primary
   call to action as dark-on-dark at 1.3:1 because of exactly this, so the
   selector here is as specific as the rule it has to beat. */
.bar-x{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;color:var(--ink-muted);
  transition:background .18s,color .18s;flex:none;margin-right:2px}
.bar-x svg{width:15px;height:15px}
.bar-x:hover{background:color-mix(in oklab,var(--band) 70%,transparent);color:var(--ink)}
.bar .bar-cta{background:var(--deep);color:var(--on-deep);padding:9px 17px;border-radius:999px;
  font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .18s,opacity .18s}
.bar .bar-cta:hover{transform:translateY(-1px);opacity:.93}
/* THE MOBILE MENU IS NOT DECORATION. Collapsing .bar-nav with nothing behind
   it left every page but the front one reachable only from the footer, which
   is a navigation failure that no contrast check, overflow check or file check
   can see — the page is perfect and you cannot get anywhere. */
.bar-more{display:none;pointer-events:auto;background:none;border:0;cursor:pointer;padding:9px 12px;
  border-radius:999px;color:var(--ink);line-height:0}
.bar-more svg{width:20px;height:20px}
.bar-more:hover{background:color-mix(in oklab,var(--band) 70%,transparent)}
.bar-menu{position:absolute;inset:calc(100% + 10px) 16px auto auto;width:min(280px,calc(100vw - 32px));
  pointer-events:auto;background:var(--raised);border:1px solid color-mix(in oklab,var(--line) 52%,transparent);
  border-radius:20px;box-shadow:var(--shadow-lg);padding:8px;display:grid;gap:2px}
.bar-menu a{text-decoration:none;color:var(--ink);font-size:16px;padding:12px 14px;border-radius:12px}
.bar-menu a:hover,.bar-menu a[aria-current]{background:var(--band)}
@media (max-width:940px){.bar-nav{display:none}.bar-more{display:block}}
@media (min-width:941px){.bar-menu{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:14px 26px;
  font:500 16px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,opacity .18s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--deep);color:var(--on-deep);box-shadow:0 6px 20px rgba(6,41,53,.24)}
.btn-primary:hover{box-shadow:0 10px 30px rgba(6,41,53,.32)}
.btn-ghost{background:var(--raised);color:var(--ink);border-color:color-mix(in oklab,var(--line) 60%,transparent);
  box-shadow:var(--shadow)}
.btn-sm{padding:10px 18px;font-size:14.5px}
/* A DISABLED CONTROL HAS TO LOOK DISABLED. The app renders its deploy panel
   before a wallet is connected on purpose, so the buttons are present and
   inert — and a primary button that looks live and does nothing is worse than
   no button. */
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn[disabled]:hover,.btn:disabled:hover{transform:none;box-shadow:var(--shadow)}
select[disabled],input[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(96vh,880px);display:flex;align-items:center;justify-content:center;
  padding:150px 20px 120px;overflow:hidden;isolation:isolate}
/* THE PHOTOGRAPH IS GRADED, AND THE GRADE IS A MEASUREMENT, NOT A TASTE.
   Ungraded, the photo strip measured mean luminance 195.5 against the
   reference page's 126.6, with 8.9% of the whole frame blown to white — a
   photograph so bright it reads as pale paper, which is the "internally
   consistent, wrong register" failure four sibling sites shipped. These are
   the values that bring the photo region to 157.6 with ZERO blown pixels,
   measured with tools/measure-image.mjs --region 0,0.1,0.18,0.8 (a strip of
   pure photograph, because measuring the whole frame answers the wrong
   question: the hero CARD is meant to be near-white and dominates the blown
   count). og.html carries the same two values and must be moved with them. */
.hero-photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 58%;
  filter:brightness(0.70) contrast(1.16) saturate(1.30)}
/* The photograph is a real one and it is warm already; this is a scrim, not a
   colourist. It exists so the glass card clears AAA over any part of the
   frame, and its strength was set by measuring the composite rather than by
   looking at it. */
/* THE SCRIM IS A SCRIM, NOT A COLOURIST: enough to keep the glass card legible
   over any part of the frame and no more. It was reduced along with the grade
   and the 46 live contrast checks re-run against the result, because the card
   sits on the photograph and a veil removed is a contrast obligation moved. */
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(115% 85% at 50% 44%, color-mix(in oklab,var(--ground) 4%,transparent) 0%, color-mix(in oklab,var(--ground) 14%,transparent) 62%, color-mix(in oklab,var(--ground) 28%,transparent) 100%),
    linear-gradient(to bottom, color-mix(in oklab,var(--ground) 42%,transparent) 0%, transparent 18%, transparent 68%, var(--ground) 100%)}
.hero-card{position:relative;width:min(820px,100%);text-align:center;border-radius:var(--rl);
  padding:56px 52px 48px;
  background:color-mix(in oklab,var(--raised) 70%,transparent);
  -webkit-backdrop-filter:saturate(1.35) blur(30px);backdrop-filter:saturate(1.35) blur(30px);
  border:1px solid color-mix(in oklab,var(--raised) 88%,transparent);
  box-shadow:var(--shadow-lg)}
.chip{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:7px 15px 7px 12px;
  background:color-mix(in oklab,var(--raised) 84%,transparent);border:1px solid color-mix(in oklab,var(--line) 50%,transparent);
  font-size:13.5px;color:var(--ink-muted);text-decoration:none}
.chip b{color:var(--ink);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--good) 20%,transparent)}
.hero h1{font-family:var(--serif);font-size:clamp(64px,11.5vw,124px);line-height:.93;
  letter-spacing:-.035em;margin:26px 0 20px}
.hero-lede{font-size:clamp(17px,2vw,19.5px);line-height:1.58;color:var(--ink-muted);
  max-width:57ch;margin:0 auto 30px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.pills{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 14px;font-size:13.5px;
  background:color-mix(in oklab,var(--raised) 76%,transparent);color:var(--ink-muted);
  border:1px solid color-mix(in oklab,var(--line) 44%,transparent)}
.pill svg{width:14px;height:14px;opacity:.72;flex:none}
@media (max-width:640px){.hero-card{padding:38px 24px 34px}.hero{padding:130px 14px 90px}}

/* ---------- the floating readout ---------- */
.float{margin:-92px auto 0;position:relative;z-index:5;width:min(560px,calc(100% - 32px))}
.card{background:var(--raised);border:1px solid color-mix(in oklab,var(--line) 52%,transparent);
  border-radius:var(--rl);box-shadow:var(--shadow-lg)}
.card-hd{display:flex;align-items:center;gap:12px;padding:20px 24px 16px}
.card-ic{width:38px;height:38px;border-radius:11px;background:var(--band);display:grid;place-items:center;flex:none}
.card-ic svg{width:19px;height:19px}
.card-hd h4{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.card-hd p{font-size:13.5px;color:var(--ink-faint);margin:2px 0 0}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 24px;border-top:1px solid color-mix(in oklab,var(--line) 34%,transparent)}
.row dt{font-size:14px;color:var(--ink-muted)}
.row dd{margin:0;font:500 14.5px/1 var(--mono);letter-spacing:-.02em}
.row dd.big{font:400 22px/1 var(--serif)}

/* ---------- ticker ---------- */
.ticker{background:var(--band-soft);border-block:1px solid color-mix(in oklab,var(--line) 34%,transparent)}
.ticker-in{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;padding:19px 24px;font-size:14.5px;color:var(--ink-muted)}
.ticker-in b{color:var(--ink);font-weight:600}
.ticker-in span{display:inline-flex;align-items:center;gap:8px}

/* ---------- bands ---------- */
.band{padding:104px 0}
.band-tint{background:var(--band)}
.band-soft{background:var(--band-soft)}
/* A DARK BAND MUST OVERRIDE EVERY INK TOKEN IT INHERITS. A sibling shipped
   three nodes on one at 1.2, 1.4 and 1.9:1 because setting 'color' on the
   band leaves the lede, the buttons and the accent still carrying
   light-surface values. */
.band-deep{background:var(--deep);color:var(--on-deep)}
.band-deep .eyebrow{color:var(--accent-on-deep)}
.band-deep .lede,.band-deep .row dt,.band-deep p{color:var(--on-deep-muted)}
.band-deep h2 em{color:var(--accent-on-deep)}
/* SPECIFICITY, NOT ORDER. '.band-deep h2 em' and 'h2.display em' are both
   (0,1,2), so the one written later in this file wins — and the accent rule
   is written later, which shipped the deep band's italic clause as
   #683b09 on #2d200e at 1.67:1 while every file check passed over it. The
   markup was correct; only the computed style was wrong. This selector is
   deliberately more specific than the rule it has to beat. */
.band-deep h2.display em{color:var(--accent-on-deep)}
.band-deep .card,.band-deep .panel,.band-deep .stat{
  background:color-mix(in oklab,var(--on-deep) 8%,transparent);
  border-color:color-mix(in oklab,var(--on-deep) 18%,transparent);color:var(--on-deep)}
.band-deep .stat b,.band-deep .panel h3{color:var(--on-deep)}
.band-deep .stat span,.band-deep .panel p,.band-deep .marks li{color:var(--on-deep-muted)}
.band-deep .panel .num{color:var(--accent-on-deep)}
.band-deep .btn-ghost{background:color-mix(in oklab,var(--on-deep) 12%,transparent);color:var(--on-deep);
  border-color:color-mix(in oklab,var(--on-deep) 26%,transparent)}
.band-deep a{color:var(--accent-on-deep)}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  margin:0 0 20px;text-align:center}
h2.display{font-family:var(--serif);font-size:clamp(34px,5.4vw,58px);line-height:1.04;letter-spacing:-.028em;
  text-align:center;max-width:17ch;margin:0 auto}
h2.display em{font-style:italic;color:var(--accent)}
.lede{text-align:center;color:var(--ink-muted);max-width:60ch;margin:22px auto 0;font-size:17.5px}

/* ---------- grids ---------- */
.grid{display:grid;gap:18px;margin-top:56px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid color-mix(in oklab,var(--line) 40%,transparent);
  border-radius:var(--rl);padding:28px 26px;min-width:0}
.panel h3{font-family:var(--serif);font-size:22px;margin:0 0 12px;letter-spacing:-.02em}
.panel p{color:var(--ink-muted);font-size:15.5px;line-height:1.6}
.panel .num{font:600 12px/1 var(--mono);letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid color-mix(in oklab,var(--line) 40%,transparent);
  border-radius:var(--rl);padding:32px 22px;text-align:center;min-width:0}
.stat b{display:block;font:400 clamp(30px,4.2vw,44px)/1 var(--serif);letter-spacing:-.03em;margin-bottom:10px}
.stat span{font-size:14px;color:var(--ink-muted);line-height:1.5;display:block}

/* checklists */
.marks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.marks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
  font-size:15.5px;line-height:1.55;color:var(--ink-muted);min-width:0}
.marks svg{width:16px;height:16px;margin-top:4px}
.marks .no svg{color:var(--bad)} .marks .yes svg{color:var(--good)}

/* prose */
.prose{font-size:17px;line-height:1.72;color:var(--ink-muted)}
.prose h3{font-family:var(--serif);font-size:26px;color:var(--ink);margin:44px 0 14px;letter-spacing:-.02em}
.prose h4{font-size:15px;font-weight:600;color:var(--ink);margin:30px 0 10px}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose code{font:500 14px var(--mono);background:var(--band);padding:2px 6px;border-radius:6px;color:var(--ink)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose ul{padding-left:20px;margin:0 0 1em}
.prose li{margin-bottom:.5em}

/* tables — wide content scrolls INSIDE its own container. A scroll container
   still has a non-zero min-content contribution, so the child needs an
   explicit min-width:0 or the page widens instead. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:460px}
th{text-align:left;font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);padding:0 14px 12px 0;white-space:nowrap}
td{padding:11px 14px 11px 0;border-top:1px solid color-mix(in oklab,var(--line) 34%,transparent);
  font-variant-numeric:tabular-nums}
td.n,th.n{text-align:right;font-family:var(--mono);font-size:13.5px}

/* photo bands */
.figure{border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
/* THE CAPTION SITS ON A PHOTOGRAPH AND THE GRADIENT WAS NOT ENOUGH. White on
   a fade-to-dark reads fine over the dark end and sat at 1.21:1 over the top
   of the fade, where the honey photo behind it is nearly white. The scrim now
   reaches full strength before the text starts, and the text itself sits in
   the opaque part. */
.figure figcaption{position:relative;padding:16px 24px 18px;font-size:13.5px;
  color:var(--on-deep);background-color:var(--deep)}
/* The fade above the caption is a separate layer, and that is not cosmetic.
   A gradient is not a resolvable background: tools/audit-live.mjs walks up for
   an opaque ancestor and finds the photograph, so white-on-gradient is
   reported at 1.21:1 whatever it really renders at. Putting the text on a
   flat colour makes the contrast a fact rather than a function of which part
   of the photo is underneath, AND makes it something the auditor can check. */
.figure figcaption::before{content:'';position:absolute;inset:auto 0 100%;height:70px;
  background:linear-gradient(transparent,var(--deep));pointer-events:none}
.figure figcaption code{background:color-mix(in oklab,var(--on-deep) 18%,transparent);color:var(--on-deep)}
.figure{display:flex;flex-direction:column}
.figure img{flex:1;min-height:0}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:56px}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr);gap:28px}}
.split h3{font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);letter-spacing:-.024em;margin:0 0 16px}

/* ---------- footer ---------- */
footer{background:var(--deep);color:var(--on-deep-muted);padding:70px 0 44px;font-size:14.5px}
footer a{color:var(--on-deep);text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;
  border-bottom:1px solid color-mix(in oklab,var(--on-deep) 16%,transparent)}
/* THE MARK NEEDS AN EXPLICIT SIZE HERE. In the navbar it inherits one from
   the .bar-mark rule; in the footer nothing constrained the inline SVG and it
   grew to fill the column — a 300px logo that every file check passed over. */
.foot-mark{font-family:var(--serif);font-size:26px;color:var(--on-deep);display:flex;align-items:center;gap:11px}
.foot-mark svg{width:26px;height:26px;flex:none}
.foot-links{display:flex;gap:30px;flex-wrap:wrap}
.foot-bot{padding-top:26px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px}
.foot-bot p{max-width:62ch;color:color-mix(in oklab,var(--on-deep) 62%,var(--deep))}

/* ---------- app / gauge widgets ---------- */
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:13.5px;color:var(--ink-muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:12px 14px;border-radius:12px;font:400 15px var(--mono);
  border:1px solid color-mix(in oklab,var(--line) 60%,transparent);background:var(--raised);color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px}
.note{font-size:13.5px;color:var(--ink-faint);line-height:1.55}
.status{border-radius:12px;padding:12px 14px;font-size:14px;margin-top:14px;
  background:var(--band);border:1px solid color-mix(in oklab,var(--line) 44%,transparent)}
.status.err{background:color-mix(in oklab,var(--bad) 12%,var(--raised));border-color:color-mix(in oklab,var(--bad) 34%,transparent)}
.status.ok{background:color-mix(in oklab,var(--good) 11%,var(--raised));border-color:color-mix(in oklab,var(--good) 32%,transparent)}
.mono{font-family:var(--mono);font-size:13.5px;word-break:break-all}
/* ---------- the load line, as a component ----------
   The ladder is the argument, so it is a real element rather than a picture:
   six marks at different heights, each labelled with the water it applies to.
   Rendered from data, never hand-positioned. */
.ladder{display:grid;gap:0;font:500 12.5px/1 var(--mono);letter-spacing:-.02em;position:relative;
  padding-left:0;min-width:0}
.ladder-row{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;
  padding:9px 0;border-top:1px solid color-mix(in oklab,var(--line) 30%,transparent)}
.ladder-row:first-child{border-top:0}
.ladder-key{color:var(--ink-faint);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.ladder-bar{height:9px;border-radius:5px;background:color-mix(in oklab,var(--line) 34%,transparent);
  position:relative;overflow:hidden;min-width:0}
.ladder-bar i{position:absolute;inset:0 auto 0 0;background:var(--mark);border-radius:5px;display:block}
.ladder-val{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}

/* the disc, inline, at text size */
.disc{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;color:var(--mark)}
.disc svg{width:100%;height:100%}

/* a painted rule: the mark colour, used as a graphic and never as text */
.rule-mark{height:3px;background:var(--mark);border-radius:2px;width:56px;margin:0 auto 22px}

/* two-column comparison where the point is the difference */
.versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-radius:var(--rl);
  overflow:hidden;border:1px solid color-mix(in oklab,var(--line) 46%,transparent);background:var(--surface)}
.versus > div{padding:26px 24px;min-width:0}
.versus > div + div{border-left:1px solid color-mix(in oklab,var(--line) 40%,transparent)}
.versus h4{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px}
.versus .big{font:400 clamp(28px,4vw,40px)/1 var(--serif);letter-spacing:-.03em;display:block;margin-bottom:8px}
.versus p{font-size:14.5px;color:var(--ink-muted);margin:0}
@media (max-width:620px){.versus{grid-template-columns:minmax(0,1fr)}
  .versus > div + div{border-left:0;border-top:1px solid color-mix(in oklab,var(--line) 40%,transparent)}}

.tag{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:var(--band);color:var(--ink-muted)}
.tag.ok{background:color-mix(in oklab,var(--good) 15%,var(--surface));color:var(--good)}
.tag.no{background:color-mix(in oklab,var(--bad) 14%,var(--surface));color:var(--bad)}
.tag.mid{background:color-mix(in oklab,var(--warn) 16%,var(--surface));color:var(--warn)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--raised);padding:12px 18px;border-radius:12px}