/* ==========================================================================
   NZ No.1 — site.css
   One stylesheet, no JavaScript, no external fonts, no framework.

   Palette is "pounamu and kowhai": a deep greenstone green for structure and
   a kowhai gold for action. Chosen so the single most important element on
   any page — the CTA — is the only saturated warm colour on screen.

   Contrast: every text/background pair below meets WCAG AA at its size.
   --mute on --paper is 5.9:1; --faint is used only for uppercase labels at
   >=12px/600 where 3:1 is the applicable threshold.
   ========================================================================== */

:root{
  /* ---- structure -------------------------------------------------- */
  --paper:#FBFAF8;        /* page ground                              */
  --card:#FFFFFF;         /* cards, table rows                        */
  --haze:#F1F0EB;         /* alternate bands                          */
  --line:#E2E0D8;         /* hairlines — 1px, never 2                 */
  --line-hi:#CFCCC1;

  /* ---- pounamu (greenstone) — structure, headers, dark bands ------ */
  --pounamu:#0C3A31;
  --pounamu-2:#124A3E;
  --pounamu-3:#1A6553;
  --pounamu-ink:#EAF4F0;

  /* ---- hero surface ------------------------------------------------
     A lit surface rather than a painted slab: a deep jewel-green ramp
     with soft light sources over it — warm kowhai upper-right, cool jade
     left, deep ocean at the base — plus grain, so it does not read as
     flat vector fill. */
  --hero-top:#0E4B3B;     /* richer, more saturated greenstone         */
  --hero-mid:#083026;
  --hero-btm:#05201A;     /* near-black green — the floor              */
  --jade:#1AA082;         /* cool accent light                         */
  --ocean:#0C5A78;        /* depth at the base                         */

  /* ---- type ------------------------------------------------------- */
  --ink:#13201C;          /* headings — 14.9:1 on paper               */
  --text:#2B3733;         /* body — 10.4:1                            */
  --mute:#5D6A65;         /* secondary — 5.9:1                        */
  --faint:#87918C;        /* uppercase labels only                    */

  /* ---- action ----------------------------------------------------- */
  --kowhai:#E8960C;       /* primary CTA                              */
  --kowhai-deep:#C57B09;  /* same hue at 3.14:1 — accent rules, borders */
  --kowhai-hi:#FFAE24;
  --kowhai-lo:#B5730A;
  --link:#0F5E4E;         /* links — 7.3:1 on paper                   */
  --link-hi:#0C3A31;

  /* ---- semantic --------------------------------------------------- */
  --yes:#10794F;          /* verified, licensed, pro                  */
  --no:#B8371F;           /* con, warning, unverified                 */
  --info:#1F5C8B;         /* information only, never a CTA            */
  --yes-bg:#E8F4EE;
  --no-bg:#FBEDEA;
  --info-bg:#EAF1F7;

  /* ---- geometry --------------------------------------------------- */
  --r:10px; --r-sm:5px; --r-pill:999px;
  --wrap:1180px;
  --shadow:0 1px 2px rgba(19,32,28,.05), 0 0 0 1px var(--line);
  --shadow-lg:0 12px 32px -12px rgba(19,32,28,.22), 0 0 0 1px var(--line);
  --ease:cubic-bezier(.2,.8,.3,1);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --disp:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--paper);color:var(--text);
  font:400 16.5px/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--link-hi)}
h1,h2,h3,h4,h5,h6{font-family:var(--disp);color:var(--ink);margin:0 0 .5em;line-height:1.2;letter-spacing:-.018em;font-weight:760}
h1{font-size:clamp(2rem,1.35rem + 2.5vw,3.1rem);letter-spacing:-.028em;line-height:1.08}
h2{font-size:clamp(1.5rem,1.18rem + 1.25vw,2.15rem);margin-top:0;letter-spacing:-.024em}
h3{font-size:clamp(1.16rem,1.05rem + .45vw,1.38rem)}
h4{font-size:1.04rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.35em}
li{margin-bottom:.45em}
li::marker{color:var(--pounamu-3)}
strong,b{font-weight:680;color:var(--ink)}
a b,a strong{color:inherit}
/* --ink is near-black, so any <b> on a dark surface was rendering at about
   1.1:1 — invisible. That was hiding the lead-in to the R18 warning and the
   affiliate disclosure in the footer. Bold on dark inherits its surroundings
   and lifts to white instead. */
