@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   SHARPCUT — THE COUPON
   The same design system as the app. One language across both.

   THESIS
   Every betting product is a dark casino floor. SharpCut is not a
   bookmaker, so it should not look like one. The core artifact here is a
   printed slip: someone hands over a code, we hand back a marked-up
   coupon. So the interface IS that coupon — paper, ruled boxes, rubber
   stamps, perforated tear-offs, till-roll footers.

   TWO PRINTINGS
   Light "Newsprint" — a pools coupon fresh off the press.
   Dark  "Carbon"    — the carbon copy underneath.
   The language never changes between them. Only the ink does.

   RULES
   · Zero border-radius. Zero box-shadow. Depth comes from rules and fills.
   · All numerics in IBM Plex Mono. That is how a reader spots data.
   · Colour is never the only signal — stamps carry words.
   · One highlighter moment per screen.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"]{
  --paper:      #E6E7E0;
  --paper-2:    #DCDDD4;
  --paper-edge: #CFD0C7;
  --ink:        #14161A;
  --faded:      #6E7169;
  --rule:       rgba(20,22,26,.22);
  --rule-soft:  rgba(20,22,26,.12);
  --biro:       #1E3A6E;
  --stamp:      #C0212C;
  --mark:       #EFE04A;
  --mark-ink:   #14161A;
}

[data-theme="dark"]{
  --paper:      #16181C;
  --paper-2:    #1E2127;
  --paper-edge: #0D0E11;
  --ink:        #E8E6DE;
  --faded:      #8A8D85;
  --rule:       rgba(232,230,222,.20);
  --rule-soft:  rgba(232,230,222,.11);
  --biro:       #7FA5E8;
  --stamp:      #F0616B;
  --mark:       #C9B93A;
  --mark-ink:   #16181C;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html{scroll-behavior:smooth;scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper-edge);
  color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  transition:background-color .2s ease,color .2s ease;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:16px}          /* stops iOS zoom on focus */
:focus-visible{outline:2px solid var(--biro);outline-offset:2px}

::selection{background:var(--mark);color:var(--mark-ink)}

/* ── TYPE ROLES ──────────────────────────────────────────────────────── */

.d{
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;letter-spacing:-.01em;
  text-transform:uppercase;line-height:.94;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* Form-label voice, lifted straight off a printed coupon */
.lbl{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faded);
}

h1,h2,h3,h4{font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  letter-spacing:-.012em;text-transform:uppercase;line-height:.96}

.h1{font-size:clamp(2.4rem,6.4vw,4rem)}
.h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.h3{font-size:clamp(1.2rem,2vw,1.55rem)}

.lede{font-size:clamp(.95rem,1.1vw,1.06rem);line-height:1.62;color:var(--faded);max-width:62ch}
.lede strong{color:var(--ink);font-weight:600}
.lede--center{margin-inline:auto;text-align:center}

.is-pos{color:var(--biro)}
.is-neg{color:var(--stamp)}
.visually-hidden,.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── STRUCTURAL DEVICES ──────────────────────────────────────────────
   Each of these encodes something true rather than decorating.
   Perforation = a printed document begins or ends here.
   Dashed rule = a tear line inside one document.
   Solid rule  = a boundary between documents.
   Hatching    = always and only the bookmaker's number. */

.perf{
  height:1px;opacity:.38;
  background:repeating-linear-gradient(90deg,var(--ink) 0 5px,transparent 5px 10px);
}
.hatch{background:repeating-linear-gradient(45deg,var(--rule) 0 3px,transparent 3px 6px)}
.box{border:1.5px solid var(--ink);background:var(--paper)}

/* ── LAYOUT ──────────────────────────────────────────────────────────── */

.sheet{
  max-width:1180px;margin-inline:auto;background:var(--paper);
  border-inline:1.5px solid var(--ink);min-height:100vh;
}
.container{width:100%;max-width:1060px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.container--narrow{max-width:760px}

.section{padding-block:clamp(48px,7vw,88px);border-top:1.5px solid var(--ink)}
.section--flush{border-top:0}

.section__head{margin-bottom:clamp(28px,4vw,44px);max-width:64ch}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .lede{margin-inline:auto}
.section__head .h2{margin:10px 0 12px}

.kicker{
  display:inline-block;font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faded);border-bottom:1.5px solid var(--rule);padding-bottom:3px;
}
.kicker--mark{background:var(--mark);color:var(--mark-ink);border-bottom:0;padding:3px 8px}

/* ── SKIP LINK ───────────────────────────────────────────────────────── */

.skip-link{
  position:absolute;left:-999px;top:8px;z-index:200;
  background:var(--ink);color:var(--paper);padding:10px 16px;
  font-family:'Anton',sans-serif;text-transform:uppercase;
}
.skip-link:focus{left:8px}

/* ── NAV ─────────────────────────────────────────────────────────────── */

.nav{
  position:sticky;top:0;z-index:100;
  background:var(--paper);border-bottom:1.5px solid var(--ink);
}
.nav__inner{display:flex;align-items:center;gap:20px;height:64px}

.brand{display:flex;align-items:baseline;gap:8px;flex-shrink:0}
.brand__word{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:-.01em}
.brand__tag{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faded)}

.nav__links{display:flex;gap:22px;margin-left:auto}
.nav__links a{
  font-size:13px;font-weight:500;color:var(--faded);
  padding-bottom:2px;border-bottom:1.5px solid transparent;transition:color .12s,border-color .12s;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

.nav__actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__links + .nav__actions{margin-left:0}

.nav__burger{display:none;background:none;border:1.5px solid var(--ink);width:38px;height:34px;
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.nav__burger span{display:block;width:16px;height:1.5px;background:var(--ink)}

@media (max-width:900px){
  .nav__links{
    position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1.5px solid var(--ink);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav__links.is-open{max-height:340px}
  .nav__links a{padding:13px clamp(16px,4vw,40px);border-bottom:1px dashed var(--rule-soft)}
  .nav__burger{display:flex}
  .nav__signin{display:none}
}

/* ── THEME TOGGLE ────────────────────────────────────────────────────
   Framed as which printing you are reading, because that is what it is
   in this language — a press run, not a mood. */

.printing{display:flex;border:1.5px solid var(--ink);height:30px;overflow:hidden}
.printing button{
  width:30px;background:transparent;border:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;
  color:var(--faded);transition:background-color .15s,color .15s;
}
.printing button + button{border-left:1.5px solid var(--ink)}
.printing button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:12px 22px;font-size:14px;cursor:pointer;
  transition:background-color .13s,color .13s;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn svg{width:16px;height:16px}

.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--mark{background:var(--mark);color:var(--mark-ink);border-color:var(--ink)}
.btn--mark:hover{background:transparent;color:var(--ink)}
.btn--lg{padding:15px 28px;font-size:17px}
.btn--sm{padding:8px 14px;font-size:12px}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:var(--ink);color:var(--paper)}

/* ── HERO ────────────────────────────────────────────────────────────── */

.hero{padding-block:clamp(40px,6vw,72px) clamp(36px,5vw,60px)}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:940px){.hero__inner{grid-template-columns:1fr}}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faded);
  border:1.5px solid var(--rule);padding:5px 10px;margin-bottom:20px;
}
.eyebrow strong{color:var(--ink)}
.eyebrow .dot{width:5px;height:5px;background:var(--stamp);border-radius:50%}

.hero__title{font-size:clamp(2.3rem,6vw,3.9rem);margin-bottom:16px}
.hero__title .grad{color:var(--stamp)}
.hero__sub{font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.6;color:var(--faded);
  max-width:46ch;margin-bottom:26px}
.hero__sub strong{color:var(--ink);font-weight:600}

.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}

.hero__chips{list-style:none;display:flex;flex-direction:column;gap:8px}
.hero__chips li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--faded)}
.hero__chips svg{width:13px;height:13px;flex-shrink:0;margin-top:4px;color:var(--biro)}

/* ── THE CHECKER ─────────────────────────────────────────────────────── */

.checker{border:1.5px solid var(--ink);background:var(--paper)}
.checker__head{padding:14px 16px;border-bottom:1.5px solid var(--ink);background:var(--paper-2)}
.checker__title{font-size:16px;margin-bottom:4px}
.checker__sub{font-size:12.5px;color:var(--faded);line-height:1.5}

.checker__form{display:flex;border-bottom:1.5px solid var(--ink)}
.checker__input{
  flex:1;min-width:0;padding:15px 16px;background:transparent;border:0;outline:0;
  font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:700;letter-spacing:.18em;
}
.checker__input::placeholder{color:var(--faded);letter-spacing:.1em;font-weight:500}
.checker__form .btn{border:0;border-left:1.5px solid var(--ink);padding-inline:20px}

.checker__samples{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:11px 16px;border-bottom:1px dashed var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--faded);
}
.checker__samples button{
  background:transparent;border:1.5px solid var(--rule);cursor:pointer;
  padding:3px 8px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  color:var(--ink);transition:background-color .12s,border-color .12s;
}
.checker__samples button:hover{background:var(--mark);color:var(--mark-ink);border-color:var(--ink)}
.checker__samples button.is-lead{border-color:var(--ink)}

