/* Self-hosted fonts. Lighthouse measured CLS 0.109 on the homepage with the
   Google Fonts stylesheet: the swap from the fallback to Fraunces/Karla reflowed
   the hero. Same-origin + preloaded, the faces arrive before first paint, and the
   site now makes ZERO third-party requests — which is also what the privacy and
   cookie pages say. Variable fonts: one file per subset covers every weight. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600 800;font-stretch:100%;font-display:swap;
  src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600 800;font-stretch:100%;font-display:swap;
  src:url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ============================================================
   CASINO CSS CHASSIS — geo-neutral
   Extracted 2026-08-03 from the two best-looking builds in the
   portfolio: iberteam.es (burgundy/mustard, ES) and leitoescome.com
   (bottle-green/gold, PT). Those two are locked to Spanish and
   Portuguese national colours; everything structural in them is not.
   This file is that structure with the palette lifted out.

   THE CONTRACT
   ------------
   · Every colour, radius, font and shadow is a --ch-* ROLE token.
     A build recolours by overriding :root ONLY. If you are writing a
     hex code below the :root block, you are forking the chassis.
   · Class prefix is ch-. Rename per site only if you also rename in
     the verifier; the skill's default is to keep ch-.
   · Page background stays LIGHT (operator rule). --ch-nav-bg and
     --ch-foot-bg may go dark — the page body may not.
   · No language strings. Toggle labels come from data-more/data-less
     attributes so ES/PT/DE/DK builds need no CSS edit.

   Skills: css-skin-roulette (rolls the palette), hero-design,
   affiliate-list-placement, toplist-horizontal-table,
   mobile-toplist-card, mobile-nav, cta-button-copy, initials-avatar.
   ============================================================ */

:root{
  /* ---- surfaces (LIGHT — see contract) ---- */
  --ch-bg:#fbfaf6;              /* page */
  --ch-surface:#f2efe6;         /* hero wash, footer, sidebar */
  --ch-card:#ffffff;
  --ch-cream:#fdf8ea;           /* #1 pick / highlight row */

  /* ---- ink ---- */
  --ch-ink:#17201b;             /* body + headings on background */
  --ch-ink-soft:#2f3a33;        /* long-form paragraph ink */
  --ch-muted:#5a675f;           /* secondary text */

  /* ---- lines ---- */
  --ch-line:#e3e0d6;
  --ch-line-soft:#c3d8cb;       /* primary-tinted hairline */
  --ch-line-faint:#eeeade;

  /* ---- brand ---- */
  --ch-primary:#0F6B45;         /* brand: headings, links, rank badge */
  --ch-primary-dark:#0A4B30;
  --ch-primary-tint:#2E8B63;    /* hover / meta text */
  --ch-primary-bg:#eaf4ee;      /* soft brand fill */
  --ch-primary-bd:#c6ddcf;

  /* ---- accent (the "gold": rank-1, borders, stars, dividers) ---- */
  --ch-accent:#DFA523;
  --ch-accent-soft:#FCF2D6;
  --ch-accent-ink:#5d4200;      /* readable ink ON accent */

  /* ---- CTA gradient (kept separate: the CTA must not be the brand
         colour by default — two distinct signals beat one) ---- */
  --ch-cta-from:#D23A2E;
  --ch-cta-to:#9C1A18;
  --ch-cta-ink:#ffffff;
  --ch-on-primary:#ffffff;   /* text on a primary/accent fill */
  --ch-cta-glow:rgba(210,58,46,.42);

  /* ---- bonus pill (black-on-gold reads as money) ---- */
  --ch-bonus-from:#FBD64B;
  --ch-bonus-to:#D69E1F;
  --ch-bonus-bd:#c79626;
  --ch-bonus-ink:#1a1300;

  /* ---- nav + footer (may be dark; body may not) ---- */
  --ch-nav-bg:#ffffff;
  --ch-nav-ink:#2f3a33;
  --ch-nav-ink-hover:#0F6B45;
  --ch-foot-bg:#f2efe6;
  --ch-foot-ink:#4a564e;
  --ch-foot-head:#0F6B45;

  /* ---- logo chip: ONE colour for every row (operator rule).
         Pewter shows white AND dark operator logos legibly. ---- */
  /* rank medals (hard rule 5): #1 gold = --ch-accent, #2 silver, #3 bronze,
     rest brand green. Promoted to tokens so no rule below :root carries a hex. */
  --ch-silver:#9aa3ab;
  --ch-bronze:#b3782f;

  --ch-chip-from:#8f9a94;
  --ch-chip-to:#6f7a74;

  /* ---- semantic tints ---- */
  --ch-pros-bg:#eef7f1;
  --ch-cons-bg:#fdf2f1;

  /* ---- shape + type ---- */
  --ch-radius:12px;
  --ch-radius-lg:16px;
  --ch-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ch-sans:"Karla","Segoe UI",Helvetica,Arial,sans-serif;
  --ch-shadow:0 8px 24px rgba(20,20,20,.07);
  --ch-shadow-lg:0 12px 34px rgba(20,20,20,.16);
  --ch-wrap:1180px;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.ch{margin:0;font-family:var(--ch-sans);color:var(--ch-ink);
  background:var(--ch-bg);line-height:1.65;-webkit-font-smoothing:antialiased}
body.ch ::selection{background:var(--ch-accent);color:var(--ch-on-primary)}
.ch a{color:var(--ch-primary)}
.ch-wrap{max-width:var(--ch-wrap);margin:0 auto;padding:0 24px}
.ch h1,.ch h2,.ch h3,.ch h4{font-family:var(--ch-display);color:var(--ch-primary);
  line-height:1.18;font-weight:700}
.ch p,.ch li{color:var(--ch-ink-soft)}

/* ============================================================
   NAVBAR — sticky, dropdowns on hover/focus, off-canvas on mobile.
   Checkbox hack: no JS. (iberteam's panel beat leito's accordion on
   tap-target size, so the panel is the chassis default.)
   ============================================================ */
.ch-nav{position:sticky;top:0;z-index:1000;background:var(--ch-nav-bg);
  border-bottom:1px solid var(--ch-line-soft);box-shadow:0 2px 14px rgba(20,20,20,.05)}
.ch-nav .ch-wrap{display:flex;align-items:stretch;justify-content:space-between;
  min-height:72px;gap:14px}
.ch-brand{display:inline-flex;align-items:center;text-decoration:none}
.ch-brand img{height:40px;width:auto;display:block}
.ch-brand-text{font-family:var(--ch-display);font-weight:700;font-size:1.6rem;
  color:var(--ch-primary);letter-spacing:-.01em;line-height:1}
.ch-nav-links{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.ch-nav-links>li{display:flex;align-items:center}
.ch-nav-links a,.ch-dd-toggle{color:var(--ch-nav-ink);text-decoration:none;font-weight:600;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.ch-nav-links>li>a:hover,.ch-dd-toggle:hover{color:var(--ch-nav-ink-hover)}
.ch-nav-cta{background:var(--ch-primary);color:var(--ch-on-primary) !important;padding:10px 18px;
  border-radius:8px;letter-spacing:.06em}
.ch-nav-cta:hover{background:var(--ch-primary-dark)}
.ch-dd{position:relative;align-self:stretch;display:flex;align-items:center}
.ch-dd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  user-select:none;height:100%;background:none;border:0;font:inherit}
.ch-dd-caret{font-size:.7em;transition:transform .15s}
.ch-dd:hover .ch-dd-caret,.ch-dd:focus-within .ch-dd-caret{transform:rotate(180deg)}
.ch-dd-menu{position:absolute;top:100%;inset-inline-start:-12px;min-width:240px;background:var(--ch-card);
  border:1px solid var(--ch-line-soft);border-top:3px solid var(--ch-accent);
  border-radius:0 0 12px 12px;box-shadow:0 12px 30px rgba(20,20,20,.14);
  padding:8px;margin:0;list-style:none;display:none;z-index:1001}
.ch-dd:hover .ch-dd-menu,.ch-dd:focus-within .ch-dd-menu{display:block}
.ch-dd-menu li{display:block;margin:0}
.ch-dd-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ch-ink) !important;
  text-transform:none !important;letter-spacing:0 !important;font-weight:500;
  font-size:.92rem;white-space:nowrap}
