/*
  TriPago | pagine imprese (Per le imprese, Piccole imprese, Grandi imprese, Contatti, Grazie).
  Solo componenti NUOVI; il resto arriva da tokens/base/components/shell/pages. Gradienti solo da token, raggi da token (--r-*), solo transform/opacity animati.
  Elenco e contrasti: docs/design/05-partner-spec.md
*/

/* hero interno: H1 piu' grande su mobile (rapporto H1/corpo >= 2.8 a 390: 46 px su corpo 16), griglia con scheda a destra */
.hero-int h1 { font-size: clamp(2.125rem, 1.5rem + 3.4vw, 4rem); }
.hero-int__grid { display: grid; gap: var(--sp-6); align-items: start; }
.hero-int__note { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); max-width: 32rem; }
.sec--night .hero-int__note { color: var(--on-night-2); }

/* scheda prezzi dell'hero: cornice del registro (.ledger), righe a definizione */
.sheet { padding-right: var(--sp-3); }
.sheet__cap { font: 600 1.375rem/1.2 var(--serif); letter-spacing: -.01em; margin-bottom: var(--sp-2); }
.sheet__row { padding: 16px 0; border-top: 1px solid var(--hair-strong); }
.sheet__row:last-child { border-bottom: 2px solid var(--ink); }
.sheet dt { font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.sheet__num { font: var(--w-display) 3.25rem/1 var(--serif); letter-spacing: var(--ls-display); color: var(--accent); margin-right: 6px; }
.sheet dd { font-size: 1.0625rem; }
.sheet dd small { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--ink-2); }

/* fascia di fiducia compatta: tre cifre su filetti, due righe di testo */
.sec--tight { padding-block: clamp(2.25rem, 1.25rem + 3.5vw, 4.5rem); }
.proof { display: grid; border-top: 2px solid var(--ink); }
.proof__item { padding: 18px 0; border-bottom: 1px solid var(--hair-strong); }
.proof__pre { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.proof__num { display: block; font: 600 clamp(2.75rem, 2.2rem + 2.4vw, 4rem)/1 var(--serif); letter-spacing: -.03em; margin: 4px 0 6px; }
.proof__num small { font-size: .4em; letter-spacing: -.01em; margin-left: .15em; }
.proof__lab { font-size: var(--fs-small); color: var(--ink-2); }
.proof__lab a { color: inherit; }
.proof__foot { display: grid; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-2); }

/* schema dei soggetti: righe su una linea con nodi (stesso gesto della timeline, versione verticale su carta) */
.chain { position: relative; padding-left: 36px; border-top: 2px solid var(--ink); }
.chain::before { content: ""; position: absolute; left: 8px; top: 38px; bottom: 36px; border-left: 1px solid var(--ink); }
.chain__row { position: relative; display: grid; gap: 4px var(--sp-3); padding: 20px 0; border-bottom: 1px solid var(--hair-strong); }
.chain__row::before { content: ""; position: absolute; left: -36px; top: 24px; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper); }
.sec--paper2 .chain__row::before { background: var(--paper-2); }
.chain__row:last-child::before { background: var(--ok); border-color: var(--ok); }
.chain__tag { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--accent); }
.chain__row h3 { font-size: 1.375rem; margin-bottom: 4px; }
.chain__row p { color: var(--ink-2); max-width: 30rem; }
.sec--night .chain { border-top-color: var(--on-night-2); }
.sec--night .chain::before { border-left-color: var(--on-night-2); }
.sec--night .chain__row { border-bottom-color: var(--hair-night); }
.sec--night .chain__row::before { background: var(--night); border-color: var(--on-night-2); }
.sec--night .chain__row:last-child::before { background: var(--ok-night); border-color: var(--ok-night); }
.sec--night .chain__tag { color: var(--sky-night); }
.sec--night .chain__row p { color: var(--on-night-2); }

/* confronto pacchetti: interruttore con radio nativi (funziona senza JS), tabella a colonne, riga di testa sticky */
.pk { border: 0; margin: 0; padding: 0; min-width: 0; }
.pk__legend { padding: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); margin-bottom: 8px; }
.pk__bar { display: inline-flex; border: 1px solid var(--ink); background: var(--paper); margin-bottom: var(--sp-4); }
.pk__bar label { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; font-weight: 600; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.pk__bar label + label { border-left: 1px solid var(--ink); }
.pk__bar label:hover { background: var(--paper-2); }
#pk-con:checked ~ .pk__bar label[for="pk-con"], #pk-sen:checked ~ .pk__bar label[for="pk-sen"] { background: var(--ink); color: var(--paper); }
#pk-con:focus-visible ~ .pk__bar label[for="pk-con"], #pk-sen:focus-visible ~ .pk__bar label[for="pk-sen"] { outline: 3px solid var(--accent); outline-offset: 3px; }
#pk-sen:checked ~ .pk__table .v-con, #pk-con:checked ~ .pk__table .v-sen { display: none; }
.pk__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pk__table th, .pk__table td { text-align: left; vertical-align: top; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--hair-strong); font-weight: 400; }
.pk__table thead th { position: sticky; top: var(--header-h); z-index: 2; background: var(--paper-2); padding-block: 12px; font: 600 1.75rem/1.1 var(--serif);
  letter-spacing: -.02em; border-bottom: 2px solid var(--ink); }