/* Same 16px gutter as .checker__head, .checker__samples and .checker__foot, so
   the graded slip lines up with the rest of the card instead of running into
   its border and clipping the edge figures. */
.checker__out{padding:0 16px}
.checker__out:not(:empty){border-bottom:1px dashed var(--rule);padding-bottom:16px}
.checker__foot{padding:11px 16px;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;line-height:1.7;letter-spacing:.05em;color:var(--faded);text-transform:uppercase}

/* ── MARQUEE ─────────────────────────────────────────────────────────── */

.marquee{
  margin-top:clamp(30px,4vw,50px);
  border-block:1.5px solid var(--ink);overflow:hidden;padding-block:10px;
}
.marquee__track{
  display:flex;gap:26px;white-space:nowrap;width:max-content;
  animation:marquee 42s linear infinite;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faded);
}
.marquee i{color:var(--stamp);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ── COST TABLE ──────────────────────────────────────────────────────
   The most valuable fact we own, given the plainest possible treatment.
   The bar column is the same number again — a percentage is easy to skim
   past, a bar filling two thirds of a row is not. */

.costtable{border:1.5px solid var(--ink)}
.costtable table{width:100%;border-collapse:collapse}
.costtable th,.costtable td{padding:12px 14px;text-align:left;border-bottom:1px dashed var(--rule)}
.costtable thead th{
  background:var(--paper-2);border-bottom:1.5px solid var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faded);
}
.costtable tbody th{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:700;width:70px}
.costtable td.mono{font-size:15px;font-weight:600}
.costtable tbody tr:last-child th,.costtable tbody tr:last-child td{border-bottom:0}
.costtable tr.is-hot td.mono,.costtable tr.is-hot th{color:var(--stamp)}
.costtable__viz{width:44%;padding-right:18px}
.costbar{
  display:block;height:11px;width:var(--w);
  background:var(--stamp);
  transform-origin:left;animation:costgrow .9s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes costgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.costbar{animation:none}}
.costtable__foot{
  padding:12px 14px;background:var(--paper-2);border-top:1.5px solid var(--ink);
  font-size:12.5px;color:var(--faded);line-height:1.55;
}
@media (max-width:640px){.costtable__viz,.costtable__vizhead{display:none}}

/* ── ADDITIVE-FALLACY NOTE ───────────────────────────────────────────── */

.costnote{margin-top:16px;border:1.5px solid var(--ink);border-left-width:5px;
  border-left-color:var(--stamp);padding:18px 20px}
.costnote h3{font-size:17px;margin-bottom:10px}
.costnote p{font-size:14px;line-height:1.62;color:var(--faded);margin-bottom:10px}
.costnote p:last-child{margin-bottom:0}
.costnote__punch{font-size:17px!important;color:var(--ink)!important}
.costnote__punch b{font-family:'IBM Plex Mono',monospace;color:var(--stamp)}

/* ── CHECK CARDS + STAMPS ────────────────────────────────────────────
   Three states of one component: a leg we like, a leg we don't, and a leg
   we refuse to judge. The third gets equal billing because it is the one
   competitors never show. */

.checkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:12px}
.checkcard{position:relative;border:1.5px solid var(--ink);padding:16px 16px 18px;background:var(--paper)}
.checkcard--red{background:color-mix(in srgb,var(--stamp) 5%,var(--paper))}

.checkcard__stamp{
  position:absolute;top:14px;right:14px;transform:rotate(-7deg);
  font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.09em;
  border:2px solid currentColor;padding:2px 8px;opacity:.9;
}
.checkcard--green .checkcard__stamp{color:var(--biro)}
.checkcard--red .checkcard__stamp{color:var(--stamp)}
.checkcard__stamp--grey{color:var(--faded);border-style:dashed}

.checkcard h3{font-size:16px;margin-bottom:12px;padding-right:88px;line-height:1.2}
.checkcard h3 em{font-style:normal;color:var(--faded);font-family:'Archivo',sans-serif;
  font-weight:500;text-transform:none;font-size:13px}

.checkcard__nums{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--rule)}
.checkcard__nums div{display:flex;flex-direction:column;gap:2px}
.checkcard__nums dt{font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faded)}
.checkcard__nums dd{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:700}

.checkcard p{font-size:13px;line-height:1.6;color:var(--faded)}
.checkcard__refuse{margin-bottom:10px}
.checkcard__refuse strong{color:var(--ink)}
.checkcard__refuse-note{padding-top:10px;border-top:1px dashed var(--rule);font-size:12px!important}

/* ── FIX TICKET ──────────────────────────────────────────────────────── */

.fixstrip{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;
  margin-top:14px;border:1.5px solid var(--ink);padding:20px}
@media (max-width:820px){.fixstrip{grid-template-columns:1fr;gap:18px}}
.fixstrip h3{font-size:20px;margin:10px 0 10px}
.fixstrip p{font-size:14px;line-height:1.62;color:var(--faded)}

.fixticket{border:1.5px solid var(--ink);padding:14px}
.fixticket__row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:13px;margin-bottom:8px}
.fixticket__row.is-out{color:var(--faded)}
.fixticket__row.is-out s{text-decoration-color:var(--stamp);text-decoration-thickness:2px}
.fixticket__sum{margin-top:12px;padding-top:12px;border-top:1px dashed var(--rule);font-size:13px}
.fixticket__code{
  margin-top:12px;padding:11px 12px;background:var(--mark);color:var(--mark-ink);
  border:1.5px solid var(--ink);display:flex;flex-direction:column;gap:2px;
}
.fixticket__code span{font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.fixticket__code b{font-family:'IBM Plex Mono',monospace;font-size:24px;letter-spacing:.18em}

/* ── MARGIN LEDGER ───────────────────────────────────────────────────
   Highlighter yellow, not biro. Biro means "in your favour" in this
   system and this is the opposite — it is what the house took. */

.ledger{border:1.5px solid var(--ink)}
.ledger__head{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1.5px solid var(--ink)}
.ledger__fig{padding:16px;display:flex;flex-direction:column;gap:4px;border-right:1.5px solid var(--ink)}
.ledger__fig:last-child{border-right:0}
.ledger__fig span{font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faded)}
.ledger__fig b{font-family:'Anton',sans-serif;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1}
.ledger__fig em{font-style:normal;font-size:11px;color:var(--faded)}
.ledger__fig--gap{background:var(--mark);color:var(--mark-ink)}
.ledger__fig--gap span,.ledger__fig--gap em{color:var(--mark-ink);opacity:.65}

.ledger__chart{padding:16px 14px 10px}
.ledger__chart svg{width:100%;height:170px}
.ledger__chart path[stroke]{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.5s cubic-bezier(.3,.8,.3,1) .2s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ledger__chart path[stroke]{animation:none;stroke-dashoffset:0}}
.ledger__axis{display:flex;justify-content:space-between;padding-top:8px;
  font-size:9px;letter-spacing:.14em;color:var(--faded)}

.ledger__facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1.5px solid var(--ink)}
.ledger__facts li{padding:14px 16px;border-right:1.5px solid var(--ink);
  display:flex;flex-direction:column;gap:4px}
.ledger__facts li:last-child{border-right:0}
.ledger__facts b{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:700}
.ledger__facts span{font-size:11.5px;color:var(--faded);line-height:1.45}

.ledger__note{padding:13px 16px;border-top:1.5px solid var(--ink);
  background:var(--paper-2);font-size:12.5px;color:var(--faded);line-height:1.6}

@media (max-width:760px){
  .ledger__head,.ledger__facts{grid-template-columns:1fr}
  .ledger__fig,.ledger__facts li{border-right:0;border-bottom:1.5px solid var(--ink)}
  .ledger__facts li:last-child{border-bottom:0}
}

/* ── VOICES ──────────────────────────────────────────────────────────── */

.voices{border:1.5px solid var(--ink)}
.voices__tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid var(--ink)}
.voices__tabs button{
  flex:1;min-width:88px;padding:11px 6px;background:transparent;border:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.06em;
  transition:background-color .13s,color .13s;
}
.voices__tabs button + button{border-left:1.5px solid var(--ink)}
.voices__tabs button[aria-selected="true"],.voices__tabs button.is-active{
  background:var(--mark);color:var(--mark-ink);font-weight:700;
}
.voices__panes{padding:20px}
.voices__panes p{font-size:14.5px;line-height:1.68}

/* ── REJECTED EFFECTS ────────────────────────────────────────────────── */

.rejected{border:1.5px solid var(--ink)}
.rejected table{width:100%;border-collapse:collapse}
.rejected th,.rejected td{padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px dashed var(--rule)}
.rejected thead th{background:var(--paper-2);border-bottom:1.5px solid var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faded)}
.rejected tbody th{font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px;
  width:168px;text-transform:none;letter-spacing:0}
