/* plinkogames.ca — "Ledger & Pegboard" design system
   Warm paper, ink type, tangerine accent, hard offset shadows, perforated coupons. */
:root{
  --paper:#F5F0E6;--paper-2:#ECE5D6;--paper-3:#E3DAC7;--card:#FBF8F2;
  --ink:#15120E;--ink-2:#4B443B;--ink-3:#7A7166;--line:#D6CCB9;--line-2:#BFB39D;
  --accent:#FF4D12;--accent-2:#E03E07;--accent-soft:#FFE3D8;
  --teal:#0E7C72;--teal-soft:#D5EFEA;--gold:#E9B53A;--gold-soft:#FBF0CF;--red:#C8102E;--red-soft:#F8D7DC;
  --shadow:4px 4px 0 var(--ink);--shadow-sm:2px 2px 0 var(--ink);
  --r:14px;--r-sm:8px;--maxw:1180px;
  --font-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;
  background-image:radial-gradient(var(--line) 1.1px,transparent 1.2px);background-size:26px 26px;}
img,svg{max-width:100%;height:auto}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--accent-2)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,3.9rem);letter-spacing:-.035em}
h2{font-size:clamp(1.65rem,3.3vw,2.5rem)}
h3{font-size:1.32rem}
h4{font-size:1.08rem}
p{margin:0 0 1em}
.lead{font-size:1.18rem;color:var(--ink-2);max-width:62ch}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.small{font-size:.9rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.narrow{max-width:820px}
section{padding-block:56px}
@media(max-width:640px){section{padding-block:40px}}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-2);margin:0 0 10px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.sec-head p{margin:0;max-width:60ch;color:var(--ink-2)}

/* top strip */
.strip{background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em}
.strip .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:7px;flex-wrap:wrap}
.strip span b{color:var(--gold);font-weight:600}
.strip a{color:var(--paper);text-decoration:none;border-bottom:1px dotted var(--paper)}
@media(max-width:640px){.strip .hide-m{display:none}}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(245,240,230,.92);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
header.site .wrap{display:flex;align-items:center;gap:26px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.03em;white-space:nowrap}
.logo .ball{width:30px;height:30px;border-radius:50%;background:var(--accent);border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);display:inline-block;position:relative}
.logo .ball::after{content:"";position:absolute;left:6px;top:5px;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.85}
.logo .tld{color:var(--accent-2)}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main a{text-decoration:none;font-weight:600;font-size:.96rem;padding:8px 12px;border-radius:8px;border:2px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-color:var(--ink);background:var(--card);color:var(--ink)}
.cta-head{margin-left:8px}
/* top-of-page CTA on review pages: only where the header CTA is hidden */
.btn.mob-cta{display:none}
@media(max-width:1000px){.btn.mob-cta{display:flex;margin:4px 0 6px;white-space:normal;text-align:center}}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--ink);border-radius:8px;width:44px;height:44px;font-size:1.3rem;cursor:pointer;font-family:var(--font-mono)}
@media(max-width:1000px){nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2px solid var(--ink);flex-direction:column;padding:12px 20px 18px}nav.main.open{display:flex}.burger{display:block}.btn.cta-head{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:10px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-weight:700;text-decoration:none;font-family:var(--font-display);font-size:1rem;box-shadow:var(--shadow);cursor:pointer;transition:transform .08s,box-shadow .08s;line-height:1.15;white-space:nowrap}
.btn:hover{transform:translate(2px,2px);box-shadow:var(--shadow-sm);color:var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2);color:#fff}
.btn.ink{background:var(--ink);color:var(--paper)}.btn.ink:hover{color:var(--paper)}
.btn.sm{padding:8px 14px;font-size:.9rem;box-shadow:var(--shadow-sm)}.btn.sm:hover{box-shadow:none}
.btn.ghost{box-shadow:none;background:transparent}.btn.ghost:hover{background:var(--card)}
.btn.block{width:100%}

