/* =============================================================
   theme-2026.css — il tema 2026 della rete (in uso su nejlepsikasina.com)
   Design system riutilizzabile (home + pagine).
   Palette: rosso-brand deciso · verde-fiducia · ink quasi-nero.
   Type: Space Grotesk (display) + Inter (body).
   ============================================================= */

/* I caratteri (Space Grotesk e Inter) li serve il sito: css/caratteri.css, da tema-E-caratteri.css, si carica prima di questo foglio. */

:root{
  --red:#d81f34; --red-dark:#a3142a; --red-soft:#fdeaec;
  --ink:#17151f; --ink-2:#413c50;
  --paper:#ffffff; --bg:#f5f4f8;
  --mint:#12a05a; --mint-soft:#e7f6ee;
  --gold:#f2b01e;
  --muted:#6c6879; --line:#e8e6ee;
  --radius:16px; --radius-sm:11px; --pill:999px;
  --shadow:0 2px 14px rgba(23,21,31,.06);
  --shadow-lg:0 14px 40px rgba(23,21,31,.13);
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0;letter-spacing:-.02em}
/* Le lingue che compongono le parole (norvegese, tedesco, olandese, polacco)
   mettono in un titolo parole che a 320 px non stanno in riga:
   «Markedsforbudet og sperringene» sforava di 17 px la pagina norvegese. */
h1,h2,h3,h4{overflow-wrap:break-word}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:1rem;
  background:var(--red);color:#fff;padding:14px 26px;border-radius:var(--pill);border:0;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;box-shadow:0 6px 18px rgba(216,31,52,.28)}
.btn:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(216,31,52,.34);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:#fff;border-color:var(--ink);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
/* Ghost button sopra hero scuro: testo e bordo chiari (fix visibilità) */
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;box-shadow:none}
.btn-sm{padding:10px 18px;font-size:.9rem}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--ink);letter-spacing:-.02em}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:var(--ink-2);font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--red)}
.nav .since{font-family:var(--display);font-size:.76rem;font-weight:600;color:var(--mint);background:var(--mint-soft);padding:5px 11px;border-radius:var(--pill)}
.burger{display:none;background:none;border:0;font-size:1.4rem;color:var(--ink);cursor:pointer}

/* ---- hero (signature) ---- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 460px at 82% -12%, #2a2440 0%, transparent 60%),
  linear-gradient(160deg,#17151f 0%,#211c30 62%,#2c2140 100%);color:#fff;padding:74px 0 84px}
.hero:after{content:"";position:absolute;inset:0;background-image:
  radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);background-size:26px 26px;pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .95fr;gap:44px;align-items:center}
.hero .eyebrow{color:#ff9aa6}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.15rem);font-weight:700;margin:.28em 0 .12em;color:#fff}
.hero h1 .free{position:relative;display:inline-block;color:var(--gold)}
.hero h1 .free:after{content:"";position:absolute;left:0;right:-2px;bottom:.06em;height:.14em;background:var(--gold);opacity:.35;border-radius:3px}
.hero p.sub{font-size:1.14rem;color:#cfc9db;max-width:36ch;margin:0 0 26px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.hero .trust .ti{font-size:.9rem;color:#d7d2e2}
.hero .trust .ti b{color:#fff;font-family:var(--display)}
.hero .trust .ti:before{content:"\2713";color:var(--mint);font-weight:700;margin-right:7px}

/* signature chip card in hero */
.chip{background:linear-gradient(155deg,#fff,#fbf4f5);border-radius:22px;padding:26px;box-shadow:var(--shadow-lg);color:var(--ink);transform:rotate(-1.6deg)}
.chip .zero{font-family:var(--display);font-weight:700;font-size:3.6rem;line-height:1;color:var(--red);letter-spacing:-.04em}
.chip .zero small{display:block;font-size:.9rem;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:8px;text-transform:none}
.chip .rows{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px;display:grid;gap:9px}
.chip .rows div{display:flex;justify-content:space-between;font-size:.92rem;color:var(--ink-2)}
.chip .rows b{color:var(--ink)}
.chip .tag{display:inline-block;margin-top:16px;background:var(--mint-soft);color:var(--mint);font-family:var(--display);font-weight:600;font-size:.8rem;padding:6px 12px;border-radius:var(--pill)}

/* ---- sections ---- */
.sec{padding:64px 0}
.sec-head{max-width:640px;margin:0 0 30px}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.35rem);font-weight:700;margin:.2em 0 .25em}
.sec-head p{color:var(--muted);margin:0;font-size:1.03rem}

