/* ==========================================================================
   nitido. — foglio di stile del tema
   Portato da mockup/v6 (approvato da Antonio il 16/10/2026), che sostituisce v4/v5
   come specifica visiva: stessi colori e stesso carattere, usati come ritagli a
   inchiostro, bande piene e scala tipografica grande. I token sotto :root sono la
   fonte di verità: theme.json si genera da qui con tools/build-theme-json.mjs.
   Non scrivere colori o misure altrove.
   ========================================================================== */

/* ---------- 0. CARATTERE ----------
   TikTok Sans variabile (asse del peso, 300–900), sottoinsieme latino, self-hostato.
   SIL OFL 1.1 — vedi assets/fonts/OFL.txt. Nessuna chiamata a fonts.gstatic.com. */
@font-face{
  font-family:"TikTok Sans";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("../fonts/TikTokSans-latin-wght.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 1. TOKEN ---------- */
:root{
  /* Brand — invariati, da Immagine coordinata */
  --nit-magenta:#c3207f;
  --nit-magenta-dark:#a01a65;
  --nit-magenta-hot:#ff1f8e;   /* solo illustrazioni, mai testo: 3.60:1 su bianco */
  --nit-magenta-soft:#fbe3f0;
  --nit-lime:#9cff42;
  --nit-lime-dark:#85dd35;
  --nit-lime-soft:#effbe0;
  --nit-ink:#262626;
  --nit-ink-2:#4d4d4d;
  --nit-paper:#f5f5f5;
  --nit-white:#ffffff;
  --nit-line:#e4e4e4;
  --nit-line-strong:#cfcfcf;

  /* Semantici — tema chiaro */
  --color-primary:var(--nit-magenta);
  --color-primary-hover:var(--nit-magenta-dark);
  --color-primary-contrast:#ffffff;
  --color-accent:var(--nit-lime);
  --color-accent-hover:var(--nit-lime-dark);
  --color-accent-contrast:var(--nit-ink);
  --color-no:var(--nit-magenta);

  --text-strong:var(--nit-ink);
  --text-body:#3a3a3a;
  --text-muted:#595959;          /* 6.42:1 su carta */
  --text-on-dark:#f1eff0;
  --text-on-dark-2:#bdb7ba;

  --surface-page:var(--nit-paper);
  --surface-card:var(--nit-white);   /* v6: il bianco esiste solo come carta del ritaglio */
  --surface-ink:#1d1d1d;
  --surface-magenta:var(--nit-magenta);
  --surface-lime:var(--nit-lime);
  --surface-tint:var(--nit-magenta-soft);
  --surface-tint-lime:var(--nit-lime-soft);
  --border-subtle:var(--nit-line);
  --border-strong:var(--nit-line-strong);
  --border-ink:var(--nit-ink);       /* contorni e fili: sempre inchiostro pieno */

  --focus-ring-color:var(--nit-magenta);

  /* Tipografia — una famiglia: il contrasto lo fanno peso e scala */
  --font-sans:"TikTok Sans","Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-extrabold:800; --fw-black:900;
  --fs-mega:clamp(56px,11vw,168px);        /* numeri a tutta scala */
  --fs-display:clamp(42px,7vw,104px);
  /* 100px, non 104: oltre i 1440 px la colonna dell'H1 resta di 677 px e il corpo più grande la sfonda (R4, 18/10) */
  --fs-h1:clamp(42px,7vw,100px);
  --fs-h2:clamp(34px,5vw,72px);
  --fs-h3:clamp(22px,2.4vw,30px);
  --fs-h4:20px;
  --fs-row:clamp(21px,2.7vw,36px);         /* righe dell'indice delle situazioni */
  --fs-statement:clamp(21px,2.4vw,30px);   /* paragrafi del manifesto */
  --fs-lead:clamp(18px,1.7vw,21px);
  --fs-body:17px;
  --fs-body-sm:15px;
  --fs-caption:13px;
  --fs-overline:12px;
  --lh-mega:.86; --lh-display:.94; --lh-head:1.0; --lh-row:1.12; --lh-statement:1.3;
  --lh-tight:1.1; --lh-snug:1.2; --lh-body:1.6;
  --ls-mega:-.055em; --ls-display:-.045em; --ls-heading:-.035em; --ls-row:-.02em; --ls-overline:.12em;

  /* Marker: resta per i casi fuori da H1 e chiusura (v2: banda più bassa del box di riga) */
  --mark-band:.84em;
  --mark-shift:.04em;
  --mark-pad-x:.28em;

  /* Spazio e griglia */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:144px;
  --section-y:clamp(56px,7vw,104px);
  --section-y-loose:clamp(72px,11vw,160px);
  --section-y-tight:clamp(36px,4.5vw,64px);
  --w-read:720px;      /* articoli, glossario */
  --w-base:1120px;
  --w-wide:1320px;     /* la pagina */
  --container-pad:clamp(16px,4vw,48px);

  /* Ritaglio: contorno a inchiostro + ombra piena sfalsata, l'unica ombra del sito */
  --radius-xs:4px; --radius-sm:6px; --radius-md:6px; --radius-lg:6px; --radius-xl:6px; --radius-pill:999px;
  --border-width-ink:2.5px;
  --outline:var(--border-width-ink) solid var(--border-ink);
  --shadow-ink:4px 4px 0 var(--border-ink);
  --shadow-ink-lg:8px 8px 0 var(--border-ink);
  --tilt-a:-1.6deg; --tilt-b:1.1deg; --tilt-c:-.7deg;

  /* Movimento: niente rimbalzo sull'interfaccia (v6) */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-instant:80ms; --dur-fast:160ms; --dur-base:260ms;

  --illo-fondo:transparent;
}

/* ---------- 2. TEMA SCURO ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-primary:#ff5fb0;              /* 6.23:1 su #131313 — il brand non regge sul buio */
    --color-primary-hover:#ff8ac4;
    --color-primary-contrast:#1d1116;
    --color-no:#ff5fb0;
    --text-strong:#f1eff0;
    --text-body:#cfc9cc;
    --text-muted:#a39da0;
    --surface-page:#131313;
    --surface-card:#1d1d1d;
    --surface-ink:#0b0b0b;
    --surface-magenta:#8d1a5c;
    --surface-tint:#2a0f1e;
    --surface-tint-lime:#20300f;
    --border-subtle:#332f31;
    --border-strong:#4a4548;
    --border-ink:#f1eff0;
    --focus-ring-color:#ff5fb0;
    --shadow-ink:4px 4px 0 #000;
    --shadow-ink-lg:8px 8px 0 #000;
    --illo-fondo:#f1eff0; --illo-pad:.5rem;
  }
}
:root[data-theme="dark"]{
  --color-primary:#ff5fb0; --color-primary-hover:#ff8ac4; --color-primary-contrast:#1d1116; --color-no:#ff5fb0;
  --text-strong:#f1eff0; --text-body:#cfc9cc; --text-muted:#a39da0;
  --surface-page:#131313; --surface-card:#1d1d1d; --surface-ink:#0b0b0b; --surface-magenta:#8d1a5c;
  --surface-tint:#2a0f1e; --surface-tint-lime:#20300f;
  --border-subtle:#332f31; --border-strong:#4a4548; --border-ink:#f1eff0;
  --focus-ring-color:#ff5fb0;
  --shadow-ink:4px 4px 0 #000; --shadow-ink-lg:8px 8px 0 #000;
  --illo-fondo:#f1eff0; --illo-pad:.5rem;
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:var(--font-sans); font-weight:var(--fw-regular);
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--text-strong); font-weight:var(--fw-black); font-style:normal; line-height:var(--lh-tight);
  letter-spacing:var(--ls-heading); text-wrap:balance; overflow-wrap:anywhere; min-width:0}
h1{font-size:var(--fs-h1); line-height:var(--lh-display); letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-h2); line-height:var(--lh-head)}
h3{font-size:var(--fs-h3); line-height:var(--lh-tight); letter-spacing:-.02em; font-weight:var(--fw-extrabold)}
h4{font-size:var(--fs-h4); line-height:1.25; letter-spacing:-.015em; font-weight:var(--fw-extrabold)}
p{text-wrap:pretty}
a{color:var(--color-primary); text-decoration:none; text-underline-offset:.18em; text-decoration-thickness:2px}
a:hover{color:var(--color-primary-hover); text-decoration:underline}
img,svg{display:block; max-width:100%}
strong,b{font-weight:var(--fw-bold); color:var(--text-strong)}
ul,ol{padding-left:1.2em}
::selection{background:var(--nit-lime); color:var(--nit-ink)}

/* Focus — WCAG 2.2: visibile ovunque, non coperto */
:focus-visible{outline:3px solid var(--focus-ring-color); outline-offset:3px}

/* Skip link */
.nit-skip{
  position:absolute; left:var(--container-pad); top:-100px; z-index:200;
  background:var(--nit-ink); color:var(--nit-lime);
  padding:var(--space-3) var(--space-4); font-weight:var(--fw-bold);
}
.nit-skip:focus{top:var(--space-3); text-decoration:none}

/* ---------- 4. UTILITY DI BRAND ---------- */
.nit-container{width:100%; max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--container-pad)}
.nit-container--wide{max-width:var(--w-wide)}
.nit-container--read{max-width:calc(var(--w-read) + 2 * var(--container-pad))}
.nit-read{max-width:var(--w-read)}
.nit-lead{font-size:var(--fs-lead); color:var(--text-body); max-width:52ch}
.visually-hidden,.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.nit-overline{font-size:var(--fs-overline); font-weight:var(--fw-bold); letter-spacing:var(--ls-overline);
  text-transform:uppercase; color:var(--text-strong); display:block}