/* code chip */
.code{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:600;background:var(--gold-soft);border:2px dashed var(--ink);border-radius:8px;padding:5px 10px;font-size:.92rem;cursor:pointer;user-select:all;position:relative;white-space:nowrap}
.code:hover{background:var(--gold)}
.code.copied{background:var(--teal-soft);border-style:solid}
.code .cp{opacity:.6;font-size:.85em}
.code.copied .cp{opacity:1}
.code.big{font-size:1.4rem;padding:10px 18px}

/* hero */
.hero{padding-block:60px 40px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--accent-soft) 62%);}
.hero-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:2px solid var(--ink)}
.hero-stats div b{display:block;font-family:var(--font-display);font-size:1.7rem;letter-spacing:-.03em}
.hero-stats div span{font-size:.85rem;color:var(--ink-3);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.board{background:var(--card);border:2.5px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:18px;position:relative}
.board svg{display:block;width:100%;height:auto}
.board .tag{position:absolute;top:-14px;left:18px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border:2px solid var(--ink);border-radius:6px}
@keyframes drop{0%{transform:translate(0,-30px)}10%{transform:translate(-18px,30px)}20%{transform:translate(0,90px)}30%{transform:translate(18px,150px)}40%{transform:translate(0,210px)}50%{transform:translate(-18px,270px)}60%{transform:translate(-36px,330px)}70%{transform:translate(-18px,390px)}80%,100%{transform:translate(-18px,450px)}}
.board .ballanim{animation:drop 3.2s cubic-bezier(.4,.1,.6,1) infinite}

/* flagship */
.flag{background:var(--ink);color:var(--paper);border-radius:20px;border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--accent);padding:28px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
.flag::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1.2px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.flag>*{position:relative}
.flag h2{color:#fff;margin-bottom:6px}
.flag .bonus{font-family:var(--font-display);font-size:1.35rem;color:var(--gold);font-weight:700}
.flag .code{background:var(--paper);color:var(--ink)}
.flag .meta{font-family:var(--font-mono);font-size:.8rem;opacity:.8;margin-top:10px}
.flag .acts{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:240px}
@media(max-width:760px){.flag{grid-template-columns:1fr}.flag .acts{min-width:0}}
.pill{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:6px;border:1.5px solid currentColor}
.pill.hot{background:var(--accent);color:#fff;border-color:var(--ink)}
.pill.ok{background:var(--teal-soft);color:var(--teal);border-color:var(--teal)}
.pill.warn{background:var(--gold-soft);color:#8a6410;border-color:#b8891d}
.pill.bad{background:var(--red-soft);color:var(--red);border-color:var(--red)}

/* brand mark (initial tile — not an official logo) */
.mark{width:44px;height:44px;border-radius:12px;border:2px solid var(--ink);display:inline-grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:#fff;box-shadow:var(--shadow-sm);flex:none;letter-spacing:-.04em}
.mark.lg{width:72px;height:72px;font-size:2rem;border-radius:18px;box-shadow:var(--shadow)}
.brandcell{display:flex;align-items:center;gap:12px}
.brandcell .nm{font-weight:700;font-family:var(--font-display);font-size:1.05rem;line-height:1.1}
.brandcell .sub{font-size:.8rem;color:var(--ink-3);font-family:var(--font-mono)}

/* ledger table */
.ledger-wrap{overflow-x:auto;border:2.5px solid var(--ink);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}
table.ledger{width:100%;border-collapse:collapse;min-width:860px}
table.ledger th{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;text-align:left;padding:14px 14px;background:var(--paper-2);border-bottom:2px solid var(--ink);color:var(--ink-2);white-space:nowrap}
table.ledger td{padding:14px;border-bottom:1.5px solid var(--line);vertical-align:middle}
table.ledger tr:last-child td{border-bottom:0}
table.ledger tr:hover td{background:#fff}
table.ledger .rank{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink-3);width:44px}
table.ledger tr:first-child .rank{color:var(--accent)}
table.ledger .score{font-family:var(--font-mono);font-weight:700;font-size:1.05rem}
table.ledger .score small{color:var(--ink-3);font-weight:400}
table.ledger .bonus{max-width:260px;font-size:.95rem;line-height:1.35}
table.ledger .acts{display:flex;gap:8px;white-space:nowrap}
.bar{height:6px;background:var(--paper-3);border-radius:4px;overflow:hidden;margin-top:6px;width:90px}
.bar i{display:block;height:100%;background:var(--teal)}

/* simple table */
table.t{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--card);border:2px solid var(--ink);border-radius:12px;overflow:hidden}
table.t th,table.t td{padding:10px 12px;border-bottom:1.5px solid var(--line);text-align:left;vertical-align:top}
table.t th{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;background:var(--paper-2)}
table.t tr:last-child td{border-bottom:0}
.tbl{overflow-x:auto;margin:18px 0}
.tbl table.t{min-width:520px}

/* cards */
.card{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0}
.card p{margin:0;color:var(--ink-2)}
.card .foot{margin-top:auto;padding-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card .ico{font-size:1.8rem;line-height:1;width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:12px;background:var(--paper-2)}
.card.link{text-decoration:none;transition:transform .08s,box-shadow .08s}
.card.link:hover{transform:translate(2px,2px);box-shadow:var(--shadow-sm);color:var(--ink)}
.card.flat{box-shadow:none}
.card.accent{background:var(--accent-soft)}
.card.teal{background:var(--teal-soft)}
.card.gold{background:var(--gold-soft)}

/* coupon */
.coupon{display:grid;grid-template-columns:1fr 200px;background:var(--card);border:2.5px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.coupon .l{padding:22px}
.coupon .r{border-left:2.5px dashed var(--ink);padding:22px 18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;background:var(--gold-soft);position:relative}
.coupon::before,.coupon::after{content:"";position:absolute;width:26px;height:26px;background:var(--paper);border:2.5px solid var(--ink);border-radius:50%;right:200px;transform:translateX(50%);z-index:2}
.coupon::before{top:-15px}.coupon::after{bottom:-15px}
.coupon .r .lbl{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.coupon .bon{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin:6px 0}
@media(max-width:640px){.coupon{grid-template-columns:1fr}.coupon .r{border-left:0;border-top:2.5px dashed var(--ink)}.coupon::before,.coupon::after{display:none}}

/* callout / note */
.note{border:2px solid var(--ink);border-left-width:8px;border-radius:10px;padding:14px 18px;background:var(--card);margin:20px 0}
.note.warn{border-left-color:var(--gold)}.note.ok{border-left-color:var(--teal)}.note.hot{border-left-color:var(--accent)}.note.bad{border-left-color:var(--red)}
.note p:last-child{margin:0}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:14px}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:800}

/* pros/cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:640px){.pc{grid-template-columns:1fr}}
.pc ul{margin:0;padding:0;list-style:none}
.pc li{padding:6px 0 6px 26px;position:relative;border-bottom:1px solid var(--line)}
.pc li:last-child{border:0}
.pc .pros li::before{content:"+";position:absolute;left:4px;color:var(--teal);font-weight:800;font-family:var(--font-mono)}
.pc .cons li::before{content:"–";position:absolute;left:4px;color:var(--red);font-weight:800;font-family:var(--font-mono)}
.pc>div{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:16px}
.pc h4{margin-bottom:8px}

/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.facts div{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:12px 14px}
.facts div span{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.facts div b{font-size:1.02rem}

/* rating badge */
.rating{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--font-display);font-weight:800;font-size:2.4rem;letter-spacing:-.04em;line-height:1}
.rating small{font-size:1rem;color:var(--ink-3);font-weight:600}
.stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem}

/* FAQ */
.faq details{border:2px solid var(--ink);border-radius:12px;background:var(--card);margin-bottom:10px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;font-family:var(--font-display);font-size:1.05rem;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:1.3rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);padding-bottom:14px;margin:0}

/* article */
.article{max-width:800px}
.article h2{margin-top:2em;font-size:1.75rem}
.article h3{margin-top:1.6em}
.article ul,.article ol{padding-left:1.3em;color:var(--ink-2)}
.article li{margin-bottom:.35em}
.article figure img{border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);margin:10px 0 12px;display:block;width:100%;height:auto}
.article figure{margin:20px 0}
.article figcaption{font-size:.85rem;color:var(--ink-3);font-family:var(--font-mono)}
.meta-line{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.toc{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:14px 18px;margin:20px 0}
.toc b{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.toc ol{margin:6px 0 0;padding-left:1.2em;columns:2;column-gap:20px}
@media(max-width:600px){.toc ol{columns:1}}
.toc li{margin:2px 0;font-size:.95rem}
.layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
@media(max-width:960px){.layout{grid-template-columns:1fr}}
.side{position:sticky;top:90px;display:grid;gap:16px}
.side .card{box-shadow:var(--shadow-sm)}
.side ul{padding-left:1.1em;margin:0}

/* breadcrumbs */
.crumbs{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);padding:14px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}.crumbs a:hover{color:var(--accent-2)}
.crumbs span{margin:0 6px}

/* page head */
.phead{padding-block:34px 10px}
.phead .lead{margin-top:8px}

/* game */
.game{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
@media(max-width:860px){.game{grid-template-columns:1fr}}
.panel{background:var(--card);border:2.5px solid var(--ink);border-radius:16px;padding:18px;box-shadow:var(--shadow);display:grid;gap:12px}
.panel label{display:grid;gap:5px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.panel input,.panel select,.field input,.field select{font:inherit;font-family:var(--font-mono);padding:10px 12px;border:2px solid var(--ink);border-radius:8px;background:#fff;width:100%;color:var(--ink)}
.panel input:focus,.field input:focus,.panel select:focus,.field select:focus{outline:3px solid var(--accent-soft);border-color:var(--accent)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.seg button{background:#fff;border:0;padding:9px 6px;font-family:var(--font-mono);font-size:.82rem;cursor:pointer;border-right:2px solid var(--ink);text-transform:uppercase;letter-spacing:.05em}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:var(--paper)}
.bal{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);background:var(--paper-2);border:2px solid var(--ink);border-radius:8px;padding:8px 12px}
.bal b{font-size:1.15rem}
.bal button{background:none;border:0;cursor:pointer;font-size:1.1rem}
.stage{background:var(--card);border:2.5px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:12px;position:relative}
.stage canvas{width:100%;display:block;border-radius:10px;background:#1B1712}
.results{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;min-height:32px}
.results span{font-family:var(--font-mono);font-size:.8rem;padding:3px 8px;border-radius:6px;border:1.5px solid var(--ink);background:var(--paper-2)}
.results span.win{background:var(--teal-soft);border-color:var(--teal)}
.results span.big{background:var(--gold);}
.results span.lose{background:var(--red-soft);border-color:var(--red)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
@media(max-width:600px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat-row div{background:var(--paper-2);border:2px solid var(--ink);border-radius:8px;padding:8px 10px;font-family:var(--font-mono);font-size:.78rem}
.stat-row div b{display:block;font-size:1.05rem}

/* tools */
.tool{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
@media(max-width:860px){.tool{grid-template-columns:1fr}}
.field{display:grid;gap:5px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.out{background:var(--card);border:2.5px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:18px;display:grid;gap:14px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kpi div{background:var(--paper-2);border:2px solid var(--ink);border-radius:10px;padding:12px}
.kpi div span{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kpi div b{font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.03em}
.kpi div.hi{background:var(--accent-soft)}
.bars{display:grid;gap:5px;font-family:var(--font-mono);font-size:.76rem}
.bars .row{display:grid;grid-template-columns:52px 1fr 64px;gap:8px;align-items:center}
.bars .row i{display:block;height:14px;background:var(--teal);border-radius:3px;border:1.5px solid var(--ink);min-width:2px}
.bars .row.hot i{background:var(--accent)}
.mult-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:4px}
.mult-grid span{font-family:var(--font-mono);font-size:.75rem;text-align:center;padding:6px 2px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper-2)}
.mult-grid span.h{background:var(--accent);color:#fff}.mult-grid span.m{background:var(--gold-soft)}.mult-grid span.l{background:var(--red-soft)}

/* blog list */
.post{display:grid;grid-template-columns:1fr;gap:6px;text-decoration:none;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.post:hover{transform:translate(2px,2px);box-shadow:var(--shadow-sm);color:var(--ink)}
.post .thumb{aspect-ratio:16/8;border:2px solid var(--ink);border-radius:10px;display:grid;place-items:center;font-size:2.4rem;margin-bottom:8px}
.post h3{margin:0}
.post p{margin:0;color:var(--ink-2);font-size:.95rem}
.post .m{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3)}

/* ribbon cta */
.ribbon{background:var(--accent);border-block:2.5px solid var(--ink);color:#fff}
.ribbon .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px;flex-wrap:wrap}
.ribbon b{font-family:var(--font-display);font-size:1.25rem}
.ribbon .code{background:var(--paper);color:var(--ink)}

/* footer */
footer.site{background:var(--ink);color:var(--paper-2);border-top:2.5px solid var(--ink);margin-top:40px}
footer.site .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding-block:48px 30px}
@media(max-width:960px){footer.site .cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{color:#fff;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
footer.site a{color:var(--paper-2);text-decoration:none;font-size:.93rem}
footer.site a:hover{color:var(--gold)}
footer.site .legal{border-top:1px solid rgba(255,255,255,.15);padding-block:20px 30px;font-size:.8rem;color:#B8AE9C;line-height:1.6}
footer.site .logo{color:#fff}
.age{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font-family:var(--font-mono);font-weight:700;font-size:.8rem}

/* misc */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--font-mono);font-size:.78rem;border:1.5px solid var(--ink);border-radius:20px;padding:3px 10px;background:var(--card);text-decoration:none}
.chip:hover{background:var(--gold-soft);color:var(--ink)}
.divider{height:2.5px;background:var(--ink);margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-family:var(--font-mono);font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.toast.show{opacity:1}
.maple{color:var(--red)}
.compare-note{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);margin-top:10px}
.search{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.search input{font:inherit;padding:10px 14px;border:2px solid var(--ink);border-radius:10px;min-width:240px;background:#fff}
.search .seg{grid-template-columns:repeat(4,auto)}
.verified{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.76rem;color:var(--teal)}
.verified::before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--teal);color:#fff;font-size:.65rem}

.rhead{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.rscore{text-align:right;white-space:nowrap}
@media(max-width:640px){.rhead{grid-template-columns:auto 1fr}.rscore{grid-column:1/-1;text-align:left}}
.kpi div b{font-size:1.25rem;overflow-wrap:anywhere}
.kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ---- live previews & animated calculators ---- */
.preview{position:relative;border:2px solid var(--ink);border-radius:12px;background:#1B1712;overflow:hidden;aspect-ratio:7/5;margin-bottom:6px}
.preview canvas{display:block;width:100%;height:100%}
.preview.tool-prev{aspect-ratio:auto;min-height:150px;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:8px;color:var(--paper)}
.live-tag{position:absolute;right:8px;top:8px;font-family:var(--font-mono);font-size:.68rem;padding:3px 8px;border-radius:6px;background:rgba(245,240,230,.9);color:var(--ink);border:1.5px solid var(--ink)}
.live-tag.big{background:var(--gold)}.live-tag.win{background:var(--teal-soft)}.live-tag.lose{background:var(--red-soft)}
.live-tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.hist{display:flex;align-items:flex-end;gap:3px;height:96px}
.hist .col{flex:1;position:relative;height:100%}
.hist .col i{position:absolute;bottom:0;left:0;right:0;border-radius:3px 3px 0 0;transition:height .25s}
.hist .col .th{background:rgba(255,77,18,.85)}.hist .col .em{background:rgba(245,240,230,.55);left:25%;right:25%}
.live-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:.72rem;color:#B8AE9C;flex-wrap:wrap}
.live-row b{color:var(--paper)}
.mrow{display:flex;gap:3px}
.mrow span{flex:1;font-family:var(--font-mono);font-size:.6rem;text-align:center;padding:8px 0;border-radius:4px;color:#15120E;transition:transform .15s;min-width:0;overflow:hidden}
.mrow span.hit{transform:translateY(-6px);outline:2px solid #fff}
.ticker{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--font-mono);font-size:.75rem;color:#B8AE9C}
.ticker b{font-size:1.15rem;color:var(--paper);font-variant-numeric:tabular-nums}
.ticker.hi b{color:var(--gold)}
.pbar{height:10px;border-radius:5px;background:rgba(245,240,230,.15);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent);width:0;transition:width .08s linear}
.livebox{background:#1B1712;border:2px solid var(--ink);border-radius:12px;padding:14px;display:grid;gap:10px;color:var(--paper)}
.livebox canvas{width:100%;display:block;border-radius:8px}
.livebox .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;animation:blink 1.2s infinite}
.livebox>span{font-family:var(--font-mono);font-size:.78rem;color:#B8AE9C}
.kpi div b.tick{animation:tick .45s}
@keyframes tick{0%{color:var(--accent-2);transform:translateY(-2px)}100%{transform:none}}
.bars .row .track{position:relative;height:14px;display:block}
.bars .row .track i{position:absolute;left:0;top:0;height:100%;transition:width .3s}
.bars .row .track .live{background:rgba(21,18,14,.35);border:0;height:6px;top:4px;border-radius:2px}
.mult-grid span{transition:transform .15s,box-shadow .15s}
.mult-grid span.hit{transform:translateY(-3px);box-shadow:0 0 0 2px var(--accent)}
.results span.ghost{opacity:.55;border-style:dashed}
.attract{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(245,240,230,.95);border:2px solid var(--ink);border-radius:8px;padding:6px 12px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;animation:blink 2.4s infinite}
.canada-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;background:var(--red-soft);border:2px solid var(--ink);border-radius:12px;padding:14px;margin:18px 0}
.canada-box div span{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.canada-box div b{font-size:.98rem}
@media(prefers-reduced-motion:reduce){.live-tag::before,.livebox .dot,.attract{animation:none}}
.coupon .r .code.big{font-size:clamp(.85rem,1.1vw,1.15rem);padding:8px 10px;max-width:100%}
.mrow span{font-size:.55rem}

/* ---- v3: logos, compact flagship, thumbs ---- */
img.mark{object-fit:cover;background:#15120E;padding:0}
.wordmark{display:block;height:34px;width:auto;margin-bottom:8px;border-radius:8px;background:#1B1712;padding:6px 10px;border:2px solid var(--ink)}
.flag.compact{grid-template-columns:1fr auto;padding:16px 22px;margin-bottom:26px;box-shadow:var(--shadow);border-radius:16px}
.flag.compact .brandcell .nm{color:#fff}
.flag.compact .acts-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:760px){.flag.compact{grid-template-columns:1fr}}
.code.lnk{text-decoration:none;color:var(--ink);font-size:.85rem;padding:5px 9px}
.code.lnk:hover{background:var(--accent);color:#fff;border-color:var(--ink)}
.code.lnk::after{content:"→";opacity:.6;font-size:.85em}
table.ledger{min-width:760px}
table.ledger th,table.ledger td{padding:12px 10px}
table.ledger .bonus{max-width:230px;font-size:.92rem}
table.ledger .bonus .small{font-size:.78rem}
table.ledger td .brandcell .nm{font-size:1rem}
table.ledger .acts{flex-direction:column;gap:6px}
table.ledger .acts .btn{width:100%}
.card img.thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ink);border-radius:10px;margin-bottom:4px}
.post img.thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ink);border-radius:10px;margin-bottom:8px;font-size:0}


/* ---- v6: keep the brand table's contents inside its frame ---- */
/* trim the widths that pushed the table past its container */
.bar{width:64px}
table.ledger .code.lnk{font-size:.8rem;padding:4px 8px}
table.ledger td:last-child,table.ledger th:last-child{padding-right:14px}
table.ledger .acts .btn{min-width:84px}
/* scroll affordance: a fade + hint, shown only while there is more to scroll */
.ledger-outer{position:relative}
.ledger-outer::after{content:"";position:absolute;top:2px;bottom:2px;right:2px;width:46px;
  border-radius:0 14px 14px 0;pointer-events:none;opacity:0;transition:opacity .18s;
  background:linear-gradient(to left,var(--card) 18%,rgba(251,248,242,.85) 55%,rgba(251,248,242,0))}
/* over the sticky-looking header row the fade must blend to the header colour, not the card colour */
.ledger-outer::before{content:"";position:absolute;top:2px;right:2px;width:46px;height:var(--thead-h,46px);
  border-radius:0 14px 0 0;pointer-events:none;opacity:0;transition:opacity .18s;z-index:1;
  background:linear-gradient(to left,var(--paper-2) 18%,rgba(236,229,214,.85) 55%,rgba(236,229,214,0))}
.ledger-outer.more::before{opacity:1}
.ledger-outer.more::after{opacity:1}
.scroll-hint{position:absolute;right:10px;top:9px;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .18s;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);padding:4px 9px;border-radius:6px}
.ledger-outer.more .scroll-hint{opacity:1}
/* grid children must be allowed to shrink, or a wide inner table blows the page out sideways */
.layout>*{min-width:0}

/* ---- v8: steps, byline, author page ---- */
/* one wrapper per step: bare inline nodes would each become grid items and stagger left */
.steps li .s-txt{min-width:0;display:block;line-height:1.5}
.steps li .s-txt .code{margin:0 2px;vertical-align:middle}
.byline{display:flex;gap:12px;align-items:center;margin:16px 0 0;line-height:1.35}
.byline img{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);flex:none;background:var(--ink)}
.byline a{font-weight:700}
.authorhead{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.authorhead img{width:120px;height:120px;border-radius:50%;border:3px solid var(--ink);box-shadow:var(--shadow);flex:none}
.cols2{columns:2;column-gap:26px;padding-left:1.1em}
@media(max-width:640px){.cols2{columns:1}.authorhead img{width:84px;height:84px}}

/* ---- v8: mobile ergonomics ---- */
@media(max-width:760px){
  /* real navigation and controls need a finger-sized target */
  .crumbs{padding-top:10px;line-height:2}
  .crumbs a{display:inline-block;padding:5px 0;min-height:24px}
  footer.site ul{gap:2px}
  footer.site ul a{display:inline-block;padding:7px 0;min-height:24px}
  .side ul li{margin:2px 0}
  .side ul a{display:inline-block;padding:6px 0}
  .chip{padding:8px 14px;min-height:36px;display:inline-flex;align-items:center}
  .panel .bal button{width:38px;height:38px;border-radius:8px;font-size:1.25rem;line-height:1}
  .btn.sm{padding:10px 16px}
  .faq summary{padding:16px 0}
  /* comfortable reading + no cramped gutters */
  body{font-size:16px}
  .lead{font-size:1.06rem}
  h1{letter-spacing:-.025em}
  .card{padding:18px}
  .coupon .l,.coupon .r{padding:18px}
  .flag{padding:20px}
  .steps li{grid-template-columns:36px 1fr;gap:12px;padding:13px}
  .steps li::before{width:30px;height:30px;font-size:.95rem}
  .facts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .byline{gap:10px}
  .article h2{font-size:1.45rem}
  .sec-head{margin-bottom:20px}
}
@media(max-width:420px){
  .hero{padding-block:34px 24px}
  .hero-stats{gap:18px 26px}
  .kpi{grid-template-columns:1fr 1fr}
  .kpi div b{font-size:1.2rem}
  .stat-row{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .flag.compact .acts-row{width:100%}
  .flag.compact .acts-row .btn{flex:1}
}
/* the fixed mobile CTA must never sit on top of page content */
@media(max-width:430px){.strip .hide-xs{display:none}}

/* ---- v9: tables that fit a phone -------------------------------------- */
/* Below 640px no table scrolls sideways. Wide tables are cut down to the
   columns that matter on a phone; the columns that go are re-printed as
   labelled lines inside the row's first cell (.mfold), so no figure is lost.
   Brand tables keep brand + bonus + promo code only, and the code becomes the
   tap target. Column roles (.cbrand/.ccode/.kfold) set the widths. */
.mob-on,.mfold{display:none}
.brandcell .rk{display:none}

@media(max-width:640px){
  /* ---------- generic .t tables ---------- */
  .tbl{overflow-x:visible;margin:16px 0}
  .tbl table.t{min-width:0;width:100%;table-layout:fixed}
  .tbl table.t th,.tbl table.t td{padding:10px 7px;overflow-wrap:anywhere;vertical-align:top}
  .tbl table.t th{font-size:.62rem;letter-spacing:.05em;white-space:normal;line-height:1.3}
  .tbl table.t td{font-size:.86rem;line-height:1.35}
  td.mob-off,th.mob-off{display:none!important}
  .mobfit .kfold{width:46%}
  .mobfit .cbrand{width:30%}
  .mobfit .ccode{width:30%}
  .mfold{display:block;margin-top:5px;font-size:.76rem;line-height:1.35;color:var(--ink-2)}
  .mfold b{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-3);font-weight:600;margin-right:3px}
  .mfold .code{font-size:.72rem;padding:2px 6px}

  /* ---------- the brand ledger: brand + bonus + code-as-button ---------- */
  .ledger-wrap{overflow-x:visible}
  table.ledger{min-width:0;width:100%;table-layout:fixed}
  table.ledger th,table.ledger td{padding:12px 7px;vertical-align:top}
  table.ledger th{font-size:.6rem;letter-spacing:.04em;white-space:normal}
  table.ledger th:nth-child(2),table.ledger td:nth-child(2){width:34%}
  table.ledger th:nth-child(4),table.ledger td:nth-child(4){width:38%}
  table.ledger th:nth-child(5),table.ledger td:nth-child(5){width:28%}
  /* rank + logo on their own line so the brand name never breaks mid-word */
  table.ledger .brandcell{display:block;min-width:0}
  table.ledger .brandcell .rk{display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;font-size:.72rem;width:19px;height:19px;
    border:2px solid var(--ink);border-radius:50%;background:var(--paper-2);color:var(--ink);
    vertical-align:middle;margin-right:5px}
  table.ledger .brandcell .mark{display:inline-block;width:26px;height:26px;margin:0 0 5px;
    vertical-align:middle}
  table.ledger .brandcell>span{display:block;min-width:0}
  table.ledger td .brandcell .nm{font-size:.9rem;line-height:1.2;overflow-wrap:normal;
    hyphens:none;display:block}
  table.ledger .brandcell .sub{font-size:.66rem;line-height:1.3;white-space:nowrap}
  .hide-m{display:none}
  .mob-on{display:block}
  table.ledger .bonus{max-width:none;font-size:.84rem;line-height:1.3}
  table.ledger .bonus .small{font-size:.68rem;line-height:1.3;display:block;margin-top:3px}

  /* ---------- the promo code is the button ---------- */
  table.ledger .code.lnk,.tbl table.t .code.lnk{display:flex;width:100%;justify-content:center;
    align-items:center;font-size:.74rem;padding:9px 3px;background:var(--gold);border-style:solid;
    border-width:2px;box-shadow:2px 2px 0 var(--ink);font-weight:700;white-space:normal;
    text-align:center;line-height:1.15;min-height:42px;overflow-wrap:anywhere}
  table.ledger .code.lnk::after,.tbl table.t .code.lnk::after{display:none}
  table.ledger .code.lnk:active,.tbl table.t .code.lnk:active{transform:translate(1px,1px);
    box-shadow:1px 1px 0 var(--ink)}

  /* nothing left to scroll to: drop the affordance */
  .ledger-outer::before,.ledger-outer::after{display:none}
  .scroll-hint{display:none}
  .compare-note{font-size:.78rem}
}
@media(max-width:400px){
  table.ledger th,table.ledger td{padding:10px 5px}
  table.ledger .code.lnk,.tbl table.t .code.lnk{font-size:.68rem;padding:8px 2px}
  .tbl table.t td{font-size:.8rem}
  .tbl table.t th,.tbl table.t td{padding:9px 5px}
}