/* ---- top casino list ---- */
.toplist{display:grid;gap:14px}
.tcard{display:grid;grid-template-columns:44px 150px 1fr auto;align-items:center;gap:20px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease;position:relative}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tcard.top{border-color:#f4d59a;box-shadow:0 4px 22px rgba(242,176,30,.16)}
.tcard .rank{font-family:var(--display);font-weight:700;font-size:1.15rem;color:#fff;background:var(--ink);
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tcard.top .rank{background:linear-gradient(150deg,var(--gold),#e0951a)}
.tcard .logo{display:flex;align-items:center;justify-content:center;height:58px;background:#fafafa;border-radius:10px;padding:6px}
.tcard .logo img{max-height:46px;width:auto}
.tcard .offer .b{font-family:var(--display);font-weight:700;font-size:1.28rem;color:var(--ink);letter-spacing:-.01em}
.tcard .offer .m{font-size:.85rem;color:var(--muted);margin-top:2px}
.tcard .badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;font-family:var(--display);
  background:var(--mint-soft);color:var(--mint);padding:4px 10px;border-radius:var(--pill);margin-top:7px}
.tcard .act{display:flex;flex-direction:column;gap:7px;min-width:150px;text-align:center}
.tcard .act .rev{font-size:.84rem;color:var(--muted)}
.tcard .act .rev:hover{color:var(--red)}

/* ---- category grid ---- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .16s,box-shadow .16s,border-color .16s;display:block}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--red-soft)}
.cat .ic{width:46px;height:46px;border-radius:12px;background:var(--red-soft);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:14px}
.cat h3{font-size:1.12rem;color:var(--ink);margin-bottom:5px}
.cat p{color:var(--muted);font-size:.92rem;margin:0}
.cat .go{color:var(--red);font-family:var(--display);font-weight:600;font-size:.9rem;margin-top:12px;display:inline-block}

/* ---- trust / why us ---- */
.why{background:var(--ink);color:#fff;border-radius:26px;padding:52px 44px;position:relative;overflow:hidden}
.why:before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(216,31,52,.35),transparent 70%)}
.why .wg{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.why .wi h3{font-size:1.06rem;color:#fff;margin-bottom:7px;display:flex;align-items:center;gap:8px}
.why .wi h3 .k{color:var(--mint)}
.why .wi p{color:#c8c3d4;font-size:.92rem;margin:0}
.why .lead{position:relative;z-index:2;max-width:600px;margin-bottom:34px}
.why .lead .eyebrow{color:#ff9aa6}
.why .lead h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);margin:.2em 0 .2em}
.why .lead p{color:#c8c3d4;margin:0}

/* ---- guides ---- */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .16s,box-shadow .16s;display:flex;flex-direction:column}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gcard .tag{font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.gcard h3{font-size:1.18rem;color:var(--ink);margin:9px 0 8px}
.gcard p{color:var(--muted);font-size:.94rem;flex:1;margin:0 0 14px}
.gcard .go{color:var(--red);font-family:var(--display);font-weight:600;font-size:.92rem}

/* ---- faq ---- */
.faqs{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq-i{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 24px}
.faq-i h3{font-size:1.06rem;color:var(--ink);margin-bottom:7px}
.faq-i p{color:var(--ink-2);margin:0;font-size:.96rem}

/* ---- disclosure / rg strip ---- */
.rgbar{background:var(--red-soft);border:1px solid #f5c6c0;border-radius:var(--radius-sm);padding:14px 20px;font-size:.9rem;color:#8b1a10;margin-top:22px}
.rgbar b{color:#7a1109}

/* ---- footer ---- */
.foot{background:var(--ink);color:#c8c3d4;padding:52px 0 30px;margin-top:20px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot h4{font-family:var(--display);color:#fff;font-size:.95rem;margin:0 0 14px;letter-spacing:.02em}
.foot a{color:#c8c3d4;display:block;margin-bottom:9px;font-size:.92rem}
.foot a:hover{color:#fff}
.foot .rg{font-size:.86rem;line-height:1.7}
.foot .rg b{color:#fff}
.foot .bottom{padding-top:22px;font-size:.84rem;color:#8a8598;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot .bottom .plus{background:var(--red);color:#fff;font-family:var(--display);font-weight:700;padding:2px 9px;border-radius:6px;font-size:.8rem}

/* ---- responsive ---- */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .chip{max-width:360px}
  .why .wg{grid-template-columns:repeat(2,1fr)}
  .cats,.guides{grid-template-columns:1fr 1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav{display:none}.burger{display:block}
  .nav.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;background:#fff;padding:18px 22px;border-bottom:1px solid var(--line);gap:16px;box-shadow:var(--shadow)}
  .tcard{grid-template-columns:36px 1fr;grid-auto-rows:auto;gap:12px 14px}
  .tcard .logo{grid-column:2;justify-content:flex-start}
  .tcard .act{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .cats,.guides,.why .wg,.foot .cols{grid-template-columns:1fr}
  .sec{padding:46px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}

/* =============================================================
   COMPONENTI PAGINE INTERNE (articolo · recensione gry/kasyna)
   ============================================================= */
.crumb{font-size:.85rem;color:var(--muted);padding:22px 0 0}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--red)}
.page-head{padding:26px 0 8px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;margin:.15em 0 .2em}
.page-head .meta{color:var(--muted);font-size:.9rem}
.page-head .meta b{color:var(--ink);font-family:var(--display)}

/* prosa articolo */
.post{max-width:760px}
.post .lead{font-size:1.12rem;color:var(--ink-2);margin:.4em 0 1.2em}
.post h2{font-size:1.5rem;font-weight:700;margin:1.7em 0 .4em;padding-left:14px;border-left:4px solid var(--red)}
.post h3{font-size:1.15rem;font-weight:600;margin:1.3em 0 .3em}
.post p{margin:.7em 0}
.post ul,.post ol{padding-left:1.3em;margin:.6em 0}.post li{margin:.4em 0}
.post blockquote{margin:1.2em 0;padding:14px 20px;border-left:4px solid var(--gold);background:#fffaf0;border-radius:0 10px 10px 0;color:var(--ink-2)}
.callout{background:var(--mint-soft);border:1px solid #bfe6cf;border-radius:12px;padding:16px 20px;margin:1.2em 0}
.callout.warn{background:#fff3cd;border-color:#ffe08a}
.callout.info{background:#eef6ff;border-color:#cfe3fb}

/* recensione: hero rating */
.rev2-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:14px 0 20px}
.rev2-head .logo{width:150px;height:88px;display:flex;align-items:center;justify-content:center;background:#fafafa;border:1px solid var(--line);border-radius:12px;padding:10px}
.rev2-head .logo img{max-height:64px;width:auto}
.ratingbox{display:inline-flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 20px;box-shadow:var(--shadow)}
.ratingbox .big{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--ink);line-height:1}
.ratingbox .big small{font-size:1rem;color:var(--muted)}
.ratingbox .stars{color:var(--gold);font-size:20px;letter-spacing:1px}
.ratingbox .tag{background:var(--mint);color:#fff;font-family:var(--display);font-weight:600;font-size:.72rem;padding:4px 10px;border-radius:var(--pill);text-transform:uppercase}
.facts{width:100%;border-collapse:collapse;margin:8px 0 4px}
.facts th,.facts td{border:1px solid var(--line);padding:10px 14px;text-align:left;font-size:.96rem}
.facts th{background:#fafafa;width:38%;font-family:var(--display);font-weight:600}
.shots{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.shots img{width:360px;max-width:100%;border:1px solid var(--line);border-radius:12px}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.pc .col{border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.pc .pros{background:var(--mint-soft)} .pc .cons{background:var(--red-soft)}
.pc h3{font-family:var(--display);font-size:1.05rem;margin:0 0 .4em}
.pc ul{margin:0;padding-left:1.1em}.pc li{margin:.35em 0}
.verdict{background:var(--ink);color:#fff;border-radius:16px;padding:22px 26px;margin:20px 0}
.verdict h3{color:#fff;font-size:1.15rem;margin:0 0 .4em;display:flex;align-items:center;gap:10px}
.verdict .score{background:var(--gold);color:var(--ink);font-family:var(--display);font-weight:700;padding:2px 12px;border-radius:var(--pill);font-size:.95rem}
.verdict p{color:#d7d2e2;margin:0}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media(max-width:760px){.pc,.related{grid-template-columns:1fr}}

/* ===== Cookie consent banner (souhlas s cookies) ===== */
.nk-cc{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--ink);color:#e9e6f0;box-shadow:0 -8px 30px rgba(0,0,0,.32);border-top:3px solid var(--red)}
.nk-cc-in{max-width:1120px;margin:0 auto;padding:18px 22px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.nk-cc-txt{margin:0;font-size:.9rem;line-height:1.55;flex:1;min-width:250px;color:#cfc9db}
.nk-cc-txt a{color:#ff9aa6;text-decoration:underline}
.nk-cc-btns{display:flex;gap:12px;flex-shrink:0}
.nk-cc-b{font-family:var(--display);font-weight:600;font-size:.94rem;padding:11px 22px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.nk-cc-acc{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(216,31,52,.3)}
.nk-cc-acc:hover{background:var(--red-dark);transform:translateY(-1px)}
.nk-cc-rej{background:transparent;color:#e9e6f0;border:1.5px solid rgba(255,255,255,.25)}
.nk-cc-rej:hover{border-color:#fff;transform:translateY(-1px)}
@media(max-width:640px){.nk-cc-in{padding:16px}.nk-cc-btns{width:100%}.nk-cc-b{flex:1}}

/* ===== Logo header (immagine) ===== */
.brand img{height:38px;width:auto;display:block}
/* ===== Utility (rimozione stili inline) ===== */
.foot .rg a{color:#fff}
.foot .rg + .rg{margin-top:12px}
.callout ul{margin:.4em 0 0}
.sec--tight{padding-top:0}
.sec-head--related{margin-top:44px}
.sec-head--center{margin:0 auto 30px;text-align:center}
.h2--sm{font-size:1.5rem}
.rgbar--center{max-width:820px;margin:22px auto 0}
.hero-note{margin-top:16px;color:var(--muted);font-size:.96rem}
.mt-sm{margin-top:6px}

/* Il riquadro del codice in testa alla recensione. Il codice si deve poter
   leggere e copiare a colpo d'occhio: carattere a larghezza fissa, contrasto
   alto, e nessuna decorazione che lo faccia somigliare a un banner. */
.nb--code{border-left:4px solid var(--acc,#c8a23a)}
.nb--code .ph{margin:0 0 .5rem;font-weight:700}
.nb--code p{margin:0 0 .6rem}
.nb--code p:last-child{margin-bottom:0;font-size:.94em;opacity:.85}
b.code{display:inline-block;padding:.08em .45em;border:1px solid currentColor;
  border-radius:4px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:.95em;letter-spacing:.06em;white-space:nowrap}

/* L'avvertenza in testa a una pagina storica, e il testo d'epoca sotto. Il testo
   vecchio si legge come una citazione, non come una pagina corrente: chi scorre
   deve vedere a colpo d'occhio che sta leggendo un documento e non un'offerta. */
.nb--hist{border-left:4px solid #b3371f}
.nb--hist .ph{margin:0 0 .4rem;font-weight:700;color:#b3371f}
.wp--hist{opacity:.92;border-left:2px solid var(--bd,#d8d8d8);padding-left:1.1rem}
.wp--hist a{pointer-events:none;text-decoration:none;color:inherit}

/* Il catalogo in tabella sul telefono. Le celle hanno gia' «data-k» con
   l'intestazione della colonna: sotto i 640 px la tabella diventa una pila di
   schede e l'intestazione di ogni cella la scrive lo pseudo-elemento. Senza
   questa regola la tabella sforava di 126 px a 375 px su tre pagine d'elenco
   (controlla_browser.py, 29-10-2026), e una pagina che esce dallo schermo sul
   telefono e' una pagina che il lettore scorre di traverso. */
.tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .tb-op thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tb-op,.tb-op tbody,.tb-op tr,.tb-op td{display:block;width:auto}
  .tb-op{border:0}
  .tb-op tr{border:1px solid var(--bd,#d9dde3);border-radius:6px;padding:.55rem .8rem;
    margin:0 0 .7rem}
  .tb-op td{border:0;padding:.18rem 0;display:flex;gap:.7rem;align-items:baseline}
  .tb-op td::before{content:attr(data-k);flex:0 0 38%;font-weight:700;font-size:.85em;
    opacity:.75}
  .tb-op td>*{min-width:0}
}

/* ===== Testata: le regole che mancavano =====
   Il foglio aveva «.topbar .wrap», «.nav{display:flex}», «.brand .dot» e
   «.burger», cioè il markup di un'altra versione del tema. Il guscio scrive
   «.topbar > .wrap > .tb», il menu come «.nav > ul > li > a», il marchio come
   «.brand-l > .brand > img + .brand-t» e il pulsante come «.nav-b»: nessuno di
   quei selettori prendeva, e su tutte le pagine la testata usciva come un elenco
   puntato sopra il titolo, con «Skip to content» visibile e il pulsante grezzo.
   Non dà errori in console e nessun controllo del kit la segnala: si vede solo
   nelle schermate di controlla_browser.py (nodeposit-bonus.com, 29-10-2026). */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:12px;top:12px;z-index:200;width:auto;height:auto;
  padding:.55rem .9rem;background:#fff;color:var(--ink);border-radius:8px;
  box-shadow:0 2px 14px rgba(0,0,0,.18)}
.topbar .tb{display:flex;align-items:center;justify-content:space-between;
  height:66px;gap:20px}
.topbar--mkt .tb{justify-content:flex-start}
.brand-l{display:flex;align-items:center;text-decoration:none}
.brand-t{display:flex;flex-direction:column;line-height:1.18}
.brand-t b{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);
  letter-spacing:-.02em}
.brand-t i{font-style:normal;font-size:.74rem;font-weight:500;color:var(--ink-2)}
.nav ul{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav-b{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  padding:.4rem .8rem;font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);
  cursor:pointer;min-height:40px}
.nav-b:hover{border-color:var(--red);color:var(--red)}

@media (max-width:860px){
  /* «.nav{display:none}» della regola a 640 px nascondeva anche il menu aperto,
     perche' l'elenco sta dentro .nav: qui .nav resta, e a sparire e' solo la
     lista. «.burger» non esiste in questo markup e la sua regola non fa niente. */
  .nav{display:block}
  .topbar .wrap{height:auto}
  .topbar .tb{height:60px;gap:12px}
  .brand-t i{display:none}
  .nav-b{display:inline-block}
  .nav ul{display:none}
  .nav.is-open ul{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;
    border-bottom:1px solid var(--line);padding:.4rem 22px .8rem;
    box-shadow:0 10px 24px rgba(0,0,0,.08)}
  .nav.is-open li + li{border-top:1px solid var(--line)}
  .nav.is-open a{display:block;padding:.75rem 0;font-size:1rem}
}

/* ==========================================================================
   IL CORPO DELLA PAGINA E LA SCHEDA
   Il foglio copriva il guscio ma non il componente portante: 40 classi del
   markup non avevano una sola regola, e le schede uscivano come paragrafi
   impilati. Questo blocco le scrive tutte.
   ========================================================================== */

.main{padding:46px 0 10px;background:var(--bg)}
.content{max-width:780px}
.content > p,.content > ul,.content > ol,.content > h2,.content > h3{max-width:68ch}
.content > p{color:var(--ink-2);line-height:1.72;margin:0 0 1.05em}
.content > h2{font-family:var(--display);font-size:1.62rem;letter-spacing:-.02em;color:var(--ink);margin:2.1em 0 .6em}
.content > h3{font-family:var(--display);font-size:1.18rem;color:var(--ink);margin:1.7em 0 .45em}
.content > ul,.content > ol{color:var(--ink-2);line-height:1.7;padding-left:1.15em;margin:0 0 1.15em}
.content > ul li,.content > ol li{margin-bottom:.4em}

/* l'intestazione di sezione che precede una griglia di schede */
h2.anchor,.anchor{font-family:var(--display);font-size:1.62rem;letter-spacing:-.02em;color:var(--ink);
  margin:2.2em 0 .25em;scroll-margin-top:84px}
h2.anchor:first-child,.anchor:first-child{margin-top:0}

/* ---- la griglia, e la scheda ---- */
.cas-l-grid{display:grid;gap:13px;margin:22px 0 38px;max-width:none}

.cas{display:grid;grid-template-columns:minmax(214px,252px) minmax(0,1fr) minmax(206px,228px);
  gap:18px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 19px 15px 22px;box-shadow:var(--shadow);
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.cas:hover{box-shadow:var(--shadow-lg);border-color:#d8d4e3;transform:translateY(-1px)}

/* la fascia di colore a sinistra dice il tipo di offerta senza una parola in più */
.cas{position:relative;overflow:hidden}
.cas:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.cas--nodeposit:before{background:var(--mint)}
.cas--welcome:before{background:var(--gold)}
.cas--minimo:before{background:#7d7a93}

.cas-h{display:flex;align-items:center;gap:14px;min-width:0}
.cas-i{flex:0 0 auto;width:86px;height:50px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px}
.cas-t{min-width:0}
.cas-n{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink);
  margin:0 0 6px;line-height:1.22;letter-spacing:-.015em;text-wrap:balance}
.cas-b{display:inline-block;margin:0;font-family:var(--display);font-weight:600;
  font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--pill);background:#eeecf4;color:var(--ink-2)}
.cas--nodeposit .cas-b{background:var(--mint-soft);color:#0a7a43}
.cas--welcome .cas-b{background:#fdf3dc;color:#8a6209}
.cas--minimo .cas-b{background:#eceaf3;color:#4d4a60}

.cas-o{min-width:0}
.cas-of{margin:0 0 5px;font-size:.92rem;line-height:1.5;color:var(--ink-2);font-weight:500}
.vd{display:inline-block;font-size:.8rem;font-weight:400;color:var(--muted);white-space:nowrap}
.cas-l{margin:0 0 5px;font-size:.84rem;line-height:1.5;color:var(--muted)}
.cas-l .k{font-family:var(--display);font-weight:600;font-size:.69rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);margin-right:5px}
.cas-r{margin:0;font-size:.88rem}
.cas-r a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(216,31,52,.28)}
.cas-r a:hover{border-bottom-color:var(--red)}
.cas-nt{margin:7px 0 0;font-size:.83rem;line-height:1.55;color:#8b1a10;
  background:var(--red-soft);border-left:3px solid var(--red);border-radius:0 7px 7px 0;padding:7px 11px}

.cas-a{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.cas-a .btn--go{justify-content:center;width:100%;padding:12px 16px;font-size:.93rem;
  text-align:center;text-decoration:none;box-shadow:0 4px 13px rgba(216,31,52,.24)}
.cas-a .btn--go:hover{transform:none;box-shadow:0 7px 19px rgba(216,31,52,.3)}
.cas-sm{margin:0;text-align:center;font-size:.73rem;color:var(--muted);letter-spacing:.01em}

@media(max-width:900px){
  .cas{grid-template-columns:1fr;gap:14px;padding:16px 17px}
  .cas-a{align-items:stretch}
  .cas-sm{text-align:left}
}

/* ---- riquadri di nota ---- */
.nb{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:16px 20px;margin:1.5em 0;max-width:68ch}
.nb p{margin:0 0 .6em;color:var(--ink-2);font-size:.94rem;line-height:1.65}
.nb p:last-child{margin-bottom:0}
.nb .ph{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:.5em}
.nb--disc{background:var(--red-soft);border:1px solid #f3c7cc;border-left:3px solid var(--red);
  color:#8b1a10;font-size:.9rem}
.nb--disc p{color:#8b1a10}

/* ---- le pagine di mercato ---- */
.mkt{max-width:780px}
.mkt-note{background:#eef6ff;border:1px solid #cfe3fb;border-radius:var(--radius-sm);
  padding:14px 19px;margin:1.3em 0;font-size:.92rem;line-height:1.65;color:#1d4e7d;max-width:68ch}
.mkt-ops,.mkt-reg,.mkt-age{margin:1.5em 0;max-width:68ch}
.mkt-reg{font-size:.9rem;color:var(--muted)}
.mkt-age{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--ink-2)}

/* ---- domande frequenti ---- */
.faqs-s{margin:2.6em 0 1em}
.faqs-s > h2{font-family:var(--display);font-size:1.62rem;letter-spacing:-.02em;color:var(--ink);margin:0 0 .7em}
.faqs-s .faqs{margin:0;max-width:780px}

/* ---- firma, divulgazione, piede ---- */
.about{color:var(--ink-2);font-size:.94rem;line-height:1.7;max-width:68ch}
.sig{margin:2.6em 0 0;padding-top:1.1em;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted);line-height:1.65;max-width:68ch}
.dash{color:var(--line);margin:0 .35em;font-style:normal}
.age{display:inline-block;font-family:var(--display);font-weight:700;font-size:.74rem;
  background:var(--ink);color:#fff;padding:2px 7px;border-radius:5px;letter-spacing:.03em}
.foot .age{background:var(--red)}
.cols-1{display:block;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot--mkt{margin-top:34px}

/* ---- il pulsante che riapre le preferenze ---- */
.cc-re,.btn--sec{display:inline-block;background:transparent;color:inherit;
  border:1px solid currentColor;border-radius:var(--pill);padding:7px 15px;
  font-family:var(--display);font-weight:600;font-size:.83rem;cursor:pointer;
  opacity:.8;transition:opacity .15s ease;box-shadow:none}
.cc-re:hover,.btn--sec:hover{opacity:1;background:transparent;transform:none;box-shadow:none;color:inherit}

/* ---- il corpo recuperato dalle pagine storiche ---- */
.wp{max-width:68ch}
.wp p{color:var(--ink-2);line-height:1.72;margin:0 0 1.05em}

/* --- correzioni viste solo a schermo --- */
/* i tre numeri dell'hero uscivano attaccati alla parola: «88operators» */
.trust .ti b{margin-right:.4em}
/* nel piede i link di aiuto sono blocchi, e il punto mediano fra due di essi
   cadeva da solo su una riga */
.foot .rg a{display:inline}
.foot .rg .dash{color:#5d596c}
/* il nome lungo spezzava il pulsante su due righe e la scheda si allungava */
.cas-a .btn--go{line-height:1.3;text-wrap:balance}
.cas-r{line-height:1.45}

/* --- il taglio commerciale: la cifra e la sua condizione --- */
/* La cifra e' il titolo della scheda, come sul tema da cui il sito viene; la riga
   sotto porta rigioco, tetto e scadenza, che e' quello che rende la cifra
   difendibile invece che solo attraente. */
.cas-of{font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.35;
  color:var(--ink);letter-spacing:-.01em;margin:0 0 4px;text-wrap:pretty}
.cas-of .vd{display:block;margin-top:3px;font-family:var(--body);font-weight:400}
/* Le misure sulla scheda: tre caselle in riga, etichetta piccola sopra e cifra
   sotto, cosi' che ventotto offerte si leggano in colonna invece che una per una.
   Stessa grammatica del pannello della recensione, un terzo dello spazio. */
.cas-np{margin:8px 0 10px;font-size:.74rem;line-height:1.35;color:var(--muted);padding:5px 10px;border-radius:7px;background:#faf9fc;border:1px dashed #e0dceb;display:inline-block}
.cas-g{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cas-gi{display:flex;flex-direction:column;gap:1px;padding:5px 10px;border-radius:7px;background:#f4f3f8;border:1px solid #e7e4ef;min-width:84px}
.cas-ge{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cas-gv{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--ink);line-height:1.15}
@media (max-width:420px){.cas-gi{min-width:0;flex:1 1 auto;padding:4px 8px}.cas-gv{font-size:.88rem}}
.cas-c{margin:0 0 6px;font-size:.845rem;line-height:1.5;color:var(--ink-2)}
.cas--nodeposit .cas-of{color:#0a6b3c}

/* La prosa resta a 780 px perche' una riga piu' lunga si legge peggio; la griglia
   delle schede no: li' la larghezza serve a tenere su una riga la cifra, la
   condizione e la licenza, che altrimenti vanno a capo tre volte per scheda. */
@media(min-width:1060px){
  .content > .cas-l-grid,
  .mkt-ops > .cas-l-grid{width:min(1020px,calc(100vw - 44px))}
  .cas{grid-template-columns:minmax(230px,268px) minmax(0,1fr) minmax(206px,224px)}
}
/* Sulle pagine di mercato la scheda non porta cifre, quindi la colonna centrale
   ha solo il tipo d'offerta e la licenza per intero: li' il numero della licenza
   e' il dato di conformita' e resta, ma gli serve larghezza per stare su due righe. */
.mkt-ops .cas-l{word-break:normal;overflow-wrap:anywhere}
.mkt-ops .cas-of{font-size:.99rem}

/* --- il catalogo: logo e pulsante su ogni riga --- */
.t-op{display:flex;align-items:center;gap:11px;min-width:0}
.t-lg{flex:0 0 auto;width:58px;height:34px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:7px;padding:3px}
.t-lg--t{display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--muted);
  background:#f7f6fa;letter-spacing:.04em}
.t-nm{min-width:0}
.t-go{display:inline-block;background:var(--red);color:#fff;font-family:var(--display);
  font-weight:600;font-size:.82rem;padding:7px 14px;border-radius:var(--pill);
  white-space:nowrap;text-decoration:none;transition:background .15s ease}
.t-go:hover{background:var(--red-dark);color:#fff}
.tb-op td{vertical-align:middle}
/* le iniziali al posto del logo, anche sulla scheda */
.cas-i--t{display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1rem;color:var(--muted);
  background:#f7f6fa;letter-spacing:.04em}
@media (max-width:640px){
  .t-lg{width:46px;height:28px}
  .t-go{width:100%;text-align:center}
}
/* la colonna del tipo d'offerta spezzava «No deposit» su due righe */
.tb-op td[data-k="Offer type"],.tb-op th:nth-child(2){white-space:nowrap}
.tb-op th:nth-child(2){width:1%}
.tb-op td[data-k="Link"],.tb-op th:nth-child(5){width:1%;white-space:nowrap}
.tb-op td[data-k="Group"]{font-size:.92rem}
.tb-op th{font-family:var(--display);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);padding:10px 12px;border-bottom:1px solid var(--line)}
.tb-op td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:.94rem}
.tb-op{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (max-width:640px){.tb-op td[data-k="Offer type"]{white-space:normal}}

/* ==========================================================================
   L'APERTURA E LE DUE LISTE DELLA HOME
   ========================================================================== */

/* --- l'offerta in vetrina, nel blocco scuro --- */
/* Non una scheda bianca appoggiata sul fondo scuro, che e' l'arredo di qualunque
   apertura, ma una striscia di lettura: il filo verde a sinistra e' lo stesso
   segno che sulle schede dice «senza deposito», e la prima riga e' il giorno in
   cui l'offerta e' stata letta, che e' quello che il titolo sopra promette. */
.vt{align-self:start;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--mint);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 22px 18px;
  backdrop-filter:blur(2px)}
.vt-k{margin:0 0 10px;font-size:.78rem;line-height:1.4;color:#8fd9b0;letter-spacing:.01em}
.vt-b{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:1.32rem;
  line-height:1.25;color:#fff;letter-spacing:-.02em;text-wrap:balance}
.vt-c{margin:0 0 16px;font-size:.88rem;line-height:1.55;color:#c6c0d6}
.vt-a{display:flex;justify-content:center;width:100%;padding:12px 18px;font-size:.95rem;
  text-decoration:none}
.vt-a:hover{transform:none}
.vt-s{margin:9px 0 0;text-align:center;font-size:.73rem;color:#8e88a0}

/* --- le pagine di riferimento --- */
/* Il glifo sta al margine, non dentro un riquadro: e' un segno accanto a una voce,
   come su un registro. Il filo sopra separa le voci senza chiuderle in schede. */
.rf{list-style:none;margin:20px 0 10px;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.rf-i{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line)}
.rf-g{color:var(--red);opacity:.85;margin-top:2px;width:26px;height:26px}
.rf-t a{display:block;font-family:var(--display);font-weight:600;font-size:1rem;
  line-height:1.3;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.rf-t a:hover{color:var(--red)}
.rf-t p{margin:4px 0 0;font-size:.89rem;line-height:1.5;color:var(--muted)}

/* --- gli articoli --- */
/* Qui il segno e' la data: su un sito che stampa accanto a ogni offerta il giorno
   in cui l'ha letta, la data di un pezzo e' l'informazione, non un'etichetta. */
.wr{list-style:none;margin:20px 0 10px;padding:0;display:grid;gap:26px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.wr-i{padding-top:14px;border-top:2px solid var(--ink)}
.wr-d{margin:0 0 7px;font-family:var(--display);font-weight:600;font-size:.76rem;
  color:var(--muted);letter-spacing:.02em}
.wr-i a{display:block;font-family:var(--display);font-weight:700;font-size:1.04rem;
  line-height:1.28;color:var(--ink);text-decoration:none;letter-spacing:-.015em;
  text-wrap:balance}
.wr-i a:hover{color:var(--red)}
.wr-r{margin:6px 0 0;font-size:.88rem;line-height:1.5;color:var(--muted)}

@media(max-width:900px){
  .rf{grid-template-columns:1fr;column-gap:0}
  .wr{grid-template-columns:1fr 1fr;gap:18px}
  .vt{margin-top:4px}
}
@media(max-width:560px){ .wr{grid-template-columns:1fr} }
/* Le due griglie escono dalla misura della prosa come la griglia delle schede:
   780 px servono a una riga di testo, non a quattro colonne di titoli. */
@media(min-width:1060px){
  .content > .rf,.content > .wr{width:min(1020px,calc(100vw - 44px))}
  .rf{column-gap:56px}
}
@media(max-width:1059px){ .wr{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* `.content > ul` porta la misura della prosa (68ch): giusta per un elenco di
   frasi, sbagliata per una griglia di titoli, che non e' prosa. */
.content > .rf,.content > .wr{max-width:none}

/* ==========================================================================
   IL PANNELLO D'OFFERTA, IN TESTA A UNA RECENSIONE
   Le quattro condizioni in fila e il codice da copiare: e' quello per cui un
   lettore apre questa pagina, e stava sepolto a meta' di duemila parole.
   ========================================================================== */
.po{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--mint);
  border-radius:0 var(--radius) var(--radius) 0;padding:22px 26px 20px;margin:24px 0 28px;
  box-shadow:var(--shadow);max-width:760px}
.po-h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.po-h .cas-i{width:78px;height:46px}
.po-n{min-width:0}
.po-b{margin:0;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);
  letter-spacing:-.015em}
.po-d{margin:3px 0 0;font-size:.8rem;color:var(--muted)}
.po-t{margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:1.55rem;
  line-height:1.22;color:#0a6b3c;letter-spacing:-.02em;text-wrap:balance}

/* il codice: un clic e ce l'hai */
.po-c{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.po-cl{font-size:.9rem;color:var(--ink-2)}
.po-cb{display:inline-flex;align-items:stretch;gap:0;padding:0;border:1.5px dashed var(--line);
  border-radius:9px;background:#fbfafd;cursor:pointer;font:inherit;overflow:hidden;
  transition:border-color .15s ease,background .15s ease}
.po-cb:hover{border-color:var(--mint);background:#f6fcf9}
.po-cb.is-copiato{border-style:solid;border-color:var(--mint);background:var(--mint-soft)}
.po-ck{padding:8px 13px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:1rem;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.po-cs{display:flex;align-items:center;padding:8px 13px;background:#f1eff7;
  font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--ink-2);
  border-left:1.5px dashed var(--line)}
.po-cb:hover .po-cs{color:var(--mint);border-left-color:var(--mint)}
.po-cm{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--mint)}

/* le quattro condizioni, una accanto all'altra */
.po-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.po-gi{padding:12px 16px 13px;border-left:1px solid var(--line)}
.po-gi:first-child{border-left:0;padding-left:0}
.po-g dt{font-size:.76rem;line-height:1.3;color:var(--muted);margin-bottom:4px}
.po-gv{margin:0;font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);
  letter-spacing:-.01em}
.po-gv--n{font-family:var(--body);font-weight:400;font-size:.88rem;color:var(--muted)}
.po-a{display:flex;justify-content:center;width:100%;padding:13px 20px;text-decoration:none}
.po-a:hover{transform:none}
.po-s{margin:9px 0 0;text-align:center;font-size:.76rem;line-height:1.45;color:var(--muted)}

@media(max-width:640px){
  .po{padding:18px 18px 16px}
  .po-g{grid-template-columns:1fr 1fr}
  .po-gi{border-left:0;border-top:1px solid var(--line);padding:11px 0 12px}
  .po-gi:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
  .po-gi:first-child,.po-gi:nth-child(2){border-top:0}
  /* la pillola non si stringe: «Copy» veniva tagliato dentro il suo stesso bordo */
  .po-c{flex-direction:column;align-items:stretch;gap:8px}
  .po-cb{width:100%;flex:0 0 auto}
  .po-ck{flex:1;text-align:center}
  .po-cs{flex:0 0 auto}
  .po-cm{text-align:center}
}
/* Sul telefono l'offerta viene prima dei conteggi: e' la cosa per cui si arriva. */
@media(max-width:900px){
  .hero .wrap{display:flex;flex-direction:column}
  .hero h1{order:1} .hero .lead{order:2} .vt{order:3} .hero .trust{order:4}
}
/* il marchio in testa all'offerta in vetrina */
.vt-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.12)}
.vt-h .cas-i{width:72px;height:42px;background:#fff;border-color:rgba(255,255,255,.2)}
.vt-n{margin:0;font-family:var(--display);font-weight:700;font-size:1rem;color:#fff;
  letter-spacing:-.015em}

/* --- le domande, a fisarmonica --- */
.faqs{max-width:780px;margin:0;display:block;border-top:1px solid var(--line)}
.faq-i{background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:0}
.faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 2px;cursor:pointer;list-style:none;transition:color .15s ease}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:hover{color:var(--red)}
.faq-i summary h3{margin:0;font-family:var(--display);font-weight:600;font-size:1.02rem;
  line-height:1.35;color:inherit;letter-spacing:-.01em}
.faq-x{position:relative;flex:0 0 auto;width:15px;height:15px}
.faq-x:before,.faq-x:after{content:"";position:absolute;background:currentColor;
  border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.faq-x:before{left:0;top:6.5px;width:15px;height:2px}
.faq-x:after{left:6.5px;top:0;width:2px;height:15px}
.faq-i[open] .faq-x:after{transform:rotate(90deg);opacity:0}
.faq-i[open] summary{color:var(--red)}
.faq-a{padding:0 34px 18px 2px}
.faq-a p{margin:0;color:var(--ink-2);font-size:.96rem;line-height:1.7}
.faqs-s > h2{margin-bottom:.5em}
@media(prefers-reduced-motion:reduce){.faq-x:before,.faq-x:after{transition:none}}

/* --- le avvertenze generali delle pagine aperte --- */
/* Tre punti affiancati, non un riquadro rosso di allarme: sono condizioni d'uso,
   e un lettore che le trova scritte come allarme smette di leggerle. Il filo
   superiore le lega alla pagina, il titolo di ogni punto dice di che cosa parla. */
.av{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;
  margin:2.6em 0 2em;padding-top:20px;border-top:2px solid var(--ink)}
.av-i p{margin:0;font-size:.875rem;line-height:1.62;color:var(--muted)}
.av-t{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);
  margin:0 0 7px!important;letter-spacing:-.01em}
.av-i a{color:var(--red);border-bottom:1px solid rgba(216,31,52,.3)}
.av-i a:hover{border-bottom-color:var(--red)}
@media(min-width:1060px){ .content > .av{width:min(1020px,calc(100vw - 44px));max-width:none} }
@media(max-width:860px){ .av{grid-template-columns:1fr;gap:20px} }

/* --- gli studi che fanno i giochi --- */
/* Un lettore riconosce Pragmatic o Evolution prima del nome del casino. I loghi
   stanno su una striscia sotto il pannello, in grigio finche' non ci passi sopra:
   sono informazione, non sponsor, e non devono competere con il pulsante. */
.st{margin:0 0 26px;max-width:760px}
.st-t{margin:0 0 12px;font-family:var(--display);font-weight:600;font-size:.82rem;
  color:var(--muted);letter-spacing:.01em}
.st-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.st-l li{display:flex;flex-direction:column;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px 7px;transition:border-color .15s ease}
.st-l li:hover{border-color:#cfcbdd}
.st-i{width:86px;height:32px;object-fit:contain;filter:grayscale(1);opacity:.72;
  transition:filter .18s ease,opacity .18s ease}
.st-l li:hover .st-i{filter:none;opacity:1}
.st-n{font-size:.68rem;line-height:1.2;color:var(--muted);text-align:center}
/* Lo studio con pagina propria e' una porta, e si deve vedere che lo e':
   il nome prende il colore del testo e si sottolinea al passaggio, senza
   che il riquadro cambi forma rispetto a quelli senza pagina. */
.st-a{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:inherit}
.st-l li:has(.st-a){border-color:#d8d4e4}
.st-a:hover .st-n{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.st-a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
@media(max-width:640px){ .st-i{width:72px;height:28px} .st-n{font-size:.64rem} }

/* --- l'indice degli studi --- */
.sg{list-style:none;margin:22px 0 10px;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}
.sg-i{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;
  padding:18px 0;border-top:1px solid var(--line)}
.sg-l{width:96px;height:38px;object-fit:contain;object-position:left center;
  filter:grayscale(1);opacity:.8;margin-top:2px}
.sg-i:hover .sg-l{filter:none;opacity:1}
.sg-t a{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);
  text-decoration:none;letter-spacing:-.015em}
.sg-t a:hover{color:var(--red)}
.sg-c{margin:3px 0 5px;font-family:var(--display);font-weight:600;font-size:.78rem;
  color:var(--mint)}
.sg-d{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted)}
@media(min-width:1060px){ .content > .sg{width:min(1020px,calc(100vw - 44px));max-width:none} }
@media(max-width:860px){ .sg{grid-template-columns:1fr;column-gap:0} }

/* gli studi nel catalogo: solo i loghi, piccoli, senza nome */
.t-sw{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.t-sw img{width:44px;height:18px;object-fit:contain;filter:grayscale(1);opacity:.65}
.tb-op tr:hover .t-sw img{filter:none;opacity:1}
@media(max-width:640px){ .t-sw img{width:38px;height:16px} }
/* i loghi degli studi stavano su tre righe perche' la colonna era stretta */
.tb-op th:nth-child(4),.tb-op td[data-k="Games by"]{width:188px;min-width:188px}
.t-sw{flex-wrap:nowrap;gap:4px}
.t-sw img{width:40px;height:17px;opacity:.75}
@media(max-width:640px){
  .tb-op th:nth-child(4),.tb-op td[data-k="Games by"]{width:auto;min-width:0}
  .t-sw{flex-wrap:wrap}
}

/* --- il catalogo, nella misura giusta --- */
/* La tabella stava nella misura della prosa e il nome dell'operatore andava a capo
   tre volte. Una tabella non e' prosa: le serve la larghezza della griglia. */
@media(min-width:1060px){
  .content > .tw,.mkt-ops > .tw{width:min(1020px,calc(100vw - 44px));max-width:none}
}
.tb-op th:nth-child(1),.tb-op td[data-k="Operator"]{width:30%;min-width:230px}
.tb-op td[data-k="Operator"] .t-nm{text-wrap:balance}
.tb-op th:nth-child(3),.tb-op td[data-k="Licence"]{font-size:.86rem;color:var(--muted)}
/* gli studi come nomi: un logo da quaranta pixel in una riga di tabella e' una
   macchia grigia, un nome si scorre */
.t-sw{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline}
.t-sn{font-size:.82rem;line-height:1.3;color:var(--ink-2);white-space:nowrap}
.t-sn:not(:last-child):after{content:"\00b7";margin-left:6px;color:var(--line)}
.t-sp{font-size:.78rem;color:var(--muted)}
/* Il mercato unico di una marca, accanto al nome: informa chi guarda senza
   togliere il pulsante a chi vuole cliccare. */
.t-only{display:inline-block;margin-left:7px;vertical-align:1px;
  font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.06em;
  color:var(--ink-2);background:#eeecf4;border-radius:4px;padding:2px 6px;
  text-decoration:none}
.t-only:hover{background:var(--ink);color:#fff}
/* I loghi disegnati in bianco (l'operatore ha il sito scuro) su una scheda bianca
   non sono brutti: sono assenti. La scatola diventa il fondo per cui sono stati
   disegnati, e il bordo si adegua. */
.cas-i--scuro,.t-lg--scuro{background:#1b1826;border-color:#2c2740}
/* La riga sulla legalita' nel piede: presente su ogni pagina, compresa quella
   di mercato, perche' e' la rete sotto i due buchi dichiarati del filtro. */
.foot-lg{margin:22px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.14);font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.62);max-width:72ch}
.foot-lg a{color:rgba(255,255,255,.86)}
.cas-lk{color:inherit;text-decoration-color:#cfcbdd;text-underline-offset:2px}
.cas-lk:hover{color:var(--ink);text-decoration-color:var(--red)}
/* La tabella dei conti di licenza: la colonna delle marche e' lunga e deve
   poter andare a capo, le altre tre restano strette. */
.tb-acc td:first-child code{font-size:.78rem;white-space:nowrap}
/* ma a 320 px il numero di conto non ci sta, e un numero tagliato non si
   puo' cercare nel registro: li' si lascia spezzare. */
@media (max-width:380px){.tb-acc td:first-child code{white-space:normal;overflow-wrap:anywhere}}
.tb-acc td:nth-child(3){min-width:22ch}
.tb-acc td:nth-child(3),.tb-acc td:nth-child(4){font-size:.86rem;line-height:1.45}
/* Il riquadro «prima di cominciare»: eta', registro di autoesclusione e linea
   d'aiuto del paese. Sta in fondo, dopo le sezioni, dove lo cerca chi lo cerca. */
.ra{margin:34px 0 10px}
.ra-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:14px 0 0;padding:0}
.ra-i{margin:0;padding:14px 16px;border:1px solid #e7e4ef;border-radius:11px;background:#fbfafd}
.ra-i dt{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 5px}
.ra-i dd{margin:0;font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.25}
.ra-i dd a{color:inherit;text-decoration-color:#cfcbdd;text-underline-offset:2px}
.ra-i dd a:hover{text-decoration-color:var(--red)}
.ra-t{font-variant-numeric:tabular-nums}
.ra-n{display:block;margin-top:4px;font-family:var(--body);font-size:.76rem;font-weight:400;line-height:1.4;color:var(--muted)}
.av-m{margin:10px 0 0;font-size:.78rem;line-height:1.6;color:var(--muted)}
.av-m a{color:var(--ink-2);text-decoration-color:#cfcbdd;text-underline-offset:2px;white-space:nowrap}
.av-m a:hover{color:var(--ink);text-decoration-color:var(--red)}
/* «Dove andare da qui»: stessa forma del blocco della home, un bordo sopra
   a staccarlo dal testo dell'articolo che ha appena finito. */
.pr{margin:38px 0 8px;padding-top:26px;border-top:1px solid #e7e4ef}
.pr .rf{margin-top:14px}

/* Le larghezze di colonna del desktop (`width:1%` sul Link, `min-width:230px`
   sull'Operatore, e qualunque altra se ne aggiunga) sono scritte senza media
   query, e sotto i 640 px vincono per specificita' su `.tb-op td{width:auto}`.
   Risultato visto sul telefono il 30-10-2026: la cella del Link larga 24 px e il
   pulsante tagliato a «Ge», e il nome dell'operatore una parola per riga.
   Si neutralizzano tutte in una volta, con un selettore piu' specifico di
   qualunque `td[data-k="..."]`, cosi' il difetto non torna con la prossima
   colonna che qualcuno stringe. */
@media (max-width:640px){
  .tb-op tr td[data-k]{width:auto;min-width:0}
  .tb-op tr td[data-k="Link"]{align-items:center}
  .tb-op tr td[data-k="Link"] .t-go{flex:1 1 auto;min-width:7.5rem}
}
/* Un nome lungo nella cella dell'operatore («Prime ScratchCards») restava
   tagliato di due pixel a 360 px: la riga logo+nome non puo' andare a capo,
   e il nome non spezzava. Gli si lascia spezzare la parola. */
.tb-op .t-nm{overflow-wrap:break-word;min-width:0}
/* I numeri di licenza sono stringhe lunghe e senza spazi («CGA Master License
   No. 365/JAZ — Sub-Lic…»): a 320 px uscivano dalla loro cella. In una tabella
   che sul telefono diventa una pila di schede, ogni cella deve poter spezzare. */
.tb-op td,.tb-op td a{overflow-wrap:break-word;word-break:normal}