/* Il marker classico: resta per i rari usi fuori da H1 e chiusura */
.nit-mark,.nit-mark--lime{
  background-image:linear-gradient(var(--color-primary),var(--color-primary));
  background-repeat:no-repeat; background-size:100% var(--mark-band);
  background-position:0 calc(50% + var(--mark-shift));
  color:var(--color-primary-contrast); padding-inline:var(--mark-pad-x);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.nit-mark--lime{background-image:linear-gradient(var(--nit-lime),var(--nit-lime)); color:var(--nit-ink)}

/* Il nastro: la frase chiave dell'H1 e della chiusura, stampata su una striscia appena storta.
   Sostituisce il marker in quei due punti soli: la parola chiave, non ogni titolo. */
h1 .nit-mark,.nit-cta h2 .nit-mark{
  background:var(--color-primary); color:var(--color-primary-contrast);
  padding:0 .16em .04em; box-shadow:var(--shadow-ink);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
/* Una striscia per riga, non un riquadro: le righe del nastro respirano */
h1:has(.nit-mark),.nit-cta h2:has(.nit-mark){line-height:1.08}
h1 .nit-mark--lime,.nit-cta h2 .nit-mark--lime{background:var(--nit-lime); color:var(--nit-ink)}
/* Sulla chiusura lime il nastro torna magenta: lime su lime non si vedrebbe */
.nit-field-lime.nit-cta h2 .nit-mark{background:var(--nit-magenta); color:#fff}

/* La seconda frase di un titolo: stesso corpo, peso leggero. Nei contenuti è la
   «sottolineatura» (nit-underline): il testo non cambia, cambia come si stampa. */
h2 .nit-underline,h3 .nit-underline{display:block; font-weight:var(--fw-light); letter-spacing:-.03em}
.nit-underline{background-image:linear-gradient(var(--color-primary),var(--color-primary));
  background-repeat:no-repeat; background-position:0 92%; background-size:100% .13em; padding-bottom:.02em}
h1 .nit-underline,h2 .nit-underline,h3 .nit-underline{background-image:none; padding-bottom:0}
h1 .nit-underline{display:block; font-weight:var(--fw-light); letter-spacing:-.03em}

/* Ritaglio: carta bianca con contorno a inchiostro e ombra piena */
.nit-ink-outline,.nit-ritaglio{background:var(--surface-card); border:var(--outline); border-radius:var(--radius-sm); box-shadow:var(--shadow-ink-lg)}

/* ---------- 5. SEZIONI E CAMPI ---------- */
.nit-section{padding-block:var(--section-y)}
.nit-section--tight{padding-block:var(--section-y-tight)}
.nit-section--loose{padding-block:var(--section-y-loose)}
/* v6: il bianco non è più un campo. Il campo «bianco» dei contenuti si stampa su carta. */
.nit-field-paper,.nit-field-card{background:var(--surface-page)}
.nit-field-tint{background:var(--surface-tint)}
.nit-field-ink{background:var(--surface-ink); color:var(--text-on-dark-2);
  --border-ink:var(--text-on-dark); --focus-ring-color:var(--nit-lime)}
.nit-field-ink h1,.nit-field-ink h2,.nit-field-ink h3,.nit-field-ink h4,.nit-field-ink strong{color:var(--text-on-dark)}
.nit-field-ink .nit-overline{color:var(--nit-lime)}
.nit-field-ink a:not(.nit-btn){color:var(--nit-lime)}
.nit-field-magenta{background:var(--surface-magenta); color:#fff; --border-ink:var(--nit-ink); --focus-ring-color:var(--nit-lime)}
.nit-field-magenta h2,.nit-field-magenta h3,.nit-field-magenta strong,.nit-field-magenta .nit-overline{color:#fff}
.nit-field-magenta a:not(.nit-btn){color:#fff; text-decoration:underline}
.nit-field-lime{background:var(--surface-lime); color:var(--nit-ink); --border-ink:var(--nit-ink); --focus-ring-color:var(--nit-ink)}
.nit-field-lime h2,.nit-field-lime h3,.nit-field-lime h4,.nit-field-lime strong{color:var(--nit-ink)}
.nit-field-lime a:not(.nit-btn){color:var(--nit-ink); text-decoration:underline; font-weight:var(--fw-bold)}
.nit-field-lime .nit-kpi__note,.nit-field-lime p{color:var(--nit-ink)}
.nit-field-ink,.nit-field-magenta,.nit-field-lime{padding-block:var(--section-y-loose)}

/* Testa di sezione: titolo grande, introduzione accanto e in basso. Su mobile una colonna. */
.nit-section-head{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-5) var(--space-8);
  align-items:end; margin-bottom:var(--space-8)}
.nit-section-head > *{grid-column:1}
.nit-section-head > p{grid-column:2; grid-row:1; font-size:var(--fs-lead); max-width:44ch; color:inherit}
.nit-section-head > .nit-overline{display:none}   /* v6: niente etichette sopra le sezioni */
@media (max-width:820px){
  .nit-section-head{grid-template-columns:minmax(0,1fr); margin-bottom:var(--space-7)}
  .nit-section-head > p{grid-column:1; grid-row:auto}
}

/* ---------- 6. BOTTONI ---------- */
.nit-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; white-space:nowrap;
  min-height:52px; padding:12px 26px;                 /* WCAG 2.2 target 44px */
  font-family:inherit; font-size:17px; font-weight:var(--fw-extrabold); letter-spacing:-.01em;
  border:var(--outline); border-radius:var(--radius-sm); box-shadow:var(--shadow-ink); cursor:pointer;
  text-decoration:none;
  transition:transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
/* Premuto, il bottone scende nella sua ombra: l'unico segnale, niente rimbalzo */
.nit-btn:hover{text-decoration:none; transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--border-ink)}
.nit-btn:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--border-ink)}
.nit-btn--primary{background:var(--color-primary); color:var(--color-primary-contrast)}
.nit-btn--primary:hover{background:var(--color-primary-hover); color:var(--color-primary-contrast)}
.nit-btn--lime{background:var(--nit-lime); color:var(--nit-ink)}
.nit-btn--lime:hover{background:var(--nit-lime-dark); color:var(--nit-ink)}
.nit-btn--ghost{background:var(--surface-card); color:var(--text-strong)}
.nit-btn--ghost:hover{color:var(--text-strong)}
.nit-btn--lg{min-height:64px; padding:16px 34px; font-size:20px}
.nit-btn--block{width:100%}
@media (max-width:400px){ .nit-btn--lg{font-size:17px; padding-inline:20px} }
/* Sotto i 360 px un'etichetta lunga va a capo piuttosto che uscire dallo schermo */
@media (max-width:359px){ .nit-btn{white-space:normal; text-align:center} }
.nit-btn[aria-busy="true"]{opacity:.7; cursor:progress}

/* Link-freccia: l'azione secondaria, sottolineata in magenta */
.nit-freccia{font-weight:var(--fw-bold); color:var(--text-strong); text-decoration:underline;
  text-decoration-color:var(--color-primary); text-decoration-thickness:3px; text-underline-offset:.22em}
.nit-freccia:hover{color:var(--color-primary)}

/* ---------- 7. HEADER — slab; fissa in alto solo su computer ---------- */
.nit-header{position:relative; z-index:100; background:var(--surface-page); border-bottom:var(--outline)}
/* Fissa da subito, senza animazione: sempre nello stesso posto, niente pagina che si muove mentre leggi.
   Solo dove lo spazio c'è (da 961 px di larghezza e 640 di altezza: non sui portatili bassi né con lo zoom
   al 200%); sotto, la chiamata la porta la barra in basso. --nit-testata sposta le colonne ferme e le ancore
   (scroll-padding: il fuoco da tastiera non finisce sotto la testata, WCAG 2.4.11). */
:root{--nit-testata:0px}
@media (min-width:961px) and (min-height:640px){
  :root{--nit-testata:calc(84px + var(--border-width-ink))}
  html{scroll-padding-top:calc(var(--nit-testata) + var(--space-4))}
  .nit-header{position:sticky; top:0}
}
.nit-header__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); min-height:84px}
.nit-logo{font-size:30px; font-weight:var(--fw-black); letter-spacing:-.06em; line-height:1; color:var(--text-strong)}
.nit-logo:hover{text-decoration:none; color:var(--text-strong)}
.nit-logo i{color:var(--color-primary); font-style:normal}
.nit-nav{display:flex; align-items:center; gap:var(--space-6)}
.nit-nav__list{display:flex; gap:var(--space-5); list-style:none; padding:0; margin:0}
.nit-nav__list a{display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; font-size:16px;
  font-weight:var(--fw-bold); color:var(--text-strong); border-bottom:3px solid transparent}
.nit-nav__list a:hover,.nit-nav__list a[aria-current="page"]{border-bottom-color:var(--color-primary); color:var(--text-strong); text-decoration:none}
.nit-burger{display:none; min-height:44px; padding:0 var(--space-4); align-items:center; justify-content:center;
  font:inherit; font-weight:var(--fw-bold); background:transparent; color:var(--text-strong);
  border:var(--outline); border-radius:var(--radius-sm); cursor:pointer}
