/* ===========================================================================
   PAGINE INTERNE — impaginato
   ---------------------------------------------------------------------------
   Foglio condiviso da otto pagine: servizi, prodotti, esg, persone e i quattro
   prodotti PS-*. Non ridefinisce nulla: `impaginato.css` va caricato prima e da
   lì arrivano griglia (.pg), campi (.field), token, tipografia, `.tick`,
   `.mini-label`, `.fact`, `.lnk`, `.btn-solid`, `.imp-person`.

   Perché un foglio solo per otto pagine: hanno lo stesso scheletro —
   intestazione, introduzione, uno o due blocchi di contenuto, chiamata
   all'azione. Un foglio per pagina avrebbe prodotto sette varianti della
   stessa intestazione, destinate a divergere al primo ritocco.

   ELENCHI IN RIGHE CON FILETTO, mai in griglie di card. Non è una preferenza
   estetica, ed è la stessa scelta della home per le righe prodotto e servizi.
   Le ragioni:
     - in una griglia di N celle una finisce sempre per pesare più delle altre
       (l'ultima riga spaiata, la cella più alta, il testo più lungo); in N
       righe con identico span, filetto e padding, no;
     - la card è un contenitore con fondo, bordo e ombra, cioè il vocabolario
       del pannello applicativo — esattamente ciò da cui questo sistema esce;
     - il numero di elementi smette di essere cablato nel CSS: aggiungerne o
       toglierne uno è aggiungere o togliere un blocco.
   Per la stessa ragione sparisce `.card-icon`: quei quattro pittogrammi
   (cilindro, istogramma, freccia circolare, ingranaggio) sono l'iconografia
   generica del settore, la stessa su ogni sito di software gestionale.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   INTESTAZIONE DI PAGINA — inchiostro pieno, saldata alla testata.
   Uguale su tutte e sette: è ciò che rende riconoscibile una pagina interna.
   Nessuna fotografia (quella è dell'apertura della home) e nessun min-height
   in vh: è un'intestazione, non una schermata.
   --------------------------------------------------------------------------- */
.impaginato .pg-hero .field--ink { grid-column: bleed-start / bleed-end; }

.impaginato .pg-hero-body {
  grid-column: col 1 / col 9;
  grid-row: 1;
  padding-block: var(--s2);
}
.impaginato .pg-hero-body .tick { margin-bottom: 22px; }
.impaginato .pg-hero-body .mini-label {
  color: var(--imp-orange-lite);
  display: block;
  margin-bottom: 14px;
}
.impaginato .pg-hero-body h1 {
  color: var(--on-ink);
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  max-width: 24ch;
}
/* riga di apertura facoltativa: solo Contatti la usa per ora, l'intestazione
   qui non ha un blocco introduttivo separato subito sotto */
.impaginato .pg-hero-body .lead {
  max-width: 44ch;
  font-size: var(--fs-intro);
  color: var(--on-ink-2);
  margin-top: 22px;
}

/* ---------------------------------------------------------------------------
   INTRODUZIONE — carta nuda, senza testata: il titolo l'ha già dato
   l'intestazione e questi paragrafi ne sono la continuazione. La gerarchia la
   fa la MISURA (56ch), non un rientro né un corpo più grande.
   --------------------------------------------------------------------------- */
.impaginato .pg-intro { padding-block: var(--s3) var(--s2); }

.impaginato .pg-intro-body {
  grid-column: col 1 / col 8;
  grid-row: 1;
}
/* Logo del prodotto, cliccabile verso il sito vero. Sfondo bianco pieno nel
   file (non trasparente): per questo resta sulla carta dell'introduzione,
   mai su un campo scuro o pietra, dove il riquadro si vedrebbe. */
