/* TriPago | anteprima nuova home (/home-v2/). Si carica DOPO gli altri CSS. Solo token esistenti, nessuna ombra a riposo, nessun gradiente, nessun filetto. */

.home { --v2-y: clamp(4.5rem, 2.5rem + 7vw, 9rem); }
.home .sec { padding-block: var(--v2-y); }
.home h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.08; max-width: 18em; }
.home h3 { overflow-wrap: break-word; }
.home .link-arrow { border-bottom-color: var(--logo-green); }
.home .lead { color: var(--ink); }
.home .btn--cta { min-height: 56px; padding-inline: 32px; }
.home .site-header { background: var(--paper); }

/* ---------- 1. hero: il telefono con il QR e' l'immagine ---------- */
.hero2 { padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(4rem, 2rem + 6vw, 7.5rem); }
.hero2__grid { display: grid; gap: var(--sp-6); align-items: center; }
.hero2 h1 { font-size: clamp(1.75rem, .35rem + 5.6vw, 3.5rem); line-height: 1.06; max-width: none; }
.hero2 .lead { margin: var(--sp-3) 0 var(--sp-2); max-width: 34em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.hero2__gain { max-width: 34em; margin: 0 0 var(--sp-4); color: var(--ink); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.hero2__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.hero2__cta .btn { width: 100%; }
.hero2__tel { display: inline-flex; align-items: center; gap: .3em; min-height: 48px; font-weight: 600; }
.hero2__micro { margin-top: var(--sp-3); max-width: 34em; color: var(--ink-2); font-size: var(--fs-small); }
.hero2__stage { background: var(--mint); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 3vw, 3.25rem) clamp(1.25rem, .5rem + 3vw, 3rem) clamp(2.5rem, 1.5rem + 3vw, 3.75rem); }
.hero2__stage .ui-mock { max-width: 34rem; }
.hero2__cap { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-small); color: var(--ink-2); }
@media (min-width: 720px) { .hero2__cta .btn { width: auto; } }
@media (min-width: 1024px) {
  .hero2__grid { grid-template-columns: minmax(0, 5.8fr) minmax(0, 6.2fr); gap: var(--sp-6); }
  .hero2__stage { padding-block: 4.5rem 5rem; }
}

/* ---------- 2. chi usa TriPago: tre cifre con lo stesso schema (titolo, cifra, spiegazione) ---------- */
.proof-sec { background: var(--paper-2); }
.proof { display: grid; gap: var(--sp-6); margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.proof__item { display: grid; gap: 10px; align-content: start; }
.proof__num { font: 700 clamp(3rem, 2.2rem + 3.6vw, 4.5rem)/1 var(--font); letter-spacing: -.04em; color: var(--leaf); }
.proof__num small { font-size: .3em; font-weight: 700; letter-spacing: 0; }
.proof__lab { color: var(--ink); max-width: 26ch; line-height: 1.45; }
.proof__lab strong { font-weight: 700; }
.proof__foot { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); }
.proof__foot p { max-width: 34rem; }
.proof__foot a:not(.link-arrow) { text-decoration-color: var(--logo-green); text-decoration-thickness: 2px; }
.proof__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.proof__links .link-arrow, .home .link-arrow { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); }
}

/* ---------- 3. cosa resta in mano a te: quattro tessere identiche, in ogni tessera la risposta e' l'elemento grande ---------- */
.gains { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.gain { display: flex; flex-direction: column; gap: 14px; padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); background: var(--mint); border-radius: var(--r-lg); }
.gain h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.gain__a { font: 700 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)/1.15 var(--font); letter-spacing: -.025em; color: var(--leaf); max-width: 15em; }
.gain__d { color: var(--ink); max-width: 30rem; margin-top: auto; }
.gains__fees { margin-top: var(--sp-4); max-width: 46rem; color: var(--ink); }
.gains__fees + .link-arrow { margin-top: var(--sp-2); }
@media (min-width: 720px) {
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 4. chi fa cosa: tre colonne con la stessa struttura, il provider e' evidenziato ---------- */
.who { display: grid; gap: var(--sp-4); margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.who__col { padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); border-radius: var(--r-lg); }
.who__col h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1.1; margin-bottom: var(--sp-2); }
.who__col p { color: var(--ink); max-width: 30rem; }
.who__col--hub { background: var(--field); }
.who__col--hub .provider-logos { margin-top: var(--sp-3); }
.who__more { margin-top: var(--sp-4); }
@media (min-width: 900px) {
  .who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: stretch; }
}