.rejected tbody td{font-size:13px;color:var(--faded);line-height:1.55}
.rejected tbody td:last-child{width:104px}
.tag{display:inline-block;padding:2px 8px;border:1.5px solid currentColor;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faded)}

.rejected__spot{padding:18px;background:var(--paper-2);border-top:1.5px solid var(--ink)}
.rejected__spot h3{font-size:17px;margin-bottom:10px}
.rejected__spot p{font-size:13.5px;line-height:1.62;color:var(--faded);margin-bottom:9px}
.rejected__punch{color:var(--ink)!important;font-weight:600}

@media (max-width:640px){
  .rejected tbody th,.rejected tbody td{display:block;width:auto;border-bottom:0;padding-block:4px}
  .rejected tbody th{padding-top:13px}
  .rejected tbody td:last-child{padding-bottom:13px;border-bottom:1px dashed var(--rule)}
}

/* ── HARD NUMBERS ────────────────────────────────────────────────────── */

.hardnums{margin-top:14px;border:1.5px solid var(--ink);padding:20px}
.hardnums h3{font-size:18px;margin-bottom:14px}
.hardnums__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border:1.5px solid var(--ink);margin-bottom:14px}
.hardnums__grid div{padding:13px 14px;border-right:1.5px solid var(--ink);
  display:flex;flex-direction:column;gap:4px}
.hardnums__grid div:last-child{border-right:0}
.hardnums__grid b{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:700;line-height:1}
.hardnums__grid span{font-size:11px;color:var(--faded);line-height:1.45}
.hardnums__note{font-size:13.5px;line-height:1.62;color:var(--faded);margin-bottom:14px}
.hardnums__note strong{color:var(--ink)}
@media (max-width:620px){
  .hardnums__grid div{border-right:0;border-bottom:1.5px solid var(--ink)}
  .hardnums__grid div:last-child{border-bottom:0}
}

/* ── PRICING ─────────────────────────────────────────────────────────── */

.curswitch{display:inline-flex;border:1.5px solid var(--ink);margin-top:16px}
.curswitch__btn{padding:7px 14px;background:transparent;border:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.06em}
.curswitch__btn + .curswitch__btn{border-left:1.5px solid var(--ink)}
.curswitch__btn.is-active{background:var(--ink);color:var(--paper)}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px}
.plan{border:1.5px solid var(--ink);padding:20px 18px;display:flex;flex-direction:column;position:relative}
.plan--featured{background:var(--paper-2)}
.plan__ribbon{
  position:absolute;top:-9px;left:18px;background:var(--mark);color:var(--mark-ink);
  border:1.5px solid var(--ink);padding:2px 9px;
  font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
}
.plan h3{font-size:19px;margin-bottom:8px}
.plan__price{display:flex;align-items:baseline;gap:5px;margin-bottom:5px}
.plan__price span{font-family:'Anton',sans-serif;font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1}
.plan__price em{font-style:normal;font-size:12px;color:var(--faded)}
.plan__tag{font-size:12px;color:var(--faded);margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px dashed var(--rule)}

.ticks{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:18px;flex:1}
.ticks li{position:relative;padding-left:18px;font-size:13px;line-height:1.5;color:var(--faded)}
.ticks li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:1.5px;background:var(--biro)}
.ticks li b{color:var(--ink);font-weight:700}

.plans__note{margin-top:16px;font-size:12.5px;color:var(--faded);line-height:1.6;text-align:center}
.plans__note strong{color:var(--ink)}

.guarantee{display:flex;gap:16px;margin-top:16px;border:1.5px solid var(--ink);padding:20px}
.guarantee__mark{flex-shrink:0;color:var(--biro)}
.guarantee__mark svg{width:30px;height:30px}
.guarantee h3{font-size:18px;margin-bottom:9px}
.guarantee p{font-size:13.5px;line-height:1.6;color:var(--faded);margin-bottom:9px}
.guarantee p:last-child{margin-bottom:0}
.guarantee__small{font-size:12.5px!important}
@media (max-width:560px){.guarantee{flex-direction:column;gap:12px}}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq{border:1.5px solid var(--ink)}
.faq details{border-bottom:1px dashed var(--rule)}
.faq details:last-child{border-bottom:0}
.faq summary{
  padding:15px 16px;cursor:pointer;list-style:none;
  font-family:'Anton',sans-serif;font-size:15px;text-transform:uppercase;
  letter-spacing:-.005em;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;font-size:17px;color:var(--faded)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{background:var(--paper-2)}
.faq div{padding:0 16px 16px}
.faq p{font-size:13.5px;line-height:1.65;color:var(--faded)}
.faq a{border-bottom:1.5px solid var(--biro);color:var(--biro)}

/* ── CTA / WAITLIST ──────────────────────────────────────────────────── */

.cta{border:1.5px solid var(--ink);padding:clamp(26px,4vw,42px);text-align:center}
.h2--cta{margin:12px 0 14px}
.h2--cta .grad{color:var(--stamp)}

.wform{margin-top:24px}
.wform__one{display:flex;gap:0;border:1.5px solid var(--ink);max-width:460px;margin-inline:auto}
.wform__one .field{flex:1;display:flex}
.wform__one input{flex:1;min-width:0;padding:14px 16px;background:transparent;border:0;outline:0;
  font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;letter-spacing:.04em}
.wform__one .btn{border:0;border-left:1.5px solid var(--ink)}
.wform__hint{margin-top:10px;font-size:11.5px;color:var(--faded)}
.wform__status{margin-top:8px;font-size:12.5px;font-weight:600}
.wform__status.is-ok{color:var(--biro)}
.wform__status.is-err{color:var(--stamp)}

.cta__legal{margin-top:22px;padding-top:18px;border-top:1px dashed var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;line-height:1.9;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faded)}

/* ── FOOTER ──────────────────────────────────────────────────────────── */

.footer{border-top:1.5px solid var(--ink);background:var(--paper-2)}
.footer__inner{display:grid;grid-template-columns:1.2fr 2fr;gap:32px;
  padding-block:clamp(30px,4vw,44px)}
@media (max-width:760px){.footer__inner{grid-template-columns:1fr;gap:24px}}
.footer__brand p{margin-top:10px;font-size:12.5px;color:var(--faded);max-width:30ch}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:22px}
.footer__cols h4{font-size:12px;margin-bottom:10px;letter-spacing:.06em}
.footer__cols a{display:block;font-size:12.5px;color:var(--faded);padding-block:4px}
.footer__cols a:hover{color:var(--ink)}
.footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-block:14px;border-top:1px dashed var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faded)}
.footer__base a{border-bottom:1px solid var(--rule)}

/* ── TOAST ───────────────────────────────────────────────────────────── */

.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  padding:11px 18px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  z-index:200;transition:transform .28s cubic-bezier(.2,.9,.25,1);
}
.toast.is-on{transform:translate(-50%,0)}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION
   Four movements, each meaning one thing:
     rise  — 350ms, staggered 60–70ms between siblings. Lists arrive rather
             than dump.
     press — the stamp, with a 1.4 overshoot. The only playful moment here.
     feed  — a panel opening, like paper feeding out of a printer.
     blink — live clocks and in-flight work only, never decoration.

   Everything is gated on .js so a reader without scripting never meets an
   element stranded at opacity:0, and everything collapses to its end state
   under prefers-reduced-motion. js/app.js marks revealed elements .is-inview
   and js/motion.js marks staggered ones .is-in, so both are honoured.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── rise ────────────────────────────────────────────────────────────── */

.js .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1) var(--d,0ms),
             transform .35s cubic-bezier(.2,.8,.2,1) var(--d,0ms);
  will-change:opacity,transform;
}
.js .reveal.is-inview,
.js .reveal.is-in{opacity:1;transform:none;will-change:auto}

/* Sibling stagger without a script: any ruled group counts its own children.
   60ms a step matches the hand-tuned delays js/motion.js uses. */
.js [data-stagger] > *{
  opacity:0;transform:translateY(10px);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1) var(--sd,0ms),
             transform .35s cubic-bezier(.2,.8,.2,1) var(--sd,0ms);
}
.js [data-stagger].is-inview > *{opacity:1;transform:none}
.js [data-stagger] > *:nth-child(1){--sd:0ms}
.js [data-stagger] > *:nth-child(2){--sd:60ms}
.js [data-stagger] > *:nth-child(3){--sd:120ms}
.js [data-stagger] > *:nth-child(4){--sd:180ms}
.js [data-stagger] > *:nth-child(5){--sd:240ms}
.js [data-stagger] > *:nth-child(6){--sd:300ms}
.js [data-stagger] > *:nth-child(7){--sd:360ms}
.js [data-stagger] > *:nth-child(n+8){--sd:420ms}

/* ── press: the stamp lands ──────────────────────────────────────────── */

