/* ==========================================================================
   Casino Edge NZ — site.css
   One stylesheet. No JavaScript, no framework, no external font requests.

   The scheme is "ink and kowhai": a deep midnight ink for every surface, a
   kowhai gold reserved exclusively for the primary call to action, and an
   aqua used for links and verified states. Because gold appears nowhere else,
   the eye finds the CTA without the page shouting.

   Contrast: --text on --ink is 11.3:1, --mute is 6.4:1, --aqua links are
   9.1:1, and gold buttons carry near-black text at 9.8:1. Every pair below
   clears WCAG AA at its rendered size; --faint is used only for >=12px/700
   uppercase labels where 3:1 applies.

   Operator logos sit on a white plate by design: the artwork arrives from
   nineteen different brands with nineteen different backgrounds, and one
   consistent plate is the only way a leaderboard reads as a single object.
   ========================================================================== */

:root{
  /* ---- surfaces ---------------------------------------------------- */
  --ink:#0A0F1C;          /* page ground                                */
  --sur:#111829;          /* cards, table rows                          */
  --sur-2:#18203A;        /* raised / hover / thead                     */
  --sur-3:#1E2745;
  --line:#232C49;         /* hairlines — 1px, never 2                   */
  --line-hi:#33406A;

  /* ---- type -------------------------------------------------------- */
  --head:#F2F6FF;         /* headings                                   */
  --text:#BFC9DE;         /* body                                       */
  --mute:#8895B0;         /* secondary                                  */
  --faint:#6B789A;        /* uppercase micro-labels only                */

  /* ---- action ------------------------------------------------------ */
  --gold:#FFB020;
  --gold-hi:#FFC65C;
  --gold-lo:#D98F0B;
  --gold-ink:#1A1204;     /* text on gold                               */

  /* ---- accent & semantic ------------------------------------------- */
  --aqua:#3DDCC4;
  --aqua-lo:#1FA891;
  --aqua-bg:rgba(61,220,196,.10);
  --yes:#3FCF8E;  --yes-bg:rgba(63,207,142,.11);
  --no:#FF7A85;   --no-bg:rgba(255,122,133,.10);
  --info:#7DA9FF; --info-bg:rgba(125,169,255,.10);
  --warn:#FFC65C; --warn-bg:rgba(255,198,92,.10);

  /* ---- geometry ---------------------------------------------------- */
  --r:14px; --r-sm:8px; --r-xs:5px; --r-pill:999px;
  --wrap:1200px;
  --sh:0 1px 2px rgba(0,0,0,.35), 0 0 0 1px var(--line);
  --sh-lg:0 22px 48px -20px rgba(0,0,0,.75), 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;
  --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:90px;background:var(--ink)}
body{
  margin:0;background:var(--ink);color:var(--text);
  font:400 16.5px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--aqua);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2.5px;text-decoration-color:rgba(61,220,196,.45)}
