/*
Theme Name: Northledger
Theme URI: https://cryptobonus.ca/
Author: CryptoBonus.ca
Author URI: https://cryptobonus.ca/
Description: Editorial-style theme for CryptoBonus.ca — crypto casino bonus tracker for Canada.
Version: 2.4.1
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northledger
Tags: blog, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready
*/

:root{
  --cream:#f6f1e7;--paper:#fffdf8;--ink:#141a26;--ink-2:#2b3242;--muted:#5d6577;
  --line:#e2d9c7;--line-2:#cfc4ad;
  --red:#d7262f;--red-dark:#b11c24;--red-soft:#fbe9ea;
  --gold:#e9b949;--gold-dark:#c9961f;--gold-soft:#fff5d9;
  --teal:#167d6b;--teal-soft:#e2f2ee;
  --radius:14px;--radius-s:8px;
  --shadow:0 10px 30px -14px rgba(20,26,38,.35);
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
 radial-gradient(900px 500px at 110% -10%,rgba(233,185,73,.18),transparent 60%),
 radial-gradient(700px 400px at -10% 110%,rgba(22,125,107,.14),transparent 60%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dark);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2rem,5.6vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem);margin-top:1.8em}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-top:1.4em}
h4{font-size:1.1rem;margin-top:1.2em}
p{margin:0 0 1.1em}
ul,ol{padding-left:1.3em;margin:0 0 1.2em}
li{margin:.3em 0}
hr{border:0;border-top:1px dashed var(--line-2);margin:2.5rem 0}
blockquote{margin:1.5rem 0;padding:1rem 1.25rem;border-left:4px solid var(--gold);background:var(--gold-soft);border-radius:0 var(--radius-s) var(--radius-s) 0;font-family:var(--font-display);font-size:1.08em}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#efe8d8;padding:.1em .4em;border-radius:5px;font-size:.92em}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:1000}
.skip-link:focus{left:8px;top:8px}
.wrap{width:min(100% - 32px,var(--max));margin-inline:auto;position:relative;z-index:1}
.wrap--narrow{width:min(100% - 32px,820px)}

/* ───────── top notice ───────── */
.topline{background:var(--ink);color:#e9e4d6;font-size:.8rem;letter-spacing:.02em}
.topline .wrap{display:flex;gap:1rem;justify-content:space-between;align-items:center;min-height:34px}
.topline a{color:var(--gold)}
.topline .live{display:inline-flex;align-items:center;gap:.4rem}
.live-dot{width:8px;height:8px;border-radius:50%;background:#3ddc97;box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.6)}70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.topline .hide-m{display:none}
@media(min-width:720px){.topline .hide-m{display:inline}}

/* ───────── header / nav ───────── */
.site-header{position:sticky;top:0;z-index:900;background:rgba(246,241,231,.92);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream)}
.nav-open{overflow:hidden}
.site-header.is-scrolled{box-shadow:0 8px 24px -16px rgba(20,26,38,.45)}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:66px;flex-wrap:nowrap}
.masthead .brand{flex:1 1 auto;min-width:0}
.masthead .brand>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.masthead .nav-toggle{flex:0 0 auto}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.brand .leaf{width:34px;height:34px;flex:0 0 34px}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-toggle{appearance:none;border:1px solid var(--line-2);background:var(--paper);border-radius:10px;padding:.5rem .7rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;cursor:pointer;color:var(--ink)}
.nav-toggle .bars{width:20px;height:14px;position:relative;display:block}
.nav-toggle .bars i{position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.nav-toggle .bars i:nth-child(1){top:0}.nav-toggle .bars i:nth-child(2){top:6px}.nav-toggle .bars i:nth-child(3){top:12px}
.nav-open .nav-toggle .bars i:nth-child(1){top:6px;transform:rotate(45deg)}
.nav-open .nav-toggle .bars i:nth-child(2){opacity:0}
.nav-open .nav-toggle .bars i:nth-child(3){top:6px;transform:rotate(-45deg)}
.main-nav{display:none}
.nav-open .main-nav{display:block;position:fixed;top:var(--header-h,100px);left:0;right:0;bottom:0;background:var(--cream);overflow:auto;padding:1rem 16px 4rem;z-index:950}
.main-nav ul{list-style:none;margin:0;padding:0}
.main-nav > ul > li{border-bottom:1px solid var(--line)}
.main-nav a,.main-nav .sub-toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem .2rem;color:var(--ink);text-decoration:none;font-weight:700;background:none;border:0;width:100%;font:inherit;font-weight:700;cursor:pointer;text-align:left}
.main-nav .sub-toggle svg{transition:.25s;flex:0 0 auto}
.main-nav li.is-open > .sub-toggle svg{transform:rotate(180deg)}
.main-nav .sub{display:none;padding:0 0 .8rem .6rem}
.main-nav li.is-open > .sub{display:grid;gap:.1rem}
.main-nav .sub a{font-weight:600;padding:.45rem .4rem;color:var(--ink-2);border-radius:8px}
.main-nav .sub a:hover{background:var(--paper)}
.main-nav .sub a .lg{width:22px;height:22px;border-radius:6px;flex:0 0 22px}
.main-nav .sub a span{display:flex;align-items:center;gap:.5rem;justify-content:flex-start}
.site-header .nav-cta{display:none}
.main-nav .nav-cta-m{margin-top:1rem}
@media(min-width:1000px){
  .nav-toggle{display:none}
  .main-nav{display:block}
  .main-nav > ul{display:flex;gap:.1rem;align-items:center}
  .main-nav > ul > li{border:0;position:relative}
  .main-nav a,.main-nav .sub-toggle{padding:.6rem .75rem;width:auto;border-radius:10px;font-size:.95rem}
  .main-nav > ul > li > a:hover,.main-nav > ul > li > .sub-toggle:hover,.main-nav li.is-open > .sub-toggle{background:var(--paper)}
  .main-nav .sub{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.5rem;display:none;grid-template-columns:1fr}
  .main-nav .sub.sub--wide{min-width:520px;grid-template-columns:1fr 1fr}
  .main-nav li.is-open > .sub{display:grid}
  .main-nav .sub a{padding:.5rem .6rem}
  .main-nav .nav-cta-m{display:none}
  .site-header .nav-cta{display:inline-flex}
}

