/* ==========================================================================
   LE PAGINE-DOCUMENTO E LE CANDIDATURE — binario P2.

   Domande frequenti (§ 5.2.9 «Percorso»), termini (§ 5.2.7 «Con indice
   laterale»), compliance (§ 5.2.8 «Fisarmonica e pannello»), diventa
   partner (§ 5.2.12 «Landing · modulo in apertura»), diventa agente
   (§ 5.2.13 «Gemella della 5.2.12») e la mappa del sito (nessun layout nel
   libro: apertura § 5.4.1 e l'elenco delle sezioni della sitemap).

   LE CLASSI `nw-doc-*` VESTONO IL CORPO DEI DOCUMENTI. Il testo di queste
   pagine e' una riga dell'elenco delle pagine e si scrive dal pannello
   (database/corpi/ e' il testo di partenza): le pagine 1:1 del libro
   portano gli stili in linea, il corpo porta queste classi, e qui stanno
   le misure di quegli stili in linea — gli stessi token, lo stesso ordine
   dei blocchi. Un corpo riscritto dal pannello che usa le stesse classi
   resta nel disegno del libro senza che chi scrive debba conoscerne i
   token.

   Solo token `--nlg-*`; le classi `.nlg-*` della libreria si usano e non si
   ridefiniscono: dove il libro le ricolora dentro un blocco (l'occhiello
   grigio dell'apertura, bianco sulla fascia di marca) la regola e' scoped
   al blocco, come nello stile in linea della pagina 1:1.
   ========================================================================== */

.nw-doc-contenitore {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: 0 var(--nlg-margine);
}

.nw-doc-mono {
  font-family: var(--nlg-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

/* L'indirizzo della pagina in mono: minuscolo, com'e' scritto. */
.nw-doc-mono--indirizzo {
  text-transform: none;
  letter-spacing: 0.04em;
}

a.nw-doc-mono--indirizzo { text-decoration: none; }
a.nw-doc-mono--indirizzo:hover { color: var(--nlg-text-3); text-decoration: underline; }

/* --------------------------------------------------------------------------
   1 · L'APERTURA SU FONDO CHIARO — § 5.4.1 linguetta 1 (nlg-a-chiara-filo):
   occhiello, H1, una riga, e il filo di firma del § 3.2.1 in chiusura.
   -------------------------------------------------------------------------- */

.nw-doc-apertura { background: var(--nlg-canvas); }

.nw-doc-apertura__contenuto {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: calc(var(--nlg-s-8) * var(--nlg-passo-k, 1)) var(--nlg-margine) calc(var(--nlg-s-6) * var(--nlg-passo-k, 1));
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
}

.nw-doc-apertura .nlg-occhiello { margin: 0; color: var(--nlg-text-3); }

.nw-doc-apertura__titolo {
  margin: 0;
  max-width: 24ch;
  font: 800 var(--nlg-fs-h1)/var(--nlg-lh-h1) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h1);
  color: var(--nlg-text-1);
  text-wrap: balance;
}

.nw-doc-apertura__testo {
  margin: 0;
  max-width: 60ch;
  font: 400 var(--nlg-fs-body-lg)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Il filo di firma (brand book 5.15.0 § 3.2.1, forma 1a della 5.14.0): i
   quattro pesi della palette — blu 60 · rosso 25 · giallo 7,5 · verde
   7,5 —, spessore 6, stacco 3. E' l'SVG di `sezioni/nlg-a-chiara-filo.html`
   (`partials/filo-firma`, forma disegnata) rifatto coi gradienti, alle sue
   misure su 600 unita' in percentuale — blu 0–354,6, rosso 357,6–505,35,
   giallo 508,35–552,675, verde 555,675–600, alto 6 da 4 su 14 — e nella
   sua proporzione 600 : 14, cosi' sotto i 600 px scala come l'SVG.
   Coi gradienti e non con l'SVG perche' sta anche nei corpi che si
   modificano dal pannello (Compliance, Domande frequenti, Termini): un
   <div> vuoto non si rompe riscrivendo il testo intorno, e i corpi gia'
   salvati prendono la forma nuova senza migrazione. Fino alla 5.13.1 era
   la barra blu con la tacca rossa in `::after`. */
.nw-doc-filo {
  width: 100%;
  max-width: var(--nlg-filo-firma-max);
  aspect-ratio: 600 / 14;
  margin-top: var(--nlg-s-4);
  background:
    linear-gradient(to right,
      var(--nlg-bar-blue) 0 59.1%,
      transparent 0 59.6%,
      var(--nlg-bar-red) 0 84.225%,
      transparent 0 84.725%,
      var(--nlg-bar-yellow) 0 92.1125%,
      transparent 0 92.6125%,
      var(--nlg-bar-green) 0)
    0 50% / 100% calc(100% * 6 / 14) no-repeat;
}

.nw-doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nlg-s-4);
  margin: 0;
}

