/* ============================================================
   NEXO — LANDING LUNGA 2 «Crescere senza assumere»
   Solo le sezioni che la Corta non ha. Composizione del wireframe:
   testo e numeri a sinistra con i tre passaggi a destra, poi tutto
   centrato e a schede. Tutto il resto viene da campagna.css.
   ============================================================ */

/* ---------- dichiarazioni (statement, non titolo) ---------- */
.dichiarazione{font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:400;letter-spacing:-.03em;line-height:1.3;max-width:52ch}

/* ---------- PROBLEMA · CRESCITA BLOCCATA ---------- */
.blocco__griglia{display:grid;gap:clamp(1.8rem,4vh,2.6rem);margin-top:clamp(1.6rem,4vh,2.4rem)}
.blocco__copy{display:grid;gap:1.1rem;align-content:start}
.blocco__copy h2{margin-top:0;max-width:none;text-align:left}
.blocco__copy .lead{max-width:none}
.numeri{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:.4rem}
.numero{border:1px solid var(--line-l);padding:clamp(1rem,1.6vw,1.3rem) var(--cp);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:1rem}
.numero strong{font-size:clamp(1.8rem,2.8vw,2.3rem);font-weight:500;letter-spacing:-.05em;line-height:.95;min-width:5.4ch}
.numero p{font-size:.95rem;font-weight:300;line-height:1.5;opacity:.75}
.passaggi{display:grid;gap:var(--gap);align-content:start}
.passaggio{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;
  border:1px solid var(--line-l);padding:var(--cp);
}
.passaggio b{
  font-family:var(--mono);font-weight:400;font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.04em;line-height:.9;
  color:var(--blue);min-width:2.2ch;padding-top:.15rem;
}
.passaggio h3{font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.passaggio p{margin-top:.45rem;font-size:.95rem;font-weight:300;line-height:1.5;opacity:.82}
.chiusura{display:grid;gap:.9rem;justify-items:center;text-align:center;margin-top:clamp(2.2rem,6vh,3.4rem)}
.chiusura p:last-child{font-size:1rem;font-weight:300;line-height:1.55;opacity:.82;max-width:64ch}

/* ---------- SOLUZIONE ---------- */
.soluzione__testa{display:grid;gap:1.1rem;justify-items:center;text-align:center;margin-top:clamp(1.6rem,4vh,2.4rem)}
.soluzione__testa h2{margin-top:0}
.soluzione__testa .lead{max-width:64ch}
.confronto{
  width:100%;border-collapse:collapse;margin-top:clamp(2rem,5vh,3rem);
  font-size:.98rem;line-height:1.5;
}
.confronto caption{
  text-align:left;caption-side:top;padding-bottom:1rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;color:var(--blue-2);
}
.confronto th,.confronto td{text-align:left;vertical-align:top;padding:1rem 1.4rem 1rem 0;border-top:1px solid var(--line-d)}
.on-paper .confronto th,.on-paper .confronto td{border-color:var(--line-l)}
.confronto thead th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;font-weight:400;opacity:.6;
  padding-top:0;border-top:0;padding-bottom:.8rem;
}
.confronto tbody th{font-weight:500;letter-spacing:-.02em;font-size:1.02rem;width:22%}
.confronto tbody td{font-weight:300;opacity:.75}
.confronto tbody td:last-child{font-weight:400;opacity:1;padding-right:0}
.confronto tbody tr:last-child th,.confronto tbody tr:last-child td{border-bottom:1px solid var(--line-d)}
.on-paper .confronto tbody tr:last-child th,.on-paper .confronto tbody tr:last-child td{border-bottom-color:var(--line-l)}
.soluzione__nota{margin-top:1.1rem;font-size:.95rem;font-weight:300;opacity:.85}
.soluzione__coda{display:grid;gap:clamp(1.6rem,4vh,2.4rem);margin-top:clamp(2rem,5vh,3rem);justify-items:center}
.soluzione__coda .caso__media{order:0;margin:0;width:100%;aspect-ratio:16/10;border:1px solid var(--line-d)}
.soluzione__coda .caso__media .tag{text-transform:none;letter-spacing:.04em}
.soluzione__coda .dichiarazione{text-align:center}

