/* TriPago | percorso agenti (/diventa-partner/*). Solo componenti nuovi: il resto arriva da tokens/base/components/pages.
   Indice: hero + scheda fatti, scala delle fasce, pannelli bonus/rinnovo, traccia (timeline chiara), documenti, form candidatura. */

/* H1 delle pagine agenti: rapporto H1/corpo >= 2.6 anche a 390 px */
.h1-ag { font-size: clamp(2.875rem, 1.9rem + 4vw, 4.5rem); line-height: 1.04; letter-spacing: -.025em; max-width: 11em; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.agenti-note { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.sec--night .agenti-note { color: var(--on-night-2); }

/* A-1 hero: testo + scheda dei quattro fatti */
.hero-ag { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) var(--sec-y); }
.hero-ag__grid { display: grid; gap: var(--sp-8); }
.hero-ag .lead { margin: var(--sp-3) 0 var(--sp-4); }
.hero-ag__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.hero-ag__micro { margin-top: var(--sp-2); }
/* A-2 pacchetti: dotazione e canone sotto la tabella */
.pack__foot { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); max-width: 46rem; color: var(--ink-2); }
.pack__foot .link-arrow { justify-self: start; color: var(--ink); }

/* traccia: timeline su fondo chiaro (nodi cerchio, ultimo pieno) */
.track { --n: 3; --track-bg: var(--paper); counter-reset: t; display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.sec--paper2 .track { --track-bg: var(--paper-2); }
.track__i { position: relative; counter-increment: t; padding-left: 64px; min-height: 46px; }
.track__i::before { content: counter(t); position: absolute; left: 0; top: 0; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--track-bg); font: 600 1.375rem/1 var(--serif); z-index: 1; }
.track__i:last-child::before { background: var(--ok); border-color: var(--ok); color: var(--paper); }
.track__i:not(:last-child)::after { content: ""; position: absolute; left: 22.5px; top: 46px; bottom: calc(-1 * var(--sp-4)); border-left: 1px solid var(--ink-2); }
.track__k { display: block; font: 600 var(--fs-h3)/1.2 var(--serif); letter-spacing: -.01em; padding-top: 6px; }
.track__t { display: block; color: var(--ink-2); max-width: 24rem; margin-top: 4px; }
.track--lg .track__t { font-size: 1.125rem; color: var(--ink); }


/* A-6 documenti: righe a filetto, non schede */
.docs { margin-top: clamp(2rem, 1.5rem + 3vw, 4rem); border-top: 2px solid var(--ink); }
.doc { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--hair-strong); }
.doc h3 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); }
.doc p { color: var(--ink-2); max-width: 40rem; margin-top: 6px; }
.doc__act { display: grid; gap: 8px; align-content: start; justify-items: start; }
.doc__msg { font-size: var(--fs-small); color: var(--ink); font-weight: 500; max-width: 20rem; }
.doc__msg:empty { display: none; }
.docs__intro { margin-top: var(--sp-3); max-width: 40rem; color: var(--ink-2); font-size: var(--fs-lead); }

/* A-7 contatti + A-8 domande in attesa */
.agent-contact h2 { font-size: clamp(1.625rem, 1.2rem + 2.2vw, 3rem); overflow-wrap: anywhere; }
.agent-contact h2 a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.agent-contact a { overflow-wrap: anywhere; }
.agent-contact__p { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); max-width: 32rem; color: var(--ink-2); }
/* A-9 chiusura: candidatura (chiara, il footer e' scuro) */
.apply { display: grid; gap: var(--sp-4); align-items: start; }
.apply h2 { max-width: 14em; }
.apply p { margin-top: var(--sp-2); max-width: 34rem; color: var(--ink-2); }
.apply__act { display: grid; gap: var(--sp-2); justify-items: start; }