.impaginato .pg-intro-logo {
  display: inline-block;
  margin-bottom: 22px;
  transition: opacity .2s ease;
}
.impaginato .pg-intro-logo:hover,
.impaginato .pg-intro-logo:focus-visible { opacity: .75; }
.impaginato .pg-intro-logo:focus-visible { outline: 2px solid var(--imp-orange); outline-offset: 3px; }
.impaginato .pg-intro-logo img { display: block; width: 160px; height: auto; }
.impaginato .pg-intro-body p {
  font-size: var(--fs-intro);
  line-height: 1.65;
  color: var(--imp-text-mid);
  max-width: 56ch;
}
.impaginato .pg-intro-body p + p { margin-top: 22px; }
/* Titolo dentro l'introduzione: ECCEZIONE, e serve a `prodotti.php` soltanto.
   Il blocco è nato senza testata perché di norma il titolo l'ha già dato
   l'intestazione; là però la pagina ha una struttura da annunciare (tre
   famiglie, che sono tre sezioni con ancora) e senza titolo il lettore le
   incontra senza sapere che sono tre. Corpo da titoletto e non da h2 di
   sezione: i titoli delle tre famiglie devono restare i più grandi della
   pagina dopo l'intestazione, e un secondo h2 a corpo pieno qui li pareggerebbe. */
.impaginato .pg-intro-body h2 {
  font-size: var(--fs-titoletto);
  margin-top: var(--s1);
}
.impaginato .pg-intro-body h2 + p { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   BLOCCO DI CONTENUTO — testata su un solo asse + righe.
   `.pg-block` è su carta, `.pg-block--stone` porta il campo pietra con
   l'angolo interno (la stessa geometria delle Prove in home e dei punti di
   forza in Chi siamo). Una pagina non deve avere più di un blocco pietra:
   il campo con l'angolo è un accento, non un fondo alternato.
   --------------------------------------------------------------------------- */
.impaginato .pg-block { padding-block: var(--s1) var(--s3); }
/* `--s1` in alto presuppone un blocco sopra da cui staccarsi appena (di solito
   `.pg-intro`). Le pagine che saltano `pg-intro` e vanno dritte dall'intestazione
   scura al primo blocco di contenuto restavano con uno stacco troppo stretto
   rispetto a tutte le altre — persone.php fu la prima segnalata, ma lo stesso
   salto lo fanno contatti (`.pg-contact`), privacy/cookie (`.pg-legal`) e le due
   pagine di accesso all'area riservata (`.pg-login`). Qui lo stacco torna
   quello grande, coerente con `pg-intro`, per chiunque segua direttamente
   `pg-hero`. */
.impaginato .pg-hero + .pg-block,
.impaginato .pg-hero + .pg-contact,
.impaginato .pg-hero + .pg-legal,
.impaginato .pg-hero + .pg-login {
  padding-top: var(--s3);
}

.impaginato .pg-block-head { grid-column: col 1 / col 7; grid-row: 1; }
.impaginato .pg-block-head .mini-label { display: block; margin-bottom: 14px; }
.impaginato .pg-block-head h2 { max-width: 22ch; }
.impaginato .pg-block-head .lead {
  max-width: 48ch;
  font-size: var(--fs-intro);
  color: var(--imp-text-mid);
  margin-top: 20px;
}

.impaginato .pg-rows {
  grid-column: col 1 / c-end;
  grid-row: 2;
  margin-top: var(--s2);
}

/* La riga: nome a sinistra, descrizione a destra, filetto sopra. Le stesse
   proporzioni delle righe prodotto in home (4/12 e 6/12), così una riga si
   legge uguale su qualunque pagina del sito. */
.impaginato .pg-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cgap);
  border-top: 1px solid var(--rule);
  padding-block: 34px;
}
.impaginato .pg-row:last-child { border-bottom: 1px solid var(--rule); }
.impaginato .pg-row .name { grid-column: 1 / 5; }
/* 6/13 e non 6/12: vedi il commento gemello su .prod-row in impaginato.css —
   stesso bug di griglia, corretto nello stesso modo in entrambi i fogli. */
.impaginato .pg-row .desc { grid-column: 6 / 13; }
.impaginato .pg-row h3 {
  font-size: var(--fs-riga);
  margin-bottom: 0;
}
/* etichetta sopra il nome: sigla del modulo (PUMA, EBA, RAF…) o categoria.
   Sta sopra e non accanto, così i nomi restano tutti sullo stesso asse. */