.ch-dd-menu a:hover{background:var(--ch-surface);color:var(--ch-primary) !important}
.ch-burger,.ch-nav-close,.ch-nav-overlay,#ch-nav-toggle{display:none}
/* The documented mobile-panel markup puts the close button in an
   `<li class="ch-nav-close">`, and `.ch-nav-links>li{display:flex}` above is
   specificity (0,1,1) against this line's (0,1,0) — so the li WON and the
   mobile close "x" rendered in the DESKTOP navbar, left of the first menu
   item. Measured at 1440x900 on gyogynovenyek.net 2026-08-21; it affects
   every build using the markup in this skill (balkanbomba.com included).
   Matching the winning selector's specificity is the fix; the mobile block
   re-shows it with `display:flex`. */
.ch-nav-links>li.ch-nav-close{display:none}
.ch-burger{width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  align-self:center;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.ch-burger span{display:block;width:24px;height:2px;background:var(--ch-primary);border-radius:2px}

/* ============================================================
   HERO — centred; H1, lede, author chip, updated pill.
   Author byline + Last Updated are NON-NEGOTIABLE on money pages.
   ============================================================ */
.ch-hero{background:linear-gradient(180deg,var(--ch-surface) 0,var(--ch-bg) 100%);
  border-bottom:1px solid var(--ch-line-soft);padding:46px 0}
.ch-hero .ch-wrap{display:block}
.ch-hero-copy{max-width:820px;margin:0 auto;text-align:center}
.ch-hero h1{color:var(--ch-primary);font-size:clamp(2.1rem,4.2vw,3.4rem);
  margin:0 0 14px;letter-spacing:-.01em}
.ch-lede{font-family:var(--ch-sans);font-size:1.12rem;color:var(--ch-muted);
  margin:0 auto 20px;max-width:62ch}
.ch-byline{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ch-card);border:1px solid var(--ch-line);border-radius:999px;
  padding:7px 16px 7px 8px;color:var(--ch-muted);font-size:.9rem;text-align:start;
  box-shadow:var(--ch-shadow)}
.ch-byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.ch-byline a{color:var(--ch-primary);font-weight:700;text-decoration:none}
.ch-byline a:hover{text-decoration:underline}
.ch-upd{display:inline-block;margin-top:.6rem;font-size:.72rem;font-weight:700;
  letter-spacing:.02em;color:var(--ch-primary-dark);background:var(--ch-primary-bg);
  border:1px solid var(--ch-primary-bd);padding:.24rem .65rem;border-radius:999px}
.ch-crumb{font-size:.85rem;color:var(--ch-muted);margin:0 0 10px}
.ch-crumb a{color:var(--ch-primary);text-decoration:none}
.ch-poster{display:block;width:100%;height:auto;margin:0 0 22px;border-radius:14px;
  border:1px solid var(--ch-line);box-shadow:var(--ch-shadow)}

/* trust strip under the hero */
.ch-trust3{position:relative;z-index:5;margin:1rem auto 0;max-width:820px;background:var(--ch-card);
  border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);box-shadow:var(--ch-shadow-lg);
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:18px 10px}
.ch-trust3 .t3{display:flex;align-items:center;justify-content:center;gap:10px;
  text-align:start;padding:6px 8px;border-inline-end:1px solid var(--ch-line-faint)}
.ch-trust3 .t3:last-child{border-inline-end:0}
.ch-trust3 .t3-ic{flex:0 0 auto;color:var(--ch-primary);display:flex}
.ch-trust3 .t3-tx{font-family:var(--ch-display);font-weight:700;font-size:.92rem;
  color:var(--ch-ink);line-height:1.15}

/* ============================================================
   SECTIONS
   ============================================================ */
.ch-section{padding:42px 0}
.ch-section h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:0 0 8px}
.ch-lead{color:var(--ch-muted);max-width:75ch;margin:0 0 22px}
.ch-sectionhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.7rem;border-bottom:1px solid var(--ch-line);padding-bottom:.7rem;margin:1.6rem 0 1.1rem}
.ch-sectionhead h2{margin:0}

/* ============================================================
   TOPLIST — card list. The toplist is the FIRST content block on a
   money page; nothing goes above it (operator rule).
   ============================================================ */
.ch-toplist{display:flex;flex-direction:column;gap:14px;margin:1.1rem 0}
.ch-card{display:grid;grid-template-columns:44px 1fr 244px;align-items:center;gap:18px;
  background:var(--ch-card);border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);
  padding:18px 20px;box-shadow:var(--ch-shadow);transition:box-shadow .15s,border-color .15s,transform .15s}
.ch-card:hover{box-shadow:var(--ch-shadow-lg);transform:translateY(-2px)}
.ch-card.is-top{border-color:var(--ch-accent);background:var(--ch-cream);
  box-shadow:0 6px 22px rgba(0,0,0,.10)}
.ch-rank{width:34px;height:34px;border-radius:9px;background:var(--ch-surface);color:var(--ch-muted);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1rem;
  border:1px solid var(--ch-line)}
.ch-card.is-top .ch-rank{background:var(--ch-accent);color:var(--ch-accent-ink);
  border-color:var(--ch-accent)}
/* ONE chip colour for every row — never per-brand backgrounds */
.ch-chip{width:148px;height:74px;flex:0 0 auto;box-sizing:border-box;border-radius:10px;
  padding:9px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(160deg,var(--ch-chip-from) 0,var(--ch-chip-to) 100%);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.ch-chip img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.ch-chip-sm{width:90px;height:48px;padding:4px 7px;border-radius:8px}
.ch-cell-mid{display:flex;align-items:center;gap:12px;min-width:0}
.ch-cell-txt{min-width:0}
.ch-brand-name{font-family:var(--ch-display);font-weight:800;font-size:1.18rem;
  margin:0 0 .2rem;color:var(--ch-ink)}
.ch-feat{margin:0 0 .35rem;color:var(--ch-muted);font-size:.92rem}
.ch-descriptor{color:var(--ch-muted);font-size:.85rem;margin-top:2px;max-width:30ch}
.ch-bonus-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;color:var(--ch-muted);margin-bottom:.05rem}
.ch-bonus-val{display:block;font-family:var(--ch-display);font-size:1.7rem;font-weight:800;
  line-height:1.1;color:var(--ch-primary);letter-spacing:-.01em}
