/* La vetrina di bolla. Token e componenti sono quelli del design system bolla, con gli stessi nomi e valori di
   src/web/statici/app.css: se cambiano lì, cambiano anche qui. Nessun colore scritto a mano fuori da :root. */

@font-face {
  font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url(/caratteri/nunito-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url(/caratteri/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* design system bolla, tema chiaro */
  --surface: #FFFFFF;
  --surface-sunken: #F3F8F7;
  --surface-mint: #E9F5F3;
  --ink: #0F2E2C;
  --ink-muted: #526B68;
  --border: #DCE9E7;
  --border-strong: #6F8C88;
  --primary: #0F2E2C;
  --primary-hover: #1C4845;
  --on-primary: #FFFFFF;
  --accent: #FF7A00;
  --on-accent: #0F2E2C;
  --accent-soft: #FFF0E0;
  --accent-ink: #B04F00;
  --focus: #C45A00;
  --success: #0B6E86;
  --success-soft: #E3F4F8;
  --warning: #9A4F00;
  --warning-soft: #FFF3E3;
  --info: #2451B8;
  --info-soft: #EAF0FD;
  --shadow-card: 0 1px 2px rgba(15, 46, 44, 0.06);
  --shadow-pop: 0 12px 32px rgba(15, 46, 44, 0.14);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --font-sans: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --durata: 150ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);

  /* la vetrina: la carta del preventivo resta bianca anche nel tema scuro; la testata è il verde del logo, con i
     colori del tema scuro del design system sopra. I testi stanno sopra 4,5:1. */
  --carta: #FFFFFF;
  --carta-inchiostro: #0F2E2C;
  --carta-secondario: #526B68;
  --carta-filo: #DCE9E7;
  --carta-ombra: 0 1px 2px rgba(15, 46, 44, 0.08), 0 8px 24px rgba(15, 46, 44, 0.08);
  --notte: #0F2E2C;
  --su-notte: #EAF4F2;
  --su-notte-2: #9DB8B4;
  --notte-filo: #24423F;
  --notte-azione: #8FE0D2;
  --notte-azione-hover: #B0EDE3;
  --su-notte-azione: #0A1C1B;
  --notte-ombra: 0 32px 80px rgba(0, 0, 0, 0.45);
  --logo-tratto: var(--ink);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #102826;
    --surface-sunken: #0A1C1B;
    --surface-mint: #16302D;
    --ink: #EAF4F2;
    --ink-muted: #9DB8B4;
    --border: #24423F;
    --border-strong: #5A8580;
    --primary: #8FE0D2;
    --primary-hover: #B0EDE3;
    --on-primary: #0A1C1B;
    --accent: #FF8F26;
    --accent-soft: #3A2512;
    --accent-ink: #FFA552;
    --focus: #FF9A40;
    --success: #5CC8E0;
    --success-soft: #10323A;
    --warning: #FFB866;
    --warning-soft: #382510;
    --info: #8FB2FF;
    --info-soft: #172544;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
    --notte: #06120F;
    --notte-filo: #1C3532;
    --notte-ombra: 0 32px 80px rgba(0, 0, 0, 0.7);
    --carta-ombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--ink);
  font: 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--primary); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.simboli { position: absolute; width: 0; height: 0; }
.salta { position: absolute; left: 16px; top: -100px; z-index: 30; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); }
.salta:focus { top: 12px; }

.largo { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .largo { padding: 0 48px; } }

/* tipografia del design system: un peso per i titoli, la gerarchia la fa la scala */
h1 { font-size: clamp(40px, 4vw + 22px, 84px); line-height: 1.02; font-weight: 900; letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 2vw + 22px, 52px); line-height: 1.08; font-weight: 900; letter-spacing: -0.03em; }
h3 { font-size: 18px; line-height: 26px; font-weight: 800; }
.testo-grande { max-width: 60ch; font-size: 18px; line-height: 29px; color: var(--ink-muted); text-wrap: pretty; }

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-size: 16px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: background var(--durata) var(--curva), border-color var(--durata) var(--curva); }
.btn-primario { background: var(--primary); color: var(--on-primary); }
.btn-primario:hover { background: var(--primary-hover); }
/* sulla fascia verde notte: il pulsante principale del tema scuro, menta pieno */
.btn-notte { background: var(--notte-azione); color: var(--su-notte-azione); }
.btn-notte:hover { background: var(--notte-azione-hover); }

