/*
 * AgriTraccia – sito vetrina («Lo strumento»).
 *
 * Solo l'impaginazione delle pagine pubbliche e le poche figure della vetrina. Pulsanti, stati,
 * bolla, schermo, marca, procedura, specifiche, scheda, tabelle e moduli sono del design system
 * (brand/css/components.css): qui non si ridisegnano. Mobile first: le media query aggiungono
 * colonne, non le tolgono. Colori solo dai token; giallo = conferma di una persona, arancio = da
 * controllare (con icona e parola), verde = controllo superato. Nessuna ombra (tranne la carta della
 * bolla, nel design system), nessun movimento oltre alla marca della conferma.
 *
 * Punti di rottura: 30em (480), 48em (768), 62.5em (1000), 71.25em (1140), 78.75em (1260).
 *
 * Indice: ritmo delle sezioni · apertura delle pagine interne · scena della home · legge e
 * scadenze · come funziona · riepilogo · su misura (scheda e anteprima del portale) · garanzie ·
 * fascia finale · disponibilità dei moduli · pagine interne · moduli e contatti · accesso · testi legali
 */

/* ===================================================================================
   Ritmo delle sezioni
   =================================================================================== */
.showcase .section__title {
  margin-bottom: var(--space-8);
}

.section__intro {
  max-width: 36em;
  margin: calc(-1 * var(--space-3)) 0 var(--space-10);
  font-size: var(--text-lg);
  line-height: 1.5;
}

/* Griglie a una colonna sul telefono: la colonna non si allarga oltre il contenitore anche se un
   figlio ha contenuto che non va a capo (es. la fascia del portale nelle figure). */
.page-head__inner,
.scene__head,
.bench,
.law__grid,
.flow,
.tailor,
.guarantees,
.cta-band__inner,
.split,
.request-row,
.manual-figure,
.compare,
.sheet-to-portal,
.datasheet__group,
.contact,
.access__inner {
  grid-template-columns: minmax(0, 1fr);
}

/* Una sezione bianca subito dopo l'apertura: il filetto pesante c'è già, basta meno aria. */
.page-head + .section:not(.section--steel, .section--black) {
  padding-top: var(--space-12);
}

@media (min-width: 48em) {
  .showcase .section__title {
    margin-bottom: var(--space-10);
  }
}

/* ===================================================================================
   Apertura delle pagine interne: titolo largo, testo a destra, filetto pesante
   =================================================================================== */
.page-head {
  padding-top: var(--space-10);
}

.page-head__inner {
  display: grid;
  gap: var(--space-5);
}

.page-head__inner::after {
  content: "";
  display: block;
  height: var(--rule-heavy);
  margin-top: var(--space-4);
  background: var(--color-black);
}

/* Seguita da una sezione d'acciaio: il cambio di piano separa già, il filetto non serve. */
.page-head:has(+ .section--steel) {
  padding-bottom: var(--space-12);
}

.page-head:has(+ .section--steel) .page-head__inner::after {
  display: none;
}

.page-head__title {
  max-width: 14em;
}

.page-head__lead {
  max-width: 34em;
  font-size: var(--text-lg);
  line-height: 1.5;
}

@media (min-width: 62.5em) {
  .page-head {
    padding-top: var(--space-16);
  }

  .page-head__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    gap: var(--space-8) var(--space-16);
    align-items: end;
  }

  .page-head__inner::after {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
  }
}

/* ===================================================================================
   Scena della home: il prodotto al lavoro sul piano d'acciaio
   =================================================================================== */
.scene {
  --ddt-table: var(--color-steel); /* i fori del blocchetto della bolla prendono il colore del piano */
  padding-block: var(--space-8) var(--space-16);
  background: var(--color-steel);
}

.scene__head {
  display: grid;
  gap: var(--space-6);
}

.scene__title {
  max-width: 13.5em;
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}

/* «Tu confermi.» sempre su una riga sua: è il punto della frase. */
.scene__title-end {
  display: block;
}