/* L'apertura dei Termini, con le misure della pagina 1:1 07 e non quelle
   generiche della § 5.4.1 di Compliance e domande frequenti: 40 px sopra e
   24 sotto, 22 fra l'occhiello e il titolo, 10 fra il titolo e la riga, la
   riga a interlinea 1,5. Il filo sta in un blocco proprio sotto l'apertura,
   e attraversa tutto il contenitore, come nella pagina 1:1 dei Termini di
   `Layout 1-1.dc.html`, che dalla 5.14.0 lo scrive a segmenti HTML (in
   fondo al blocco, `.nw-doc-filo--intero`). */
.nw-doc-apertura--termini .nw-doc-apertura__contenuto { padding: 40px var(--nlg-margine) var(--nlg-s-5); gap: 22px; }

.nw-doc-apertura__titoli { display: flex; flex-direction: column; gap: 10px; }

.nw-doc-apertura--termini .nw-doc-apertura__testo { line-height: 1.5; }

/* L'occhiello della 1:1 07 e' il mono a peso 400 con la spaziatura 0,14em
   (come l'occhiello delle pagine automatiche, .nw-stato__occhiello): la
   classe della libreria resta nel corpo, ricolorata nel blocco. */
.nw-doc-apertura--termini .nlg-occhiello { font-weight: 400; letter-spacing: 0.14em; }

/* Il filo a tutta misura dei Termini: a tutta larghezza il libro non
   scala il filo, lo tiene a spessore 6 e stacco 3 «a ogni larghezza»
   (CHANGELOG 5.14.0, seconda riconsegna) — come `.nw-filo` di site.css,
   che i corpi non possono usare perche' i segmenti sarebbero quattro
   <span> nel testo. Gli stacchi sono 3 px veri e i pesi si dividono la
   riga senza gli stacchi, come il `flex: 60 1 0`… dei piedi del libro. */
.nw-doc-filo--intero {
  max-width: none;
  aspect-ratio: auto;
  height: 14px;
  margin-top: 0;
  background:
    linear-gradient(to right,
      var(--nlg-bar-blue) 0 calc((100% - 9px) * .6),
      transparent 0 calc((100% - 9px) * .6 + 3px),
      var(--nlg-bar-red) 0 calc((100% - 9px) * .85 + 3px),
      transparent 0 calc((100% - 9px) * .85 + 6px),
      var(--nlg-bar-yellow) 0 calc((100% - 9px) * .925 + 6px),
      transparent 0 calc((100% - 9px) * .925 + 9px),
      var(--nlg-bar-green) 0)
    0 50% / 100% 6px no-repeat;
}

/* --------------------------------------------------------------------------
   2 · L'APERTURA SULLA FASCIA DI MARCA COL MODULO — § 5.4.1 linguetta 2
   (nlg-a-fascia-immagine), come la portano le landing § 5.2.12 e 5.2.13:
   il testo a sinistra, la card del modulo a destra, la figura del libro
   ritagliata sul bordo destro.
   -------------------------------------------------------------------------- */

.nw-doc-fascia {
  position: relative;
  overflow: hidden;
  background: var(--nlg-action);
}