.foot b,.foot strong,
.hero b,.hero strong,
.lede-a b,.lede-a strong,.lede-b b,.lede-b strong,.lede-e b,.lede-e strong,
.topstrip b,.topstrip strong,
thead th b,thead th strong,
.lb-head b,.lb-head strong{color:#fff}
small{font-size:.85em}
hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
code{font:500 .9em var(--mono);background:var(--haze);padding:.1em .38em;border-radius:4px}
:focus-visible{outline:3px solid var(--kowhai);outline-offset:2px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap--narrow{max-width:820px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--kowhai);color:#1A1200;padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- age / disclosure strip ---------------------------------- */
/* One line at every width. On phones the verbose words (.ts-lg) swap for the
   compact ones (.ts-sm) — the same four disclosures, fewer characters — so the
   strip never wraps to two rows and never needs to shrink below legibility. */
.topstrip{background:var(--pounamu);color:var(--pounamu-ink);font-size:.78rem;letter-spacing:.005em}
.topstrip .wrap{display:flex;align-items:center;justify-content:center;padding-top:.5rem;padding-bottom:.5rem;text-align:center}
.topstrip .ts{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-sm{display:none}
.topstrip b{color:#fff}
.topstrip a{color:var(--kowhai-hi);text-decoration-thickness:1px}

/* ---------- header --------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(251,250,248,.94);backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.2rem;min-height:66px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
/* The mark is a casino chip: eight kowhai edge notches around a lit greenstone
   disc, monogram centred. Drawn in CSS — a repeating-conic-gradient for the
   notched rim, a hard-edged radial disc painted over it — so it costs no
   request and scales without an asset. --chip-r is the disc radius and
   --chip-ring its gold keyline; the rim band is whatever is left over. */
.brand-mark{
  --chip-r:15.5px;
  --chip-ring:1.2px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font:800 13px/1 var(--disp);letter-spacing:-.01em;
  flex:0 0 auto;
  background:
    radial-gradient(circle var(--chip-r) at 50% 24%, rgba(255,255,255,.17) 0 26%, transparent 60%),
    radial-gradient(circle at 50% 50%,
      #16594A 0 calc(var(--chip-r) - var(--chip-ring)),
      var(--kowhai-deep) calc(var(--chip-r) - var(--chip-ring)) var(--chip-r),
      transparent var(--chip-r)),
    repeating-conic-gradient(from 22.5deg, var(--kowhai) 0 11deg, #093028 11deg 45deg);
  box-shadow:inset 0 0 0 1px rgba(232,150,12,.5), 0 1px 3px rgba(19,32,28,.28);
}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-word{font:800 1.16rem/1 var(--disp);color:var(--ink);letter-spacing:-.035em}
.brand-tag{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:700;margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav .nav-link{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .58rem;
  border-radius:var(--r-sm);color:var(--text);text-decoration:none;font-size:.905rem;
  font-weight:570;white-space:nowrap}
.nav .nav-link:hover{background:var(--haze);color:var(--ink)}
.nav .nav-link[aria-current]{color:var(--pounamu);background:var(--yes-bg);font-weight:700}

/* ---- nested dropdowns ---------------------------------------------------
   Pure CSS. Opens on :hover and on :focus-within, so it is keyboard-reachable
   without script. The top-level item stays a real link to its hub rather than
   a dead trigger, so tapping it still goes somewhere. */
.nav-item{position:relative}
.nav-item[data-in] > .nav-link{color:var(--pounamu);font-weight:700}
.nav-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.5;transition:transform .15s var(--ease),opacity .15s}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{opacity:1;transform:rotate(180deg)}

.nav-drop{
  position:absolute;top:100%;left:0;z-index:130;min-width:232px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 20px 44px -16px rgba(19,32,28,.30);
  padding:.45rem;margin-top:.3rem;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s}
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop{opacity:1;visibility:visible;transform:none}
/* a hit-bridge so the pointer can cross the gap without the panel closing */
.nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:.45rem}
.nav-drop ul{list-style:none;margin:0;padding:0}
.nav-drop li{margin:0}
.nav-drop a{display:block;padding:.44rem .6rem;border-radius:var(--r-sm);
  font-size:.875rem;line-height:1.35;color:var(--text);text-decoration:none;white-space:nowrap}
.nav-drop a:hover{background:var(--haze);color:var(--link)}
.nav-drop a[aria-current]{color:var(--pounamu);background:var(--yes-bg);font-weight:700}
/* 20 reviews would run off the bottom of the viewport in one column, so the
   panel goes two-up — and at 430px wide it has to anchor to its own right
   edge or it runs off the side instead on anything under ~1440px. */
.nav-drop--wide{min-width:430px;left:auto;right:0}
.nav-drop--wide ul{columns:2;column-gap:.4rem}
.nav-drop--wide li{break-inside:avoid}
/* keep the last dropdowns on screen */
.nav-item:nth-last-child(-n+2) .nav-drop{left:auto;right:0}
.nav .nav-cta{background:var(--kowhai);color:#1A1200;font-weight:750;padding:.52rem .95rem;border-radius:var(--r-pill);margin-left:.35rem}
.nav .nav-cta:hover{background:var(--kowhai-hi);color:#1A1200}
@media(max-width:1040px){
  .hdr-in{flex-wrap:wrap;padding-top:.6rem;padding-bottom:.6rem;min-height:0}
  .nav{margin-left:0;width:100%;overflow-x:auto;padding-bottom:.2rem;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{height:0}
}

/* ---------- hero ------------------------------------------------------ */
/* Same lit surface as the lede hero, so the 12 pages that use hero() and the
   12 that use lede() look like one site. Light sources terminate above the
   bottom edge for the same reason as there — overflow clips them otherwise. */
.hero{
  background:
    radial-gradient(85% 78% at 84% -14%, rgba(232,150,12,.26), transparent 66%),
    radial-gradient(62% 58% at -8%  14%, rgba(26,160,130,.22), transparent 68%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--hero-mid) 58%, var(--hero-btm) 100%);
  color:var(--pounamu-ink);padding:3.4rem 0 2.8rem;position:relative;overflow:hidden;
  isolation:isolate}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--kowhai) 20%,var(--kowhai-hi) 50%,var(--kowhai) 80%,transparent)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;z-index:1}
.hero-in{position:relative;z-index:1;max-width:880px}
.hero h1{color:#fff;margin-bottom:.4em;letter-spacing:-.031em;text-wrap:balance;
  text-shadow:0 1px 24px rgba(0,0,0,.25)}
.hero p{color:#C3D9D1;font-size:1.105rem;line-height:1.66;max-width:64ch}
.hero .eyebrow{color:var(--kowhai-hi);display:inline-flex;align-items:center;gap:.55rem;
  letter-spacing:.14em;font-size:.685rem}
.hero .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--kowhai),rgba(255,174,36,.25))}
.hero .byline a{color:var(--kowhai-hi)}
.hero .byline-av{background:linear-gradient(145deg,var(--jade),var(--pounamu));
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.hero a{color:var(--kowhai-hi)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:.7rem;margin-top:1.7rem}
.hero-stat{
  position:relative;border-radius:12px;padding:.85rem 1rem .9rem;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 22px -14px rgba(0,0,0,.7);
  backdrop-filter:blur(3px)}
.hero-stat b{display:block;font:800 1.38rem/1.12 var(--disp);color:#fff;letter-spacing:-.03em}
.hero-stat span{display:block;font-size:.775rem;color:#A5C2B8;margin-top:.3rem;line-height:1.36}
.hero-stats{gap:.75rem}

.eyebrow{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--pounamu-3);margin-bottom:.75rem}

/* ---------- byline / trust ------------------------------------------- */
.byline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:.855rem;color:var(--mute);margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14)}
.hero .byline{color:#A9C4BB}
.byline--light{border-top-color:var(--line);color:var(--mute)}
.byline img,.byline-av{width:34px;height:34px;border-radius:50%;background:var(--pounamu-3);display:grid;place-items:center;color:#fff;font:700 12px/1 var(--disp);flex:0 0 auto}
.byline a{font-weight:650}
.byline .sep{opacity:.45}

/* ---------- sections -------------------------------------------------- */
.sec{padding:2.9rem 0}
.sec--haze{background:var(--haze);border-block:1px solid var(--line)}
.sec--tight{padding:2rem 0}
.sec-head{max-width:76ch;margin-bottom:1.5rem}
.sec-head p{color:var(--mute);font-size:1.03rem;margin-bottom:0}
.prose{max-width:76ch}
.prose h3{margin-top:1.9rem}
.prose h4{margin-top:1.5rem;color:var(--pounamu)}

/* ---------- buttons ---------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;padding:.72rem 1.3rem;border-radius:var(--r-pill);background:var(--kowhai);color:#1A1200;font:750 .945rem/1 var(--sans);text-decoration:none;border:0;cursor:pointer;transition:background .16s var(--ease),transform .16s var(--ease);text-align:center}
.btn:hover{background:var(--kowhai-hi);color:#1A1200;transform:translateY(-1px)}
.btn:active{transform:none}
.btn--sm{padding:.54rem .95rem;font-size:.86rem}
.btn--wide{width:100%}
.btn--ghost{background:transparent;color:var(--pounamu);box-shadow:inset 0 0 0 1.5px var(--pounamu-3)}
.btn--ghost:hover{background:var(--pounamu);color:#fff}
.btn--dark{background:var(--pounamu);color:#fff}
.btn--dark:hover{background:var(--pounamu-2);color:#fff}

/* ---------- leaderboard (the primary toplist) -------------------------- */
.lb{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.lb-note{font-size:.78rem;line-height:1.65;color:var(--mute);padding:.85rem 1.05rem;border-top:1px solid var(--line);background:rgba(0,0,0,.14);margin:0}
.lb-note b{color:var(--faint)}
.lb-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lb-head{display:grid;grid-template-columns:44px 152px 1fr 96px 150px;gap:1rem;align-items:center;padding:.62rem 1.05rem;background:var(--pounamu);color:#BFD6CE;font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
.lb-row{display:grid;grid-template-columns:44px 152px 1fr 96px 150px;gap:1rem;align-items:center;padding:.88rem 1.05rem;border-top:1px solid var(--line);position:relative;background:var(--card)}
.lb-row:first-child{border-top:0}
.lb-row:nth-child(even){background:#FCFCFA}
.lb-row--top{background:linear-gradient(90deg,#FFFCF3,var(--card) 44%)}
.lb-row--top::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kowhai)}
.lb-rank{font:800 1.12rem/1 var(--disp);color:var(--pounamu);text-align:center}
.lb-logo{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);height:66px;display:grid;place-items:center;padding:.5rem}
.lb-logo img{max-height:50px;max-width:100%;width:auto;object-fit:contain}
.lb-brand .lb-name{font:750 1.03rem/1.25 var(--disp);color:var(--ink);margin:0 0 .2rem}
.lb-brand .lb-name a{color:inherit;text-decoration:none}
.lb-brand .lb-name a:hover{color:var(--link)}
.lb-sub{font-size:.83rem;color:var(--mute);margin:0 0 .4rem;line-height:1.45}
/* ---------- the welcome offer ------------------------------------------
   The offer is the single thing a reader scans for, so it is the loudest
   element in the row — louder than the brand name, the score and the button.
   The turnover it demands is set immediately under it in the same block:
   a headline figure printed without its wagering is the exact thing this
   site argues against, so the two never get separated. */
.lb-offer{position:relative;margin:.1rem 0 .5rem;padding:.52rem .75rem .55rem .8rem;
  border:1px solid #EFDCA6;border-left:4px solid var(--kowhai-deep);border-radius:var(--r-sm);
  background:linear-gradient(100deg,#FFF6DD,#FFFDF5 74%)}
.lb-offer-lbl{display:block;font:800 .595rem/1 var(--disp);letter-spacing:.15em;
  text-transform:uppercase;color:#87680F;margin-bottom:.28rem}
.lb-offer-main{display:block;font:800 1.62rem/1.04 var(--disp);color:var(--ink);letter-spacing:-.035em}
.lb-offer-add{display:block;font:750 1.02rem/1.2 var(--disp);color:var(--pounamu);margin-top:.14rem}
.lb-offer-terms{display:block;font-size:.715rem;line-height:1.45;color:var(--mute);margin-top:.38rem}
.lb-offer-terms a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
/* Row one gets the loudest treatment of all. */
.lb-row--top .lb-offer{border-color:var(--kowhai-deep);box-shadow:0 1px 0 rgba(154,120,18,.1)}
.lb-row--top .lb-offer-main{font-size:1.94rem}
.lb-row--top .lb-offer-add{font-size:1.08rem}
.lb-meta{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.45rem}
.lb-badge{display:inline;margin:0 0 0 .4rem}
.lb-brand .lb-name{display:inline}
.lb-brand .lb-badge + .lb-offer{margin-top:.42rem}
.lb-score{text-align:center}
.lb-score-top{font:800 1.2rem/1 var(--disp);color:var(--ink);letter-spacing:-.03em}
.lb-score-top span{font-size:.72rem;color:var(--faint);font-weight:700}
.lb-bar{height:4px;border-radius:2px;background:var(--line);margin-top:.45rem;overflow:hidden}
.lb-bar i{display:block;height:100%;background:var(--yes);border-radius:2px}
.lb-cta{display:flex;flex-direction:column;gap:.38rem}
.lb-terms{font-size:.665rem;color:var(--faint);text-align:center;line-height:1.35}
.lb-review{font-size:.78rem;text-align:center}
@media(max-width:940px){
  .lb-head{display:none}
  .lb-row{grid-template-columns:38px 1fr;grid-template-areas:"rank logo" "brand brand" "score score" "cta cta";gap:.75rem 1rem;padding:1.05rem}
  .lb-rank{grid-area:rank;text-align:left}
  .lb-logo{grid-area:logo;height:56px;justify-self:start;padding:.4rem .7rem;min-width:140px}
  .lb-brand{grid-area:brand}
  .lb-score{grid-area:score;display:flex;align-items:center;gap:.7rem;text-align:left}
  .lb-score .lb-bar{flex:1;margin-top:0}
  .lb-offer-main{font-size:1.72rem}
  .lb-row--top .lb-offer-main{font-size:2rem}
  .lb-cta{grid-area:cta}
}

/* ---------- chips ------------------------------------------------------ */
.chip{display:inline-flex;align-items:center;gap:.28rem;font-size:.7rem;font-weight:700;padding:.22rem .55rem;border-radius:var(--r-pill);background:var(--haze);color:var(--mute);border:1px solid var(--line);line-height:1.5;white-space:nowrap}
.chip--yes{background:var(--yes-bg);color:var(--yes);border-color:#BFE0CF}
.chip--no{background:var(--no-bg);color:var(--no);border-color:#EFC9C0}
.chip--info{background:var(--info-bg);color:var(--info);border-color:#C4D8E8}
.chip--gold{background:#FFF3DA;color:var(--kowhai-lo);border-color:#F3DCAE}

/* ---------- tables ----------------------------------------------------- */
.tw{overflow-x:auto;margin:0 0 1.5rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.895rem;min-width:540px}
caption{caption-side:top;text-align:left;padding:.85rem 1rem;font-size:.82rem;color:var(--mute);border-bottom:1px solid var(--line);background:var(--haze)}
th,td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--pounamu);color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.075em;font-weight:800;border-bottom:0;position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#FCFCFA}
td b,th b{color:var(--ink)}
.t-num{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.86em}
.t-logo{display:flex;align-items:center;gap:.55rem;font-weight:650;color:var(--ink)}
.t-logo img{width:30px;height:30px;object-fit:contain;border-radius:4px;background:#fff;border:1px solid var(--line);padding:2px;flex:0 0 auto}

/* ---------- cards / grids ---------------------------------------------- */
.grid{display:grid;gap:1.05rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(206px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;box-shadow:var(--shadow)}
.card h3{font-size:1.08rem;margin-bottom:.4rem}
.card p{font-size:.92rem;color:var(--mute);margin-bottom:0}
.card p + p{margin-top:.7rem}
a.card{text-decoration:none;display:block;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
a.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
a.card h3{color:var(--link)}
.card-ic{width:38px;height:38px;border-radius:9px;background:var(--yes-bg);color:var(--pounamu);display:grid;place-items:center;margin-bottom:.8rem}
.card-ic svg{width:20px;height:20px}
.card-more{display:inline-block;margin-top:.8rem;font-size:.86rem;font-weight:700;color:var(--link)}

/* ---------- key facts --------------------------------------------------- */
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:1.5rem}
.keyfact{background:var(--card);padding:.95rem 1.05rem}
.keyfact b{display:block;font:800 1.24rem/1.15 var(--disp);color:var(--ink);letter-spacing:-.025em}
.keyfact span{display:block;font-size:.735rem;text-transform:uppercase;letter-spacing:.075em;color:var(--faint);font-weight:750;margin-top:.3rem}

/* ---------- callouts ----------------------------------------------------- */
.note{border-left:4px solid var(--info);background:var(--info-bg);padding:1rem 1.15rem;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 1.4rem;font-size:.94rem}
.note--warn{border-left-color:var(--no);background:var(--no-bg)}
.note--ok{border-left-color:var(--yes);background:var(--yes-bg)}
.note--gold{border-left-color:var(--kowhai);background:#FFF8EA}
.note p:last-child{margin-bottom:0}
.note h4{margin:0 0 .4rem;font-size:.97rem;color:var(--ink)}

/* ---------- pros / cons --------------------------------------------------- */
.pc{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1rem;margin-bottom:1.5rem}
.pc-col{border:1px solid var(--line);border-radius:var(--r);padding:1.05rem 1.15rem;background:var(--card)}
.pc-col h4{margin:0 0 .6rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.pc-pro h4{color:var(--yes)}
.pc-con h4{color:var(--no)}
.pc-col ul{list-style:none;padding:0;margin:0;font-size:.9rem}
.pc-col li{padding-left:1.5rem;position:relative;margin-bottom:.5rem;line-height:1.5}
.pc-pro li::before{content:"✓";position:absolute;left:0;color:var(--yes);font-weight:800}
.pc-con li::before{content:"×";position:absolute;left:.15rem;color:var(--no);font-weight:800;font-size:1.1em}

/* ---------- FAQ ------------------------------------------------------------ */
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{padding:1rem 1.2rem;font-weight:680;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 1.35rem/1 var(--disp);color:var(--pounamu-3);flex:0 0 auto;transition:transform .18s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--haze)}
.faq-body{padding:0 1.2rem 1.15rem;font-size:.95rem;color:var(--text)}
.faq-body p:last-child{margin-bottom:0}

/* ---------- author box -------------------------------------------------------- */
.authorbox{display:flex;gap:1.15rem;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:1.35rem;box-shadow:var(--shadow)}
.authorbox .av{width:62px;height:62px;border-radius:50%;background:linear-gradient(145deg,var(--pounamu-3),var(--pounamu));color:#fff;display:grid;place-items:center;font:800 20px/1 var(--disp);flex:0 0 auto}
.authorbox h3{margin:0 0 .12rem;font-size:1.06rem}
.authorbox .role{font-size:.775rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:750;margin-bottom:.55rem}
.authorbox p{font-size:.9rem;color:var(--mute);margin-bottom:.5rem}
.authorbox p:last-child{margin-bottom:0}

/* ---------- steps ---------------------------------------------------------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 1.5rem}
.steps li{counter-increment:s;position:relative;padding:0 0 1.15rem 3rem;border-left:2px solid var(--line);margin-left:1rem}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-1.02rem;top:-.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--pounamu);color:#fff;display:grid;place-items:center;font:800 .84rem/1 var(--disp)}
.steps h4{margin:.15rem 0 .3rem;font-size:1rem}
.steps p{font-size:.93rem;margin-bottom:0;color:var(--mute)}

/* ---------- timeline ------------------------------------------------------- */
.tl{list-style:none;padding:0;margin:0 0 1.5rem}
.tl li{display:grid;grid-template-columns:118px 1fr;gap:1.1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.tl li:first-child{border-top:0}
.tl-date{font:750 .83rem/1.4 var(--mono);color:var(--pounamu)}
.tl-date em{display:block;font-style:normal;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-top:.2rem}
.tl-done .tl-date em{color:var(--yes)}
.tl-next .tl-date em{color:var(--kowhai-lo)}
.tl-up .tl-date em{color:var(--faint)}
.tl h4{margin:0 0 .22rem;font-size:.99rem}
.tl p{margin:0;font-size:.9rem;color:var(--mute)}
@media(max-width:560px){.tl li{grid-template-columns:1fr;gap:.3rem}}

/* ---------- jump nav ------------------------------------------------------- */
.jump{display:flex;gap:.4rem;flex-wrap:wrap;padding:.95rem 0;margin-bottom:1.6rem;border-bottom:1px solid var(--line)}
.jump a{font-size:.83rem;font-weight:650;padding:.34rem .72rem;border-radius:var(--r-pill);background:var(--haze);color:var(--text);text-decoration:none;border:1px solid var(--line)}
.jump a:hover{background:var(--pounamu);color:#fff;border-color:var(--pounamu)}

/* ---------- breadcrumbs ---------------------------------------------------- */
.crumbs{font-size:.8rem;color:var(--mute);padding:.85rem 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--line-hi)}
.crumbs li:last-child::after{content:""}
.crumbs li{margin:0}

/* ---------- review header --------------------------------------------------- */
.rvh{display:grid;grid-template-columns:132px 1fr auto;gap:1.5rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow);margin-bottom:1.6rem}
.rvh-logo{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);height:92px;display:grid;place-items:center;padding:.7rem}
.rvh-logo img{max-height:70px;max-width:100%;width:auto;object-fit:contain}
.rvh h1{margin:0 0 .3rem;font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem)}
.rvh-score{text-align:center;min-width:112px}
.rvh-score b{display:block;font:800 2.5rem/1 var(--disp);color:var(--ink);letter-spacing:-.04em}
.rvh-score span{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:800}
@media(max-width:780px){.rvh{grid-template-columns:100px 1fr;gap:1rem}.rvh-score{grid-column:1/-1;display:flex;align-items:baseline;gap:.6rem;text-align:left}}

/* ---------- score bars -------------------------------------------------------- */
.scores{display:grid;gap:.75rem;margin-bottom:1.5rem}
.score-row{display:grid;grid-template-columns:172px 1fr 52px;gap:.9rem;align-items:center;font-size:.9rem}
.score-row .track{height:9px;background:var(--haze);border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.score-row .track i{display:block;height:100%;background:linear-gradient(90deg,var(--pounamu-3),var(--yes));border-radius:5px}
.score-row b{font-family:var(--mono);font-size:.88rem;text-align:right;color:var(--ink)}
@media(max-width:560px){.score-row{grid-template-columns:1fr 44px;grid-template-areas:"label label" "track val"}.score-row span:first-child{grid-area:label}.score-row .track{grid-area:track}.score-row b{grid-area:val}}

/* ---------- form ----------------------------------------------------------- */
.form{display:grid;gap:1rem;max-width:560px}
.field label{display:block;font-size:.83rem;font-weight:700;color:var(--ink);margin-bottom:.32rem}
.field input,.field select,.field textarea{width:100%;padding:.68rem .85rem;border:1px solid var(--line-hi);border-radius:var(--r-sm);font:400 .97rem var(--sans);background:var(--card);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pounamu-3);outline:2px solid rgba(26,101,83,.18);outline-offset:0}
.field small{display:block;color:var(--mute);font-size:.79rem;margin-top:.28rem}

/* ---------- footer ----------------------------------------------------------- */
/* The footer bookends the hero: same surface, gentler, with the kowhai
   hairline mirrored to the top edge so the page opens and closes on it. */
.foot{
  background:
    radial-gradient(60% 70% at 88% 108%, rgba(26,160,130,.16), transparent 68%),
    radial-gradient(70% 80% at -4%  -8%, rgba(232,150,12,.10), transparent 66%),
    linear-gradient(180deg, var(--hero-mid) 0%, var(--hero-btm) 100%);
  color:#B6CDC5;padding:3.2rem 0 1.6rem;margin-top:3.2rem;font-size:.9rem;
  position:relative;overflow:hidden;isolation:isolate}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--kowhai) 20%,var(--kowhai-hi) 50%,var(--kowhai) 80%,transparent)}
.foot > .wrap{position:relative;z-index:1}
.foot .brand-mark{
  background:
    radial-gradient(circle var(--chip-r) at 50% 24%, rgba(255,255,255,.2) 0 26%, transparent 60%),
    radial-gradient(circle at 50% 50%,
      #1C6E59 0 calc(var(--chip-r) - var(--chip-ring)),
      var(--kowhai) calc(var(--chip-r) - var(--chip-ring)) var(--chip-r),
      transparent var(--chip-r)),
    repeating-conic-gradient(from 22.5deg, var(--kowhai-hi) 0 11deg, #15564A 11deg 45deg);
  box-shadow:inset 0 0 0 1px rgba(255,174,36,.5), 0 1px 3px rgba(0,0,0,.35)}
.foot a{color:#DCEAE5;text-decoration:none}
.foot a:hover{color:var(--kowhai-hi);text-decoration:underline}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-about p{color:#9DB8AF;font-size:.875rem;max-width:42ch}
.foot .brand-word{color:#fff}
.foot .brand-tag{color:#7F9C93}
.foot-col h4{color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;margin-bottom:.85rem;font-weight:800}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:.48rem;font-size:.875rem}
.foot-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.foot-badge{border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);padding:.3rem .6rem;font-size:.68rem;font-weight:800;letter-spacing:.05em;color:#DCEAE5;text-transform:uppercase}
.foot-bot{padding-top:1.4rem;display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.8rem;color:#8FAAA1}
.badge18{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--kowhai);color:var(--kowhai-hi);font:800 .72rem/1 var(--disp);flex:0 0 auto}
.disc{font-size:.8rem;color:#8FAAA1;margin-top:1.2rem;line-height:1.6}

/* ---------- misc --------------------------------------------------------------- */
.updated{font-size:.8rem;color:var(--mute)}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem;margin-bottom:1.8rem}
.toc h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.7rem;color:var(--faint);font-weight:800}
.toc ol{margin:0;padding-left:1.2rem;font-size:.92rem;columns:2;column-gap:2rem}
@media(max-width:620px){.toc ol{columns:1}}
.toc li{margin-bottom:.34rem;break-inside:avoid}
.pill-row{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.3rem}
.paylist{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 0}
.pay{font-size:.68rem;font-weight:700;padding:.2rem .5rem;border-radius:var(--r-sm);background:var(--haze);color:var(--mute);border:1px solid var(--line)}
.verdict{border:1px solid var(--line);border-left:4px solid var(--kowhai);background:#FFFCF5;border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.35rem;margin-bottom:1.6rem}
.verdict h3{margin-top:0;font-size:1.05rem}
.verdict p:last-child{margin-bottom:0}
@media print{.hdr,.foot,.topstrip,.jump,.lb-cta{display:none}body{font-size:11pt}}

/* ==========================================================================
   The lede: hero + toplist as one flex column.

   The mobile fold is the whole point. Measured on a 393x852 viewport, the old
   layout put the leaderboard at 1,766px — eleven screens of scrolling before
   the reader saw a single casino. Splitting the hero into a headline block
   (.lede-a) and a supporting block (.lede-b) lets flex `order` drop the
   supporting copy BELOW the table on small screens, without duplicating any
   markup or touching the desktop design.

   The affiliate table sits directly under the hero on every page that has one,
   and the disclosures and jump nav sit directly under the table.

   Both:  a (headline) -> e (byline) -> c (toplist) -> b (lead + stats) -> d

   The supporting copy and the stat tiles sit BELOW the table at every width,
   so the H1, byline, toplist H2 and the first welcome offer clear the fold on
   a phone and on a laptop alike. The byline leads the table rather than
   trailing the stats, because the E-E-A-T signal is worth more there than the
   numbers are. The disclosure still follows the table.
   ========================================================================== */
.lede{display:flex;flex-direction:column}
.lede-a{order:1}   /* eyebrow + H1        */
.lede-e{order:2}   /* byline              */
.lede-c{order:3}   /* toplist H2 + table  */
.lede-b{order:4}   /* lead copy + stats   */
.lede-d{order:5}   /* disclosure + jump   */
/* Desktop now uses the same order the phone already did: the supporting copy
   and the stat tiles sit below the table, so the first welcome offer lands
   inside the first screen instead of ~90px under it. The byline still leads
   the table on both, which is where the E-E-A-T signal earns its keep. */

/* .lede-a ends on the same colour .lede-b begins on, so on desktop the two
   read as one continuous hero rather than two stacked bands. */
/* Pure vertical, so the bottom edge is uniformly #0A2F28 and meets .lede-b
   seamlessly on desktop. The visual interest comes from the radial glow. */
.lede-a{
  background:
    /* Both light sources must be fully transparent BEFORE the bottom edge.
       overflow:hidden clips them otherwise, and a clipped gradient reads as
       a seam where .lede-a meets .lede-b. */
    radial-gradient(85% 78% at 84% -14%, rgba(232,150,12,.26), transparent 66%),
    radial-gradient(62% 58% at -8%  14%, rgba(26,160,130,.22), transparent 68%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--hero-mid) 55%,
                            var(--hero-btm) 88%, var(--hero-btm) 100%);
  color:var(--pounamu-ink);padding:2.15rem 0 .9rem;position:relative;overflow:hidden;isolation:isolate}
.lede-b,.lede-e{background:var(--hero-btm);color:var(--pounamu-ink);position:relative}
.lede-b{padding:1.55rem 0 1.6rem;overflow:hidden;
  background:linear-gradient(180deg,#07271F,var(--hero-btm) 60%)}
/* A kowhai hairline on its top edge, mirroring the one under the byline, so
   the band reads as a deliberate bookend to the hero rather than a stray. */
.lede-b::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--kowhai) 20%,var(--kowhai-hi) 50%,var(--kowhai) 80%,transparent)}
.lede-e{padding:0 0 1.4rem;overflow:hidden}
/* A second, quieter light source so the foot of the hero is not dead flat. */
.lede-e::before{content:"";position:absolute;inset:-260% -30% -180% 30%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(12,90,120,.22),transparent 72%)}
.lede-e .wrap{position:relative;z-index:1}
.lede-e .byline{margin-top:0}
/* Grain: inline SVG turbulence at very low opacity — ~300 bytes, no request,
   and it is what stops a large flat gradient reading as plastic. */
.lede-a::before,.lede-b::after,.lede-e .grain{content:"";position:absolute;inset:0;
  pointer-events:none;z-index:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* A kowhai hairline where the hero meets the table: ties the top of the page
   to the CTA colour and makes the join crisp rather than soft. */
.lede-e::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--kowhai) 20%,var(--kowhai-hi) 50%,var(--kowhai) 80%,transparent)}
.lede-a .hero-in,.lede-b .hero-in,.lede-e .hero-in{position:relative;z-index:1;max-width:880px}
.lede-a .wrap{position:relative;z-index:1}
.lede-a h1{color:#fff;margin-bottom:.26em;letter-spacing:-.031em;
  text-wrap:balance;text-shadow:0 1px 24px rgba(0,0,0,.25)}
/* The bracketed month is the CTR differentiator — give it the accent colour
   so it reads as a stamp rather than as part of the sentence. */
.h1-date{color:var(--kowhai-hi);font-weight:700;white-space:nowrap}
.lede-a .eyebrow{color:var(--kowhai-hi);display:inline-flex;align-items:center;gap:.55rem;
  letter-spacing:.14em;font-size:.685rem}
.lede-a .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--kowhai),rgba(255,174,36,.25))}
.lede-a a{color:var(--kowhai-hi)}
.lede-e .byline{color:#A9C4BB;border-top-color:rgba(255,255,255,.11)}
.lede-e .byline a{color:var(--kowhai-hi)}
.lede-e .byline-av{background:linear-gradient(145deg,var(--jade),var(--pounamu));
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.lede-lead{color:#C3D9D1;font-size:1.105rem;line-height:1.66;max-width:64ch;margin:0}
.lede-b .hero-stats{margin-top:1.05rem}
.lede-c{padding:1.25rem 0 1.5rem;background:var(--paper)}
.lede-d{padding:1.35rem 0 1.5rem;background:var(--paper)}
.lede-h2{margin-bottom:.5rem}
.lede-c > .wrap{display:flex;flex-direction:column}
.lede-h2{order:1}
.lede-intro{order:2;color:var(--mute);max-width:76ch}
.lede-c .lb{order:3}
.lede-d .note{margin-bottom:1.3rem}
.lede-d .jump{margin:0;border-bottom:0;padding-top:0}
.lede-d .toc{margin-bottom:0}

@media(max-width:760px){
  /* ---- reclaim the fold, top to bottom ---------------------------------- */
  /* Top strip: two wrapped lines -> one. The disclosure stays, it just fits. */
  .topstrip{font-size:.66rem}
  .topstrip .wrap{padding-top:.32rem;padding-bottom:.32rem;line-height:1.4}
  .ts-lg{display:none}
  .ts-sm{display:inline}

  /* Header: tighter, and the tagline is decoration we can afford to lose. */
  .hdr-in{padding-top:.35rem;padding-bottom:.35rem;gap:.5rem}
  .brand-mark{--chip-r:12.6px;width:31px;height:31px;font-size:11px}
  .brand-word{font-size:1rem}
  .brand-tag{display:none}
  .nav a{padding:.38rem .5rem;font-size:.845rem}
  .nav .nav-cta{padding:.4rem .75rem}

  /* Eyebrow duplicates the byline underneath it. Drop it on small screens. */
  .lede-a .eyebrow{display:none}

  .lede-a{padding:1.35rem 0 .7rem}
  .lede-a h1{font-size:1.68rem;line-height:1.14;letter-spacing:-.022em;margin-bottom:.3em}
  .lede-e{padding:0 0 1rem}
  .lede-e .byline{margin-top:0;padding-top:.65rem;font-size:.76rem;gap:.35rem;line-height:1.45}
  .lede-e .byline-av{width:26px;height:26px;font-size:10px}

  .lede-c{padding:1.15rem 0 1.5rem}
  .lede-h2{font-size:1.28rem;margin-bottom:.35rem}
  /* The caption moves under the table on mobile — moved, not hidden — which
     is the last ~63px needed to bring the first CTA to the fold. */
  .lede-intro{order:4;font-size:.85rem;margin:.85rem 0 0}
  .lede-b{padding:1.8rem 0 2rem}
  .lede-lead{font-size:1rem}

  /* ---- leaderboard row: 454px -> ~300px --------------------------------- */
  /* Rank, logo and score share one line instead of three stacked bands. */
  .lb-row{grid-template-columns:32px 128px 1fr;
          grid-template-areas:"rank logo score" "brand brand brand" "cta cta cta";
          gap:.55rem .7rem;padding:.85rem .8rem;align-items:center}
  .lb-logo{height:48px;min-width:0;padding:.3rem .5rem}
  .lb-logo img{max-height:38px}
  .lb-score{grid-area:score;display:block;text-align:right}
  .lb-score .lb-bar{margin-top:.3rem}
  .lb-score-top{font-size:1.25rem}
  .lb-brand .lb-name{font-size:.98rem;margin-bottom:.15rem}
  .lb-sub{font-size:.79rem;margin-bottom:.3rem}
  /* The offer stays big on the phone — it is the reason the row exists. The
     height is paid for out of the chips and the supporting line, not out of
     the number itself. */
  .lb-offer{margin:.05rem 0 .4rem;padding:.44rem .6rem .48rem .62rem}
  .lb-offer-lbl{font-size:.565rem;margin-bottom:.2rem}
  .lb-offer-main{font-size:1.5rem;line-height:1.02}
  .lb-row--top .lb-offer-main{font-size:1.72rem}
  .lb-offer-add{font-size:.92rem;margin-top:.1rem}
  .lb-row--top .lb-offer-add{font-size:.96rem}
  .lb-offer-terms{font-size:.685rem;margin-top:.28rem}
  .lb-meta{margin-top:.35rem;gap:.25rem}
  .chip{font-size:.66rem;padding:.18rem .45rem}
  /* Badge sits beside the name instead of on its own line (-28px/row). */
  .lb-badge{display:inline;margin:0 0 0 .35rem}
  .lb-brand .lb-name{display:inline}
  .lb-brand .lb-badge + .lb-offer{margin-top:.34rem}
  .lb-row{padding:.75rem .8rem}
  .lb-cta{flex-direction:row;align-items:center;gap:.6rem;flex-wrap:wrap}
  .lb-cta .btn{flex:1 1 55%}
  .lb-review{flex:0 0 auto;text-align:right}
  .lb-terms{flex:1 1 100%;text-align:left;font-size:.62rem}
}

/* The narrowest common phones need a little more reclaimed for the first CTA
   to clear the fold. Everything here is size, not content. */
@media(max-width:430px){
  .lede-a{padding:.75rem 0 .35rem}
  .lede-a h1{font-size:1.56rem;line-height:1.13}
  /* The offer block is taller than the single bonus line it replaced, so the
     spend is taken back out of the hero's own padding rather than out of the
     offer. First CTA still clears a 700px fold on every affiliate page. */
  .lede-e{padding-bottom:.62rem}
  .lede-e .byline{padding-top:.62rem}
  .lede-c{padding:.5rem 0 1.4rem}
  .lede-h2{font-size:1.18rem;line-height:1.22}
  .lb-row{padding:.5rem .7rem;gap:.35rem .6rem}
  .lb-logo{height:44px}
  .lb-logo img{max-height:34px}
  .lb-cta .btn{padding:.5rem .8rem}
  .lb-sub{font-size:.76rem;line-height:1.38;margin-bottom:.12rem}
  .lb-offer{padding:.4rem .55rem .44rem .58rem;margin:.25rem 0 .25rem}
  .lb-offer-main{font-size:1.4rem}
  .lb-row--top .lb-offer-main{font-size:1.6rem}
  .lb-offer-add{font-size:.88rem}
  .lb-offer-terms{font-size:.665rem}
  .lb-meta{margin-top:.28rem;gap:.22rem}
  .chip{font-size:.63rem;padding:.15rem .4rem}
  .lb-terms{margin-top:.15rem}
  .topstrip{font-size:.63rem}
  .topstrip .wrap{padding-top:.3rem;padding-bottom:.3rem}
}

/* iPhone SE and the smallest Androids. A truncated disclosure is not a
   disclosure, so the strip gives up side padding and a little type size
   rather than ellipsing. */
@media(max-width:360px){
  .topstrip{font-size:.57rem}
  .topstrip .wrap{padding-left:8px;padding-right:8px}
  /* Breadcrumbs cost the inner pages ~35px of fold; halve it. */
  .crumbs{padding:.45rem 0 0;font-size:.74rem}
  .crumbs + .lede .lede-a{padding-top:.95rem}
}

/* ==========================================================================
   Full-site menu (hamburger).

   A <details>/<summary> disclosure, so it works with no JavaScript and is
   keyboard-accessible for free — <summary> is focusable and toggles on
   Enter/Space natively.

   On mobile it REPLACES the horizontally-scrolling nav strip, which cut links
   off after "Fast P…". That also collapses the mobile header from two rows to
   one, which hands ~39px back to the fold.
   ========================================================================== */
/* Mobile only. On desktop the same pages are nested in the nav dropdowns. */
.menu{display:none;position:static;margin-left:auto;flex:0 0 auto}
.menu > summary{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  padding:.5rem .85rem;border-radius:var(--r-pill);border:1px solid var(--line-hi);
  background:var(--card);color:var(--ink);font:700 .875rem/1 var(--sans);
  -webkit-tap-highlight-color:transparent;
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary:hover{background:var(--haze);border-color:var(--pounamu-3)}
.menu > summary:focus-visible{outline:3px solid var(--kowhai);outline-offset:2px}

/* Three bars that become an X when open — drawn in CSS, no image, no JS. */
.menu-bars{position:relative;width:16px;height:12px;flex:0 0 auto}
.menu-bars::before,.menu-bars::after,.menu-bars{background:none}
.menu-bars::before,.menu-bars::after{
  content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:var(--ink);transition:transform .18s var(--ease),top .18s var(--ease);
}
.menu-bars::before{top:0;box-shadow:0 5px 0 var(--ink)}
.menu-bars::after{top:10px}
.menu[open] > summary .menu-bars::before{top:5px;transform:rotate(45deg);box-shadow:none}
.menu[open] > summary .menu-bars::after{top:5px;transform:rotate(-45deg)}
.menu[open] > summary{background:var(--pounamu);color:#fff;border-color:var(--pounamu)}
.menu[open] > summary .menu-bars::before,
.menu[open] > summary .menu-bars::after{background:#fff}

.menu-panel{
  position:absolute;left:0;right:0;top:100%;z-index:120;
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 24px 48px -18px rgba(19,32,28,.28);
  max-height:calc(100vh - 100px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1.4rem 0 1.6rem;
}
.menu-grid{columns:200px 5;column-gap:1.7rem}
.menu-col{break-inside:avoid;margin:0 0 1.25rem}
.menu-col h2{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800;
  color:var(--faint);margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);
}
.menu-col ul{list-style:none;margin:0;padding:0}
.menu-col li{margin:0}
.menu-col a{
  display:block;padding:.34rem 0;font-size:.885rem;color:var(--text);
  text-decoration:none;line-height:1.35;
}
.menu-col a:hover{color:var(--link);text-decoration:underline}
.menu-col a[aria-current]{color:var(--pounamu);font-weight:700}
.menu-foot{
  margin:1.3rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--mute);
}

@media(max-width:1100px){
  /* The scrolling strip is what cut links off. Replace it outright. */
  .hdr-in{flex-wrap:nowrap;padding-top:.5rem;padding-bottom:.5rem}
  .nav{display:none}
  .menu{display:inline-flex;margin-left:auto}
  .menu-panel{max-height:calc(100vh - 88px)}
  .menu-grid{columns:160px 2;column-gap:1.2rem}
}
@media(max-width:760px){
  .hdr-in{padding-top:.4rem;padding-bottom:.4rem}
  .menu > summary{padding:.45rem .7rem;font-size:.84rem}
  .menu-lbl{display:none}          /* icon only once space is tight */
  .menu > summary{gap:0}
  .menu-panel{padding:1.1rem 0 1.3rem}
  .menu-col a{padding:.4rem 0}     /* a comfortable 44px-ish tap target */
}


/* ---- author portraits ---------------------------------------------------
   Photo avatars drop into the same circles the initials discs used, so the
   layout is unchanged whether an author has a portrait or not. */
img.av-photo{object-fit:cover;object-position:50% 18%;background:var(--pounamu-3);border:0;padding:0}
.byline img.av-photo{width:34px;height:34px;border-radius:50%}
.authorbox img.av-photo{width:62px;height:62px;border-radius:50%;flex:0 0 auto}
.lede-e .byline img.av-photo,.hero .byline img.av-photo{box-shadow:0 0 0 1px rgba(255,255,255,.22)}
@media(max-width:760px){.lede-e .byline img.av-photo,.byline img.av-photo{width:26px;height:26px}}

.author-card-head{display:flex;gap:1rem;align-items:center;margin-bottom:.9rem}
.author-card-img{width:76px;height:76px;border-radius:14px;object-fit:cover;object-position:50% 16%;
  flex:0 0 auto;box-shadow:0 0 0 1px var(--line),0 6px 18px -10px rgba(19,32,28,.4)}
.author-card-head h3{margin:0 0 .15rem}


/* ---- desktop CTA scale --------------------------------------------------
   The buttons were sized for the narrow mobile column and stayed that size on
   a 1400px screen, where the primary action read as incidental. Pointer-width
   screens get a substantially larger target; 941px is the breakpoint at which
   the leaderboard keeps its five-column row, so mobile is untouched. */
@media(min-width:941px){
  .btn{padding:1.05rem 2rem;font-size:1.15rem;gap:.5rem}
  .btn--sm{padding:.88rem 1.45rem;font-size:1.04rem}
  .btn--ghost{padding:.9rem 1.7rem;font-size:1.05rem}   /* secondary: a step down */

  /* Widen the leaderboard CTA column to carry the larger button. */
  .lb-head,.lb-row{grid-template-columns:44px 152px 1fr 96px 196px}
  .lb-cta{gap:.45rem}
  .lb-cta .btn{padding:1.02rem 1rem;font-size:1.1rem}
  .lb-terms{font-size:.7rem}
  .lb-review{font-size:.84rem}
}