.pk__table tbody th { width: 17%; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); padding-top: 26px; }
.pk__all { font-size: 1.0625rem; max-width: 46rem; }
.pk__table .pricing__eur { font-size: 2.5rem; }
.pk__table .pricing__promo { max-width: 14rem; }
.pk__kit { display: none; margin: 0; }
.pk__kit img { width: 100%; height: auto; border: 1px solid var(--hair-strong); }
.pk__kit figcaption { margin-top: 8px; font-size: var(--fs-label); color: var(--ink-2); }
.pk__head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pk__cta { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }

/* costi nei primi tre anni: tabella numerica compatta, stessa lettura su 360 px */

/* cosa paghi / a chi va: due colonne testuali con filetto e riquadro "Esempio" */
.pay { display: grid; gap: var(--sp-6); margin-top: clamp(2rem, 1.5rem + 2.5vw, 4rem); align-items: start; }
.pay__cols { display: grid; gap: var(--sp-4); }
.pay__col { border-top: 2px solid var(--ink); padding-top: var(--sp-2); color: var(--ink-2); }
.pay__col strong { color: var(--ink); font-weight: 600; }

/* righe affermazione e fatti numerati (Piccole imprese, Grandi imprese) */
.lines p { border-top: 1px solid var(--hair-strong); padding: 20px 0; font: 600 clamp(1.375rem, 1.1rem + 1.2vw, 2rem)/1.3 var(--serif); letter-spacing: -.015em; max-width: 40rem; }
.lines p:first-child { border-top: 2px solid var(--ink); }
.lines p:last-child { border-bottom: 1px solid var(--hair-strong); }
.facts4 { counter-reset: f; border-top: 2px solid var(--ink); }
.facts4 li { counter-increment: f; position: relative; padding: 18px 0 18px 48px; border-bottom: 1px solid var(--hair-strong); }
.facts4 li::before { content: counter(f); position: absolute; left: 0; top: 14px; font: 600 1.75rem/1 var(--serif); color: var(--accent); }
.kitfig { margin: 0; }
.kitfig img { width: 100%; height: auto; border: 1px solid var(--hair-strong); }
.kitfig figcaption { margin-top: 8px; font-size: var(--fs-label); color: var(--ink-2); }

/* traccia a tre fermate nell'hero scuro (decorativa) */
.track { display: flex; margin-top: var(--sp-6); padding-top: 18px; border-top: 1px solid var(--hair-night); }
.track li { flex: 1; position: relative; padding-top: 30px; font-size: var(--fs-small); color: var(--on-night-2); }
.track li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--on-night-2); background: var(--night); }
.track li:last-child::before { background: var(--ok-night); border-color: var(--ok-night); }
.track li::after { content: ""; position: absolute; left: 20px; right: 6px; top: 8px; border-top: 1px solid var(--hair-night); }
.track li:last-child::after { display: none; }

/* tabella a due colonne (dati societari), elenco documenti, contatti in grande */
.kv { border-top: 2px solid var(--ink); }
.kv__row { display: grid; gap: 4px var(--sp-3); padding: 14px 0; border-bottom: 1px solid var(--hair-strong); }
.kv dt { font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); padding-top: 3px; }
.kv dd a { display: inline-flex; align-items: center; min-height: 44px; }
.docs li { padding: 16px 0; border-bottom: 1px solid var(--hair-strong); font: 600 1.375rem/1.3 var(--serif); }
.docs { border-top: 2px solid var(--ink); }
.reach { border-top: 2px solid var(--ink); }
.reach li { padding: 14px 0; border-bottom: 1px solid var(--hair-strong); }
.reach__lab { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.reach a { display: inline-flex; align-items: center; min-height: 44px; font: 600 clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)/1.2 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.statement { max-width: 44rem; font: 500 clamp(1.375rem, 1.1rem + 1.3vw, 2.125rem)/1.3 var(--serif); letter-spacing: -.015em; border-top: 2px solid var(--ink); padding-top: var(--sp-4); margin-top: var(--sp-4); }

/* contatti: riga contatti, modulo completo, trappola per bot, indirizzo */
.form-box h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-bottom: var(--sp-2); }
.form__req { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--sp-1); }
.field__star { color: var(--error); margin-left: 2px; }
.field__row { display: flex; justify-content: space-between; gap: var(--sp-2); }
.counter { font-size: var(--fs-label); color: var(--ink-2); white-space: nowrap; margin-top: 6px; }
.counter.is-over { color: var(--error); font-weight: 600; }
.form__summary { margin-bottom: var(--sp-3); }
.form__summary p { font-weight: 600; }
.form__summary ul { margin-top: 8px; display: grid; gap: 4px; }
.form__summary a { display: inline-flex; align-items: center; min-height: 44px; color: var(--error); }
.form__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field select { appearance: auto; }
.addr { font-style: normal; font: 600 clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)/1.25 var(--serif); letter-spacing: -.015em; }
.addr span { display: block; }
.addr .marker { display: inline-block; margin-top: 12px; font: 500 .875rem/1.6 var(--sans); }
.steps__item > p:only-child { padding-top: 10px; font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.4 var(--serif); color: var(--on-night); max-width: 34rem; }