@keyframes press{
  0%  {opacity:0;transform:rotate(-7deg) scale(1.4)}
  55% {opacity:1;transform:rotate(-7deg) scale(.94)}
  100%{opacity:.9;transform:rotate(-7deg) scale(1)}
}
.js .reveal.is-inview .checkcard__stamp,
.js .checkcard.is-inview .checkcard__stamp{
  animation:press .42s cubic-bezier(.3,1.5,.4,1) both;
}
/* the graded slip's score is stamped the same way, square to the page */
@keyframes press-sq{
  0%  {opacity:0;transform:scale(1.4)}
  55% {opacity:1;transform:scale(.94)}
  100%{opacity:1;transform:none}
}
.ck-score{animation:press-sq .44s cubic-bezier(.3,1.5,.4,1) both}
.ck-killer{animation:press-sq .38s cubic-bezier(.3,1.4,.4,1) both .12s}

/* ── feed: paper out of a printer ────────────────────────────────────── */

@keyframes feed{
  from{opacity:0;transform:translateY(-6px);clip-path:inset(0 0 100% 0)}
  to  {opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
.js .faq details[open] > div,
.js .voices__panes > [role="tabpanel"]:not([hidden]),
.js .checker__out.is-on{animation:feed .34s cubic-bezier(.2,.8,.2,1) both}

/* ── blink: live only ────────────────────────────────────────────────── */

@keyframes blink{50%{opacity:.28}}
.js .is-live,
.js .board__date .dot,
.js .eyebrow .dot{animation:blink 1.6s steps(1,end) infinite}

/* ── affordances ─────────────────────────────────────────────────────── */

/* Depth comes from rules and fills, so a press is a 1px shift, never a shadow */
.btn{transition:background-color .14s ease,color .14s ease,transform .08s ease}
.btn:active{transform:translateY(1px)}
.checker__samples button,
.bfilter,
.printing button{transition:background-color .14s ease,color .14s ease,border-color .14s ease}

/* the marquee is a reading surface — stop it when someone wants to read it */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}

/* ── the whole layer is optional ─────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal.is-inview,
  .js .reveal.is-in,
  .js [data-stagger] > *,
  .js [data-stagger].is-inview > *{opacity:1;transform:none;transition:none}
  /* the stamp settles straight to its resting rotation */
  .js .checkcard__stamp,
  .js .checkcard.is-inview .checkcard__stamp{animation:none;opacity:.9;transform:rotate(-7deg)}
  .ck-score,.ck-killer{animation:none}
  .js .faq details[open] > div,
  .js .voices__panes > [role="tabpanel"]:not([hidden]),
  .js .checker__out.is-on{animation:none}
  .js .is-live,.js .board__date .dot,.js .eyebrow .dot{animation:none}
  .marquee__track{animation:none}
  .btn:active{transform:none}
}

/* Aliases for stylesheets written against the previous system.
   css/pages.css still speaks the old token names; these keep it rendering in
   the new printing. Radii and shadows resolve to nothing on purpose — rule 4
   is that depth comes from rules and fills, never blur. */
:root{
  --f-display:'Anton','Arial Narrow',sans-serif;
  --f-body:'Archivo',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px;
  --fs-lg:18px; --fs-xl:21px; --fs-2xl:26px; --fs-3xl:32px;
  --fs-4xl:40px; --fs-5xl:52px;
  --tr-tight:-.012em; --tr-tighter:-.02em; --tr-tightest:-.03em;
  --r-lg:0; --r-md:0; --r-sm:0; --r:0; --r-xl:0;
  --sh-1:none; --sh-2:none;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);

  /* css/demo.css sets its page padding from this. Undefined, every
     `padding:.5rem var(--gutter)` collapsed to zero and the app bar, the
     notice strip and the board rail all ran into the edge of the screen. */
  --gutter:clamp(16px,4vw,40px);

  /* css/share.css still speaks the old palette. Mapped rather than deleted:
     the share card is generated into a canvas and is the one surface we do
     not re-render on a theme change. */
  --txt:var(--ink);
  --txt-2:var(--faded);
  --txt-3:var(--faded);
  --cut:var(--biro);
  --cut-dim:color-mix(in srgb,var(--biro) 55%,var(--paper));
  --line:var(--rule-soft);
  --line-2:var(--rule);
  --line-3:var(--ink);
}


/* ═══════════════════════════════════════════════════════════════════════
   THE GRADED SLIP  (.ck-*)
   Rendered by js/herocheck.js into .checker__out. This is the marked-up
   coupon handed back: a stamped verdict, the margin drawn as a gap, then
   the legs torn off one per dashed rule.
   ═══════════════════════════════════════════════════════════════════════ */

.checker__out:empty{display:none}

/* A tear crosses the whole document, so the blocks that carry a horizontal
   rule bleed back out through the gutter and re-inset their own content.
   Boxes that are not rules — the killer leg, the actions — keep the gutter. */
.ck-verdict,
.ck-bar,
.ck-metrics,
.ck-leg,
.ck-empty{margin-inline:-16px;padding-inline:16px}

/* ── verdict: the stamp and the sentence ─────────────────────────────── */

.ck-verdict{
  display:flex;align-items:flex-start;gap:14px;
  padding-block:14px 16px;border-top:1px dashed var(--rule);
}
.ck-score{
  flex:0 0 auto;display:flex;align-items:baseline;justify-content:center;
  min-width:74px;padding:8px 10px 6px;
  border:1.5px solid var(--stamp);color:var(--stamp);
  font-family:'Anton','Arial Narrow',sans-serif;font-size:34px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.ck-score small{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.06em}
.ck-verdict.is-good .ck-score{border-color:var(--biro);color:var(--biro)}

.ck-verdict__body{min-width:0}
.ck-verdict__body b{
  display:block;font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.12;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--stamp);
  margin-bottom:5px;
}
.ck-verdict.is-good .ck-verdict__body b{color:var(--biro)}
.ck-verdict__body p{font-size:13px;line-height:1.6;color:var(--faded)}
.ck-verdict__body p b{
  display:inline;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);
  margin:0;font-variant-numeric:tabular-nums;
}

/* ── the bar: hatching is the bookmaker's price, solid is our number ──── */

.ck-bar{padding-bottom:14px;border-bottom:1px dashed var(--rule)}
.ck-bar__track{
  position:relative;height:26px;border:1.5px solid var(--ink);background:var(--paper);
}
/* the bookmaker's implied probability — always the hatched band */
.ck-bar__mark{
  position:absolute;inset:0 auto 0 0;width:var(--l,0%);
  background:repeating-linear-gradient(45deg,var(--rule) 0 3px,transparent 3px 6px);
  border-right:1.5px solid var(--stamp);
}
/* our number, drawn solid over it — the gap between the two is the edge */
.ck-bar__ours{
  position:absolute;inset:0 auto 0 0;width:var(--w,0%);
  background:var(--ink);
  animation:ck-grow .62s cubic-bezier(.2,.8,.2,1) both;
}
.ck-bar__cap{
  display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faded);
}
.ck-bar__cap span{display:inline-flex;align-items:center;gap:6px}
.ck-bar__cap b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ck-bar__cap i{flex:0 0 auto;width:11px;height:9px;background:var(--ink)}
.ck-bar__cap s{
  flex:0 0 auto;width:11px;height:9px;border-right:1.5px solid var(--stamp);
  background:repeating-linear-gradient(45deg,var(--rule) 0 3px,transparent 3px 6px);
}

@keyframes ck-grow{from{width:0}to{width:var(--w,0%)}}

/* ── the three numbers ───────────────────────────────────────────────── */

