/*
  TriPago | pagina magnete /per-i-negozianti/. Solo componenti NUOVI (prefisso mg-); il resto arriva da tokens/base/components/moduli.
  Motion: reveal gia' in base.css (.reveal, .reveal--stagger); qui solo transform/opacity. Tutto spento con prefers-reduced-motion.
*/

/* ---------- 1 hook ---------- */
.mg-hook { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) clamp(3rem, 2rem + 5vw, 7rem); background: var(--paper); overflow: clip; }
.mg-hook__grid { display: grid; gap: var(--sp-8); align-items: center; }
.mg-hook h1 { font-size: clamp(2.25rem, 1.6rem + 3.4vw, 4.25rem); line-height: 1.04; max-width: 16ch; }
.mg-hook .lead { margin-top: var(--sp-3); max-width: 34rem; }
@media (min-width: 960px) { .mg-hook__grid { grid-template-columns: 1.15fr .85fr; gap: var(--sp-6); } }

/* scena: UNA timeline di 9 s per tutti gli elementi. 0-10% espositore, 14-30% scansione, 28-40% telefono con due rate (3 e 4),
   56% si evidenzia "4 rate" (bordo, radio, tinta; l'altra si attenua) e resta fino alla fine, 80% compare "Pagata", 93% dissolvenza.
   Stato base (reduced motion, senza animazione) = stato finale leggibile. Solo transform e opacity. Importi: esempio su 300 euro (data.json rate.importo_esempio). */
.mg-art { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1.05; margin-inline: auto; --mg-t: 9s; animation: mg-scene var(--mg-t) linear infinite; }
.mg-art__stand { position: absolute; left: 0; bottom: 6%; width: 42%; display: grid; justify-items: center; animation: mg-stand var(--mg-t) var(--ease) infinite; }
.mg-art__qr { position: relative; width: 100%; aspect-ratio: 1; padding: 11%; background: var(--field); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-2); color: var(--night); overflow: hidden; }
.mg-art__qr svg { display: block; width: 100%; height: 100%; }
.mg-art__beam { position: absolute; inset: 0; background: transparent; border-bottom: 3px solid var(--sky); transform: translateY(-100%); opacity: 0; animation: mg-beam var(--mg-t) var(--ease-io, ease-in-out) infinite; }
.mg-art__foot { display: block; width: 62%; height: 12px; margin-top: -1px; background: var(--paper-2); border: 1px solid var(--hair); border-radius: 0 0 var(--r-md) var(--r-md); }
.mg-art__phone { position: absolute; right: 0; top: 2%; width: 56%; height: 90%; padding: 7% 6%; display: flex; flex-direction: column; gap: 10px; background: var(--field); color: var(--ink);
  border: 7px solid var(--night); border-radius: 32px; box-shadow: var(--shadow-2); animation: mg-phone var(--mg-t) var(--ease) infinite; }
