/* ══════════════════════════════════════════════════════════════════════════
   PrivacyBox MD — portale pubblico · foglio di stile unico
   ──────────────────────────────────────────────────────────────────────────
   Deriva da:
     docs/design/PrivacyBox Fondazioni1.html          (rampa, scala, token)
     docs/design/PrivacyBox Portale Pubblico v0.1.html (fasce, componenti)
     packages/cos_ui/lib/src/tokens/*.dart             (stessi valori nel prodotto)

   Vocabolario, in tre regole che valgono per tutto il sito:
     1. Filetti, non ombre. L'ombra esiste solo dove un piano si stacca davvero.
     2. Parole, non icone sole. Nessun comando è affidato a un glifo muto.
     3. Una sola campitura piena per fascia, un solo accento cromatico per pagina.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · Rampa neutra e accenti (identici a cos_palette.dart) ─────────── */
:root{
  --n-000:#FBFAF8; --n-050:#F1EEE9; --n-100:#E7E2D9; --n-150:#D9D2C6;
  --n-200:#C8C1B4; --n-300:#B3ADA2; --n-400:#948E83; --n-500:#7A756D;
  --n-600:#5F5A52; --n-700:#463F38; --n-800:#2B2A28; --n-850:#1F1D1B;
  --n-900:#141311;

  --moss:#5A6B54; --moss-strong:#46543F; --moss-soft:#E4E7DD;
  --ochre:#A67C44; --ochre-strong:#8A6534; --ochre-soft:#F0E6D3;
  --rust:#9C4A38;  --rust-strong:#7E392B;  --rust-soft:#F0DBD4;
  --fjord:#4A6472; --fjord-strong:#3A505B; --fjord-soft:#DDE5E8;

  /* alias semantici — tema chiaro */
  --bg-app:var(--n-000);
  --bg-sunken:var(--n-050);
  --surface:var(--n-000);
  --surface-raised:#FFFFFF;
  --surface-inverse:var(--n-900);
  --ink:var(--n-900);
  --body:var(--n-700);
  --muted:var(--n-600);
  --faint:var(--n-400);
  --on-inverse:var(--n-050);
  --hair:var(--n-100);
  --rule:var(--n-150);
  --strong:var(--n-200);
  --brand:var(--n-900);
  --on-brand:var(--n-000);
  --accent:var(--rust);
  --accent-strong:var(--rust-strong);

  /* famiglie */
  --ff-display:'Schibsted Grotesk','IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --ff-sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-mono:'IBM Plex Mono','SF Mono',Consolas,'Courier New',monospace;

  /* scala tipografica: sette gradini del sistema + hero, riservato al pubblico */
  --fs-hero:64px; --fs-h2:34px; --fs-h3:20px; --fs-deck:18px;
  --fs-body:15px; --fs-dense:13.5px; --fs-meta:12px; --fs-label:10.5px;

  /* impalcatura */
  --wrap:1200px; --gut:40px; --band:88px;

  /* tre livelli d'ombra, più uno riservato alla riduzione di prodotto (V3) */
  --e1:0 1px 2px rgba(20,19,17,.06);
  --e2:0 2px 8px rgba(20,19,17,.08);
  --e3:0 10px 28px rgba(20,19,17,.14);
  --e-shot:0 10px 28px rgba(20,19,17,.10);

  --ease:cubic-bezier(.2,.6,.2,1);
  color-scheme:light;
}

/* tema scuro: la rampa si rovescia, gli accenti si schiariscono */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg-app:var(--n-900); --bg-sunken:#0E0D0C;
    --surface:var(--n-850); --surface-raised:var(--n-800);
    --surface-inverse:var(--n-000);
    --ink:var(--n-000); --body:var(--n-100); --muted:var(--n-300); --faint:var(--n-500);
    --on-inverse:var(--n-900);
    --hair:var(--n-800); --rule:var(--n-700); --strong:var(--n-600);
    --brand:var(--n-000); --on-brand:var(--n-900);
    --accent:#C06B54; --accent-strong:#C06B54;
    --moss:#8CA183; --ochre:#C79A5C; --fjord:#7E99A8;
    --e1:0 1px 2px rgba(0,0,0,.30);
    --e2:0 2px 8px rgba(0,0,0,.38);
    --e3:0 10px 28px rgba(0,0,0,.48);
    --e-shot:0 10px 28px rgba(0,0,0,.42);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg-app:var(--n-900); --bg-sunken:#0E0D0C;
  --surface:var(--n-850); --surface-raised:var(--n-800);
  --surface-inverse:var(--n-000);
  --ink:var(--n-000); --body:var(--n-100); --muted:var(--n-300); --faint:var(--n-500);
  --on-inverse:var(--n-900);
  --hair:var(--n-800); --rule:var(--n-700); --strong:var(--n-600);
  --brand:var(--n-000); --on-brand:var(--n-900);
  --accent:#C06B54; --accent-strong:#C06B54;
  --moss:#8CA183; --ochre:#C79A5C; --fjord:#7E99A8;
  --e1:0 1px 2px rgba(0,0,0,.30);
  --e2:0 2px 8px rgba(0,0,0,.38);
  --e3:0 10px 28px rgba(0,0,0,.48);
  --e-shot:0 10px 28px rgba(0,0,0,.42);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg-app:var(--n-000); --bg-sunken:var(--n-050);
  --surface:var(--n-050); --surface-raised:#FFFFFF;
  --surface-inverse:var(--n-900);
  --ink:var(--n-900); --body:var(--n-700); --muted:var(--n-600); --faint:var(--n-400);
  --on-inverse:var(--n-050);
  --hair:var(--n-100); --rule:var(--n-150); --strong:var(--n-200);
  --brand:var(--n-900); --on-brand:var(--n-000);
  --accent:var(--rust); --accent-strong:var(--rust-strong);
  --moss:#5A6B54; --ochre:#A67C44; --fjord:#4A6472;
  --e1:0 1px 2px rgba(20,19,17,.06);
  --e2:0 2px 8px rgba(20,19,17,.08);
  --e3:0 10px 28px rgba(20,19,17,.14);
  --e-shot:0 10px 28px rgba(20,19,17,.10);
  color-scheme:light;
}