a:hover{color:#6BEBD8;text-decoration-color:currentColor}
h1,h2,h3,h4,h5,h6{color:var(--head);margin:0 0 .5em;line-height:1.2;letter-spacing:-.02em;font-weight:750}
h1{font-size:clamp(2.05rem,1.35rem + 2.6vw,3.2rem);letter-spacing:-.032em;line-height:1.06}
h2{font-size:clamp(1.55rem,1.2rem + 1.3vw,2.2rem);letter-spacing:-.026em;margin-top:0}
h3{font-size:clamp(1.18rem,1.06rem + .5vw,1.42rem);letter-spacing:-.018em}
h4{font-size:1.06rem;letter-spacing:-.012em}
h5{font-size:.95rem;letter-spacing:0}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.3em}
li{margin-bottom:.5em}
li::marker{color:var(--aqua-lo)}
strong,b{font-weight:670;color:var(--head)}
em{color:#D6DEEF}
small{font-size:.855em}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
code{font:500 .9em var(--mono);background:var(--sur-2);padding:.12em .4em;border-radius:var(--r-xs);color:#D9E2F5}
abbr[title]{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}
::selection{background:rgba(255,176,32,.3);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap--narrow{max-width:840px}
.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:300;background:var(--gold);color:var(--gold-ink);padding:.75rem 1.2rem;font-weight:750;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- age + disclosure strip ---------------------------------- */
.topstrip{background:#060A14;border-bottom:1px solid var(--line);font-size:.775rem;color:var(--mute)}
.topstrip .wrap{display:flex;gap:.55rem 1.1rem;align-items:center;justify-content:center;
  padding-top:.5rem;padding-bottom:.5rem;flex-wrap:wrap;text-align:center}
.topstrip b{color:var(--head);font-weight:650}
.topstrip a{color:var(--gold);text-decoration-color:rgba(255,176,32,.45)}
.topstrip a:hover{color:var(--gold-hi)}
.ts-dot{color:var(--line-hi)}

/* ---------- header --------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:120;background:rgba(10,15,28,.9);backdrop-filter:saturate(1.5) blur(12px);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{width:40px;height:40px;border-radius:11px;flex:0 0 auto;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.02}
.brand-word{font:800 1.08rem/1 var(--sans);color:var(--head);letter-spacing:-.04em;white-space:nowrap}
.brand-word i{font-style:normal;color:var(--gold)}
.brand-tag{font-size:.615rem;text-transform:uppercase;letter-spacing:.11em;color:var(--faint);font-weight:750;margin-top:4px}
.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav-l{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav-l > li{margin:0;position:relative}
.nav-l > li > a{display:flex;align-items:center;gap:.28rem;padding:.5rem .58rem;
  border-radius:var(--r-sm);color:var(--text);text-decoration:none;font-size:.885rem;
  font-weight:560;white-space:nowrap}
.nav-l > li > a:hover{background:var(--sur-2);color:var(--head)}
.nav-l > li.is-here > a,.nav-l > li > a[aria-current]{color:var(--head);background:var(--sur-2);
  font-weight:700;box-shadow:inset 0 -2px 0 var(--gold)}
.nav-car{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .16s var(--ease)}
.nav-has:hover .nav-car,.nav-has:focus-within .nav-car{opacity:1;transform:translateY(1px) rotate(225deg)}

/* CSS-only panels: no JavaScript on this site, so :hover opens them for a mouse
   and :focus-within keeps them open while tabbing through their links. */
.nav-drop{position:absolute;top:100%;left:-.4rem;z-index:130;padding-top:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s}
.nav-has:hover > .nav-drop,.nav-has:focus-within > .nav-drop{opacity:1;visibility:visible;transform:none}
.nav-has--right .nav-drop{left:auto;right:-.4rem}
.nav-drop-in{display:flex;gap:1.6rem;background:var(--sur);border:1px solid var(--line-hi);
  border-radius:var(--r);box-shadow:var(--sh-lg);padding:1rem 1.15rem}
.nav-has--wide .nav-drop-in{gap:2rem}
.nav-col{min-width:186px}
.nav-has--cols .nav-col{min-width:0}
.nav-has--cols .nav-col ul{columns:3;column-gap:1.5rem;width:560px}
.nav-h{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);
  font-weight:800;margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.nav-col ul{list-style:none;margin:0;padding:0}
.nav-col li{margin:0;break-inside:avoid}
.nav-col a{display:block;padding:.34rem .1rem;color:var(--text);text-decoration:none;
  font-size:.845rem;line-height:1.35;white-space:nowrap}
.nav-col a:hover{color:var(--aqua)}
.nav-col a[aria-current]{color:var(--gold);font-weight:700}
.nav .nav-cta{background:var(--gold);color:var(--gold-ink);font-weight:750;padding:.5rem .9rem;
  border-radius:var(--r-pill);margin-left:.4rem;box-shadow:none}
.nav .nav-cta:hover{background:var(--gold-hi);color:var(--gold-ink)}
@media(max-width:1140px){
  .nav-l > li > a{padding:.5rem .46rem;font-size:.85rem}
  .nav .nav-cta{padding:.48rem .72rem;font-size:.84rem}
  .nav-has--cols .nav-col ul{columns:2;width:380px}
}
@media(max-width:960px){
  .nav{display:none}
  .mnav{display:block}
  .hdr-in{flex-wrap:nowrap;min-height:0;padding-top:.5rem;padding-bottom:.5rem}
}

/* ---------- hero ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding:.9rem 0 2.8rem;
  background:
    radial-gradient(1100px 420px at 78% -12%, rgba(61,220,196,.13), transparent 62%),
    radial-gradient(760px 380px at 8% 108%, rgba(255,176,32,.10), transparent 60%),
    linear-gradient(178deg,#0D1424 0%,#0A0F1C 100%);
  background-color:#0C1120;
  border-bottom:1px solid var(--line)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(900px 400px at 70% 0%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(900px 400px at 70% 0%,#000,transparent 70%)}
.hero > .wrap{position:relative;z-index:1}
.hero-in{max-width:940px}
.hero .crumbs{padding:0 0 .8rem}
.hero-meta{margin-top:1.9rem;border-top:1px solid rgba(255,255,255,.11)}
.hero-meta .byline{margin:0;padding:.95rem 0 0;border:0}
.hero-meta .byline a{color:#D7DFEF}
.hero-meta .byline a:hover{color:var(--aqua)}
.hero-meta .updated{color:#8E9BB4}
.hero h1{margin-bottom:.45em}
.hero .lede{font-size:clamp(1.03rem,.97rem + .35vw,1.19rem);color:#D3DCEE;max-width:70ch;margin-bottom:1.35rem}
.hero .lede strong{color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;color:var(--gold);margin-bottom:1rem;
  background:rgba(255,176,32,.09);border:1px solid rgba(255,176,32,.28);
  padding:.36rem .7rem;border-radius:var(--r-pill)}
.eyebrow--aqua{color:var(--aqua);background:var(--aqua-bg);border-color:rgba(61,220,196,.3)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 0}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  margin-top:2.2rem;background:#0C1222;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hero-stat{padding:1rem 1.05rem;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.hero-stat b{display:block;font-size:1.42rem;font-weight:800;color:var(--head);letter-spacing:-.03em;line-height:1.15}
.hero-stat span{display:block;font-size:.775rem;color:var(--mute);margin-top:.18rem}


/* ---------- hero offer -----------------------------------------------------
   The page's leading welcome offer, directly under the lede. On a desktop the
   operator table starts below the fold, so this is what makes the bonus the
   first thing a visitor actually sees.
   -------------------------------------------------------------------------- */
.hoffer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.15rem 1.5rem;
  align-items:center;margin:1.35rem 0 1.5rem;padding:1.15rem 1.35rem 1rem;
  background:linear-gradient(135deg,rgba(255,176,32,.13),rgba(255,176,32,.05) 62%),#121A2C;
  border:1.5px solid rgba(255,176,32,.5);border-radius:var(--r);
  box-shadow:0 18px 44px -22px rgba(255,176,32,.42),0 0 0 4px rgba(255,176,32,.05)}
.hoffer-logo{display:flex;align-items:center;justify-content:center;background:#fff;
  border-radius:var(--r-sm);padding:8px 11px;width:150px;height:56px}
.hoffer-logo img{max-height:100%;width:auto;object-fit:contain}
.hoffer-lbl{display:block;font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.13em;color:var(--gold);margin-bottom:.3rem}
.hoffer-bonus{margin:0 0 .35rem;color:#fff;font-weight:800;letter-spacing:-.028em;
  line-height:1.12;font-size:clamp(1.42rem,1.05rem + 1.35vw,2.05rem)}
.hoffer-meta{margin:0;font-size:.85rem;color:var(--mute)}
.hoffer-act{display:flex;flex-direction:column;align-items:stretch;gap:.45rem;min-width:172px}
.hoffer-btn{padding:.92rem 1.5rem;font-size:1.02rem;font-weight:800;white-space:nowrap}
.hoffer-rev{font-size:.79rem;text-align:center;color:var(--mute)}
.hoffer-terms{grid-column:1/-1;margin:.2rem 0 0;padding-top:.75rem;
  border-top:1px solid rgba(255,176,32,.18);font-size:.715rem;color:var(--faint);line-height:1.5}
.hoffer-terms a{color:var(--mute)}
@media(max-width:820px){
  .hoffer{grid-template-columns:1fr;gap:.7rem;margin:.8rem 0 0;padding:.9rem 1rem .85rem;
    text-align:center;justify-items:center}
  .hoffer-logo{width:132px;height:46px;padding:6px 9px}
  .hoffer-main{width:100%}
  .hoffer-bonus{font-size:clamp(1.28rem,1rem + 2.4vw,1.6rem);margin-bottom:.28rem}
  .hoffer-meta{font-size:.795rem}
  .hoffer-act{width:100%;min-width:0}
  .hoffer-btn{padding:.85rem .8rem;font-size:.98rem}
  .hoffer-terms{text-align:center;font-size:.665rem;padding-top:.6rem}
}

/* ---------- breadcrumbs & byline -------------------------------------- */
.crumbs{font-size:.8rem;color:var(--faint);padding:.85rem 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li{margin:0;display:flex;gap:.4rem;align-items:center}
.crumbs li+li::before{content:"/";color:var(--line-hi)}
.crumbs a{color:var(--mute);text-decoration:none}
.crumbs a:hover{color:var(--aqua)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .85rem;font-size:.83rem;
  color:var(--mute);margin:0 0 1.3rem;padding:.7rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline a{color:var(--text);text-decoration-color:var(--line-hi)}
.byline a:hover{color:var(--aqua)}
.byline .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,var(--aqua-lo),#14593F);
  color:#02140F;font:800 10.5px/26px var(--sans);text-align:center;letter-spacing:-.02em;flex:0 0 auto}
.byline .av--2{background:linear-gradient(145deg,var(--gold),var(--gold-lo));color:var(--gold-ink)}
.updated{color:var(--faint)}
.updated b{color:var(--text);font-weight:600}

/* ---------- sections --------------------------------------------------- */
.sec{padding:3rem 0}
.sec--tight{padding:2rem 0}
.sec--sur{background:#0C1120;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:76ch;margin-bottom:1.6rem}
.sec-head p{color:var(--mute);margin-bottom:0}
.prose{max-width:76ch}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.9rem}
.prose h4{margin-top:1.5rem;color:#DDE5F5}
.prose>*:first-child{margin-top:0}
.prose figure{margin:1.6rem 0}
.prose figcaption{font-size:.82rem;color:var(--faint);margin-top:.5rem}

/* ---------- jump / table of contents ----------------------------------- */
.toc{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;margin:0 0 2rem}
.toc h2,.toc p.toc-t{font-size:.73rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);
  font-weight:800;margin:0 0 .7rem}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.toc li{margin:0 0 .42em;break-inside:avoid;font-size:.9rem}
.toc a{color:var(--text);text-decoration:none;display:block;padding:.1rem 0}
.toc a:hover{color:var(--aqua)}
.toc a::before{content:counter(t) ".";counter-increment:t;color:var(--faint);
  font-variant-numeric:tabular-nums;margin-right:.45rem;font-size:.82em}
.toc ol{counter-reset:t}
@media(max-width:640px){.toc ol{columns:1}}

/* ---------- buttons ---------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--gold);color:var(--gold-ink);font:750 .945rem/1 var(--sans);
  padding:.82rem 1.35rem;border-radius:var(--r-pill);text-decoration:none;border:0;cursor:pointer;
  transition:background .16s var(--ease),transform .16s var(--ease);white-space:nowrap;text-align:center}
.btn:hover{background:var(--gold-hi);color:var(--gold-ink);transform:translateY(-1px)}
.btn:active{transform:none}
.btn--ghost{background:transparent;color:var(--head);border:1px solid var(--line-hi)}
.btn--ghost:hover{background:var(--sur-2);color:var(--head);border-color:var(--aqua-lo)}
.btn--aqua{background:var(--aqua);color:#04231D}
.btn--aqua:hover{background:#6BEBD8;color:#04231D}
.btn--sm{padding:.58rem 1rem;font-size:.86rem}
.btn--wide{width:100%}
.btn-note{display:block;font-size:.7rem;color:var(--faint);margin-top:.4rem;text-align:center;font-weight:500}

/* ---------- chips ------------------------------------------------------ */
.chip{display:inline-flex;align-items:center;gap:.32rem;font-size:.735rem;font-weight:700;
  padding:.24rem .58rem;border-radius:var(--r-pill);background:var(--sur-2);color:var(--text);
  border:1px solid var(--line);white-space:nowrap;line-height:1.5}
.chip--yes{background:var(--yes-bg);color:var(--yes);border-color:rgba(63,207,142,.3)}
.chip--no{background:var(--no-bg);color:var(--no);border-color:rgba(255,122,133,.3)}
.chip--gold{background:rgba(255,176,32,.1);color:var(--gold);border-color:rgba(255,176,32,.32)}
.chip--aqua{background:var(--aqua-bg);color:var(--aqua);border-color:rgba(61,220,196,.3)}
.chip--info{background:var(--info-bg);color:var(--info);border-color:rgba(125,169,255,.3)}
.pill-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.65rem 0}

/* ---------- leaderboard (the ranked operator list) --------------------- */
.lb{display:flex;flex-direction:column;gap:.85rem;margin:0 0 1.6rem;counter-reset:lbrank}
.lb-row{position:relative;background:var(--sur);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem;display:grid;gap:1.1rem;align-items:center;
  grid-template-columns:44px 176px minmax(0,1fr) 176px;transition:border-color .16s var(--ease)}
.lb-row:hover{border-color:var(--line-hi)}
.lb-row--top{border-color:rgba(255,176,32,.42);background:linear-gradient(180deg,rgba(255,176,32,.055),transparent 58%),var(--sur)}
.lb-rank{font:800 1.28rem/1 var(--sans);color:var(--faint);text-align:center;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.lb-row--top .lb-rank{color:var(--gold)}
.lb-brand{min-width:0}
.lb-logo{width:100%;height:74px;background:#fff;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:center;padding:9px 12px;border:1px solid var(--line)}
.lb-logo img{max-height:100%;width:auto;object-fit:contain}
.lb-name{font-size:.94rem;font-weight:700;color:var(--head);margin:.5rem 0 0;text-align:center}
.lb-name a{color:var(--head);text-decoration:none}
.lb-name a:hover{color:var(--aqua)}
.lb-mid{min-width:0}
.lb-badge{font-size:.685rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);
  margin-bottom:.3rem;display:block}
.lb-score-lbl{display:none}
.lb-offer{display:block;margin:.1rem 0 .5rem;padding:.5rem .7rem .55rem;border-radius:var(--r-sm);
  background:var(--sur-2);border:1px solid var(--line)}
.lb-row--top .lb-offer{background:rgba(255,176,32,.09);border-color:rgba(255,176,32,.34)}
.lb-offer-lbl{display:block;font-size:.6rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.13em;color:var(--faint);margin-bottom:.12rem}
.lb-row--top .lb-offer-lbl{color:var(--gold)}
.lb-bonus{font-size:clamp(1.14rem,1.02rem + .42vw,1.34rem);font-weight:800;color:#fff;
  letter-spacing:-.024em;line-height:1.24;margin:0}
.lb-sub{font-size:.855rem;color:var(--mute);margin:0 0 .5rem}
.lb-terms{font-size:.72rem;color:var(--faint);margin:.5rem 0 0;line-height:1.5}
.lb-cta{display:flex;flex-direction:column;gap:.45rem;align-items:stretch}
.lb-cta .btn{white-space:normal;line-height:1.25;padding-left:.7rem;padding-right:.7rem}
.lb-score{display:flex;align-items:baseline;justify-content:center;gap:.25rem;background:var(--sur-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.42rem;margin-bottom:.1rem}
.lb-score b{font-size:1.16rem;font-weight:800;color:var(--head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lb-score span{font-size:.72rem;color:var(--faint)}
.lb-row--top .lb-score{background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.3)}
.lb-row--top .lb-score b{color:var(--gold)}
.lb-review{font-size:.79rem;text-align:center}
.lb-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:.55rem}
.lb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--aqua-lo),var(--aqua))}
.lb-row--top .lb-bar i{background:linear-gradient(90deg,var(--gold-lo),var(--gold))}
@media(max-width:940px){
  .lb-row{grid-template-columns:38px 132px minmax(0,1fr);row-gap:.9rem}
  .lb-cta{grid-column:1/-1}
  .lb-logo{height:58px}
}
@media(max-width:560px){
  .lb-row{grid-template-columns:34px minmax(0,1fr);padding:1rem}
  .lb-mid{grid-column:1/-1}
  .lb-bonus{font-size:1rem}
}

/* ---------- tables ------------------------------------------------------ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:0 0 1.4rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--sur)}
table{border-collapse:collapse;width:100%;font-size:.895rem;min-width:620px}
caption{caption-side:top;text-align:left;font-size:.78rem;color:var(--faint);padding:.75rem 1rem 0}
thead th{background:var(--sur-2);color:var(--head);font-weight:700;font-size:.775rem;text-transform:uppercase;
  letter-spacing:.07em;text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td,tbody th{padding:.78rem .9rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
tbody th{font-weight:670;color:var(--head)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.022)}
td .chip{margin:0}
.t-logo{display:flex;align-items:center;gap:.6rem;min-width:150px}
.t-logo img{width:58px;height:30px;object-fit:contain;background:#fff;border-radius:var(--r-xs);padding:3px;flex:0 0 auto}
.t-logo b{font-weight:670;color:var(--head);font-size:.885rem}
.t-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.t-mini{font-size:.78rem;color:var(--faint);display:block;margin-top:.15rem}
table .btn{padding:.44rem .82rem;font-size:.8rem}

/* ---------- cards ------------------------------------------------------- */
.grid{display:grid;gap:1rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.card{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.3rem}
.card h3{font-size:1.06rem;margin-bottom:.45rem}
.card h4{margin:0 0 .4rem}
.card p:last-child{margin-bottom:0}
.card--link{text-decoration:none;display:block;color:var(--text);transition:border-color .16s var(--ease),transform .16s var(--ease)}
.card--link:hover{border-color:var(--aqua-lo);transform:translateY(-2px);color:var(--text)}
.card-ic{width:38px;height:38px;border-radius:10px;background:var(--aqua-bg);color:var(--aqua);
  display:grid;place-items:center;font:800 .92rem/1 var(--sans);margin-bottom:.8rem;border:1px solid rgba(61,220,196,.25)}
.card-ic--gold{background:rgba(255,176,32,.1);color:var(--gold);border-color:rgba(255,176,32,.25)}
.card-more{font-size:.85rem;font-weight:700;color:var(--aqua);margin-top:.75rem;display:inline-block}

/* ---------- key facts --------------------------------------------------- */
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  background:var(--sur);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 1.6rem}
.keyfact{padding:.9rem 1rem;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.keyfact span{display:block;font-size:.69rem;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:750}
.keyfact b{display:block;font-size:.98rem;color:var(--head);font-weight:680;margin-top:.22rem;letter-spacing:-.01em}

/* ---------- pros / cons -------------------------------------------------- */
.pc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1.3rem 0}
.pc-col{border:1px solid var(--line);border-radius:var(--r);padding:1.05rem 1.2rem;background:var(--sur)}
.pc-pro{border-color:rgba(63,207,142,.28);background:linear-gradient(180deg,rgba(63,207,142,.05),transparent 60%),var(--sur)}
.pc-con{border-color:rgba(255,122,133,.26);background:linear-gradient(180deg,rgba(255,122,133,.045),transparent 60%),var(--sur)}
.pc-col h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 .7rem;font-weight:800}
.pc-pro h4{color:var(--yes)}
.pc-con h4{color:var(--no)}
.pc-col ul{list-style:none;margin:0;padding:0}
.pc-col li{position:relative;padding-left:1.45rem;margin-bottom:.55rem;font-size:.9rem}
.pc-col li:last-child{margin-bottom:0}
.pc-pro li::before{content:"+";position:absolute;left:0;top:-.04em;color:var(--yes);font-weight:800;font-size:1.05rem}
.pc-con li::before{content:"–";position:absolute;left:0;top:-.04em;color:var(--no);font-weight:800;font-size:1.05rem}

/* ---------- verdict / notes ---------------------------------------------- */
.verdict{border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(255,176,32,.07),transparent 70%);
  padding:1rem 1.2rem;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:1.3rem 0}
.verdict h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;color:var(--gold);margin:0 0 .4rem;font-weight:800}
.verdict p:last-child{margin-bottom:0}
.note{border:1px solid var(--line);border-left-width:3px;border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:.95rem 1.15rem;margin:1.3rem 0;font-size:.925rem;background:var(--sur)}
.note p:last-child{margin-bottom:0}
.note b:first-child{display:block;margin-bottom:.25rem}
.note--ok{border-left-color:var(--yes);background:linear-gradient(90deg,var(--yes-bg),transparent 70%),var(--sur)}
.note--ok b:first-child{color:var(--yes)}
.note--warn{border-left-color:var(--warn);background:linear-gradient(90deg,var(--warn-bg),transparent 70%),var(--sur)}
.note--warn b:first-child{color:var(--warn)}
.note--info{border-left-color:var(--info);background:linear-gradient(90deg,var(--info-bg),transparent 70%),var(--sur)}
.note--info b:first-child{color:var(--info)}
.note--no{border-left-color:var(--no);background:linear-gradient(90deg,var(--no-bg),transparent 70%),var(--sur)}
.note--no b:first-child{color:var(--no)}