/* candidatura / grazie */
.cand { display: grid; gap: var(--sp-6); align-items: start; }
.cand .h1-ag { font-size: clamp(2.875rem, 1.9rem + 3vw, 4rem); }
.cand__side .lead { margin-top: var(--sp-3); }
.cand__side .agenti-note { margin-top: var(--sp-3); }
[data-piva][hidden] { display: none; }
.field__hint + .field__err { margin-top: 4px; }
.field input[inputmode="numeric"] { letter-spacing: .04em; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.thanks { max-width: 40rem; }
.thanks .lead { margin-top: var(--sp-3); }

@media (min-width: 720px) {
  .doc { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); align-items: center; }
  .doc__act { justify-items: end; text-align: right; }
  .track { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 32px; }
  .track__i { padding: 66px 0 0; }
  .track__i:not(:last-child)::after { left: 60px; right: -20px; top: 23px; bottom: auto; border-left: 0; border-top: 1px solid var(--ink-2); }
  .track--col { grid-template-columns: 1fr; gap: var(--sp-4); }
  .track--col .track__i { padding: 0 0 0 64px; }
  .track--col .track__i:not(:last-child)::after { left: 22.5px; right: auto; top: 46px; bottom: calc(-1 * var(--sp-4)); border-top: 0; border-left: 1px solid var(--ink-2); }
}
@media (min-width: 1024px) {
  .hero-ag__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
  .apply { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .apply__act { justify-items: start; }
  .cand { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); }
  .cand__side { position: sticky; top: calc(var(--header-h) + 24px); }
}
.track__i > .track__t:first-child { padding-top: 10px; }
.check a { color: inherit; text-decoration-color: var(--accent); }

/* chi cerchiamo + condividi + note percorso */
.who { margin-top: var(--sp-4); display: grid; gap: var(--sp-4); align-items: start; }
.who__alt { margin-top: var(--sp-4); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-4); }
.share__msg { flex-basis: 100%; min-height: 1.5em; margin: 0; }
@media (min-width: 900px) { .who { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); } }

/* prime due settimane: etichetta del passo sopra il testo */
.tl__k { display: block; padding-top: 6px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--sky-night); }
.steps--ag .steps__item .tl__k + p { padding-top: 2px; }


/* ---------- landing: hero, voci di reddito, scala, "il tuo anno", obiettivi, vantaggi ---------- */
.hero-ag .lead { font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); max-width: 30rem; }
.hero-ag__val { margin: 0 0 var(--sp-4); max-width: 30rem; font: 600 1.25rem/1.4 var(--serif); color: var(--ink); }
.hero-ag__proof { margin-top: var(--sp-2); }
.cta-row { margin-top: var(--sp-4); }
.notes { margin-top: var(--sp-4); }
.lbl { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }

/* hero: tre mesi tipo (le barre crescono con una animazione CSS; se non parte restano piene) */
.ladder { margin: 0; padding: var(--sp-4) var(--sp-3); border-radius: var(--r-lg); background: var(--night); color: var(--on-night); }
.ladder .lbl, .ladder__n, .ladder__note { color: var(--on-night-2); }
.ladder__l { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0; }
.ladder__l li { display: grid; gap: 4px; }
.ladder__n { font-size: var(--fs-small); }
.ladder__v { font-size: 1.0625rem; }
.ladder__v b { font: 700 clamp(2.5rem, 1.7rem + 3.4vw, 4rem)/1 var(--serif); letter-spacing: -.03em; color: var(--on-night); margin-right: .15em; }
.ladder__bar { display: block; height: 8px; width: calc(var(--p) * 100%); border-radius: 4px; background: var(--sky); transform-origin: left; }
.ladder__note { font-size: var(--fs-small); line-height: 1.5; }
@keyframes grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) { .ladder__bar { animation: grow .9s var(--ease) both; } .ladder li:nth-child(2) .ladder__bar { animation-delay: .15s; } .ladder li:nth-child(3) .ladder__bar { animation-delay: .3s; } }