.impaginato .pg-row .tag {
  display: block;
  font-size: var(--fs-etichetta);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--imp-orange-ink);
  margin-bottom: 8px;
}
/* Nessun max-width qui: vedi il commento gemello su .prod-row in
   impaginato.css — la cella (6/13) è già la misura pensata per il testo. Il
   72ch di `.pg-row--inline p` più sotto è un caso diverso: lì il testo è
   tutto il contenuto della riga, non ha una cella di griglia a definirne
   la larghezza, quindi il tetto in caratteri resta l'unico controllo. */
.impaginato .pg-row .desc,
.impaginato .pg-row p {
  font-size: var(--fs-corpo);
  line-height: 1.6;
  color: var(--imp-text-mid);
}

/* Riga cliccabile: l'intera riga è il bersaglio, non un "Scopri di più →" in
   fondo alla card. Stesso comportamento dell'indice prodotti in home — cambia
   colore SOLO il nome, senza fondo di riga né colonna d'azione, che erano i
   segnali che trasformavano un indice in una tabella di applicativo.
   L'area cliccabile resta comunque tutta la riga: chi punta la descrizione
   arriva alla scheda, ma niente lo suggerisce con un rettangolo evidenziato. */
.impaginato a.pg-row { text-decoration: none; }
/* Ancora di ritorno dalle pagine prodotto, su un elemento a sé e non
   sull'<a> della riga: se l'id sta sul link, il salto da frammento lo mette
   a fuoco e il browser disegna il rettangolo di default intorno a tutta la
   riga — un effetto collaterale del focus, non qualcosa scelto qui. Uno span
   non è mai a fuoco, quindi lo scorrimento arriva senza quel bordo.
   Stesso scarto della testata (112px) delle altre ancore del sito. */
.impaginato .pg-anchor { display: block; scroll-margin-top: 112px; }
/* LA FRECCIA È IL SEGNALE A RIPOSO, e senza di essa la riga non dichiarava di
   essere cliccabile: il colore cambiava solo al passaggio, quindi chi non
   passava sopra il nome non sapeva di poterci entrare.
   Il problema era strutturale, non estetico: sul sito ci sono 7 righe
   collegamento (tutte in prodotti.php) contro 63 statiche su undici pagine, e
   le due forme sono identiche a riposo — chi impara da una pagina prodotto che
   le righe non si cliccano, sul catalogo non ci prova.
   STA IN CSS E NON NEL MARKUP di proposito: così l'affordance è una proprietà
   di «riga che è un collegamento». Compare su ogni `a.pg-row` e mai su un
   `div.pg-row`, quindi non si può dimenticare su una riga nuova né mettere per
   sbaglio su una statica — e le due forme si distinguono per un carattere solo
   nel tag, quindi il rischio è concreto.
   ACCANTO AL NOME e non a destra della riga: una colonna d'azione era già
   stata scartata (vedi il commento qui sopra) perché trasformava l'indice in
   una tabella di applicativo.
   `→` e non `↗`: l'obliqua è riservata a `.ext`, che segnala l'uscita dal sito.
   Compromesso noto: alcuni lettori di schermo annunciano il contenuto
   generato. È rumore su un collegamento che ha già il nome del prodotto come
   etichetta, e vale meno del rischio di manutenzione di sette span scritti a
   mano. */