/* ---------- FAQ ----------------------------------------------------------- */
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--sur);margin:0 0 1.5rem}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:1rem 2.6rem 1rem 1.2rem;font-weight:670;color:var(--head);
  position:relative;list-style:none;font-size:1rem;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.2rem;top:1.35rem;width:9px;height:9px;
  border-right:2px solid var(--aqua);border-bottom:2px solid var(--aqua);transform:rotate(45deg);
  transition:transform .18s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.55rem}
.faq summary:hover{background:var(--sur-2)}
.faq-body{padding:0 1.2rem 1.15rem;font-size:.93rem;color:var(--text)}
.faq-body p:last-child,.faq-body ul:last-child{margin-bottom:0}

/* ---------- steps & timeline ------------------------------------------------ */
.steps{list-style:none;counter-reset:s;margin:1.3rem 0;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 1.15rem 3rem;margin:0;border-left:1px solid var(--line)}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-15px;top:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--sur-2);border:1px solid var(--line-hi);color:var(--aqua);
  font:800 .82rem/28px var(--sans);text-align:center}
.steps h4{margin:0 0 .3rem;font-size:1rem}
.steps p{margin:0;font-size:.92rem;color:var(--text)}

.tl{list-style:none;margin:1.3rem 0;padding:0}
.tl li{position:relative;padding:0 0 1.3rem 1.8rem;border-left:1px solid var(--line);margin:0}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-5px;top:.45rem;width:9px;height:9px;border-radius:50%;
  background:var(--line-hi);box-shadow:0 0 0 4px var(--ink)}