.nw-doc-fascia__figura {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 45%;
  object-fit: cover;
  object-position: left center;
  opacity: .55;
}

.nw-doc-fascia__griglia {
  position: relative;
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: calc(var(--nlg-s-8) * var(--nlg-passo-k, 1)) var(--nlg-margine);
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 7fr) minmax(0, 5fr));
  gap: var(--nlg-s-7) var(--nlg-gutter);
  align-items: start;
}

.nw-doc-fascia__testo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  min-width: 0;
  container-type: inline-size;
}

/* L'occhiello tiene il margine della libreria (0 0 s-2): col passo della
   colonna fa i 20 px dall'H1 della pagina 1:1. */
.nw-doc-fascia .nw-doc-fascia__testo .nlg-occhiello { color: var(--nlg-text-onaction); }

/* Il nome dell'azienda nel titolo si legge intero. A 44 px «Noleggiando.com»
   e' piu' largo della colonna fino a 440 px, e la fascia (overflow: hidden)
   lo tagliava in «Noleggiando.co» (collaudo del 2026-10-10, V03). La parola
   misura 9,2 volte il corpo nel carattere di ripiego piu' largo (DejaVu Sans
   Bold): il corpo resta --nlg-fs-h1 dove la colonna ha posto e scende a un
   nono e mezzo della colonna dove non ce l'ha (la colonna e' un contenitore,
   `cqi`; senza, resta il corpo del libro). Una parola ancora piu' lunga va
   a capo dentro di se' invece di uscire. Niente `hyphens: auto`: dove il
   browser sillaba l'italiano spezzerebbe il nome anche sul desktop. */
.nw-doc-fascia__titolo {
  margin: 0;
  max-width: 20ch;
  font: 800 var(--nlg-fs-h1)/var(--nlg-lh-h1) var(--nlg-font-ui);
  font-size: min(var(--nlg-fs-h1), 100cqi / 9.5);
  letter-spacing: var(--nlg-ls-h1);
  color: var(--nlg-text-onaction);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.nw-doc-fascia__testo p:not(.nlg-occhiello) {
  margin: 0;
  max-width: 48ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-onaction);
  text-wrap: pretty;
}

.nw-doc-fascia__testo p.nw-doc-fascia__attacco { font-size: var(--nlg-fs-body-lg); }

.nw-doc-fascia__testo a { color: var(--nlg-text-onaction); text-decoration: underline; }

/* La card del modulo in apertura: il modulo del § 4.1.4 dentro una
   `.nlg-card`, e la nota dei Termini sotto l'invio, centrata e in
   didascalia, a s-3 dal bottone come nella pagina 1:1. Le voci vanno a
   coppie come nel form della pagina 1:1 (email e telefono, citta' e
   provincia, partita IVA e SDI): la resa a due colonne (`nlg-modulo--due`,
   una colonna sul telefono), col passo s-3 nei due sensi; la voce che apre
   un gruppo o il modulo, le tendine e l'area di testo prendono la riga. */
.nw-doc-candidatura { min-width: 0; gap: var(--nlg-s-3); scroll-margin-top: var(--nlg-s-6); }

.nw-doc-candidatura .nlg-modulo { gap: var(--nlg-s-3); }

.nw-doc-candidatura .nlg-modulo--due > .nw-tp-voce--apre { grid-column: 1 / -1; }

.nw-doc-candidatura .nlg-modulo__azioni {
  flex-direction: column;
  align-items: stretch;
  gap: var(--nlg-s-3);
  margin-top: var(--nlg-s-2);
}

.nw-doc-candidatura .nlg-modulo__azioni .nlg-btn { width: 100%; }

.nw-doc-candidatura__nota {
  margin: 0;
  text-align: center;
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-text);
  color: var(--nlg-text-3);
}

/* Il collegamento resta riconoscibile senza il colore (WCAG 1.4.1): stesso
   inchiostro della nota, ma sottolineato. */
.nw-doc-candidatura__nota a { color: inherit; text-decoration: underline; }