/* pill form of the bonus (black on gold — reads as money, distinct from the CTA) */
.ch-bonus{display:inline-block;font-weight:800;font-size:1rem;padding:10px 15px;border-radius:8px;
  background:linear-gradient(180deg,var(--ch-bonus-from) 0,var(--ch-bonus-to) 100%);
  color:var(--ch-bonus-ink);border:1px solid var(--ch-bonus-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.08)}
/* ---- per-card evidence copy (card-parity band: 45-70 words) ----------------
   Clamped so a parity-length card stays scannable. NOT display:none — the words
   remain in the DOM for crawlers and for the fingerprint's word count. */
.ch-cardcopy{margin:.35rem 0 0;font-size:.85rem;line-height:1.5;color:var(--ch-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  overflow:hidden}
.ch-rating{font-size:.86rem;color:var(--ch-muted);font-weight:600;margin:0;white-space:nowrap}
.ch-rating .star{color:var(--ch-accent)}
.ch-features{display:none}   /* mobile-only quick chips */

/* CTA — gradient + gloss sweep. Distinct from both brand and bonus. */
.ch-cta,.ch-cta:visited{position:relative;overflow:hidden;display:inline-block;text-decoration:none;
  background:linear-gradient(135deg,var(--ch-cta-from) 0,var(--ch-cta-to) 100%);
  color:var(--ch-cta-ink) !important;font-weight:800;letter-spacing:.04em;padding:13px 22px;
  border-radius:10px;white-space:nowrap;text-transform:uppercase;font-size:.82rem;text-align:center;
  transition:filter .15s,transform .15s,box-shadow .18s;
  box-shadow:0 4px 14px var(--ch-cta-glow),inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 7px rgba(0,0,0,.28)}
.ch-cta::after{content:"";position:absolute;top:0;inset-inline-start:-75%;width:50%;height:100%;
  pointer-events:none;transform:skewX(-20deg);transition:left .55s ease;
  background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.6) 50%,transparent 100%)}
.ch-cta:hover{filter:brightness(1.08);transform:translateY(-2px)}
.ch-cta:hover::after{inset-inline-start:130%}
.ch-cta-block{display:block;width:100%}
.ch-cta-note{display:block;text-align:center;font-size:.72rem;color:var(--ch-muted);margin-top:.4rem}
.ch-cta-secondary{display:block;text-align:center;margin-top:.45rem;font-size:.8rem;
  font-weight:700;color:var(--ch-muted);text-decoration:none}
.ch-cta-secondary:hover{color:var(--ch-ink)}

/* ---- #1 pick / champion card ---- */
.ch-pick{background:var(--ch-cream);border:2px solid var(--ch-accent);border-radius:18px;
  padding:22px 26px;margin:1.5rem auto 0;max-width:900px;display:grid;
  grid-template-columns:1fr 260px;gap:22px;align-items:center;box-shadow:var(--ch-shadow-lg)}
.ch-pick-tag{display:inline-block;background:var(--ch-accent);color:var(--ch-accent-ink);
  font-family:var(--ch-display);font-weight:800;font-size:.74rem;padding:.26rem .7rem;
  border-radius:999px;letter-spacing:.03em}
.ch-pick-body{display:flex;align-items:center;gap:14px;margin-top:.65rem}
.ch-pick-brand{font-family:var(--ch-display);font-weight:900;font-size:1.5rem;margin:0 0 .12rem;
  color:var(--ch-ink);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;letter-spacing:-.02em}
.ch-pick-bonus{display:block;font-family:var(--ch-display);font-weight:900;font-size:1.75rem;
  line-height:1.04;letter-spacing:-.02em;color:var(--ch-primary);margin:.2rem 0 .4rem}
.ch-pick-text{margin:0;color:var(--ch-ink-soft);font-size:.95rem;max-width:48ch;line-height:1.5}
.ch-pick-rate{font-family:var(--ch-display);font-weight:800;font-size:1rem;color:var(--ch-primary);
  background:var(--ch-card);border:1px solid var(--ch-line);border-radius:8px;padding:.12rem .55rem}

/* ============================================================
   HORIZONTAL TOPLIST TABLE (toplist-horizontal-table skill)
   Table on desktop, cards on mobile — same data, no overflow.
   ============================================================ */
.ch-table{width:100%;border-collapse:separate;border-spacing:0 12px}
.ch-table thead th{text-align:start;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ch-muted);padding:0 16px 4px;font-weight:700;font-family:var(--ch-sans)}
.ch-table tbody tr{background:var(--ch-card);box-shadow:var(--ch-shadow)}
.ch-table tbody td{padding:16px;vertical-align:middle;border-top:1px solid var(--ch-line);
  border-bottom:1px solid var(--ch-line)}
.ch-table tbody td:first-child{border-inline-start:1px solid var(--ch-line);
  border-top-left-radius:var(--ch-radius);border-bottom-left-radius:var(--ch-radius)}
.ch-table tbody td:last-child{border-inline-end:1px solid var(--ch-line);
  border-top-right-radius:var(--ch-radius);border-bottom-right-radius:var(--ch-radius)}
.ch-table tbody tr.is-top{background:var(--ch-accent-soft)}
.ch-table tbody tr.is-top td:first-child{border-inline-start:4px solid var(--ch-accent)}
.ch-td-cta{text-align:end;width:1%}

/* ============================================================
   BODY CONTENT
   ============================================================ */
.ch-content{background:var(--ch-card);border:1px solid var(--ch-line);border-radius:var(--ch-radius);
  padding:28px 30px;margin:0 0 26px;box-shadow:var(--ch-shadow)}
.ch-content h2{margin:30px 0 10px;font-size:1.6rem}
.ch-content h2:first-child{margin-top:0}
.ch-content h3{margin:20px 0 8px;font-size:1.2rem;color:var(--ch-primary-dark)}
.ch-content ul{padding-inline-start:20px}
.ch-content a{color:var(--ch-primary);font-weight:600}
.ch-proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
.ch-proscons>div{border:1px solid var(--ch-line);border-radius:10px;padding:14px 16px}
.ch-pros{background:var(--ch-pros-bg)}
.ch-cons{background:var(--ch-cons-bg)}
.ch-proscons h4{margin:0 0 6px;font-size:1.05rem}
.ch-note{background:var(--ch-card);border:1px solid var(--ch-line);
  border-inline-start:4px solid var(--ch-primary);border-radius:10px;padding:14px 16px;margin:.8rem 0}
.ch-facts{background:var(--ch-primary-bg);border:1px solid var(--ch-primary-bd);border-radius:8px;
  padding:.55rem .8rem;font-size:.88rem;color:var(--ch-primary-dark);margin:.6rem 0}