.tl-done::before{background:var(--yes)!important}
.tl-next::before{background:var(--gold)!important}
.tl-date{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:800}
.tl b{display:block;color:var(--head);margin:.1rem 0 .15rem}
.tl p{margin:0;font-size:.9rem}

/* ---------- payments ---------------------------------------------------------- */
.paylist{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.pay{font-size:.73rem;font-weight:650;padding:.24rem .55rem;border-radius:var(--r-xs);
  background:var(--sur-2);border:1px solid var(--line);color:var(--text);white-space:nowrap}
.pay--crypto{color:var(--gold);border-color:rgba(255,176,32,.25);background:rgba(255,176,32,.07)}

/* ---------- score bars --------------------------------------------------------- */
.scores{margin:1.3rem 0;display:grid;gap:.7rem}
.score-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(90px,2fr) 42px;gap:.8rem;align-items:center;font-size:.86rem}
.score-row span{color:var(--mute)}
.score-row i{display:block;height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.score-row i em{display:block;height:100%;background:linear-gradient(90deg,var(--aqua-lo),var(--aqua));border-radius:4px}
.score-row b{text-align:right;font-variant-numeric:tabular-nums;color:var(--head);font-weight:750}

/* ---------- review header -------------------------------------------------------- */
.rvh{display:grid;grid-template-columns:200px minmax(0,1fr) 190px;gap:1.5rem;align-items:center;
  background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;margin:0 0 1.8rem}
.rvh-logo{background:#fff;border-radius:var(--r-sm);height:96px;display:flex;align-items:center;justify-content:center;padding:12px}
.rvh-logo img{max-height:100%;width:auto;object-fit:contain}
.rvh-score{text-align:center;background:var(--sur-2);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.rvh-score b{display:block;font-size:2.1rem;font-weight:800;color:var(--gold);letter-spacing:-.04em;line-height:1}
.rvh-score span{display:block;font-size:.74rem;color:var(--faint);margin-top:.2rem}
.rvh-score .btn{margin-top:.75rem;width:100%;white-space:normal;line-height:1.25;padding-left:.7rem;padding-right:.7rem;font-size:.88rem}
@media(max-width:860px){.rvh{grid-template-columns:1fr;text-align:left}.rvh-logo{max-width:220px}}

/* ---------- author box ------------------------------------------------------------- */
.authorbox{display:grid;grid-template-columns:56px minmax(0,1fr);gap:1rem;background:var(--sur);
  border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;margin:2rem 0}
.authorbox .av-lg{width:56px;height:56px;border-radius:50%;background:linear-gradient(145deg,var(--aqua-lo),#12513A);
  color:#02140F;font:800 1.15rem/56px var(--sans);text-align:center;letter-spacing:-.03em}
.authorbox h4{margin:0 0 .12rem;font-size:1rem}
.authorbox .role{font-size:.78rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin:0 0 .5rem}
.authorbox p{font-size:.895rem;margin:0 0 .5rem}
.authorbox ul{margin:.5rem 0 0;padding-left:1.1rem;font-size:.83rem;color:var(--mute)}
.authorbox li{margin-bottom:.25rem}

/* ---------- CTA band ----------------------------------------------------------------- */
.ctaband{background:linear-gradient(135deg,#12192C,#0C1120);border:1px solid var(--line-hi);
  border-radius:var(--r);padding:2rem 2.1rem;margin:2.4rem 0;text-align:center}
.ctaband h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);margin-bottom:.5rem}
.ctaband p{color:var(--mute);max-width:62ch;margin:0 auto 1.2rem}
.ctaband .btn{margin:0 .3rem .5rem}

/* ---------- disclosure ------------------------------------------------------------------ */
.disc{font-size:.795rem;color:var(--faint);background:var(--sur);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.8rem 1rem;margin:0 0 1.6rem;line-height:1.6}
.disc b{color:var(--text)}
.disc a{color:var(--mute)}

/* ---------- forms ------------------------------------------------------------------------- */
.form{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.85rem;font-weight:670;color:var(--head);margin-bottom:.35rem}
.field .hint{display:block;font-size:.77rem;color:var(--faint);font-weight:400;margin-top:.15rem}
.field input,.field select,.field textarea{width:100%;background:var(--ink);border:1px solid var(--line-hi);
  border-radius:var(--r-sm);color:var(--text);font:400 .95rem/1.5 var(--sans);padding:.65rem .8rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--aqua-lo);outline:none;
  box-shadow:0 0 0 3px rgba(61,220,196,.16)}
.field textarea{min-height:140px;resize:vertical}

/* ---------- footer --------------------------------------------------------------------------- */
.foot{background:#070B15;border-top:1px solid var(--line);margin-top:3.5rem;padding:3rem 0 1.8rem;font-size:.895rem}
.foot-top{display:grid;grid-template-columns:minmax(230px,1.5fr) repeat(auto-fit,minmax(150px,1fr));gap:2rem;margin-bottom:2.2rem}
.foot-about p{font-size:.85rem;color:var(--mute);margin:.9rem 0 0;max-width:38ch}
.foot-col h3{font-size:.73rem;text-transform:uppercase;letter-spacing:.11em;color:var(--faint);font-weight:800;margin:0 0 .85rem}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:.48rem}
.foot-col a{color:var(--text);text-decoration:none;font-size:.875rem}
.foot-col a:hover{color:var(--aqua);text-decoration:underline}
.foot-badges{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;padding:1.5rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.foot-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.745rem;font-weight:700;color:var(--mute);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.35rem .75rem;background:var(--sur);text-decoration:none}
.foot-badge:hover{color:var(--aqua);border-color:var(--aqua-lo)}
.badge18{background:var(--no);color:#210306;border-color:var(--no);font-weight:800}
.foot-bot{padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;justify-content:space-between;
  font-size:.79rem;color:var(--faint)}
.foot-bot p{margin:0;max-width:74ch}
.foot-bot a{color:var(--mute)}


/* ---------- charts & big numbers ------------------------------------------- */
.chart{margin:1.5rem 0;background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem}
.chart figcaption{font-size:.95rem;font-weight:700;color:var(--head);margin:0 0 1rem;line-height:1.4}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.bars li{display:grid;grid-template-columns:minmax(96px,1.25fr) minmax(70px,3fr) auto;gap:.85rem;align-items:center;
  font-size:.86rem;margin:0}
.bars .bl{color:var(--text);line-height:1.35}
.bars .bt{display:block;height:16px;background:var(--sur-2);border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.bars .bt i{display:block;height:100%;background:linear-gradient(90deg,var(--aqua-lo),var(--aqua));border-radius:3px}
.bars li.hi .bt i{background:linear-gradient(90deg,var(--gold-lo),var(--gold))}
.bars li.lo .bt i{background:linear-gradient(90deg,#8A3A44,var(--no))}
.bars b{font-variant-numeric:tabular-nums;color:var(--head);font-weight:750;white-space:nowrap;font-size:.88rem}
.chart .src{font-size:.74rem;color:var(--faint);margin:1rem 0 0;line-height:1.5}
.chart .src a{color:var(--mute)}
@media(max-width:560px){.bars li{grid-template-columns:minmax(78px,1.4fr) minmax(40px,2fr) auto;gap:.5rem;font-size:.8rem}}

.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));background:var(--sur);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:1.5rem 0}
.bignum{padding:1.15rem 1.2rem;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.bignum b{display:block;font-size:1.72rem;font-weight:800;color:var(--gold);letter-spacing:-.035em;line-height:1.1}
.bignum span{display:block;font-size:.83rem;color:var(--text);margin-top:.35rem;line-height:1.45}
.bignum em{display:block;font-size:.71rem;color:var(--faint);font-style:normal;margin-top:.4rem}

.srclist{font-size:.87rem}
.srclist li{margin-bottom:.55rem}
.srclist .when{color:var(--faint);font-size:.82em}




/* ---------- author portraits ------------------------------------------------ */
.byline img.av,img.av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--sur-2) none;box-shadow:0 0 0 1.5px var(--aqua-lo);font-size:0}
.byline img.av--2,img.av--2{background:var(--sur-2) none;box-shadow:0 0 0 1.5px var(--gold)}
.authorbox img.av-lg,img.av-lg{width:56px;height:56px;border-radius:50%;object-fit:cover;
  flex:0 0 auto;background:var(--sur-2) none;box-shadow:0 0 0 2px var(--line-hi);font-size:0}
.card-ic img.card-av,img.card-av{width:46px;height:46px;border-radius:50%;object-fit:cover;
  display:block;background:var(--sur-2)}
.card-ic:has(img.card-av){background:none;border:0;width:46px;height:46px;padding:0}
.t-author{display:flex;align-items:center;gap:.6rem;min-width:150px}
.t-author img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--sur-2)}

.authorhead{display:flex;gap:1.15rem;align-items:center;margin:0 0 1.7rem;padding:1.1rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.authorhead img{width:92px;height:92px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--sur-2);box-shadow:0 0 0 2px var(--line-hi)}
.authorhead .role{font-size:.8rem;color:var(--gold);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;margin:0 0 .35rem}
.authorhead-meta{margin:0 0 .3rem;font-size:.86rem;color:var(--text)}
.authorhead-meta b{color:var(--head)}
.authorhead-beat{margin:0;font-size:.82rem;color:var(--mute);line-height:1.5}
@media(max-width:560px){
  .authorhead{gap:.9rem}
  .authorhead img{width:72px;height:72px}
  .authorhead-beat{display:none}
}

/* ---------- mobile menu ---------------------------------------------------
   A <details> hamburger holding every page on the site. Hidden above 820px,
   where the horizontal nav does the job. No JavaScript: <summary> is natively
   focusable, toggles on Enter/Space and reports its expanded state.
   -------------------------------------------------------------------------- */
.mnav{display:none;margin-left:auto;flex:0 0 auto}
.mnav-btn{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:.46rem .78rem .46rem .68rem;border:1px solid var(--line-hi);border-radius:var(--r-pill);
  background:var(--sur-2);color:var(--head);font:750 .84rem/1 var(--sans);
  -webkit-tap-highlight-color:transparent}
.mnav-btn::-webkit-details-marker{display:none}
.mnav-btn::marker{content:""}
.mnav-btn:hover{border-color:var(--aqua-lo)}
.mnav-ico{display:grid;gap:3.5px;width:16px}
.mnav-ico i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s var(--ease),opacity .14s var(--ease)}
.mnav[open] .mnav-ico i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.mnav[open] .mnav-ico i:nth-child(2){opacity:0}
.mnav[open] .mnav-ico i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mnav[open] .mnav-btn{border-color:var(--aqua-lo);background:var(--sur-3)}