/* Il ripiego: il segnaposto tolto dal corpo, il modulo in coda alla pagina. */
.nw-doc-candidatura--in-coda {
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   3 · I BLOCCHI — fondo che alterna canvas e surface-2, il titolo h2 del
   § 5.4 e il testo a 72 battute.
   -------------------------------------------------------------------------- */

.nw-doc-blocco {
  background: var(--nlg-canvas);
  padding: calc(var(--nlg-s-9) * var(--nlg-passo-k, 1)) 0;
}

.nw-doc-blocco--alterno { background: var(--nlg-surface-2); }

/* I termini: l'indice e il testo stanno fra 36 px sopra e 36 sotto, come il
   blocco della pagina 1:1 07: comincia subito sotto il filo, e il piede
   arriva subito dopo l'ultimo articolo. */
.nw-doc-blocco--stretto { padding: 36px 0; }

.nw-doc-blocco .nlg-occhiello { margin: 0; }

.nw-doc-titolo {
  margin: 0 0 var(--nlg-s-5);
  max-width: 34ch;
  font: 700 var(--nlg-fs-h2)/var(--nlg-lh-h2) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h2);
  color: var(--nlg-text-1);
  text-wrap: pretty;
}

/* Fra occhiello e titolo i 20 px della pagina 1:1 09: il margine del libro
   sotto l'occhiello (s-2) piu' il passo della colonna (s-3). */
.nw-doc-blocco .nlg-occhiello + .nw-doc-titolo { margin-top: calc(var(--nlg-s-2) + var(--nlg-s-3)); }

.nw-doc-premessa,
.nw-doc-chiosa,
.nw-doc-paragrafi p,
.nw-doc-colonne p {
  margin: 0;
  max-width: 72ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-premessa { margin-bottom: var(--nlg-s-6); }
.nw-doc-premessa + .nw-doc-premessa { margin-top: calc(-1 * var(--nlg-s-4)); }
.nw-doc-chiosa { margin-top: var(--nlg-s-6); }

/* Il blocco tabella (t06) della landing agenti, come la pagina 1:1 § 5.2.13:
   le celle di piu' righe respirano s-3 sopra e sotto (la libreria le pensa
   di una riga, alte quanto il tocco), e la nota sotto la tabella e' in
   corpo piccolo, a s-4 dalla tabella. */
.nw-doc-blocco[data-blocco="t06"] .nlg-tabella td { padding-top: var(--nlg-s-3); padding-bottom: var(--nlg-s-3); }

.nw-doc-blocco[data-blocco="t06"] .nw-doc-chiosa {
  margin-top: var(--nlg-s-4);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
}

.nw-doc-paragrafi {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
  max-width: 72ch;
}

/* Il testo a due colonne dell'introduzione delle domande frequenti. */
.nw-doc-colonne {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1fr 1fr);
  gap: var(--nlg-s-4) var(--nlg-gutter);
}

.nw-doc-colonne p { max-width: none; }

/* L'occhiello a lato (nlg-testo-occhiello-a-lato): 2 colonne su 12. */
.nw-doc-a-lato {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 2fr) minmax(0, 10fr));
  gap: var(--nlg-gutter);
  align-items: start;
}

.nw-doc-a-lato > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4 · LE TAPPE DEL PERCORSO — t03 «orizzontale con indicatore»: tre tappe
   con la barra, il numero in mono, il titolo che porta alla sezione e le
   sue domande.
   -------------------------------------------------------------------------- */

.nw-doc-tappe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g3, repeat(3, 1fr));
  gap: var(--nlg-s-5) var(--nlg-s-1);
}

.nw-doc-tappa {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  min-width: 0;
}

.nw-doc-tappa__barra {
  display: block;
  height: var(--nlg-s-4);
  border-radius: calc(var(--nlg-s-1) * .75);
  background: var(--nlg-bar-blue);
}

.nw-doc-tappa__numero {
  padding-right: var(--nlg-s-4);
  font: 500 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-mono);
  color: var(--nlg-blue-ink);
}

a.nw-doc-tappa__titolo {
  padding-right: var(--nlg-s-4);
  font: 700 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  color: var(--nlg-text-1);
  text-decoration: none;
}