/* ─── 2 · Reset misurato ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
body{
  margin:0; background:var(--bg-app); color:var(--body);
  font-family:var(--ff-sans); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;}
[hidden]{display:none!important;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}
::selection{background:var(--n-900);color:var(--n-000);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) ::selection{background:var(--n-000);color:var(--n-900);}}

h1,h2,h3,h4{font-family:var(--ff-display);color:var(--ink);margin:0;text-wrap:balance;font-weight:600;}
h1{font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.025em;font-weight:700;}
h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em;}
h4{font-family:var(--ff-sans);font-size:14px;line-height:1.4;font-weight:600;}
p{margin:0;}
strong{color:var(--ink);font-weight:600;}
a{color:var(--ink);text-decoration:none;}
a:not([class]){border-bottom:1px solid var(--strong);padding-bottom:1px;}
a:not([class]):hover{border-bottom-color:var(--ink);}
ul,ol{margin:0;padding:0;}
abbr[title]{text-decoration:none;border-bottom:1px dotted var(--faint);cursor:help;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--on-brand);padding:10px 16px;
  font-size:13px;font-weight:600;border-radius:0 0 6px 0;
}
.skip:focus{left:0;}

/* ─── 3 · Impalcatura ──────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.band{padding:var(--band) 0;border-top:1px solid var(--hair);}
.band.tight{padding:56px 0;}
.band.sunken{background:var(--bg-sunken);}
.band.first{border-top:0;}
.band.inverse{background:var(--surface-inverse);color:var(--n-300);border-top:0;}
.band.inverse h2,.band.inverse h3,.band.inverse strong{color:var(--on-inverse);}
.band.inverse .deck{color:var(--n-300);}
.band.inverse .eyebrow{color:var(--n-500);}
.band.inverse .eyebrow::after{background:rgba(148,142,131,.28);}

.eyebrow{
  font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--hair);}
.eyebrow.tight::after{display:none;}
.eyebrow.ink{color:var(--ink);}

.deck{font-size:var(--fs-deck);line-height:1.5;color:var(--muted);max-width:64ch;}
.body-s{font-size:var(--fs-dense);line-height:1.55;color:var(--muted);}
.fine{font-size:var(--fs-meta);line-height:1.45;color:var(--faint);}
.mono{font-family:var(--ff-mono);}
.caps{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;}
.tnum{font-variant-numeric:tabular-nums;}
.lead-tight{max-width:26ch;}
.stack{display:flex;flex-direction:column;}
.stack.g8{gap:8px;} .stack.g12{gap:12px;} .stack.g14{gap:14px;}
.stack.g20{gap:20px;} .stack.g26{gap:26px;} .stack.g32{gap:32px;}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt14{margin-top:14px;}
.mt20{margin-top:20px;} .mt24{margin-top:24px;} .mt28{margin-top:28px;} .mt32{margin-top:32px;}
.mb12{margin-bottom:12px;} .mb14{margin-bottom:14px;} .mb20{margin-bottom:20px;}
.mb24{margin-bottom:24px;} .mb28{margin-bottom:28px;} .mb32{margin-bottom:32px;}

/* ─── 4 · Bottoni ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border-radius:6px;
  font-family:var(--ff-sans);font-size:14px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;cursor:pointer;
  transition:background-color 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease);
}
.btn.fill{background:var(--brand);color:var(--on-brand);}
.btn.fill:hover{background:var(--n-800);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.fill:hover{background:var(--n-100);}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--strong);}
.btn.ghost:hover{border-color:var(--ink);}
.btn.quiet{background:transparent;color:var(--muted);height:36px;padding:0 4px;font-weight:500;}
.btn.quiet:hover{color:var(--ink);}
.btn.sm{height:36px;padding:0 14px;font-size:13px;}
.btn.inv{background:var(--n-000);color:var(--n-900);}
.btn.inv:hover{background:#FFFFFF;}
.band.inverse .btn.ghost{color:var(--n-000);border-color:rgba(251,250,248,.32);}
.band.inverse .btn.ghost:hover{border-color:var(--n-000);}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;}

/* ─── 5 · Barra d'annuncio ─────────────────────────────────────────────── */
.ann{
  background:var(--n-900);color:var(--n-000);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;
  min-height:34px;display:flex;align-items:center;
}
.ann .wrap{display:flex;align-items:center;gap:14px;width:100%;}
.ann .dot{width:6px;height:6px;border-radius:999px;background:#C06B54;flex:none;}
.ann .sep{flex:1;height:1px;background:rgba(251,250,248,.18);}
.ann a{color:var(--n-000);border-bottom:1px solid rgba(251,250,248,.4);padding-bottom:1px;}
.ann a:hover{border-bottom-color:var(--n-000);}
.ann .txt{color:var(--n-100);}
.ann .close{
  background:none;border:0;color:var(--n-400);cursor:pointer;
  font-family:var(--ff-mono);font-size:14px;line-height:1;padding:4px 0 4px 8px;flex:none;
}
.ann .close:hover{color:var(--n-000);}
@media (max-width:900px){.ann .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.ann .sep{display:none;}}

/* ─── 6 · Header ───────────────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:50;height:68px;display:flex;align-items:center;
  background:var(--surface);border-bottom:1px solid var(--hair);
  transition:box-shadow 180ms var(--ease);
}
.hd[data-scrolled="1"]{box-shadow:var(--e1);}
.hd .wrap{display:flex;align-items:center;gap:28px;width:100%;}
.wordmark{display:flex;align-items:baseline;gap:5px;flex:none;border:0;}
.wordmark b{font-family:var(--ff-display);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.wordmark span{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.1em;color:var(--faint);}
.nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500;}
.nav a{color:var(--body);padding:6px 0;border-bottom:1.5px solid transparent;}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);}
.acct{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none;}
.hd-rule{width:1px;height:24px;background:var(--rule);flex:none;}
.lang{display:flex;align-items:center;font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;color:var(--faint);}
.lang a{color:var(--faint);border:0;}
.lang a:hover{color:var(--ink);}
.lang [aria-current="true"]{color:var(--ink);font-weight:600;}
.lang i{font-style:normal;padding:0 5px;color:var(--strong);}
.burger{display:none;background:none;border:1px solid var(--strong);border-radius:6px;height:36px;padding:0 12px;
  font-family:var(--ff-sans);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}

.theme-toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--rule);border-radius:6px;
  height:36px;padding:0 10px;
  font-family:var(--ff-mono);font-size:12px;font-weight:500;
  color:var(--muted);cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease);
}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink);background:var(--surface);}
.theme-icon{font-size:13px;line-height:1;display:inline-block;}
.theme-label{display:inline-block;}

/* pannello a scomparsa, sotto 860 px */
.panel{display:none;border-bottom:1px solid var(--hair);background:var(--surface);}
.panel[data-open="1"]{display:block;}
.panel ul{list-style:none;}
.panel li{border-top:1px solid var(--hair);}
.panel li:first-child{border-top:0;}
.panel a{display:block;padding:14px 0;font-size:15px;font-weight:500;color:var(--body);border:0;}
.panel a[aria-current="page"]{color:var(--ink);font-weight:600;}
.panel-theme{padding:14px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);}
.panel .pane-cta{padding:16px 0 20px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rule);}