/* StatusBadge */
.stato { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.stato-punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stato-neutro { background: var(--surface-mint); color: var(--ink-muted); }
.stato-info { background: var(--info-soft); color: var(--info); }
.stato-ok { background: var(--success-soft); color: var(--success); }
.stato-da-fare { border: 1px dashed var(--border-strong); background: var(--surface); color: var(--ink); }
.stato-attenzione { background: var(--warning-soft); color: var(--warning); }
/* il prezzo da un'altra impresa della rete: il blu del prezzario non va, qui è il menta del design system */
.stato-ai-rete { background: var(--surface-mint); color: var(--primary); box-shadow: inset 0 0 0 1px var(--border-strong); }

.fiala { width: 22px; height: 20px; flex: none; }

/* la fascia verde notte: testata, apertura col banco, contatti */
.notte { --logo-tratto: var(--su-notte); background: var(--notte); color: var(--su-notte); }
.notte .testo-grande { color: var(--su-notte-2); }

/* testata */
.testata { --logo-tratto: var(--su-notte); position: sticky; top: 0; z-index: 20; background: var(--notte); border-bottom: 1px solid var(--notte-filo); }
.testata-dentro { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.testata-logo { display: inline-flex; border-radius: var(--radius-md); }
.logo { width: 80px; height: 32px; }
.logo-piccolo { width: 60px; height: 24px; }
/* la testata: sullo schermo largo «Come funziona» e due tendine (i mestieri, le guide); sul telefono un solo «Menu».
   Il pulsante della prova c'è sempre, a portata di pollice. */
.testata-nav { display: none; align-items: center; gap: 4px; margin-left: auto; }
.testata-nav > a, .tendina > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md); color: var(--su-notte-2); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: color var(--durata); }
.testata-nav > a:hover, .tendina > summary:hover, .tendina[open] > summary { color: var(--su-notte); }
.tendina { position: relative; }
.tendina > summary { list-style: none; }
.tendina > summary::-webkit-details-marker { display: none; }
/* la freccina: un angolo disegnato coi bordi, che si gira quando la tendina è aperta */
.tendina > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--durata); }
.tendina[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.tendina-pannello { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; display: grid; gap: 2px; width: 320px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.tendina-pannello a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.tendina-pannello a strong { font-size: 15px; line-height: 20px; font-weight: 800; }
.tendina-pannello a span { color: var(--ink-muted); font-size: 13.5px; line-height: 18px; font-weight: 600; }
.tendina-pannello a:hover { background: var(--surface-sunken); }
.tendina-pannello a[aria-current="page"] { background: var(--surface-mint); }
.tendina-gruppo { margin: 8px 12px 2px; color: var(--ink-muted); font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.testata-menu { margin-left: auto; }
.testata-menu .tendina-pannello { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; max-height: calc(100dvh - 80px); overflow-y: auto; }
.btn-testata { min-height: 40px; padding: 0 16px; font-size: 15px; }
@media (min-width: 900px) {
  .testata-nav { display: flex; }
  .testata-menu { display: none; }
  .btn-testata { margin-left: 8px; }
}
@media (max-width: 899px) { .testata-dentro { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .testata-nav > a, .tendina > summary, .tendina > summary::after { transition: none; } }

/* apertura: il titolo grande a sinistra, la frase e il pulsante in basso a destra, poi il banco a tutta larghezza */
.apertura { padding: 56px 0 0; }
.apertura-testa { display: grid; gap: 28px; padding-bottom: 48px; }
.apertura h1 { max-width: 15ch; }
.apertura-dopo { display: grid; justify-items: start; gap: 24px; }
@media (min-width: 1000px) {
  .apertura { padding-top: 72px; }
  .apertura-testa { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 64px; padding-bottom: 56px; }
}

/* il giro di un lavoro: sei tappe in fila sopra il banco, ognuna porta alla sua sezione */
.percorso { padding-bottom: 40px; }
.percorso ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; list-style: none; counter-reset: tappa; }
.percorso li { counter-increment: tappa; border-top: 1px solid var(--notte-filo); }
.percorso a { display: grid; gap: 2px; padding: 14px 0 16px; color: var(--su-notte-2); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; border-radius: var(--radius-md); transition: color var(--durata); }
.percorso a span { color: var(--su-notte); font-size: 16px; font-weight: 800; }
.percorso a span::before { content: counter(tappa) " "; color: var(--su-notte-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.percorso a:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) { .percorso ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .percorso { padding-bottom: 56px; } .percorso ol { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .percorso a { transition: none; } }

/* il banco di lavoro: la finestra dell'applicazione, che scende oltre la fascia nella sezione sotto */
.banco { position: relative; z-index: 2; margin-bottom: -120px; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--notte-ombra); overflow: hidden; }
.banco-barra { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); --logo-tratto: var(--ink); }
.banco-barra p { display: grid; flex: 1; min-width: 0; line-height: 20px; }
.banco-barra strong { font-size: 15px; font-weight: 800; }
.banco-barra p span { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.banco-corpo { display: grid; }
.banco-titoletto { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 13px; font-weight: 800; }
.microfono { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }

.banco-descrizione { display: grid; align-content: start; gap: 14px; padding: 20px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); }
.dettato { font-size: 17px; line-height: 26px; font-weight: 600; text-wrap: pretty; }
.dettato .parola { display: inline-block; }
.nota-bolla { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; --logo-tratto: var(--accent-ink); }

.banco-voci { display: grid; align-content: start; }
.voce { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.voce-nome { font-size: 15px; line-height: 22px; font-weight: 700; }
.voce-conto { grid-row: 2; color: var(--ink-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.voce-importo { grid-column: 2; grid-row: 1; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.voce-vuota .voce-importo { color: var(--ink-muted); font-weight: 600; font-style: italic; }
.voce-fonte { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.banco-totale { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 20px 22px; background: var(--surface-mint); }
.banco-totale span { color: var(--ink-muted); font-size: 14px; font-weight: 800; }
.banco-totale strong { font-size: clamp(26px, 2vw + 16px, 36px); line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* le fonti del banco: solo sullo schermo largo, dove si accendono mentre i prezzi arrivano */
.banco-fonti { display: none; margin: 0; padding: 20px; list-style: none; border-left: 1px solid var(--border); background: var(--surface-sunken); }
.banco-fonte { display: grid; gap: 6px; justify-items: start; padding: 12px; border-radius: var(--radius-md); color: var(--ink-muted); font-size: 13px; font-weight: 700; }
.banco-fonte.accesa { background: var(--surface); box-shadow: 0 0 0 1px var(--border); color: var(--ink); }

@media (min-width: 760px) {
  .banco-corpo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .banco-descrizione { border-right: 1px solid var(--border); border-bottom: 0; }
  .voce { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 24px; }
  .banco-totale { padding: 20px 24px 24px; }
}
@media (min-width: 1100px) {
  .banco { margin-bottom: -160px; }
  .banco-corpo { grid-template-columns: 300px minmax(0, 1fr) 220px; }
  .banco-descrizione { padding: 24px; }
  .banco-fonti { display: grid; align-content: start; gap: 6px; }
}

/* sezioni */
/* il racconto di ogni sezione: il titolo, una frase grande, poi il testo che spiega come funziona */
.racconto { display: grid; gap: 18px; align-content: start; }
.racconto > p:not(.testo-grande) { max-width: 62ch; color: var(--ink-muted); font-size: 17px; line-height: 28px; text-wrap: pretty; }
.sezione { padding: 88px 0; }
@media (min-width: 720px) { .sezione { padding: 128px 0; } }
/* la prima sezione dopo l'apertura fa spazio al banco, che scende oltre la fascia */
.partenza { padding-top: 200px; }
@media (min-width: 1100px) { .partenza { padding-top: 260px; } }

/* da dove parti: il testo e le altre tre strade a sinistra, il sopralluogo sul telefono a destra */
.partenza-griglia { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .partenza-griglia { grid-template-columns: 1.1fr 0.9fr; gap: 88px; } }

/* il telefono: una cornice scura e dentro il foglio del sopralluogo, coi componenti dell'applicazione */
.telefono { justify-self: center; width: min(340px, 100%); padding: 12px; border-radius: 44px; background: var(--notte); box-shadow: var(--shadow-pop); }
.telefono-schermo { display: grid; gap: 14px; padding: 20px 18px; border-radius: 34px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 20px; }
.telefono-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.telefono-testa p { display: grid; }
.telefono-testa strong { font-size: 17px; line-height: 24px; font-weight: 800; }
.telefono-testa p span { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.foglio-sezione { display: grid; gap: 6px; }
.foglio-titoletto { display: flex; gap: 6px; color: var(--ink-muted); font-size: 12.5px; font-weight: 800; }
.foglio-titoletto span { color: var(--ink); }
.foglio-titoletto .proposta { margin-left: auto; padding: 0 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 11.5px; }
.foto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.foto span { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--surface-mint); }
.foto span:nth-child(2) { background: var(--border); }
.foto .scatta { display: grid; place-items: center; border: 1.5px dashed var(--border-strong); background: var(--surface); color: var(--ink-muted); font-size: 12px; font-weight: 800; }
.misura { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.misura strong { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.telefono-salvato { color: var(--ink-muted); font-size: 12.5px; font-weight: 600; text-align: center; }
.telefono-pulsante { display: grid; place-items: center; min-height: 44px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 700; }

/* prima i tuoi prezzi: il racconto delle fonti accanto alla voce che sceglie il prezzo */
.fonti-griglia { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .fonti-griglia { grid-template-columns: 1fr 1fr; gap: 88px; } }
/* il prezzo imparato, com'è nel banco: la cifra proposta e il perché, con il ritorno al prezzo base */
.imparato { display: grid; gap: 10px; margin-top: 8px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.imparato-voce { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; }
.imparato-voce strong { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.imparato-perche { display: flex; gap: 10px; align-items: flex-start; color: var(--accent-ink); font-size: 14px; line-height: 20px; font-weight: 700; --logo-tratto: var(--accent-ink); --accent: var(--accent-ink); }
.imparato-perche .fiala { margin-top: 1px; }
.imparato-usa { justify-self: start; padding: 6px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 700; }

.scelta-demo { display: grid; gap: 12px; padding: 28px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-pop); }
.scelta-voce { font-size: 17px; font-weight: 800; }
.scelta-voce span { margin-left: 6px; color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.scelta-cifra { margin: 4px 0 12px; font-size: clamp(56px, 6vw, 96px); line-height: 1; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scelta-euro { color: var(--ink-muted); font-weight: 700; }
.scelta-unita { margin-left: 4px; color: var(--ink-muted); font-size: 0.32em; font-weight: 700; letter-spacing: 0; }
.scelte { display: grid; gap: 8px; }
.scelta { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.scelta strong { display: block; font-size: 15px; line-height: 22px; }
.scelta span { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.scelta-pallino { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 50%; }
.scelta-accesa { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.scelta-accesa .scelta-pallino { border: 6px solid var(--primary); }
.scelta .scelta-prezzo { color: var(--ink); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scelta .scelta-vuota { color: var(--ink-muted); }
.impara { display: flex; gap: 10px; align-items: center; margin-top: 4px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; font-weight: 700; --logo-tratto: var(--accent-ink); --accent: var(--accent-ink); }

/* il PDF al cliente, col timbro */
#fonti, .pdf-sezione, .giornata-sezione { background: var(--surface); }
.pdf-griglia { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .pdf-griglia { grid-template-columns: 1fr 1fr; gap: 88px; } .pdf { order: -1; } }
.pdf { position: relative; display: grid; gap: 20px; max-width: 480px; padding: 32px; border: 1px solid var(--carta-filo); border-radius: 4px; background: var(--carta); color: var(--carta-inchiostro); box-shadow: var(--carta-ombra); }
.pdf-testa { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding-bottom: 18px; border-bottom: 2px solid var(--carta-inchiostro); }
.pdf-marchio { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 6px; background: var(--carta-inchiostro); color: var(--carta); font-size: 17px; font-weight: 900; letter-spacing: 0.02em; }
.pdf-testa strong { display: block; font-size: 16px; font-weight: 800; }
.pdf-testa div span { color: var(--carta-secondario); font-size: 13px; font-weight: 600; }
.pdf-numero { grid-column: 2; color: var(--carta-secondario); font-size: 13px; font-weight: 700; }
.pdf-righe { display: grid; gap: 12px; }
.pdf-righe span { height: 8px; border-radius: 4px; background: var(--carta-filo); }
.pdf-righe .corta { width: 55%; }
.pdf-totale { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--carta-filo); font-weight: 700; font-variant-numeric: tabular-nums; }
.pdf-totale strong { font-size: 22px; font-weight: 900; }
.pdf-firma { display: grid; gap: 28px; margin-top: 8px; color: var(--carta-secondario); font-size: 12.5px; font-weight: 700; }
.pdf-firma-riga { width: 60%; border-top: 1px solid var(--carta-inchiostro); }
/* il timbro dell'impresa sul foglio: inchiostro verde acqua del design system, un po' storto come un timbro vero */
.timbro { position: absolute; right: 28px; bottom: 40px; display: grid; justify-items: center; padding: 8px 16px; border: 3px solid var(--success); border-radius: 8px; color: var(--success); font-size: 22px; line-height: 1.1; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-8deg); mix-blend-mode: multiply; }
.timbro small { font-size: 11px; letter-spacing: 0.04em; font-weight: 800; }
@media (max-width: 519px) {
  .pdf { padding: 24px 20px; }
  .pdf-firma { max-width: 40%; }
  .pdf-firma-riga { width: 100%; }
  .timbro { right: 16px; bottom: 28px; padding: 6px 12px; font-size: 18px; }
}

/* la rete delle imprese: il testo a sinistra, una richiesta di prezzo con i prezzi arrivati a destra */
.rete-griglia { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .rete-griglia { grid-template-columns: 1fr 1fr; gap: 88px; } }
.richiesta-rete { display: grid; gap: 10px; padding: 24px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-pop); }
.richiesta-rete-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.richiesta-rete-testa p { display: grid; }
.richiesta-rete-testa strong { font-size: 17px; font-weight: 800; }
.richiesta-rete-testa p span { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.richiesta-rete-titoletto { color: var(--ink-muted); font-size: 12.5px; font-weight: 800; }
.voce-chiesta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14.5px; font-weight: 700; }
.voce-chiesta span:last-child { color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.richiesta-rete-nota { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.ricarico { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 4px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-mint); font-size: 14px; line-height: 20px; font-weight: 600; }
.ricarico strong { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.richiesta-rete-pulsante { justify-self: start; display: inline-grid; place-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: 14.5px; font-weight: 700; }

/* dopo il sì: una riga per funzione, il testo a sinistra e il suo pezzo dell'applicazione a destra */
.dopo-sezione h2 { margin-bottom: 24px; }
.dopo-riga { display: grid; gap: 32px; align-items: center; padding: 40px 0; border-top: 1px solid var(--border); }
@media (min-width: 900px) { .dopo-riga { grid-template-columns: 1fr 1fr; gap: 88px; padding: 56px 0; } }
.dopo-testo { display: grid; gap: 10px; }
.dopo-testo h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }
.dopo-testo p { max-width: 56ch; color: var(--ink-muted); font-size: 17px; line-height: 27px; }
.rate, .attestati, .dashboard { display: grid; gap: 8px; padding: 20px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-pop); }
.rate-titolo, .dashboard-titolo { margin-bottom: 4px; font-size: 15px; font-weight: 800; }
.rata, .attestato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: 14.5px; font-weight: 700; }
.rata small, .attestato small { display: block; color: var(--ink-muted); font-size: 12.5px; font-weight: 600; }
.rata strong { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rata .stato { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 520px) { .rata { grid-template-columns: minmax(0, 1fr) auto auto; } .rata .stato { grid-column: auto; justify-self: end; } }
.notifica { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop); font-size: 13.5px; line-height: 19px; font-weight: 600; }
.notifica strong { display: block; font-size: 13px; font-weight: 800; }
.notifica .fiala { width: 20px; height: 18px; margin-top: 1px; }

/* la giornata: la lista «Da fare» della dashboard */
.giornata-griglia { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .giornata-griglia { grid-template-columns: 0.9fr 1.1fr; gap: 88px; } }
.compito { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: 14.5px; font-weight: 700; }
.compito .stato { justify-self: start; }
.compito small { display: block; color: var(--ink-muted); font-size: 12.5px; font-weight: 600; }
@media (max-width: 420px) { .compito { grid-template-columns: 1fr; gap: 6px; } }

/* chiedi una prova: di nuovo la fascia verde notte, col modulo su un foglio chiaro */
.contatti { padding: 96px 0; }
@media (min-width: 720px) { .contatti { padding: 136px 0; } }
.contatti-dentro { display: grid; gap: 40px; align-items: start; }
.contatti-testo { display: grid; justify-items: start; gap: 20px; }
@media (min-width: 960px) { .contatti-dentro:has(.richiesta) { grid-template-columns: 1fr minmax(0, 560px); gap: 80px; } }
.richiesta { display: grid; gap: 20px; padding: 24px; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); --logo-tratto: var(--ink); }
@media (min-width: 560px) { .richiesta { padding: 32px; } }
.campi { display: grid; gap: 16px; }
@media (min-width: 560px) { .campi { grid-template-columns: 1fr 1fr; } .campo-largo { grid-column: 1 / -1; } }
.campo { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.campo small { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 500 16px/22px var(--font-sans); transition: border-color var(--durata) var(--curva), box-shadow var(--durata) var(--curva); }
.campo textarea { resize: vertical; min-height: 96px; }
.campo select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.campo ::placeholder { color: var(--ink-muted); opacity: 1; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--ink); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--surface-mint), 0 0 0 4.5px var(--primary); }
/* l'errore si vede solo dopo che la persona ha toccato il campo */
.campo :user-invalid { border-color: var(--warning); background: var(--warning-soft); }
.campo-trappola { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.consenso { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 600; }
.consenso input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.consenso a { color: var(--ink); font-weight: 800; }
.richiesta .btn-primario { width: 100%; min-height: 52px; font-size: 17px; }

/* piede: la fascia verde notte continua dopo i contatti, col marchio, le sezioni e i contatti */
.piede { padding: 64px 0 32px; border-top: 1px solid var(--notte-filo); font-size: 15px; }
.piede-dentro { display: grid; gap: 40px; }
@media (max-width: 859px) { .piede-dentro { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .piede-marchio { grid-column: 1 / -1; } }
@media (min-width: 860px) { .piede-dentro { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; } }
.piede-marchio { display: grid; align-content: start; justify-items: start; gap: 16px; }
/* il motto: «in bolla» è dritto, a livello, fatto come si deve, come la livella del logo */
.piede-motto { max-width: 16ch; color: var(--su-notte); font-size: clamp(26px, 1.4vw + 20px, 34px); line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; text-wrap: balance; }
.piede-posta { color: var(--su-notte); font-size: 17px; font-weight: 800; text-decoration: none; border-bottom: 1.5px solid var(--notte-azione); }
.piede-posta:hover { color: var(--notte-azione); }
.piede-colonna { display: grid; align-content: start; justify-items: start; gap: 2px; }
.piede-titolo { margin-bottom: 4px; color: var(--su-notte); font-weight: 800; }
.piede-titolo-dopo { margin-top: 16px; }
.piede-colonna a { padding: 5px 0; color: var(--su-notte-2); font-weight: 600; line-height: 1.35; text-decoration: none; }
.piede-colonna a:hover { color: var(--su-notte); text-decoration: underline; text-underline-offset: 3px; }
.piede-fondo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--notte-filo); color: var(--su-notte-2); font-size: 13.5px; }

/* le pagine semplici: l'esito della richiesta e l'informativa */
.pagina { padding: 72px 0 112px; }
@media (min-width: 720px) { .pagina { padding: 112px 0 160px; } }
.esito { display: grid; justify-items: start; gap: 24px; }
.testo-lungo { display: grid; gap: 16px; max-width: 760px; }
.testo-lungo h1 { margin-bottom: 8px; font-size: clamp(36px, 2.6vw + 24px, 56px); }
.testo-lungo h2 { margin-top: 24px; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
.testo-lungo p { max-width: 68ch; line-height: 1.65; text-wrap: pretty; }
.aggiornata { margin-top: 24px; color: var(--ink-muted); font-size: 14px; }

/* le guide: testo lungo con una tabella e una voce del prezzario, come la mostra l'applicazione */
.guida-sopra { color: var(--ink-muted); font-size: 14px; font-weight: 700; }
.guida-sopra a { color: inherit; }
.testo-lungo .tabella-scorre { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.tabella caption { padding-bottom: 8px; color: var(--ink-muted); font-size: 14px; font-weight: 700; text-align: left; }
.tabella th, .tabella td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tabella thead th { color: var(--ink-muted); font-size: 13.5px; }
.tabella tbody th { width: 4ch; font-weight: 900; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.formula { display: grid; gap: 6px; }
.voce-prezzario { display: grid; gap: 12px; margin: 8px 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); }
.voce-prezzario-codice { color: var(--info); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.testo-lungo .voce-prezzario-testo { font-size: 15.5px; line-height: 1.55; }
.voce-prezzario mark { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; padding: 0 2px; border-radius: 4px; }
.voce-prezzario-cifre { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 12px; border-top: 1px solid var(--border); }
.voce-prezzario-cifre dt { color: var(--ink-muted); font-size: 13px; font-weight: 700; }
.voce-prezzario-cifre dd { margin: 0; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.guida-azione { margin-top: 16px; }
@media (max-width: 559px) {
  .tabella-larga thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabella-larga tbody tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .tabella-larga tbody th, .tabella-larga tbody td { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
}
.solo-telefono { display: none; }
@media (max-width: 719px) { .solo-telefono { display: inline; } }
.tabella-larga tbody th { width: 30%; min-width: 14ch; font-weight: 800; }
/* il foglio Excel d'esempio: le lettere delle colonne, i numeri di riga e la barra della formula */
.testo-lungo code { padding: 1px 6px; border-radius: 6px; background: var(--surface-sunken); font-size: 0.92em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.formula code { display: block; max-width: 100%; padding: 8px 12px; font-size: 15px; white-space: pre; overflow-x: auto; }
.testo-lungo p:not(.formula) code { white-space: nowrap; }
.foglio > * { min-width: 0; }
.foglio { display: grid; gap: 0; margin: 8px 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.testo-lungo .foglio-barra { display: flex; align-items: center; gap: 12px; max-width: none; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.foglio-cella { min-width: 4ch; padding-right: 12px; border-right: 1px solid var(--border); color: var(--ink-muted); font-weight: 800; }
.foglio table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.foglio th, .foglio td { padding: 6px 10px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.foglio thead th, .foglio tbody th { background: var(--surface-sunken); color: var(--ink-muted); font-size: 12.5px; font-weight: 700; text-align: center; }
.foglio .num { text-align: right; }
.foglio td:nth-child(3), .foglio td:nth-child(8) { white-space: normal; }
.foglio-testa td { font-weight: 800; }
.foglio-scelta td:nth-child(7) { box-shadow: inset 0 0 0 2px var(--success); }
.foglio-vuota { background: var(--warning-soft); color: var(--warning); font-weight: 800; }
.foglio-somma td { font-weight: 900; }
.foglio-somma code { font-size: 12.5px; }
.testo-lungo .foglio figcaption { padding: 8px 12px; color: var(--ink-muted); font-size: 13.5px; }
/* il banco dentro le pagine per mestiere: lo stesso della prima pagina, senza la colonna delle fonti e senza scendere sotto */
.banco.banco-esempio { margin: 8px 0; box-shadow: var(--shadow-pop); }
@media (min-width: 760px) { .banco-esempio .banco-corpo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
@media (min-width: 1100px) { .banco.banco-esempio { margin-bottom: 8px; } }
.testo-lungo .banco-esempio p { max-width: none; line-height: inherit; }
.testo-lungo .banco-esempio .dettato { line-height: 26px; }
.banco-esempio figcaption { padding: 10px 20px; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* i testi della prima pagina: la seconda frase del titolo più quieta, le frasi brevi una per riga, i sottotitoli
   dentro il racconto, la lista «Da fare», le note del modulo */
.titolo-dopo { display: block; color: var(--su-notte-2); }
.righe span { display: block; }
.racconto > h3 { margin-top: 10px; font-size: 20px; line-height: 28px; font-weight: 800; }
.da-fare { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: 17px; line-height: 26px; }
.da-fare li { display: flex; gap: 10px; align-items: baseline; }
.da-fare li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); transform: translateY(-1px); }
.contatti-nota { max-width: 60ch; color: var(--su-notte-2); font-size: 17px; line-height: 28px; text-wrap: pretty; }
.richiesta-titolo { font-size: 17px; font-weight: 800; }
.richiesta-dopo { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.richiesta-dopo strong { color: var(--ink); }