/* ============================================================
   CARATTERI — ospitati qui, mai da Google
   Alatsi e Montserrat arrivano dal nostro server. Caricarli dal CDN
   di Google manderebbe l'indirizzo IP di ogni visitatore a Mountain
   View senza consenso, che e' il rilievo su cui il tribunale di
   Monaco ha condannato un sito e che il Garante ha incluso negli
   accertamenti sui tracciatori. Entrambi i caratteri sono in licenza
   SIL Open Font, che permette di ospitarli.
   Sottoinsiemi latin e latin-ext: bastano per l'italiano.
   ============================================================ */

@font-face {
  font-family: 'Alatsi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/alatsi-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alatsi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/alatsi-400-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-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;
}

/* ============================================================
   DPP — landing MVP
   Brand kit: navy #112644 · pesca #E8A87C
   Font: Alatsi (display) · Montserrat (body) — in valutazione, vedi DECISIONI-APERTE
   ============================================================ */

:root {
  --navy:        #112644;
  --navy-deep:   #0B1A2E;
  --pesca:       #E8A87C;
  --pesca-ink:   #8A4F1E;
  --pesca-wash:  #FBEEE2;

  --paper:       #FAFBFC;
  --surface:     #FFFFFF;
  --line:        #DCE3EC;
  --line-soft:   #EAEFF5;
  --ink:         #0B1A2E;
  --muted:       #5A6B80;

  --display: "Alatsi", "Trebuchet MS", "Segoe UI", sans-serif;
  --body: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(56px, 8vw, 96px); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }

.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pesca-ink);
  margin: 0 0 14px;
}

/* ---------- testata ---------- */
.site-head {
  padding-block: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-head a.skip {
  font-size: 14px; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.site-head a.skip:hover { color: var(--ink); border-color: var(--pesca); }

/* ---------- apertura ---------- */
.hero { padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 72px); }
/* Qualifica il lettore prima del titolo. Maiuscoletto a basso contrasto
   invece di una pillola: a 390 px una pillola da sessanta caratteri
   andrebbe a capo tre volte e perderebbe la forma. */
.hero .target {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.hero .target::before {
  content: ""; width: 26px; height: 2px; background: var(--pesca); flex: none;
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -.015em;
  max-width: min(26ch, 100%);   /* 87 car · 3 righe a desktop */
}
/* In Alatsi la "t" e il "?" lasciano 2 px di inchiostro a 60 px: il segno
   si appoggia alla lettera. Lo stacco si apre sul segno, senza allentare
   la crenatura di tutto il titolo. */
.hero h1 .qm { padding-left: .05em; }

.hero .sub {
  font-size: clamp(19px, 2.2vw, 23px);
  color: var(--muted);
  max-width: min(44ch, 100%);
  margin: 22px 0 0;
}
.hero .format {
  margin: 30px 0 0;
  padding: 16px 20px;
  background: var(--pesca-wash);
  border-left: 3px solid var(--pesca);
  font-size: 18px;
  max-width: min(48ch, 100%);
}
.hero .format strong { font-weight: 700; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 17px;
  padding: 15px 28px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); }
.btn:focus-visible { outline: 3px solid var(--pesca); outline-offset: 2px; }

/* ---------- la giornata ---------- */
.giornata { background: var(--surface); border-block: 1px solid var(--line-soft); }
.giornata p {
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.45;
  max-width: min(34ch, 100%);
  margin: 0 0 18px;
}
.giornata p:last-child { margin-bottom: 0; }
.giornata .quiet { color: var(--muted); }

/* ---------- loghi gestionali ---------- */
.stack { text-align: center; }
.stack h2 { font-size: clamp(22px, 2.8vw, 28px); max-width: 100%; }   /* largo come la riga dei gestionali sotto */
.stack .logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px 18px;
  align-items: center;
  margin-top: 36px;
}
.stack .logos img {
  height: 50px; width: 100%;
  object-fit: contain;
  opacity: .8;
  transition: opacity .15s ease;
}
.stack .logos img:hover { opacity: 1; }

/* ---------- le due ore ---------- */
.due-ore { background: var(--surface); border-block: 1px solid var(--line-soft); }
.due-ore h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: min(20ch, 100%); }
.cols { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: 38px; }