@media(max-width:960px){
  .nit-header__inner{gap:var(--space-4)}
  .nit-nav__list{display:none}
  .nit-burger{display:inline-flex}
  .nit-nav > .nit-btn{display:none}     /* su mobile la chiamata la porta la barra in basso */
  .nit-nav__list.is-open{display:flex; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--surface-page);
    border-bottom:var(--outline); padding:var(--space-3) var(--container-pad) var(--space-5)}
  .nit-nav__list.is-open a{min-height:52px; width:100%; font-size:20px}
}

/* ---------- 8. HERO — una frase, sbilanciata a sinistra ---------- */
.nit-hero{background:var(--surface-page); padding-block:var(--space-8) var(--section-y)}
.nit-hero__grid{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:var(--space-6); align-items:end}
.nit-hero__grid--solo{grid-template-columns:minmax(0,1fr)}
/* 20ch: con 13ch (v6) l'H1 andava oltre le tre righe anche su computer (R4, misura del 18/10) */
.nit-hero h1{max-width:20ch}
.nit-hero__art{justify-self:end; width:min(100%,420px)}
.nit-hero__piede{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-6) var(--space-8);
  margin-top:var(--space-8); padding-top:var(--space-6); border-top:var(--outline); align-items:start}
.nit-hero__piede .nit-lead{margin:0}
.nit-hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); align-items:center}
.nit-hero__reassure{flex-basis:100%; font-size:var(--fs-body-sm); color:var(--text-muted)}
@media(max-width:820px){
  .nit-hero{padding-top:var(--space-6)}
  .nit-hero__grid,.nit-hero__piede{grid-template-columns:minmax(0,1fr)}
  .nit-hero__art{justify-self:start; width:min(72%,300px); order:-1}
}

/* Raggi pop: il segno grafico delle chiusure */
.nit-raggi{width:100%; max-width:280px; justify-self:end; color:var(--nit-lime); pointer-events:none}

/* ---------- 9. CARD → RITAGLIO ---------- */
.nit-card{position:relative; background:var(--surface-card); border:var(--outline); border-radius:var(--radius-sm);
  padding:var(--space-6); box-shadow:var(--shadow-ink-lg)}
.nit-card--top-accent{border-top:var(--outline)}     /* v6: niente bordino magenta in alto */
.nit-card h3{margin-bottom:var(--space-3)}
.nit-card h3 a{color:var(--text-strong)}
.nit-card p{font-size:var(--fs-body-sm)}
.nit-grid{display:grid; gap:var(--space-6)}
.nit-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.nit-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* ---------- 10. INDICE DELLE SITUAZIONI (righe-problema) ---------- */
.nit-problems{list-style:none; padding:0; margin:0; border-bottom:var(--outline)}
.nit-problems li{border-top:var(--outline)}
.nit-problem{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2) var(--space-6); align-items:baseline;
  padding:var(--space-5) var(--space-3); color:var(--text-strong);
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
.nit-problem__q{font-size:var(--fs-row); line-height:var(--lh-row); letter-spacing:var(--ls-row); font-weight:var(--fw-extrabold)}
.nit-problem__a{font-size:var(--fs-body-sm); font-weight:var(--fw-bold); white-space:nowrap; color:var(--text-muted)}
.nit-problem__a::after{content:" →"; color:var(--color-primary)}
.nit-problem:hover,.nit-problem:focus-visible{background:var(--color-primary); color:var(--color-primary-contrast); text-decoration:none}
.nit-problem:hover .nit-problem__a,.nit-problem:focus-visible .nit-problem__a,
.nit-problem:hover .nit-problem__a::after,.nit-problem:focus-visible .nit-problem__a::after{color:var(--color-primary-contrast)}
.nit-problem:focus-visible{outline-offset:-3px; outline-color:var(--nit-ink)}
@media(max-width:640px){ .nit-problem{grid-template-columns:minmax(0,1fr); padding-inline:0} }

/* ---------- 11. KPI — numeri a tutta scala ---------- */
.nit-kpi{border-top:var(--outline); padding-top:var(--space-5)}
.nit-kpi__value{font-size:clamp(44px,6vw,80px); font-weight:var(--fw-black); letter-spacing:-.05em;
  line-height:.92; color:var(--text-strong); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; min-width:0}
.nit-kpi__value small{font-size:.42em; letter-spacing:-.03em; font-weight:var(--fw-extrabold)}
.nit-kpi__label{margin-top:var(--space-3); font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--text-strong)}
.nit-kpi__note{margin-top:var(--space-2); font-size:var(--fs-body-sm); color:var(--text-muted)}
.nit-kpi__link{margin-top:var(--space-4); font-weight:var(--fw-bold)}
.nit-kpi-grid{margin-block:var(--space-5)}
.nit-field-ink .nit-kpi__value,.nit-field-ink .nit-kpi__label{color:var(--text-on-dark)}
.nit-field-ink .nit-kpi__value{color:var(--nit-lime)}
.nit-field-ink .nit-kpi__note{color:var(--text-on-dark-2)}

/* ---------- 12. SÌ / NO ---------- */
.nit-fit{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:var(--outline)}
.nit-fit__col{padding:var(--space-7) var(--space-6)}
.nit-fit__col--yes{background:var(--surface-lime); color:var(--nit-ink); --border-ink:var(--nit-ink)}
.nit-fit__col--no{background:var(--surface-page); border-left:var(--outline)}
.nit-fit__col h3{font-size:var(--fs-h2); line-height:var(--lh-head); letter-spacing:var(--ls-heading); font-weight:var(--fw-black)}
.nit-fit__col--yes h3{color:var(--nit-ink)}
.nit-fit__list{list-style:none; padding:0; margin:var(--space-6) 0 0; display:grid; gap:var(--space-4)}
.nit-fit__list li{display:grid; grid-template-columns:1.6em minmax(0,1fr); gap:var(--space-2); font-size:var(--fs-lead); line-height:1.4}
.nit-fit__col--yes .nit-fit__list li{color:var(--nit-ink)}
.nit-fit__list li::before{font-weight:var(--fw-black)}
.nit-fit__col--yes li::before{content:"✓"}
.nit-fit__col--no li::before{content:"✗"; color:var(--color-no)}
@media(max-width:820px){
  .nit-fit{grid-template-columns:minmax(0,1fr)}
  .nit-fit__col--no{border-left:0; border-top:var(--outline)}
}

/* ---------- 13. PASSI — una linea a inchiostro ---------- */
.nit-steps{list-style:none; margin:0; counter-reset:step; position:relative; display:grid; gap:var(--space-7); padding:0 0 0 var(--space-9)}
/* Anche dentro la prosa (pagina di conferma): la regola degli elenchi non deve schiacciare la linea */
.nit-prose ol.nit-steps{padding-left:var(--space-9); gap:var(--space-7)}
@media(max-width:820px){ .nit-prose ol.nit-steps{padding-left:var(--space-8)} }
.nit-steps::before{content:""; position:absolute; left:23px; top:8px; bottom:8px; width:var(--border-width-ink); background:var(--border-ink)}
.nit-step{position:relative; counter-increment:step; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:var(--space-3) var(--space-7); grid-auto-flow:dense; align-items:start}
.nit-step > *{grid-column:2}
.nit-step h3{grid-column:1; grid-row:1; padding-top:var(--space-2)}
.nit-step .nit-illo{grid-column:1; grid-row:2 / span 6}
.nit-step p{font-size:var(--fs-lead); max-width:52ch}
.nit-step__n{grid-column:auto; grid-row:auto; position:absolute; left:calc(-1 * var(--space-9)); top:0; display:grid; place-items:center; width:48px; height:48px;
  background:var(--color-primary); color:var(--color-primary-contrast); font-weight:var(--fw-black); font-size:20px;
  border:var(--outline); border-radius:var(--radius-sm); box-shadow:var(--shadow-ink); font-variant-numeric:tabular-nums}
.nit-step__n::before{content:counter(step)}
@media(max-width:820px){
  .nit-steps{padding-left:var(--space-8)}
  .nit-steps::before{left:19px}
  .nit-step__n{left:calc(-1 * var(--space-8)); width:40px; height:40px; font-size:17px}
  .nit-step{grid-template-columns:minmax(0,1fr)}
  .nit-step > *,.nit-step h3,.nit-step .nit-illo{grid-column:1; grid-row:auto}
}

/* ---------- 14. DOMANDE ---------- */
.nit-faq{border-bottom:var(--outline)}
.nit-faq__item{border-top:var(--outline)}
.nit-faq__h{margin:0; font-size:inherit; letter-spacing:normal}
.nit-faq__q{width:100%; display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:var(--space-5); align-items:center;
  min-height:56px; padding-block:var(--space-5); background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:clamp(19px,1.9vw,24px); line-height:1.25; font-weight:var(--fw-extrabold);
  letter-spacing:-.015em; color:var(--text-strong); text-align:left}
.nit-faq__q:hover{color:var(--color-primary)}
.nit-faq__icon{display:grid; place-items:center; width:40px; height:40px; border:var(--outline); border-radius:var(--radius-sm);
  background:var(--surface-card); font-size:22px; font-weight:var(--fw-black); color:var(--text-strong);
  transition:background-color var(--dur-fast) var(--ease-out)}