@media (min-width: 560px) {
  .chain__row { grid-template-columns: 8rem minmax(0, 1fr); }
  .kv__row { grid-template-columns: 10rem minmax(0, 1fr); }
}
@media (min-width: 720px) {
  .pay__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .proof__foot { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .proof { grid-template-columns: repeat(3, 1fr); }
  .proof__item { padding: 22px 24px 22px 0; border-bottom: 0; border-right: 1px solid var(--hair-strong); }
  .proof__item + .proof__item { padding-left: 24px; }
  .proof__item:last-child { border-right: 0; }
  .pk__head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); align-items: end; }
  .pk__kit { display: block; }
}
@media (min-width: 1024px) {
  .hero-int__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
  .hero-int__grid .sheet { margin-top: 40px; }
  .pay { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
  /* tutta la colonna resta ferma, non solo il titolo (il titolo da solo scivolava sopra i recapiti sotto di lui) */
  .split--rev > :first-child { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}

/* tabella pacchetti su mobile: ogni riga del confronto diventa un blocco, i tre pacchetti uno sotto l'altro con il loro nome */
@media (max-width: 719.98px) {
  .pk__bar { display: flex; }
  .pk__bar label { flex: 1; padding: 0 8px; }
  .pk__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pk__table, .pk__table tbody, .pk__table tr, .pk__table th, .pk__table td { display: block; width: auto !important; }
  .pk__table tr { padding: 18px 0; border-bottom: 1px solid var(--hair-strong); }
  .pk__table tbody tr:first-child { border-top: 2px solid var(--ink); }
  .pk__table th, .pk__table td { padding: 0; border: 0; }
  .pk__table tbody th { padding-bottom: 8px; }
  .pk__table td[data-label] { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-top: 1px solid var(--hair); }
  .pk__table td[data-label]::before { content: attr(data-label); flex: none; width: 4.75rem; font: 600 1.25rem/1.2 var(--serif); }
  .pk__table td[data-label] > span { flex: 1; }
  .pk__table .pricing__eur { font-size: 2rem; }
  .pk__table .pricing__promo { max-width: none; }
  .sheet { margin-right: 10px; }
}
@media (max-width: 359.98px) { .track li { font-size: .8125rem; } }
.sec--night .eyebrow { color: var(--on-night-2); }
.sec--night .eyebrow::before { border-top-color: var(--sky-night); }

/* confronto pacchetti: TOP in promo evidenziato (solo con la formula con canone, dove la promo vale). Etichetta fattuale, nessun "consigliato" */
.pk__tag { display: block; margin-top: 6px; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .02em; color: var(--accent); }
#pk-con:checked ~ .pk__table thead th.pk__top { background: var(--paper); border-top: 0; padding-left: 16px; }
#pk-con:checked ~ .pk__table td.pk__top { background: var(--paper); padding-left: 16px; border-left: 1px solid var(--hair-strong); border-right: 1px solid var(--hair-strong); }
#pk-sen:checked ~ .pk__table .pk__tag { display: none; }
.pricing__promo b { display: inline-block; padding: 2px 8px; margin-bottom: 4px; border: 1px solid var(--accent); }

/* nota dati in conferma sotto l'hero: marker piccoli in una riga, il lead regge da solo */
.hero-int__note.note-open { max-width: 40rem; }
.hero-int .note-open + .hero-int__note { margin-top: 6px; }

/* grandi imprese: scheda dati societari nell'hero, elenco "cosa stiamo definendo" */
.sheet--dati .sheet__row { padding: 12px 0; }
.sheet--dati dd { font-size: 1rem; overflow-wrap: anywhere; }
.sheet--dati dd a { display: inline-flex; align-items: center; min-height: 44px; }
.defining { max-width: 46rem; }
.defining__intro { margin-bottom: var(--sp-3); color: var(--ink-2); }
.docs--links li a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 719.98px) {
  #pk-con:checked ~ .pk__table td.pk__top { padding-left: 12px; border: 0; border-left: 3px solid var(--sky); }
  .pk__table td.pk__top .pricing__promo { margin-top: 6px; }
}

/* CRO: link telefono e CTA su fondi scuri, pulsante + frase nel blocco costi */
.sec--night .hero__tel, .cta-close__act p a { color: var(--on-night); }
.cta-close__act p { margin-top: var(--sp-2); }

/* striscia "Incluso": etichetta + quattro voci su filetti */
.incl { display: grid; gap: var(--sp-2); }
.incl__list { display: grid; border-top: 2px solid var(--ink); }
.incl__list li { padding: 14px 0; border-bottom: 1px solid var(--hair-strong); font-weight: 600; }
@media (min-width: 720px) { .incl__list { grid-template-columns: repeat(4, 1fr); gap: 0 var(--sp-3); } .incl__list li { border-bottom: 0; } }

/* rifinitura */
.pk__kit img, .kitfig img { border: 0; border-radius: var(--r-md); }