/* comparison table (NOT the toplist) */
.ch-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.1rem 0;
  border:1px solid var(--ch-line);border-radius:var(--ch-radius)}
.ch-cmp{width:100%;min-width:680px;border-collapse:collapse;margin:0;font-size:.95rem;
  background:var(--ch-card)}
.ch-cmp th,.ch-cmp td{border-bottom:1px solid var(--ch-line);padding:.7rem .8rem;text-align:start}
.ch-cmp thead th{background:var(--ch-primary);color:var(--ch-on-primary);font-weight:800;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.03em;font-family:var(--ch-sans)}
.ch-cmp tbody tr:nth-child(even){background:var(--ch-surface)}

/* FAQ */
.ch-faq details{border:1px solid var(--ch-line);border-radius:10px;margin:0 0 10px;
  background:var(--ch-card)}
.ch-faq summary{cursor:pointer;font-weight:700;color:var(--ch-primary);padding:14px 16px;
  list-style:none;font-family:var(--ch-display)}
.ch-faq summary::-webkit-details-marker{display:none}
.ch-faq summary::after{content:"+";float:right;font-weight:800;color:var(--ch-accent)}
.ch-faq details[open] summary::after{content:"\2013"}
.ch-faq-body{padding:0 16px 14px;color:var(--ch-ink-soft)}

/* reviews + operator screenshots */
.ch-review{background:var(--ch-card);border:1px solid var(--ch-line);
  border-radius:var(--ch-radius-lg);padding:20px 22px;margin:1rem 0}
.ch-review-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:.4rem}
.ch-review-head .ch-chip{width:168px;height:84px}
.ch-shot{margin:.7rem 0;border:1px solid var(--ch-line);border-radius:12px;overflow:hidden;
  background:var(--ch-card);display:block}
.ch-shot img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover;object-position:top;
  transition:transform .25s}
.ch-shot:hover img{transform:scale(1.03)}
.ch-shot figcaption{font-size:.78rem;color:var(--ch-muted);padding:.45rem .7rem;
  background:var(--ch-surface)}

/* authors */
.ch-authorcards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.2rem 0}
.ch-authorcard{display:flex;gap:14px;align-items:center;background:var(--ch-card);
  border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);padding:18px;
  text-decoration:none;color:inherit;box-shadow:var(--ch-shadow)}
.ch-authorcard img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.ch-author-hero{display:flex;gap:22px;align-items:center;background:var(--ch-card);
  border:1px solid var(--ch-line);border-radius:var(--ch-radius);padding:24px;margin:24px 0;
  box-shadow:var(--ch-shadow)}
.ch-author-hero img{width:124px;height:124px;border-radius:18px;object-fit:cover;flex:0 0 auto}
/* Name + role line for the author bio hero. The component shipped without
   typography for its own children, so every build styled them ad hoc (or, on
   editionslevistemboir.com 2026-08-13, skipped the hero entirely and left the
   portrait as a 34px byline chip). */
.ch-author-hero .ch-author-name{margin:0;font-family:var(--ch-display);
  font-size:1.5rem;line-height:1.2;color:var(--ch-ink)}
.ch-author-hero .ch-author-role{margin:.15rem 0 .55rem;color:var(--ch-muted);
  font-size:.92rem}
.ch-author-hero p:last-child{margin-bottom:0}
/* ---- %-width scoring bar (Layer-11 device: 3/3 competitors on bonus pages) ----
   Usage: <div class="ch-bar"><span style="width:78%"></span></div>
   The inline width is DATA (the score), not styling — colour comes from tokens. */
.ch-bar{position:relative;height:8px;border-radius:999px;background:var(--ch-line-faint);
  border:1px solid var(--ch-line);overflow:hidden;margin:.3rem 0 .1rem}
.ch-bar>span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ch-accent) 0,var(--ch-primary) 100%)}
.ch-barrow{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;
  font-size:.85rem;color:var(--ch-ink-soft);margin:.45rem 0}
.ch-barrow b{font-family:var(--ch-display);color:var(--ch-primary);white-space:nowrap}
.ch-barwrap{margin:1rem 0 1.2rem}
.ch-stats{display:flex;gap:26px;flex-wrap:wrap;margin:14px 0}
.ch-stats .n{font-size:1.6rem;font-weight:700;color:var(--ch-primary);font-family:var(--ch-display)}
.ch-stats .l{color:var(--ch-muted);font-size:.82rem}
.ch-tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ch-tags span{background:var(--ch-primary-bg);color:var(--ch-primary-dark);border-radius:999px;
  padding:4px 12px;font-size:.82rem;font-weight:600}
.initials-avatar{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;background:var(--ch-primary);color:var(--ch-on-primary);font-family:var(--ch-sans);
  font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px}
.initials-avatar.initials-brand{border-radius:8px;width:auto;min-width:84px;height:46px;
  padding:0 12px;color:var(--ch-accent);font-size:18px}

/* card grids: internal links, guides, payment methods */
.ch-linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;
  margin-top:8px}
.ch-linkgrid a{background:var(--ch-card);border:1px solid var(--ch-line);border-radius:10px;
  padding:12px 14px;text-decoration:none;color:var(--ch-primary);font-weight:600;display:block}
.ch-linkgrid a:hover{border-color:var(--ch-accent);background:var(--ch-surface)}
.ch-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;
  margin:1.5rem 0}
.ch-mediacard{display:block;border:1px solid var(--ch-line);border-radius:14px;overflow:hidden;
  background:var(--ch-card);text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.ch-mediacard:hover{transform:translateY(-3px);box-shadow:var(--ch-shadow-lg);
  border-color:var(--ch-primary)}
.ch-mediacard img{display:block;width:100%;height:auto}
.ch-mediacard-b{padding:14px 16px 16px}
.ch-mediacard-b h3{margin:0 0 .35rem;font-size:1.06rem}
.ch-mediacard-b p{margin:0 0 .55rem;font-size:.86rem;color:var(--ch-muted);line-height:1.45}

/* sticky right rail (desktop) — guides/related list */
.ch-aside{background:var(--ch-card);border:1px solid var(--ch-line);border-radius:14px;
  padding:4px 18px 12px;box-shadow:var(--ch-shadow);margin:1.1rem 0}
.ch-aside-h{font-family:var(--ch-display);font-weight:800;font-size:.98rem;color:var(--ch-ink);
  text-transform:uppercase;letter-spacing:.05em;padding:.8rem 0 .6rem;
  border-bottom:2px solid var(--ch-primary);margin-bottom:.2rem;display:flex;align-items:center;gap:.45rem}
.ch-aside-h::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--ch-accent)}
.ch-aside ul{list-style:none;margin:0;padding:0}
.ch-aside li{border-bottom:1px solid var(--ch-line-faint);padding:.62rem 0}
.ch-aside li:last-child{border-bottom:0}
.ch-aside a{display:flex;align-items:center;gap:.65rem;color:var(--ch-ink);text-decoration:none;
  font-weight:600;font-size:.92rem;line-height:1.32;transition:color .15s}