@media (max-width:1080px){.nav{gap:16px;font-size:13.5px;}.hd .wrap{gap:18px;}}
@media (max-width:860px){
  .nav{display:none;}
  .acct .btn.fill{display:none;}
  .burger{display:inline-flex;align-items:center;}
}
@media (max-width:560px){
  .acct .lang,.acct .hd-rule,.acct .btn.quiet{display:none;}
  .acct .theme-toggle .theme-label{display:none;}
  .acct .theme-toggle{padding:0 8px;}
}

/* ─── 7 · Hero ─────────────────────────────────────────────────────────── */
.hero{border-top:0;padding:76px 0;}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start;}
.hero-narrow{max-width:56ch;}
.chipline{
  display:inline-flex;align-items:center;gap:7px;padding:4px 10px;
  border:1px solid var(--hair);border-radius:999px;
  font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.tick{width:5px;height:5px;border-radius:999px;background:var(--moss);flex:none;}

/* riduzione di prodotto: la consolă disegnata in scala, dichiarata tale */
.shot{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--bg-sunken);box-shadow:var(--e-shot);}
.shot-top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--n-900);color:var(--n-000);}
.shot-top b{font-family:var(--ff-display);font-size:12px;font-weight:700;}
.shot-top .t{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-left:auto;}
.shot-body{padding:12px;display:flex;flex-direction:column;gap:10px;}
.shot-card{background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:10px 12px;}
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.kv .k{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.kv .v{font-family:var(--ff-mono);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;}
.minirow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:6px 0;border-top:1px solid var(--hair);font-size:11px;}
.minirow.first{border-top:0;}
.minirow .m{font-family:var(--ff-mono);color:var(--faint);}

.chain{display:flex;align-items:center;}
.chain .blk{
  flex:1;min-width:0;height:26px;border:1px solid var(--moss);border-radius:4px;
  display:grid;place-items:center;font-family:var(--ff-mono);font-size:9.5px;color:var(--moss);
  background:rgba(90,107,84,.06);overflow:hidden;
}
.chain .lnk{width:10px;height:1px;background:var(--moss);flex:none;}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:32px;}
}

/* ─── 8 · Terna delle cifre ────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);border-radius:10px;background:var(--surface);overflow:hidden;}
.stat{padding:24px;border-left:1px solid var(--hair);}
.stat:first-child{border-left:0;}
.stat .n{font-family:var(--ff-display);font-size:40px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;}
.stat .n small{font-size:16px;font-weight:600;letter-spacing:0;margin-left:2px;}
.stat.urgent .n{color:var(--accent-strong);}
.stat .lbl{margin-top:10px;font-size:var(--fs-dense);line-height:1.45;color:var(--muted);}
.stat .src{margin-top:8px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}
.rule-flag{display:inline-block;width:20px;height:2px;background:var(--accent-strong);margin-bottom:12px;}
@media (max-width:820px){.stats{grid-template-columns:1fr;}.stat{border-left:0;border-top:1px solid var(--hair);}.stat:first-child{border-top:0;}}

/* ─── 9 · Griglie generiche rigate ─────────────────────────────────────── */
.g2,.g3,.g4{display:grid;gap:20px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:820px){.g2,.g3{grid-template-columns:1fr;}}
@media (max-width:560px){.g4{grid-template-columns:1fr;}}