.nit-faq__q[aria-expanded="true"] .nit-faq__icon{background:var(--nit-lime); color:var(--nit-ink); font-size:0}
.nit-faq__q[aria-expanded="true"] .nit-faq__icon::before{content:"−"; font-size:22px}
.nit-faq__a{padding-bottom:var(--space-6); max-width:var(--w-read); font-size:var(--fs-lead)}
.nit-faq__a p + p{margin-top:var(--space-3)}
.nit-faq__a:not([hidden]){animation:nit-apri var(--dur-base) var(--ease-out)}
@keyframes nit-apri{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.nit-faq-block + .nit-faq-block{margin-top:var(--space-7)}

/* ---------- 15. CHIUSURA (banda CTA) ---------- */
.nit-cta{position:relative; overflow:hidden}
.nit-cta__grid{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:var(--space-7); align-items:center}
.nit-cta h2{font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); max-width:16ch}
.nit-cta p{margin-top:var(--space-6); font-size:var(--fs-lead); max-width:50ch}
.nit-cta__azioni{display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); align-items:center; margin-top:var(--space-7)}
.nit-cta__azioni .nit-cta__mail{margin:0; font-size:var(--fs-body-sm)}
.nit-field-lime .nit-raggi{color:var(--nit-magenta)}
/* Tazzina e raggi: il punto da cui partono i raggi (circa 90%, 80% del disegno) cade sulla bocca
   della tazzina (circa 37%, 16% dell'immagine). Misure in % della larghezza, così scala tutto insieme. */
.nit-cta__visual{position:relative; justify-self:end; width:100%; max-width:320px; padding-top:31%}
.nit-cta__visual .nit-raggi{position:absolute; top:0; left:-16%; width:59%; max-width:none}
.nit-cta__tazzina{display:block; width:100%; height:auto}
@media(max-width:820px){
  .nit-cta__grid{grid-template-columns:minmax(0,1fr)}
  .nit-cta .nit-raggi{display:none}
  .nit-cta__visual{display:none}
}

/* ---------- 16. FOOTER — statement ---------- */
.nit-footer{background:var(--surface-ink); color:var(--text-on-dark-2); padding-block:var(--section-y) var(--space-6);
  --border-ink:var(--text-on-dark); --focus-ring-color:var(--nit-lime)}
.nit-footer a{color:var(--text-on-dark-2)}
.nit-footer a:hover{color:var(--nit-lime)}
.nit-footer__frase{font-size:clamp(28px,4.4vw,60px); line-height:1.02; letter-spacing:-.04em; font-weight:var(--fw-black);
  color:var(--text-on-dark); max-width:24ch; text-wrap:balance}
.nit-footer__frase span{color:var(--nit-lime)}
.nit-footer__claim{margin-top:var(--space-4); font-size:var(--fs-lead); color:var(--text-on-dark-2); max-width:44ch}
.nit-footer__mail{display:inline-block; margin-top:var(--space-6); font-size:var(--fs-h3); font-weight:var(--fw-bold)}
.nit-footer a.nit-footer__mail{color:var(--nit-lime)}
.nit-footer__indice{display:grid; gap:var(--space-3); margin-top:var(--space-9); padding-top:var(--space-5); border-top:var(--outline)}
.nit-footer__indice > div{display:grid; grid-template-columns:9ch minmax(0,1fr); gap:var(--space-3) var(--space-6); align-items:baseline}
.nit-footer__title{font-size:var(--fs-body-sm); font-weight:var(--fw-bold); color:var(--text-on-dark)}
.nit-footer__list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-5); font-size:var(--fs-body-sm)}
.nit-footer__list a{display:inline-flex; align-items:center; min-height:32px; white-space:nowrap}
.nit-footer__bottom{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--space-4);
  margin-top:var(--space-8); font-size:var(--fs-caption)}
.nit-footer__bottom-links{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5)}
.nit-footer__marchio{font-size:clamp(44px,8vw,110px); line-height:.8; letter-spacing:-.07em; font-weight:var(--fw-black); color:var(--text-on-dark)}
.nit-footer__marchio i{color:var(--color-primary); font-style:normal}
@media(max-width:640px){ .nit-footer__indice > div{grid-template-columns:minmax(0,1fr); gap:var(--space-1)} }

/* ---------- 17. BARRA CTA MOBILE ---------- */
.nit-stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  background:var(--surface-page); border-top:var(--outline);
  padding:10px var(--container-pad); padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%); transition:transform var(--dur-base) var(--ease-out);
}
.nit-stickybar.is-visible{transform:translateY(0)}
@media(max-width:860px){ .nit-stickybar{display:block} body{padding-bottom:84px} }

/* Torna su: quadrato con il contorno e l'ombra dei pulsanti, in basso a destra.
   Nascosto con visibility, così finché non serve non entra nemmeno nell'ordine del Tab. */
.nit-su{
  position:fixed; right:var(--container-pad); bottom:24px; z-index:89;
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0;
  background:var(--surface-card); color:var(--text-strong); border:var(--outline); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-ink); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nit-su.is-visible{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.nit-su:hover{color:var(--color-primary)}
.nit-su:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--border-ink)}
@media(max-width:860px){ .has-stickybar .nit-su{bottom:calc(96px + env(safe-area-inset-bottom,0px))} }
@media print{ .nit-su{display:none} }

/* ---------- 18. FORME DELLE SEZIONI ----------
   La sezione prende la forma del suo contenuto (blocks/sezione/render.php): ogni
   pagina non ripete più la stessa sequenza di card. */

/* Numeri: banda lime, ogni numero su una riga a tutta scala */
.nit-forma-numeri .nit-kpi-grid{display:block; margin:0}
.nit-forma-numeri .nit-kpi{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--space-8);
  align-items:end; padding-block:var(--space-6)}
.nit-forma-numeri .nit-kpi:last-child{border-bottom:var(--outline)}
.nit-forma-numeri .nit-kpi > *{grid-column:2}
.nit-forma-numeri .nit-kpi__value{grid-column:1; grid-row:1 / span 4; align-self:end; font-size:var(--fs-mega);
  line-height:var(--lh-mega); letter-spacing:var(--ls-mega)}
.nit-forma-numeri .nit-kpi__label{font-size:var(--fs-h3); line-height:var(--lh-tight); letter-spacing:-.02em; font-weight:var(--fw-extrabold)}
.nit-forma-numeri .nit-prose{margin-top:var(--space-7)}
@media(max-width:820px){
  .nit-forma-numeri .nit-kpi{grid-template-columns:minmax(0,1fr)}
  .nit-forma-numeri .nit-kpi > *,.nit-forma-numeri .nit-kpi__value{grid-column:1; grid-row:auto}
}

/* Caso: il racconto a sinistra, la colonna dei numeri resta in vista */
.nit-caso{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-7) var(--space-8); align-items:start}
.nit-caso .nit-section-head{display:block; margin-bottom:0}
.nit-caso .nit-section-head h2{max-width:14ch}
.nit-caso .nit-section-head > p{margin-top:var(--space-6)}
.nit-caso__colonna{position:sticky; top:calc(var(--nit-testata) + var(--space-6))}
.nit-caso__colonna .nit-kpi-grid{display:block; margin:0; background:var(--surface-ink); color:var(--text-on-dark-2);
  border:var(--outline); border-radius:var(--radius-sm); box-shadow:var(--shadow-ink-lg); padding:var(--space-3) var(--space-6)}
.nit-caso__colonna .nit-kpi{border-top:0; padding-block:var(--space-5)}
.nit-caso__colonna .nit-kpi + .nit-kpi{border-top:var(--border-width-ink) solid var(--text-on-dark)}
.nit-caso__colonna .nit-kpi__value{font-size:clamp(56px,7vw,96px); color:var(--nit-lime)}
.nit-caso__colonna .nit-kpi__label{color:var(--text-on-dark)}
.nit-caso__colonna .nit-kpi__note{color:var(--text-on-dark-2)}
@media(max-width:860px){
  .nit-caso{grid-template-columns:minmax(0,1fr)}
  .nit-caso__colonna{position:static; order:-1}
}

/* Manifesto: su inchiostro, l'ultima frase del titolo in lime, i paragrafi grandi e spostati a destra */
.nit-forma-manifesto .nit-section-head{display:block}
.nit-forma-manifesto h2{max-width:16ch}
.nit-forma-manifesto h2 .nit-mark{display:block; background:none; padding:0; color:var(--nit-lime)}
.nit-forma-manifesto .nit-prose{max-width:46ch; margin-left:auto; margin-right:8%}
.nit-forma-manifesto .nit-prose p{font-size:var(--fs-statement); line-height:var(--lh-statement); color:var(--text-on-dark)}
.nit-forma-manifesto .nit-prose p + p{margin-top:var(--space-6); color:var(--text-on-dark-2)}
@media(max-width:820px){ .nit-forma-manifesto .nit-prose{margin-right:0} }

/* Metodo in home: tre parole in fila, il punto del marchio in magenta */
.nit-forma-parole .nit-steps{padding-left:0; gap:0}
.nit-forma-parole .nit-steps::before,.nit-forma-parole .nit-step__n,.nit-forma-parole .nit-illo{display:none}
.nit-forma-parole .nit-step{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-8);
  padding-block:var(--space-7); border-top:var(--outline); align-items:baseline}
.nit-forma-parole .nit-step:last-child{border-bottom:var(--outline)}
.nit-forma-parole .nit-step h3{font-size:var(--fs-h2); line-height:var(--lh-head); letter-spacing:var(--ls-heading);
  font-weight:var(--fw-black); padding-top:0}
.nit-forma-parole .nit-step h3::after{content:"."; color:var(--color-primary)}
@media(max-width:820px){ .nit-forma-parole .nit-step{grid-template-columns:minmax(0,1fr); padding-block:var(--space-6)} }