/* ───────── buttons ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.8rem 1.25rem;border-radius:12px;font-weight:800;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:var(--font-body);font-size:.98rem;line-height:1.1;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 20px -10px rgba(215,38,47,.7)}
.btn-primary:hover{background:var(--red-dark);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000;color:#fff}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-dark);color:var(--ink)}
.btn-sm{padding:.5rem .85rem;font-size:.85rem;border-radius:9px}
.btn-block{width:100%}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* ───────── flagship plaque ───────── */
.flag{position:relative;background:var(--ink);color:#f3eee2;border-radius:var(--radius);padding:1rem;margin:1.25rem 0 0;overflow:hidden;box-shadow:var(--shadow);border:1px solid #2b3242}
.flag::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(233,185,73,.35),transparent 65%);pointer-events:none}
.flag .flag-grid{display:grid;gap:.85rem;align-items:center;position:relative;z-index:1}
.flag .flag-brand{display:flex;align-items:center;gap:.7rem}
.flag .flag-brand img{width:46px;height:46px;border-radius:12px;flex:0 0 46px}
.flag .flag-brand b{display:block;font-family:var(--font-display);font-size:1.15rem}
.flag .flag-brand small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.flag .flag-bonus{font-family:var(--font-display);font-size:1.05rem;line-height:1.3;font-weight:700}
.flag .flag-bonus em{color:var(--gold);font-style:normal}
.flag .code{display:inline-flex;align-items:center;gap:.5rem;border:1.5px dashed var(--gold);border-radius:10px;padding:.45rem .7rem;background:rgba(255,255,255,.04);cursor:pointer;font-family:ui-monospace,Menlo,monospace;font-weight:800;letter-spacing:.08em;color:#fff;font-size:.95rem;user-select:all}
.flag .code .cp{font-family:var(--font-body);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.flag .flag-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.flag .meta{font-size:.76rem;color:#b9b2a2;margin-top:.3rem}
@media(min-width:800px){
  .flag{padding:1.1rem 1.4rem}
  .flag .flag-grid{grid-template-columns:auto 1fr auto}
}

/* ───────── hero ───────── */
.hero{padding:1.6rem 0 1.2rem}
.hero .kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.7rem}
.hero .kicker::before{content:"";width:22px;height:2px;background:var(--teal)}
.hero h1{margin-bottom:.5rem;max-width:18ch}
.hero h1 .ul{background:linear-gradient(transparent 62%,rgba(233,185,73,.65) 62%)}
.hero .lede{font-size:1.08rem;color:var(--ink-2);max-width:62ch;margin-bottom:.4rem}
.hero .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.2rem 0 0}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem}
.stat b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--ink)}
.stat span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
@media(min-width:800px){.hero{padding:2.6rem 0 1.6rem}.hero .stats{grid-template-columns:repeat(4,1fr)}}
.hero-art{margin-top:1.4rem;position:relative}
.ticker{overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--paper);margin-top:1.4rem}
.ticker ul{display:flex;gap:2.5rem;list-style:none;margin:0;padding:.55rem 0;animation:tick 40s linear infinite;width:max-content}
.ticker li{white-space:nowrap;font-size:.84rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.ticker li img{width:18px;height:18px;border-radius:5px}
.ticker li b{color:var(--red)}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker ul{animation:none}}

