/* ═══════════════════════════════════════════════════════════════
   cookd — prototype stylesheet
   base: warm paper + ink. one acid accent, swappable in the footer
   (--acid) for the RAT-2 color test. everything lowercase.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* palette */
  --paper:#F6F2E9;
  --paper-2:#FFFDF7;
  --paper-3:#EDE7DA;
  --ink:#131313;
  --ink-2:#3B3B38;
  --ink-3:#6E6A61;
  --red:#FF4B33;

  /* the one loud color — swapped by the footer switch */
  --acid:#8ACE00;
  --on-acid:#131313;
  --acid-dark:#8ACE00;  /* the accent as it has to look on an ink background */

  /* structure */
  --line:2.5px solid var(--ink);
  --line-thin:1.5px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --radius:0px;

  /* motion */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);

  /* type */
  --font-display:'Unbounded','Archivo Black','Helvetica Neue',Impact,system-ui,sans-serif;
  --font-sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-hand:'Caveat','Bradley Hand','Segoe Print',cursive;
}
html[data-accent="cobalt"]{
  --acid:#002FA7;
  --on-acid:#F6F2E9;
  --acid-dark:#6E90F0;  /* klein blue vanishes on black, so lift it */
}

*{margin:0;padding:0;box-sizing:border-box}
/* several nodes here carry display:grid/block, which would otherwise beat the
   browser's own [hidden] rule and leave invisible things eating clicks. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  text-transform:lowercase; /* the whole ui is lowercase */
}
/* file names, copyable text and the W/L tokens keep their real casing —
   a lowercase "l" reads as a pipe character, which kills the verdict */
.keepcase,input,textarea,.verdict,.tok,.sc-row b,.sc-tier-letter{text-transform:none}

/* grain — the anti-ai signal, sits over everything, eats no clicks */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px;width:100%}
.wrap.narrow{max-width:760px}
.mt{margin-top:18px}