/* Listino: l'elenco dei prezzi su un ritaglio, il ragionamento accanto */
.nit-forma-listino .nit-full{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-5) var(--space-8); align-items:start}
.nit-forma-listino .nit-section-head{display:block; grid-column:1; margin:0}
.nit-forma-listino .nit-prose{display:contents}
.nit-forma-listino .nit-prose > *{grid-column:1; margin:0; font-size:var(--fs-lead); max-width:40ch}
.nit-forma-listino .nit-prose > ul{grid-column:2; grid-row:1 / span 4; max-width:none; list-style:none; margin:0;
  padding:var(--space-3) var(--space-6); display:block; background:var(--surface-card); border:var(--outline);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-ink-lg); transform:rotate(var(--tilt-c)); font-size:var(--fs-body-sm)}
.nit-forma-listino .nit-prose > ul li{padding-block:var(--space-5)}
.nit-forma-listino .nit-prose > ul li + li{border-top:var(--outline)}
/* In linea: il testo dopo il grassetto lo segue, anche quando comincia con una virgola */
.nit-forma-listino .nit-prose > ul strong{display:inline; font-size:var(--fs-h3); line-height:1.15;
  font-weight:var(--fw-black); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .nit-forma-listino .nit-full{grid-template-columns:minmax(0,1fr)}
  .nit-forma-listino .nit-prose > *,.nit-forma-listino .nit-prose > ul{grid-column:1; grid-row:auto}
  .nit-forma-listino .nit-prose > ul{transform:none; padding-inline:var(--space-5)}
}

/* Risorse: ritagli di misura diversa, appena storti, su rosa tenue */
.nit-forma-ritagli .nit-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-8) var(--space-7); align-items:start}
.nit-forma-ritagli .nit-card{padding:var(--space-6); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)}
.nit-forma-ritagli .nit-card:nth-child(odd){transform:rotate(var(--tilt-c))}
.nit-forma-ritagli .nit-card:nth-child(even){transform:rotate(var(--tilt-b)); margin-top:var(--space-9)}
.nit-forma-ritagli .nit-card:hover{transform:rotate(0) translate(-2px,-2px); box-shadow:10px 10px 0 var(--border-ink)}
.nit-forma-ritagli .nit-card p{font-size:var(--fs-body)}
.nit-card__apri{display:inline-block; margin-top:var(--space-4); font-weight:var(--fw-bold); color:var(--text-strong);
  text-decoration:underline; text-decoration-color:var(--color-primary); text-decoration-thickness:3px; text-underline-offset:.22em}
.nit-forma-ritagli .nit-card :is(h2,h3) a::after{content:""; position:absolute; inset:0}
.nit-forma-ritagli .nit-card :is(h2,h3) a:hover{text-decoration:underline; text-decoration-color:var(--color-primary); text-decoration-thickness:3px}
@media(max-width:820px){
  .nit-forma-ritagli .nit-grid{grid-template-columns:minmax(0,1fr)}
  .nit-forma-ritagli .nit-card:nth-child(even){margin-top:0}
}

/* Per chi sì / per chi no: due metà piene a tutta larghezza */
.nit-forma-sino{padding-bottom:0}
.nit-forma-sino .nit-section-head{margin-bottom:var(--section-y-tight)}
.nit-forma-sino .nit-fit{margin-inline:calc(50% - 50vw); border-inline:0}
.nit-forma-sino .nit-fit__col{padding-block:var(--section-y-tight)}
.nit-forma-sino .nit-fit__col--yes{padding-left:max(var(--container-pad), calc((100vw - var(--w-wide)) / 2 + var(--container-pad)))}
.nit-forma-sino .nit-fit__col--no{padding-right:max(var(--container-pad), calc((100vw - var(--w-wide)) / 2 + var(--container-pad)))}
@media(max-width:820px){
  .nit-forma-sino .nit-fit__col{padding-inline:var(--container-pad)}
}

/* Domande: il titolo resta fermo, le risposte scorrono */
.nit-domande{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--space-7) var(--space-8); align-items:start}
.nit-domande__testa{position:sticky; top:calc(var(--nit-testata) + var(--space-6))}
.nit-domande .nit-section-head{display:block; margin:0}
.nit-domande .nit-section-head > p{margin-top:var(--space-5)}
@media(max-width:860px){
  .nit-domande{grid-template-columns:minmax(0,1fr)}
  .nit-domande__testa{position:static}
}

/* ---------- 19. APERTURA DEL SERVIZIO — titolo e definizione affiancati ---------- */
.nit-apertura{padding-block:var(--space-6) var(--section-y)}
.nit-apertura__grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-7) var(--space-8);
  align-items:center; margin-top:var(--space-7)}
.nit-apertura__grid--solo{grid-template-columns:minmax(0,1fr)}
.nit-apertura .nit-h1-servizio{margin:0; max-width:20ch}
/* Fuori dalla griglia del servizio (es. caffè virtuale) la definizione va sotto l'H1, dritta */
.nit-apertura__def{max-width:var(--w-read); margin-top:var(--space-7)}
.nit-apertura__def .nit-definition{margin:0}
.nit-apertura__grid .nit-apertura__def{max-width:none; margin:0}
.nit-apertura__grid .nit-definition{transform:rotate(var(--tilt-b))}
.nit-apertura + .nit-section{border-top:var(--outline)}
.nit-apertura__grid .nit-apertura__lead{margin:0; align-self:end}
.nit-apertura__grid ~ *{margin-top:var(--space-6)}
.nit-apertura .nit-filters ul,.nit-apertura .nit-az ul{margin-top:0}

/* Cartellino: l'ambito di una voce, il settore di un caso. Prende il posto dei sopratitoli. */
.nit-tag{display:inline-block; margin-bottom:var(--space-4); padding:2px var(--space-3); background:var(--nit-lime); color:var(--nit-ink);
  border:var(--border-width-ink) solid var(--nit-ink); border-radius:var(--radius-xs); font-size:var(--fs-caption); font-weight:var(--fw-bold);
  transform:rotate(var(--tilt-c))}

