:root{
 --paper:#F1F4F3; --paper-2:#FAFBFA; --card:#fff; --ink:#1E2426; --slate:#2C3A3C; --slate-d:#18211F;
 --lime:#8c1c2b; --lime-d:#6d1521; --lime-ink:#ffffff;--cta:#141619;--cta-d:#000000;--cta-ink:#ffffff; --line:#E7DCDE; --line-2:#F3EAEB;
 --muted:#64706F; --amber:#A9741A; --red:#C2402F;
 --sh-sm:0 1px 2px rgba(34,38,43,.05); --sh:0 8px 26px rgba(34,38,43,.08); --sh-lg:0 22px 52px rgba(34,38,43,.13);
 --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
 --disp:'Space Grotesk','Inter',system-ui,sans-serif;
 --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
 --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.eng-mono{font-family:var(--mono);font-feature-settings:"tnum"}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
a{color:var(--lime-d)}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--slate-d)}
h2{font-size:clamp(1.55rem,2.6vw,2.15rem);margin:0 0 .5em}
h3{font-size:1.2rem;margin:1.6em 0 .35em}
p{margin:0 0 1.05em}
.eng-ic{display:inline-flex;width:1.05em;height:1.05em;vertical-align:-.16em}.eng-ic svg{width:100%;height:100%}

/* ---------- Engage logo ---------- */
.eng-logo{display:inline-flex;flex-direction:column;gap:3px;text-decoration:none;line-height:1}
.eng-lockup{display:inline-flex;align-items:center;gap:9px}
.eng-word{font-family:var(--disp);font-weight:700;font-size:1.4rem;letter-spacing:.02em;color:var(--slate)}
.eng-mark{width:38px;height:22px}
.eng-tag{font-family:var(--disp);font-weight:600;font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);padding-left:2px}
.foot .eng-word{color:#fff}.foot .eng-tag{color:#9fa9b4}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(241,244,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;padding:12px 22px}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:.92rem}
.nav-links a{color:var(--slate);text-decoration:none;font-weight:600}
.nav-links a:hover{color:var(--lime-d)}
.menu{display:none;margin-left:auto;position:relative}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--slate)}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:50px;min-width:212px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);display:flex;flex-direction:column;padding:6px;z-index:70}
.menu-panel a{padding:11px 14px;color:var(--slate);text-decoration:none;font-weight:600;border-radius:8px;font-size:.95rem}
.menu-panel a:hover{background:var(--paper);color:var(--lime-d)}
.menu[open] summary{border-color:var(--lime);color:var(--lime-d)}