.ruled{border:1px solid var(--hair);border-radius:10px;background:var(--surface);}
.ruled>.rb-head{
  padding:10px 16px;border-bottom:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.ruled>.rb-body{padding:16px;}
.ruled.pad{padding:24px;}

/* riquadri affiancati dentro un unico bordo */
.split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair);border-radius:10px;overflow:hidden;}
.split.three{grid-template-columns:repeat(3,1fr);}
.split-col{padding:28px;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:14px;}
.split-col:first-child{border-left:0;}
.split-col.fill{background:var(--bg-sunken);}
@media (max-width:900px){
  .split,.split.three{grid-template-columns:1fr;}
  .split-col{border-left:0;border-top:1px solid var(--hair);}
  .split-col:first-child{border-top:0;}
}

.ck{display:flex;gap:10px;font-size:var(--fs-dense);line-height:1.5;color:var(--body);}
.ck::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--strong);margin-top:8px;flex:none;}
.ck.ok::before{background:var(--moss);}
.ck.no::before{background:var(--strong);opacity:.5;}
ul.cks{list-style:none;display:flex;flex-direction:column;gap:9px;}
ul.cks li{display:flex;gap:10px;font-size:var(--fs-dense);line-height:1.5;color:var(--muted);}
ul.cks li::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--strong);margin-top:8px;flex:none;}

/* ─── 10 · Indice dei moduli ───────────────────────────────────────────── */
.mods{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);}
.mod{padding:24px;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);}
.mod:nth-child(3n){border-right:0;padding-right:0;}
.mod:nth-child(3n+1){padding-left:0;}
.mod-i{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--faint);}
.mod h3{margin:10px 0 8px;font-size:18px;}
.mod p{font-size:var(--fs-dense);line-height:1.55;color:var(--muted);}
.mod .art{margin-top:10px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}
@media (max-width:900px){
  .mods{grid-template-columns:repeat(2,1fr);}
  .mod:nth-child(3n),.mod:nth-child(3n+1){border-right:1px solid var(--hair);padding-right:24px;padding-left:24px;}
  .mod:nth-child(2n){border-right:0;padding-right:0;}
  .mod:nth-child(2n+1){padding-left:0;}
}
@media (max-width:560px){
  .mods{grid-template-columns:1fr;}
  .mod,.mod:nth-child(2n),.mod:nth-child(2n+1),.mod:nth-child(3n),.mod:nth-child(3n+1){border-right:0;padding-left:0;padding-right:0;}
}

/* ─── 11 · Passi su un filetto ─────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);}
.step{padding:26px 24px 0;border-top:2px solid var(--ink);border-left:1px solid var(--hair);}
.step:first-child{padding-left:0;border-left:0;}
.step .no{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;color:var(--ink);font-weight:600;}
.step h3{margin:10px 0 8px;font-size:16px;}
.step p{font-size:var(--fs-dense);line-height:1.5;color:var(--muted);}
.steps.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.steps,.steps.three{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){
  .steps,.steps.three{grid-template-columns:1fr;row-gap:28px;}
  .step{padding-left:0;border-left:0;}
}

/* ─── 12 · Fascia eGov ─────────────────────────────────────────────────── */
.egov-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair);border-radius:10px;background:var(--surface);overflow:hidden;}
.egov-c{padding:20px;border-left:1px solid var(--hair);}
.egov-c:first-child{border-left:0;}
.egov-c .nm{font-family:var(--ff-display);font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.egov-c .nm em{font-style:normal;color:var(--fjord);}
.egov-c p{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:6px;}
.egov-c .cost{margin-top:10px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}
@media (max-width:900px){.egov-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.egov-row{grid-template-columns:1fr;}.egov-c{border-left:0;border-top:1px solid var(--hair);}.egov-c:first-child{border-top:0;}}

/* ─── 13 · Prezzi ──────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;}
.tier{border:1px solid var(--hair);border-radius:10px;background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:14px;}
.tier.rec{border-color:var(--ink);border-width:1.5px;box-shadow:var(--e2);}
.tier .rib{font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.tier .rib.void{color:var(--faint);}
.tier .price{font-family:var(--ff-display);font-size:30px;font-weight:700;letter-spacing:-.025em;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;}
.tier .price small{display:block;font-family:var(--ff-mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:6px;}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid var(--hair);}
.tier li{font-size:13px;line-height:1.45;color:var(--muted);display:flex;gap:9px;}
.tier li::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--strong);margin-top:7px;flex:none;}
.tier .btn{margin-top:auto;}
@media (max-width:1000px){.tiers{grid-template-columns:1fr;}}

/* ─── 14 · Tabelle ─────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:10px;background:var(--surface);}
table{border-collapse:collapse;width:100%;font-size:var(--fs-dense);}
caption{text-align:left;padding:12px 14px;font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--hair);}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--hair);vertical-align:top;}
thead th{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:500;white-space:nowrap;}
tbody tr:last-child td{border-bottom:0;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--ff-mono);}
td.mid,th.mid{text-align:center;}
.yes{color:var(--moss);font-weight:600;}
.nope{color:var(--faint);}

/* ─── 15 · Badge ───────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--rule);font-family:var(--ff-mono);font-size:var(--fs-label);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.badge.now{border-color:var(--moss);color:var(--moss);}
.badge.next{border-color:var(--rule);color:var(--faint);}
.badge.pick{border-color:var(--ink);color:var(--ink);border-width:1.5px;}

/* ─── 16 · Note e avvisi ───────────────────────────────────────────────── */
.note{
  border:1px solid var(--rule);border-left:2px solid var(--ink);border-radius:0 8px 8px 0;
  background:var(--surface);padding:16px 18px;
}
.note .caps{color:var(--faint);display:block;margin-bottom:6px;}
.note p{font-size:var(--fs-dense);line-height:1.55;color:var(--muted);}
.note.draft{border-left-color:var(--ochre);}
.note.legal{border-left-color:var(--fjord);}

/* ─── 17 · Domande frequenti (details nativo) ──────────────────────────── */
.faq{border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--hair);}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 0;
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;
  font-size:15px;font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-family:var(--ff-mono);font-size:14px;color:var(--faint);line-height:1;padding-top:3px;
}
.faq details[open] summary::after{content:"\2212";}
.faq summary:hover::after{color:var(--ink);}
.faq .an{padding:0 0 20px;font-size:var(--fs-dense);line-height:1.6;color:var(--muted);max-width:80ch;}
.faq .an p+p{margin-top:10px;}