/* ── typography ─────────────────────────────────────────────── */
.display{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;line-height:1.02}
h1.display{font-size:clamp(44px,10vw,104px)}
h1.display.big{font-size:clamp(46px,11vw,116px)}
h2.display{font-size:clamp(28px,4.6vw,52px);line-height:1.05;margin-bottom:14px}
h2.display.big{font-size:clamp(38px,7.5vw,84px)}
h3.display{font-size:clamp(20px,2.6vw,28px);margin-bottom:10px}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.small{font-size:14.5px}
.note{font-size:14.5px;color:var(--ink-2);max-width:68ch}
.tiny{font-size:12px;line-height:1.5}
.dim{color:var(--ink-3)}
.err{color:var(--red);font-weight:600}
p{max-width:70ch}
p + p{margin-top:12px}
b,strong{font-weight:700}
.lede{font-size:clamp(18px,2.2vw,22px);color:var(--ink-2);max-width:62ch;margin-top:16px}
.hl{background:var(--acid);color:var(--on-acid);box-shadow:4px 4px 0 var(--ink);padding:0 .1em}
.secnum{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.pullquote{font-size:clamp(22px,3.4vw,36px);line-height:1.2;margin-top:44px;max-width:26ch}

/* ── topbar ─────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 22px;border-bottom:var(--line);background:var(--paper);
}
.logo{
  font-family:var(--font-display);font-weight:900;font-size:24px;letter-spacing:-.03em;
  text-decoration:none;color:var(--ink);
}
.logo i{color:var(--acid);font-style:normal;-webkit-text-stroke:1px var(--ink)}
.logo.small{font-size:20px}
.topbar-right{display:flex;align-items:center;gap:10px}
.pricetag{font-size:12px;border:var(--line-thin);padding:4px 9px;background:var(--acid);color:var(--on-acid);white-space:nowrap}

/* ── buttons ────────────────────────────────────────────────── */
.btn,h1,h2,.sharecard,.dropzone{scroll-margin-top:96px} /* clear the sticky topbar */
.btn{
  font-family:var(--font-display);font-weight:700;font-size:15px;
  text-transform:lowercase;letter-spacing:-.01em;
  padding:14px 24px;border:var(--line);background:var(--paper-2);color:var(--ink);
  box-shadow:var(--shadow);cursor:pointer;
  transition:transform .12s var(--spring),box-shadow .12s var(--spring),background .15s linear;
}
.btn:hover{transform:translate(3px,3px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
.btn-primary{background:var(--acid);color:var(--on-acid)}
.btn-invert{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;box-shadow:none;border:var(--line-thin)}
.btn-ghost:hover{background:var(--paper-3);transform:none;box-shadow:none}
.btn-ghost-on-accent{border-color:var(--on-acid);color:var(--on-acid)}
.btn-ghost-on-accent:hover{background:rgba(0,0,0,.08)}
.btn-big{font-size:19px;padding:18px 30px}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.ghost{
  font-family:var(--font-mono);font-size:12px;background:none;border:var(--line-thin);
  padding:5px 9px;cursor:pointer;color:var(--ink);text-transform:lowercase;
}
.ghost:hover{background:var(--acid);color:var(--on-acid)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}

/* ── screens ────────────────────────────────────────────────── */
.screen{display:none}
.screen.is-active{display:block;animation:screen-in .4s var(--ease)}
@keyframes screen-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pad-screen{padding:46px 22px 90px}
.center-screen{min-height:62vh;display:flex;flex-direction:column;justify-content:center}

/* ── hero ───────────────────────────────────────────────────── */
.hero{padding:66px 0 56px;border-bottom:var(--line);position:relative;overflow:hidden}
.kicker{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;margin-bottom:24px;
}
.hero-sub{font-size:clamp(18px,2.4vw,24px);max-width:30ch;margin-top:26px;color:var(--ink-2)}
/* the hero's whole price statement, in one calm line. the big numbers live
   exactly once on this page, down in "the deal". */
.hero-price{font-size:13px;color:var(--ink-2);margin-top:8px;max-width:64ch}
/* v1's static hero stickers lived here. v2 replaces them with the live
   sticker layer at the bottom of this file (.stkzone / .stk). */

/* ── marquee ────────────────────────────────────────────────── */
.marquee{background:var(--ink);color:var(--paper);overflow:hidden;padding:10px 0;white-space:nowrap;border-bottom:var(--line)}
.marquee-inner{display:inline-block;animation:scroll 30s linear infinite;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.marquee-inner > span{margin:0 22px}
.marquee-inner .tok{margin:0;padding:0}
.marquee-inner em{color:var(--acid-dark);font-style:normal}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-inner{animation:none}}

/* ── bands ──────────────────────────────────────────────────── */
.band{padding:62px 0;border-bottom:var(--line)}
.band-invert{background:var(--ink);color:var(--paper)}
.band-invert .secnum,.band-invert .dim{color:#9a958a}
.band-invert .hl{box-shadow:4px 4px 0 var(--paper)}
.band-accent{background:var(--acid);color:var(--on-acid)}
.band-accent .secnum{color:var(--on-acid);opacity:.7}
.band-inner{margin-top:64px;padding-top:36px;border-top:var(--line)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gap{margin-top:28px}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr;gap:24px}}

.proofcard{border:var(--line);box-shadow:var(--shadow);background:var(--paper-2);padding:22px}
.checklist{list-style:none;font-size:13.5px;line-height:1.5}
.checklist-lg{font-size:16.5px;line-height:1.55}
/* block, not flex: flex made every text node and .tok span its own item,
   which scrambled the sentence order once a line wrapped (paywall bug) */
.checklist li{display:block;position:relative;padding:8px 0 8px 28px;border-bottom:1px dashed rgba(0,0,0,.2)}
.checklist li:last-child{border-bottom:none}
.checklist i{font-style:normal;color:var(--on-acid);background:var(--acid);width:19px;height:19px;position:absolute;left:0;top:9px;display:grid;place-items:center;font-size:11px;border:1px solid var(--ink)}
.dealcard-paid .checklist i{background:var(--paper-2);color:var(--ink);border-color:var(--ink)}

.negcard{border:1.5px solid var(--paper);padding:18px 20px;background:rgba(255,255,255,.04)}
.negcard p{font-size:15px;max-width:none}
.negcard-x{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acid-dark);margin-bottom:8px}

/* ── 01 · sound familiar. the ways of guessing they already tried, and
      the bridge line out of them. ─────────────────────────────────── */
.triggers{list-style:none;margin-top:28px;display:grid;gap:0}
.triggers li{
  position:relative;border-top:var(--line-thin);padding:17px 0 17px 42px;
  font-size:clamp(16px,2.1vw,20px);line-height:1.45;max-width:64ch;
}
.triggers li:last-child{border-bottom:var(--line-thin)}
.triggers li::before{
  content:'✗';font-family:var(--font-mono);font-size:12px;
  position:absolute;left:0;top:19px;width:24px;height:24px;
  display:grid;place-items:center;border:var(--line-thin);background:var(--paper-3);
}
.bridge{font-size:clamp(18px,2.4vw,23px);line-height:1.35;margin-top:28px;max-width:52ch;text-wrap:balance}

/* ── the last-call strip: shorter than a full band ─────────────────── */
.band-final{padding:44px 0}

.steps{list-style:none;margin-top:28px;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:78px 1fr;gap:20px;align-items:start;border-top:var(--line);padding:22px 0}
.steps li:last-child{border-bottom:var(--line)}
.step-n{font-size:46px;line-height:.9;color:var(--acid);-webkit-text-stroke:1.5px var(--ink)}
.steps b{font-family:var(--font-display);font-size:17px;font-weight:700;display:block;margin-bottom:4px}
.steps p{font-size:15px;color:var(--ink-2)}

.dealcard{border:var(--line);box-shadow:var(--shadow);background:var(--paper-2);padding:22px 24px}
.dealcard-paid{background:var(--acid);color:var(--on-acid)}
.dealcard-paid .checklist li{border-color:rgba(0,0,0,.25)}
.deal-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.dealcard h3{margin-bottom:14px}

/* ── quiz ───────────────────────────────────────────────────── */
.qhead{margin-bottom:30px}
.qbar{height:8px;border:var(--line-thin);background:var(--paper-2)}
.qbar i{display:block;height:100%;background:var(--acid);width:25%;transition:width .45s var(--spring)}
.qtitle{font-family:var(--font-display);font-weight:900;font-size:clamp(26px,4.4vw,44px);line-height:1.06;letter-spacing:-.02em;margin-bottom:8px}
.qhint{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);margin-bottom:24px}
.opts{display:grid;gap:12px}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:var(--line);background:var(--paper-2);padding:16px 18px;cursor:pointer;
  font-family:var(--font-sans);font-size:17px;color:var(--ink);text-transform:lowercase;
  box-shadow:var(--shadow-sm);
  transition:transform .12s var(--spring),box-shadow .12s var(--spring),background .12s linear;
}
.opt:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.opt .box{
  width:22px;height:22px;flex:0 0 22px;border:var(--line-thin);display:grid;place-items:center;
  font-family:var(--font-mono);font-size:12px;background:var(--paper);
}
.opt.is-on{background:var(--acid);color:var(--on-acid)}
.opt.is-on .box{background:var(--ink);color:var(--acid)}
.opt .sub{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);display:block;margin-top:2px}
.opt.is-on .sub{color:var(--on-acid);opacity:.75}
.qnav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}