.scene__lead p {
  max-width: 34em;
}

.scene__lead p + p {
  margin-top: var(--space-5);
}

.scene__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}

/* Il banco: la bolla fotografata, lo schermo che l'ha letta, il posto della marca. */
.bench {
  display: grid;
  gap: var(--space-10);
  max-width: 36rem;
  margin-top: var(--space-10);
}

.bench .ddt {
  max-width: 25rem;
}

.bench__notice {
  margin-top: var(--space-4);
}

.bench__foot {
  position: relative;
  margin-top: var(--space-5);
}

.bench__foot .screen__actions {
  margin-top: 0;
}

.bench__done {
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.bench__tag {
  margin: var(--space-6) 0 0 var(--space-2);
}

.bench__tag .eartag {
  width: 8.5rem;
}

@media (min-width: 48em) {
  .scene {
    padding-block: var(--space-12) var(--space-20);
  }
}

@media (min-width: 62.5em) {
  .scene__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
    gap: var(--space-8) var(--space-16);
    align-items: end;
  }

  .bench {
    grid-template-columns: minmax(0, 25rem) minmax(0, 33rem);
    gap: var(--space-12) calc(var(--space-12) + var(--space-2));
    align-items: start;
    max-width: none;
    margin-top: var(--space-16);
  }

  .bench .ddt {
    align-self: center;
  }
}

/* Schermi larghi: la marca sta fuori dallo schermo, appesa accanto ai pulsanti. */
@media (min-width: 78.75em) {
  .bench__tag {
    position: absolute;
    bottom: -0.625rem;
    left: calc(100% + 26px + 1.875rem);
    margin: 0;
  }

  .bench__tag .eartag {
    width: 10rem;
  }
}

/* ===================================================================================
   Cosa chiede la legge: fatti a sinistra, schema delle scadenze a destra
   =================================================================================== */
.law__updated {
  margin-top: var(--space-8);
}

.law__grid {
  display: grid;
  gap: var(--space-12);
}

.law__note {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-black);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}

@media (min-width: 48em) {
  .law__facts > div {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-4);
  }
}

@media (min-width: 71.25em) {
  .law__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-12) var(--space-16);
    align-items: start;
  }
}

/* Schema delle scadenze: fila dei giorni (solo disegno) e tre fasce allineate ai giorni. */
.deadline {
  margin: 0;
}

.deadline__days {
  display: none;
}

.deadline__bands {
  margin: 0;
  padding: 0;
  border: var(--border-width-strong) solid var(--color-black);
  list-style: none;
}

.deadline__band {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4) var(--space-4);
  line-height: 1.35;
}

.deadline__band b {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1.125rem;
  font-weight: var(--weight-heavy);
  font-stretch: var(--stretch-title);
}

.deadline__band span {
  font-size: 1rem;
}

.deadline__band--on-time {
  background: var(--color-milk);
}

.deadline__band--reduced {
  border-top: var(--rule-heavy) solid var(--color-black);
  background: var(--color-check);
  color: var(--color-on-check);
}

.deadline__band--full {
  background: var(--color-black);
  color: var(--color-milk);
}

.deadline__caption {
  max-width: 40em;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .deadline__days {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 3fr);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .deadline__day {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-1) var(--space-3) var(--space-2);
    border-inline-start: var(--border-width-strong) solid var(--color-black);
    font-size: var(--text-sm);
    line-height: 1.2;
  }

  .deadline__day span {
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
  }

  .deadline__day b {
    font-size: 1.25rem;
    font-weight: var(--weight-heavy);
    font-variant-numeric: tabular-nums;
  }

  /* Sabato e domenica: non sono giorni lavorativi, non contano per la sanzione dimezzata. */
  .deadline__day--off {
    background: var(--color-steel);
  }

  .deadline__day--off b {
    color: var(--color-text-muted);
  }

  /* Il termine: il filetto spesso cade tra giovedì 15 e venerdì 16. */
  .deadline__day--due + .deadline__day {
    border-inline-start-width: 5px;
  }

  .deadline__bands {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    min-height: 8.25rem;
  }

  .deadline__band--reduced {
    border-top: 0;
    border-inline-start: 5px solid var(--color-black);
  }
}