.mnav-panel{position:absolute;left:0;right:0;top:100%;z-index:150;
  background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.85);
  max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:1rem 20px 1.15rem}
.mnav-cta{margin-bottom:1.1rem}
.mnav-in{display:grid;gap:1.25rem}
.mnav-h{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);
  font-weight:800;margin:0 0 .5rem;padding-bottom:.45rem;border-bottom:1px solid var(--line)}
.mnav-col ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:.05rem .9rem}
.mnav-col li{margin:0}
.mnav-col a{display:block;padding:.5rem .1rem;color:var(--text);text-decoration:none;
  font-size:.875rem;line-height:1.35}
.mnav-col a:hover{color:var(--aqua)}
.mnav-col a[aria-current]{color:var(--gold);font-weight:700}
.mnav-foot{margin:1.2rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.775rem;color:var(--mute)}
.mnav-foot b{color:var(--no)}
@media(max-width:400px){.mnav-col ul{grid-template-columns:1fr}}

/* ---------- mobile: get the operator table above the fold -------------------
   On a phone the hero (eyebrow, lede, buttons, stat band) plus the intro block
   pushed the ranked table two full screens down. Below, `main` becomes a flex
   column so the three blocks that matter — H1, byline, operator table — come
   first, and the disclosure, lede and contents move underneath. Nothing is
   removed from the document: the hero's supporting copy is restated by the
   "short answer" paragraph that now sits immediately under the table.

   Measured on a 402x874 viewport: H1 at 46px, byline 156px, H2 221px, first
   operator card fully visible (CTA included) by 605px.
   -------------------------------------------------------------------------- */