/* ─── 18 · PWA ─────────────────────────────────────────────────────────── */
.pwa-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:center;}
@media (max-width:900px){.pwa-grid{grid-template-columns:1fr;gap:28px;}}
.phone{width:216px;border:8px solid var(--n-900);border-radius:28px;overflow:hidden;background:var(--surface);box-shadow:var(--e3);margin:0 auto;}
.phone-status{height:18px;background:var(--n-900);}
.phone-body{padding:22px 18px 26px;background:var(--bg-sunken);display:flex;flex-direction:column;align-items:center;gap:14px;min-height:300px;}
.inst-list{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:10px;overflow:hidden;}
.inst{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:16px 18px;border-top:1px solid var(--hair);align-items:start;}
.inst:first-child{border-top:0;}
.inst .os{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-top:2px;}
.inst .how{font-size:13px;line-height:1.5;color:var(--body);}

/* ─── 19 · Piede ───────────────────────────────────────────────────────── */
.ft{background:var(--n-900);color:var(--n-400);padding:40px 0 28px;border-top:1px solid rgba(251,250,248,.10);}
.ft-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:32px;}
.ft h3{font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--n-500);margin:0 0 12px;font-weight:500;}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.ft li{font-size:13px;color:var(--n-300);}
.ft a{color:var(--n-300);border:0;}
.ft a:hover{color:var(--n-000);}
.ft .wordmark b{color:var(--n-000);}
.ft .blurb{font-size:12.5px;line-height:1.5;color:var(--n-400);max-width:34ch;margin-top:12px;}
.ft .legal{
  margin-top:32px;padding-top:18px;border-top:1px solid rgba(251,250,248,.10);
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--n-500);
}
.ft .legal a{color:var(--n-500);}
.ft .legal a:hover{color:var(--n-000);}
.ft .legal .push{margin-left:auto;}
@media (max-width:1000px){.ft-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr;gap:24px;}.ft .legal .push{margin-left:0;}}

/* ─── 20 · Testata di pagina interna ──────────────────────────────────── */
.phead{padding:56px 0 40px;border-top:0;}
.phead h1{font-size:var(--fs-h2);}
.phead.big h1{font-size:48px;}
.crumb{
  display:flex;align-items:center;gap:8px;margin-bottom:18px;
  font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.crumb a{color:var(--faint);border:0;}
.crumb a:hover{color:var(--ink);}
.crumb span{color:var(--strong);}

/* ─── 21 · Prosa lunga (guida, testi legali) ───────────────────────────── */
.prose{max-width:70ch;font-size:15.5px;line-height:1.68;color:var(--body);}
.prose>*+*{margin-top:16px;}
.prose h2{font-size:24px;margin-top:44px;}
.prose h3{font-size:17px;font-family:var(--ff-sans);margin-top:32px;}
.prose ul,.prose ol{padding-left:22px;}
.prose li+li{margin-top:6px;}
.prose ol{list-style:decimal;}
.prose ul{list-style:disc;}
.prose li::marker{color:var(--faint);}
.prose .tbl-wrap,.prose .note{margin-top:24px;}
.prose code{font-family:var(--ff-mono);font-size:13px;background:var(--bg-sunken);padding:1px 5px;border-radius:4px;}
.prose blockquote{margin:24px 0;padding-left:18px;border-left:2px solid var(--rule);color:var(--muted);font-size:14.5px;}
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:56px;align-items:start;}
.doc-grid.left{grid-template-columns:236px minmax(0,1fr);}
@media (max-width:1000px){.doc-grid,.doc-grid.left{grid-template-columns:1fr;gap:32px;}.toc{position:static!important;}}
.toc{position:sticky;top:92px;}
.toc h4{font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:12px;}
.toc ul{list-style:none;display:flex;flex-direction:column;gap:9px;border-left:1px solid var(--hair);}
.toc a{display:block;padding-left:14px;margin-left:-1px;border-left:1.5px solid transparent;font-size:13px;color:var(--muted);}
.toc a:hover{color:var(--ink);}
.toc a.on{color:var(--ink);border-left-color:var(--ink);font-weight:500;}