/* ── upload ─────────────────────────────────────────────────── */
.privacy-strip{
  border:var(--line);border-left:10px solid var(--acid);background:var(--paper-2);
  padding:14px 18px;margin:24px 0;font-size:13.5px;
}
.privacy-strip b{display:block;font-size:15px;margin-bottom:3px}
.privacy-strip span{color:var(--ink-3)}
.dropzone{
  border:3px dashed var(--ink);background:var(--paper-2);padding:52px 20px;text-align:center;cursor:pointer;
  transition:background .15s linear,transform .15s var(--spring);
}
.dropzone:hover,.dropzone:focus-visible{background:var(--paper-3);outline:none}
.dropzone.is-over{background:var(--acid);color:var(--on-acid);transform:scale(1.01)}
.dz-big{font-size:clamp(26px,4vw,40px);margin-bottom:8px}
.dz-alt{margin-top:16px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px;margin-top:26px}
.thumb{border:var(--line);background:var(--paper-2);box-shadow:var(--shadow-sm);position:relative;animation:pop .35s var(--spring) both}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.thumb img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-bottom:var(--line-thin)}
.thumb .meta{padding:7px 9px;font-family:var(--font-mono);font-size:10.5px;line-height:1.4;color:var(--ink-3);word-break:break-all}
.thumb .name{color:var(--ink);text-transform:none}
.thumb .kill{
  position:absolute;top:5px;right:5px;width:24px;height:24px;border:var(--line-thin);
  background:var(--paper);cursor:pointer;font-family:var(--font-mono);font-size:12px;line-height:1;
}
.thumb .kill:hover{background:var(--red);color:#fff}
.sticky-cta{position:sticky;bottom:0;background:var(--paper);padding:14px 0;border-top:var(--line);margin-top:30px;z-index:10}

/* ── analyzing ──────────────────────────────────────────────── */
.pbar{height:16px;border:var(--line);background:var(--paper-2);margin:18px 0 22px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--acid);border-right:var(--line);transition:width .3s linear}
.log{font-size:13.5px;line-height:1.9;min-height:130px;color:var(--ink-3)}
.log div{animation:logline .3s var(--ease) both}
.log div:last-child{color:var(--ink);font-weight:500}
.log div:last-child::after{content:'▌';animation:blink 1s steps(2) infinite}
@keyframes logline{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}