.impaginato a.pg-row h3::after {
  content: '\00a0\2192';
  font-size: .8em;
  font-weight: 400;
  color: var(--imp-gray);
}
.impaginato a.pg-row:hover h3 {
  color: var(--imp-orange-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.impaginato a.pg-row:hover h3::after { color: var(--imp-orange-ink); }
/* Segnale di collegamento esterno accanto al nome: una freccia obliqua, non
   un'icona. Chi clicca esce dal sito e va detto prima, non dopo. */
.impaginato .pg-row .ext {
  font-size: .8em;
  font-weight: 400;
  color: var(--imp-gray);
  margin-left: .4em;
  text-decoration: none;
  display: inline-block;
}

/* Riga in variante "etichetta in linea", per gli elenchi nella forma
   `<b>Etichetta:</b> testo`. Il nome non è un titolo
   di prodotto ma l'apertura della frase, quindi resta nel paragrafo — dividerlo
   su due colonne spezzerebbe una frase unica in due blocchi.
   Nessun max-width: stessa ragione già vista per `.pg-row .desc` — è il
   contenitore (narrow sul campo pietra, pieno su carta nuda) a decidere la
   misura, non un secondo tetto in caratteri sopra. */
.impaginato .pg-row--inline { display: block; }
.impaginato .pg-row--inline p {
  font-size: var(--fs-corpo);
}
.impaginato .pg-row--inline b {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

/* Variante stretta: SOLO sul campo pietra (vedi sotto). Lì il contenuto
   rientra dentro un campo più stretto della pagina, quindi le righe devono
   fermarsi all'asse del campo — altrimenti il testo (e il filetto sopra)
   sconfinerebbero oltre il bordo destro della pietra stessa.
   Su carta nuda questa classe non fa nulla di proposito: le righe restano
   larghe come il resto della pagina (regola base di `.pg-rows`), perché lì
   non c'è un campo più stretto a cui allinearsi — e senza un campo pietra
   che riempia lo spazio in più, un rientro qui lascerebbe solo carta bianca
   senza motivo, la stessa cosa già corretta per `.pg-row .desc`. */

/* --- variante su campo pietra --- */
.impaginato .pg-block--stone { padding-block: var(--s2); }
.impaginato .pg-block--stone .field--stone { grid-column: col 2 / bleed-end; }
/* Il contenuto rientra dentro il campo: è ciò che giustifica l'angolo.
   Stessi assi delle Prove in home (col 3) — un asse sinistro e uno destro. */
.impaginato .pg-block--stone .pg-block-head { grid-column: col 3 / col 9; }
.impaginato .pg-block--stone .pg-rows { grid-column: col 3 / c-end; }
.impaginato .pg-block--stone .pg-rows--narrow { grid-column: col 3 / col 9; }
/* filetto più marcato: sulla pietra quello su carta si perde */
.impaginato .pg-block--stone .pg-row { border-color: var(--rule-strong); }
.impaginato .pg-block--stone .pg-row:last-child { border-bottom-color: var(--rule-strong); }

/* ---------------------------------------------------------------------------
   NOTA — chiosa a fine blocco. Niente fondo né bordo: è un blocco di testo su
   misura più stretta, aperto dal filetto arancione già in uso come segno
   d'apertura in tutta la pagina. Un fondo ne farebbe l'unico elemento "in
   scatola" del sito.
   --------------------------------------------------------------------------- */
.impaginato .pg-note {
  grid-column: col 1 / col 8;
  margin-top: var(--s2);
}
.impaginato .pg-note .tick { margin-bottom: 18px; }
.impaginato .pg-note h3 { font-size: var(--fs-titoletto); margin-bottom: 12px; }
.impaginato .pg-note p {
  font-size: var(--fs-corpo);
  line-height: 1.65;
  color: var(--imp-text-mid);
  max-width: 58ch;
}
.impaginato .pg-note p + p { margin-top: 14px; }

/* Link di ritorno al catalogo, in cima alle pagine prodotto: riporta alla riga
   di quel prodotto (ancora sulla `pg-row` in prodotti.php), non in cima alla
   pagina — è il motivo per cui esiste, non un breadcrumb decorativo. Colori da
   inchiostro, come `.lnk--on-ink`, perché vive nell'hero scuro. */
.impaginato .pg-back {
  display: inline-block;
  font-size: var(--fs-etichetta);
  font-weight: 600;
  color: var(--imp-orange-lite);
  margin-bottom: 22px;
  transition: color .2s ease;
}
.impaginato .pg-back:hover,
.impaginato .pg-back:focus-visible { color: var(--on-ink); }
.impaginato .pg-back:focus-visible { outline: 2px solid var(--imp-orange-lite); outline-offset: 3px; }
/* Logo del partner citato nella nota: stesso trattamento (grigio, colore al
   passaggio del mouse) dei loghi nelle fasce di home, ma isolato — qui non
   c'è una fascia di più marchi da pareggiare, quindi nessuna taratura per
   pixel, solo grigio leggibile. */
.impaginato .pg-note-partner {
  display: inline-block;
  margin-top: 18px;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}
.impaginato .pg-note-partner:hover,
.impaginato .pg-note-partner:focus-visible { filter: grayscale(0); opacity: 1; }
.impaginato .pg-note-partner:focus-visible { outline: 2px solid var(--imp-orange); outline-offset: 3px; }
.impaginato .pg-note-partner img { display: block; width: auto; max-height: 32px; }
/* dentro il campo pietra la nota segue l'asse del campo, non quello della pagina */
.impaginato .pg-block--stone .pg-note { grid-column: col 3 / col 10; }

/* Link al certificato scaricabile: chiude un blocco di righe, non apre una
   sezione propria. Il marchio Synesgy non è ripetuto qui: compare già nelle
   Prove in home, e un secondo campo pietra per un solo link (dopo aver
   tolto anche il marchio) sarebbe stato un colore senza nulla da segnalare
   — lo stesso problema già corretto per PS-Overw. */
.impaginato .pg-cert-link { grid-column: col 1 / col 8; margin-top: var(--s2); }

/* ---------------------------------------------------------------------------
   REPORT DI SOSTENIBILITÀ — copertina + marchio, in chiusura di esg.php.
   La copertina è un COLLEGAMENTO al PDF, non un'illustrazione: la foto in barca
   che porta appartiene al documento pubblicato, e attaccata alla copertina si
   legge come prova. La stessa foto sciolta sopra le righe degli impegni
   sarebbe atmosfera accanto a claim ambientali, cioè il segnale visivo che i
   lettori associano al greenwashing.
   FILETTO SULLA COPERTINA: la pagina del report è bianca e il campo è pietra
   (#E7E5E1), quindi senza un bordo il foglio si fonde col fondo e la
   copertina non si legge più come un documento. 1px, dentro il limite del
   sistema — vedi la regola sui raggi in impaginato.css.
   --------------------------------------------------------------------------- */
.impaginato .esg-report {
  grid-column: col 3 / c-end;
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--s2);
  align-items: start;
  margin-top: var(--s2);
}
.impaginato .esg-cover { display: block; }
.impaginato .esg-cover img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule-strong);
}
.impaginato .esg-report-body p {
  font-size: var(--fs-corpo);
  line-height: 1.6;
  color: var(--imp-text-mid);
  max-width: 56ch;
}
.impaginato .esg-report-body p + p { margin-top: 18px; }
/* Il marchio e la sua didascalia stanno insieme, staccati dal testo sopra da un
   filetto: sono una fonte esterna, non una nostra affermazione. */
