/* ─────────────────────────────────────────────────────────────────────────
   Seira — impalcatura di pagina.

   Il look viene tutto da `ds-industry.css` (il design system "Industry"):
   qui non si scrive un colore, un font, un raggio o un'ombra a mano —
   solo var(--color-*), var(--font-*), var(--space-*), var(--radius-*).
   Questo file contiene solo il layout della landing e le poche cose che il
   sistema non ha ancora (la griglia dell'agenda, la checkbox).

   RITMO: unità di 24px (--leading), mezzo passo 12px (--half), come il
   template landing del sistema. Margini e interlinee sono multipli.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --leading: 24px;
  --half: 12px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 60ch;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.wrap-narrow { max-width: 780px; }

/* ── Testata ─────────────────────────────────────────────────────────────
   Il brand nomina il prodotto (legge #4 del sistema: niente occhiello
   nell'hero). Il sottotitolo dice a chi parliamo, che è l'informazione che
   nell'hero avrebbe fatto l'occhiello. */

.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav a[aria-current='location'] { color: var(--color-accent-700); }
.nav-brand { display: flex; align-items: center; gap: var(--space-3); }
/* il brand è un <a> verso la home: `.nav a { font-size: 14px }` del sistema ha
   specificità più alta di `.nav-brand` e gli mangerebbe il corpo */