.ck-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px dashed var(--rule);
}
.ck-metric{padding:12px 10px 13px;text-align:center}
.ck-metric + .ck-metric{border-left:1px dashed var(--rule)}
.ck-metric span{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:9px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faded);margin-bottom:6px;line-height:1.35;
}
.ck-metric b{
  font-family:'IBM Plex Mono',monospace;font-size:16.5px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.ck-metric b.is-up{color:var(--biro)}
.ck-metric b.is-down{color:var(--stamp)}
@media (max-width:420px){
  .ck-metrics{grid-template-columns:1fr}
  .ck-metric + .ck-metric{border-left:0;border-top:1px dashed var(--rule)}
}

/* ── the legs, torn off one per rule ─────────────────────────────────── */

.ck-legs{list-style:none}
/* minmax(0,1fr) rather than 1fr: a bare 1fr floors at the pick's min-content
   width, and once the four columns no longer fit the grid overflows its own
   right padding and prints the edge figures hard against the card border. */
.ck-leg{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;
  align-items:center;gap:10px;padding-block:10px;
  border-bottom:1px dashed var(--rule);
}
.ck-leg__mark{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border:1.5px solid currentColor;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;
  color:var(--faded);
}
.ck-leg--green .ck-leg__mark{color:var(--biro)}
.ck-leg--red   .ck-leg__mark{color:var(--stamp)}
.ck-leg__pick{font-size:12.5px;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.ck-leg__odds,
.ck-leg__ev{
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.ck-leg__odds{color:var(--faded)}
.ck-leg__ev{min-width:58px;text-align:right;color:var(--faded)}
.ck-leg--green .ck-leg__ev{color:var(--biro)}
.ck-leg--red   .ck-leg__ev{color:var(--stamp)}

/* The legs are graded one at a time, so they arrive one at a time. Driven by
   a keyframe rather than a JS class: the list is rebuilt on every check, so
   the animation replays on insert with no wiring, and a missing motion layer
   cannot leave a leg stranded at opacity:0. */
@keyframes rise-leg{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ck-leg{animation:rise-leg .3s cubic-bezier(.2,.8,.2,1) both}
.ck-leg:nth-child(1){animation-delay:.04s}
.ck-leg:nth-child(2){animation-delay:.095s}
.ck-leg:nth-child(3){animation-delay:.15s}
.ck-leg:nth-child(4){animation-delay:.205s}
.ck-leg:nth-child(5){animation-delay:.26s}
.ck-leg:nth-child(6){animation-delay:.315s}
.ck-leg:nth-child(7){animation-delay:.37s}
.ck-leg:nth-child(n+8){animation-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .ck-leg{animation:none}
  .ck-bar__ours{animation:none}
}

/* ── the leg that kills it ───────────────────────────────────────────── */

.ck-killer{
  margin-top:14px;padding:12px 14px 13px;
  border:1.5px solid var(--ink);border-left-width:5px;
  border-left-color:var(--stamp);
  background:color-mix(in srgb,var(--stamp) 5%,var(--paper));
}
.ck-killer__tag{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:9px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stamp);margin-bottom:8px;
}
.ck-killer__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ck-killer__row b{font-size:14px;font-weight:700;display:block}
.ck-killer__row small{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  color:var(--faded);margin-top:2px;
}
.ck-killer__odds{
  flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:13px;
  font-weight:600;font-variant-numeric:tabular-nums;
}
.ck-killer__why,
.ck-killer__swap{font-size:12.5px;line-height:1.6;color:var(--faded);margin-top:8px}
.ck-killer__why b{
  font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* the one highlighter moment in this component: the instruction to act on */
.ck-killer__swap{
  padding-top:9px;border-top:1px dashed var(--rule);color:var(--ink);
}
.ck-killer__swap b{background:var(--mark);color:var(--mark-ink);padding:1px 5px;font-weight:700}

/* ── actions and states ──────────────────────────────────────────────── */

.ck-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.ck-fixed{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.04em;color:var(--biro);
}
.ck-empty{font-size:12.5px;color:var(--faded);padding-block:14px;border-top:1px dashed var(--rule)}


/* ═══════════════════════════════════════════════════════════════════════
   BUTTON VARIANTS
   .btn--primary is emitted by js/herocheck.js and used across every page;
   it is the same press as .btn, named for the older markup.
   ═══════════════════════════════════════════════════════════════════════ */

.btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:700}
.btn--primary:hover{background:transparent;color:var(--ink)}
.btn--xs{padding:5px 10px;font-size:10.5px;letter-spacing:.08em}


/* ═══════════════════════════════════════════════════════════════════════
   TILL-ROLL FOOTER — the long form
   index.html uses .footer__inner/.footer__base; every other page carries
   the fuller footer with the age gate and the risk warning, which is a
   legal fixture and cannot be dropped. Both shapes print the same.
   ═══════════════════════════════════════════════════════════════════════ */

.footer__top{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);
  gap:clamp(24px,5vw,56px);padding-block:clamp(30px,4vw,44px);
}
@media (max-width:760px){.footer__top{grid-template-columns:1fr;gap:26px}}

.footer__tag{
  font-family:'Anton','Arial Narrow',sans-serif;font-size:15px;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);
  margin-top:8px;
}
.footer__blurb{font-size:12.5px;color:var(--faded);max-width:34ch;margin-top:6px;line-height:1.6}

/* the footer nav headings are h5 on these pages, h4 on index */
.footer__cols h5{
  font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:12px;letter-spacing:.06em;
  margin-bottom:10px;color:var(--ink);
}

/* The risk warning: bordered like a stamped notice, not a whisper. */
.footer__warn{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 14px;margin-bottom:16px;
  border:1.5px solid var(--ink);
  background:color-mix(in srgb,var(--stamp) 5%,var(--paper));
}
.footer__warn p{font-size:12px;line-height:1.6;color:var(--faded);margin:0}
.footer__warn a{color:var(--ink);border-bottom:1px solid var(--rule)}
.footer__warn a:hover{border-bottom-color:var(--ink)}

.agegate{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:26px;padding:0 7px;
  border:1.5px solid var(--stamp);color:var(--stamp);
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.04em;
}

.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-block:14px;border-top:1px dashed var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faded);
}
.footer__bottom p{margin:0}
.footer__made{color:var(--faded)}


/* ═══════════════════════════════════════════════════════════════════════
   MODIFIERS USED BY index.html
   ═══════════════════════════════════════════════════════════════════════ */

/* hero grid children need to be allowed to shrink inside the grid */
.hero__copy,
.hero__visual{min-width:0}

/* kicker inks. The gold one is the highlighter, so it is reserved for the
   single marked moment on a screen and never doubles up. */
.kicker--center{display:block;text-align:center;border-bottom:0}
.kicker--green{color:var(--biro);border-bottom-color:var(--biro)}
.kicker--gold{color:var(--ink);border-bottom-color:var(--mark)}

/* a slip that was graded clean prints without the red */
.checkcard--grey{background:var(--paper-2)}
.checkcard--green{background:color-mix(in srgb,var(--biro) 6%,var(--paper))}

/* the ledger's second figure, shown against the alternate fill */
.ledger__fig--alt{background:var(--paper-2)}

/* Game Day sits apart from the three subscription tiers */
.plan--day{border-style:dashed}

/* a market we dropped: the word carries it, not the colour */
.tag--out{color:var(--stamp);text-decoration:line-through}

.ticks--sm li{font-size:12px}

/* the fix strip: reasoning on the left, the reprinted ticket on the right */
.fixstrip__body{min-width:0}
.fixstrip__ticket{min-width:0}

.guarantee__body{min-width:0}
.guarantee__body p{font-size:13.5px;line-height:1.65;color:var(--faded)}
.guarantee__body p + p{margin-top:9px}
.guarantee__body strong{color:var(--ink);font-weight:700}

/* the waitlist form, single field */
.wform--lean{margin-top:18px}
.wform__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.wform__row{grid-template-columns:1fr}}
.wform__legal{
  margin-top:10px;font-size:11px;line-height:1.55;color:var(--faded);text-align:center;
}
.wform__legal a{color:var(--ink);border-bottom:1px solid var(--rule)}


/* ═══════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   These live in css/pages.css for the document pages, but demo.html loads
   only coupon.css + demo.css and was rendering them unstyled. Defined here
   as the base; pages.css loads after and still wins where it overlaps.
   ═══════════════════════════════════════════════════════════════════════ */

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}

/* a small ruled panel — the workhorse box on the demo */
.pcard{border:1.5px solid var(--ink);padding:15px 16px;background:var(--paper)}
.pcard h4{font-size:clamp(1.05rem,2.4vw,1.4rem);margin-bottom:6px}
.pcard p{font-size:12.5px;line-height:1.6;color:var(--faded);margin:0}

.pcta{border:1.5px solid var(--ink);padding:20px 18px;background:var(--paper-2);text-align:center}
.pcta__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}

/* club shorthand, set as a stamped abbreviation */
.crest{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:3px 7px;border:1.5px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;color:var(--faded);
}
.crest--ars{color:var(--stamp);border-color:var(--stamp)}
.crest--che{color:var(--biro);border-color:var(--biro)}

.rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:1.5px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;
  color:var(--faded);
}
.rank--1,.rank--2,.rank--3{border-color:var(--ink);color:var(--ink)}

/* the coaching notes list */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.insight{
  border:1.5px solid var(--ink);border-left-width:5px;border-left-color:var(--rule);
  padding:13px 15px;background:var(--paper);
}
.insight--good{border-left-color:var(--biro)}
.insight--bad{border-left-color:var(--stamp)}
.insight--warn{border-left-color:var(--mark)}
.insight header{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.insight__av{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:0 0 auto;
  background:var(--ink);color:var(--paper);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.04em;
}
.insight header b{font-size:12.5px;font-weight:700}
.insight header time{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faded);
}
.insight p{font-size:12.5px;line-height:1.62;color:var(--faded);margin:0}
.insight p b{
  font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.insight__link{
  display:inline-block;margin-top:10px;font-size:12px;font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--rule);
}
.insight__link:hover{border-bottom-color:var(--ink)}

/* the board's filter row */
.board__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.board__date{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faded);
}
.board__date .dot{width:5px;height:5px;background:var(--biro);flex:0 0 auto}
.board__date b{color:var(--ink);font-size:12px}
.board__filters{display:flex;flex-wrap:wrap;gap:0;margin-left:auto;border:1.5px solid var(--ink)}
.bfilter{
  background:transparent;border:0;cursor:pointer;padding:7px 11px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faded);
}
.bfilter + .bfilter{border-left:1.5px solid var(--ink)}
.bfilter:hover{color:var(--ink)}
.bfilter.is-active{background:var(--ink);color:var(--paper)}
@media (max-width:640px){
  .board__filters{margin-left:0;width:100%;overflow-x:auto}
}