.passi { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.passi li {
  position: relative; padding-left: 40px; padding-block: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 18px;
}
.passi li:first-child { border-top: none; padding-top: 0; }
.passi li::before {
  counter-increment: p; content: counter(p);
  position: absolute; left: 0; top: 16px;
  font-family: var(--display); font-size: 14px; color: var(--pesca-ink);
  width: 24px; border-top: 2px solid var(--pesca); padding-top: 6px;
}
.passi li:first-child::before { top: 2px; }

.due-ore .intro-idea { font-size: 19px; color: var(--muted); max-width: min(62ch, 100%); margin: 16px 0 34px; }   /* larga come i passi sotto */
.due-ore .passi { max-width: min(62ch, 100%); }

/* Cosa diventano i numeri una volta usciti dall'ora: le scelte che
   l'imprenditore puo' prendere per tempo. Larga come i passi sopra. */
.esito {
  max-width: min(62ch, 100%);
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.esito p { font-size: 18px; margin: 0 0 14px; }
.esito p:last-child { margin-bottom: 0; }
.esito .esito-apre { font-size: 19px; color: var(--navy); }

/* ---------- l'esperimento e il patto ---------- */
.patto .cols { grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); margin-top: 0; align-items: start; }
.patto h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: min(30ch, 100%); margin-bottom: 20px; }   /* 74 car · 2-3 righe */
.patto p { font-size: 18px; max-width: min(56ch, 100%); margin: 0 0 16px; }

.offerta {
  background: var(--pesca-wash);
  border: 1px solid var(--pesca);
  border-radius: 4px;
  padding: 26px 26px 28px;
  text-align: center;
}
.offerta-n {
  font-family: var(--display);
  font-size: 64px; line-height: 1; color: var(--pesca-ink);
  margin: 0; font-variant-numeric: tabular-nums;
}
.offerta-l {
  font-family: var(--display);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pesca-ink); margin: 8px 0 18px;
}
.offerta-t {
  font-size: 16px; color: var(--ink); margin: 0;
  padding-top: 18px; border-top: 1px solid var(--pesca);
  text-align: left;
}

.confine {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  font-size: 16px; color: var(--muted); max-width: min(62ch, 100%);
}

/* ---------- la domanda regalata ---------- */
.dono { background: var(--navy); color: #EEF2F7; }
.dono .eyebrow { color: var(--pesca); }
.dono h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  color: #fff;
  max-width: 100%;   /* largo come il blocco delle risposte sotto */
  line-height: 1.15;
}
.dono .risposte { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 40px; margin-top: 34px; }
.dono .risposta { min-width: 0; }
.dono .risposta b { font-family: var(--display); color: var(--pesca); display: block; font-size: 19px; margin-bottom: 6px; }
.dono .risposta span { color: #B8CAE0; font-size: 16px; }

/* ---------- chi sono ---------- */
.chi { background: var(--surface); border-block: 1px solid var(--line-soft); }
.chi .cols { grid-template-columns: 300px minmax(0,1fr); align-items: start; margin-top: 0; }
/* La biografia e' lunga tre volte la foto: senza sticky la colonna di
   sinistra resterebbe vuota per settecento pixel. Il volto accompagna
   la lettura invece di sparire al primo scorrimento. */
.chi img { border-radius: 4px; position: sticky; top: 24px; }
.chi h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 18px; }
.chi p { font-size: 18px; max-width: 100%; margin: 0 0 16px; }
.chi .chi-apre { font-size: 20px; }

/* Il nome porta al profilo LinkedIn: navy e sottolineato, perche' in un
   paragrafo in corpo 20 un collegamento deve dichiararsi senza gridare. */
.chi .nome {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: #9DB0C7;
}
.chi .nome:hover { text-decoration-color: var(--pesca); }

/* I tre elementi del lavoro: la voce in testa resta nel carattere dei
   titoli, il resto scorre come prosa. */
/* I tre elementi del lavoro: schede dal bordo sottile, una per voce, in
   colonna unica, cosi' nessuna resta sola su una riga mezza vuota. */
.chi-tre {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 12px;
}
.chi-tre li {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 17px; line-height: 1.55;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.chi-tre b {
  font-family: var(--display); font-weight: 400;
  font-size: 16px; letter-spacing: .01em;
  color: var(--pesca-ink);
}
.chi .motivo {
  margin-top: 26px; padding-left: 16px; border-left: 3px solid var(--pesca);
  font-size: 19px;
}

/* ---------- modulo ---------- */
.modulo { background: var(--paper); }
.modulo h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: min(720px, 100%); }   /* largo come il modulo */
.modulo .intro { color: var(--muted); max-width: min(720px, 100%); margin: 16px 0 0; }   /* largo come il modulo */