a.nw-doc-tappa__titolo:hover { text-decoration: underline; }

.nw-doc-tappa__voci {
  padding-right: var(--nlg-s-4);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5 · LE DOMANDE A RIGHE — § 5.2.9: «ogni gruppo a righe aperte, domanda a
   sinistra e risposta a destra» — la domanda a 4 su 12, la risposta a 8
   su 12, un filo fra una riga e l'altra. La variante «Domande a
   fisarmonica» il libro l'ha sostituita: le righe non si chiudono, e non
   portano ne' segno ne' comando (pagina 1:1 09).

   OGNI DOMANDA E' UN <li class="nw-doc-domanda">, col titolo <h3> e la
   risposta in `nw-doc-domanda__risposta`: e' la forma da cui nasce lo
   schema FAQPage (App\Support\DomandeDelDocumento, che legge anche un
   <details> scritto dal pannello). Senza la griglia la risposta va sotto
   la domanda, che e' la resa del telefono — niente si perde.

   LA DOMANDA E' UN <h3>, come nella pagina 1:1 09 (le nove domande sono
   <h3>): senza, la pagina passava dall'H2 della tappa alla risposta e chi
   naviga per titoli non trovava le domande.
   -------------------------------------------------------------------------- */

.nw-doc-domande,
.nw-doc-righe {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-domanda {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 4fr) minmax(0, 8fr));
  gap: var(--nlg-s-2) var(--nlg-gutter);
  align-items: start;
  padding: var(--nlg-s-5) 0;
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
  scroll-margin-top: var(--nlg-s-4);
}