/* the small print under a builder panel */
.builder__disclaimer{font-size:11.5px;line-height:1.6;color:var(--faded);margin:0}
.builder__reset{
  background:transparent;border:1.5px solid var(--ink);cursor:pointer;
  padding:7px 12px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.builder__reset:hover{background:var(--ink);color:var(--paper)}


/* ═══════════════════════════════════════════════════════════════════════
   DOCUMENT-PAGE ODDS AND ENDS
   ═══════════════════════════════════════════════════════════════════════ */

/* wide tables scroll inside their own frame rather than pushing the page */
.tablewrap{overflow-x:auto;border:1.5px solid var(--ink)}
.tablewrap table{width:100%;min-width:520px;border-collapse:collapse}

.calib__note{font-size:11.5px;line-height:1.6;color:var(--faded);margin-top:10px}

/* a figure that moved our way. The sign carries it as well as the ink. */
.up{color:var(--biro);font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.down{color:var(--stamp);font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}

/* page-hero accents. Only the top rule changes; the paper stays the same. */
.phero--gold{border-top:3px solid var(--mark)}
.phero--red{border-top:3px solid var(--stamp)}
.phero--violet{border-top:3px solid var(--biro)}

/* the meta chips are a list; without this the markers print through */
.phero__meta{list-style:none}


/* ═══════════════════════════════════════════════════════════════════════
   SMALL SCREENS
   This is a phone-first market — the slip arrives as a WhatsApp screenshot
   and gets checked on the same device. Two things matter more than layout
   here: nothing may scroll sideways, and every target must be thumb-sized.
   The guide puts that floor at 48px; 44px is the absolute minimum Apple and
   Android both publish, so coarse pointers get 44 and the primary controls
   get 48.
   ═══════════════════════════════════════════════════════════════════════ */

html{-webkit-text-size-adjust:100%}

/* The sheet reads as paper on a table, so on a notched phone it should still
   run edge to edge without sliding under the rounded corners. */
@supports (padding:max(0px)){
  .sheet{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right));
  }
  .footer__base,.footer__bottom{padding-bottom:max(14px,env(safe-area-inset-bottom))}
}

/* Wide data never pushes the page — it scrolls inside its own frame. */
.costtable,
.calib__chart{overflow-x:auto;-webkit-overflow-scrolling:touch}
.costtable table{min-width:520px}

/* Horizontal strips of controls scroll rather than wrap into a wall, and do
   it without printing a scrollbar across the design. */
.voices__tabs,
.board__filters,
.filters{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.voices__tabs::-webkit-scrollbar,
.board__filters::-webkit-scrollbar,
.filters::-webkit-scrollbar{display:none}

@media (max-width:640px){
  /* one number per row beats three columns of wrapped labels */
  .ck-metrics{grid-template-columns:1fr}
  .ck-metric + .ck-metric{border-left:0;border-top:1px dashed var(--rule)}
  .ck-metric{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-align:left}
  .ck-metric span{margin-bottom:0}

  /* the verdict stamp sits above its sentence rather than squeezing it */
  .ck-verdict{flex-direction:column;gap:10px}

  /* the code field is the primary action on a phone — give it the full width */
  .checker__form{flex-wrap:wrap}
  .checker__input{flex:1 1 100%;font-size:17px;letter-spacing:.12em;padding:14px}
  .checker__form .btn{flex:1 1 100%;border-left:0;border-top:1.5px solid var(--ink);min-height:48px}

  .ck-actions .btn{flex:1 1 100%;justify-content:center}
  .footer__bottom,.footer__base{flex-direction:column;gap:6px}
}

@media (max-width:420px){
  /* the leg's odds and its verdict stack under the pick instead of clipping */
  .ck-leg{grid-template-columns:20px minmax(0,1fr) auto;row-gap:2px}
  .ck-leg__ev{grid-column:2/4;text-align:left;min-width:0}
}

/* ── thumb-sized targets ─────────────────────────────────────────────── */

@media (hover:none) and (pointer:coarse){
  .nav__links a{min-height:48px;display:flex;align-items:center}
  .nav__burger{width:48px;height:48px}
  .printing button{min-height:44px;padding-inline:14px}
  .printing{height:auto}

  .btn{min-height:48px}
  .btn--sm,.btn--xs{min-height:44px;padding-block:11px}

  /* sample codes, board filters and article filters are all real controls */
  .checker__samples button,
  .bfilter,
  .filter,
  .builder__reset{min-height:44px;padding-block:11px}

  .voices__tabs button,
  [role="tab"]{min-height:48px}

  .faq summary{min-height:52px;display:flex;align-items:center}

  /* footer link lists are the densest targets on the site */
  .footer__cols a,
  .footer__base a,
  .footer__warn a{min-height:44px;display:flex;align-items:center}

  .drawer__x,.dnotice__x{min-width:44px;min-height:44px}

  /* a coarse pointer has no hover, so the marquee must not stay paused */
  .marquee:hover .marquee__track{animation-play-state:running}
}

/* The pointer query above is the correct signal, but it depends on the browser
   reporting its pointer type honestly and some in-app webviews do not. Below
   the nav's own collapse breakpoint we are on a phone by any reasonable
   reading, so the same floors are applied on width as well. */
@media (max-width:900px){
  .nav__burger{width:48px;height:48px}
  .nav__links a{min-height:48px;display:flex;align-items:center}
  .printing{height:auto}
  .printing button{min-height:40px;padding-inline:14px}
  .btn{min-height:46px}
  .btn--sm,.btn--xs{min-height:40px;padding-block:10px}
  .checker__samples button{min-height:40px;padding-block:10px}
  .bfilter,.filter,.builder__reset{min-height:42px;padding-block:11px}
  .voices__tabs button,[role="tab"]{min-height:46px}
  .faq summary{min-height:52px;display:flex;align-items:center;gap:10px}
  .faq summary::after{margin-left:auto}
  .footer__cols a{min-height:42px;display:flex;align-items:center}
  .drawer__x,.dnotice__x{min-width:44px;min-height:44px}
  .curswitch{height:auto}
  .curswitch__btn{min-height:42px;padding-inline:16px}
  .brand{min-height:44px;align-items:center}
  /* the demo's voice picker and its dock action */
  .vswitch button,.dock__go{min-height:42px}
}


/* ── BACK TO TOP ─────────────────────────────────────────────────────────
   A stamped square, same vocabulary as everything else. Right-anchored so it
   clears the toast and the demo's dock, which are both centred. */

.totop{
  position:fixed;z-index:95;
  right:clamp(12px,3vw,22px);bottom:clamp(12px,3vw,22px);
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,
             background-color .14s ease,color .14s ease;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--ink);color:var(--paper)}
.totop:active{transform:translateY(1px)}
.totop svg{width:20px;height:20px}