/* ===================================================================================
   Come funziona: la procedura e, accanto, il riepilogo che ne esce
   =================================================================================== */
.flow {
  display: grid;
  gap: var(--space-12);
}

.flow__more {
  margin-top: var(--space-6);
}

@media (min-width: 71.25em) {
  .flow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--space-10) var(--space-16);
    align-items: start;
  }
}

/* Il riepilogo per il registro: uno schermo sul piano d'acciaio, come nella scena. */
.summary-figure {
  max-width: 28rem;
  margin: 0;
  padding: var(--space-4);
  background: var(--color-steel);
}

.summary-screen {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: var(--border-width-strong) solid var(--color-black);
  border-radius: var(--radius-lg);
  background: var(--color-milk);
}

.summary-screen p {
  margin: 0;
}

.summary-screen__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  font-stretch: var(--stretch-display);
  line-height: 1.2;
}

.summary-screen__date {
  margin: 2px 0 var(--space-3) !important;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.summary-screen__table {
  width: 100%;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.summary-screen__table th,
.summary-screen__table td {
  padding: 9px 8px 9px 0;
  border-top: var(--border-width) solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.summary-screen__table .num {
  padding-inline-end: 0;
  font-weight: var(--weight-semibold);
  text-align: end;
}

.summary-screen__table thead th {
  padding-top: 0;
  border-top: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.summary-screen__table tfoot th,
.summary-screen__table tfoot td {
  border-top: var(--border-width-strong) solid var(--color-black);
  font-weight: var(--weight-heavy);
}

.summary-screen__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4) !important;
  font-weight: var(--weight-semibold);
}

.summary-screen__hint {
  margin-top: var(--space-3) !important;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.summary-figure__caption {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Sul piano d'acciaio di una sezione la figura non ha bisogno del suo. */
.section--steel .summary-figure {
  padding: 0;
  background: none;
}

@media (min-width: 48em) {
  .summary-figure {
    padding: var(--space-6);
  }
}

/* ===================================================================================
   Su misura: testo, scheda dell'azienda, anteprima del portale che ne nasce
   =================================================================================== */
.tailor {
  display: grid;
  gap: var(--space-10);
}

.tailor__text p {
  max-width: 32em;
}

.tailor__text p + p {
  margin-top: var(--space-4);
}

.tailor__more {
  margin-top: var(--space-6) !important;
}

@media (min-width: 48em) {
  .tailor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12) var(--space-10);
    align-items: start;
  }

  .tailor__text {
    grid-column: 1 / -1;
  }
}

@media (min-width: 71.25em) {
  .tailor {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 21rem);
    gap: var(--space-12);
  }

  .tailor__text {
    grid-column: auto;
  }
}

/* La scheda: carta compilata. Il colore dell'azienda solo nel monogramma e nel campione. */
.company-sheet .summary-list__row {
  padding-block: 10px;
}

.company-sheet .summary-list__row:last-child {
  border-bottom: 0;
}

.company-sheet__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.company-sheet .monogram {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.company-sheet__swatch {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
}

.company-sheet__group {
  margin-top: var(--space-6);
  padding-bottom: var(--space-2);
  font-size: 1rem;
  font-stretch: var(--stretch-title);
  line-height: 1.3;
}

.company-sheet__group:first-of-type {
  margin-top: 0;
}

@media (min-width: 30em) {
  .company-sheet .summary-list__row {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-3);
  }
}

/* L'anteprima del portale: lo schermo d'esempio del design system (branding/_portal_sample.html,
   .sg-portal--small), un po' più stretto accanto alla scheda. */
.portal-preview {
  max-width: 22rem;
}

.portal-preview__caption {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ===================================================================================
   Garanzie: specifiche domanda · risposta
   =================================================================================== */
.guarantees {
  display: grid;
  gap: var(--space-4);
}

.guarantees__head p {
  max-width: 26em;
}

.guarantees__head p + p {
  margin-top: var(--space-3);
}

@media (min-width: 48em) {
  .guarantees .spec-list > div {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

@media (min-width: 62.5em) {
  .guarantees {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-10) var(--space-16);
    align-items: start;
  }
}

/* ===================================================================================
   Fascia finale: «Chiedi un sopralluogo», nera
   =================================================================================== */
.cta-band__inner {
  display: grid;
  gap: var(--space-8);
}

.cta-band__title {
  font-size: clamp(2.125rem, 1.6rem + 2.3vw, 3.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.cta-band__text p {
  max-width: 30em;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.cta-band__text p + p {
  margin-top: var(--space-5);
}

.cta-band__text .cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  font-size: 1.0625rem;
}

@media (max-width: 47.99em) {
  .cta-band__actions .btn {
    width: 100%;
  }
}

@media (min-width: 62.5em) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8) var(--space-16);
    align-items: start;
  }
}

/* ===================================================================================
   Disponibilità dei moduli (etichetta .availability del design system)
   =================================================================================== */
/* Elenco breve dei moduli nella home */
.modules-mini {
  max-width: 32em;
  margin: var(--space-8) 0 0;
  border-bottom: var(--border-width) solid var(--color-black);
}

.modules-mini > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-top: var(--border-width) solid var(--color-black);
}

.modules-mini dt {
  font-weight: var(--weight-semibold);
}

.modules-mini dd {
  margin: 0;
}

/* ===================================================================================
   Pagine interne: due colonne (titolo o testo · contenuto), figure del manuale
   =================================================================================== */
.split {
  display: grid;
  gap: var(--space-8);
}

.split__head p {
  max-width: 28em;
}

.split__head > .section__title:last-child {
  margin-bottom: 0;
}

.split__aside > * + * {
  margin-top: var(--space-6);
}

@media (min-width: 62.5em) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-10) var(--space-16);
    align-items: start;
  }

  /* Scheda tecnica larga a sinistra, figura a destra */
  .split--figure {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }

  /* Testo a sinistra, targhetta dei dati a destra */
  .split--plate {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* Specifiche più larghe: etichetta a 12rem */
@media (min-width: 48em) {
  .spec-list--wide > div,
  .split .spec-list > div {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

.table-note,
.modules-note {
  max-width: 40em;
  margin-top: var(--space-6);
  font-weight: var(--weight-semibold);
}

/* Tabelle dei moduli e dei pubblici: prima colonna in grassetto largo */
.modules-table th[scope="row"],
.audiences-table th[scope="row"],
.trouble-table th[scope="row"] {
  font-weight: var(--weight-heavy);
  font-stretch: var(--stretch-title);
}

/* Telefono: righe a blocchi con l'etichetta sopra (.table--stack.table--text del design system);
   un filetto chiude l'ultima. */
@media (max-width: 39.99em) {
  .modules-table tbody tr:last-child,
  .audiences-table tbody tr:last-child,
  .trouble-table tbody tr:last-child {
    border-bottom: var(--border-width) solid var(--color-black);
  }
}

@media (min-width: 40em) {
  .modules-table tbody tr:last-child > *,
  .audiences-table tbody tr:last-child > *,
  .trouble-table tbody tr:last-child > * {
    border-bottom: var(--border-width) solid var(--color-black);
  }
}

.modules-table th[scope="row"] a {
  text-decoration-thickness: 2px;
}

@media (min-width: 40em) {
  .modules-table th[scope="row"],
  .modules-table td,
  .audiences-table th[scope="row"],
  .audiences-table td,
  .trouble-table th[scope="row"],
  .trouble-table td {
    padding-block: var(--space-4);
  }

  .modules-table th:first-child,
  .audiences-table th:first-child,
  .trouble-table th:first-child {
    width: 30%;
  }

  .modules-table th:nth-child(2) {
    width: 12rem;
  }
}

/* Moduli su richiesta: righe con titolo · contenuto · azione, separate da filetti */
.request-rows {
  border-bottom: var(--border-width) solid var(--color-black);
}

.request-row {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--color-black);
}

.request-row__title {
  font-size: var(--text-xl);
}

.request-row__body > * + * {
  margin-top: var(--space-3);
}

@media (min-width: 62.5em) {
  .request-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    gap: var(--space-10);
    align-items: start;
  }

  .request-row__action {
    justify-self: end;
    text-align: end;
  }
}

/* Figura del manuale: lo schermo del portale con le lettere di richiamo, e la legenda */
.manual-figure {
  display: grid;
  gap: var(--space-10);
  margin: 0;
}

.manual-figure__caption {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.legend {
  margin: 0;
  border-bottom: var(--border-width) solid var(--color-black);
}

.legend > div {
  padding-block: var(--space-4);
  border-top: var(--border-width) solid var(--color-black);
}

.legend dt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-heavy);
  font-stretch: var(--stretch-title);
}