/* le cinque voci */
.gains { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.gain { display: grid; gap: 6px; align-content: start; padding: var(--sp-3); background: var(--field); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.gain p:last-child { color: var(--ink-2); max-width: 28rem; }
.gain__k { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.gain__n { font: 700 clamp(2.5rem, 2rem + 2.5vw, 3.75rem)/1 var(--serif); letter-spacing: -.03em; color: var(--accent); }
.gain__n small { font: 500 .9375rem var(--sans); letter-spacing: 0; color: var(--ink-2); margin-left: 4px; }
.gain--lead { background: var(--night); border-color: var(--night); }
.gain--lead .gain__k, .gain--lead .gain__n small, .gain--lead p:last-child { color: var(--on-night-2); }
.gain--lead .gain__n { color: var(--on-night); }

/* scala delle fasce (su navy): visibile sempre, la sequenza accende solo i colori */
.stair { display: grid; gap: 10px; margin-top: clamp(2rem, 1.5rem + 3vw, 4rem); }
.stair__b { --pad: 16px; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; width: 100%; padding: 14px var(--pad); text-align: left; font: inherit; color: var(--on-night); background: transparent; border: 1px solid var(--hair-night); border-radius: var(--r-md); cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color 400ms var(--ease); }
.stair__b:hover { background: rgba(245, 249, 250, .1); }
.stair__f { grid-column: 1; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--on-night-2); }
.stair__r { grid-column: 1; font-size: var(--fs-small); }
.stair__amt { grid-column: 2; grid-row: 1 / span 2; font: 700 2.5rem/1 var(--serif); letter-spacing: -.03em; }
.stair__amt small { display: block; font: 500 .75rem/1.2 var(--sans); letter-spacing: 0; text-align: right; color: var(--on-night-2); }
.stair__bar { grid-column: 1 / -1; display: block; height: 6px; width: calc(var(--p) * 100%); margin-top: 10px; background: var(--on-night-2); }
.stair__i.is-lit:not(.is-on) .stair__b { background: var(--night-2); border-color: var(--sky-night); }
.stair__i.is-lit:not(.is-on) .stair__bar { background: var(--sky-night); }
.stair__i.is-on .stair__b { background: var(--on-night); color: var(--ink); border-color: var(--on-night); }
.stair__i.is-on .stair__f, .stair__i.is-on .stair__amt small { color: var(--ink-2); }
.stair__i.is-on .stair__bar { background: var(--sky); }
.stair__b:focus-visible, .scn:focus-visible { outline: 3px solid var(--sky-night); outline-offset: 3px; }
.scn:focus-visible { outline-color: var(--accent); }
.lvls { margin-top: var(--sp-3); min-height: 7.5em; max-width: 46rem; font: 600 var(--fs-h3)/1.3 var(--serif); letter-spacing: -.01em; }
.lvl[hidden] { display: none; }
.lvl + .lvl { margin-top: var(--sp-2); }
.js .lvl + .lvl { margin-top: 0; }
.more { margin-top: var(--sp-4); border-top: 1px solid var(--hair-night); }
.more > summary { display: flex; align-items: center; min-height: 52px; cursor: pointer; font-weight: 600; }
.more > .callout { margin-bottom: var(--sp-2); }
.sec--night .callout h3 { color: inherit; }

/* il tuo anno */
.scns { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.scn { display: grid; gap: 4px; align-content: start; padding: var(--sp-3); text-align: left; font: inherit; color: var(--ink); background: var(--field); border: 1.5px solid var(--hair-strong); border-radius: var(--r-lg); cursor: pointer; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.scn:hover { border-color: var(--ink); transform: translateY(-2px); }
.scn__n { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.scn__m { font: 700 clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem)/1.1 var(--serif); letter-spacing: -.02em; color: var(--accent); }
.scn__r { font-size: var(--fs-small); color: var(--ink-2); }
.scn[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: var(--on-night); }
.scn[aria-pressed="true"] .scn__n, .scn[aria-pressed="true"] .scn__r { color: var(--on-night-2); }
.scn[aria-pressed="true"] .scn__m { color: var(--on-night); }
.sim { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); align-items: start; }
.sim__in, .sim__out { padding: var(--sp-3); background: var(--field); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.sim .field + .field { margin-top: var(--sp-2); }
.sim .field input, .sim .field select { max-width: 11rem; font-size: 1.25rem; font-weight: 600; }
.sim__meter { display: flex; gap: 4px; height: 8px; margin-bottom: var(--sp-3); }
.sim__meter i { flex: 1; border-radius: 4px; background: var(--hair); transition: background-color 300ms var(--ease); }
.sim__meter i.is-on { background: var(--sky); }
.sim__dl { display: grid; gap: var(--sp-2); margin: 0; }
.sim__dl > div { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--hair); }
.sim__dl dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.sim__dl dd { margin: 2px 0 0; font: 600 1.25rem/1.25 var(--serif); }
.sim__big dd:not(.sim__sub) { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.sim__dl dd.sim__sub { font: 400 var(--fs-small)/1.4 var(--sans); color: var(--ink-2); }
.sim__warn { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 0; background: var(--paper-2); border-radius: var(--r-md); max-width: 46rem; }
.sim__warn + .agenti-note { margin-top: var(--sp-2); max-width: 46rem; }
.tgt { margin-top: var(--sp-8); }
.tgt__h { font: 700 clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem)/1.15 var(--serif); letter-spacing: -.02em; max-width: 22em; }
.tgt__l { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
.tgt__l li { display: grid; gap: 2px; padding-top: var(--sp-2); border-top: 2px solid var(--ink); }
.tgt__e { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.tgt__n { font: 700 clamp(2.25rem, 1.8rem + 2vw, 3.25rem)/1.05 var(--serif); letter-spacing: -.03em; color: var(--accent); }
.tgt__f { color: var(--ink-2); font-size: var(--fs-small); }

/* vantaggi veri, contratto, chiusura */
.perks { display: grid; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-4); }
.perk h3 { font: 700 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.15 var(--serif); letter-spacing: -.02em; margin-bottom: 6px; }
.perk p { color: var(--ink-2); max-width: 30rem; }
.sec--paper2 .who { margin-top: var(--sp-6); }
.apply .share { margin-top: var(--sp-1); }

@media (min-width: 720px) {
  .stair { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 8px; }
  .stair__b { --pad: 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: calc(120px + var(--p) * 230px); padding: 16px var(--pad) 18px; }
  .stair__bar { display: none; }
  .stair__amt { order: 3; margin-top: auto; font-size: clamp(2.25rem, 1.2rem + 2.8vw, 3.5rem); }
  .stair__amt small { text-align: left; }
  .stair__r { order: 2; }
  .lvls { min-height: 4em; }
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gain:last-child { grid-column: 1 / -1; }
  .scns, .tgt__l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .sim { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (min-width: 1024px) {
  .gains { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gain { grid-column: span 2; }
  .gain:nth-child(n+4) { grid-column: span 3; }
}

/* rifinitura: schede per tono, non per bordo */
.gain, .sim__in, .sim__out { background: var(--paper-2); border: 0; box-shadow: none; }
.sec--paper2 :is(.gain, .sim__in, .sim__out) { background: var(--field); }
.sim__meter i.is-on { background: var(--logo-green); }
.gain.gain--lead, .sec--paper2 .gain.gain--lead { background: var(--leaf); }
.gain--lead .gain__k, .gain--lead .gain__n small, .gain--lead p:last-child { color: var(--on-leaf-2); }
.gain--lead .gain__n { color: var(--on-leaf); }
.callout .pricing tbody th { font-size: 1rem; width: 30%; line-height: 1.3; letter-spacing: 0; }

/* "Gettone per ogni pacchetto": la riga che si apre deve sembrare un pulsante, con l'azione scritta (Apri / Chiudi) */
.more { border-top: 0; }
.more > summary { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 20px; border-radius: var(--r-pill); background: rgba(245, 249, 250, .14); color: var(--on-night); list-style: none; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "Apri \25BE"; margin-left: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--on-night); color: var(--night); font-size: .875rem; font-weight: 700; }
.more[open] > summary::after { content: "Chiudi \25B4"; }
@media (hover: hover) { .more > summary:hover { background: rgba(245, 249, 250, .24); } }
.more > summary:active { transform: scale(.98); }
.more[open] > summary { margin-bottom: var(--sp-3); }

/* indicazione breve sopra gli elementi che si toccano (fasce, scenari) */
.tap-hint { margin: var(--sp-3) 0 var(--sp-1); font-size: .9375rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.tap-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--logo-green); flex: none; }
.sec--night .tap-hint { color: var(--on-night-2); }