.ch-aside a:hover{color:var(--ch-primary)}
.ch-aside-thumb{width:92px;height:auto;border-radius:7px;flex:0 0 auto;
  border:1px solid var(--ch-line);display:block}

/* payment strip */
.ch-paybar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--ch-line)}
.ch-paybar-lbl{font-size:.78rem;font-weight:700;color:var(--ch-muted);text-transform:uppercase;
  letter-spacing:.04em}
.ch-pay{background:var(--ch-card);border:1px solid var(--ch-line);border-radius:6px;height:34px;
  width:54px;display:inline-flex;align-items:center;justify-content:center;padding:5px}
.ch-pay img{max-height:22px;max-width:46px;width:auto;height:auto;display:block}

/* ============================================================
   FOOTER
   ============================================================ */
.ch-foot{background:var(--ch-foot-bg);color:var(--ch-foot-ink);margin-top:30px;
  padding:34px 0 20px;border-top:4px solid var(--ch-accent)}
/* `.ch p,.ch li{color:var(--ch-ink-soft)}` (see the BASE section) targets the
   element directly, so it BEATS the colour .ch-foot sets by inheritance — every
   footer paragraph and every link-less footer li rendered in long-form body ink.
   On a dark footer that is 1.27:1: the affiliate disclosure and the
   responsible-gambling paragraph were invisible. Restoring inheritance lets
   .ch-foot give them --ch-foot-ink and .ch-rg give them its own muted tone.
   Latent on every build with a dark --ch-foot-bg; measured on
   editionslevistemboir.com 2026-08-13 (footer #181819, ink #2b2b36). */
.ch-foot p,.ch-foot li{color:inherit}
.ch-foot a{color:var(--ch-foot-ink);text-decoration:none}
.ch-foot a:hover{color:var(--ch-primary)}
.ch-foot-cols{display:grid;grid-template-columns:1.4fr .9fr 1.5fr;gap:26px;margin-bottom:22px}
/* The full eeat-pages trust set is 8+ links (hard rule 1 footer-links ALL of
   them). As one column that is a 256px ladder beside a half-empty middle
   column; flowing it in two keeps the footer compact. Opt-in, because a short
   column must not be split. */
.ch-foot-cols ul.ch-foot-2col{columns:2;column-gap:20px}
.ch-foot-cols ul.ch-foot-2col li{break-inside:avoid}
.ch-foot-cols h4{color:var(--ch-foot-head);margin:0 0 10px;font-size:1rem}
.ch-foot-cols ul{list-style:none;margin:0;padding:0;line-height:2}
/* The responsible-gambling band lives inside .ch-foot, and the header of this
   file states --ch-foot-bg MAY GO DARK. It used --ch-muted (#5d5d6e) and
   --ch-line (#e4e4e9), both light-SURFACE tokens: on a dark footer that is
   2.75:1 — a WCAG AA failure on the one paragraph that is a licensing
   requirement to be readable (helpline number + 18+ rule). Measured on
   editionslevistemboir.com 2026-08-13, footer #181819.
   Derived from --ch-foot-ink via color-mix instead of a new token, so it is
   correct for LIGHT and DARK footers alike and needs no per-skin override —
   a --ch-foot-muted default in :root would be wrong for exactly the skins
   that darken the footer without redefining it. First declaration is the
   fallback for engines without color-mix. */