/* Voci di glossario: un indice a righe, come le situazioni in home */
.nit-voci{list-style:none; padding:0; margin:0; border-bottom:var(--outline)}
.nit-voci li{border-top:var(--outline)}
.nit-voce{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:var(--space-2) var(--space-7); align-items:baseline;
  padding:var(--space-5) var(--space-3); color:var(--text-body);
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
.nit-voce__t{font-size:var(--fs-h3); line-height:var(--lh-tight); letter-spacing:-.02em; font-weight:var(--fw-black); color:var(--text-strong)}
.nit-voce__t::after{content:" →"; color:var(--color-primary)}
.nit-voce__d{font-size:var(--fs-body-sm)}
.nit-voce:hover,.nit-voce:focus-visible{background:var(--color-primary); color:var(--color-primary-contrast); text-decoration:none}
.nit-voce:hover .nit-voce__t,.nit-voce:focus-visible .nit-voce__t,.nit-voce:hover .nit-voce__t::after,.nit-voce:focus-visible .nit-voce__t::after{color:var(--color-primary-contrast)}
.nit-voce:focus-visible{outline-offset:-3px; outline-color:var(--nit-ink)}
@media(max-width:640px){ .nit-voce{grid-template-columns:minmax(0,1fr); padding-inline:0} }
@media(max-width:860px){
  .nit-apertura__grid{grid-template-columns:minmax(0,1fr)}
  .nit-apertura__grid .nit-definition{transform:none}
}

/* ---------- 20. ARTICOLO / GLOSSARIO ---------- */
.nit-article{display:grid; grid-template-columns:minmax(0,var(--w-read)) 280px; gap:var(--space-8); align-items:start}
@media(max-width:940px){ .nit-article{grid-template-columns:minmax(0,1fr)} }
.nit-breadcrumb{font-size:var(--fs-caption); color:var(--text-muted); margin-bottom:var(--space-4)}
.nit-breadcrumb ol{list-style:none; padding:0; margin:0; display:flex; gap:var(--space-2); flex-wrap:wrap}
.nit-breadcrumb li:not(:last-child)::after{content:"/"; margin-left:var(--space-2); color:var(--text-muted)}
.nit-breadcrumb a{color:var(--text-strong); font-weight:var(--fw-bold)}
.nit-definition{background:var(--surface-card); border:var(--outline); border-radius:var(--radius-sm); box-shadow:var(--shadow-ink-lg);
  padding:var(--space-6); margin-block:var(--space-6)}
.nit-definition p{font-size:var(--fs-body); line-height:1.6; color:var(--text-strong)}
.nit-definition p + p{margin-top:var(--space-3)}
.nit-prose h2{font-size:clamp(26px,3.2vw,40px); margin-top:var(--space-7); margin-bottom:var(--space-3)}
.nit-prose h3{margin-top:var(--space-6); margin-bottom:var(--space-2)}
.nit-prose p{margin-top:var(--space-4)}
.nit-prose ul{margin-top:var(--space-4); display:grid; gap:var(--space-2)}
.nit-prose > :first-child{margin-top:0}
.nit-full > .nit-prose{margin-top:var(--space-6)}
/* La prosa delle sezioni si legge al corpo del paragrafo d'apertura, non a quello delle note */
.nit-full > .nit-prose,.nit-caso__testo .nit-prose,.nit-domande .nit-prose{font-size:var(--fs-lead)}
.nit-caso__testo .nit-prose{margin-top:var(--space-5)}
.nit-full > .nit-section-head + .nit-prose{margin-top:0}
.nit-rail{display:grid; gap:var(--space-5); position:sticky; top:calc(var(--nit-testata) + var(--space-6))}
.nit-rail__box{background:var(--surface-card); border:var(--outline); border-radius:var(--radius-sm); padding:var(--space-5)}
.nit-rail__title{font-size:var(--fs-overline); letter-spacing:var(--ls-overline); text-transform:uppercase;
  color:var(--text-strong); font-weight:var(--fw-bold); margin-bottom:var(--space-3)}
.nit-rail__list{list-style:none; padding:0; margin:0; display:grid; gap:var(--space-1); font-size:var(--fs-body-sm)}
.nit-rail__list a{display:inline-flex; align-items:center; min-height:32px}
@media(max-width:940px){ .nit-rail{position:static} }

/* ---------- 21. TEMA — classi che nei mockup erano stili in linea ----------
   Nel tema nessuno style="" nel markup. */
.nit-field-magenta .nit-overline{color:#fff}
/* Pagine lunghe: le sezioni dopo la prima si impaginano quando si avvicinano allo schermo.
   Sul telefono il primo layout della home costava ~720 ms di CPU (PageSpeed: TBT 220–250 ms);
   così ~490. Escluse le sezioni con una colonna che resta ferma (sticky dentro il contenimento). */
main>.nit-section~.nit-section:not(:has(.nit-rail,.nit-caso,.nit-domande)){content-visibility:auto; contain-intrinsic-size:auto 1000px}
.nit-illo{width:100%; height:auto}
.nit-illo--hero{max-width:420px}
@media (max-width:600px){.nit-illo--hero{max-width:300px}}
.nit-illo--sm{max-width:110px; margin-bottom:var(--space-4)}
.nit-illo--card{max-width:96px; margin-bottom:var(--space-4)}
/* Passi e card in fila: stesso riquadro quadrato, così numeri e titoli restano allineati
   anche con illustrazioni verticali (target, stopwatch) o orizzontali (laptop). */
.nit-illo--sm,.nit-illo--card{aspect-ratio:1/1; object-fit:contain}
.nit-illo--ritratto{max-width:240px; margin-bottom:var(--space-5); border:var(--outline); border-radius:var(--radius-sm)}
/* In tema scuro l'inchiostro nero delle illustrazioni sparirebbe sul fondo: poggiano su un
   riquadro chiaro, come sulla carta. I ritratti hanno già il loro fondo. */
.nit-illo:not(.nit-illo--ritratto){background:var(--illo-fondo,transparent); padding:var(--illo-pad,0)}
.nit-illo--hero{padding:calc(var(--illo-pad,0px) * 3)}
picture:has(> .nit-illo){display:contents}
.nit-h1-servizio{margin-top:var(--space-4); max-width:20ch}
.nit-h1-voce{margin-top:var(--space-3)}
.nit-h2-sm{font-size:var(--fs-h3); margin-bottom:var(--space-4)}
.nit-apertura__lead{margin-top:var(--space-4)}
.nit-card__title--after-overline{margin-top:var(--space-3)}
.nit-card__h{font-size:var(--fs-h4); margin-block:var(--space-2) var(--space-3)}
.nit-card-caso{background:var(--surface-card); border:var(--outline); border-radius:var(--radius-sm); box-shadow:var(--shadow-ink-lg); padding:var(--space-6)}
.nit-card-caso .nit-kpi__value{margin-top:var(--space-3); font-size:clamp(48px,6vw,88px)}
.nit-card-caso .nit-kpi__label{font-size:var(--fs-body)}
.nit-card-caso__title{font-size:var(--fs-h3); margin-top:var(--space-5)}
.nit-card-caso__title a{color:var(--text-strong)}
.nit-cta__mail{font-size:var(--fs-body-sm)}
.nit-meta-date{margin-top:var(--space-5); font-size:var(--fs-body-sm); color:var(--text-muted)}
.nit-more{margin-top:var(--space-5)}
.nit-link-strong{font-weight:var(--fw-bold)}
.nit-cta-soft{margin-top:var(--space-7)}
.nit-cta-soft h2{font-size:var(--fs-h3); margin-bottom:var(--space-3)}
.nit-cta-soft__link{margin-top:var(--space-4)}
.nit-rail__box--accent{background:var(--surface-tint)}
.nit-rail__strong{font-size:var(--fs-body-sm)}
.nit-rail__note{font-size:var(--fs-caption); color:var(--text-muted); margin-top:var(--space-2)}
.nit-404__links{margin-top:var(--space-5); display:grid; gap:var(--space-2)}
.nit-404__links a{display:inline-flex; align-items:center; min-height:44px}

/* Prosa: blocchi core dentro il contenuto */
.nit-prose ol{margin-top:var(--space-4); display:grid; gap:var(--space-2); padding-left:1.4em}
.nit-prose blockquote{margin-top:var(--space-5); border-left:6px solid var(--color-primary); padding-left:var(--space-5);
  font-size:var(--fs-statement); line-height:var(--lh-statement); font-weight:var(--fw-bold); color:var(--text-strong)}
.nit-prose figure{margin-top:var(--space-5)}
.nit-prose figcaption{font-size:var(--fs-caption); color:var(--text-muted); margin-top:var(--space-2)}
.nit-prose img:not(.nit-illo){height:auto; border:var(--outline); border-radius:var(--radius-sm)}
.nit-prose table{width:100%; border-collapse:collapse; margin-top:var(--space-5); font-size:var(--fs-body-sm)}
.nit-prose th,.nit-prose td{text-align:left; padding:var(--space-3); border-bottom:var(--outline); vertical-align:top}
.nit-prose th{color:var(--text-strong); font-weight:var(--fw-bold)}
.nit-prose hr{border:0; border-top:var(--outline); margin-block:var(--space-7)}
.nit-prose .wp-block-table{overflow-x:auto}
.nit-prose > .nit-kpi-grid:first-child{margin-top:0}

/* Prenotazione: Calendly dopo consenso, bottone prima */
.nit-embed{position:relative; background:var(--surface-card); border:var(--outline); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-ink-lg); padding:var(--space-6); min-height:220px}
.nit-embed__fallback p{max-width:62ch; margin-bottom:var(--space-5)}
.nit-embed.is-loaded{padding:0; overflow:hidden}
.nit-embed.is-loaded .nit-embed__fallback{display:none}
.nit-embed__actions{display:flex; flex-wrap:wrap; gap:var(--space-4)}
.nit-embed__note{margin-top:var(--space-4); margin-bottom:0; font-size:var(--fs-body-sm); color:var(--text-muted)}
.nit-embed__widget{min-width:320px; height:700px}
.nit-embed__widget .calendly-spinner{display:none}
/* Loader del calendario: la frase finisce con il punto del marchio, che pulsa (fermo con il movimento ridotto). */
.nit-carica{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-4); padding:var(--space-6); background:var(--surface-card); text-align:center}
.nit-carica__testo{margin:0; font-size:var(--fs-h3); font-weight:var(--fw-black); line-height:var(--lh-tight); color:var(--text-strong)}
.nit-carica__punto{display:inline-block; width:.3em; height:.3em; margin-left:.06em; border-radius:50%; background:var(--color-primary);
  animation:nit-punto 1.1s ease-in-out infinite}
@keyframes nit-punto{0%,100%{transform:scale(.55); opacity:.5} 50%{transform:scale(1.15); opacity:1}}
.nit-carica__lento{margin:0; font-size:var(--fs-body-sm); color:var(--text-muted)}
.nit-carica__lento[hidden]{display:none}
.nit-embed__live{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.nit-embed__problema{margin-bottom:var(--space-4)}
/* WhatsApp rapido: stesso ritaglio della prenotazione */
.nit-wa{max-width:var(--w-read); margin-top:var(--space-6); background:var(--surface-card);
  border:var(--outline); border-radius:var(--radius-sm); box-shadow:var(--shadow-ink-lg); padding:var(--space-6)}
.nit-wa__titolo{font-size:var(--fs-h3); line-height:var(--lh-snug); margin-bottom:var(--space-5)}
.nit-wa__consenso{display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-3); align-items:start;
  margin-bottom:var(--space-5)}