.nw-doc-domanda__titolo {
  margin: 0;
  font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

/* La forma di prima: <details class="nw-doc-domanda" open> col
   <summary class="nw-doc-domanda__voce"> e l'<h3> dentro, il corpo di
   partenza fino alla 0.3.1 («Una domanda nuova si scrive allo stesso
   modo»). La migrazione 2026_10_09_000201 non riscrive un corpo che
   l'azienda ha toccato, e lo schema FAQPage lo legge ancora: si mostra come
   la riga aperta del § 5.2.9, senza il triangolo del browser e senza
   comando — il clic non chiude la risposta, e se la voce si chiude da
   tastiera (Invio sul <summary>) la risposta resta in vista (collaudo del
   2026-10-10, C33). */
.nw-doc-domanda__voce {
  display: block;
  list-style: none;
  cursor: default;
  pointer-events: none;
}

.nw-doc-domanda__voce::-webkit-details-marker { display: none; }

.nw-doc-domanda::details-content { content-visibility: visible; }

.nw-doc-domanda__risposta {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  max-width: 72ch;
}

.nw-doc-domanda__risposta p,
.nw-doc-riga p {
  margin: 0;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Le righe di «A chi e' rivolto» (t02 a righe): stessa griglia, testo fermo. */
.nw-doc-riga {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 4fr) minmax(0, 8fr));
  gap: var(--nlg-s-2) var(--nlg-gutter);
  align-items: baseline;
  padding: var(--nlg-s-4) 0;
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-riga h3 {
  margin: 0;
  font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-riga p { max-width: 72ch; }

/* --------------------------------------------------------------------------
   6 · LA FISARMONICA — § 5.2.8 per la compliance, e le domande frequenti
   delle due landing (t02 con <details>): la testa a tutta riga col segno
   «+», il corpo sotto. Il segno resta «+» anche a voce aperta.
   -------------------------------------------------------------------------- */

.nw-doc-fisarmonica {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-fisarmonica--stretta { max-width: 72ch; }

.nw-doc-fisarmonica > li { border-bottom: var(--nlg-linea) solid var(--nlg-border); }

.nw-doc-voce { scroll-margin-top: var(--nlg-s-4); }

.nw-doc-voce__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-4);
  min-height: var(--nlg-tap-min);
  padding: var(--nlg-s-4) 0;
  cursor: pointer;
  list-style: none;
}

.nw-doc-voce__testa::-webkit-details-marker { display: none; }

.nw-doc-voce__testa--domanda {
  padding: var(--nlg-s-3) 0;
  font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-voce__nomi {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-1);
}

.nw-doc-voce__riga {
  display: flex;
  gap: var(--nlg-s-3);
  align-items: baseline;
}

.nw-doc-voce__titolo {
  font: 700 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-voce__sottotitolo {
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Il segno «+» resta «+» anche sulla voce aperta, come nelle pagine 1:1 08,
   12 e 13 (la voce «Privacy Policy» della 08 e' aperta e porta «+»). */
.nw-doc-voce__segno {
  flex: none;
  font-family: var(--nlg-font-mono);
  color: var(--nlg-blue-ink);
}

.nw-doc-voce__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-6);
  padding: 0 0 var(--nlg-s-6);
}

.nw-doc-voce__risposta {
  margin: 0 0 var(--nlg-s-4);
  max-width: 72ch;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Un paragrafo dell'informativa: h3 e testo a 72 battute. */
.nw-doc-paragrafo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  max-width: 72ch;
}

.nw-doc-paragrafo--largo { max-width: none; }

.nw-doc-paragrafo h3 {
  margin: 0;
  font: 700 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-paragrafo p,
.nw-doc-paragrafo ul {
  margin: 0;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-paragrafo ul {
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-2);
}

.nw-doc-blocco--legale .nw-doc-fisarmonica { margin-top: var(--nlg-s-5); }

/* La scheda del titolare: una card a 520 px. */
.nw-doc-scheda-titolare {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
  padding: 20px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
}

.nw-doc-scheda-titolare__nome {
  font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

/* --------------------------------------------------------------------------
   7 · IL PANNELLO PREFERENZE CONSENSO — § 5.2.8: «le categorie cookie rese
   come il pannello Preferenze consenso (funzionali sempre attivi, gli altri
   con interruttore, Rifiuta tutti · Salva le preferenze · Accetta tutti)».
   Le categorie le scrive il segnaposto [[consenso:categorie]] dalla stessa
   sorgente del banner, una riga per categoria con lo stato a destra.
   Gli interruttori sono «una resa grafica, li gestisce il sistema che
   pubblica»: tracce del libro, accese dallo script della pagina sulla scelta
   salvata. Le tre azioni della barra passano dal banner, l'unico posto che
   decide il consenso: «Rifiuta tutti» e «Accetta tutti» sono le sue due
   scelte, «Salva le preferenze» lo riapre sulle preferenze
   (`data-consent-open`, js/consent.js).
   -------------------------------------------------------------------------- */

.nw-doc-pannello {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  background: var(--nlg-surface-1);
  overflow: hidden;
}

.nw-doc-pannello__elenco .nw-compliance__categorie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

/* La riga: nome e testo a sinistra, lo stato a destra (pagina 1:1 08). */
.nw-doc-pannello__elenco .nw-compliance__categoria {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nome stato" "testo stato";
  gap: 3px var(--nlg-s-4);
  align-items: center;
  padding: 14px 18px;
}

.nw-doc-pannello__elenco .nw-compliance__categoria + .nw-compliance__categoria {
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-pannello__elenco .nw-compliance__categorie dt {
  grid-area: nome;
  display: block;
  font: 600 var(--nlg-fs-body)/1.35 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-pannello__elenco .nw-compliance__parametri {
  margin-left: 6px;
  font-family: var(--nlg-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--nlg-text-3);
}

.nw-doc-pannello__elenco .nw-compliance__parametri code { font: inherit; }

.nw-doc-pannello__elenco .nw-compliance__categorie dd {
  grid-area: testo;
  margin: 0;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-pannello__elenco .nw-compliance__categorie dd.nw-compliance__stato {
  grid-area: stato;
  display: flex;
  align-items: center;
}

.nw-doc-pannello__elenco .nw-compliance__sempre {
  font-family: var(--nlg-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

/* La traccia del libro, spenta; accesa sulla scelta salvata (data-acceso).
   Nasce `hidden` (partials/segnaposti/consenso-categorie), e [hidden] di
   site.css vince su questo display: la mostra lo script della pagina, che
   sa la scelta. */
.nw-compliance__interruttore { display: inline-block; flex: none; }
.nw-compliance__interruttore[data-acceso] { background: var(--nlg-action); }
.nw-compliance__interruttore[data-acceso]::after { transform: translateX(var(--nlg-s-4)); }

.nw-doc-pannello__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--nlg-s-2);
  padding: 14px 18px;
  border-top: var(--nlg-linea) solid var(--nlg-border);
  background: var(--nlg-surface-2);
}

/* Le tre azioni nella misura piccola della pagina 1:1: 36 px, 13 px. */
.nw-doc-pannello__azioni .nlg-btn { height: var(--nlg-comando-h); padding: 0 14px; font-size: var(--nlg-fs-caption); }

/* --------------------------------------------------------------------------
   8 · I RECAPITI DELLA CASAMADRE — la coda della § 5.2.9 (anteprima).
   -------------------------------------------------------------------------- */

.nw-doc-recapiti {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 5fr) minmax(0, 7fr));
  gap: var(--nlg-s-4) var(--nlg-gutter);
  align-items: start;
  padding: 22px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-doc-recapiti__chi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nw-doc-recapiti__nome {
  font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
}

.nw-doc-recapiti__riga {
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
}

.nw-doc-recapiti__fiscale { margin-top: var(--nlg-s-1); }

.nw-doc-recapiti__azioni {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--nlg-s-2);
}

.nw-doc-recapiti__azioni .nlg-btn {
  height: 36px;
  padding: 0 var(--nlg-s-3);
  font-size: var(--nlg-fs-caption);
}

/* --------------------------------------------------------------------------
   9 · LE SCHEDE DEI VANTAGGI — t02 «tre per riga»: icona in un quadrato
   info, titolo, testo; l'ultima tratteggiata porta la nota del catalogo.
   -------------------------------------------------------------------------- */

.nw-doc-schede {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g3, repeat(3, minmax(0, 1fr)));
  gap: var(--nlg-s-4);
}

.nw-doc-scheda {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-doc-scheda--nota {
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--nlg-border-strong);
}

.nw-doc-scheda--nota p {
  margin: 0;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-scheda__icona {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--nlg-r-md);
  background: var(--nlg-info-bg);
  border: 1px solid var(--nlg-info-border);
  color: var(--nlg-blue-ink);
}

.nw-doc-scheda__icona svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.nw-doc-scheda__titolo {
  font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
  text-wrap: balance;
}

.nw-doc-scheda__testo {
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10 · LA CHIUSA IN LINEA — t07 «in linea»: titolo e riga a sinistra, il
   bottone a destra, fra due fili; va a capo sotto la base del testo.
   -------------------------------------------------------------------------- */

.nw-doc-chiusa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-5);
  padding: var(--nlg-s-5) 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-chiusa__testo {
  flex: 1 1 var(--nlg-testo-min);
  min-width: 0;
}

.nw-doc-chiusa__titolo {
  margin: 0;
  font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
}

.nw-doc-chiusa__testo p {
  margin: var(--nlg-s-2) 0 0;
  max-width: 60ch;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Le candidature senza layout nel libro (proponiti come fornitore, apri una
   sede), in coda a «Diventa partner»: non altre fasce, ma due azioni di
   terzo livello DENTRO la chiusura «Candidati», sotto «Compila il modulo»,
   che aprono ciascuna la propria modale. La riga segue il corpo, e quando
   la chiusa la precede le si attacca: la chiusa perde il filo e il passo
   di sotto, la riga li porta, e la pagina chiude con un touchpoint solo. */
.nw-doc-altre-candidature {
  background: var(--nlg-canvas);
  padding: 0 0 calc(var(--nlg-s-9) * var(--nlg-passo-k, 1));
}

.nw-doc-altre-candidature__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--nlg-s-1) var(--nlg-s-3);
  padding: var(--nlg-s-3) 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

/* Gli altri comandi di quei touchpoint (rese/parti/azioni) stanno nella
   stessa riga, senza un riquadro loro. */
.nw-doc-altre-candidature__azioni > .nw-tp__azioni { display: contents; }

.nw-doc-blocco[data-blocco="t07"]:has(+ .nw-doc-altre-candidature) { padding-bottom: 0; }

.nw-doc-blocco[data-blocco="t07"]:has(+ .nw-doc-altre-candidature) .nw-doc-chiusa {
  padding-bottom: var(--nlg-s-3);
  border-bottom: 0;
}

.nw-doc-blocco[data-blocco="t07"] + .nw-doc-altre-candidature .nw-doc-altre-candidature__azioni {
  padding-top: 0;
  border-top: 0;
}

/* Sul telefono la chiusa va a capo e «Compila il modulo» scende a sinistra:
   le due azioni gli stanno sotto, allineate a lui. */
@media (max-width: 719px) {
  .nw-doc-altre-candidature__azioni { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   11 · L'INDICE LATERALE DEI TERMINI — § 5.2.7 linguetta 1: 220 px di
   indice a filo sinistro, l'articolo accanto. L'indice resta in vista
   mentre si legge; sul telefono va sopra il testo.
   -------------------------------------------------------------------------- */

.nw-doc-con-indice {
  display: grid;
  grid-template-columns: var(--nlg-g2, 220px minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

/* Un elemento fermo accanto a cio' che scorre (brand book 5.9.0, § 4.1.10):
   il filo delle voci e basta, e si ferma sotto la testata, non sotto di lei
   (site.css, `--nw-sotto-la-testata`). */
.nw-doc-indice {
  position: sticky;
  top: calc(var(--nw-sotto-la-testata) + var(--nlg-s-6));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nw-doc-indice a {
  padding: var(--nlg-s-2) 14px;
  border-left: 2px solid var(--nlg-border);
  font-size: var(--nlg-fs-body-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--nlg-text-3);
}

.nw-doc-indice a:hover { color: var(--nlg-text-1); }

.nw-doc-indice a[aria-current="true"] {
  border-left-color: var(--nlg-action);
  font-weight: 700;
  color: var(--nlg-text-1);
}

.nw-doc-articoli {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-8);
  min-width: 0;
}

.nw-doc-articolo,
.nw-doc-articoli > h2[id] {
  scroll-margin-top: var(--nlg-s-4);
}

.nw-doc-articolo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nw-doc-articolo h2,
.nw-doc-articoli > h2 {
  margin: 0;
  font: 800 var(--nlg-fs-h2)/1.2 var(--nlg-font-ui);
  letter-spacing: -0.02em;
  color: var(--nlg-text-1);
}

.nw-doc-articolo p,
.nw-doc-articoli > p,
.nw-doc-articoli > ul {
  margin: 0;
  max-width: 72ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-articolo p.nw-doc-in-preparazione { color: var(--nlg-text-3); font-style: italic; }

@media (max-width: 760px) {
  .nw-doc-indice { position: static; }
}

/* --------------------------------------------------------------------------
   12 · LA MAPPA DEL SITO — nessun layout nel libro: l'apertura del § 5.4.1
   e, come blocco, le sezioni della sitemap a righe (la stessa griglia
   delle righe del t02: il nome della sezione a sinistra, le pagine a
   destra). E' l'unica zona che si concretizza con una logica reale: un
   elenco.
   -------------------------------------------------------------------------- */

.nw-doc-mappa {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-mappa__sezione {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 4fr) minmax(0, 8fr));
  gap: var(--nlg-s-3) var(--nlg-gutter);
  align-items: baseline;
  padding: var(--nlg-s-5) 0;
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-mappa__nome {
  margin: 0;
  font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-mappa__voci {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--nlg-s-2) var(--nlg-s-5);
}

.nw-doc-mappa__voci a {
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
}

.nw-doc-mappa__voci a:hover { color: var(--nlg-text-1); }

.nw-doc-vuoto {
  margin: 0;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
}