/* ---------- buttons (SLATE — not green) ---------- */
.eng-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--slate);color:#fff;text-decoration:none;font-weight:700;padding:11px 20px;border-radius:10px;font-size:.95rem;box-shadow:var(--sh-sm);transition:transform .12s,background .12s}
.eng-btn:hover{background:var(--slate-d);transform:translateY(-1px)}
.eng-btn--ghost{background:#fff;color:var(--slate);border:1.5px solid var(--line)}

/* ---------- hero (light, warm) ---------- */
.hero{background:linear-gradient(180deg,var(--paper-2),var(--paper));border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-6%;top:4%;width:46%;height:130%;background:
  repeating-linear-gradient(100deg,rgba(140,28,43,.15) 0 3px,transparent 3px 22px);transform:skewX(-12deg);opacity:.6;pointer-events:none}
.hero .wrap{position:relative;padding:30px 22px 22px;max-width:1180px}
.hero h1{font-size:clamp(1.7rem,3.3vw,2.5rem);margin:0 0 .35em;max-width:24ch;text-wrap:balance}
.hero-by{display:flex;align-items:center;gap:11px;font-size:.86rem;color:var(--muted);margin:0 0 12px}
.hero-by img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--lime);display:block}
.hero-by-txt{display:flex;flex-direction:column;gap:2px;line-height:1.35;min-width:0}
.hero-by b{color:var(--slate-d)}.hero-by .eng-mono{color:var(--lime-d)}
.hero-by-date{font-size:.82rem}
.hero .lede{font-size:1.06rem;color:#454b53;max-width:64ch;margin:0}
#leaderboard{padding-top:22px}

/* ---------- sections ---------- */
.sec{padding:50px 0}
.sec--white{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:760px;margin:0 auto 24px}
.sec-head.sec--lead{max-width:none;margin-left:0;margin-right:0;text-align:left}
.sec-eyebrow{font-family:var(--mono);font-size:.73rem;text-transform:uppercase;letter-spacing:.14em;color:var(--lime-d);font-weight:600;display:block;margin-bottom:8px}
.prose{max-width:760px;margin:0 auto}
.prose>section{padding:30px 0;border-top:1px solid var(--line)}
.prose>section:first-child{border-top:0;padding-top:0}
.prose p,.prose li{font-size:1.03rem}
.prose h2{scroll-margin-top:80px}

/* ---------- speed leaderboard (bonus-forward; slate CTAs) ---------- */
.lb{max-width:1180px;margin:0 auto}
.lb-head{display:grid;grid-template-columns:44px 1.55fr 1.25fr 1.75fr 158px;gap:18px;padding:0 20px 10px;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.lb-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lb-row{position:relative;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:var(--sh-sm);padding:14px 20px;
 display:grid;grid-template-columns:44px 1.55fr 1.25fr 1.75fr 158px;gap:16px 18px;align-items:center;
 grid-template-areas:"rank brand speed bonus cta";transition:box-shadow .14s,transform .14s,border-color .14s}
.lb-cover{position:absolute;inset:0;z-index:1;border-radius:15px}
.lb-row .lb-cta{position:relative;z-index:2}
.lb-row:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.lb-row--feat{border-color:var(--lime);box-shadow:0 0 0 3px rgba(140,28,43,.22),var(--sh)}
.lb-rank{grid-area:rank;font-family:var(--disp);font-weight:700;font-size:1.6rem;color:var(--slate-d);text-align:center}
.lb-brand{grid-area:brand;display:flex;align-items:center;gap:12px;min-width:0}
.lb-logo{width:84px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:9px;padding:4px 7px;flex:none}
.lb-name{font-family:var(--disp);font-weight:700;font-size:1.06rem;display:flex;flex-direction:column;min-width:0;color:var(--slate-d)}
.lb-sub{font-family:var(--sans);font-weight:400;font-size:.74rem;color:var(--muted)}
.lb-speed{grid-area:speed;display:flex;flex-direction:column;gap:8px;min-width:0}
.lb-payout{display:flex;align-items:center;gap:7px;font-size:1.02rem;font-weight:700;color:var(--slate-d);font-family:var(--disp)}
.lb-payout .eng-ic{color:var(--lime-d);width:1.15em;height:1.15em}
.lb-bar{height:9px;background:var(--line-2);border-radius:6px;overflow:hidden}
.lb-bar-fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--lime-d),var(--lime))}
.lb-fast{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--lime-ink);background:var(--lime);padding:2px 7px;border-radius:20px;font-weight:700}
/* BONUS = the visual hero of each row */
.lb-bonus{grid-area:bonus}
.lb-bonus-l{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;color:var(--lime-d);font-weight:700;margin-bottom:5px;font-family:var(--mono)}
.lb-bonus-v{display:block;font-family:var(--disp);font-weight:700;font-size:1.08rem;line-height:1.2;color:var(--slate-d);
 background:linear-gradient(120deg,#f1eaeb,#e9dcdd);border:1px solid #d6bfc1;border-left:5px solid var(--lime);border-radius:10px;padding:10px 13px}
.lb-cta{grid-area:cta;display:grid;gap:6px;justify-items:stretch}
.lb-cta .eng-btn{width:100%;font-size:1rem;padding:13px 18px}
.lb-min{font-size:.7rem;color:var(--muted);text-align:center}

/* ---------- detailed reviews ---------- */
.revs{display:grid;gap:18px;margin:1.4em 0}
.rev{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);padding:20px 22px}
.rev-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rev-rank{font-family:var(--disp);font-weight:700;font-size:1.4rem;color:var(--lime-d)}
.rev .lb-logo{width:96px;height:50px}
.rev-h{min-width:0}
.rev-h h3{margin:0;font-size:1.3rem}
.rev-meta{font-size:.82rem;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.rev-meta .eng-ic{color:var(--lime-d);width:1em;height:1em}
.rev-cta-btn{margin-left:auto}
.rev-bonus{margin:14px 0 4px}
.rev-bonus .lb-bonus-v{font-size:1.12rem}
.rev-body{margin-top:6px}
.rev-body p{margin:0 0 .8em;font-size:1rem;color:#454b53}
.rev-for{background:var(--paper);border-left:3px solid var(--lime);border-radius:0 8px 8px 0;padding:8px 12px;color:var(--slate-d)!important}
.rev-for b{color:var(--slate-d)}
.rev-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
@media(max-width:640px){
 .rev{padding:16px}
 .rev-cta-btn{margin-left:0;width:100%;order:5}
 .rev-head{gap:10px}
 .rev-foot .eng-btn{width:100%}
}

/* ---------- figures / tables ---------- */
.fig{margin:1.6em 0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh-sm)}
.fig>figcaption{font-size:.89rem;color:#454b53;padding:13px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.cap-l{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--slate);font-weight:600;margin-right:6px}
.cap-stamp{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:.77rem;color:var(--lime-d);margin-left:6px}
.t-scroll{overflow-x:auto}
.t{width:100%;border-collapse:collapse;font-size:.91rem}
.t th{text-align:left;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);background:var(--card);padding:11px 15px;border-bottom:2px solid var(--line)}
.t td{padding:11px 15px;border-bottom:1px solid var(--line);vertical-align:top}
.t tbody tr:nth-child(even){background:var(--paper-2)}
.t tbody tr:hover{background:#fdeeef}
.t-time{color:var(--slate-d);font-weight:700}.t-mut{color:var(--muted)}
.t-pill{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;color:var(--lime-d);background:#f1eaeb;border:1px solid #d6bfc1;border-radius:20px;padding:2px 9px}
.t-pill .eng-ic{width:.9em;height:.9em}
.t-heat td:nth-child(n+2){text-align:center;font-weight:600}
.h1{background:#e8d9da!important;color:var(--lime-d)} .h2{background:#f1eaeb!important;color:#591f24}
.h3{background:#fbf0db!important;color:var(--amber)} .h4{background:#fbe3e5!important;color:var(--red)}

/* bar charts */
.bc{padding:18px}
.bc-row{display:grid;grid-template-columns:160px 1fr 66px;align-items:center;gap:12px;margin:10px 0;font-size:.87rem}
.bc-lab{color:#454b53}
.bc-track{background:var(--line-2);border-radius:7px;height:18px;overflow:hidden}
.bc-fill{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--lime-d),var(--lime))}
.bc-val{text-align:right;color:var(--slate-d);font-weight:700}

/* timeline */
.tl{list-style:none;margin:1.4em 0;padding:0}
.tl-item{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.tl-dot{width:14px;height:14px;border-radius:50%;margin-top:5px;flex:none}
.tl-name{font-family:var(--disp);font-weight:700}.tl-range{margin-left:10px;color:var(--lime-d);font-weight:600}
.tl-item p{margin:.2em 0 0;font-size:.91rem;color:#454b53}

/* flow / scorecard */
.fl,.sc{list-style:none;margin:0;padding:18px;display:grid;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm)}
.fl-step,.sc-item{display:flex;gap:13px;align-items:flex-start}
.fl-n,.sc-n{flex:none;width:31px;height:31px;border-radius:50%;background:var(--slate);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.fl-step p,.sc-item p{margin:.12em 0 0;font-size:.91rem;color:#454b53}
.sc-item{align-items:center}.sc-box{margin-left:auto;width:23px;height:23px;color:var(--lime-d);flex:none}.sc-box svg{width:100%;height:100%}
.fl-saved{margin:13px 0 0;padding:13px 17px;background:#f1eaeb;border:1px solid #d6bfc1;border-radius:12px;font-size:.91rem}
.fl-saved .eng-ic{color:var(--lime-d)}

/* callouts / brief / checklist */
.cal{border-radius:12px;padding:15px 17px;margin:1.3em 0;font-size:.95rem;border:1px solid;display:flex;gap:11px;align-items:flex-start}
.cal .eng-ic{flex:none;margin-top:2px;width:1.2em;height:1.2em}
.cal--warn{background:#fbf0db;border-color:#e7c896}.cal--warn .eng-ic{color:var(--amber)}
.cal--red{background:#fbe3e5;border-color:#eeaab0}.cal--red .eng-ic{color:var(--red)}
.cal b{display:block;margin-bottom:3px}
.brief{border:1px solid var(--line);border-left:4px solid var(--lime);border-radius:0 12px 12px 0;background:var(--card);padding:17px 19px;margin:1.4em 0;box-shadow:var(--sh-sm)}
.brief .lab,.method .lab{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--lime-d);font-weight:600}
.checklist{list-style:none;margin:1em 0;padding:0}
.checklist li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.checklist .eng-ic{color:var(--amber);flex:none;margin-top:3px}

/* methodology band */
.method{display:flex;gap:18px;align-items:center;flex-wrap:wrap;max-width:1180px;margin:0 auto}
.method-ic{width:52px;height:52px;border-radius:14px;background:var(--slate);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.method-ic .eng-ic{width:25px;height:25px;color:var(--lime)}
.method p{margin:.3em 0 0;color:#454b53;max-width:780px}
.seals{display:flex;flex-wrap:wrap;gap:10px;margin:18px auto 0;max-width:1180px}
.seal{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 14px;font-size:.83rem;color:#454b53;font-weight:500}
.seal .eng-ic{color:var(--lime-d)}

/* faq */
.faqs{margin:1em auto;display:grid;gap:10px;max-width:760px}
.faq{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;box-shadow:var(--sh-sm)}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:600;list-style:none;position:relative;padding-right:46px;font-family:var(--disp)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-family:var(--mono);font-size:1.4rem;color:var(--lime-d)}
.faq[open] summary::after{content:"–"}.faq[open] summary{background:var(--paper)}
.faq-a{padding:3px 18px 16px;font-size:.95rem;color:#454b53}

/* footer */
.foot{background:var(--slate-d);color:#aeb8c2;padding:44px 0 28px;font-size:.89rem}
.foot .wrap{display:grid;gap:22px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
.foot a{color:#dfe5ea;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot-rg{border-top:1px solid #313b45;padding-top:18px;color:#8a95a1;font-size:.82rem;line-height:1.6}

/* eeat page hero */
.page-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding:42px 0}
.page-hero h1{font-size:clamp(1.7rem,3vw,2.3rem);margin:0}
.page-hero .crumb{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.page-hero .crumb a{color:var(--lime-d)}
.page-body{padding:46px 0}.page-body h2{font-size:1.35rem;margin:1.7em 0 .35em}
.by-link{color:var(--slate-d);text-decoration:none;border-bottom:1.5px solid var(--lime)}
.by-link:hover b{color:var(--lime-d)}
.hero-by a{display:inline-flex}
.author-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.author-avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid var(--lime);box-shadow:var(--sh-sm);flex:none}
.author-role{margin:.3em 0 .1em;color:var(--lime-d);font-weight:600;font-family:var(--disp)}
.author-cred{margin:0;color:var(--muted);font-size:.92rem}

/* sticky mobile cta */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -3px 14px rgba(34,38,43,.12);padding:9px 14px;align-items:center;gap:12px}
.sticky .eng-mono{font-size:.82rem;color:var(--slate-d);font-weight:600}
.sticky .eng-btn{margin-left:auto;padding:10px 16px}

/* ---------- responsive ---------- */
@media(max-width:1000px){
 .lb-head{display:none}
 .lb-row{grid-template-columns:46px 1fr;grid-template-areas:"rank brand" "bonus bonus" "speed speed" "cta cta";gap:12px 14px}
 .lb-cta{justify-items:stretch}
}
@media(max-width:640px){
 body{font-size:16px}
 .nav .wrap{flex-wrap:nowrap;gap:12px}
 .nav-links{display:none}
 .menu{display:block}
 .sec{padding:30px 0}
 .hero .wrap{padding:22px 22px 16px}
 .hero h1{font-size:1.5rem}.hero .lede{font-size:1rem}
 #leaderboard{padding-top:16px}
 .lb-row{grid-template-columns:40px 1fr;grid-template-areas:"rank brand" "bonus bonus" "speed speed" "cta cta";align-items:center;padding:14px 16px}
 .lb-bonus-v{font-size:1.05rem}
 .lb-cta .eng-btn{padding:14px 18px}
 .foot-top{flex-direction:column}
 .bc-row{grid-template-columns:100px 1fr 54px;font-size:.8rem}
 .eng-tag{font-size:.5rem;letter-spacing:.2em}
}

/* ============================================================================
   APPENDED PACK — nothing above this line is altered.
   cochranemap.ca, 2026-10-01. Three groups, each with the reason it exists.
   ----------------------------------------------------------------------------
   A. CTA EXCLUSIVITY (UX-1). The template paints .eng-btn with --slate, the
      body-ink token, so rncanengagenrcan.ca, pittwaterecoadventures.com and
      issie.net all serve the identical hue-213 button. Repointed to --cta,
      which appears nowhere else on this page.
   B. [hidden] RESTATED AT AUTHOR LEVEL (L_NEW_44c). .lb-row{display:grid} beats
      the UA sheet's [hidden]{display:none}, so Load-more is inert on the
      template's own live page. Restated here and inside every media query that
      re-declares the element's display.
   C. MOBILE FOLD + CONTROLS. The template's hero is tuned to its own H1; ours
      is longer. Mobile-only, so the desktop look -- which is what "the same
      template" means -- is untouched.
   ========================================================================== */

/* -- A ------------------------------------------------------------------- */
.eng-btn{background:var(--cta);color:var(--cta-ink)}
.eng-btn:hover{background:var(--cta-d)}
.eng-btn:focus-visible{outline:3px solid var(--cta-d);outline-offset:2px}
.eng-btn--ghost,.eng-btn--ghost:hover{background:#fff;color:var(--slate);border:1.5px solid var(--line)}

/* -- B ------------------------------------------------------------------- */
.lb-row[hidden],.rev[hidden],[data-row][hidden]{display:none!important}

/* -- bonus plate: re-derived from the template's peach (an orphan tint of the
      old orange accent) to ink-on-parchment with a gold rule. L_NEW_43: the
      plate hue (38) is not in the palette and is not the CTA hue (306).     */
.lb-bonus-v{background:linear-gradient(120deg,#FBF4E6,#F6EBD6);border:1px solid #E6D3AC;
  border-left:5px solid var(--amber);border-radius:10px;padding:10px 13px;font-size:1.18rem}
.lb-bonus-l{color:#7A5312}
.lb-bonus-v{line-height:1.22}
.lb-bonus-note{display:block;margin-top:4px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.04em;color:#7A5312;text-transform:uppercase}

/* -- provincial status chips: the page's own column, no template equivalent */
.prov{display:flex;flex-wrap:wrap;gap:8px;margin:1.1em 0}
.prov b{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.07em;font-weight:600;border:1px solid var(--line);
  background:var(--card);border-radius:20px;padding:4px 11px;color:var(--slate)}
.prov b.on{border-color:#d6bfc1;background:#f1eaeb;color:var(--lime-d)}

.lede-toggle{display:none;background:none;border:0;padding:0;margin-left:5px;
  color:var(--lime-d);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

/* -- C: mobile fold pack -------------------------------------------------- */
@media(max-width:768px){
  .lb-row[hidden]{display:none!important}
  .lb-cta{width:100%}
  .lb-cta .eng-btn{width:100%;min-height:48px}
  .lb-bonus{text-align:center}
  .hero{padding-top:14px;padding-bottom:14px}
  .hero h1{font-size:1.62rem;line-height:1.14}
  .hero-by{font-size:.68rem;flex-wrap:nowrap;align-items:flex-start}
  .hero-by-date{white-space:normal;line-height:1.3}
  .hero-by img{width:26px;height:26px}
  .lede-more{display:none}
  .hero-intro.expanded .lede-more{display:inline}
  .lede-toggle{display:inline-block}
  .sec-eyebrow{margin-bottom:5px}
  section{padding-top:22px;padding-bottom:22px}
}
/* -- C2: fold pack, measured. The template's own live page puts the #1 CTA at
      970px on a 375x667 viewport; ours was 937. Every rule below is mobile-only
      so the desktop look -- which is what "the same template" means -- is
      untouched. Measured result is printed in strategy/decisions.md.          */
@media(max-width:768px){
  .nav .wrap{padding:7px 18px}
  .nav .eng-logo img{height:34px!important;max-width:200px!important}
  .hero .wrap{padding:12px 20px 12px}
  .hero h1{font-size:1.42rem;line-height:1.12;margin:0 0 .3em;max-width:none}
  .hero-by{margin:0 0 8px}
  .hero .lede{font-size:.95rem;line-height:1.4}
  #leaderboard{padding-top:12px}
  #leaderboard .sec-eyebrow{display:none}
  #leaderboard .sec-head{margin-bottom:12px}
  #leaderboard h2{font-size:1.18rem}
  /* CTA above the wagering block: the reader should not scroll past the offer
     to reach the button. grid-areas, so the DOM order is untouched. */
  .lb-row{grid-template-areas:"rank brand" "bonus bonus" "cta cta" "speed speed";
          gap:10px 14px;padding:12px 16px}
  .lb-logo{width:72px;height:38px}
  .lb-speed{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .lb-bonus-v{padding:8px 11px}
}
/* -- D: desktop plate must not out-shout the CTA (L_NEW_43 / UX-1). The
      template's 158px CTA column against a 1.75fr bonus column inverts it.   */
@media(min-width:1001px){
  .lb-head,.lb-row{grid-template-columns:44px 1.55fr 1.15fr 1.2fr 210px}
  .lb-cta .eng-btn{padding:17px 18px;font-size:1.02rem}
}


/* -- C4: the mobile facts strip. As a row of flex columns the "No wagering"
      value wrapped across its own label and collided with the deposit floor.
      Rebuilt as three label-over-value cells on one line.                    */
@media(max-width:768px){
  .lb-speed{display:block;border-top:1px solid var(--line-2);padding-top:9px}
  .lb-speed .lb-min{text-align:left;font-size:.8rem;color:var(--slate-d);font-weight:600}
  .lb-bonus-l{margin-bottom:3px}
  .lb-bonus-note{margin-top:2px}
  .lb-row{gap:8px 14px}
}
/* -- D2: on desktop the column header already says "Welcome offer"; the plate's
      own label is then a duplicate caption of exactly the kind L_NEW_43 says to
      delete. Mobile has no column header, so the label stays there.          */
@media(min-width:1001px){ .lb-rows .lb-bonus-l{display:none} }
/* the full published string sits under the headline in the same plate; it is
   detail, not decoration, so it is readable rather than micro-type. */
.lb-bonus-note{text-transform:none;letter-spacing:0;font-size:.68rem;line-height:1.35;
  font-family:var(--sans);color:#6B4C10;display:block;margin-top:5px}
.lb-bonus-note + .lb-bonus-note{margin-top:2px;text-transform:uppercase;font-size:.6rem;
  letter-spacing:.05em;font-family:var(--mono)}
.lb-full{display:block;font-size:.72rem;line-height:1.4;color:var(--muted);margin-top:6px}
.lb-full b{color:var(--slate);font-weight:600}
@media(max-width:768px){ .lb-speed .lb-full{grid-column:1/-1;margin-top:2px} }
/* the facts column reads as one left-aligned block; the T&Cs micro-line under
   the CTA keeps the template's centring. */
.lb-speed .lb-min{text-align:left}

/* The bonus plate must never out-shout the CTA (UX-1). On this template the row is
   align-items:center, so the CTA's wrapping div collapses to its content width while
   a long bonus string stretches the plate - inverting the hierarchy. Force the CTA
   wrapper wide and cap the plate. */
.lb-cta{width:100%;max-width:none}
.lb-cta .eng-btn{display:block;width:100%;text-align:center}
/* The bonus was a large pale block that dominated the row and read as washed out.
   Restyled as a compact plate: white ground, crimson rule, value in the display face.
   It still out-ranks the brand name (L_NEW_43) without out-shouting the CTA. */
.lb-bonus{max-width:13rem;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--lime);border-radius:4px;padding:.5rem .7rem}
.lb-bonus-l{display:block;font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);opacity:.72;margin-bottom:.15rem}
/* The template gives .lb-bonus-v its OWN gold left-rule and padding. Wrapping that in
   a second plate rendered as a box inside a box. The outer plate is the plate now, so
   the inner one is neutralised rather than restyled. */
.lb-bonus-v{display:block;font-size:1.18rem;line-height:1.25;font-weight:700;color:#2b2118;
  border:0;border-left:0;padding:0;background:none}
.lb-row{align-items:center}
.lb-speed{color:var(--slate);opacity:.75;font-size:.8rem}
/* The gate measures the BUTTON, not its wrapper. At default padding the plate came to
   1.96x the button - just over the 1.9 ceiling - so the CTA gets real height here,
   which also lifts it clear of the 44px touch-target floor. */
/* Sitting exactly on the 1.9 ceiling is not a pass worth keeping - give the CTA real
   headroom instead, which also makes it the clear focal point of the row. */
.lb-cta .eng-btn{padding-top:.95rem;padding-bottom:.95rem;min-height:60px;
  font-size:.97rem;letter-spacing:.01em;border-radius:6px}
@media(max-width:768px){.lb-row>div:last-child{width:100%}.lb-bonus{max-width:none}}
.disc{font-size:.82rem;line-height:1.65;color:var(--slate);background:var(--paper-2);
border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0}
.lb-unv{display:block;font-size:.62rem;line-height:1.3;color:var(--slate);opacity:.85;
margin-top:4px;font-style:italic}

/* Alignment backstop: any h2/p sitting directly in a section wrap, outside
   .sec-head or .prose, otherwise spans the full 1180px wrap while its
   neighbours sit in a centred 760px column. That produced a centred heading
   over far-left body text on some sites and the exact inverse on others. */
.sec > .wrap > h2,
.sec > .wrap > p{max-width:760px;margin-left:auto;margin-right:auto}
.sec > .wrap > h2{margin-bottom:.5em}

/* mobile: centre the stat cells (Free spins, Wagering, Min. deposit) */
@media (max-width:760px){
  .slip__cell,.pvn-slip__cell,.rbm-cell,.lb-bonus,.hng-lb-bonus,
  .slip__grid > *,.pvn-slip__grid > *,.rbm-band > *{
    text-align:center;align-items:center;justify-content:center}
  .slip__lab,.pvn-slip__lab,.rbm-clab,.lb-bonus-l,.hng-lb-bonus-l{
    display:block;width:100%;text-align:center}
  .slip__val,.slip__sub,.slip__min,.pvn-slip__val,.pvn-slip__sub,
  .rbm-val,.rbm-sub,.lb-bonus-v,.hng-lb-bonus-v{
    display:block;width:100%;text-align:center}
}

/* Toplist heading: centred, and held to one line. The global h2 clamp reaches
   2.15rem, at which 44 characters no longer fit the 760px column and the
   heading broke to two lines on wide screens. Capped just below that. */
#leaderboard>.wrap>h2{text-align:center;font-size:clamp(1.45rem,2.1vw,1.95rem)}