.nit-wa__consenso[hidden]{display:none}
.nit-wa__consenso input{width:20px; height:20px; margin-top:3px; accent-color:var(--color-primary)}
.nit-wa__consenso label{color:var(--text-strong); cursor:pointer}
.nit-wa__nota{grid-column:2; margin:0; font-size:var(--fs-body-sm); color:var(--text-muted)}
.nit-field-ink .nit-wa{background:transparent}
.nit-field-ink .nit-wa__consenso label{color:var(--text-on-dark)}
.nit-field-ink .nit-wa__nota{color:var(--text-on-dark-2)}
/* Calcolatore LTV/CAC: due gruppi di caselle, poi i risultati come numeri chiave */
.nit-calc{display:grid; gap:var(--space-6); margin-top:var(--space-6)}
.nit-calc__form{display:grid; gap:var(--space-6); grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.nit-calc fieldset{border:var(--outline); border-radius:var(--radius-sm); background:var(--surface-card); box-shadow:var(--shadow-ink-lg);
  padding:var(--space-6); margin:0; display:grid; gap:var(--space-5); align-content:start; min-width:0}
.nit-calc legend{font-size:var(--fs-h4); font-weight:var(--fw-black); color:var(--text-strong); padding:0 var(--space-2); margin-left:calc(-1 * var(--space-2))}
.nit-calc__input{display:flex; align-items:center; gap:var(--space-2)}
.nit-calc__input input{flex:1; min-width:0; font-variant-numeric:tabular-nums}
.nit-calc__unit{font-weight:var(--fw-bold); color:var(--text-muted); width:2.6em; flex:none}
.nit-calc__aiuto{margin:0; font-size:var(--fs-body-sm); color:var(--text-muted)}
.nit-calc__risultati{display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.nit-calc__kpi{padding-top:var(--space-4)}
.nit-calc__kpi .nit-kpi__value{font-size:clamp(28px,3.8vw,44px)}
.nit-calc__lettura{grid-column:1/-1; margin:0; font-size:var(--fs-lead); color:var(--text-strong); max-width:62ch}
.nit-calc__noscript{margin:0; font-weight:var(--fw-bold)}
/* Le 7 domande prima delle Ads: una scheda per domanda, sì o no, poi il conto e i punti da sistemare */
.nit-check{display:grid; gap:var(--space-7); margin-top:var(--space-6)}
.nit-check__lista{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-6)}
.nit-check fieldset{border:var(--outline); border-radius:var(--radius-sm); background:var(--surface-card); box-shadow:var(--shadow-ink-lg);
  padding:var(--space-6); margin:0; display:grid; gap:var(--space-3); min-width:0}
.nit-check legend{display:flex; gap:var(--space-3); align-items:baseline; font-size:var(--fs-h4); font-weight:var(--fw-black); color:var(--text-strong);
  line-height:1.25; padding:0 var(--space-2); margin-left:calc(-1 * var(--space-2))}
.nit-check__n{display:inline-grid; place-items:center; flex:none; width:36px; height:36px; border-radius:var(--radius-sm);
  background:var(--color-primary); color:var(--color-primary-contrast); font-size:17px}
.nit-check__sotto{margin:0; font-size:var(--fs-overline); font-weight:var(--fw-bold); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--text-strong)}
.nit-check__righe{margin:0; padding-left:1.2em}
.nit-check__scelte{display:flex; gap:var(--space-5); margin-top:var(--space-2)}
.nit-check__scelta{display:inline-flex; align-items:center; gap:var(--space-2); font-weight:var(--fw-bold); cursor:pointer; min-height:44px}
.nit-check__scelta input{width:22px; height:22px; accent-color:var(--color-primary); margin:0}
.nit-check__perche{margin:0; padding:var(--space-4); border-radius:var(--radius-sm); background:var(--surface-tint); color:var(--text-strong); font-weight:var(--fw-bold)}
.nit-check__link{margin:0}
.nit-check__domanda.is-no fieldset{border-color:var(--color-primary)}
.nit-check__esito{border:var(--outline); border-radius:var(--radius-sm); background:var(--surface-card);
  box-shadow:var(--shadow-ink-lg); padding:var(--space-6); display:grid; gap:var(--space-3)}
.nit-check__esito .nit-kpi__value{margin:0; font-size:clamp(28px,3.8vw,44px)}
.nit-check__lettura{margin:0; font-size:var(--fs-lead); color:var(--text-strong); max-width:62ch}
.nit-check__da-sistemare{margin:0; padding-left:1.2em}
.nit-check__pdf{margin:0}
/* Autodiagnosi del funnel: un'area per scheda, tre affermazioni con sì / in parte / no, poi le aree deboli e le barre */
.nit-diag{display:grid; gap:var(--space-7); margin-top:var(--space-6)}
.nit-diag__area{border:var(--outline); border-radius:var(--radius-sm); background:var(--surface-card); box-shadow:var(--shadow-ink-lg);
  padding:var(--space-6); display:grid; gap:var(--space-4); min-width:0}
.nit-diag__testa h3{display:flex; gap:var(--space-3); align-items:baseline; margin:0; font-size:var(--fs-h4)}
.nit-diag__domanda{margin:var(--space-2) 0 0; color:var(--text-muted); font-style:italic}
.nit-diag__frase{border:0; border-top:1px solid var(--border-subtle,#e6e6e6); padding:var(--space-4) 0 0; margin:0; min-width:0}
.nit-diag__frase legend{float:left; width:100%; padding:0; margin:0 0 var(--space-2); font-weight:var(--fw-bold); color:var(--text-strong)}
.nit-diag__frase .nit-check__scelte{clear:both; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin:0}
.nit-diag__deboli{display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.nit-diag__debole{background:var(--surface-tint); border-radius:var(--radius-sm); padding:var(--space-5)}
.nit-diag__debole h3{margin:0 0 var(--space-2); font-size:var(--fs-h4)}
.nit-diag__debole p{margin:0 0 var(--space-2)}
.nit-diag__debole p:last-child{margin:0}
.nit-diag__barre{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2)}
.nit-diag__barra{display:grid; grid-template-columns:minmax(0,14em) minmax(0,1fr) 4.5em; gap:var(--space-3); align-items:center; font-size:var(--fs-body-sm)}
.nit-diag__traccia{height:10px; border-radius:5px; background:var(--surface-tint); overflow:hidden}
.nit-diag__traccia span{display:block; height:100%; background:var(--text-strong)}
.nit-diag__barra.is-debole .nit-diag__traccia span{background:var(--color-primary)}
.nit-diag__barra.is-debole .nit-diag__nome{font-weight:var(--fw-bold); color:var(--text-strong)}
.nit-diag__punti{text-align:right; font-variant-numeric:tabular-nums}
/* Com'è fatto il tuo sito?: il campo con il bottone, poi telefono e computer affiancati e le letture */
.nit-psi{display:grid; gap:var(--space-6); margin-top:var(--space-6)}
.nit-psi__form{border:var(--outline); border-radius:var(--radius-sm); background:var(--surface-card); box-shadow:var(--shadow-ink-lg); padding:var(--space-6)}
.nit-psi__riga{display:flex; gap:var(--space-3); flex-wrap:wrap}
.nit-psi__riga input{flex:1 1 260px; min-width:0}
.nit-psi__esito{display:grid; gap:var(--space-5)}
.nit-psi.is-attesa .nit-psi__esito .nit-check__lettura::before{content:""; display:inline-block; width:12px; height:12px; border-radius:50%;
  background:var(--color-primary); margin-right:var(--space-3); animation:nit-psi-punto 1s ease-in-out infinite alternate}
@keyframes nit-psi-punto{from{opacity:.25} to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .nit-psi.is-attesa .nit-psi__esito .nit-check__lettura::before{animation:none} }
.nit-psi__colonne{display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.nit-psi__colonna{border:var(--outline); border-radius:var(--radius-sm); background:var(--surface-card); padding:var(--space-5)}
.nit-psi__colonna h3{margin:0 0 var(--space-4); font-size:var(--fs-h4)}
.nit-psi__voti{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); grid-template-columns:repeat(2,minmax(0,1fr))}
.nit-psi__voto{display:grid; gap:2px}
.nit-psi__numero{font-size:clamp(28px,3.4vw,40px); font-weight:var(--fw-black); color:var(--text-strong); line-height:1; font-variant-numeric:tabular-nums}
.nit-psi__voto.is-scarso .nit-psi__numero{color:var(--color-primary)}
.nit-psi__nome{font-size:var(--fs-body-sm); color:var(--text-muted)}
.nit-psi__lab{margin:var(--space-4) 0 0; font-size:var(--fs-body-sm); color:var(--text-muted)}
.nit-psi__letture ul{margin:0; padding-left:1.2em; display:grid; gap:var(--space-2); max-width:70ch}
/* Newsletter dello Strillone: testo a sinistra, modulo a destra; sotto i 860 px uno sotto l'altro */
.nit-newsletter__grid{display:grid; gap:var(--space-6) var(--space-8); grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:start}
.nit-newsletter h2{margin:0 0 var(--space-4)}
.nit-newsletter__form{border:var(--outline); border-radius:var(--radius-sm); background:var(--surface-card); box-shadow:var(--shadow-ink-lg);
  padding:var(--space-6); display:grid; gap:var(--space-4)}
.nit-newsletter__form .nit-btn{justify-self:start}
.nit-newsletter__consenso{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); align-items:start; font-size:var(--fs-body-sm)}
.nit-newsletter__consenso input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--color-primary)}
.nit-newsletter__esito{margin:0; font-size:var(--fs-body-sm); color:var(--text-muted)}
/* Dopo l'invio il messaggio deve farsi notare: riquadro per il «fatto», grassetto magenta per gli errori */
.nit-newsletter__esito.is-ok{padding:var(--space-4) var(--space-5); border-radius:var(--radius-sm); background:var(--surface-tint);
  border-left:4px solid var(--color-primary); color:var(--text-strong); font-size:var(--fs-body)}
.nit-newsletter__esito.is-ok strong{display:block; font-size:var(--fs-h4); margin-bottom:var(--space-1)}
.nit-newsletter__esito.is-errore{color:var(--color-primary); font-weight:var(--fw-bold)}
.nit-newsletter__avviso{padding-top:var(--space-5)}
.nit-newsletter__fatto{margin:0; padding:var(--space-4) var(--space-5); border-radius:var(--radius-sm); background:var(--surface-tint);
  border-left:4px solid var(--color-primary); color:var(--text-strong)}