@supports (padding:max(0px)){
  .totop{bottom:max(clamp(12px,3vw,22px),env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .totop{transition:opacity .01s linear,visibility .01s linear;transform:none}
  .totop.is-on{transform:none}
  .totop:active{transform:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   VALIDATION  (#validation)
   The trust argument. Three measured figures in ruled cells, then the one
   claim that needs explaining in words rather than numbers.
   ═══════════════════════════════════════════════════════════════════════ */

.proof__claim{
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.06;
  max-width:30ch;margin-inline:auto;
}
.proof__claim .grad{color:var(--biro)}

.proof{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1.5px solid var(--ink);
}
.proof__fig{padding:20px 18px 22px}
.proof__fig + .proof__fig{border-left:1.5px solid var(--ink)}
.proof__fig b{
  display:block;font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1;letter-spacing:-.01em;
  color:var(--biro);font-variant-numeric:tabular-nums;
}
.proof__fig .lbl{display:block;margin:8px 0 10px}
.proof__fig p{
  font-size:12.5px;line-height:1.6;color:var(--faded);
  padding-top:10px;border-top:1px dashed var(--rule);
}

/* the explanation sits apart from the figures — it is prose, not data */
.proof__note{
  margin-top:14px;padding:20px 20px 22px;
  border:1.5px solid var(--ink);background:var(--paper-2);
}
.proof__note .h3{margin-bottom:10px}
.proof__note p{font-size:14px;line-height:1.68;color:var(--faded);max-width:74ch}
.proof__note p + p{margin-top:12px}
.proof__note b{color:var(--ink);font-weight:600}

/* The limit of the claim, ruled off so it reads as part of the argument
   rather than as small print someone tried to hide. */
.proof__caveat{padding-top:14px;border-top:1px dashed var(--rule)}

@media (max-width:820px){
  .proof{grid-template-columns:1fr}
  .proof__fig + .proof__fig{border-left:0;border-top:1.5px solid var(--ink)}
}


/* ── VALUE MARKER ────────────────────────────────────────────────────────
   Whether a price sits above or below our number. The word carries it, so
   it survives being read in greyscale or at a glance — colour is support. */

.checkcard__value{
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--rule);
}
.checkcard__value .lbl{display:block;margin-bottom:4px}
.checkcard__value b{font-size:12.5px;font-weight:700;line-height:1.4;display:block}
.checkcard__value .is-yes{color:var(--biro)}
.checkcard__value .is-no{color:var(--stamp)}
.checkcard__value .is-none{color:var(--faded)}

/* The limit on the marker, ruled like a notice rather than tucked away. */
.valuenote{
  margin-top:14px;padding:13px 15px;
  border:1.5px solid var(--ink);border-left-width:5px;border-left-color:var(--mark);
  font-size:12.5px;line-height:1.65;color:var(--faded);
}
.valuenote b{color:var(--ink);font-weight:700}
.valuenote .mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}


/* ═══════════════════════════════════════════════════════════════════════
   VALUE INDICATOR  (#value)
   One match, two probabilities, the gap between them. The verdict is a
   stamp carrying a word, so colour is never the only signal.
   ═══════════════════════════════════════════════════════════════════════ */

.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:760px){.vgrid{grid-template-columns:1fr}}

.vcard{border:1.5px solid var(--ink);background:var(--paper);padding:16px 16px 18px}
.vcard--yes{background:color-mix(in srgb,var(--biro) 5%,var(--paper))}
.vcard--no{background:color-mix(in srgb,var(--stamp) 5%,var(--paper))}

.vcard__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px dashed var(--rule);
}
.vcard__head h3{font-size:17px;line-height:1.15}
.vcard__head h3 em{
  font-style:normal;color:var(--faded);font-family:'Archivo',sans-serif;
  font-weight:500;text-transform:none;font-size:13px;
}
/* the verdict, stamped and rotated like every other verdict in the system */
.vcard__stamp{
  flex:0 0 auto;transform:rotate(-7deg);
  font-family:'Anton','Arial Narrow',sans-serif;font-size:12px;letter-spacing:.09em;
  border:2px solid currentColor;padding:2px 8px;white-space:nowrap;
}
.vcard--yes .vcard__stamp{color:var(--biro)}
.vcard--no .vcard__stamp{color:var(--stamp)}

.vcard__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 0}
.vcard__nums dt{margin-bottom:4px}
.vcard__nums dd{
  font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.vcard__read{
  font-size:12.5px;line-height:1.6;color:var(--faded);
  padding-top:12px;border-top:1px dashed var(--rule);
}
.vcard__read b{display:block;color:var(--ink);font-weight:700;margin-bottom:4px}

/* ── the explainer, and the two-line version of it ───────────────────── */

.vexplain{
  display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-top:12px;
}
@media (max-width:760px){.vexplain{grid-template-columns:1fr}}
.vexplain__body{border:1.5px solid var(--ink);padding:18px 18px 20px;background:var(--paper)}
.vexplain__body .h3{margin-bottom:12px}
.vexplain__list{list-style:none;margin-bottom:12px}
.vexplain__list li{
  font-size:13.5px;line-height:1.6;color:var(--faded);
  padding:9px 0;border-bottom:1px dashed var(--rule);
}
.vexplain__list li:last-child{border-bottom:0}
.vexplain__list b{color:var(--ink);font-weight:700}
.vexplain__body p{font-size:13px;line-height:1.65;color:var(--faded)}

/* One highlighter moment per screen — this is it. */
.vquick{background:var(--mark);color:var(--mark-ink);border:1.5px solid var(--ink);padding:18px}
.vquick .lbl{color:var(--mark-ink);opacity:.72;display:block;margin-bottom:12px}
.vquick p{font-size:14px;line-height:1.5;margin-bottom:8px}
.vquick b{
  font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;font-size:17px;
  letter-spacing:.01em;text-transform:uppercase;color:var(--mark-ink);
}
.vquick .is-pos,.vquick .is-neg{color:var(--mark-ink)}
.vquick__foot{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.72;margin-top:12px;padding-top:10px;
  border-top:1.5px solid var(--mark-ink);margin-bottom:0;
}

/* ── proof and the limit of the claim ────────────────────────────────── */

.vtrust{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:760px){.vtrust{grid-template-columns:1fr}}
.vtrust > div{border:1.5px solid var(--ink);padding:18px;background:var(--paper)}
.vtrust .lbl{display:block;margin-bottom:12px}
.vtrust .ticks{margin-bottom:0}
.vtrust__warn{border-left-width:5px;border-left-color:var(--stamp)}
.vtrust__warn p{font-size:13px;line-height:1.65;color:var(--faded)}
.vtrust__warn b{color:var(--ink);font-weight:700}
.vtrust__small{
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--rule);font-size:12px;
}

.vposition{
  margin-top:14px;padding:18px;text-align:center;
  border:1.5px solid var(--ink);background:var(--paper-2);
  font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  font-size:clamp(1.1rem,2.4vw,1.6rem);line-height:1.2;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--faded);
}
.vposition b{color:var(--ink);font-weight:400}

/* the locked edge figure, and the way out of it */
.vlock{color:var(--faded);letter-spacing:.18em;font-size:15px}
.vcard__unlock{margin-top:10px;padding-top:10px;border-top:1px dashed var(--rule)}
.vcard__unlock a{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--mark);color:var(--mark-ink);padding:7px 10px;border:1.5px solid var(--ink);
}
.vcard__unlock a:hover{background:transparent;color:var(--ink)}

/* the contrast, and the way past the lock */
.vsplit{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:640px){.vsplit{grid-template-columns:1fr}}
.vsplit__col{border:1.5px solid var(--ink);padding:16px 18px;background:var(--paper)}
.vsplit__col .lbl{display:block;margin-bottom:12px}
.vsplit__col ul{list-style:none}
.vsplit__col li{
  font-size:13px;line-height:1.5;color:var(--faded);padding:8px 0 8px 22px;
  position:relative;border-bottom:1px dashed var(--rule);
}
.vsplit__col li:last-child{border-bottom:0}
.vsplit__col li::before{
  content:"\00d7";position:absolute;left:0;top:7px;
  font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--stamp);
}
.vsplit__col--sharp{background:color-mix(in srgb,var(--biro) 5%,var(--paper))}
.vsplit__col--sharp li::before{content:"\2713";color:var(--biro)}

.vunlock{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:12px;padding:18px 20px;border:1.5px solid var(--ink);background:var(--paper-2);
}
.vunlock .lbl{display:block;margin-bottom:10px}
.vunlock ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px}
.vunlock li{position:relative;padding-left:16px;font-size:13px;color:var(--faded)}
.vunlock li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--biro)}

/* what a tier does not include. Ruled off and struck, so the boundary is
   legible rather than something the reader discovers after paying. */
.ticks--off{margin-top:2px;padding-top:12px;border-top:1px dashed var(--rule)}
.ticks--off li{color:var(--faded);opacity:.72;text-decoration:line-through}
.ticks--off li::before{background:var(--faded)}


/* ═══════════════════════════════════════════════════════════════════════
   THE SIX ANSWERS  ·  FAIR PRICE  ·  THE BOUNDARY
   ═══════════════════════════════════════════════════════════════════════ */

.sixlist{list-style:none;counter-reset:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media (max-width:760px){.sixlist{grid-template-columns:1fr}}
.sixlist li{
  display:grid;grid-template-columns:34px 1fr;gap:0 12px;align-items:start;
  padding:16px 18px;border:1.5px solid var(--ink);margin:-0.75px 0 0 -0.75px;
}
.sixlist__n{
  grid-row:span 2;font-family:'Anton','Arial Narrow',sans-serif;font-size:22px;
  line-height:1;color:var(--stamp);
}
.sixlist b{font-size:14.5px;font-weight:700;line-height:1.3}
.sixlist p{grid-column:2;margin-top:5px;font-size:12.5px;line-height:1.55;color:var(--faded)}

/* ── one price, its two parts ─────────────────────────────────────────── */

.fairsplit{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media (max-width:640px){.fairsplit{grid-template-columns:1fr}}
.fairsplit__cell{
  border:1.5px solid var(--ink);margin:0 0 0 -0.75px;padding:18px;text-align:center;
}
.fairsplit__cell .lbl{display:block;margin-bottom:10px}
.fairsplit__cell b{
  display:block;font-size:clamp(1.8rem,4.5vw,2.6rem);line-height:1;font-weight:600;
  letter-spacing:-.02em;
}
.fairsplit__cell p{margin-top:9px;font-size:12px;line-height:1.5;color:var(--faded)}
.fairsplit__cell--cut{background:color-mix(in srgb,var(--stamp) 6%,var(--paper))}

.fairnote{
  margin-top:12px;padding:18px 20px;border:1.5px solid var(--ink);
  border-left-width:5px;border-left-color:var(--biro);background:var(--paper);
}
.fairnote p{font-size:13.5px;line-height:1.65;color:var(--faded)}
.fairnote b{color:var(--ink)}
.fairnote__small{
  margin-top:11px;padding-top:11px;border-top:1px dashed var(--rule);font-size:12.5px;
}

/* ── the claim and its limit, side by side ────────────────────────────── */

.cansplit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.cansplit{grid-template-columns:1fr}}
.cansplit__col{border:1.5px solid var(--ink);padding:18px;background:var(--paper)}
.cansplit__col .lbl{display:block;margin-bottom:14px}
.cansplit__col ul{list-style:none}
.cansplit__col li{
  position:relative;padding:9px 0 9px 22px;font-size:13px;line-height:1.5;
  color:var(--faded);border-bottom:1px dashed var(--rule);
}
.cansplit__col li:last-child{border-bottom:0}
.cansplit__col li b{color:var(--ink);font-weight:700}
.cansplit__col li::before{
  content:"\2713";position:absolute;left:0;top:8px;
  font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--biro);
}
.cansplit__col--not{background:color-mix(in srgb,var(--stamp) 4%,var(--paper))}
.cansplit__col--not li::before{content:"\00d7";color:var(--stamp)}
.cansplit__foot{
  margin-top:14px;padding-top:12px;border-top:1.5px solid var(--rule);
  font-size:12.5px;line-height:1.55;color:var(--faded);
}