.ts-mini{display:none}
/* the byline sits in its own section so it can be reordered on a phone; these
   keep the desktop rhythm identical to when it shared the intro block */
/* The operator table follows the hero and its H2 directly on every page, with the
   explanatory line and any notes released underneath it. The disclosure, lede and
   contents sit in .ord-intro, which the page modules emit after this block. */
.ord-lb > .wrap{display:flex;flex-direction:column}
.ord-lb > .wrap > *{order:3;min-width:0}
.ord-lb > .wrap > h2{order:0}
.ord-lb > .wrap > .lb,
.ord-lb > .wrap > .rvh,
.ord-lb > .wrap > .tw{order:1;margin-top:.2rem}
.ord-lb > .wrap > .rank-note{order:2;margin:1.15rem 0 0}
.ord-intro{padding-top:1.3rem}

@media(max-width:820px){
  /* one-line disclosure strip */
  .topstrip{font-size:.705rem;line-height:1.5}
  .topstrip .wrap{gap:.35rem;padding-top:.3rem;padding-bottom:.3rem;flex-wrap:nowrap;
    white-space:nowrap;overflow:hidden}
  .ts-full{display:none}
  .ts-mini{display:inline}

  /* single-row header: brand plus the hamburger */
  .hdr-in{flex-wrap:nowrap;min-height:0;padding-top:.4rem;padding-bottom:.4rem;gap:.55rem}
  .brand-mark{width:30px;height:30px;border-radius:8px}
  .brand-tag{display:none}
  .brand-word{font-size:.92rem}
  .nav{display:none}
  .mnav{display:block}

  /* hero reduced to the H1 */
  .hero{padding:.9rem 0 .85rem}
  .hero::after{display:none}
  .hero .eyebrow,.hero .lede,.hero-cta,.hero-stats{display:none}
  .hero h1{font-size:clamp(1.42rem,1.05rem + 2vw,1.85rem);line-height:1.14;margin-bottom:0}

  /* byline tight under the H1, still inside the hero band */
  .hero .crumbs{display:none}
  .hero-meta{margin-top:.62rem;border-top-color:rgba(255,255,255,.09)}
  .hero-meta .byline{padding:.52rem 0 0}
  .byline{margin:0;padding:.45rem 0;font-size:.755rem;gap:.25rem .5rem;line-height:1.4}
  .byline .av,.byline img.av{width:24px;height:24px;line-height:24px;font-size:0}
  .byline .nextrev{display:none}

  /* table section spacing on a phone */
  .ord-lb{padding:.7rem 0 1.5rem}
  .ord-lb > .wrap > h2{font-size:1.2rem;margin-bottom:.4rem;letter-spacing:-.024em;line-height:1.24}
  .ord-lb > .wrap > .rank-note{font-size:.88rem}
  .ord-intro{padding-top:1.4rem}

  /* -------- operator card, phone layout ---------------------------------
     A single centred column: rank and badge pinned to the top corners, then
     logo, name, note, score bar, score row, the offer in its own panel, the
     CTA and the terms. The wrappers collapse with display:contents so every
     leaf can be ordered directly against the card.
     --------------------------------------------------------------------- */
  .lb{gap:.85rem}
  .lb-row{display:flex;flex-direction:column;align-items:center;text-align:center;
    position:relative;padding:2.62rem 1rem .9rem;gap:0;border-width:1.5px;
    border-color:var(--line-hi)}
  .lb-row--top{border-color:var(--gold);
    background:linear-gradient(180deg,rgba(255,176,32,.07),transparent 46%),var(--sur)}
  .lb-brand,.lb-mid,.lb-cta{display:contents}

  .lb-rank{position:absolute;top:.68rem;left:1rem;font-size:1.45rem;font-weight:800;
    color:var(--gold);letter-spacing:-.05em;line-height:1}
  .lb-row:not(.lb-row--top) .lb-rank{color:var(--mute)}
  .lb-badge{position:absolute;top:.76rem;right:1rem;margin:0;max-width:62%;
    background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.35);
    color:var(--gold);border-radius:var(--r-pill);padding:.3rem .62rem;
    font-size:.6rem;letter-spacing:.09em;line-height:1.3;text-align:center}

  .lb-logo{order:2;width:72%;max-width:218px;height:66px;padding:7px 11px;
    border-radius:var(--r-sm)}
  .lb-name{order:3;margin:.62rem 0 0;font-size:1.1rem;font-weight:750;letter-spacing:-.02em}
  .lb-sub{order:4;margin:.28rem 0 0;font-size:.82rem;line-height:1.45;color:var(--mute);
    max-width:31ch}
  .lb-bar{order:5;width:100%;height:6px;border-radius:4px;margin:.78rem 0 0}
  .lb-score,.lb-row--top .lb-score{order:6;width:100%;display:flex;align-items:baseline;
    gap:.1rem;background:none;border:0;padding:.5rem 0 0;margin:0}
  .lb-score-lbl{display:block;margin-right:auto;font-size:.925rem;color:var(--text);font-weight:600}
  .lb-score b,.lb-row--top .lb-score b{font-size:1.2rem;color:var(--head)}
  .lb-row--top .lb-score b{color:var(--gold)}
  .lb-score-max{font-size:.88rem;color:var(--mute)}

  .lb-offer{order:7;width:100%;margin:.72rem 0 0;text-align:center;
    background:rgba(255,176,32,.1);border:1.5px solid rgba(255,176,32,.38);
    border-radius:var(--r-sm);padding:.6rem .75rem .66rem}
  .lb-row:not(.lb-row--top) .lb-offer{background:var(--sur-2);border-color:var(--line-hi)}
  .lb-offer-lbl{margin-bottom:.22rem;color:var(--gold)}
  .lb-row:not(.lb-row--top) .lb-offer-lbl{color:var(--faint)}
  .lb-bonus{margin:0;font-size:1.16rem;line-height:1.28}

  .lb-cta .btn{order:8;width:100%;margin-top:.7rem;padding:.84rem .8rem;font-size:.98rem;
    font-weight:800}
  .lb-terms{order:9;margin:.65rem 0 0;font-size:.685rem;line-height:1.5;color:var(--faint);
    max-width:36ch}
  .lb-review{order:10;margin:.5rem 0 0;font-size:.76rem}
  .pill-row{display:none}

  /* review header card: logo and score side by side, detail underneath */
  .rvh{grid-template-columns:minmax(92px,1fr) minmax(118px,auto);gap:.75rem;padding:.95rem;
    grid-template-areas:"logo score" "info info";margin-bottom:0}
  .rvh > *:nth-child(1){grid-area:logo}
  .rvh > *:nth-child(2){grid-area:info}
  .rvh > *:nth-child(3){grid-area:score}
  .rvh-logo{height:64px;max-width:none;padding:7px 9px}
  .rvh-score{padding:.55rem}
  .rvh-score b{font-size:1.55rem}
  .rvh-score span{font-size:.68rem}
  .rvh-score .btn{margin-top:.5rem;font-size:.82rem;padding:.55rem .55rem}
  .rvh h2{font-size:1.18rem;margin:0 0 .3rem}

  /* the footer's fixed 230px first column plus a 150px auto-fit track could not
     fit a 360px phone, which pushed every page into horizontal scroll */
  .foot-top{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:1.6rem}
  .foot-about{grid-column:1/-1}
  .foot-about p{max-width:none}
  .foot{padding-top:2.2rem}

  /* CTA-band buttons carry long labels; nowrap pushed them off a 320px screen */
  .ctaband{padding:1.5rem 1.15rem}
  .ctaband .btn{white-space:normal;line-height:1.3;width:100%;margin:0 0 .55rem;max-width:100%}
  .hero-cta .btn,.prose .btn{white-space:normal;line-height:1.3;max-width:100%}
}
@media(max-width:560px){
  .foot-top{grid-template-columns:1fr 1fr;gap:1.4rem}
  .ord-lb > .wrap > h2{font-size:1.14rem}
  .lb-row{padding:2.5rem .85rem .85rem}
  .lb-logo{width:80%;height:60px}
  .lb-name{font-size:1.1rem}
  .lb-badge{font-size:.575rem;max-width:58%}
}