/* ---------- 5. passi (scura) ---------- */
.home .steps__item p { color: var(--on-night-2); }
.home .steps__item h3 { color: var(--on-night); }
.home .steps__time { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 600; color: var(--on-night); max-width: 40rem; }
.home .steps__foot { display: grid; gap: var(--sp-3); justify-items: start; }
.home .steps__foot .btn--night { width: 100%; }
.steps__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); width: 100%; }
@media (min-width: 720px) { .home .steps__foot .btn--night { width: auto; } }

/* ---------- 6. quanto costa ---------- */
.costs__note p + p { margin-top: var(--sp-1); }
.pricing__old s { text-decoration: line-through; }
.pricing__eur .pricing__old { font-size: 1.125rem; }
.home .costs__intro { color: var(--ink); max-width: 34em; }
.costs__note { margin-top: var(--sp-4); max-width: 46rem; color: var(--ink); }
.costs__act { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); }
.costs__act .btn { width: 100%; }
.costs__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
@media (min-width: 720px) { .costs__act .btn { width: auto; } }
.home .pricing__inc { color: var(--ink); }
/* intestazioni di colonna solo per i lettori di schermo: l'etichetta sta sotto il prezzo, mai sopra */
.home .pricing thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.home .pricing td[data-label]::before { content: none; }
.home .pricing tbody tr:first-child > * { border-top: 0; }
.pricing__lab { display: block; margin-top: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.home .pricing__promo b { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--leaf); color: var(--on-leaf); font-weight: 700; }
@media (max-width: 719.98px) {
  .home .pricing tbody tr:first-child { border-top: 0; }
  .home .pricing td { padding-top: 22px; }
  .home .pricing__promo { margin-bottom: 10px; }
  .home .pricing tbody tr { padding-block: 24px; }
  .home .pricing tbody th { font-size: 1.625rem; padding-bottom: 0; }
}

/* ---------- 7. domande ---------- */
.faq2 { display: grid; gap: var(--sp-6); }
.faq2__head { display: grid; gap: var(--sp-3); align-content: start; }
.faq2 .faq { max-width: none; }
.home .faq__a { color: var(--ink); }
.home .faq__q,
.home .faq__item > summary { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
.faq2__hint { color: var(--ink); max-width: 22rem; }
.home .faq__q::after,
.home .faq__item > summary::after { width: 40px; height: 40px; margin-right: -4px; background: var(--leaf); color: var(--on-leaf); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.home .faq__q:hover::after,
.home .faq__item > summary:hover::after { background: var(--leaf-2); }
.home .faq__q:hover,
.home .faq__item > summary:hover { color: var(--ink); }
@media (min-width: 1024px) {
  .faq2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); }
  .faq2__head { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- 8. contatto ---------- */
.home .company { max-width: 30rem; }
.home .company > p { color: var(--ink); }
.home .company .co-row { grid-template-columns: 8.5rem 1fr; }
.home .company dt { color: var(--ink); }
.home .contact__lead { max-width: 18em; font-weight: 600; font-size: 1.125rem; }
.home .contact h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); }
.home .form__after, .home .form__privacy { color: var(--ink); }

/* ---------- 9. agenti e reti: campo verde scuro ---------- */
.agents { background: var(--leaf); color: var(--on-leaf); padding-block: clamp(4rem, 2.5rem + 5vw, 7rem); }
.agents h2 { color: var(--on-leaf); }
.agents__in { display: grid; gap: var(--sp-4); align-items: start; }
.agents p { color: var(--on-leaf-2); max-width: 36rem; }
.agents__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); margin-top: var(--sp-3); }
.agents .link-arrow { color: var(--on-leaf); border-bottom-color: var(--leaf-bright); }
.agents .link-arrow::after { color: var(--leaf-bright); }
.agents :focus-visible { outline-color: var(--leaf-bright); }
@media (min-width: 900px) { .agents__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-8); } }

/* mobile: lo spazio per la barra fissa e' gia' in components.css (.sticky-cta) */
@media (prefers-reduced-motion: reduce) { .home .btn:active { transform: none; } }