/* ─── 22 · Moduli (contatto, demo, valutazione) ────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:600;color:var(--ink);}
.field .hint{font-size:var(--fs-meta);color:var(--faint);}
.field input,.field select,.field textarea{
  font-family:var(--ff-sans);font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  padding:10px 12px;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none;}
.field textarea{min-height:110px;resize:vertical;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-meta);line-height:1.5;color:var(--muted);}
.consent input{margin-top:2px;flex:none;width:auto;}

/* ─── 23 · Valutazione di conformità (strumento) ───────────────────────── */
.quiz{border:1px solid var(--rule);border-radius:10px;background:var(--surface);overflow:hidden;}
.quiz-head{padding:14px 20px;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:14px;}
.quiz-count{font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;color:var(--faint);white-space:nowrap;}
.quiz-body{padding:28px 20px 24px;}
.quiz-q{font-family:var(--ff-display);font-size:21px;line-height:1.25;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.quiz-why{margin-top:10px;font-size:var(--fs-meta);line-height:1.5;color:var(--faint);}
.quiz-opts{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
.quiz-opt{
  display:flex;align-items:center;gap:12px;padding:14px 16px;width:100%;
  border:1px solid var(--rule);border-radius:8px;background:var(--surface);
  font-family:var(--ff-sans);font-size:14.5px;color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color 120ms var(--ease),background-color 120ms var(--ease);
}
.quiz-opt:hover{border-color:var(--ink);background:var(--bg-sunken);}
.quiz-opt .key{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--rule);border-radius:4px;padding:2px 6px;flex:none;
}
.quiz-foot{padding:14px 20px;border-top:1px solid var(--hair);display:flex;align-items:center;gap:12px;}
.quiz-foot .btn{margin-left:auto;}
.score{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;}
.score .big{font-family:var(--ff-display);font-size:56px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;}
.score .big small{font-size:20px;color:var(--faint);}
.gaps{list-style:none;display:flex;flex-direction:column;}
.gaps li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:14px 0;border-top:1px solid var(--hair);align-items:start;}
.gaps li:first-child{border-top:0;}
.gaps .g-i{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);padding-top:3px;}
.gaps .g-t{font-size:14px;color:var(--ink);font-weight:600;}
.gaps .g-d{font-size:var(--fs-meta);color:var(--muted);margin-top:3px;line-height:1.5;}
@media (max-width:560px){
  .score{grid-template-columns:1fr;gap:14px;}
  .gaps li{grid-template-columns:auto 1fr;}
  .gaps li .badge{grid-column:2;justify-self:start;}
}