.nav a.nav-brand { font-size: 18px; }
.nav-name { display: block; line-height: 1.1; }
.nav-brand small {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* su schermo stretto la nav tiene il brand e la sola azione. Le due esclusioni
   servono entrambe: qui il CTA è un <a> (non un <button> come nel template del
   sistema) e anche il brand è un <a> verso la home — senza `:not()`
   sparirebbero tutti e due. */
@media (max-width: 560px) {
  .nav a:not(.btn):not(.nav-brand) { display: none; }
}

/* ── Didascalie: etichetta sopra, riga da 1px, contenuto sotto ────────── */

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 var(--half);
}
.caption-rule {
  height: 1px; border: 0; background: var(--color-divider);
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero { padding: calc(3 * var(--leading)) 0 calc(3 * var(--leading)); }

/* Il lockup di marca sopra il titolo. Nota: il template del sistema vieta
   l'occhiello nell'hero (legge #4, "il brand nella masthead nomina il
   prodotto"). Qui è una deroga voluta — non è un occhiello di marketing ma
   la firma del marchio, che questa pagina deve far pesare. */
.brand-lockup {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: calc(2 * var(--leading));
  /* è un <a> verso la home: senza questo prenderebbe il colore dei link */
  color: inherit; text-decoration: none;
}
.brand-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 38px; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase;
}
.brand-sense {
  padding-left: var(--space-4); border-left: 1px solid var(--color-divider);
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
}
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  /* il titolo è lungo due frasi intere: la scala massima sta più bassa del
     template del sistema, altrimenti l'hero occupa cinque righe di display */
  font-size: clamp(36px, 5.2vw, 66px);
  line-height: clamp(38px, 5.4vw, 69px);
  letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
  margin-left: -0.052em;  /* allineamento ottico a sinistra, Condensed 600 */
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.hero .sub {
  font-size: 16px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic;
}
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.hero .fineprint {
  font-size: 13px; line-height: var(--leading); margin: var(--leading) 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ── Piastra: la cornice disegnata del sistema, a scala di pagina ─────── */

.sheet { padding: calc(2.5 * var(--leading)) 0; }
.plate { position: relative; border: 1px solid var(--color-divider); }
.plate > .corner {
  position: absolute; width: 15px; height: 15px; pointer-events: none;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.plate > .corner::before {
  content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor;
}
.plate > .corner::after {
  content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor;
}
.plate > .corner.tl { top: -8px; left: -8px; }
.plate > .corner.tr { top: -8px; right: -8px; }
.plate > .corner.bl { bottom: -8px; left: -8px; }
.plate > .corner.br { bottom: -8px; right: -8px; }

/* il cartiglio: titolo che flette + celle di registro divise da filetti */
.title-block {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border-bottom: 1px solid var(--color-divider);
}
.title-block > span {
  padding: var(--half) var(--leading);
  font-size: 13px; line-height: var(--leading); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; font-feature-settings: "tnum" 1;
}
.tb-title { flex: 1; min-width: 16ch; }
.tb-cell {
  border-left: 1px solid var(--color-divider); white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.plate-note {
  margin: 0; padding: var(--half) var(--leading);
  border-top: 1px solid var(--color-divider);
  font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ── Il foglio dei numeri ────────────────────────────────────────────── */

.spec { table-layout: fixed; }
.spec col.c-num  { width: calc(3 * var(--leading)); }
.spec col.c-prop { width: 34%; }
.spec col.c-val  { width: 16%; }
.spec th, .spec td { padding: var(--half) var(--leading) var(--half) 0; vertical-align: middle; }
.spec th:first-child, .spec td:first-child { padding-left: var(--leading); }
.spec th {
  font-size: 13px; line-height: var(--half); font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.spec td { font-size: 15px; line-height: var(--leading); }
.spec .s-num {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-accent-700); font-feature-settings: "tnum" 1;
}
.spec .s-val {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1; white-space: nowrap;
}
.spec .s-rem { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr:hover { background: none; }  /* un foglio stampato, non una griglia */

/* ── La giornata: stesso momento, due colonne ────────────────────────── */

.giornata { table-layout: fixed; }
.giornata col.c-when { width: calc(6 * var(--leading)); }
.giornata th, .giornata td {
  padding: var(--leading) var(--leading) var(--leading) 0; vertical-align: top;
}
.giornata th:first-child, .giornata td:first-child { padding-left: var(--leading); }
.giornata th {
  font-size: 13px; line-height: var(--half); font-weight: 600;
  padding-block: var(--half);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.giornata tbody tr:hover { background: none; }
.giornata tbody tr:last-child td { border-bottom: 0; }
.g-when {
  font-size: 13px; line-height: var(--leading); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700); font-feature-settings: "tnum" 1;
}
.g-when b { display: block; font-weight: 600; }
.g-when span {
  display: block; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.g-role {
  display: block; font-size: 11px; line-height: var(--half); letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600; margin-bottom: var(--half);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.giornata td p { font-size: 15px; line-height: var(--leading); margin: 0; }
/* `td.g-tu` e non `.g-tu`: la regola generica `.giornata td` ha specificità
   più alta di una classe sola e vincerebbe su bordi e padding. */
.giornata td.g-tu { border-left: 1px solid var(--color-divider); padding-left: var(--leading); }
.g-tu .g-role { color: var(--color-accent-700); }

/* ── Celle wireframe ─────────────────────────────────────────────────── */

.features { padding: calc(2.5 * var(--leading)) 0; }
.features > .caption-rule { margin-bottom: calc(var(--leading) + 8px); }
.cells {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px);
  margin-top: calc(var(--leading) - var(--half));
}
.cell-frame {
  position: relative; border: 1px solid var(--color-divider); padding: var(--leading);
}
.cell-frame > .corner {
  position: absolute; width: 15px; height: 15px; pointer-events: none;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.cell-frame > .corner::before {
  content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor;
}
.cell-frame > .corner::after {
  content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor;
}
.cell-frame > .corner.tl { top: -8px; left: -8px; }
.cell-frame > .corner.tr { top: -8px; right: -8px; }
.cell-frame > .corner.bl { bottom: -8px; left: -8px; }
.cell-frame > .corner.br { bottom: -8px; right: -8px; }
.cell-frame h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; text-box: trim-both cap alphabetic;
}
.cell-frame p {
  font-size: 15px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-box: trim-both cap alphabetic;
}
.cell-frame p + p { margin-top: var(--half); }

/* ── Il marchio ──────────────────────────────────────────────────────
   Una fila di tratti uguali, e uno solo è "adesso": σειρά, il proprio
   turno. I colori vengono dai token, non dall'SVG, così il marchio segue
   il tema e resta un oggetto del sistema. */

.mk { display: block; }
.mk-q { stroke: var(--color-neutral-500); }   /* l'asse del tempo */
.mk-t { stroke: var(--color-accent); }
.mk-b { fill: var(--color-neutral-400); }     /* gli altri appuntamenti */
.mk-f { fill: var(--color-accent); }          /* il tuo turno */

/* lockup: marchio + nome, allineati sulla riga ottica */
.lock { display: inline-flex; align-items: center; gap: var(--space-3); }
.lock b {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
}

/* foglio di prova delle varianti (marchio.html) */
.prova {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--leading);
  padding: var(--leading);
}
.prova .scale { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.prova .lab {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.prova .tile {
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--color-neutral-900);
}
.prova .scale-lock { align-items: flex-start; }

/* ── Le fasi di un colore ────────────────────────────────────────────
   Una barra in scala: le colonne sono larghe quanto durano i minuti
   (20 / 30 / 15 / 25), così la posa si vede che è il pezzo più lungo. */

.fasi {
  display: grid;
  grid-template-columns: 20fr 30fr 15fr 25fr;
  border: 1px solid var(--color-divider);
  margin: var(--leading) 0 0;
}
.fase { padding: var(--half) var(--space-4); border-left: 1px solid var(--color-divider); }
.fase:first-child { border-left: 0; }
.fase .min {
  display: block; font-size: 13px; line-height: var(--half); font-weight: 600;
  letter-spacing: 0.08em; font-feature-settings: "tnum" 1;
  color: var(--color-accent-700); margin-bottom: var(--space-1);
}
.fase b {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: var(--leading); letter-spacing: 0.02em; text-transform: uppercase;
}
.fase i {
  display: block; font-style: normal; font-size: 13px; line-height: var(--half);
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* la posa: stesso tratteggio dell'agenda, così i due disegni si leggono
   come lo stesso fatto raccontato due volte */
.fase-libera {
  background:
    repeating-linear-gradient(135deg,
      var(--color-accent-200) 0 4px, var(--color-bg) 4px 9px);
}
.fase-libera b, .fase-libera i { color: var(--color-accent-900); }

@media (max-width: 720px) {
  .fasi { grid-template-columns: 1fr; }
  .fase { border-left: 0; border-top: 1px solid var(--color-divider); }
  .fase:first-child { border-top: 0; }
}

/* ── L'agenda: un disegno tecnico, che è quello che è ────────────────── */

.agenda-ops, .agenda-grid {
  display: grid; grid-template-columns: calc(2 * var(--leading)) repeat(3, 1fr);
  gap: var(--space-2);
}
.agenda-body { padding: var(--leading); }
.agenda-ops { margin-bottom: var(--half); }
.agenda-ops .op:first-child { grid-column: 2; }
.agenda-ops b {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: var(--leading); letter-spacing: 0.02em; text-transform: uppercase;
}
.agenda-ops i {
  display: block; font-style: normal; font-size: 12px; line-height: var(--half);
  font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* uno slot = 15 minuti. Più alto su schermo stretto, dove le etichette
   dei servizi vanno a capo su due righe. */
.agenda-grid { --slot: 15px; }
@media (min-width: 48rem) { .agenda-grid { --slot: 11px; } }

.col-time, .col-op { display: grid; grid-template-rows: repeat(40, var(--slot)); }

/* Posizione e durata come classi, non come attributo style: la CSP del sito
   è `style-src 'self'` e blocca gli stili inline. --s = slot d'inizio
   (1 = 09:00, uno slot ogni 15'), --n = numero di slot occupati. */
.s1{--s:1}   .s2{--s:2}   .s3{--s:3}   .s4{--s:4}   .s5{--s:5}   .s6{--s:6}
.s7{--s:7}   .s8{--s:8}   .s9{--s:9}   .s10{--s:10} .s11{--s:11} .s12{--s:12}
.s13{--s:13} .s14{--s:14} .s15{--s:15} .s16{--s:16} .s17{--s:17} .s18{--s:18}
.s19{--s:19} .s20{--s:20} .s21{--s:21} .s22{--s:22} .s23{--s:23} .s24{--s:24}
.s25{--s:25} .s26{--s:26} .s27{--s:27} .s28{--s:28} .s29{--s:29} .s30{--s:30}
.s31{--s:31} .s32{--s:32} .s33{--s:33} .s34{--s:34} .s35{--s:35} .s36{--s:36}
.s37{--s:37} .s38{--s:38} .s39{--s:39} .s40{--s:40}
.n1{--n:1} .n2{--n:2} .n3{--n:3} .n4{--n:4}
.n5{--n:5} .n6{--n:6} .n7{--n:7} .n8{--n:8}

.col-time span {
  grid-row: var(--s) / span 4;
  font-size: 12px; line-height: var(--half); font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* due sotto-colonne: servono quando due lavori corrono in parallelo sullo
   stesso collaboratore (l'interleaving durante la posa). I blocchi normali
   occupano tutta la larghezza, quelli affiancati metà per uno. */
.col-op {
  position: relative;
  grid-template-columns: 1fr 1fr;
  background-image: repeating-linear-gradient(
    to bottom, var(--color-divider) 0 1px, transparent 1px calc(var(--slot) * 4));
}
.appt, .hole { grid-column: 1 / -1; }
/* selettori a due classi: non dipendono dall'ordine delle regole */
.appt.half-l, .hole.half-l { grid-column: 1; }
.appt.half-r, .hole.half-r { grid-column: 2; }

/* gli appuntamenti sono disegni a filo, come ogni oggetto del sistema */
.appt {
  grid-row: var(--s) / span var(--n);
  border: 1px solid var(--color-divider);
  border-left: 2px solid var(--color-neutral-600);
  background: var(--color-bg);
  font-size: 12px; line-height: var(--half); padding: 2px 5px;
  overflow: hidden; color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
/* servizi con posa: l'operatore è libero a metà servizio — il tratteggio
   dice esattamente questo, che il blocco non è pieno */
.appt-fasi {
  border-left-color: var(--color-accent);
  background:
    repeating-linear-gradient(135deg,
      var(--color-accent-200) 0 4px, var(--color-bg) 4px 9px);
  color: var(--color-accent-900);
}
/* il buco è l'unica cosa marcata sul foglio */
.hole {
  grid-row: var(--s) / span var(--n);
  border: 1px dashed var(--color-accent);
  background: var(--color-accent-100);
  padding: 2px 5px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.hole b {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: var(--half); letter-spacing: 0.02em;
  color: var(--color-accent-800);
}
.hole i {
  display: block; font-style: normal; font-size: 11px; line-height: var(--half);
  color: var(--color-accent-700);
}
/* mezza corsia: un blocco da 30' è alto 22px sul desktop, ci sta una riga sola */
.hole.half-l b, .hole.half-r b { font-size: 12px; }

.suggerimento {
  display: flex; gap: var(--space-3); align-items: baseline;
  margin: 0; padding: var(--half) var(--leading);
  border-top: 1px solid var(--color-divider);
  font-size: 15px; line-height: var(--leading);
}
.suggerimento .s-mark {
  flex: none; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-accent-700);
}

/* ── Citazione: una domanda al lettore, non una testimonianza ────────── */

.quote { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 2.8vw, 36px); line-height: calc(1.5 * var(--leading));
  letter-spacing: 0; max-width: 30ch; margin: 0;
  text-indent: -0.316em;   /* aggancia la « nel margine */
  text-box: trim-both cap alphabetic;
}
.quote figcaption {
  font-size: 15px; line-height: var(--leading); max-width: var(--measure);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic;
}
@media (max-width: 720px) { .quote blockquote { text-indent: 0; } }

/* ── Blocchi di testo ────────────────────────────────────────────────── */

.note-block { padding: calc(2.5 * var(--leading)) 0; }
.note-block h2, .section-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; text-box: trim-both cap alphabetic;
}
.note-block p, .section-sub {
  font-size: 15px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-box: trim-both cap alphabetic;
}
/* con più di due paragrafi il mezzo passo non basta: si legge come un muro */
.note-block p + p { margin-top: var(--leading); }
.section-sub { margin-bottom: var(--leading); }
.plate-narrow { max-width: 620px; }
/* piastre in sequenza dentro una sezione: le croci di registro sporgono
   8px oltre il bordo, quindi tra due piastre serve più di un'unità d'aria */
.plate-spaced { margin-top: calc(2 * var(--leading)); }
.fasi-note {
  font-size: 15px; line-height: var(--leading); max-width: var(--measure);
  margin: var(--leading) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.lista { list-style: none; margin: 0; padding: var(--leading); }
.lista li {
  display: grid; grid-template-columns: calc(2 * var(--leading)) 1fr;
  font-size: 15px; line-height: var(--leading);
  padding-block: var(--half);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista li:first-child { padding-top: 0; }
.lista .n {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-accent-700); font-feature-settings: "tnum" 1;
}

/* ── Modulo ──────────────────────────────────────────────────────────── */

.close { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.form { padding: var(--leading); max-width: 620px; }
.hp { position: absolute; left: -9999px; }

.field { margin: 0 0 var(--leading); padding: 0; border: 0; }
.field > label, .field > legend {
  display: block; font-size: 12px; margin-bottom: 5px; padding: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.seg { flex-wrap: wrap; }
.field-hint {
  font-size: 13px; line-height: var(--leading); margin: var(--space-1) 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* checkbox: il sistema ha .radio ma non la casella — stessa grammatica,
   quadrata invece che tonda, come ogni oggetto di Industry */
.check {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-bottom: var(--leading); font-size: 15px; line-height: var(--leading);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.check .box {
  width: 16px; height: 16px; flex: none; margin-top: 4px;
  border: 1.5px solid var(--color-divider);
}
.check:hover .box { border-color: var(--color-accent); }
.check input:checked + .box {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}
.check input:focus-visible + .box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.check-framed {
  border: 1px solid var(--color-divider);
  padding: var(--space-3) var(--space-4);
}
.check-framed b { font-weight: 700; }
.form-foot {
  font-size: 13px; line-height: var(--leading); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

footer {
  padding: calc(2 * var(--leading)) 0;
  font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
footer .brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--color-text); margin: 0 0 var(--space-1);
}

/* ── Pagina grazie ───────────────────────────────────────────────────── */

.grazie { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.grazie .sub {
  font-size: 16px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
}
.grazie .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* ── Collasso responsive ─────────────────────────────────────────────── */

@media (max-width: 880px) {
  .cells { grid-template-columns: 1fr; gap: calc(var(--leading) + 16px); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2 * var(--leading)); }

  /* il cartiglio si ri-impila: le celle di registro passano a una seconda riga */
  .tb-title { flex-basis: 100%; border-bottom: 1px solid var(--color-divider); }
  .title-block > .tb-cell { padding-inline: var(--half); flex: 1 0 auto; }
  .tb-title + .tb-cell { border-left: 0; padding-left: var(--leading); }

  /* le tabelle si linearizzano: ogni riga diventa la sua piccola scheda */
  .spec thead, .giornata thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .spec, .spec tbody, .spec td,
  .giornata, .giornata tbody, .giornata td { display: block; }
  .spec tr, .giornata tr {
    display: grid; grid-template-columns: max-content 1fr;
    column-gap: var(--half); row-gap: var(--half);
    align-items: baseline; padding: var(--leading);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  }
  .spec tr:last-child, .giornata tr:last-child { border-bottom: 0; }
  .spec th, .spec td, .giornata th, .giornata td { padding: 0; border: 0; }
  .spec th:first-child, .spec td:first-child,
  .giornata th:first-child, .giornata td:first-child { padding-left: 0; }
  .spec .s-num  { grid-column: 1; }
  .spec .s-prop { grid-column: 2; }
  .spec .s-val, .spec .s-rem { grid-column: 1 / -1; }

  /* la giornata impilata mette il cliente SOPRA e il titolare SOTTO,
     che è come le due journey vanno lette */
  .giornata tr { grid-template-columns: 1fr; row-gap: var(--leading); }
  .giornata td { grid-column: 1; }
  .giornata td.g-tu {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--color-divider); padding-top: var(--leading);
  }
  .agenda-body { padding: var(--half); }
}