.mg-art__notch { display: block; align-self: center; width: 28%; height: 6px; border-radius: 3px; background: var(--hair-strong); }
.mg-art__top { font: 700 .9375rem/1.2 var(--font); text-align: center; margin-bottom: 2px; }
.mg-art__opt { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 10px; border: 1.5px solid var(--hair-strong); border-radius: var(--r-md); }
.mg-art__opt--a { animation: mg-dim var(--mg-t) var(--ease) infinite; }
.mg-art__radio { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-2); display: block; }
.mg-art__radio u { position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); animation: mg-dot var(--mg-t) var(--ease) infinite; }
.mg-art__t { display: grid; gap: 1px; min-width: 0; }
.mg-art__t b { font: 700 1rem/1.15 var(--font); }
.mg-art__t small { font: 500 .8125rem/1.2 var(--font); color: var(--ink-2); }
.mg-art__ring { position: absolute; inset: -2px; border: 3px solid var(--brand); border-radius: calc(var(--r-md) + 2px); background: rgba(20, 114, 166, .10); pointer-events: none; animation: mg-ring var(--mg-t) var(--ease) infinite; }
.mg-art__opt--b .mg-art__radio { border-color: var(--brand); }
.mg-art__ok { margin-top: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: #0e7a32; color: #fff; font: 700 .9375rem/1 var(--font); animation: mg-ok var(--mg-t) var(--ease) infinite; }
.mg-art__ok svg { width: 16px; height: 16px; flex: none; }
.mg-art__ex { align-self: center; font: 500 .75rem/1.2 var(--font); color: var(--ink-2); }
@keyframes mg-scene { 0% { opacity: 0; } 3%, 93% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes mg-stand { 0%, 2% { opacity: 0; transform: translateY(18px); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes mg-beam { 0%, 14% { opacity: 0; transform: translateY(-100%); } 15% { opacity: 1; transform: translateY(-100%); } 30% { opacity: 1; transform: translateY(0); } 32%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes mg-phone { 0%, 28% { opacity: 0; transform: translateX(28px); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes mg-ring { 0%, 52% { opacity: 0; transform: scale(.96); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes mg-dot { 0%, 52% { transform: scale(.6); opacity: 0; } 58%, 100% { transform: scale(1); } }
@keyframes mg-dim { 0%, 52% { opacity: 1; } 58%, 100% { opacity: .55; } }
@keyframes mg-ok { 0%, 76% { opacity: 0; transform: translateY(8px); } 82%, 100% { opacity: 1; transform: none; } }
.mg-hook__how { margin-top: var(--sp-2); max-width: 34rem; color: var(--ink-2); }

/* ---------- blocchi comuni ---------- */
.mg-head { max-width: 46rem; margin-bottom: var(--sp-6); }
.mg-head .lead { margin-top: var(--sp-2); }
.mg-split { display: grid; gap: var(--sp-6); }
.mg-split__head .lead { margin-top: var(--sp-2); }
.mg-micro { margin-top: var(--sp-3); font-size: var(--fs-label); color: var(--ink-2); line-height: 1.5; }
.mg-cta { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.mg-help { margin-top: var(--sp-1); font-size: var(--fs-label); color: var(--ink-2); line-height: 1.5; }
@media (min-width: 960px) {
  .mg-split { grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; }
  .mg-split__head { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* ---------- 2 il momento perso: tre frasi grandi + frase finale ---------- */
.mg-scenes { display: grid; gap: var(--sp-3); }
.mg-scene { padding: var(--sp-4); background: var(--field); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-1); display: grid; gap: var(--sp-2); align-content: start; }
.mg-scene:nth-child(2) { background: var(--paper-2); }
.mg-scene p:not(.mg-q) { color: var(--ink-2); }
.mg-q { font: var(--w-display) clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem)/1.2 var(--font); letter-spacing: var(--ls-display); color: var(--ink); padding: var(--sp-2) var(--sp-3); background: var(--mint); border-radius: var(--r-md); }
.mg-big { margin-top: var(--sp-8); font: var(--w-display) clamp(2.25rem, 1.4rem + 4.2vw, 4.75rem)/1.04 var(--font); letter-spacing: var(--ls-display); color: var(--ink); max-width: 18ch; }
@media (min-width: 900px) { .mg-scenes { grid-template-columns: repeat(3, 1fr); } .mg-scene:nth-child(2) { margin-top: var(--sp-4); } .mg-scene:nth-child(3) { margin-top: var(--sp-8); } }

/* ---------- 3 svolta: calcolatore e tappe ---------- */
.mg-svolta__top { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 960px) { .mg-svolta__top { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.mg-calc { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-2); }
.sec--night .mg-calc h3 { color: var(--ink); margin-bottom: var(--sp-2); }
.mg-calc .mg-help { color: var(--ink-2); }
.mg-calc__in { display: flex; align-items: center; gap: 10px; }
.mg-calc__in input { flex: 1; min-width: 0; min-height: 60px; padding: 0 16px; background: var(--field); color: var(--ink); border: 1px solid var(--ink-2); border-radius: var(--r-md); font: 700 1.75rem/1 var(--font); }
.mg-calc__in input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--ink); }
.mg-calc__in input[aria-invalid="true"] { border: 2px solid var(--error); }
.mg-calc__in span { font-weight: 600; color: var(--ink-2); }
.mg-calc__out { margin-block: var(--sp-3); padding: var(--sp-3); background: var(--paper-2); border-radius: var(--r-md); min-height: 9rem; }
.mg-calc__t { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); margin-bottom: var(--sp-1); }
.mg-calc__list { display: grid; gap: 8px; }
.mg-calc__list li { font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.75rem)/1.2 var(--font); letter-spacing: -.02em; padding-bottom: 8px; border-bottom: 1px solid var(--hair); animation: mg-in .35s var(--ease) both; }
.mg-calc__list li:last-child { border-bottom: 0; }
.mg-calc__list li b { color: var(--accent); }
@keyframes mg-in { from { opacity: 0; transform: translateY(6px); } }
.mg-tappe { margin-top: var(--sp-8); display: grid; gap: var(--sp-4); counter-reset: t; position: relative; }
.mg-tappe li { position: relative; padding: var(--sp-3) var(--sp-3) var(--sp-3) 76px; background: var(--night-2); border-radius: var(--r-lg); counter-increment: t; }
.mg-tappe li::before { content: counter(t); position: absolute; left: var(--sp-3); top: var(--sp-3); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--sky); color: var(--night); font-weight: 700; }
.mg-tappe h3 { margin-bottom: 6px; }
.mg-tappe p { color: var(--on-night-2); }
.mg-tappe .marker { display: inline-block; margin-top: 6px; }
@media (min-width: 960px) {
  .mg-tappe { grid-template-columns: repeat(3, 1fr); }
  .mg-tappe li { padding: 84px var(--sp-3) var(--sp-3); }
  .mg-tappe li + li::after { content: ""; position: absolute; left: calc(-1 * var(--sp-4)); top: calc(var(--sp-3) + 22px); width: var(--sp-4); border-top: 2px dashed var(--sky-night); }
}
.sec--night .mg-cta .hero__tel { color: var(--on-night); }

/* ---------- 4 dopo, per te: numeri grandi ---------- */
.mg-num { display: grid; gap: var(--sp-3); }
.mg-num article { padding: var(--sp-4); border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--field); display: grid; align-content: start; gap: var(--sp-1); }
.mg-num p { color: var(--ink-2); }
.mg-num__v { font: var(--w-display) clamp(2rem, 1.5rem + 2.4vw, 3.5rem)/1 var(--font) !important; letter-spacing: var(--ls-display); color: var(--accent) !important; overflow-wrap: anywhere; }
.mg-num__a { background: var(--sky) !important; border-color: transparent !important; }
.mg-num__a h3, .mg-num__a p, .mg-num__a .mg-num__v { color: var(--night) !important; }
.mg-num__b { background: var(--paper-2) !important; }
@media (min-width: 720px) {
  .mg-num { grid-template-columns: repeat(6, 1fr); }
  .mg-num article { grid-column: span 3; }
  .mg-num__a { grid-column: span 4 !important; }
  .mg-num article:nth-child(2) { grid-column: span 2; }
  .mg-num__b { grid-column: span 4 !important; }
  .mg-num article:nth-child(3) { grid-column: span 2; }
}

/* ---------- 5 costi guidati ---------- */
.mg-formule { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.mg-formula { padding: var(--sp-4); background: var(--field); border-radius: var(--r-lg); box-shadow: var(--shadow-1); border-top: 0; }
.mg-formula--b { border-top-color: var(--logo-green); }
.mg-formula h3 { margin-bottom: var(--sp-1); }
.mg-formula b { font-size: 1.25em; color: var(--accent); }
@media (min-width: 720px) { .mg-formule { grid-template-columns: 1fr 1fr; } }
.mg-costi__box { max-width: none; }
.mg-costi__box h2 { font-size: var(--fs-h3); }
.mg-sintesi { margin-top: var(--sp-4); display: grid; gap: 6px; font-weight: 600; }
.mg-sintesi:empty { display: none; }
.mg-promo { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--mint); border-left: 0; border-radius: var(--r-md); display: grid; gap: var(--sp-1); }
.mg-promo__t { font: var(--w-display) clamp(1.375rem, 1.1rem + 1.2vw, 2rem)/1.2 var(--font); letter-spacing: var(--ls-display); }
.mg-promo[hidden] { display: none; }
.mg-promo[data-promo-medium-off] [data-promo-medium] { display: none; }
.mg-prov { margin-top: var(--sp-4); max-width: 46rem; color: var(--ink-2); }

/* ---------- provider ---------- */
.mg-pcols { display: grid; gap: var(--sp-3); }
.mg-pcols article { padding: var(--sp-4); background: var(--field); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.mg-pcols h3 { margin-bottom: var(--sp-2); }
.mg-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); counter-reset: pv; }
.mg-plist li { position: relative; padding-left: 32px; color: var(--ink-2); }
ol.mg-plist li { counter-increment: pv; }
ol.mg-plist li::before { content: counter(pv); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--night); color: var(--on-night); font-size: var(--fs-label); font-weight: 600; display: grid; place-items: center; }
ul.mg-plist li::before { content: ""; position: absolute; left: 0; top: .7em; width: 16px; border-top: 2px solid var(--logo-blue); }
.mg-pv { margin-top: var(--sp-4); max-width: 46rem; }
.mg-ptab { width: 100%; margin-top: var(--sp-2); border-collapse: collapse; background: var(--field); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
.mg-ptab th, .mg-ptab td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.mg-ptab thead th { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; color: var(--ink-2); background: var(--paper); }
.mg-ptab tbody tr:last-child > * { border-bottom: 0; }
.mg-ptab img { display: block; width: auto; height: 32px; }
.mg-ptab b { font-size: var(--fs-lead, 1.125rem); }
@media (max-width: 559px) { .mg-ptab thead { display: none; } .mg-ptab tr { display: block; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hair); } .mg-ptab tbody tr:last-child { border-bottom: 0; } .mg-ptab th, .mg-ptab td { display: block; padding: 4px 0; border: 0; } .mg-ptab td::before { content: attr(data-label) ": "; color: var(--ink-2); font-size: var(--fs-label); } }
/* ---------- 6 prova ---------- */
.mg-prova .kpis { margin-top: var(--sp-2); }
.mg-cases { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.mg-case { padding: var(--sp-4); background: var(--field); border: 1px dashed var(--hair-strong); border-radius: var(--r-lg); display: grid; gap: var(--sp-2); align-content: start; }
.mg-case .marker { margin: 0; padding: 6px 10px; background: var(--marker-bg); color: var(--marker-ink); border-radius: var(--r-sm); font-size: var(--fs-label); line-height: 1.5; }
@media (min-width: 720px) { .mg-cases { grid-template-columns: 1fr 1fr; } }
.mg-prova .mg-micro a { text-decoration: underline; }
.mg-obj .mg-micro a { text-decoration: underline; }
@media (min-width: 760px) { .mg-pcols { grid-template-columns: 1fr 1fr; } }
/* ---------- 6 obiezioni ---------- */
.mg-obj .faq__a a { text-decoration: underline; }

/* ---------- 7 chiusura ---------- */
.mg-close__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 960px) { .mg-close__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.mg-close .form-box { background: var(--paper); color: var(--ink); padding: var(--sp-4); }
.mg-close .form-box h3 { color: var(--ink); }
.mg-close .form-box :focus-visible { outline-color: var(--accent); }
.mg-close .canale__btns small { display: block; margin-top: 4px; font-weight: 400; }

/* CTA fissa mobile: nascosta finche' l'hook e' in vista (canale.js la nasconde ancora quando la scheda e' visibile) */
.sticky-cta[data-wait] { transition: transform .3s var(--ease), opacity .3s var(--ease); }
.sticky-cta[data-wait="1"] { transform: translateY(110%); opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mg-art *, .mg-art, .mg-calc__list li, .sticky-cta[data-wait] { animation: none !important; transition: none !important; }
}

.mg-reti { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid rgba(10, 46, 77, .15); }
.mg-reti a { text-decoration: underline; }

/* rifinitura: schede per tono, non per bordo */
.mg-scene, .mg-num article, .mg-pcols article, .mg-case, .mg-art__qr { border: 0; box-shadow: none; }
.mg-scene, .mg-pcols article, .mg-case { background: var(--paper-2); }
.sec--paper2 :is(.mg-scene, .mg-pcols article, .mg-case) { background: var(--field); }
.mg-hook { background: var(--paper); }
.mg-hook h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); max-width: 28ch; }