.nit-newsletter__trappola{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media(max-width:860px){ .nit-newsletter__grid{grid-template-columns:minmax(0,1fr)} }
@media(max-width:640px){ .nit-diag__barra{grid-template-columns:minmax(0,1fr) 4.5em} .nit-diag__traccia{grid-column:1/-1; grid-row:2} }
.nit-conferma{margin-top:var(--space-5)}
.nit-conferma p + p{margin-top:var(--space-3)}

/* Glossario A–Z e filtri d'archivio */
.nit-az ul,.nit-filters ul{list-style:none; padding:0; margin:var(--space-5) 0 0; display:flex; flex-wrap:wrap; gap:var(--space-2)}
.nit-az a,.nit-filters a{display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:0 var(--space-3);
  border:var(--outline); border-radius:var(--radius-sm); background:var(--surface-card); font-weight:var(--fw-bold); color:var(--text-strong)}
.nit-az a:hover,.nit-filters a:hover{background:var(--nit-lime); color:var(--nit-ink); text-decoration:none}
.nit-filters a[aria-current="page"]{background:var(--color-primary); color:var(--color-primary-contrast); box-shadow:var(--shadow-ink)}
.nit-az__group{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,10fr); gap:var(--space-4) var(--space-7); align-items:start}
.nit-az__group + .nit-az__group{margin-top:var(--space-8)}
@media(max-width:640px){ .nit-az__group{grid-template-columns:minmax(0,1fr)} }
.nit-az__letter{font-size:var(--fs-mega); line-height:var(--lh-mega); color:var(--color-primary); scroll-margin-top:var(--space-6)}

/* Paginazione */
.nit-pagination{margin-top:var(--space-7)}
.nit-pagination .nav-links{display:flex; flex-wrap:wrap; gap:var(--space-2)}
.nit-pagination a,.nit-pagination span{display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:0 var(--space-3);
  border:var(--outline); border-radius:var(--radius-sm); font-weight:var(--fw-bold)}
.nit-pagination .current{background:var(--color-primary); color:var(--color-primary-contrast)}

/* Stati dei campi di form (linea web: mancavano nel DS). L'errore non è mai solo colore. */
.nit-field{display:grid; gap:var(--space-2)}
.nit-field label{font-weight:var(--fw-bold); color:var(--text-strong)}
.nit-field input,.nit-field select,.nit-field textarea{font:inherit; min-height:48px; padding:10px 14px; color:var(--text-strong);
  background:var(--surface-card); border:var(--outline); border-radius:var(--radius-sm)}
.nit-field input:disabled,.nit-field select:disabled,.nit-field textarea:disabled{opacity:.6; cursor:not-allowed}
.nit-field.is-error input,.nit-field.is-error select,.nit-field.is-error textarea{border-color:#b3261e; border-width:3px}
.nit-field__error{font-size:var(--fs-body-sm); color:#b3261e; font-weight:var(--fw-medium)}
.nit-field__error::before{content:"⚠ "}
.nit-field.is-success input{border-color:var(--nit-lime-dark)}

/* Banner e pannello dei cookie (plugin nitido-cookie-privacy): la forma dei ritagli v6.
   I colori li passa già inc/consent.php; qui solo raggi e ombra dei pulsanti. */
:root{--nicp-raggio:var(--radius-sm); --nicp-raggio-pulsante:var(--radius-sm); --nicp-ombra-pulsante:3px 3px 0 var(--nit-ink)}

/* Ponte theme.json: i preset seguono i token, quindi anche il tema scuro. */
:root{
  --wp--preset--color--carta:var(--surface-page);
  --wp--preset--color--bianco:var(--surface-card);
  --wp--preset--color--magenta:var(--color-primary);
  --wp--preset--color--testo:var(--text-body);
  --wp--preset--color--testo-forte:var(--text-strong);
  --wp--preset--color--testo-secondario:var(--text-muted);
}

/* ---------- 21b. STRILLONE — bacheca delle note, news, fonte ----------
   Il foglietto (proposta del 14/10): carta lime o magenta chiara alternata, inclinazione fissa
   per nota (--postit-tilt, dal suo ID), un punto magenta in cima al posto del nastro (dentro il foglio:
   fuori dal bordo, nelle colonne, finirebbe in fondo alla colonna prima). Piatto:
   contorno e ombra degli altri ritagli, niente texture. Al passaggio o al fuoco si raddrizza. */
.nit-bacheca{columns:3 260px; column-gap:var(--space-7); margin-top:var(--space-6)}
.nit-postit{position:relative; break-inside:avoid; margin:0 0 var(--space-7); padding:var(--space-7) var(--space-6) var(--space-5);
  border:var(--outline); border-radius:var(--radius-sm); box-shadow:var(--shadow-ink); color:var(--text-strong);
  transform:rotate(var(--postit-tilt,0deg)); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)}
.nit-bacheca + p{margin-top:var(--space-5)}
.nit-feed{margin:var(--space-3) 0 0; font-size:var(--fs-body-sm)}
.nit-feed a{color:var(--text-strong); font-weight:var(--fw-bold)}
.nit-postit--lime{background:var(--surface-tint-lime)}
.nit-postit--magenta{background:var(--surface-tint)}
.nit-postit:hover,.nit-postit:focus-within{transform:rotate(0) translate(-2px,-2px); box-shadow:var(--shadow-ink-lg)}
.nit-postit__punto{position:absolute; top:var(--space-3); left:50%; width:18px; height:18px; margin-left:-9px; border-radius:50%;
  background:var(--nit-magenta); border:var(--border-width-ink) solid var(--border-ink)}
.nit-postit__h{margin:0 0 var(--space-3); font-size:var(--fs-h4,1.25rem); line-height:var(--lh-tight); letter-spacing:-.015em}
.nit-postit__h a{color:inherit; text-decoration:none}
.nit-postit__h a::after{content:""; position:absolute; inset:0}   /* tutto il foglietto è il link… */
.nit-postit__h a:focus-visible{outline:none}
.nit-postit:has(.nit-postit__h a:focus-visible){outline:var(--focus-ring-width,3px) solid var(--focus-ring-color); outline-offset:4px}
.nit-postit__testo{margin:0 0 var(--space-4); font-size:var(--fs-body-sm); color:var(--text-body)}
.nit-postit__piede{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); margin:0;
  font-size:var(--fs-caption)}
.nit-postit__tag{position:relative; z-index:1; /* …tranne l'argomento, che porta al filtro */
  display:inline-flex; align-items:center; min-height:32px; padding:0 var(--space-3); border:var(--border-width-ink) solid var(--border-ink);
  border-radius:var(--radius-xs); background:var(--surface-card); color:var(--text-strong); font-weight:var(--fw-bold); text-decoration:none}
.nit-postit__tag:hover{background:var(--color-primary); color:var(--color-primary-contrast)}
.nit-postit time{margin-left:auto; color:var(--text-body)}
@media(max-width:640px){ .nit-postit{transform:rotate(calc(var(--postit-tilt,0deg) / 2))} }

/* Apertura della raccolta: il lead e lo strillone */
.nit-apertura__illo{display:block; width:min(240px,60%); margin:var(--space-5) 0 0 auto}

/* Nota singola: la lezione in grande, poi il caso da cui viene */
.nit-nota .nit-h1-voce{max-width:20ch}
.nit-nota .nit-prose{margin-top:var(--space-5)}
.nit-nota__caso{margin:var(--space-6) 0; font-weight:var(--fw-bold)}

/* News: la notizia commentata, in un riquadro prima del commento */
.nit-fonte{margin:var(--space-5) 0 var(--space-7); padding:var(--space-4) var(--space-5); border:var(--outline); border-radius:var(--radius-sm);
  background:var(--surface-tint-lime); color:var(--text-strong)}
.nit-fonte p{margin:0}
.nit-fonte__eti{font-size:var(--fs-caption); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.06em}
.nit-card-news .nit-meta-date{margin:var(--space-4) 0 0}
/* News: titolo e illustrazione affiancati, poi «In breve» e la firma per esteso */
.nit-news-testa{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-6); align-items:end}
.nit-news-testa__illo{width:180px; height:auto}
@media(max-width:640px){ .nit-news-testa{grid-template-columns:minmax(0,1fr)} .nit-news-testa__illo{width:140px; order:-1} }
.nit-in-breve{margin:0 0 var(--space-7); padding:var(--space-5) var(--space-6); border:var(--outline); border-radius:var(--radius-sm);
  background:var(--surface-tint); color:var(--text-strong); box-shadow:var(--shadow-ink)}
.nit-in-breve__h{margin:0 0 var(--space-3); font-size:var(--fs-caption); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.06em}
.nit-in-breve ul{margin:0; padding-left:1.2em}
.nit-in-breve li + li{margin-top:var(--space-2)}
.nit-firma{display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--space-5); align-items:start; margin:var(--space-8) 0 var(--space-6);
  padding-top:var(--space-6); border-top:var(--outline)}
.nit-firma__ritratto{width:96px; height:auto; border-radius:var(--radius-sm)}
.nit-firma p{margin:0 0 var(--space-2); font-size:var(--fs-body-sm)}
.nit-firma .nit-firma__nome{font-size:var(--fs-h4); font-weight:var(--fw-black); color:var(--text-strong)}
.nit-firma .nit-firma__ruolo{font-weight:var(--fw-bold)}
.nit-strillone-ultimi .nit-grid{align-items:start}
.nit-strillone-ultimi .nit-postit{margin:var(--space-3) 0 0}
.nit-strillone-ultimi > p{margin-top:var(--space-6)}

/* Link verso altri siti (inc/link-esterni.php): nei testi una freccia dice che si apre una finestra nuova */
.nit-prose a.nit-esterno::after,.nit-fonte a.nit-esterno::after{content:"\2197"; margin-left:.15em; font-size:.85em; text-decoration:none; display:inline-block}

/* ---------- 22. MOTION RIDOTTO ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .nit-btn:hover,.nit-btn:active,.nit-forma-ritagli .nit-card:hover{transform:none}
  .nit-stickybar{transition:none}
  .nit-su{transition:none}
  .nit-postit,.nit-postit:hover,.nit-postit:focus-within{transform:none}
}