/* ─── 24 · Stato del servizio ──────────────────────────────────────────── */
.st-list{border:1px solid var(--hair);border-radius:10px;background:var(--surface);overflow:hidden;}
.st-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:16px 20px;border-top:1px solid var(--hair);align-items:center;}
.st-row:first-child{border-top:0;}
.st-row .nm{font-size:14px;font-weight:600;color:var(--ink);}
.st-row .ds{font-size:var(--fs-meta);color:var(--muted);margin-top:2px;}
.st-dot{width:7px;height:7px;border-radius:999px;background:var(--moss);flex:none;}
.st-dot.warn{background:var(--ochre);}
.st-dot.down{background:var(--rust);}
.st-val{font-family:var(--ff-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.spark{display:flex;align-items:flex-end;gap:2px;height:24px;}
.spark i{width:4px;background:var(--moss);border-radius:1px;opacity:.55;}
@media (max-width:640px){.st-row{grid-template-columns:1fr auto;}.spark{display:none;}}

/* ─── 25 · Riquadri di rimando ─────────────────────────────────────────── */
/* I filetti sono il vuoto tra le celle, non un bordo di ciascuna: così il
   componente regge due, tre o quattro schede e qualunque riordino a capo,
   senza reimpostare il primo elemento di ogni riga. */
.jump{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:10px;overflow:hidden;
}
.jump a{padding:22px 24px;display:flex;flex-direction:column;gap:6px;border-bottom:0;background:var(--surface);}
.jump a:hover{background:var(--bg-sunken);}
.jump .caps{color:var(--faint);}
.jump .t{font-family:var(--ff-display);font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.jump .d{font-size:var(--fs-meta);color:var(--muted);line-height:1.5;}

/* ─── 26 · Cronologia (roadmap, fasi) ──────────────────────────────────── */
.phases{list-style:none;border-left:1px solid var(--rule);}
.phases li{padding:0 0 26px 24px;position:relative;}
.phases li::before{
  content:"";position:absolute;left:-4.5px;top:6px;width:8px;height:8px;border-radius:999px;
  background:var(--surface);border:1.5px solid var(--strong);
}
.phases li.done::before{background:var(--moss);border-color:var(--moss);}
.phases li.now::before{background:var(--ink);border-color:var(--ink);}
.phases .ph{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.phases .pt{font-size:15px;font-weight:600;color:var(--ink);margin-top:4px;}
.phases .pd{font-size:var(--fs-dense);color:var(--muted);margin-top:4px;line-height:1.55;}

/* ─── 27 · Stampa (i testi legali si stampano) ─────────────────────────── */
@media print{
  .ann,.hd,.panel,.ft,.band.inverse,.toc,.jump{display:none!important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .band{padding:0;border:0;}
  .prose{max-width:none;}
  a{border:0!important;}
  h1,h2,h3{color:#000;}
}

/* ─── 28 · Cerneala — ciò che è stato letto è scritto ──────────────────────
   Sotto la linea di lettura la pagina è una bozza: presente, leggibile, al
   trenta per cento. Nulla si sposta e nulla parte da opacità zero, così la
   pagina a riposo — senza JavaScript, con movimento ridotto, in miniatura —
   è già completa. La classe `ink-t` la aggiunge lo script; l'interruttore è
   `data-reveal` sull'elemento radice. */
html[data-reveal="ink"] .ink-t{transition:opacity 240ms var(--ease);}
html[data-reveal="ink"] .ink-t:not(.inked){opacity:.3;}
@media (prefers-reduced-motion:reduce){
  html[data-reveal="ink"] .ink-t:not(.inked){opacity:1;}
}

/* ─── 29 · Nodul — dove sei, sul filetto che c'è già ───────────────────────
   Un punto di cinque pixel sul filetto inferiore dell'header, al posto della
   sottolineatura. Il filetto è il filo, il punto è l'anello. Lo stato non è
   affidato al punto: `aria-current` resta sulla voce. */
.hd .ind{
  position:absolute;left:0;bottom:-2px;width:5px;height:5px;border-radius:999px;
  background:var(--ink);opacity:0;pointer-events:none;
  transform:translateX(calc(var(--nx,0px) - 2.5px));
  transition:transform 240ms var(--ease),opacity 180ms var(--ease);
}
.hd .ind[data-on="1"]{opacity:1;}
.hd .ind[data-on="0"]{display:none;}
.nav a[aria-current="page"]{border-bottom-color:transparent;}
@media (max-width:860px){.hd .ind{display:none;}}

/* L'anello che si chiude: negli indici laterali sostituisce la barra sinistra. */
.toc a,.toc a.on{border-left-color:transparent;position:relative;}
.toc a::before{
  content:"";position:absolute;left:-5px;top:.45em;width:9px;height:9px;border-radius:999px;
  border:1px solid var(--strong);background:var(--bg-app);
  transition:background 180ms var(--ease),border-color 180ms var(--ease);
}
.toc a.on::before{background:var(--ink);border-color:var(--ink);}

/* La sottolineatura che si scrive: il filo, in piccolo, sui link in prosa.
   Due strati — il filetto a riposo e l'inchiostro che entra da sinistra —
   perché il bordo trasparente lascia passare il fondo. */
main a:not([class]){
  border-bottom:1px solid transparent;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--strong),var(--strong));
  background-origin:border-box;background-repeat:no-repeat;
  background-size:0 1px,100% 1px;background-position:left bottom,left bottom;
  transition:background-size 150ms var(--ease);
}
main a:not([class]):hover,main a:not([class]):focus-visible{background-size:100% 1px,100% 1px;}
.crumb a,.toc a,.jump a,.mods a{background-image:none;border-bottom:0;}

/* ─── 30 · Sigiliul — l'impronta della pagina ──────────────────────────────
   Tre forme prima di tre colori, la stessa grammatica di CosChainIntegrity:
   tratteggiato è lo stato di nascita, pieno solo dopo una verifica riuscita,
   ruggine con filetto sinistro solo per la verigă mancante (404). */
.seal{
  display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 9px 0 8px;border-radius:4px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--strong);white-space:nowrap;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-size:0% 100%;background-position:left;
  transition:background-size 240ms var(--ease),color 120ms var(--ease) 140ms,border-color 120ms var(--ease);
}
.seal .hx{
  font-size:11px;letter-spacing:.04em;text-transform:none;font-variant-numeric:tabular-nums;
  color:var(--ink);transition:color 120ms var(--ease) 140ms;
}
.seal .hx i{font-style:normal;color:var(--faint);padding:0 2px;}
.seal.verified{border-style:solid;border-color:var(--ink);background-size:100% 100%;color:var(--bg-app);}
.seal.verified .hx,.seal.verified .hx i{color:var(--bg-app);}
.seal.anomaly{border-style:solid;border-color:var(--accent);border-left-width:3px;color:var(--accent);}
.seal.anomaly .hx,.seal.anomaly .hx i{color:var(--accent);}
.prov{font-family:var(--ff-mono);font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--faint);}

/* Nel piede il fondo è sempre inchiostro, in entrambi i temi. */
.ft .legal .push{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ft .seal{color:var(--n-400);border-color:var(--n-600);background-image:linear-gradient(var(--n-000),var(--n-000));}
.ft .seal .hx{color:var(--n-100);}
.ft .seal .hx i{color:var(--n-500);}
.ft .seal.verified{border-color:var(--n-000);color:var(--n-900);}
.ft .seal.verified .hx,.ft .seal.verified .hx i{color:var(--n-900);}
.ft .prov{color:var(--n-500);}
@media print{.seal{display:inline-flex!important;}}

/* La catena dell'hero passa alla grammatica delle tre forme (deviazione V8):
   tratteggiata finché non è verificata, piena quando lo è. */
.chain .blk{border:1px dashed var(--strong);color:var(--faint);background:transparent;}
.chain .blk.ok{border-style:solid;border-color:var(--ink);background:var(--ink);color:var(--bg-app);}
.chain .lnk{background:var(--strong);}
.chain .lnk.ok{background:var(--ink);}
.chain-cap{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.05em;color:var(--faint);margin-top:8px;}
.chain-cap.ok{color:var(--moss);}

/* ─── 31 · Firul — a che passo sei ─────────────────────────────────────────
   Nella valutazione il filo prende il posto della barra: un anello per
   obbligo, con il nome del passo, e la cerneala fino al punto raggiunto.
   L'etichetta resta l'unità reale, mai una percentuale. */
.quiz-head{flex-direction:column;align-items:stretch;gap:10px;}
.qfir{position:relative;height:13px;}
.qfir .route{position:absolute;left:5px;right:5px;top:6px;height:1px;background:var(--hair);}
.qfir i{
  position:absolute;left:5px;top:6px;height:1px;display:block;width:0;
  max-width:calc(100% - 10px);background:var(--ink);transition:width 240ms var(--ease);
}
.qfir ol{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:flex;justify-content:space-between;}
.qfir li{
  width:11px;height:11px;margin-top:1px;border-radius:999px;
  border:1px solid var(--strong);background:var(--surface);
  transition:background 180ms var(--ease),border-color 180ms var(--ease);cursor:help;
}
.qfir li.done{background:var(--ink);border-color:var(--ink);}
.qfir li.cur{border-color:var(--ink);border-width:1.5px;}

/* ─── 32 · Telefono — la stessa pagina, alla misura del pollice ────────────
   §7.2 del documento di fondazione: «il sito non ha un tema a parte, cambia
   solo il ritmo». Qui non cambia nessuna regola di componente: cambiano i
   numeri da cui tutti i componenti dipendono già, a due gradini. Un telefono
   da 390 px riceve 18 px di margine invece di 40 e un titolo da 33 px invece
   di 64 — il resto della cascata segue da sé. */

@media (max-width:900px){
  :root{--gut:28px; --band:64px; --fs-hero:44px; --fs-h2:28px; --fs-deck:17px;}
  .band.tight{padding:44px 0;}
}
@media (max-width:560px){
  :root{--gut:18px; --band:48px; --fs-hero:33px; --fs-h2:26px; --fs-h3:18px; --fs-deck:16px;}
  .band.tight{padding:36px 0;}
  .hero{padding:44px 0;}
  .stat{padding:20px 0;}
  .stat .n{font-size:34px;}
}

/* La tacca e il bordo curvo dei telefoni: il margine non scende mai sotto
   la zona sicura, e la pagina resta centrata quando non ce n'è. */
@supports (padding:max(0px)){
  .wrap{
    padding-left:max(var(--gut),env(safe-area-inset-left));
    padding-right:max(var(--gut),env(safe-area-inset-right));
  }
  .ft{padding-bottom:env(safe-area-inset-bottom);}
}

/* Bersagli da 44 px dove il dito è l'unico strumento. Il pulsante del menu e
   quello del tema erano alti 36: bastavano al mouse, non al pollice. */
@media (max-width:860px){
  .burger,.hd .theme-toggle{height:44px;}
  .burger{padding:0 14px;}
  .lang a{padding:6px 2px;}
}

/* Il pannello a scomparsa diventa un foglio: scorre da solo, non trascina la
   pagina sotto di sé, e si ferma prima del bordo inferiore dello schermo.
   `dvh` tiene conto della barra degli indirizzi che appare e scompare. */
@media (max-width:860px){
  .hd{height:56px;}
  .panel{max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;}
  .panel .wrap{padding-bottom:env(safe-area-inset-bottom);}
  .panel a{padding:15px 0;}
  .panel-lang{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 0;border-top:1px solid var(--hair);
  }
  .panel-lang .lang{font-size:12px;}
  .panel-lang .lang a{padding:8px 6px;}
}
html[data-panel-open]{overflow:hidden;}

/* ─── 33 · Tabelle al telefono — una carta per riga, mai lo scorrimento ────
   Regola dichiarata nel documento: «una tabella densa diventa una lista di
   carte, mai uno scorrimento orizzontale». L'intestazione non sparisce, si
   sposta: ogni cella se la porta accanto, presa da `data-label` scritto alla
   pubblicazione. È una pseudo-etichetta, quindi il testo della pagina — e
   con esso l'impronta del sigillo — resta identico a quello del desktop.
   Le tabelle senza `data-label` (intestazioni su più righe, celle unite)
   conservano lo scorrimento: meglio una tabella che scorre di una tabella
   che mente. */
@media (max-width:560px){
  .tbl-wrap:has(td[data-label]){overflow-x:visible;border:0;background:transparent;border-radius:0;}
  .tbl-wrap:has(td[data-label]) table{display:block;font-size:13px;}
  .tbl-wrap:has(td[data-label]) caption{
    display:block;padding:0 0 10px;border-bottom:0;
  }
  .tbl-wrap:has(td[data-label]) thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .tbl-wrap:has(td[data-label]) tbody{display:block;}
  .tbl-wrap:has(td[data-label]) tbody tr{
    display:block;margin-bottom:12px;padding:4px 14px 10px;
    border:1px solid var(--hair);border-radius:10px;background:var(--surface);
  }
  .tbl-wrap:has(td[data-label]) tbody td{
    display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:12px;align-items:baseline;
    padding:9px 0;border:0;border-top:1px solid var(--hair);
  }
  .tbl-wrap:has(td[data-label]) tbody td:first-child{border-top:0;}
  .tbl-wrap:has(td[data-label]) tbody td::before{
    content:attr(data-label);
    font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.08em;
    text-transform:uppercase;color:var(--faint);line-height:1.5;
  }
  /* La prima cella è il soggetto della riga: nessuna etichetta, a piena
     larghezza, come il titolo della carta. */
  .tbl-wrap:has(td[data-label]) tbody td:first-child{
    display:block;padding-top:12px;font-size:15px;font-weight:600;color:var(--ink);
  }
  .tbl-wrap:has(td[data-label]) tbody td:first-child::before{content:none;}
}

/* L'intestazione è appiccicosa: senza questo un'ancora finisce sotto di essa,
   e su un telefono «sotto di essa» sono 56 px su 800 di schermo. */
[id]{scroll-margin-top:84px;}
@media (max-width:860px){[id]{scroll-margin-top:72px;}}