.impaginato .esg-mark {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: var(--s2);
  padding-top: var(--s1);
  border-top: 1px solid var(--rule);
}
.impaginato .esg-mark img { height: 68px; width: auto; display: block; flex: none; }
.impaginato .esg-mark p { font-size: var(--fs-nota); margin: 0; max-width: 46ch; }

/* ---------------------------------------------------------------------------
   PERSONE — la riga persona è `.imp-person`, già definita in impaginato.css
   (fotografia quadrata da 88px, nome, ruolo, biografia, filetto sopra).
   Qui serve solo contenere la misura: dentro `.pg-rows`, che è larga tutta la
   pagina, la biografia arriverebbe a righe di venti parole. Nessun componente
   nuovo, quindi la scheda persona si presenta identica in home e qui.
   --------------------------------------------------------------------------- */
.impaginato .pg-rows .imp-person p:last-child { max-width: 62ch; }
/* fotografie del team in formati misti (jpg, png, gif): `cover` su un quadrato
   le normalizza, ma alcune sono ritratti stretti — il baricentro sta in alto */
.impaginato .pg-rows .imp-person img { object-position: 50% 22%; }

/* ---------------------------------------------------------------------------
   CHIAMATA ALL'AZIONE — inchiostro, si fonde nel footer senza confine
   orizzontale, come la chiusura della home.
   --------------------------------------------------------------------------- */
.impaginato .pg-cta { padding-block: var(--s2); }
.impaginato .pg-cta .field--ink { grid-column: bleed-start / bleed-end; }

.impaginato .pg-cta-body { grid-column: col 1 / col 9; grid-row: 1; }
.impaginato .pg-cta-body h2 { color: var(--on-ink); margin-bottom: 16px; }
.impaginato .pg-cta-body p {
  max-width: 44ch;
  color: var(--on-ink-2);
  margin-bottom: 32px;
}
/* Bottone e collegamento affiancati, per i prodotti che hanno anche un sito
   proprio: la pagina resta la porta d'ingresso — è qui che sta il modulo di
   contatto precompilato — e il sito è il passo successivo per chi lo vuole.
   Stessa geometria di `.hero-actions` in home (26px, allineati al centro,
   a capo se non ci stanno), così due chiusure del sito non si presentano
   con due spaziature diverse. */