form { margin-top: 34px; max-width: min(720px, 100%); display: flex; flex-direction: column; gap: 18px; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 15px; }
label .hint { color: var(--muted); font-size: 14px; }
input, textarea {
  font-family: var(--body); font-size: 17px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
}
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--pesca); outline-offset: 1px; border-color: var(--pesca); }
textarea { resize: vertical; min-height: 84px; }
.privacy { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- piede ---------- */
.site-foot {
  padding-block: 34px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px; color: var(--muted);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .cols, .chi .cols { grid-template-columns: minmax(0,1fr); }
  .chi img { max-width: 240px; }
}

@media (max-width: 860px) {
  .patto .cols { grid-template-columns: minmax(0,1fr); }
}

/* ============================================================
   IL CRUSCOTTO — finta schermata, dati d'esempio
   ============================================================ */
.cruscotto { background: var(--paper); padding-top: clamp(34px, 4vw, 54px); }
.stack { padding-bottom: clamp(38px, 4.5vw, 60px); }
.cruscotto h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: min(20ch, 100%); }
.cruscotto .intro-c { font-size: 18px; color: var(--muted); max-width: 100%; margin: 14px 0 34px; }

.screen {
  background: #0E1F38;
  border: 1px solid #22375A;
  border-radius: 6px;
  padding: 22px;
  color: #E7EDF5;
  box-shadow: 0 18px 44px rgba(17, 38, 68, .16);
}