/* ---------- COSA OTTIENI · PRIMA E DOPO ---------- */
.risultati > h2{text-align:center;margin-inline:auto}
.benefici{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:clamp(2rem,5vh,3rem)}
.beneficio-riga{border:1px solid var(--line-l);padding:var(--cp);display:grid;gap:.75rem;align-content:start}
.beneficio-riga h3{font-size:clamp(1.05rem,1.35vw,1.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;margin-top:.3rem}
.beneficio-riga p{font-size:.95rem;font-weight:300;line-height:1.5;opacity:.8}
.giornata{display:grid;gap:1.2rem;margin-top:var(--gap);border:1px solid var(--line-l);padding:var(--cp)}
.giornata h3{font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.19em;text-transform:uppercase;color:var(--blue-deep)}
.giornata__riga{display:grid;gap:.7rem;padding-top:1rem;border-top:1px solid var(--line-l)}
.giornata__riga small{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;opacity:.6}
.giornata__barra{display:flex;height:clamp(1.5rem,2.6vw,2.1rem);gap:3px}
.seg{display:block;height:100%}
.seg--manuale{background:var(--void)}
.seg--altro{background:#c9c4ba}
.seg--utile{background:var(--blue)}
.giornata__voci{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.92rem;font-weight:300;opacity:.85}
.giornata__voci li{display:inline-flex;align-items:center;gap:.5rem}
.giornata__voci i{width:.75rem;height:.75rem;flex:none}
.giornata__nota{font-size:.9rem;font-weight:300;line-height:1.5;opacity:.75;max-width:80ch}
.confronto--chi{margin-top:var(--gap)}
.impegni--titolo{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(2.4rem,6vh,3.6rem);border:0}
.impegni__griglia{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--gap)}

/* ---------- IPERAMMORTAMENTO esteso ---------- */
.iper--estesa{display:block;margin:0;padding:var(--sez) var(--lato);background:var(--void);color:var(--ink)}
.iper--estesa .topline{border-color:var(--line-d)}
.iper__testa{display:grid;gap:1.1rem;justify-items:center;text-align:center;margin-top:clamp(1.6rem,4vh,2.4rem)}
.iper__testa h2{margin-top:0;max-width:24ch}
.iper__testa .lead{max-width:64ch}
.periodo{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:clamp(2rem,5vh,3rem)}
.periodo__data{border:1px solid var(--line-d);padding:var(--cp);display:grid;gap:.5rem;align-content:start}
.periodo__data strong{font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:500;letter-spacing:-.05em;line-height:.95;color:var(--blue-2)}
.periodo__data small{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;opacity:.6}
.requisiti{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--gap)}
.requisito{border:1px solid var(--line-d);padding:var(--cp);display:grid;gap:.5rem;align-content:start}
.requisito small{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--blue-2)}
.requisito p{font-size:.98rem;font-weight:400;line-height:1.5}
.ruolo{display:grid;gap:.6rem;margin-top:var(--gap);padding:var(--cp);background:var(--blue);color:var(--blu-ink)}
.ruolo h3{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.ruolo p{font-size:.98rem;font-weight:400;line-height:1.5}
.ruolo .dc{background:rgba(10,15,30,.12);outline-color:rgba(10,15,30,.6)}

/* ---------- PER CHI È ---------- */
.settori{justify-content:center;margin-top:1.4rem;opacity:.85}
.on-paper .settori li::before{border-color:var(--blue-deep)}
.perchi__griglia{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:clamp(2rem,5vh,3rem)}
.perchi__colonna{border:1px solid var(--line-l);padding:var(--cp);display:grid;gap:1.1rem;align-content:start}
.perchi__colonna h3{font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.perchi .punti{border-top:0;padding-top:0;max-width:none}
.perchi .punti li{opacity:1;font-size:.98rem}
.punti--no li::before,.punti--no li::after{
  content:"";position:absolute;left:.15rem;top:.78em;width:.8rem;height:1px;border:0;background:currentColor;transform:rotate(45deg);
}
.punti--no li::after{transform:rotate(-45deg)}

/* ---------- finale: i tre punti con titolo ---------- */
.finale .punti li strong{font-weight:500}

/* ---------- TABLET ---------- */
@media (min-width:640px) and (max-width:899px){
  .benefici,.requisiti{grid-template-columns:repeat(3,minmax(0,1fr))}
  .periodo,.perchi__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .impegni__griglia{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- DESKTOP ---------- */
@media (min-width:900px){
  .blocco__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
  .benefici,.requisiti,.impegni__griglia{grid-template-columns:repeat(3,minmax(0,1fr))}
  .giornata__riga{grid-template-columns:6rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:1.4rem}
  .giornata__riga small{grid-row:1/3;padding-top:.4rem}
  .periodo,.perchi__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soluzione__coda .caso__media{aspect-ratio:3/1}
}

/* tabelle a blocchi sul telefono: ogni cella porta la sua intestazione */
@media (max-width:639px){
  .soluzione__coda .caso__media{aspect-ratio:auto}
  /* la didascalia della tabella a blocchi deve restare larga quanto la tabella */
  .confronto caption{display:block;width:100%}
  .confronto thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .confronto,.confronto tbody,.confronto tr,.confronto th,.confronto td{display:block}
  .confronto tbody th{width:auto;padding:1rem 0 .4rem;font-size:1.1rem}
  .confronto tbody td{padding:.5rem 0 .9rem;border-top:0}
  .confronto tbody td::before{
    content:attr(data-label);display:block;margin-bottom:.3rem;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;opacity:.6;font-weight:400;
  }
  .confronto tbody tr:last-child th{border-bottom:0}
  .confronto tbody tr:last-child td:not(:last-child){border-bottom:0}
  .numero strong{font-size:1.8rem}
}

/* il titolo finale di questa versione e' piu' lungo: un gradino sotto, cosi' resta su tre righe */
.finale__copy h2{font-size:clamp(1.9rem,3.2vw,2.75rem);max-width:26ch}
@media (max-width:639px){.finale__copy h2{font-size:clamp(1.8rem,7.6vw,2.2rem)}}