/* ============================================================
   NEXO — LANDING LUNGA 1 ("software su misura")
   Solo le sezioni che la Corta non ha: problema, soluzione,
   impegno (sezione a se'), per chi e', iperammortamento esteso.
   Composizione del wireframe: titoli centrati, schede affiancate.
   Tutto il resto viene da campagna.css.
   ============================================================ */

/* ---------- PROBLEMA: tre numeri, sei schede, dichiarazione ---------- */
.numeri{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:clamp(2rem,5vh,3rem)}
.numero{border:1px solid var(--line-l);padding:var(--cp);display:grid;gap:.4rem;align-content:start}
.on-void .numero{border-color:var(--line-d)}
.numero strong{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:500;letter-spacing:-.05em;line-height:.95;display:block}
.numero p{font-size:.95rem;font-weight:300;line-height:1.5;opacity:.75}
.dolori{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--gap)}
.dolore{border:1px solid var(--line-l);padding:var(--cp);display:grid;gap:.7rem;align-content:start}
.dolore h3{font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;margin-top:.3rem}
.dolore p{font-size:.95rem;font-weight:300;line-height:1.5;opacity:.82}
.problema__statement{
  margin:clamp(2.2rem,6vh,3.4rem) auto 0;text-align:center;
  font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:400;letter-spacing:-.03em;line-height:1.3;max-width:54ch;
}
.problema__nota{margin:1rem auto 0;text-align:center;font-size:1rem;font-weight:300;line-height:1.55;opacity:.82;max-width:64ch}

/* ---------- SOLUZIONE: oggi | con un software, schema del flusso, sei software ---------- */
.confronto{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:clamp(2rem,5vh,3rem)}
.confronto__col{border:1px solid var(--line-d);padding:var(--cp);display:grid;gap:1rem;align-content:start}
.confronto__col--oggi{background:var(--void-2)}
.confronto__col small{font-family:var(--mono);font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;opacity:.6}
.confronto__col--dopo small{color:var(--blue-2);opacity:1}
.confronto__col ul{display:grid;gap:.7rem}
.confronto__col li{position:relative;padding-left:1.7rem;font-size:.98rem;line-height:1.5;font-weight:300}
.confronto__col--oggi li{opacity:.78}
/* il segno e' disegnato, non un carattere: la x con due tratti, la spunta con un angolo */
.confronto__col li::before,.confronto__col--oggi li::after{content:"";position:absolute;left:.4rem;top:.72em;width:.8rem;height:1px;background:currentColor}
.confronto__col--oggi li::before{transform:rotate(45deg)}
.confronto__col--oggi li::after{transform:rotate(-45deg)}
.confronto__col--dopo li::before{
  left:.32rem;top:.3em;width:.32rem;height:.62rem;background:none;
  border:solid var(--blue);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.flusso{order:0;margin:var(--gap) 0 0;width:100%;aspect-ratio:16/10;border:1px solid var(--line-d)}
.flusso .tag{text-transform:none;letter-spacing:.06em}
.software{margin-top:clamp(2.6rem,6vh,4rem)}
.software__griglia{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--gap)}
.software__voce{border:1px solid var(--line-d);padding:var(--cp);display:grid;gap:.7rem;align-content:start}
.software__voce h3{font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;margin-top:.3rem}
.software__voce p{font-size:.95rem;font-weight:300;line-height:1.5;opacity:.8}
.software__nota{margin-top:1.2rem;text-align:center;font-size:.95rem;font-weight:300;opacity:.85}

/* ---------- COSA OTTIENI chiuso senza fascia: segue "per te l'impegno e' minimo" ---------- */
.ottieni--chiusa{padding-bottom:0}

/* ---------- PER TE L'IMPEGNO E' MINIMO ---------- */
.impegno-sez{padding:clamp(2.4rem,6vh,3.6rem) var(--lato) var(--sez)}
.impegno-sez .topline h2{font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:inherit;margin:0}
.impegno-sez .impegni{margin-top:var(--gap)}

/* ---------- PER CHI E' ---------- */
.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__col{border:1px solid var(--line-l);padding:var(--cp);display:grid;gap:1.1rem;align-content:start}
.perchi__col 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;color:inherit;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)}

/* ---------- IPERAMMORTAMENTO esteso: quattro schede, il ruolo di Nexo, la chiusa ---------- */
.iperlunga{background:var(--void-3)}
.iperlunga__fatti{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:clamp(2rem,5vh,3rem)}
.iperlunga__fatto{border:1px solid var(--line-d);padding:var(--cp);display:grid;gap:.5rem;align-content:start}
.iperlunga__fatto small{font-family:var(--mono);font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--blue-2)}
.iperlunga__fatto p{font-size:.95rem;font-weight:300;line-height:1.5;opacity:.85}
.iperlunga__ruolo{display:grid;gap:.5rem;margin-top:var(--gap);padding:var(--cp);background:var(--blue);color:var(--blu-ink)}
.iperlunga__ruolo strong{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;letter-spacing:-.03em}
.iperlunga__ruolo p{font-size:.98rem;line-height:1.5}
.iperlunga__ruolo .dc{background:rgba(10,15,30,.12);outline-color:rgba(10,15,30,.6)}
.iperlunga__chiusa{margin:1.4rem auto 0;text-align:center;font-size:1rem;font-weight:300;line-height:1.55;opacity:.88;max-width:66ch}

/* ---------- FINALE: i tre punti ---------- */
.punti--finale li strong{display:block;font-weight:500;margin-bottom:.1rem}

/* ---------- TABLET ---------- */
@media (min-width:640px) and (max-width:899px){
  .numeri{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dolori,.software__griglia,.iperlunga__fatti,.perchi__griglia,.confronto{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- DESKTOP ---------- */
@media (min-width:900px){
  .numeri{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dolori,.software__griglia{grid-template-columns:repeat(3,minmax(0,1fr))}
  .confronto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flusso{aspect-ratio:3/1}
  .perchi__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iperlunga__fatti{grid-template-columns:repeat(4,minmax(0,1fr))}
  .iperlunga__ruolo{grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:2rem;align-items:start}
}

/* ---------- TELEFONO ---------- */
@media (max-width:639px){
  .flusso{aspect-ratio:auto}
  .numero{grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:1rem}
  .numero strong{font-size:1.9rem;min-width:5.2ch}
}