.ch-rg{border-top:1px solid var(--ch-line);padding-top:16px;font-size:.82rem;color:var(--ch-muted);
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.ch-rg{color:color-mix(in srgb, var(--ch-foot-ink) 84%, var(--ch-foot-bg));
  border-top-color:color-mix(in srgb, var(--ch-foot-ink) 26%, transparent)}
.ch-rg a{color:var(--ch-primary);font-weight:600}
.ch-18{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  border:2px solid var(--ch-primary);color:var(--ch-primary);border-radius:50%;font-weight:800;
  font-size:.8rem;padding:0 6px}

/* ============================================================
   MOBILE (<=768px) — mobile-nav + mobile-toplist-card
   Verified at 390x844 per mobile-screenshot-verify.
   ============================================================ */
@media (max-width:768px){
  .ch-brand img{height:34px}
  .ch-burger{display:flex}
  .ch-nav-links{position:fixed;top:0;inset-inline-end:0;height:100vh;width:100%;background:var(--ch-card);
    flex-direction:column;align-items:flex-start;gap:4px;padding:74px 24px 24px;
    transform:translateX(100%);transition:transform .25s ease;z-index:1002;overflow-y:auto;
    box-shadow:-8px 0 24px rgba(0,0,0,.18);border-inline-start:1px solid var(--ch-line-soft)}
  .ch-nav-links>li{display:block;width:100%}
  /* PANEL INK, NOT BAND INK. The panel above repaints its background to
     --ch-card, so the link colour must leave --ch-nav-ink behind with it:
     --ch-nav-ink is chosen to read on --ch-nav-bg, and on a DARK masthead
     that is a light ink which then sits on a white panel at ~1.2:1.
     Measured 1.23:1 at 390x844 on the editorial-crimson preset (the only
     pool skin with a dark band) before this line existed. --ch-ink on
     --ch-card is already one of verify_chassis's gated pairs, so this is
     AA for every preset, light-masthead ones included. */
  .ch-nav-links>li>a{padding:13px 0;font-size:.95rem;width:100%;
    border-bottom:1px solid var(--ch-line);display:block;color:var(--ch-ink)}
  .ch-nav-links>li>a:hover{color:var(--ch-primary)}
  .ch-nav-cta{width:100%;text-align:center;border-bottom:0 !important;margin-top:10px}
  .ch-dd{display:block;width:100%;align-self:auto}
  .ch-dd-toggle{display:block;width:100%;padding:13px 0;border-bottom:1px solid var(--ch-line);
    color:var(--ch-primary);font-size:.8rem;height:auto;text-align:start}
  .ch-dd-caret{display:none}
  .ch-dd-menu{display:block !important;position:static;border:0;box-shadow:none;border-radius:0;
    padding:4px 0 8px 14px;min-width:0;background:transparent}
  .ch-dd-menu a{padding:9px 0;font-size:.92rem;color:var(--ch-muted) !important}
  .ch-nav-overlay{display:block;position:fixed;inset:0;background:rgba(15,15,15,.45);opacity:0;
    visibility:hidden;transition:opacity .25s;z-index:1001}
  .ch-nav-close{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;
    inset-inline-end:16px;width:44px;height:44px;font-size:30px;line-height:1;color:var(--ch-primary);
    background:transparent;border:0;cursor:pointer;z-index:1003}
  #ch-nav-toggle:checked ~ .ch-nav-links{transform:translateX(0)}
  #ch-nav-toggle:checked ~ .ch-nav-overlay{opacity:1;visibility:visible}

  /* hero: keep the first toplist card near the fold */
  .ch-hero{padding:12px 0}
  .ch-hero h1{font-size:1.35rem;margin-bottom:6px;line-height:1.22;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ch-byline{font-size:.8rem;padding:5px 12px 5px 5px}
  .ch-byline img{width:34px;height:34px}
  .ch-poster{margin-bottom:14px;border-radius:10px}
  .ch-trust3{grid-template-columns:1fr;gap:0}
  .ch-trust3 .t3{justify-content:flex-start;border-inline-end:0;
    border-bottom:1px solid var(--ch-line-faint);padding:11px 14px}
  .ch-trust3 .t3:last-child{border-bottom:0}

  .ch-section{padding:24px 0}
  .ch-proscons,.ch-authorcards,.ch-foot-cols{grid-template-columns:1fr}
  .ch-author-hero{flex-direction:column;text-align:center}
  .ch-pick{grid-template-columns:1fr;padding:18px}
  .ch-pick-bonus{font-size:1.5rem}
  /* .ch-pick-body is a flex ROW with no wrap; at 390px the CTA was pushed
     off the right edge of the card and clipped (measured on
     dewittetandenwinkel.nl /reviews/mystake/ at 390x844, 2026-08-19).
     The card stacks on mobile like every other block. */
  .ch-pick-body{flex-direction:column;align-items:stretch}
  .ch-pick-body .ch-cta{width:100%;text-align:center}

  /* toplist cards */
  .ch-card{grid-template-columns:40px 1fr;grid-template-areas:"rank mid" "cta cta";gap:12px;
    padding:14px 16px}
  .ch-card .ch-rank{grid-area:rank;align-self:start}
  .ch-card .ch-cell-mid{grid-area:mid}
  .ch-card .ch-cell-cta{grid-area:cta;margin-top:.5rem}
  .ch-chip{width:120px;height:62px;padding:7px 9px}
  .ch-review-head .ch-chip{width:140px;height:70px}
  .ch-bonus-val{font-size:1.4rem}
  .ch-bonus{display:block;width:100%;text-align:center;font-size:1.05rem;padding:10px;border-radius:9px}
  .ch-cta{display:block;width:100%;min-height:48px;line-height:24px;font-size:.9rem;border-radius:10px}
  .ch-descriptor{display:none}
  .ch-cardcopy{-webkit-line-clamp:4;line-clamp:4;font-size:.82rem}
  .ch-features{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:5px 0 3px}
  .ch-features span{background:var(--ch-surface);border:1px solid var(--ch-line-soft);
    border-radius:8px;padding:4px 8px;font-size:.7rem;font-weight:700;color:var(--ch-primary);
    white-space:nowrap}

  /* horizontal toplist table -> cards */
  .ch-table{border-spacing:0}
  .ch-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ch-table tbody tr{display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"rank logo" "name name" "bonus bonus" "metric metric" "cta cta";
    column-gap:12px;row-gap:5px;align-items:center;background:var(--ch-card);
    border:1.5px solid var(--ch-line);border-top:3px solid var(--ch-primary);
    border-radius:14px;padding:.55rem .7rem .7rem;margin-bottom:12px;box-shadow:var(--ch-shadow)}
  .ch-table tbody tr.is-top{border-top-color:var(--ch-accent);border-top-width:4px;
    background:var(--ch-accent-soft)}
  .ch-table tbody td{display:block;border:0 !important;padding:0}
  .ch-td-rank{grid-area:rank;align-self:start}
  .ch-td-logo{grid-area:logo;justify-self:center}
  .ch-td-name{grid-area:name;text-align:center}
  .ch-td-bonus{grid-area:bonus;justify-self:stretch;text-align:center}
  .ch-td-metric{grid-area:metric;justify-self:center}
  .ch-td-cta{grid-area:cta;width:auto;text-align:center}

  /* comparison table -> stacked label:value cards, never overflow */
  .ch-cmp-wrap{overflow:visible;border:0;border-radius:0}
  .ch-cmp{min-width:0;border:0;background:transparent;font-size:.9rem}
  .ch-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ch-cmp tr{display:block;background:var(--ch-card);border:1px solid var(--ch-line);
    border-radius:12px;margin:0 0 12px;padding:6px 12px}
  .ch-cmp td{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:0;
    border-bottom:1px solid var(--ch-line-faint);padding:.55rem .1rem;text-align:end}
  .ch-cmp tr td:last-child{border-bottom:0}
  .ch-cmp td::before{content:attr(data-label);font-weight:700;color:var(--ch-primary);
    text-align:start;flex:0 0 42%;text-transform:none}
  .ch-cmp td:empty::before,.ch-cmp td[data-label=""]::before{content:""}
  /* any other body table scrolls rather than breaking the layout */
  .ch main table:not(.ch-cmp){display:block;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch}

  .ch-review .ch-cta{display:block;width:100%}
}

/* ============================================================
   COLLAPSIBLE LEDE — language-neutral.
   Markup: <input class="ch-morechk" type="checkbox" id="more">
           <p class="ch-lede ch-lede-clamp">…</p>
           <label class="ch-more" for="more"
                  data-more="Ver más" data-less="Ver menos"></label>
   The label text comes from the ATTRIBUTES, so a DK/DE/PT build
   never edits this CSS. (leito hardcoded "Ver mais" — that is the
   line that made its stylesheet geo-locked.)
   ============================================================ */
.ch-morechk{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ch-more{display:none}
@media (max-width:768px){
  .ch-lede-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    line-clamp:3;overflow:hidden}
  .ch-morechk:checked ~ .ch-lede-clamp{-webkit-line-clamp:initial;line-clamp:initial;display:block}
  .ch-more{display:inline-flex;align-items:center;gap:.45rem;margin:.7rem auto 0;cursor:pointer;
    font-family:var(--ch-display);font-weight:700;font-size:.8rem;letter-spacing:.03em;
    color:var(--ch-primary);background:var(--ch-primary-bg);border:1px solid var(--ch-primary-bd);
    padding:.42rem 1rem;border-radius:999px;user-select:none;
    transition:background .18s,border-color .18s,color .18s}
  .ch-more::before{content:attr(data-more)}
  .ch-morechk:checked ~ .ch-more::before{content:attr(data-less)}
  .ch-more::after{content:"\25BE";font-size:.7rem;transition:transform .22s}
  .ch-morechk:checked ~ .ch-more::after{transform:rotate(180deg)}
}

/* ============================================================
   STICKY MOBILE CTA — bottom bar for the #1 operator.
   Measured lift on leitoescome; the single highest-value mobile
   component in either reference build.
   ============================================================ */
.ch-sticky{display:none}
@media (max-width:768px){
  body.ch{padding-bottom:86px}
  .ch-sticky{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:stretch;
    padding:.5rem .65rem calc(.5rem + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:2px solid var(--ch-primary);box-shadow:0 -6px 22px rgba(0,0,0,.18)}
  .ch-sticky-inner{display:flex;align-items:center;gap:.6rem;flex:1 1 auto;min-width:0;
    text-decoration:none}
  .ch-sticky-logo{flex:0 0 auto;width:48px;height:48px;border-radius:11px;display:flex;
    align-items:center;justify-content:center;overflow:hidden;
    background:linear-gradient(160deg,var(--ch-chip-from) 0,var(--ch-chip-to) 100%);
    border:1px solid rgba(255,255,255,.4)}
  .ch-sticky-logo img{max-width:42px;max-height:42px;width:auto;height:auto;object-fit:contain}
  .ch-sticky-txt{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0}
  .ch-sticky-rank{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em;
    color:var(--ch-accent-ink);line-height:1.2;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .ch-sticky-brand{font-size:.96rem;font-weight:800;color:var(--ch-ink);line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ch-sticky-bonus{font-family:var(--ch-display);font-size:.84rem;font-weight:700;
    color:var(--ch-primary);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ch-sticky-btn{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;
    margin-inline-start:.5rem;padding:.82rem 1.05rem;border-radius:12px;white-space:nowrap;
    background:linear-gradient(135deg,var(--ch-cta-from) 0,var(--ch-cta-to) 100%);
    /* !important: `.ch a{color:var(--ch-primary)}` is (0,1,1) and out-specifies
       `.ch-sticky-btn` (0,1,0), so the sticky CTA rendered dark green on the
       orange gradient — unreadable. `.ch-cta` already guards this the same way.
       Found on mastermowingllc.com 2026-08-07. */
    color:var(--ch-cta-ink) !important;font-weight:800;font-size:.94rem;text-decoration:none;
    box-shadow:0 4px 16px var(--ch-cta-glow),inset 0 1px 0 rgba(255,255,255,.25)}
  .ch-sticky-close{position:absolute;top:-12px;inset-inline-end:9px;width:25px;height:25px;border-radius:50%;
    border:1px solid var(--ch-line);background:var(--ch-card);color:var(--ch-muted);font-size:1rem;
    line-height:.9;box-shadow:0 2px 7px rgba(0,0,0,.18);cursor:pointer;padding:0}
}

@media (prefers-reduced-motion:reduce){
  .ch-cta,.ch-card,.ch-mediacard,.ch-sticky-btn{transition:none;animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   deepproject.eu — site layer. Tokens only below :root, no hex,
   so verify_chassis.py stays green (its contract, not a fluke).
   ============================================================ */

/* HARD RULE 1 — the date pill sits UNDER the byline, never beside it.
   The chassis makes both inline-level, so in a centred hero they share a
   line whenever there is room: correct at one viewport, broken at a wider
   one. Forced to its own block row. */
.ch-hero-copy .ch-upd{display:block;width:fit-content;margin-inline:auto}

/* HARD RULE 2 — hero backdrop behind ALL hero text, per money page.
   The image comes from --hero-img so one rule serves every page; the
   focal band is tuned per page with --hero-pos (never `center top`,
   which shows only the sky band on a wide/short hero). */
.ch-hero.has-backdrop{position:relative;isolation:isolate;overflow:hidden}
.ch-hero.has-backdrop::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:var(--hero-pos,center 58%);
}
/* Legibility wash — greyscale rgba only, so the gate stays green. */
.ch-hero.has-backdrop::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.90));
}
.ch-hero.has-backdrop .ch-hero-copy{position:relative}

/* Payout-speed cue — the head term is "che pagano subito", so withdrawal
   speed is the site's promise and gets its own signal. Text, not a pill:
   it must never read as a second CTA. */
.ch-speed{
  display:inline-flex;align-items:center;gap:.34em;
  font-weight:800;color:var(--ch-primary);
  letter-spacing:.005em;
}
.ch-speed svg{width:1em;height:1em;fill:var(--ch-accent);flex:none}
.ch-card .ch-speed{font-size:.95rem}

/* HARD RULE 6 — bonus is LARGE, BOLD, brand-coloured TEXT. Scoped as
   `.ch p.ch-bonus-val` because `.ch p{color:var(--ch-ink-soft)}` outranks a
   bare class on a <p>, which silently renders the bonus in body-text colour
   while looking deliberate. Verified with getComputedStyle, not by reading
   the stylesheet. */
.ch p.ch-bonus-val,
.ch-card p.ch-bonus-val{
  color:var(--ch-accent-ink);
  font-size:1.72rem;line-height:1.12;font-weight:800;
  margin:.1rem 0 .35rem;
  background:none;border:0;box-shadow:none;padding:0;
}

/* HARD RULE 9 — tables never scroll the page body sideways. */
.ch-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Rank glow (rule 5) is a shadow in the border colour, never a blur over text. */
.ch-card[data-rank]{border-width:1.5px}
.ch-card[data-rank="1"]{border-color:var(--ch-accent);
  box-shadow:0 0 0 1px var(--ch-accent),0 8px 26px -10px var(--ch-accent)}
.ch-card[data-rank="2"]{border-color:var(--ch-silver);
  box-shadow:0 0 0 1px var(--ch-silver),0 8px 26px -10px var(--ch-silver)}
.ch-card[data-rank="3"]{border-color:var(--ch-bronze);
  box-shadow:0 0 0 1px var(--ch-bronze),0 8px 26px -10px var(--ch-bronze)}
/* every other rank: brand green, same glow language */
.ch-card[data-rank]:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]){
  border-color:var(--ch-primary-bd);
  box-shadow:0 0 0 1px var(--ch-primary-bd),0 8px 26px -12px var(--ch-primary-tint)}

/* ------------------------------------------------------------------
   Mobile toplist card (hard rule 7 — alignment discipline).
   The chassis collapses .ch-card to "rank mid" / "cta cta" at 768px but
   leaves .ch-cell-mid a horizontal flex row, so at 390px the chip eats
   the width and the text column is squeezed to ~180px: the brand name
   wraps mid-word, the payout line breaks over three rows and the card
   reads as broken. Caught by screenshot, not by reading the CSS.
   Stack the chip above the text and let the text span the card.
   ------------------------------------------------------------------ */
@media (max-width:768px){
  .ch-card .ch-cell-mid{flex-direction:column;align-items:flex-start;gap:10px}
  .ch-card .ch-cell-txt{width:100%;min-width:0}
  .ch-card .ch-brand-name{font-size:1.3rem;margin-bottom:.15rem}
  .ch-card .ch-speed{white-space:nowrap;font-size:1rem}
  .ch-card .ch-descriptor{max-width:none}
  /* rank badge and chip share the top row, so the card opens with the
     brand's mark rather than dead space */
  .ch-card{grid-template-areas:"rank mid" "cta cta";align-items:start}
  .ch-card .ch-rank{margin-top:2px}
}

/* Hard rule 4 — the CTA must be the single most attractive element in the
   card. The chassis computes it at weight 600; against a 27px/800 bonus
   figure that reads secondary. Raised, with a slightly wider tracking. */
.ch-card .ch-cta,.ch-pick .ch-cta{font-weight:800;letter-spacing:.02em}

/* ------------------------------------------------------------------
   Payout-speed data visual + payment strip (stage-08 rules 4 and 5).
   Semi-interactable: the two sort buttons reorder the bars with a few
   lines of vanilla JS. Every number in the visual also appears in the
   page copy, per the data-visual rule. Tokens only — no hex below :root.
   ------------------------------------------------------------------ */
.ch-chart{margin:1rem 0 .4rem;background:var(--ch-card);border:1px solid var(--ch-line);
  border-radius:var(--ch-radius-lg);padding:18px 20px}
.ch-chart-ctl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ch-sortbtn{font-family:var(--ch-sans);font-size:.82rem;font-weight:700;cursor:pointer;
  padding:7px 13px;border-radius:999px;border:1px solid var(--ch-primary-bd);
  background:var(--ch-primary-bg);color:var(--ch-primary);transition:background .15s,color .15s}
.ch-sortbtn:hover{background:var(--ch-primary);color:var(--ch-on-primary)}
.ch-sortbtn.is-on{background:var(--ch-primary);color:var(--ch-on-primary);
  border-color:var(--ch-primary)}
.ch-bars{display:flex;flex-direction:column;gap:9px}
.ch-barrow{display:grid;grid-template-columns:150px 1fr 76px;align-items:center;gap:12px}
.ch-bar-name{font-weight:700;font-size:.9rem;color:var(--ch-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-barwrap{display:block;background:var(--ch-surface);border-radius:999px;height:16px;
  overflow:hidden;border:1px solid var(--ch-line-faint)}
.ch-bar{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ch-primary) 0,var(--ch-primary-tint) 100%);
  transition:width .25s}
.ch-barrow[data-h="3"] .ch-bar{background:linear-gradient(90deg,var(--ch-accent) 0,var(--ch-primary-tint) 100%)}
.ch-bar-val{font-weight:800;font-size:.84rem;color:var(--ch-accent-ink);text-align:right}
.ch-chart-note{font-size:.8rem;color:var(--ch-muted);margin:.8rem 0 0}

/* Payment-method LIST. Deliberately NOT .ch-pay: the chassis already uses that
   class for a single 54x34 payment badge (inline-flex, fixed width, centred), so
   reusing it made every list container compute to width:54px with its chips
   spilling out of the box — measured at both 390px and 1440px. */
.ch-paylist{list-style:none;margin:1rem 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ch-paylist li{display:flex;align-items:center;gap:8px;background:var(--ch-card);
  border:1px solid var(--ch-line);border-radius:8px;padding:8px 12px;font-size:.84rem;
  font-weight:600;color:var(--ch-ink-soft)}
.ch-paylist img{display:block;height:22px;width:auto;flex:0 0 auto}

@media (max-width:768px){
  .ch-barrow{grid-template-columns:112px 1fr 62px;gap:8px}
  .ch-bar-name{font-size:.8rem}
  .ch-bar-val{font-size:.76rem}
  .ch-chart{padding:14px 12px}
  .ch-paylist li{font-size:.78rem;padding:6px 9px}
}

/* Guide-page thumbnail (stage-07 hard rule 2: guides get a brand-identity
   thumbnail, money pages get the hero backdrop). Sized so it never pushes the
   H1 below the fold at 390px. */
.ch-guide-thumb{display:block;margin:0 auto 1.1rem;max-width:min(420px,100%);height:auto;
  border-radius:var(--ch-radius-lg);border:1px solid var(--ch-line);
  box-shadow:0 6px 20px -12px var(--ch-cta-glow)}
@media (max-width:768px){.ch-guide-thumb{max-width:260px;margin-bottom:.8rem}}

/* Review-page rating block. Bars double as the data visual the review-page
   fingerprint requires (bar fills on 2 of 3 competitors). */
.ch-ratinghead{display:flex;align-items:baseline;gap:.4rem;margin:0 0 1rem;
  font-family:var(--ch-display);font-weight:800;color:var(--ch-muted);font-size:.95rem}
.ch-ratingbig{font-size:2.5rem;line-height:1;color:var(--ch-primary)}
.ch-verdict{background:var(--ch-cream);border:1px solid var(--ch-accent);
  border-radius:var(--ch-radius-lg);padding:16px 20px;margin:1rem 0}
.ch-verdict h2,.ch-verdict h3{margin-top:0}

/* Authors hub cards (/autori/). Tokens only — verify_chassis.py fails on any hex
   or non-greyscale rgba below :root. */
.ch-authorgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:1rem 0 .4rem}
.ch-authorcard{display:flex;align-items:center;gap:14px;background:var(--ch-card);
  border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);padding:14px 16px}
.ch-authorcard img{flex:0 0 auto;width:72px;height:72px;border-radius:999px;
  border:2px solid var(--ch-accent);object-fit:cover}
.ch-authorcard p{margin:0}
.ch-authorcard .ch-brand-name{font-size:1.02rem}
.ch-authorcard .ch-speed{color:var(--ch-accent-ink);font-weight:600;font-size:.86rem}
.ch-authorcard p:last-child{color:var(--ch-muted);font-size:.8rem;margin-top:.15rem}
@media (max-width:768px){.ch-authorcard{padding:12px}.ch-authorcard img{width:60px;height:60px}}

/* Mobile-panel close control lives in the nav list, so its LI must be hidden on
   desktop explicitly — the chassis only hides the label (`.ch-nav-close`), and an
   empty flex `li` still eats a gap in the masthead. Stated, not left to
   specificity. */
.ch-nav-links>li.ch-nav-close-li{display:none}
@media (max-width:768px){.ch-nav-links>li.ch-nav-close-li{display:block}}

/* The chassis sets .ch-bonus-label at .7rem = 11.2px. Measured in the stage-10 DOM
   pass: an uppercase, letter-spaced micro-label under 12px is the one text style on
   the site that falls below the mobile legibility floor. Raised in the site layer. */
.ch-bonus-label{font-size:.78rem}

/* Key/value tables (2 columns) on mobile. The chassis collapses .ch-cmp rows into
   "label: value" cards using data-label, which is right for a comparison table and
   useless for a key/value one — every row read "Voce: Licenza" then "Dato: Curaçao",
   one bordered card per fact, 18 cards on a review page. Here the whole tbody is one
   card and each row is a label/value line, with the FIRST CELL as the label. */
@media (max-width:768px){
  .ch-cmp-kv{display:block}
  .ch-cmp-kv tbody{display:block;background:var(--ch-card);border:1px solid var(--ch-line);
    border-radius:12px;padding:4px 14px}
  .ch-cmp-kv tr{display:block;background:none;border:0;border-radius:0;margin:0;
    padding:.6rem 0;border-bottom:1px solid var(--ch-line-faint)}
  .ch-cmp-kv tbody tr:last-child{border-bottom:0}
  /* label ABOVE the value, both left-aligned: the values here are licence strings,
     payment lists and whole sentences, and a 150px right-aligned column wrapped
     them over five ragged lines. */
  .ch-cmp-kv td{display:block;border-bottom:0;padding:0;text-align:start}
  .ch-cmp-kv td::before{content:none}
  .ch-cmp-kv td:first-child{font-weight:700;color:var(--ch-primary);font-size:.82rem;
    letter-spacing:.01em;margin-bottom:.12rem}
  .ch-cmp-kv td:last-child{color:var(--ch-ink)}
}