.legend dd {
  max-width: 34em;
  margin: var(--space-1) 0 0 calc(1.375rem + var(--space-3));
}

@media (min-width: 62.5em) {
  .manual-figure {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
  }
}

/* Le lettere sulla figura: attaccate agli elementi del portale (nessuna posizione a mano). */
.portal-preview--keyed {
  max-width: 24rem;
}

.portal-preview--keyed .big-action,
.portal-preview--keyed .entry .status,
.portal-preview--keyed .day__action .btn {
  position: relative;
}

.portal-preview--keyed .big-action::after,
.portal-preview--keyed .entry .status::after,
.portal-preview--keyed .day .tag-mark::after,
.portal-preview--keyed .day__action .btn::after {
  position: absolute;
  top: -0.6875rem;
  right: -0.6875rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: var(--border-width-strong) solid var(--color-milk);
  border-radius: var(--radius-sm);
  background: var(--color-black);
  color: var(--color-milk);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  font-stretch: var(--stretch-text);
  line-height: 1;
  box-sizing: content-box;
}

.portal-preview--keyed .big-action::after {
  content: "A";
}

.portal-preview--keyed .entry .status--check::after {
  content: "B";
}

.portal-preview--keyed .entry .status--passed::after {
  content: "C";
}

.portal-preview--keyed .day .tag-mark::after {
  content: "D";
}