.impaginato .pg-cta-body .cta-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

/* --- tablet / desktop stretto --- */
@media (max-width: 1080px) {
  .impaginato .pg-hero-body   { grid-column: col 1 / col 11; }
  .impaginato .pg-intro-body  { grid-column: col 1 / col 10; }
  .impaginato .pg-block-head  { grid-column: col 1 / col 9; }
  .impaginato .pg-block--stone .pg-block-head { grid-column: col 3 / col 11; }
  .impaginato .pg-note        { grid-column: col 1 / col 10; }
  .impaginato .pg-block--stone .pg-note { grid-column: col 3 / c-end; }
  .impaginato .pg-cert-link   { grid-column: col 1 / col 10; }
  .impaginato .esg-report     { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .impaginato .pg-cta-body    { grid-column: col 1 / col 11; }
  /* la descrizione prende più larghezza: a questa misura 6 colonne su 12
     lasciavano righe di quattro parole */
  .impaginato .pg-row .name { grid-column: 1 / 5; }
  .impaginato .pg-row .desc { grid-column: 5 / 13; }

  .impaginato .pg-block--stone .pg-rows--narrow { grid-column: col 3 / col 11; }
}

/* --- telefono --- */
@media (max-width: 720px) {
  .impaginato .pg-hero-body { grid-column: col 1 / c-end; padding-block: var(--s2); }
  .impaginato .pg-hero-body h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); max-width: none; }

  .impaginato .pg-intro { padding-block: var(--s2); }
  .impaginato .pg-intro-body { grid-column: col 1 / c-end; }
  .impaginato .pg-intro-body p { max-width: none; }

  .impaginato .pg-block { padding-block: var(--s1) var(--s2); }
  .impaginato .pg-block-head { grid-column: col 1 / c-end; }
  .impaginato .pg-block-head h2 { max-width: none; }
  .impaginato .pg-block-head .lead { max-width: none; }
  .impaginato .pg-rows,
  .impaginato .pg-rows--narrow { grid-column: col 1 / c-end; margin-top: var(--s2); }
  /* La copertina passa sopra il testo e si ferma a 220px: a piena larghezza
     una pagina verticale mangerebbe tutto lo schermo prima del contenuto. */
  .impaginato .esg-report { grid-template-columns: 1fr; }
  .impaginato .esg-cover img { max-width: 220px; }
  .impaginato .esg-mark { flex-wrap: wrap; gap: 14px; }
  /* la riga si impila: nome sopra, descrizione sotto */
  .impaginato .pg-row { grid-template-columns: 1fr; padding-block: 24px; }
  .impaginato .pg-row .name,
  .impaginato .pg-row .desc { grid-column: 1; }
  .impaginato .pg-row .name { margin-bottom: 10px; }
  .impaginato .pg-row .desc,
  .impaginato .pg-row p { max-width: none; }

  /* Il campo pietra conserva l'angolo: non tocca il bordo sinistro nemmeno
     qui, come le Prove in home e i punti di forza in Chi siamo. */
  .impaginato .pg-block--stone { padding-block: var(--s2); }
  .impaginato .pg-block--stone .field--stone {
    grid-column: bleed-start / bleed-end;
    margin-left: 20px;
  }
  .impaginato .pg-block--stone .pg-block-head,
  .impaginato .pg-block--stone .pg-rows,
  .impaginato .pg-block--stone .pg-rows--narrow,
  .impaginato .pg-block--stone .pg-note { grid-column: col 1 / c-end; padding-left: 20px; }

  .impaginato .pg-cert-link { grid-column: col 1 / c-end; }
  .impaginato .pg-note { grid-column: col 1 / c-end; }
  .impaginato .pg-note p { max-width: none; }

  .impaginato .pg-cta { padding-block: var(--s2); }
  .impaginato .pg-cta-body { grid-column: col 1 / c-end; }
  .impaginato .pg-cta-body p { max-width: none; }
}