/* Landing Tobia: solo token di tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + var(--s4)); }
body {
  margin: 0; background: var(--fondo); color: var(--testo);
  font: 400 var(--corpo)/var(--interlinea) var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, p, ol, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; border-radius: 8px; }

.solo-lettori, .chi-scrive {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.salta {
  position: absolute; left: var(--s4); top: -100px; z-index: 20;
  background: var(--superficie); padding: var(--s2) var(--s4); border-radius: var(--r-pillola);
}
.salta:focus { top: var(--s2); }

/* ---------- bottoni (Cantiere .btn-blu) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s6); border-radius: var(--r-pillola);
  font: 500 var(--btn-testo)/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color var(--veloce) ease, transform var(--veloce) ease;
}
.btn-blu { background: var(--blu); color: var(--superficie); }
.btn-blu:hover { background: var(--blu-scuro); }
.btn-blu:active { transform: scale(.98); }
.btn[hidden] { display: none; }
.btn-piccolo { min-height: 36px; padding: 0 var(--s4); font-size: 0.9375rem; }

/* ---------- barra fissa ---------- */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 10; height: var(--barra);
  background: var(--vetro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linea);
}
.barra-in {
  height: 100%; width: min(var(--largo), 100% - 2 * var(--s5)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.marchio { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: 1.0625rem; text-decoration: none; letter-spacing: -0.01em; }
.marchio .di { font-weight: 400; color: var(--tenue); font-size: 0.875rem; margin-left: 2px; }
.pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--tobia); box-shadow: 0 0 0 3px rgb(37 211 102 / .2); }
.barra-offerta { display: flex; align-items: center; gap: var(--s4); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
/* il prezzo compare solo dopo l'hero (js/chat.js); senza JS resta sempre visibile */
.js .barra-offerta:not(.vista) { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.barra-prezzo { font-size: 0.875rem; color: var(--tenue); }
.barra-prezzo strong { color: var(--testo); font-weight: 600; }

/* ---------- hero ---------- */
.hero { padding: calc(var(--barra) + clamp(32px, 7vh, 88px)) 0 clamp(48px, 8vh, 96px); }
.hero-in {
  width: min(var(--largo), 100% - 2 * var(--s5)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.mini { display: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--superficie); flex: none; }
.mini img { transform: scale(1.5) translateY(14%); }
.occhiello { display: flex; align-items: center; gap: var(--s3); font-size: var(--piccolo); font-weight: 600; color: var(--tobia-testo); margin-bottom: var(--s4); letter-spacing: -0.005em; }
h1 {
  font: 600 var(--h1)/1.05 var(--font-display); letter-spacing: var(--tracking-titolo);
  max-width: 15ch; text-wrap: balance;
}
.h1-verde { display: block; color: var(--tobia-testo); }
.lead {
  margin-top: var(--s5); max-width: 34em; font-size: var(--lead); line-height: 1.42;
  color: var(--tenue); letter-spacing: .004em; text-wrap: pretty;
}
.azione { margin-top: var(--s6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.garanzia { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--piccolo); line-height: 1.4; color: var(--tenue); }
.garanzie { display: flex; flex-wrap: wrap; column-gap: .45em; }
.garanzie span:not(:last-child)::after { content: "·"; margin-left: .45em; }
.garanzia svg { flex: none; margin-top: 1px; color: var(--tobia-testo); }

/* ---------- prova: telefono + mascotte ---------- */
.hero-prova { display: grid; justify-items: end; padding-left: clamp(110px, 11vw, 170px); }
.scena-tel { position: relative; width: min(100%, 360px); }
.telefono {
  position: relative;
  background: var(--wa-sfondo); border-radius: var(--r-superficie); overflow: hidden;
  box-shadow: var(--ombra); border: 6px solid var(--superficie);
}
.stato { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 4px; background: var(--wa-testata); font-size: 0.8125rem; font-weight: 600; }
.stato .icone { display: flex; gap: 3px; align-items: flex-end; }
.stato .icone i { width: 3px; background: var(--testo); border-radius: 1px; }
.stato .icone i:nth-child(1) { height: 5px; } .stato .icone i:nth-child(2) { height: 7px; } .stato .icone i:nth-child(3) { height: 9px; }
.testata { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4) var(--s3); background: var(--wa-testata); border-bottom: 1px solid var(--linea); }
.avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--superficie); flex: none; }
.avatar img { width: 100%; height: auto; transform: scale(1.5) translateY(14%); }
.chi { display: flex; flex-direction: column; line-height: 1.2; }
.chi strong { font-size: 0.9375rem; font-weight: 600; }
.chi small { font-size: 0.75rem; color: var(--wa-meta); display: flex; align-items: center; gap: 5px; }
.online { width: 7px; height: 7px; border-radius: 50%; background: var(--tobia); }

.chat {
  list-style: none; padding: var(--s3) var(--s3) var(--s4); height: 392px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden;
}
.msg {
  max-width: 82%; padding: 7px 10px 6px; border-radius: 10px; font-size: 0.9375rem; line-height: 1.35;
  box-shadow: 0 1px .5px rgb(0 0 0 / .13);
}
.msg time { display: block; text-align: right; font-size: 0.6875rem; color: var(--wa-meta); margin-top: 2px; }
.ricevuto { align-self: flex-start; background: var(--wa-ricevuto); border-top-left-radius: 3px; }
.inviato { align-self: flex-end; background: var(--wa-inviato); border-top-right-radius: 3px; }
.spunte { color: var(--wa-spunta); letter-spacing: -3px; margin-left: 2px; }
.orari { display: flex; gap: 6px; margin-top: var(--s2); }
.orari span { padding: 3px 10px; border-radius: var(--r-pillola); background: var(--fondo); font-size: 0.875rem; font-weight: 600; color: var(--tobia-testo); }
.orari .scelto { background: var(--tobia-testo); color: var(--superficie); }
.scrive { display: none; align-self: flex-start; gap: 4px; padding: 11px 12px; border-radius: 10px; border-top-left-radius: 3px; background: var(--wa-ricevuto); }
.scrive i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-meta); opacity: .5; animation: punto 1s infinite; }
.scrive i:nth-child(2) { animation-delay: .15s; } .scrive i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: .9; transform: translateY(-3px); } }
.scrivi { padding: var(--s2) var(--s3) var(--s3); background: var(--wa-testata); }
.scrivi span { display: block; padding: 8px 14px; border-radius: var(--r-pillola); background: var(--superficie); color: var(--wa-meta); font-size: 0.875rem; }