/* ── results / rank list ────────────────────────────────────── */
.noise-note{
  border:var(--line-thin);border-left:8px solid var(--ink);background:var(--paper-3);
  padding:12px 16px;font-size:13.5px;margin-top:22px;
}
.ranklist{display:grid;gap:16px;margin-top:32px}
.rankcard{
  display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:start;
  border:var(--line);box-shadow:var(--shadow);background:var(--paper-2);padding:16px;
  animation:cardin .5s var(--spring) both;
}
@keyframes cardin{from{opacity:0;transform:translateY(26px) rotate(-.6deg)}to{opacity:1;transform:none}}
.rankcard.is-first{background:var(--acid);color:var(--on-acid)}
.rankcard.is-first .r-meta{color:var(--on-acid);opacity:.8}
.rankcard img{display:block;width:96px;aspect-ratio:3/4;object-fit:cover;border:var(--line-thin)}
.r-body{min-width:0}
.r-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.r-pos{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1}
.verdict{
  font-family:var(--font-display);font-weight:900;font-size:16px;
  border:var(--line-thin);padding:2px 10px;background:var(--paper);
}
.verdict.v-W{background:var(--acid);color:var(--on-acid)}
.verdict.v-mid{background:var(--paper-3)}
.verdict.v-L{background:var(--red);color:#fff;border-color:var(--ink)}
/* the #1 card is already accent-colored, so an accent chip on it disappears */
.rankcard.is-first .verdict.v-W{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.r-head{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.25;margin-bottom:6px}
.r-reason{font-size:15px;color:var(--ink-2)}
.rankcard.is-first .r-reason{color:var(--on-acid)}
.r-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);margin-top:8px;word-break:break-all}
.r-meta .fn{text-transform:none}
.r-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.firstbadge{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:4px 8px;white-space:nowrap;
}
.framescore{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.rankcard.is-first .framescore{color:var(--on-acid);opacity:.85}
@media(max-width:640px){
  .rankcard{grid-template-columns:72px 1fr;gap:12px}
  .rankcard img{width:72px}
  .r-side{
    grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;
    border-top:1px dashed rgba(0,0,0,.3);padding-top:9px;width:100%;
  }
}

/* ── share card (designed to be a vertical screenshot) ──────── */
.share-zone{margin-top:70px;padding-top:36px;border-top:var(--line)}
.share-grid{display:grid;grid-template-columns:390px 1fr;gap:38px;align-items:start;margin-top:26px}
/* the artifact section: the proof column sits level with the card, not on top of it */
.share-grid-mid{align-items:center}
@media(max-width:820px){.share-grid{grid-template-columns:1fr;gap:24px}}
.sharecard{
  width:100%;max-width:390px;background:var(--paper-2);
  border:var(--line);box-shadow:8px 8px 0 var(--ink);padding:24px 22px 18px;
  transition:box-shadow .3s var(--spring);
}
.sharecard.is-flash{box-shadow:0 0 0 6px var(--acid),8px 8px 0 var(--ink)}
.sc-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:var(--line);padding-bottom:10px}
.sc-logo{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-.03em}
.sc-logo i{color:var(--acid);font-style:normal;-webkit-text-stroke:1px var(--ink)}
.sc-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}
.sc-title{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1;margin:16px 0 4px}
.sc-sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-bottom:14px}
/* set tier — the one big letter on the card. grades the set, never the person */
.sc-tier{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:4px;align-items:center;border:var(--line-thin);padding:8px 10px;margin:0 0 14px;background:var(--paper-2)}
.sc-tier-k{grid-column:1/3;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3)}
.sc-tier-letter{grid-row:2;font-family:var(--font-display);font-weight:900;font-size:44px;line-height:1;padding:2px 12px;border:1px solid var(--ink);background:var(--paper-3)}
.sc-tier-label{grid-row:2;font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.2}
.tier-S .sc-tier-letter,.tier-A .sc-tier-letter{background:var(--acid);color:var(--on-acid)}
.tier-C .sc-tier-letter,.tier-D .sc-tier-letter{background:var(--red);color:#fff}
.sc-rows{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.sc-row{display:grid;grid-template-columns:18px 44px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-top:1px dashed rgba(0,0,0,.25)}
.sc-row b{font-family:var(--font-display);font-weight:900;font-size:12px;padding:2px 0;border:1px solid var(--ink)}
.sc-row .v-W{color:var(--ink);background:var(--acid);text-align:center}
.sc-row .v-mid{background:var(--paper-3);text-align:center}
.sc-row .v-L{background:var(--red);color:#fff;text-align:center}
.sc-row .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.sc-verdict{border-top:var(--line);margin-top:12px;padding-top:12px;font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.3}
.sc-foot{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);margin-top:12px;line-height:1.5}
.copy-sink{width:100%;max-width:520px;height:150px;margin-top:14px;border:var(--line-thin);background:var(--paper-2);padding:10px;font-size:12.5px;display:block}

.next-zone{margin-top:70px;padding-top:36px;border-top:var(--line)}

/* ── paywall ────────────────────────────────────────────────── */
.paywall-cta{margin-top:36px;padding:26px;border:var(--line);box-shadow:var(--shadow);background:var(--paper-2);text-align:center}
.paywall-cta .btn{margin-bottom:10px}
.fineprint{list-style:none;font-size:12.5px;line-height:1.65;color:var(--ink-3);margin:26px 0}
.fineprint li{padding-left:16px;position:relative;margin-bottom:7px;max-width:76ch}
.fineprint li::before{content:'—';position:absolute;left:0}

/* ── unlocked / full read ───────────────────────────────────── */
.axeskey{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 10px;font-size:11.5px}
.axeskey span{border:var(--line-thin);padding:3px 9px;background:var(--paper-2)}
.fulllist{display:grid;gap:22px;margin-top:26px}
.fullcard{border:var(--line);box-shadow:var(--shadow);background:var(--paper-2);animation:cardin .5s var(--spring) both}
.fc-head{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;padding:16px;border-bottom:var(--line)}
.fc-head img{display:block;width:84px;aspect-ratio:3/4;object-fit:cover;border:var(--line-thin)}
.fc-title{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.25}
.fc-file{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-top:4px;word-break:break-all;text-transform:none}
.fc-score{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);text-align:right;white-space:nowrap}
.fc-score b{display:block;font-family:var(--font-display);font-size:22px;color:var(--ink)}
.axes{display:grid}
.axis{display:grid;grid-template-columns:112px 62px 1fr;gap:14px;padding:14px 16px;border-bottom:1px dashed rgba(0,0,0,.22);align-items:start}
.axis:last-child{border-bottom:none}
.axis-name{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.axis-state{font-family:var(--font-mono);font-size:11px;text-align:center;border:1px solid var(--ink);padding:2px 4px;height:fit-content}
.axis-state.s-ok{background:var(--acid);color:var(--on-acid)}
.axis-state.s-soft{background:var(--paper-3)}
.axis-state.s-off{background:var(--red);color:#fff}
.axis-why{font-size:15px;line-height:1.5}
.axis-fix{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.55;margin-top:8px;
  border-left:4px solid var(--acid);padding:6px 10px;background:var(--paper);
}
.axis-fix b{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;display:block;color:var(--ink-3)}
.fc-note{padding:12px 16px;border-top:var(--line);font-family:var(--font-mono);font-size:12px;color:var(--ink-3);background:var(--paper-3)}
@media(max-width:640px){
  .fc-head{grid-template-columns:64px 1fr}
  .fc-head img{width:64px}
  .fc-score{grid-column:1 / -1;text-align:left}
  .fc-score b{display:inline;margin-right:8px}
  .axis{grid-template-columns:1fr;gap:6px}
  .axis-state{width:64px;text-align:center}
}

/* coverage */
.coverage{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:24px}
.slot{border:var(--line);background:var(--paper-2);padding:16px;box-shadow:var(--shadow-sm)}
.slot.is-covered{background:var(--acid);color:var(--on-acid)}
.slot-state{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.slot h4{font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:6px}
.slot p{font-size:13.5px;line-height:1.5;max-width:none}
.slot .who{font-family:var(--font-mono);font-size:11px;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(0,0,0,.3);text-transform:none;word-break:break-all}
.coverage-count{font-family:var(--font-mono);font-size:13px;border:var(--line-thin);display:inline-block;padding:5px 10px;background:var(--paper-2);margin-bottom:6px}

.shootlist{display:grid;gap:14px;margin-top:22px}
.shoot{border:var(--line);background:var(--paper-2);box-shadow:var(--shadow-sm);padding:16px 18px}
.shoot h4{font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:6px}
.shoot .recipe{font-family:var(--font-mono);font-size:13px;line-height:1.6}
.shoot .swap{font-size:13.5px;color:var(--ink-3);margin-top:8px}

.reorder{list-style:none;counter-reset:ro;margin-top:22px;display:grid;gap:0}
.reorder li{
  counter-increment:ro;display:grid;grid-template-columns:44px 1fr;gap:14px;
  border-top:var(--line-thin);padding:13px 0;align-items:center;font-size:16px;
}
.reorder li:last-child{border-bottom:var(--line-thin)}
.reorder li::before{content:counter(ro);font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--acid);-webkit-text-stroke:1.2px var(--ink)}
.reorder .fn{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);text-transform:none;display:block}
.revertbox{border:var(--line-thin);background:var(--paper-3);padding:14px 16px;margin-top:18px;font-size:13px;line-height:1.7}
.revertbox b{display:block;margin-bottom:6px;font-size:14px}
.revertbox ol{margin-left:20px;text-transform:none}

/* ── modal ──────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:950;background:rgba(19,19,19,.72);display:grid;place-items:center;padding:22px;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
  background:var(--paper);border:var(--line);box-shadow:12px 12px 0 var(--acid);
  padding:28px;max-width:470px;animation:cardin .4s var(--spring) both;
}
.modal-card h3{margin:6px 0 12px}

/* ── footer ─────────────────────────────────────────────────── */
.site-footer{border-top:var(--line);background:var(--paper-3);padding:34px 0 46px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start}
.footer-legal{grid-column:1 / -1;border-top:var(--line-thin);padding-top:18px;color:var(--ink-3);max-width:82ch}
.footer-legal p{margin-bottom:7px;max-width:none}
.footer-legal b{color:var(--ink)}
.accent-switch .switch-row{display:flex;gap:8px;margin-top:6px}
.swatch{
  display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;
  border:var(--line-thin);background:var(--paper-2);padding:5px 9px;cursor:pointer;color:var(--ink);
  text-transform:lowercase;
}
.swatch span{width:13px;height:13px;border:1px solid var(--ink);display:block}
.swatch-acid span{background:#8ACE00}
.swatch-cobalt span{background:#002FA7}
.swatch[aria-pressed="true"]{box-shadow:var(--shadow-sm);font-weight:600}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ██ v2 · THE SWAG LAYER ██
   everything above this line is v1 and still does the structural work.
   everything below turns the surface all the way up: 90s gradient ground,
   checkerboard zones, custom cursors, tilted headlines, marker highlights,
   two marquees fighting each other, tape, springs, and the sticker layer.
   the rule it obeys: structure stays rigid, text always lands on a calm
   substrate. readability is not negotiable, everything else is.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --shadow-xl:10px 10px 0 var(--ink);
  --tape:rgba(255,253,247,.62);
  /* the 90s ground. pastel on purpose: ink text has to stay legible on it. */
  --g1:#FFD8A6;   /* peach   */
  --g2:#BEE3FF;   /* sky     */
  --g3:#E7D3FF;   /* lavender*/
  --g4:#C9F5D9;   /* mint    */
  --cursor-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='28' viewBox='0 0 26 28'%3E%3Cpath d='M3 2 L3 21 L8.4 15.6 L11.8 24 L15.8 22.2 L12.4 13.9 L19.6 13.6 Z' fill='%23131313' stroke='%23FFFDF7' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto;
  --cursor-flame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='31' viewBox='0 0 28 31'%3E%3Cpath d='M14 2 C9.5 9 6 11.5 6 17.5 a8.6 8.6 0 0 0 17.2 0 c0-5-3.8-6.8-5.8-11.6 -1 3.9-2.9 4.9-2.9 4.9 0-2.9 0-5.8 0-8.8z' fill='%238ACE00' stroke='%23131313' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M14 14 c-1.9 2.9-2.9 3.9-2.9 5.8 a3.1 3.1 0 0 0 6.2 0 c0-2.3-2-2.9-3.3-5.8z' fill='%23131313'/%3E%3C/svg%3E") 14 2, pointer;
}
html[data-accent="cobalt"]{
  --g1:#FFE3B0; --g2:#AFC8FF; --g3:#D9DEFF; --g4:#BFEFFF;
  --cursor-flame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='31' viewBox='0 0 28 31'%3E%3Cpath d='M14 2 C9.5 9 6 11.5 6 17.5 a8.6 8.6 0 0 0 17.2 0 c0-5-3.8-6.8-5.8-11.6 -1 3.9-2.9 4.9-2.9 4.9 0-2.9 0-5.8 0-8.8z' fill='%23002FA7' stroke='%23131313' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M14 14 c-1.9 2.9-2.9 3.9-2.9 5.8 a3.1 3.1 0 0 0 6.2 0 c0-2.3-2-2.9-3.3-5.8z' fill='%23FFFDF7'/%3E%3C/svg%3E") 14 2, pointer;
}

/* ── the ground: 90s gradient, fixed, sits under everything ──────────── */
/* the rotated marquees stick a few px past the edge; clip (not hidden) so
   the topbar keeps its sticky scrollport. */
html{overflow-x:clip}
body{
  background:
    radial-gradient(760px 520px at 8% -6%,  var(--g1), transparent 62%),
    radial-gradient(680px 520px at 96% 4%,  var(--g2), transparent 60%),
    radial-gradient(900px 700px at 50% 108%,var(--g3), transparent 62%),
    radial-gradient(520px 420px at 88% 74%, var(--g4), transparent 62%),
    var(--paper);
  background-attachment:fixed;
  cursor:var(--cursor-arrow);
}
a,button,summary,.dropzone,.opt,.swatch,label,[data-go]{cursor:var(--cursor-flame)}
.btn[disabled]{cursor:not-allowed}
input,textarea{cursor:text}

/* ── bands: text keeps a calm substrate, the pattern lives around it ─── */
.hero{background:transparent;overflow:visible;border-bottom-width:3px}
.band{background:var(--paper);position:relative}
.band-invert{background:var(--ink)}
.band-accent{background:var(--acid);padding:38px 0}
.band-accent > .wrap{position:relative}
/* the checkerboard now lives in exactly one place on the page: the footer. */
.site-footer{
  background-image:
    linear-gradient(45deg,rgba(19,19,19,.05) 25%,transparent 25%,transparent 75%,rgba(19,19,19,.05) 75%),
    linear-gradient(45deg,rgba(19,19,19,.05) 25%,transparent 25%,transparent 75%,rgba(19,19,19,.05) 75%);
  background-size:28px 28px;background-position:0 0,14px 14px;
}

/* ── every non-landing screen becomes one big card on the gradient ───── */
.screen:not(#s-landing) .pad-screen{
  background:var(--paper);border:var(--line);box-shadow:var(--shadow-xl);
  padding:40px 30px 80px;margin:26px auto 64px;position:relative;
}
@media(max-width:680px){
  .screen:not(#s-landing) .pad-screen{padding:28px 18px 64px;margin:14px auto 34px;box-shadow:var(--shadow)}
}

/* ── type: louder, tilted, marker-highlighted ────────────────────────── */
h1.display{font-size:clamp(48px,11vw,116px);letter-spacing:-.035em}
h1.display.big{font-size:clamp(50px,12vw,128px);letter-spacing:-.04em}
.nb{white-space:nowrap}
h2.display{font-size:clamp(30px,4vw,56px);letter-spacing:-.03em}
h2.display.big{font-size:clamp(38px,6.4vw,76px);letter-spacing:-.035em}
.qtitle{font-size:clamp(30px,5.4vw,56px);letter-spacing:-.03em}
.dz-big{font-size:clamp(30px,5vw,52px)}

/* words under slight angles. deterministic — nth-child, not random. */
.tw{display:inline-block;transform-origin:50% 90%}
.tw:nth-child(1){transform:rotate(-2.2deg)}
.tw:nth-child(2){transform:rotate(1.6deg)}
.tw:nth-child(3){transform:rotate(-1.1deg)}
.tw:nth-child(4){transform:rotate(2.4deg)}
.tw:nth-child(5){transform:rotate(-1.8deg)}
.tw:nth-child(6){transform:rotate(1.2deg)}

/* marker highlight with uneven, hand-drawn edges */
/* the horizontal corner radii stay inside the horizontal padding — any
   bigger and the ellipse eats the first and last glyph, which is invisible
   on acid (dark text stays legible on paper) and fatal on cobalt (light
   text on light paper). the vertical radii carry the hand-drawn lopsided
   feel instead. */
.hl{
  display:inline-block;
  background:var(--acid);color:var(--on-acid);
  box-shadow:none;padding:.04em .26em .08em;
  border-radius:.22em .26em .2em .24em / 62% 44% 58% 48%;
  transform:rotate(-1.4deg);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.band-invert .hl{box-shadow:none}
/* the marker blob carries its own padding — pull the punctuation back in */
.hl + .tw{margin-left:-.16em}
.kicker{transform:rotate(-1.4deg);box-shadow:4px 4px 0 var(--acid)}
.pullquote{transform:rotate(-1deg)}
.secnum{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:3px 9px;letter-spacing:.2em;transform:rotate(-.8deg);
}
.band-invert .secnum{background:var(--paper);color:var(--ink)}
.band-accent .secnum{background:var(--ink);color:var(--acid);opacity:1}

/* ── the one marquee: ink, level, under the hero ─────────────────────── */
.marquee-a{
  background:var(--ink);color:var(--paper);position:relative;z-index:3;
  padding:12px 0;border-bottom:var(--line);
}

/* ── tape strips on the cards ────────────────────────────────────────── */
.taped{position:relative}
.taped::before,.taped::after{
  content:'';position:absolute;width:92px;height:27px;z-index:6;pointer-events:none;
  background:var(--tape);
  border-left:1px dashed rgba(19,19,19,.28);border-right:1px dashed rgba(19,19,19,.28);
  box-shadow:0 1px 3px rgba(19,19,19,.18);
}
.taped::before{top:-13px;left:-17px;transform:rotate(-8deg)}
.taped::after{bottom:-13px;right:-17px;transform:rotate(-8deg)}
.modal-card.taped::after{display:none}

/* ── springs on everything you can point at ──────────────────────────── */
.btn{border-width:3px;box-shadow:var(--shadow)}
.btn:hover{transform:translate(3px,3px) rotate(-1deg);box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translate(3px,3px) rotate(1.2deg) scale(1.03)}
.opt:hover{transform:translate(2px,2px) rotate(-.5deg)}
.proofcard,.dealcard,.slot,.shoot,.negcard,.rankcard,.fullcard,.privacy-strip{
  transition:transform .18s var(--spring),box-shadow .18s var(--spring);
}
.proofcard:hover,.dealcard:hover{transform:translate(-4px,-4px) rotate(-.5deg);box-shadow:var(--shadow-xl)}
.slot:hover,.shoot:hover{transform:translate(-3px,-3px) rotate(.5deg);box-shadow:var(--shadow)}
.rankcard:hover,.fullcard:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-xl)}
.negcard:hover{transform:rotate(-1deg) scale(1.02)}
.thumb{transition:transform .18s var(--spring)}
.thumb:hover{transform:rotate(-2deg) scale(1.04);z-index:3}
.step-n{-webkit-text-stroke:2px var(--ink);font-size:56px}

/* ── stagger-ins ─────────────────────────────────────────────────────── */
@keyframes swagin{from{opacity:0;transform:translateY(20px) rotate(-1.4deg)}to{opacity:1;transform:none}}
.negcard,.dealcard,.slot,.shoot{animation:swagin .5s var(--spring) both}
.negcard:nth-child(2),.dealcard:nth-child(2){animation-delay:.09s}
.negcard:nth-child(3){animation-delay:.18s}
.slot:nth-child(2),.shoot:nth-child(2){animation-delay:.07s}
.slot:nth-child(3),.shoot:nth-child(3){animation-delay:.14s}
.slot:nth-child(4),.shoot:nth-child(4){animation-delay:.21s}
.slot:nth-child(5){animation-delay:.28s}
.slot:nth-child(6){animation-delay:.35s}

/* ── share card: more of a poster ────────────────────────────────────── */
.sc-holder{position:relative;width:100%;max-width:390px}
.sharecard{
  box-shadow:10px 10px 0 var(--ink),20px 20px 0 var(--acid);
  transform:rotate(-1.2deg);
  background:
    radial-gradient(300px 200px at 100% 0%,rgba(255,255,255,.9),transparent 70%),
    var(--paper-2);
}
.sharecard.is-flash{box-shadow:0 0 0 6px var(--acid),10px 10px 0 var(--ink)}
.sc-title{font-size:38px;letter-spacing:-.03em}
.sc-verdict{font-size:16px}

/* ── the sticker layer ───────────────────────────────────────────────────
   one host div per zone, absolutely positioned over its section, eating no
   clicks. only the stickers themselves are pointer-targets.
   ─────────────────────────────────────────────────────────────────────── */
.stkzone{position:absolute;inset:0;pointer-events:none;z-index:60;overflow:visible}
.hero,.band,.sc-holder{position:relative}

.stk{
  position:absolute;pointer-events:auto;
  font-family:var(--font-hand);font-weight:700;font-size:22px;line-height:1.1;
  background:var(--paper-2);color:var(--ink);
  border:4px solid #FFFDF7;                 /* the white die-cut edge */
  outline:2.5px solid var(--ink);           /* the ink line outside the white */
  box-shadow:3px 4px 0 rgba(19,19,19,.42);
  padding:8px 18px 9px;white-space:nowrap;
  border-radius:40px;
  cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none;
  will-change:transform;
  transform-origin:50% 50%;
  animation:stk-drop .55s var(--spring) both;
}
@keyframes stk-drop{from{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1}}
.stk:active{cursor:grabbing}
.stk .tok{font-family:var(--font-display);font-size:.82em}
.stk-acid{background:var(--acid);color:var(--on-acid)}
.stk-ink{background:var(--ink);color:var(--paper)}
.stk-mono{font-family:var(--font-mono);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px}

/* square-ish sticker */
.stk-square{border-radius:8px}
/* star badge */
.stk-star{
  border-radius:0;border:none;outline:none;
  width:154px;height:154px;padding:0;
  display:grid;place-items:center;text-align:center;
  white-space:normal;font-size:19px;line-height:1.05;
  background:var(--acid);color:var(--on-acid);
  box-shadow:none;
  clip-path:polygon(50% 0%,61% 21%,85% 15%,79% 39%,100% 50%,79% 61%,85% 85%,61% 79%,50% 100%,39% 79%,15% 85%,21% 61%,0% 50%,21% 39%,15% 15%,39% 21%);
  filter:drop-shadow(3px 4px 0 rgba(19,19,19,.5));
}
.stk-star > span{display:block;max-width:92px}
/* peeling corner on hover */
.stk-peel::after{
  content:'';position:absolute;right:-4px;bottom:-4px;width:0;height:0;
  border-style:solid;border-width:0 0 20px 20px;
  border-color:transparent transparent rgba(19,19,19,.22) transparent;
  transition:border-width .22s var(--spring);
  border-bottom-right-radius:3px;
}
.stk-peel:hover::after{border-width:0 0 34px 34px}
.stk-peel:hover{box-shadow:6px 8px 0 rgba(19,19,19,.35)}
/* the rare one */
.stk-rare{
  background:var(--red);color:#fff;font-family:var(--font-display);
  font-size:15px;letter-spacing:-.01em;border-radius:10px;
}
/* the verdict one, dropped in after a read */
.stk-verdict{
  background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.06em;
  border-color:var(--acid);outline-color:var(--ink);border-radius:6px;text-transform:none;
}

/* narrow: only the mobile-safe stickers survive (same cut-off v1 used) */
@media(max-width:1180px){
  .stk[data-desktoponly="1"]{display:none}
}
/* mobile: smaller, so they never crowd a cta */
@media(max-width:760px){
  .stk{font-size:17px;padding:6px 13px 7px;border-width:3px;outline-width:2px}
  .stk-star{width:108px;height:108px;font-size:14px}
  .stk-star > span{max-width:64px}
  .stk-mono{font-size:10.5px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){
  .stk{animation:none}
}

/* ── review fix (Fable): the 18+/BDD legal block is product-critical copy —
   ink-3 on the checkerboard footer was too faint. solid backing + darker ink. */
.footer-legal{color:var(--ink-2);background:var(--paper-2);border:var(--line-thin);padding:16px 18px;margin-top:6px}

/* ═══════════════════════════════════════════════════════════════════════════
   ██ v2.1 · THE LADDER ██
   three tier cards, the two upgrade zones, and the locked stub. the stub is
   the load-bearing one: solid card, real description, zero blur. if the copy
   below ever needs frosted glass to sell, the copy is the problem.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the price ladder in the hero box ────────────────────────────────── */
.dealcard-free{max-width:none}
.dealcard-free .checklist{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
@media(max-width:700px){.dealcard-free .checklist{grid-template-columns:1fr}}

/* ── tier cards ──────────────────────────────────────────────────────── */
.tiergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;align-items:stretch}
@media(max-width:900px){.tiergrid{grid-template-columns:1fr}}
.tiercard{
  border:var(--line);background:var(--paper-2);box-shadow:var(--shadow-sm);
  padding:18px 18px 20px;display:flex;flex-direction:column;
  animation:swagin .5s var(--spring) both;
  transition:transform .18s var(--spring),box-shadow .18s var(--spring);
}
.tiercard:nth-child(2){animation-delay:.08s}
.tiercard:nth-child(3){animation-delay:.16s}
.tiercard:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:var(--shadow)}
.tier-price{font-size:clamp(34px,5vw,48px);line-height:.94}
.tier-name{font-size:17px;margin-top:6px}
.tier-line{font-size:14px;color:var(--ink-2);margin-top:6px;max-width:none}
.tier-list{margin-top:14px;flex:1}
.tier-list li{padding-right:8px}
.tier-list .inherit{background:var(--paper-3)}
.tier-list .inherit i{background:var(--ink);color:var(--paper)}
.tiercard-pick{cursor:var(--cursor-flame)}
.tier-pick{margin-top:16px;width:100%;font-size:14px;padding:12px 16px}
.tiercard.is-on{background:var(--acid);color:var(--on-acid);box-shadow:var(--shadow)}
.tiercard.is-on .tier-line{color:var(--on-acid);opacity:.85}
.tiercard.is-on .checklist i{background:var(--paper-2);color:var(--ink)}
.tiercard.is-on .tier-list .inherit{background:rgba(0,0,0,.10)}
.tiercard.is-on .tier-list .inherit i{background:var(--ink);color:var(--acid)}
.tiercard.is-on .checklist li{border-color:rgba(0,0,0,.25)}

/* ═══════════════════════════════════════════════════════════════════════════
   ██ site edition ██
   consent boxes, tone toggle, the free sample block, two share cards, the
   optional "aim" questions on the paywall, and the legal pages. everything
   below reuses the prototype's tokens; nothing new in the palette.
   ═══════════════════════════════════════════════════════════════════════════ */

.tiergrid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.tiergrid-2{grid-template-columns:1fr}}
a.btn{text-decoration:none;display:inline-block;text-align:center}
.guarantee-line{margin-top:14px;font-weight:600;color:var(--ink)}

/* consent · two plain checkboxes, no dark pattern */
.consent{border:var(--line);background:var(--paper-2);box-shadow:var(--shadow-sm);padding:16px 18px;margin-top:26px}
.consent-row{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:15.5px;cursor:pointer}
.consent-row input{width:22px;height:22px;flex:0 0 22px;margin-top:1px;accent-color:var(--acid);cursor:pointer}
.consent p{margin-top:8px;max-width:none}

/* tone toggle on the results screen */
.tone-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
.tone-toggle{display:inline-flex;border:var(--line);box-shadow:var(--shadow-sm);background:var(--paper-2)}
.tone-btn{
  font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:lowercase;
  padding:10px 14px;border:0;background:transparent;color:var(--ink);cursor:pointer;
}
.tone-btn + .tone-btn{border-left:var(--line-thin)}
.tone-btn.is-on{background:var(--acid);color:var(--on-acid)}

/* the free sample: one full card */
.worst-zone{margin-top:70px;padding-top:36px;border-top:var(--line)}
.worst-zone .fulllist{margin-top:22px}
.fc-noimg{width:84px;height:84px;display:grid;place-items:center;background:var(--paper-3);border:var(--line-thin);font-size:10px;text-align:center;padding:6px;line-height:1.3}
@media(max-width:640px){.fc-noimg{width:64px;height:64px}}

/* two share cards */
.share-grid-2{grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:820px){.share-grid-2{grid-template-columns:1fr}}
.sc-label{margin-bottom:10px}
.sc-row.has-img{grid-template-columns:18px 44px 34px 1fr auto}
.sc-row img{width:34px;height:34px;object-fit:cover;border:1px solid var(--ink);display:block}
.sc-domain{font-family:var(--font-mono);font-weight:600;color:var(--ink)}

/* aim: the optional questions on the paywall */
.aim-zone{margin-top:40px;padding-top:30px;border-top:var(--line)}
.aim-q{margin-top:22px}
.qtitle-sm{font-size:clamp(20px,3vw,28px)}
.opts-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.opts-row .opt{padding:12px 14px;font-size:15px}
.aim-zone #aim-line{margin-top:14px;max-width:70ch}

/* analyzing: retry row */
#analyze-fail{margin-top:22px}

/* footer links */
.footer-links a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.footer-links a:hover{background:var(--acid);color:var(--on-acid);text-decoration:none}
.footer-legal a,.privacy-strip a,.consent a,.fineprint a{color:inherit;text-decoration:underline}
.band a{color:inherit;text-decoration:underline}

/* legal pages: plain prose, same paper */
.legal{max-width:72ch}
.legal h1{margin-bottom:8px}
.legal h2{font-size:clamp(20px,3vw,28px);margin-top:36px;margin-bottom:10px}
.legal p,.legal li{font-size:16px;line-height:1.65;max-width:none;margin-top:10px}
.legal ul{margin-left:22px}
.legal .updated{color:var(--ink-3)}
.legal a{color:var(--ink);text-decoration:underline}

/* ── paid.html: the email fallback form ──────────────────────────────── */
.form-card{border:var(--line);background:var(--paper-2);box-shadow:var(--shadow);padding:22px 24px;margin-top:28px}
.form-card label{display:block;margin-bottom:8px}
.form-card input[type=email]{
  width:100%;max-width:420px;border:var(--line);background:var(--paper);padding:14px 16px;
  font-family:var(--font-mono);font-size:16px;color:var(--ink);
}
.form-card input[type=email]:focus{outline:3px solid var(--acid);outline-offset:2px}
.dealcard + .note{margin-top:22px}