.portal-preview--keyed .day__action .btn::after {
  content: "E";
  inset: -0.6875rem -0.6875rem auto auto;
  margin: 0;
  animation: none;
}

/* Spazio a destra per la lettera, così non copre la parola */
.portal-preview--keyed .entry .status,
.portal-preview--keyed .day .tag-mark {
  padding-inline-end: 1.375rem;
}

/* Su misura: cosa cambia e cosa resta uguale, in due colonne */
.compare {
  display: grid;
  gap: var(--space-10);
}

.compare__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

@media (min-width: 62.5em) {
  .compare {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

/* Su misura: la scheda completa accanto al portale che ne nasce */
.sheet-to-portal {
  display: grid;
  gap: var(--space-10);
}

.sheet-to-portal__sheet {
  max-width: 40rem;
}

.sheet-to-portal__caption {
  max-width: 24em;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (min-width: 62.5em) {
  .sheet-to-portal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: var(--space-16);
    align-items: start;
  }
}

/* Sicurezza: scheda tecnica, gruppo a sinistra e voci a destra */
.datasheet__group {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-10);
  border-top: var(--rule-heavy) solid var(--color-black);
}

.datasheet__group:first-child {
  padding-top: 0;
  border-top: 0;
}

.datasheet__group:last-child {
  padding-bottom: 0;
}

.datasheet__title {
  font-size: var(--text-2xl);
}

.datasheet__group > .callout,
.datasheet__more {
  grid-column: 1 / -1;
}

@media (min-width: 48em) {
  .datasheet .spec-list > div {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

@media (min-width: 62.5em) {
  .datasheet__group {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-6) var(--space-16);
    align-items: start;
  }

  .datasheet__group > .callout,
  .datasheet__more {
    grid-column: 2;
  }
}

.disclosure__quote {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  font-size: inherit;
}

.disclosure__quote > * + * {
  margin-top: var(--space-2);
}

/* Chi siamo: testo e targhetta dei dati della società */
.prose-block p {
  max-width: 36em;
}

.prose-block p + p {
  margin-top: var(--space-4);
}

.plate {
  max-width: 30rem;
}

.commitments > li {
  max-width: 44em;
}

/* ===================================================================================
   Contatti: il modulo è un foglio da compilare, a destra cosa succede dopo
   =================================================================================== */
.contact {
  display: grid;
  gap: var(--space-12);
}

.form-sheet {
  gap: var(--space-6);
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.form-sheet__head {
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-strong) solid var(--color-black);
}

.form-sheet__head .sheet__sub {
  margin-bottom: 0;
}

.form-sheet__row {
  display: grid;
  gap: var(--space-6);
}

.form-sheet__choices {
  display: grid;
  gap: 0 var(--space-6);
}

.form-sheet__privacy {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.form-sheet__privacy .field__help {
  font-size: var(--text-sm);
}

/* Campo trappola: fuori dallo schermo, non display:none (i programmi lo riconoscerebbero). */
.hp-field {
  position: absolute !important;
  inset-inline-start: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__aside-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.contact__aside .steps + .contact__aside-title {
  margin-top: var(--space-10);
}

.contact__support {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .form-sheet {
    padding: var(--space-6) var(--space-8) var(--space-8);
  }

  .form-sheet__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .form-sheet__choices {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 71.25em) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: var(--space-16);
    align-items: start;
  }
}

/* Grazie */
.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-10);
}

/* ===================================================================================
   Accedi alla tua azienda: piano d'acciaio, il modulo in uno schermo come nel portale
   =================================================================================== */
.access {
  padding-block: var(--space-10) var(--section);
}

.access__bench {
  padding: var(--space-4);
  background: var(--color-steel);
}

.access__inner {
  display: grid;
  gap: var(--space-8);
}

.access__text > * + * {
  margin-top: var(--space-4);
}

.access__title {
  max-width: 12em;
}

.access__lead {
  font-size: var(--text-lg);
  line-height: 1.5;
}

.access__form {
  max-width: 34rem;
}

@media (min-width: 48em) {
  .access__bench {
    padding: var(--space-8);
  }
}

.access__form .input-group__addon {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 62.5em) {
  .access {
    padding-top: var(--space-16);
  }

  .access__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    gap: var(--space-10) var(--space-16);
    align-items: start;
  }

  .access__new {
    grid-column: 2;
  }
}

/* ===================================================================================
   Testi legali: colonna stretta, titoli con filetto, tabella dei cookie
   =================================================================================== */
.legal {
  padding-block: var(--space-10) var(--section);
}

.legal__head {
  padding-bottom: var(--space-6);
  border-bottom: var(--rule-heavy) solid var(--color-black);
}

.legal__updated {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.prose {
  padding-top: var(--space-8);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h2 {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-black);
  font-size: var(--text-xl);
  font-stretch: var(--stretch-title);
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
}

.prose ul:not([role="list"]) {
  padding-inline-start: var(--space-6);
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose .table-wrap {
  margin-top: var(--space-6);
}

.legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.prose .legal__links li + li {
  margin-top: 0;
}

@media (min-width: 62.5em) {
  .legal {
    padding-top: var(--space-16);
  }
}