.screen-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid #22375A;
}
.chip {
  font-size: 12.5px; color: #AFC4DC;
  background: #152B48;
  border: 1px solid #22375A;
  border-radius: 999px;
  padding: 5px 12px;
}
.screen-note {
  margin-left: auto;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pesca);
}

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.kpi {
  background: #122744;
  border: 1px solid #22375A;
  border-radius: 4px;
  padding: 16px 16px 18px;
  min-width: 0;
}
.kpi.lead { border-color: var(--pesca); background: #17304F; }
.kpi-l {
  display: block;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #9DB2CA; margin-bottom: 10px;
}
.kpi-n {
  display: block;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.kpi.lead .kpi-n { color: var(--pesca); }
.kpi-s { display: block; font-size: 13px; color: #8FA6C0; margin-top: 8px; }
.kpi-s.warn { color: #E8A87C; }
.kpi-s.ok { color: #7FC9A4; }

.reparti { margin-top: 20px; padding-top: 20px; border-top: 1px solid #22375A; }
.reparti-t {
  font-family: var(--display);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #9DB2CA; margin: 0 0 14px;
}
/* Nella vista property management ogni riga porta quattro numeri: quello a
   destra va detto per nome, altrimenti si legge come un quarto dell'esploso.
   La colonna di sinistra la dichiara gia' il titolo del blocco. */
.col-head {
  display: flex; justify-content: flex-end;
  padding: 0 0 8px;
  border-bottom: 1px solid #1B2F4D;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #728CAB;
}
.col-head + ul > li:first-child { padding-top: 12px; }

.reparti ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.reparti li {
  display: grid; grid-template-columns: 14px minmax(0,1fr) auto;
  align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid #1B2F4D;
  font-size: 16px;
}
.reparti li:last-child { border-bottom: none; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.dot.ok  { background: #4FB98A; }
.dot.mid { background: #E0B65C; }
.dot.bad { background: #E0675B; }
.r-n { color: #D7E2EF; min-width: 0; }
.r-v { font-family: var(--display); font-variant-numeric: tabular-nums; color: #AFC4DC; }
.reparti li:has(.dot.bad) .r-v { color: #E0675B; }

/* ---------- le due viste: hotel e property management ---------- */
.vista + .vista { margin-top: 60px; }
.vista-t {
  font-family: var(--display);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.vista-t::after {
  content: ""; flex: 1; height: 1px; background: #DCD4CB; min-width: 0;
}

/* L'esploso del margine: il totale resta in testa, le tre componenti
   scendono sotto al nome e vanno a capo da sole su schermo stretto. */
.appartamenti li { padding: 13px 0; }
.esploso {
  grid-column: 2 / -1;
  display: flex; flex-wrap: wrap; gap: 3px 20px;
  margin-top: 7px;
  font-size: 13.5px; color: #9DB2CA;
}
.esploso > span { white-space: nowrap; }
.esploso b { font-weight: 400; color: #728CAB; margin-right: 6px; }
.esploso .giu { font-style: normal; color: #D9736A; }

.servizi { margin-top: 18px; padding-top: 18px; }

.didascalia {
  margin: 26px 0 0;
  font-size: 19px; max-width: 100%;
  padding-left: 16px; border-left: 3px solid var(--pesca);
}

/* ---------- CTA ----------
   Una sola chiamata all'azione, ripetuta uguale lungo la pagina:
   il bottone fantasma e' stato tolto il 04/11 perche' divideva il gesto. */
.patto .cta-row { margin-top: 24px; }
.modulo .rassicura { margin-bottom: 0; }
.oppure {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: clamp(48px, 7vw, 76px) 0 0;
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line-soft);
  max-width: min(22ch, 100%);
}
.modulo form { margin-top: 18px; }

/* ============================================================
   Rassicurazione sotto ogni CTA · prova in alto · FAQ
   ============================================================ */
/* Le tre righe della chiamata all'azione — bottone, rassicurazione,
   scorciatoia — sono identiche nei tre punti della pagina, stessa misura. */
p.rassicura {
  font-size: 15px;
  color: var(--muted);
  margin: 12px 0 0;
}

/* La via da due minuti, per chi la videochiamata non la prende. Resta un
   collegamento di testo: un secondo bottone dividerebbe il gesto, ed e' la
   ragione per cui il 4 novembre ne abbiamo tolto uno dall'apertura. */
p.scorciatoia {
  margin: 14px 0 0;
  font-size: 15px; color: var(--muted);
}
.scorciatoia a {
  color: var(--navy); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--pesca);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.scorciatoia a:hover { color: var(--pesca-ink); }

/* ---------- la prova, subito sotto l'apertura ---------- */
.prova {
  background: var(--surface);
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(32px, 4vw, 48px);
}
.prova-righe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 32px;
  align-items: start;
}
.p-dato { min-width: 0; }
.p-n {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  color: var(--pesca-ink);
  font-variant-numeric: tabular-nums;
}
.p-l { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; max-width: min(18ch, 100%); }
.p-fonte { font-size: 15px; color: var(--muted); margin: 26px 0 0; max-width: 100%; }   /* larga come la striscia sopra */

@media (max-width: 760px) {
  .prova-righe { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------- le domande ---------- */
.faq { background: var(--surface); border-block: 1px solid var(--line-soft); }
.faq h2 { font-size: clamp(24px, 3vw, 32px); max-width: min(720px, 100%); margin-bottom: 30px; }   /* largo come l'elenco sotto */
.faq dl { margin: 0; max-width: min(64ch, 100%); }
.faq dt {
  font-family: var(--display);
  font-size: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.faq dl > dt:first-of-type { border-top: none; padding-top: 0; }
.faq dd {
  margin: 8px 0 20px;
  font-size: 17px;
  color: var(--muted);
}
.faq dd:last-child { margin-bottom: 0; }

/* ============================================================
   Testata — marchio piccolo, payoff in testo leggibile
   ============================================================ */
.marchio {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  min-width: 0;
}
.marchio img { height: 30px; width: auto; }
.marchio-payoff {
  font-family: var(--display);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--navy);
  padding-left: 11px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .marchio-payoff { display: none; }
}


/* ============================================================
   Misure dei blocchi di testo — regola permanente
   Sotto gli 860 px la gabbia la fa il padding della pagina:
   i blocchi prendono tutta la larghezza disponibile.
   ============================================================ */
@media (max-width: 860px) {
  /* A colonna unica la foto scorre col testo: tenerla incollata in cima
     la lascerebbe sospesa sopra paragrafi che non le appartengono. */
  .chi img { position: static; }

  .hero h1,
  .hero .sub,
  .hero .format,
  .giornata p,
  .stack h2,
  .cruscotto h2, .cruscotto .intro-c, .didascalia,
  .vista-t,
  .due-ore h2, .due-ore .intro-idea, .due-ore .passi, .esito,
  .dono h2,
  .patto h2, .patto p,
  .chi p, .chi .motivo,
  .faq h2, .faq dl,
  .modulo h2, .modulo .intro,
  .p-fonte {
    max-width: 100%;
  }
}

/* I titoli grandi non devono spezzarsi in righe corte su schermo stretto:
   il vincolo in ch scala col corpo, e a 36px diventa una misura minuscola. */
@media (max-width: 680px) {
  .hero h1 { font-size: clamp(28px, 7.6vw, 40px); }
  .p-l { max-width: 100%; }
  .prova-righe { gap: 18px 20px; }
}

/* ---------- modulo esteso ---------- */
.campi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.campi > label { margin: 0; }
.campo-largo { grid-column: 1 / -1; }

.racconto { margin-top: 22px; }
.racconto textarea { min-height: 150px; }

@media (max-width: 640px) {
  .campi { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   Misura dei titoli — da rivedere quando il testo cambia
   Regola: il vincolo in ch va tarato sui caratteri reali del
   titolo, puntando a 2-3 righe a desktop. Un titolo che cresce
   dentro una misura vecchia si spezza in righe corte.
   Controllo rapido: caratteri ÷ ch = righe attese.
   ============================================================ */