/* ---------- desktop CTAs -------------------------------------------------------------------------
   Above the mobile breakpoints every call to action steps up a size: bigger type,
   a taller hit area, and — where a button sits in a fixed grid column — a wider
   column to carry it. Each block starts above the max-width query that reshapes
   the same component, so the phone layouts below are untouched. */
@media(min-width:821px){
  .btn{font-size:1.12rem;padding:1.15rem 2.05rem;gap:.55rem}
  .btn--sm{padding:.8rem 1.35rem;font-size:.98rem}
  .btn-note{font-size:.78rem;margin-top:.55rem}

  /* hero pair */
  .hero-cta{gap:.9rem;margin-top:1.6rem}

  /* top welcome offer */
  .hoffer-act{min-width:220px;gap:.6rem}
  .hoffer-btn{padding:1.2rem 1.6rem;font-size:1.18rem}
  .hoffer-rev{font-size:.85rem}

  /* leaderboard row */
  .lb-cta .btn{font-size:1.06rem;padding:1.05rem .9rem}
  .lb-review{font-size:.85rem}

  /* review header */
  .rvh-score .btn{font-size:1.04rem;padding:1rem .8rem;margin-top:.9rem}

  /* comparison tables */
  table .btn{padding:.64rem 1.12rem;font-size:.93rem}

  /* closing band */
  .ctaband .btn{margin:0 .4rem .6rem}
}
/* the review header collapses to one column at 860 */
@media(min-width:861px){
  .rvh{grid-template-columns:200px minmax(0,1fr) 224px}
}
/* the leaderboard drops its CTA to a full-width row at 940 */
@media(min-width:941px){
  .lb-row{grid-template-columns:44px 176px minmax(0,1fr) 212px}
}
/* the header CTA only grows once the nav has room: 960-1140 stays compact */
@media(min-width:1141px){
  .nav .nav-cta{padding:.7rem 1.25rem;font-size:.98rem}
}

/* ---------- print ------------------------------------------------------------------------------ */
@media print{
  .hdr,.topstrip,.nav,.btn,.ctaband,.foot-badges{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}