.agenda {
  position: absolute; right: -20px; bottom: -22px; z-index: 2;
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4) var(--s3) var(--s3);
  background: var(--superficie); border-radius: 16px; box-shadow: var(--ombra);
}
.agenda > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.agenda strong { font-size: 0.9375rem; font-weight: 600; }
.agenda small { font-size: 0.75rem; color: var(--tenue); }
.agenda-icona { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tobia); color: var(--superficie); flex: none; }

.tobia { position: absolute; left: calc(-1 * clamp(130px, 12vw, 176px)); bottom: -6px; z-index: 3; width: clamp(140px, 13vw, 190px); pointer-events: none; }
.rivedi {
  justify-self: end; margin-top: var(--s6); padding: 6px 12px; border: 0; border-radius: var(--r-pillola);
  background: var(--superficie); color: var(--blu-testo); font: 500 var(--piccolo)/1.2 var(--font); cursor: pointer; box-shadow: var(--ombra);
}
.rivedi[hidden] { display: block; visibility: hidden; }
.rivedi:hover { color: var(--blu-scuro); }

/* ---------- animazione (attiva solo se JS l'avvia) ---------- */
.in-scena [data-t]:not(.visto) { display: none; }
.in-scena .agenda:not(.visto) { display: flex; opacity: 0; transform: translateY(8px) scale(.97); }
.in-scena .msg.visto, .in-scena .scrive.visto { animation: entra .32s var(--ease) both; }
.in-scena .scrive.visto:not(.via) { display: flex; }
.in-scena .scrive.via { display: none; }
.in-scena .agenda.visto { transition: opacity .4s var(--ease), transform .4s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- tablet e mobile ---------- */
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; }
  h1 { max-width: 16ch; }
  .hero-prova { justify-items: center; padding-top: var(--s4); }
  .hero-prova { padding-left: 120px; }
  .rivedi { justify-self: center; }
}
@media (max-width: 640px) {
  :root { --corpo: 16px; }
  .barra-prezzo span, .marchio .di { display: none; }
  .hero { padding-top: calc(var(--barra) + var(--s6)); }
  .azione .btn { width: 100%; }
  .hero-prova { justify-items: end; padding-left: 0; }
  .scena-tel { width: min(80vw, 320px); }
  .msg { font-size: 0.875rem; }
  .chat { height: 410px; }
  .tobia { left: -44px; bottom: -64px; width: 28vw; }
  .agenda { right: -6px; bottom: -18px; }
  .mini { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- sezioni ---------- */
.sezione { padding-block: clamp(80px, 10vw, 136px); }
.sezione.bianca { background: var(--superficie); }
.contenitore { width: min(var(--largo), 100% - 2 * var(--s5)); margin-inline: auto; position: relative; }
.titolo-sezione { font: 600 var(--h2)/1.08 var(--font-display); letter-spacing: var(--tracking-titolo); max-width: 20ch; text-wrap: balance; margin: 0; }
.sotto { margin-top: var(--s4); font-size: var(--lead); line-height: 1.42; color: var(--tenue); max-width: 40em; text-wrap: pretty; }
h3 { margin: 0; font: 600 1.1875rem/1.25 var(--font-display); letter-spacing: -0.012em; }

/* confronto */
.tabella-wrap { margin-top: var(--s7); }
.confronto { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; line-height: 1.4; }
.confronto th, .confronto td { padding: var(--s4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.confronto thead th { font-size: var(--piccolo); font-weight: 600; color: var(--tenue); border-bottom: 0; padding-bottom: var(--s3); }
.confronto tbody th { font-weight: 600; width: 22%; }
.confronto td { color: var(--tenue); width: 26%; }
.confronto .col-tobia { background: var(--fondo); color: var(--testo); font-weight: 500; }
.confronto thead .col-tobia { color: var(--tobia-testo); border-radius: var(--r-campo) var(--r-campo) 0 0; }
.confronto tbody tr:last-child .col-tobia { border-radius: 0 0 var(--r-campo) var(--r-campo); }
.confronto tbody tr:last-child > * { border-bottom: 0; }
.confronto td.col-tobia { padding-left: calc(var(--s4) + 22px); position: relative; }
.confronto td.col-tobia::before { content: ""; position: absolute; left: var(--s4); top: calc(var(--s4) + 3px); width: 14px; height: 14px; border-radius: 50%; background: var(--tobia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.4 3.2 3.1L15 6.7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }

/* schede */
.griglia-3 { margin-top: var(--s7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.scheda { background: var(--superficie); border-radius: var(--r-superficie); padding: var(--s6) var(--s5); }
.sezione.bianca .scheda { background: var(--fondo); }
.spunte-lista { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); font-size: 0.9375rem; line-height: 1.45; color: var(--tenue); }
.spunte-lista li { position: relative; padding-left: 26px; }
.spunte-lista li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--tobia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.4 3.2 3.1L15 6.7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.spunte-lista strong { color: var(--testo); font-weight: 600; }

/* 3 passi */
.passi-3 { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); counter-reset: none; }
.passi-3 li { background: var(--fondo); border-radius: var(--r-superficie); padding: var(--s6) var(--s5); }
.passi-3 .num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--testo); color: var(--superficie); font-weight: 600; margin-bottom: var(--s4); }
.passi-3 p { margin-top: var(--s2); color: var(--tenue); font-size: 0.9375rem; line-height: 1.45; }
.posa { display: block; pointer-events: none; }
.posa-come { position: absolute; right: 0; top: -36px; width: 120px; }

@media (max-width: 960px) {
  .griglia-3, .passi-3 { grid-template-columns: 1fr; }
  .posa-come { width: 84px; top: -20px; }
}
@media (max-width: 760px) {
  /* su telefono il calendario non sta accanto al titolo: va sotto il bottone */
  .posa-come { position: static; width: 96px; margin: var(--s5) auto 0; }
  .confronto thead { display: none; }
  .confronto, .confronto tbody, .confronto tr, .confronto th, .confronto td { display: block; width: auto; }
  .confronto tr { border: 1px solid var(--linea); border-radius: var(--r-superficie); padding: var(--s3) 0; margin-bottom: var(--s4); }
  .confronto tbody th, .confronto td { border-bottom: 0; padding: var(--s2) var(--s4); width: auto; }
  .confronto td::before { content: attr(data-c); display: block; font-size: 0.75rem; font-weight: 600; color: var(--tenue); }
  .confronto td.col-tobia { margin: var(--s2) var(--s3) 0; border-radius: var(--r-campo); padding: var(--s3) var(--s4); }
  .confronto td.col-tobia::before { content: attr(data-c); position: static; width: auto; height: auto; background: none; color: var(--tobia-testo); border-radius: 0; }
  .confronto tbody tr:last-child .col-tobia { border-radius: var(--r-campo); }
}
.azione-centro { align-items: center; text-align: center; margin-top: var(--s7); }
.azione-centro .garanzia { justify-content: center; }
.azione-centro .garanzie { justify-content: center; }

/* cosa ricevi */
.stack { list-style: none; margin: var(--s7) 0 0; padding: 0; background: var(--superficie); border-radius: var(--r-superficie); padding: var(--s2) var(--s5); }
.stack li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s5); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--linea); }
.stack li:last-child { border-bottom: 0; }
.stack h3 { font-size: 1.0625rem; }
.stack p { margin-top: 2px; font-size: 0.9375rem; color: var(--tenue); line-height: 1.4; }
.chi-ha { font-size: 0.75rem; font-weight: 600; color: var(--tenue); background: var(--fondo); padding: 4px 10px; border-radius: var(--r-pillola); white-space: nowrap; }
.solo-fpt .chi-ha { color: var(--blu-testo); background: rgb(0 113 227 / .08); }
.valore { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.bonus { font-size: 0.75rem; font-weight: 600; color: var(--tobia-testo); margin-right: 4px; }
.totali { margin-top: var(--s5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.totale { background: var(--superficie); border-radius: var(--r-superficie); padding: var(--s5); }
.pacchetto { font-weight: 600; }
.riga-valore { margin-top: var(--s2); color: var(--tenue); font-size: 0.9375rem; }
.paghi { margin-top: var(--s1); font-size: 0.9375rem; color: var(--tenue); }
.paghi strong { font: 600 2rem/1.1 var(--font-display); color: var(--testo); letter-spacing: var(--tracking-titolo); margin-right: 4px; }
.nota-lancio { margin-top: var(--s4); font-size: var(--piccolo); color: var(--tenue); }

/* finestre macOS */
.finestra { background: var(--superficie); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 .5px rgb(0 0 0 / .12), var(--ombra); }
.finestra-barra { position: relative; display: flex; align-items: center; height: 28px; padding: 0 12px; background: var(--wa-testata); border-bottom: 1px solid var(--linea); }
.semafori { display: flex; gap: 6px; }
.semafori i { width: 11px; height: 11px; border-radius: 50%; background: var(--mac-rosso); }
.semafori i:nth-child(2) { background: var(--mac-giallo); }
.semafori i:nth-child(3) { background: var(--mac-verde); }
.finestra-titolo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.75rem; font-weight: 500; color: var(--tenue); pointer-events: none; }
.finestra img { width: 100%; }

/* demo pannello */
.schede-tab { margin-top: var(--s7); display: flex; gap: var(--s1); padding: 4px; background: var(--fondo); border-radius: var(--r-pillola); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.schede-tab button { border: 0; background: transparent; font: 500 0.9375rem/1 var(--font); color: var(--testo); padding: 10px 18px; border-radius: var(--r-pillola); cursor: pointer; white-space: nowrap; min-height: 40px; }
.schede-tab button[aria-selected="true"] { background: var(--superficie); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.pannelli { margin-top: var(--s5); }
.pannello { margin: 0 0 var(--s6); }
.js .pannello { margin: 0; }
.pannello figcaption { margin-top: var(--s4); font-size: 0.9375rem; color: var(--tenue); max-width: 60em; }

/* mini chat prova */
.prova { margin-top: var(--s8); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.prova-testo h3 { font-size: var(--h3-grande); }
.prova-testo p { margin-top: var(--s3); color: var(--tenue); }
.prova-testo .nota { font-size: var(--piccolo); }
.prova-chat { background: var(--wa-sfondo); border-radius: var(--r-superficie); overflow: hidden; box-shadow: var(--ombra); border: 6px solid var(--superficie); }
.prova-testata { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--wa-testata); border-bottom: 1px solid var(--linea); }
.prova-log { list-style: none; margin: 0; padding: var(--s4) var(--s3); height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.prova-log .msg { max-width: 85%; }
.prova-suggerimenti { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--s3) var(--s3); }
.prova-suggerimenti button { flex: none; border: 1px solid var(--linea); background: var(--superficie); color: var(--testo); font: 500 0.8125rem/1 var(--font); padding: 9px 12px; border-radius: var(--r-pillola); cursor: pointer; min-height: 36px; }
.prova-suggerimenti button:hover { border-color: var(--tenue); }
.prova-form { display: flex; gap: var(--s2); padding: var(--s2) var(--s3) var(--s3); background: var(--wa-testata); }
.prova-form input { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: var(--r-pillola); padding: 10px 16px; font: 400 1rem/1.2 var(--font); background: var(--superficie); color: var(--testo); }
.prova-form input:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.invia { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--tobia-testo); color: var(--superficie); display: grid; place-items: center; cursor: pointer; }

@media (max-width: 960px) {
  .prova { grid-template-columns: 1fr; }
  .totali { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stack { padding: var(--s1) var(--s4); }
  .stack li { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); }
  .stack .chi-ha { grid-row: 2; justify-self: start; }
  .stack .valore { grid-row: 1; grid-column: 2; align-self: start; }
  .schede-tab { width: auto; }
}
.prova-cta { margin-top: var(--s5); }

/* costi */
.posa-costi { position: absolute; right: 0; top: -24px; width: 120px; }
/* la posa notte ha il suo cielo: va trattata come una card, non come ritaglio */
.posa-notte img { border-radius: 22px; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .35); }
.costi { margin: var(--s7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.costi > div { background: var(--fondo); border-radius: var(--r-superficie); padding: var(--s5); }
.costi dt { font-weight: 600; }
.costi dd { margin: var(--s2) 0 0; color: var(--tenue); font-size: 0.9375rem; line-height: 1.45; }
.fonte { display: block; margin-top: var(--s2); font-size: 0.75rem; }

/* prezzi */
.posti { margin-top: var(--s4); display: inline-block; background: var(--superficie); padding: 8px 16px; border-radius: var(--r-pillola); font-size: 0.9375rem; }
.posti::before { content: ""; display: inline-block; vertical-align: middle; margin: -2px var(--s2) 0 0; width: 8px; height: 8px; border-radius: 50%; background: var(--tobia); }
.posti[hidden] { display: none; }
.piani { margin-top: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.piano { position: relative; background: var(--superficie); border-radius: var(--r-superficie); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.piano-consigliato { outline: 2px solid var(--blu); }
.piani-uno, .totali-uno { grid-template-columns: minmax(0, 560px); justify-content: center; }
.consigliato { position: absolute; top: var(--s5); right: var(--s5); font-size: 0.75rem; font-weight: 600; color: var(--superficie); background: var(--blu); padding: 4px 10px; border-radius: var(--r-pillola); }
.piano h3 { font-size: var(--h3-grande); }
.piano-sotto { color: var(--tenue); margin-top: calc(-1 * var(--s2)); }
.prezzo { margin-top: var(--s3); color: var(--tenue); }
.prezzo strong { font: 600 3rem/1 var(--font-display); letter-spacing: var(--tracking-titolo); color: var(--testo); margin-right: 4px; }
.barrato { display: block; font-size: 0.9375rem; margin-bottom: var(--s1); }
.una-volta { font-size: var(--piccolo); color: var(--tenue); margin-top: calc(-1 * var(--s2)); }
.btn-pieno { width: 100%; margin-top: var(--s3); }
.piano .spunte-lista { margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--linea); }
.garanzie-box { margin-top: var(--s5); display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--s6); align-items: start; background: var(--superficie); border-radius: var(--r-superficie); padding: var(--s6); }
.garanzie-box p { margin-top: var(--s2); color: var(--tenue); font-size: 0.9375rem; line-height: 1.45; }
.garanzie-box .su-entrambi { font-size: var(--piccolo); font-weight: 600; color: var(--tobia-testo); }
.posa-garanzia { width: 76px; flex: none; }

/* FAQ */
.stretto { max-width: 820px; }
.faq { margin-top: var(--s6); border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s5) var(--s7) var(--s5) 0; font-weight: 600; font-size: 1.0625rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; color: var(--tenue); transition: transform var(--veloce) ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 var(--s7) var(--s5) 0; color: var(--tenue); }
.faq a, .nota-lancio a, .piede a { color: var(--blu-testo); }

/* ultima chiamata */
.fine { display: grid; justify-items: center; text-align: center; }
.fine .titolo-sezione, .fine .sotto { margin-inline: auto; }
.posa-fine { width: 150px; margin-bottom: var(--s5); }

/* piede */
.piede { padding: var(--s7) 0; border-top: 1px solid var(--linea); font-size: var(--piccolo); color: var(--tenue); }
.piede-in { display: grid; gap: var(--s2); }
.piede p { margin: 0; }
.piede-nota { font-size: 0.75rem; }
.segnaposto { background: var(--mac-giallo); color: var(--testo); padding: 0 4px; border-radius: 4px; }

@media (max-width: 960px) {
  .costi { grid-template-columns: 1fr 1fr; }
  .piani { grid-template-columns: 1fr; }
  .garanzie-box { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .costi { grid-template-columns: 1fr; }
  .piano, .garanzie-box { padding: var(--s5); }
  .posa-costi { width: 64px; top: -8px; }
  .faq summary, .faq details p { padding-right: var(--s6); }
}

/* pagine brevi: grazie e condizioni */
.pagina-breve { padding: calc(var(--barra) + var(--s7)) 0 var(--s8); min-height: 80vh; }
.pagina-breve .azione { margin-top: var(--s5); }
.posa-grazie { width: 96px; margin-bottom: var(--s5); }
.indicatore { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--piccolo); font-weight: 600; }
.indicatore li { padding: 6px 12px; border-radius: var(--r-pillola); background: var(--superficie); color: var(--tenue); }
.indicatore li[hidden] { display: none; }
.indicatore .fatto { background: var(--tobia-testo); color: var(--superficie); }
.indicatore .fatto::before { content: "✓ "; }
.riquadro-call { margin-top: var(--s6); background: var(--superficie); border-radius: var(--r-superficie); padding: var(--s5); }
.riquadro-call h2 { margin: 0; font: 600 1.375rem/1.2 var(--font-display); }
.riquadro-call p { margin-top: var(--s2); color: var(--tenue); }
.testo-legale h2 { margin: var(--s6) 0 0; font: 600 1.1875rem/1.3 var(--font-display); }
.testo-legale p { margin-top: var(--s3); color: var(--testo); }
.testo-legale .sotto { color: var(--tenue); }
.bozza { display: inline-block; margin-bottom: var(--s4); padding: 6px 12px; border-radius: var(--r-pillola); background: var(--mac-giallo); font-weight: 600; font-size: var(--piccolo); }
.indicatore .attivo { background: var(--blu); color: var(--superficie); }

/* ---------- due offerte e demo (W3) ---------- */
.link-giu { font-size: 0.9375rem; color: var(--blu-testo); text-decoration: none; }
.link-giu::after { content: " ↓"; }
.link-giu:hover { text-decoration: underline; }
.prova-testo .titolo-sezione { font-size: var(--h3-grande); max-width: 16ch; }
.prova-testo .sotto { font-size: 1.0625rem; }
.prova-log .scrive { display: flex; }
.prova-bis { margin-top: var(--s8); }
.prova-chat[data-ripiego] .online { background: var(--tenue); }

/* sezioni su fondo grigio: le card diventano bianche */
.sezione:not(.bianca) .passi-3 li,
.sezione:not(.bianca) .confronto .col-tobia { background: var(--superficie); }

.come-mac { margin-top: var(--s8); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s6); background: var(--superficie); border-radius: var(--r-superficie); padding: var(--s6); }
.come-mac h3 { font-size: var(--h3-grande); }
.come-mac p { margin-top: var(--s3); color: var(--tenue); }
.passi-mac { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s3); color: var(--tenue); font-size: 0.9375rem; line-height: 1.45; }
.passi-mac strong { color: var(--testo); }

.griglia-2 { margin-top: var(--s7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.scheda-sito p { margin-top: var(--s2); color: var(--tenue); font-size: 0.9375rem; line-height: 1.45; }
.scheda-sito h3 { margin-top: var(--s5); }
.mini-sito, .mini-qr { height: 168px; border-radius: var(--r-campo); background: var(--superficie); border: 1px solid var(--linea); overflow: hidden; }
.mini-barra { display: flex; align-items: center; gap: var(--s3); height: 28px; padding: 0 12px; background: var(--wa-testata); border-bottom: 1px solid var(--linea); }
.mini-url { font-size: 0.75rem; color: var(--tenue); }
.mini-corpo { display: grid; gap: var(--s2); padding: var(--s5); justify-items: start; }
.mini-riga { width: 70%; height: 10px; border-radius: var(--r-pillola); background: var(--linea); }
.mini-riga.corta { width: 45%; }
.mini-bottone { margin-top: var(--s3); padding: 10px 18px; border-radius: var(--r-pillola); background: var(--tobia-testo); color: var(--superficie); font-size: 0.875rem; font-weight: 600; }
.mini-qr { display: flex; align-items: center; justify-content: center; gap: var(--s5); color: var(--testo); }
.mini-link { padding: 8px 14px; border-radius: var(--r-pillola); background: var(--fondo); font-size: 0.875rem; font-weight: 600; color: var(--tobia-testo); }

.btn-contorno { background: transparent; color: var(--blu-testo); box-shadow: inset 0 0 0 1.5px var(--blu); }
.btn-contorno:hover { background: rgb(0 113 227 / .06); }
.consigliato { position: static; justify-self: start; align-self: flex-start; margin-bottom: calc(-1 * var(--s1)); }
.prezzo strong { margin-right: 6px; }
.requisiti { font-size: 0.875rem; font-weight: 600; color: var(--testo); margin-top: var(--s2); }
.plus { margin-top: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--linea); font-size: 0.9375rem; color: var(--tenue); line-height: 1.45; }
.plus a { color: var(--blu-testo); font-weight: 600; }
.plus strong { color: var(--testo); }
.garanzie-chi { font-size: var(--piccolo); font-weight: 600; color: var(--tobia-testo); margin-bottom: var(--s2); }
.garanzie-box h3 { font-size: 1.1875rem; }
.titolo-tabella { margin-top: var(--s8); font-size: var(--h3-grande); }
.tabella-versioni { margin-top: var(--s5); }
.confronto-versioni tbody th { width: 28%; }
.confronto-versioni td { width: 36%; }
.costi-due { margin-top: var(--s7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.costi-due h3 { font-size: var(--h3-grande); }
.costi-due .costi { margin-top: var(--s4); grid-template-columns: 1fr; gap: var(--s3); }
.faq[hidden] { display: none; }
#domande .schede-tab { margin-top: var(--s6); }

@media (max-width: 960px) {
  .come-mac, .griglia-2, .costi-due { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .come-mac { padding: var(--s5); }
  .azione .link-giu { align-self: center; }
}
.riquadro-call .azione { margin-top: var(--s4); }
.passi-benvenuto { margin: var(--s6) 0 0; padding-left: 1.4em; display: grid; gap: var(--s4); color: var(--tenue); }
.passi-benvenuto strong { color: var(--testo); }
.sotto strong { color: var(--testo); }
.btn-pieno { white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--s3); }
@media (max-width: 960px) { .piani { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  /* telefono: ogni riga = titolo sopra, le due versioni affiancate */
  .confronto-versioni tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); padding: var(--s3); }
  .confronto-versioni tbody th { grid-column: 1 / -1; padding: 0 var(--s1); width: auto; }
  .confronto-versioni td, .confronto-versioni td.col-tobia { width: auto; margin: 0; padding: var(--s2) var(--s3); font-size: 0.875rem; }
  .prova-log { height: 230px; }
}
@media (max-width: 960px) {
  /* telefono: prima la chat, poi il bottone */
  #provalo .prova { gap: var(--s5); }
  #provalo .prova-testo { display: contents; }
  #provalo .prova-testo .azione { order: 2; margin-top: 0; }
  #provalo .prova-chat { order: 1; }
}