/* ───────── sections ───────── */
.section{padding:2.2rem 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.section-head h2{margin:0}
.section-head .num{font-family:var(--font-display);font-style:italic;color:var(--red);font-size:.95rem;display:block;letter-spacing:.05em}
.section-head p{margin:0;color:var(--muted);max-width:60ch}
.section--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--ink{background:var(--ink);color:#efe9da}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink a{color:var(--gold)}

/* ───────── tables ───────── */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
table.ledger{width:100%;border-collapse:collapse;font-size:.92rem;min-width:720px}
table.ledger th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.8rem .9rem;border-bottom:2px solid var(--ink);background:#fbf7ee;white-space:nowrap}
table.ledger td{padding:.85rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.ledger tr:last-child td{border-bottom:0}
table.ledger tr:hover td{background:#fdfaf2}
table.ledger .b{display:flex;align-items:center;gap:.6rem;font-weight:800;white-space:nowrap}
table.ledger .b img{width:34px;height:34px;border-radius:9px}
table.ledger .b small{display:block;font-weight:600;color:var(--muted);font-size:.72rem}
table.ledger .rank{font-family:var(--font-display);font-weight:800;color:var(--red);font-size:1.1rem;text-align:center}
.codechip{display:inline-flex;align-items:center;gap:.4rem;border:1.5px dashed var(--ink);border-radius:8px;padding:.3rem .55rem;font-family:ui-monospace,Menlo,monospace;font-weight:800;letter-spacing:.06em;font-size:.86rem;cursor:pointer;background:#fff;color:var(--ink);white-space:nowrap}
.codechip:hover{background:var(--gold-soft)}
.codechip.copied{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .5rem;border-radius:6px;background:var(--gold-soft);color:var(--gold-dark);margin:.1rem .2rem .1rem 0}
.tag--teal{background:var(--teal-soft);color:var(--teal)}
.tag--red{background:var(--red-soft);color:var(--red-dark)}
.tag--ink{background:var(--ink);color:#fff}
.score{display:inline-flex;align-items:center;gap:.3rem;font-weight:800}
.score .bar{width:54px;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.score .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold))}
.featured td{background:var(--gold-soft)!important}
.table-note{font-size:.8rem;color:var(--muted);margin:.6rem 0 0}
@media(max-width:719px){
  table.ledger.stack{min-width:0;font-size:.95rem}
  table.ledger.stack thead{display:none}
  table.ledger.stack tr{display:block;border-bottom:1px solid var(--line);padding:.6rem .9rem}
  table.ledger.stack td{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:0;padding:.35rem 0}
  table.ledger.stack td::before{content:attr(data-l);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
  table.ledger.stack td.full{display:block}
  table.ledger.stack td.full::before{display:none}
  table.ledger.stack .featured td{background:transparent!important}
  table.ledger.stack tr.featured{background:var(--gold-soft)}
}

/* ───────── cards ───────── */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
@media(max-width:719px){.grid-4{grid-template-columns:1fr 1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;position:relative;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{margin-top:0;font-size:1.15rem}
.card p{color:var(--ink-2);font-size:.95rem}
.card .more{font-weight:800;text-decoration:none;display:inline-flex;gap:.3rem;align-items:center}
.card .ico{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);display:grid;place-items:center;margin-bottom:.8rem;color:var(--gold-dark)}
.card .ico--teal{background:var(--teal-soft);color:var(--teal)}
.card .ico--red{background:var(--red-soft);color:var(--red)}
.card--link{text-decoration:none;color:inherit;display:block}

/* ticket (bonus card) */
.ticket{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s}
.ticket:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ticket--flag{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.ticket .t-head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem .6rem}
.ticket .t-head img{width:48px;height:48px;border-radius:12px}
.ticket .t-head b{font-family:var(--font-display);font-size:1.2rem;display:block;line-height:1.1}
.ticket .t-head small{color:var(--muted);font-size:.78rem}
.ticket .t-rank{position:absolute;top:10px;right:12px;font-family:var(--font-display);font-style:italic;color:var(--red);font-weight:800}
.ticket .t-bonus{padding:0 1.1rem .8rem;font-weight:800;font-size:1.02rem;line-height:1.35}
.ticket .t-bonus em{font-style:normal;color:var(--teal)}
.ticket .t-cut{position:relative;border-top:2px dashed var(--line-2);margin:0 -1px}
.ticket .t-cut::before,.ticket .t-cut::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--cream);border:1px solid var(--line)}
.ticket .t-cut::before{left:-11px;border-left-color:transparent}.ticket .t-cut::after{right:-11px}
.ticket .t-code{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.9rem 1.1rem .4rem;flex-wrap:wrap}
.ticket .t-code .lbl{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;display:block}
.ticket .t-meta{padding:0 1.1rem;font-size:.76rem;color:var(--muted);display:flex;gap:.8rem;flex-wrap:wrap}
.ticket .t-meta b{color:var(--ink)}
.ticket .t-actions{padding:.8rem 1.1rem 1.1rem;display:flex;gap:.6rem;margin-top:auto}
.ticket .t-actions .btn{flex:1}
.ticket .t-perks{list-style:none;padding:0 1.1rem .6rem;margin:0;font-size:.85rem;display:grid;gap:.25rem}
.ticket .t-perks li{padding-left:1.2rem;position:relative;margin:0}
.ticket .t-perks li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}

/* ───────── content / article ───────── */
.content{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.content{grid-template-columns:minmax(0,1fr) 320px}}
.entry-content{max-width:760px;min-width:0}
.entry-content > p:first-of-type{font-size:1.08rem}
.entry-content h2{scroll-margin-top:90px}
.entry-content figure{margin:1.5rem 0}
.entry-content table{width:100%;border-collapse:collapse;font-size:.93rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:1.2rem 0}
.entry-content th,.entry-content td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.entry-content th{background:#fbf7ee;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.entry-content tr:last-child td{border-bottom:0}
.entry-content .table-scroll{overflow:auto}
.entry-content img{border-radius:12px}
.callout{border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.4rem 0;position:relative}
.callout--gold{background:var(--gold-soft);border-color:#ecd59a}
.callout--teal{background:var(--teal-soft);border-color:#b6dccf}
.callout--red{background:var(--red-soft);border-color:#f3b8bb}
.callout .cl-t{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;display:block;margin-bottom:.3rem;color:var(--muted)}
.callout p:last-child{margin-bottom:0}
.sidebar{display:grid;gap:1.2rem;align-content:start}
.widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem}
.widget h3,.widget-title{margin:0 0 .7rem;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-body);font-weight:800;color:var(--muted)}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{padding:.45rem 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;gap:.5rem;align-items:center;font-size:.92rem}
.widget li:last-child{border:0}
.widget li a{text-decoration:none;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:.5rem}
.widget li img{width:24px;height:24px;border-radius:7px}
.widget--flag{background:var(--ink);color:#f0ebdf;border-color:#2b3242;text-align:center}
.widget--flag img{width:56px;height:56px;border-radius:14px;margin:0 auto .5rem}
.widget--flag b{font-family:var(--font-display);font-size:1.2rem;display:block}
.widget--flag .code{display:inline-block;margin:.6rem 0;border:1.5px dashed var(--gold);border-radius:8px;padding:.4rem .8rem;font-family:ui-monospace,Menlo,monospace;font-weight:800;letter-spacing:.1em;cursor:pointer}
.widget--flag p{font-size:.9rem;margin:.3rem 0 .6rem;color:#d7d0bf}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.2rem 0 1.6rem}
.toc b{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.4rem}
.toc ol{margin:0;padding-left:1.2rem;columns:1;font-size:.92rem}
@media(min-width:720px){.toc ol{columns:2;column-gap:2rem}}
.toc a{text-decoration:none;color:var(--ink);font-weight:600}
.toc a:hover{color:var(--red)}
.breadcrumbs{font-size:.8rem;color:var(--muted);margin:1rem 0 0}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.3rem}
.breadcrumbs li+li::before{content:"›";margin-right:.3rem;color:var(--line-2)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--red)}
.meta-line{font-size:.82rem;color:var(--muted);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin:.3rem 0 1rem}
.meta-line .tag{margin:0}
.proscons{display:grid;gap:1rem;margin:1.2rem 0}
@media(min-width:720px){.proscons{grid-template-columns:1fr 1fr}}
.proscons div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.proscons h4{margin:0 0 .5rem;font-family:var(--font-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.proscons ul{list-style:none;padding:0;margin:0}
.proscons li{padding-left:1.4rem;position:relative;font-size:.93rem}
.proscons li::before{position:absolute;left:0;font-weight:800}
.proscons .pros li::before{content:"+";color:var(--teal)}
.proscons .cons li::before{content:"–";color:var(--red)}
.steps{counter-reset:s;list-style:none;padding:0;margin:1.2rem 0}
.steps li{counter-increment:s;position:relative;padding:.8rem 0 .8rem 3.2rem;border-bottom:1px dashed var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.65rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--ink);color:var(--gold);font-family:var(--font-display);font-weight:800;display:grid;place-items:center;font-size:.95rem}
.steps li b{display:block}
.specs{display:grid;gap:.6rem;grid-template-columns:1fr 1fr;margin:1rem 0 1.4rem}
@media(min-width:720px){.specs{grid-template-columns:repeat(3,1fr)}}
.specs div{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem}
.specs span{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.specs b{font-size:.98rem}
.faq{margin:1rem 0}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;padding:0 1.1rem}
.faq summary{cursor:pointer;font-weight:800;padding:.95rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:1.4rem;color:var(--red);transition:.2s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1rem;margin:0;color:var(--ink-2)}
.brand-hero{display:flex;align-items:center;gap:1rem;margin-bottom:.8rem}
.brand-hero img{width:64px;height:64px;border-radius:16px;box-shadow:var(--shadow)}
.brand-hero .score-big{margin-left:auto;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.5rem .8rem}
.brand-hero .score-big b{font-family:var(--font-display);font-size:1.5rem;display:block;line-height:1;color:var(--teal)}
.brand-hero .score-big span{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.inline-cta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--red);border-radius:12px;padding:1rem 1.2rem;margin:1.6rem 0}
.inline-cta img{width:40px;height:40px;border-radius:10px}
.inline-cta .t{flex:1;min-width:200px}
.inline-cta .t b{display:block}
.inline-cta .t small{color:var(--muted)}
.live-line{font-size:.8rem;color:var(--muted);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.live-line b{color:var(--teal)}

/* post cards */
.post-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-card .pc-art{aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden}
.post-card .pc-art svg{width:100%;height:100%}
.post-card .pc-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.post-card h3{margin:0;font-size:1.12rem}
.post-card p{margin:0;font-size:.9rem;color:var(--ink-2)}
.post-card .pc-meta{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-top:auto;padding-top:.5rem}
.post-hero{aspect-ratio:21/9;border-radius:var(--radius);overflow:hidden;margin:1rem 0 1.4rem;border:1px solid var(--line)}
.post-hero svg{width:100%;height:100%;display:block}

/* filters / tabs */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}
.filters button{border:1.5px solid var(--line-2);background:var(--paper);border-radius:999px;padding:.45rem .9rem;font-weight:800;font-size:.84rem;cursor:pointer;font-family:inherit;color:var(--ink)}
.filters button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabs{display:flex;gap:.3rem;border-bottom:2px solid var(--line);margin-bottom:1rem;overflow:auto}
.tabs button{border:0;background:none;padding:.7rem .9rem;font-weight:800;font-family:inherit;cursor:pointer;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs button.is-active{color:var(--ink);border-color:var(--red)}
.tabpanel{display:none}.tabpanel.is-active{display:block}

/* ───────── tools ───────── */
.tool{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin:1.4rem 0;box-shadow:var(--shadow)}
.tool-grid{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
.tool,.tool-grid>div{min-width:0}
@media(min-width:860px){.tool-grid{grid-template-columns:340px minmax(0,1fr)}}
.tool label{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted);margin:.8rem 0 .3rem}
.tool label:first-child{margin-top:0}
.tool input[type=number],.tool input[type=text],.tool select{width:100%;padding:.7rem .8rem;border:1.5px solid var(--line-2);border-radius:10px;font:inherit;font-weight:700;background:#fff;color:var(--ink)}
.tool input[type=range]{width:100%;accent-color:var(--red)}
.tool .out{font-family:var(--font-display);font-size:1.3rem;font-weight:800}
.tool .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.tool .seg{display:flex;border:1.5px solid var(--line-2);border-radius:10px;overflow:hidden}
.tool .seg button{flex:1;border:0;background:#fff;padding:.6rem .4rem;font:inherit;font-weight:800;cursor:pointer;color:var(--muted)}
.tool .seg button.is-active{background:var(--ink);color:#fff}
.tool .results{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.tool .results div{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem}
.tool .results span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.tool .results b{font-family:var(--font-display);font-size:1.25rem}
.tool .results b.good{color:var(--teal)}.tool .results b.bad{color:var(--red)}
.tool .hint{font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
.sim-stage{background:var(--ink);border-radius:12px;position:relative;overflow:hidden;min-height:280px}
.sim-stage canvas{display:block;width:100%;max-width:100%;height:auto}
.sim-log{list-style:none;padding:0;margin:.8rem 0 0;display:flex;gap:.4rem;flex-wrap:wrap}
.sim-log li{font-size:.78rem;font-weight:800;padding:.25rem .55rem;border-radius:6px;background:var(--cream);border:1px solid var(--line)}
.sim-log li.win{background:var(--teal-soft);color:var(--teal)}
.sim-log li.loss{background:var(--red-soft);color:var(--red-dark)}
.bal{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:.6rem .85rem;margin-bottom:.8rem}
.bal b{font-family:var(--font-display);font-size:1.3rem}
.bal span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.chipbtns{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0}
.chipbtns button{border:1.5px solid var(--line-2);background:#fff;border-radius:999px;padding:.35rem .7rem;font:inherit;font-weight:800;font-size:.8rem;cursor:pointer}
.chipbtns button.is-active{background:var(--gold);border-color:var(--gold)}
.bet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin:.6rem 0}
.bet-grid button{border:1.5px solid var(--line-2);background:#fff;border-radius:8px;padding:.5rem .3rem;font:inherit;font-weight:800;font-size:.82rem;cursor:pointer}
.bet-grid button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.bet-grid button.red{border-color:#e07a7f}.bet-grid button.black{border-color:#444}
.mult-row{display:flex;gap:4px;margin-top:.5rem}
.mult-row span{flex:1;text-align:center;font-size:.62rem;font-weight:800;padding:.3rem 0;border-radius:5px;background:#2b3242;color:#fff}

/* animated viz inside tools */
.results b.is-tween{color:var(--teal)}
.viz{display:grid;gap:.45rem;margin-top:1rem}
.viz-row{display:grid;grid-template-columns:minmax(90px,.9fr) 2fr auto;gap:.6rem;align-items:center;font-size:.78rem}
.viz-row span{color:var(--muted);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.66rem;line-height:1.2}
.viz-row b{font-family:var(--font-display);font-size:.95rem;white-space:nowrap}
.viz-bar{height:12px;background:var(--cream);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.viz-bar i{display:block;height:100%;width:2%;border-radius:6px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.gauge{position:relative;width:220px;max-width:100%;margin:1rem auto .4rem;aspect-ratio:2/1.15}
.gauge-arc{position:absolute;inset:0 0 auto;height:200%;border-radius:50%;background:conic-gradient(from 270deg,#d7262f 0 25%,#e9b949 25% 50%,#9fd3c4 50% 75%,#167d6b 75% 100%);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);clip-path:inset(0 0 50% 0)}
.gauge-needle{position:absolute;left:50%;bottom:8%;width:4px;height:78%;background:var(--ink);border-radius:2px;transform-origin:50% 100%;transform:translateX(-50%) rotate(0deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gauge-needle::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.gauge-lbl{position:absolute;inset:auto 0 -1.2rem;display:flex;justify-content:space-between;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* live demo cards (home / tools hub) */
.demo{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.demo:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.demo .demo-stage{background:var(--ink);position:relative;aspect-ratio:16/10}
.demo canvas{display:block;width:100%;height:100%}
.demo .demo-live{position:absolute;top:10px;left:10px;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(215,38,47,.9);padding:.2rem .5rem;border-radius:6px;display:inline-flex;gap:.35rem;align-items:center}
.demo .demo-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.demo .demo-body{padding:.9rem 1rem 1rem}
.demo h3{margin:0 0 .25rem;font-size:1.05rem}
.demo p{margin:0;font-size:.86rem;color:var(--ink-2)}
.demo .demo-stat{display:flex;justify-content:space-between;gap:.5rem;font-size:.74rem;color:var(--muted);margin-top:.5rem;font-weight:700}
.demo .demo-stat b{color:var(--teal);font-family:var(--font-display);font-size:.95rem}
.demo-calc{padding:1rem;background:var(--ink);color:#f3eee2;display:grid;gap:.5rem;aspect-ratio:16/10;align-content:center}
.demo-calc .dc-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#b9b2a2;font-weight:800}
.demo-calc .dc-row b{font-family:var(--font-display);font-size:1.25rem;color:#fff;letter-spacing:0;text-transform:none}
.demo-calc .dc-bar{height:8px;background:#2b3242;border-radius:4px;overflow:hidden;grid-column:1/-1}
.demo-calc .dc-bar i{display:block;height:100%;width:10%;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .9s cubic-bezier(.2,.8,.2,1)}
.demo-calc .dc-bar.red i{background:var(--red)}

/* ───────── misc ───────── */
.disclosure{font-size:.8rem;color:var(--muted);border-top:1px dashed var(--line-2);padding-top:1rem;margin-top:2rem}
.pagination{display:flex;gap:.4rem;justify-content:center;margin:2rem 0}
.pagination a,.pagination span{padding:.5rem .85rem;border:1px solid var(--line-2);border-radius:8px;text-decoration:none;font-weight:800;color:var(--ink)}
.pagination .current{background:var(--ink);color:#fff}
.compare-strip{display:grid;gap:.6rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:600px){.compare-strip{grid-template-columns:1fr}}
.footer-cta{background:linear-gradient(135deg,var(--ink),#242c3d);color:#f3eee2;border-radius:var(--radius);padding:1.6rem;display:grid;gap:1rem;align-items:center;margin:2.5rem 0 0;position:relative;overflow:hidden}
.footer-cta::after{content:"";position:absolute;right:-80px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(215,38,47,.35),transparent 65%)}
.footer-cta h2{color:#fff;margin:0 0 .3rem}
.footer-cta p{margin:0;color:#cfc8b8}
.footer-cta > *{position:relative;z-index:1}
@media(min-width:800px){.footer-cta{grid-template-columns:1fr auto;padding:2rem 2.2rem}}
.err404{text-align:center;padding:3rem 0}
.err404 .big{font-family:var(--font-display);font-size:clamp(5rem,20vw,11rem);line-height:1;color:var(--red);font-weight:800;letter-spacing:-.04em}
.err404 .big span{display:inline-block;animation:flip 2.4s infinite ease-in-out}
.err404 .big span:nth-child(2){animation-delay:.2s}.err404 .big span:nth-child(3){animation-delay:.4s}
@keyframes flip{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px) rotate(-4deg)}}
.notice{font-size:.82rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem;color:var(--ink-2)}
.wp-block-group{margin:0}
.alignwide{width:min(100% - 32px,var(--max));margin-inline:auto}

/* ───────── footer ───────── */
.site-footer{background:var(--ink);color:#c9c2b2;margin-top:3rem;padding:2.5rem 0 1.5rem;font-size:.9rem}
.site-footer a{color:#efe9da;text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.footer-grid{display:grid;gap:1.6rem;grid-template-columns:1fr 1fr}
@media(min-width:900px){.footer-grid{grid-template-columns:1.6fr repeat(4,1fr)}}
.footer-grid h4{color:#fff;font-family:var(--font-body);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .7rem}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.footer-brand{grid-column:1/-1}
@media(min-width:900px){.footer-brand{grid-column:auto}}
.footer-brand .brand{color:#fff}
.footer-brand .brand small{color:#9a937f}
.footer-brand p{color:#a9a292;font-size:.86rem}
.footer-legal{border-top:1px solid #2b3242;margin-top:2rem;padding-top:1.2rem;font-size:.78rem;color:#8e8778;display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center}
.age{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-weight:800;font-size:.72rem}
[data-live]{transition:color .4s}
[data-live].is-bump{color:var(--teal)}
.activity{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.activity li{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;font-size:.86rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.activity li span{margin-left:auto;color:var(--muted);font-size:.74rem}
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.fade-in.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none;transition:none}}