/* the refusal, stamped like every other verdict */
.refusal{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;margin-top:12px;
  padding:18px 20px;border:1.5px solid var(--ink);background:var(--paper-2);
}
.refusal__stamp{
  flex:0 0 auto;transform:rotate(-7deg);color:var(--faded);
  font-family:'Anton','Arial Narrow',sans-serif;font-size:13px;letter-spacing:.09em;
  border:2px solid currentColor;padding:3px 9px;white-space:nowrap;
}
.refusal > div{flex:1 1 320px;min-width:0}
.refusal p{font-size:13px;line-height:1.65;color:var(--faded)}
.refusal p + p{margin-top:8px}
.refusal b{color:var(--ink);font-weight:700}


/* ═══════════════════════════════════════════════════════════════════════
   THE PLAIN WALKTHROUGH  ·  THE FLAGGED LEG
   Copy carries this section, so the type does the work and the structure
   stays out of the way.
   ═══════════════════════════════════════════════════════════════════════ */

/* One bordered sheet; the parts inside are divided by tear lines. */
.plainsheet{border:1.5px solid var(--ink);background:var(--paper)}
.plainsheet__row + .plainsheet__row{border-top:1px dashed var(--rule)}
.plainsheet .lbl{display:block;margin-bottom:14px}

.story{display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.story{grid-template-columns:1fr}}
.story__step{padding:20px 18px}
.story__step + .story__step{border-left:1px dashed var(--rule)}
@media (max-width:820px){
  .story__step + .story__step{border-left:0;border-top:1px dashed var(--rule)}
}
.story__big{font-size:16px;line-height:1.4;margin-bottom:9px}
.story__big b{font-weight:700}
.story__step p:not(.story__big){font-size:13px;line-height:1.6;color:var(--faded)}
.story__step em{font-style:italic;color:var(--ink)}
.story__step--mark{background:color-mix(in srgb,var(--biro) 6%,var(--paper))}

/* the graded ticket, read like a till roll: name, leader, verdict */
.legcheck{padding:18px}
.legcheck ul{list-style:none}
.legcheck li{display:flex;align-items:center;padding:11px 0}
.legcheck li + li{border-top:1px dashed var(--rule)}
.legcheck__n{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;flex:0 0 auto}
.legcheck__lead{
  flex:1 1 auto;min-width:18px;margin:0 12px;
  border-bottom:1px dotted var(--rule);transform:translateY(-3px);
}
.legcheck__v{
  flex:0 0 auto;font-family:'Anton','Arial Narrow',sans-serif;font-size:13px;
  letter-spacing:.05em;border:2px solid currentColor;padding:3px 9px;
  transform:rotate(-2deg);white-space:nowrap;
}
.legcheck__v--ok{color:var(--biro)}
.legcheck__v--warn{color:var(--faded)}
.legcheck__v--bad{color:var(--stamp)}

/* what he can do about it — rows fill, so there is no ragged gap */
.choices{padding:18px;background:var(--paper-2)}
.choices ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.choices li{
  flex:1 1 30%;border:1.5px solid var(--rule);padding:11px 13px;
  font-size:13.5px;font-weight:600;background:var(--paper);
}
@media (max-width:560px){.choices li{flex:1 1 100%}}
.choices__foot{
  margin-top:14px;padding-top:12px;border-top:1.5px solid var(--rule);
  font-size:13px;color:var(--faded);
}

/* ── the flagged leg, and the reason under it ─────────────────────────── */

.flagbox{display:grid;grid-template-columns:.85fr 1.15fr;gap:0}
@media (max-width:820px){.flagbox{grid-template-columns:1fr}}
.flagbox__slip{
  border:1.5px solid var(--ink);padding:20px 18px;
  background:color-mix(in srgb,var(--stamp) 6%,var(--paper));
}
.flagbox__slip .lbl{display:block;margin-bottom:14px}
.flagbox__pick{
  font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600;
  padding-bottom:13px;border-bottom:1px dashed var(--rule);
}
.flagbox__verdict{
  margin-top:13px;font-family:'Anton','Arial Narrow',sans-serif;
  font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.15;color:var(--stamp);
  text-transform:uppercase;
}
.flagbox__act{margin-top:9px;font-size:13.5px;line-height:1.5;font-weight:600}
.flagbox__why{border:1.5px solid var(--ink);margin-left:-0.75px;padding:20px 18px;background:var(--paper)}
@media (max-width:820px){.flagbox__why{margin:-0.75px 0 0 0}}
.flagbox__why .lbl{display:block;margin-bottom:14px}
.flagbox__why ol{list-style:none;counter-reset:fb}
.flagbox__why li{
  counter-increment:fb;position:relative;padding:11px 0 11px 30px;
  font-size:13.5px;line-height:1.6;color:var(--faded);
  border-bottom:1px dashed var(--rule);
}
.flagbox__why li:last-of-type{border-bottom:0}
.flagbox__why li::before{
  content:counter(fb);position:absolute;left:0;top:11px;
  font-family:'Anton','Arial Narrow',sans-serif;font-size:15px;color:var(--stamp);
}
.flagbox__why b{color:var(--ink);font-weight:700}
.flagbox__foot{
  margin-top:13px;padding-top:12px;border-top:1.5px solid var(--rule);
  font-size:12.5px;line-height:1.6;color:var(--faded);
}


/* ═══════════════════════════════════════════════════════════════════════
   TICKET HEALTH CHECK
   Problems found, counted, before any explanation. The count is the hook,
   so it is the loudest thing in the block.
   ═══════════════════════════════════════════════════════════════════════ */

.health{border:1.5px solid var(--ink);background:var(--paper)}
.health__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-bottom:1.5px solid var(--ink);background:var(--paper-2);
}
.health__head .lbl{display:block;margin-bottom:6px}
.health__meta{font-size:13px;color:var(--faded)}
.health__meta b{color:var(--ink)}
.health__score{
  font-family:'Anton','Arial Narrow',sans-serif;font-size:clamp(1.1rem,2.6vw,1.45rem);
  letter-spacing:.02em;text-transform:uppercase;color:var(--stamp);
  border:2px solid currentColor;padding:4px 11px;transform:rotate(-3deg);white-space:nowrap;
}

.health__list{list-style:none}
.health__item{
  display:grid;grid-template-columns:52px 1fr;gap:0 14px;align-items:start;
  padding:15px 18px;border-bottom:1px dashed var(--rule);
}
.health__item:last-child{border-bottom:0}
.health__n{
  font-size:26px;font-weight:600;line-height:1;text-align:right;
  font-variant-numeric:tabular-nums;
}
.health__item b{display:block;font-size:14.5px;line-height:1.3}
.health__item p{margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--faded)}
/* colour supports the words, never carries them alone */
.health__item--warn{border-left:5px solid var(--mark)}
.health__item--warn .health__n{color:var(--mark)}
.health__item--gap{border-left:5px solid var(--faded)}
.health__item--gap .health__n{color:var(--faded)}
.health__item--bad{border-left:5px solid var(--stamp)}
.health__item--bad .health__n{color:var(--stamp)}

.health__foot{padding:15px 18px;border-top:1.5px solid var(--ink);background:var(--paper-2)}
.health__foot p{font-size:13px;line-height:1.6;color:var(--faded)}
.health__foot b{color:var(--ink)}

/* ── the six checks ──────────────────────────────────────────────────── */

.checklist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.checklist{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.checklist{grid-template-columns:1fr}}
.checklist li{
  border:1.5px solid var(--ink);margin:-0.75px 0 0 -0.75px;padding:16px 18px;
  background:var(--paper);
}
.checklist b{
  display:block;font-size:14px;line-height:1.3;padding-bottom:9px;
  border-bottom:1px dashed var(--rule);
}
.checklist p{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--faded)}