/* ============================================================
   Audilis · Prima / Dopo guidato dallo scroll.
   Componente autonomo: funziona sulle pagine generate (audilis.css)
   e sulle landing storiche (site.css). Prefissi: pd- (motore), mk- (schermate).
   --p  avanzamento della sezione (titoli, chiusura)
   --m  trasformazione Prima (0) -> Dopo (1) delle schermate e dello slider
   Senza JS o con movimento ridotto: sezione statica sul Dopo, titoli in sequenza.
   ============================================================ */
.pd { --m: 1; --p: 1; --navy: #070d17; --navy2: #0a192f; --blue: #0a3d91; --blue2: #2f6fe0; --gold: #e8a020; --gold-soft: #ffcc76; --ok: #0a7c42; --bad: #b5402c;
  position: relative; isolation: isolate; overflow-x: clip; margin: 0; padding: 0; color: #e8eef8; background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; text-align: left; }
.pd.light { color: #132436; background: linear-gradient(180deg, #f6f7f9 0%, #e9eef5 100%); }
.pd *, .pd *::before, .pd *::after { box-sizing: border-box; }
.pd :where(p, h1, h2, h3, ul, ol, dl, dd) { margin: 0; padding: 0; }
.pd ul, .pd ol { list-style: none; }
.pd-anchor { position: absolute; top: 0; }

/* ── Impaginazione della sezione ── */
.pd-pin { display: flex; flex-direction: column; gap: 14px; padding: 40px 16px 48px; }
.pd-head { width: 100%; max-width: 1060px; margin: 0 auto; text-align: center; }
.pd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 12px !important; }
.light .pd-eyebrow { color: var(--blue); }
.pd-titles { display: grid; gap: 18px; }
.pd-t { font-size: clamp(19px, 1.85vw, 28px); line-height: 1.22; letter-spacing: -.02em; font-weight: 500; color: #fff; }
.pd-t strong { color: var(--gold-soft); font-weight: 700; }
.pd-t.big { font-size: clamp(28px, 3.3vw, 50px); font-weight: 700; line-height: 1.06; }
.pd-t.big strong { color: #fff; }
.light .pd-t { color: #0b2a5c; }
.light .pd-t strong, .light .pd-t.big strong { color: var(--blue); }
.pd-stage { position: relative; width: 100%; max-width: 1140px; height: var(--sh, 470px); margin: 0 auto; }
.pd-layer { position: absolute; inset: 0; }
.pd-demo { position: absolute; right: 0; bottom: -22px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(232,238,248,.55); }
.light .pd-demo { color: #6a7888; }
.pd-sr { max-width: 860px; margin: 26px auto 0 !important; font-size: 15px; color: rgba(232,238,248,.8); text-align: center; }
.light .pd-sr { color: #516171; }
.pd-note { font-size: 13px; color: rgba(232,238,248,.7); margin-top: 12px !important; }
.light .pd-note { color: #516171; }

/* Pulsanti (stessi testi e colori del sito, autonomi per le landing) */
.pd-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.pd-cta { display: flex; flex-direction: column; align-items: center; max-width: 290px; }
.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 14px 24px; background: var(--gold); color: #132436; border: 1px solid var(--gold); font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s, transform .2s; }
.pd-btn:hover { background: var(--gold-soft); transform: translateY(-2px); }
.pd-btn.call { background: #fff; border-color: #fff; color: var(--blue); }
.pd-btn.call:hover { background: #e9eff9; }
.light .pd-btn.call { background: var(--blue); border-color: var(--blue); color: #fff; }
.light .pd-btn.call:hover { background: #072d6a; }
.pd-cta small { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: rgba(232,238,248,.7); }
.light .pd-cta small { color: #516171; }
.pd-link { display: inline-block; margin-top: 16px; padding: 6px 0; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 2px solid var(--gold); }
.light .pd-link { color: var(--blue); }
.pd :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ── Slider Prima / Dopo: si muove con lo scroll, si trascina e si comanda da tastiera ── */
.pd-slider { display: none; align-items: center; gap: 10px; width: 100%; max-width: 680px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.pd-js .pd-slider { display: flex; }
.pd-sl { flex: none; background: none; border: 0; padding: 10px 6px; min-height: 44px; font: 700 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: inherit; cursor: pointer; transition: opacity .2s; }
.pd-sl.b { opacity: calc(.45 + .55 * (1 - var(--m))); color: #f3b4a4; }
.pd-sl.a { opacity: calc(.45 + .55 * var(--m)); color: #9cc1ff; }
.light .pd-sl.b { color: var(--bad); }
.light .pd-sl.a { color: var(--blue); }
.pd-sl i { font-style: normal; font-weight: 500; opacity: .8; }
.pd-track { position: relative; flex: 1 1 auto; height: 44px; cursor: grab; touch-action: pan-y; }
.pd-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255,255,255,.16); }
.light .pd-track::before { background: rgba(10,61,145,.14); }
.pd-fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; width: calc(var(--m) * 100%); background: linear-gradient(90deg, #d9644a, var(--gold) 55%, var(--blue2)); }
.pd-thumb { position: absolute; top: 50%; left: calc(var(--m) * 100%); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(232,160,32,.45), 0 4px 12px rgba(0,0,0,.3); }
.pd-track:active { cursor: grabbing; }

/* ── Modalità guidata dallo scroll ── */
/* Dimostrazione ferma a schermo: il palco è alto quanto il contenuto (misurato da pd.js), il blocco si centra
   nello spazio libero e .pd-space dà la durata dello scroll. Finita la trasformazione la sezione successiva segue subito. */
.pd-space { display: none; }
.pd-live .pd-space { display: block; height: var(--scroll, 90vh); }
.pd-live .pd-pin { position: sticky; top: var(--stick, var(--pd-top, 0px)); padding: 2.4vh 16px 3.2vh; gap: 1.6vh; }
.pd-live .pd-titles { display: grid; }
.pd-live .pd-t { grid-area: 1 / 1; align-self: center; --in: clamp(0, (var(--p) - var(--ts)) / .035, 1); --out: clamp(0, (var(--te) - var(--p)) / .035, 1);
  opacity: min(var(--in), var(--out)); transform: translateY(calc((1 - var(--in)) * 22px - (1 - var(--out)) * 22px)); }
.pd-live .pd-layer { right: auto; bottom: auto; width: calc(100% / var(--ls, 1)); height: calc(100% / var(--ls, 1)); transform: scale(var(--ls, 1)); transform-origin: 0 0; }
.pd-live .pd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; }

/* Variante "di passaggio": non si ferma, si trasforma mentre attraversa lo schermo */
.pd.pass .pd-pin { padding: 56px 16px 64px; }

/* ── Movimento dei pezzi: lp = avanzamento locale tra --s e --e ── */
.pd .o, .pd .i, .pd .x, .pd .c, .pd .g { --lp: clamp(0, (var(--m) - var(--s, 0)) / (var(--e, 1) - var(--s, 0)), 1); }
.pd .o { opacity: calc(1 - var(--lp)); transform: translate(calc(var(--dx, 0px) * var(--lp)), calc(var(--dy, 0px) * var(--lp))) rotate(calc(var(--r0, 0deg) + var(--r, 0deg) * var(--lp))) scale(calc(1 - var(--sc, 0) * var(--lp))); }
.pd .i { opacity: var(--lp); transform: translate(calc(var(--dx, 0px) * (1 - var(--lp))), calc(var(--dy, 22px) * (1 - var(--lp)))) scale(calc(1 - var(--sc, 0) * (1 - var(--lp)))); }
.pd .x { position: relative; opacity: calc(1 - .5 * var(--lp)); }
.pd .x::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; margin-top: -1px; background: #e0533c; transform: scaleX(var(--lp)); transform-origin: 0 50%; }
.pd .c { max-width: calc((1 - var(--lp)) * var(--w, 180px)); opacity: calc(1 - var(--lp)); overflow: hidden; white-space: nowrap; }
.pd .g { transform: scaleY(var(--lp)); transform-origin: 50% 0; }
.pd-stage, .pd-stage * { pointer-events: none; }

/* ── Kit schermate ── */
.mk-win { position: absolute; display: flex; flex-direction: column; background: #fff; color: #1d2b3a; border-radius: 10px; overflow: hidden; font-size: 13px; line-height: 1.38; box-shadow: 0 30px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.07); }
.light .mk-win { box-shadow: 0 24px 50px rgba(7,45,106,.16), 0 0 0 1px rgba(7,45,106,.08); }
.mk-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eef1f5; border-bottom: 1px solid #dde3ea; font-size: 12px; font-weight: 700; color: #4a5a6b; white-space: nowrap; overflow: hidden; }
.mk-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #d0d6dd; }
.mk-bar i:first-child { background: #ec6a5e; } .mk-bar i:nth-child(2) { background: #f4bf4f; } .mk-bar i:nth-child(3) { background: #61c554; margin-right: 6px; }
.mk-bar .r { margin-left: auto; font-weight: 500; color: #7a8796; }
.mk-body { flex: 1 1 auto; min-height: 0; padding: 12px 14px; overflow: hidden; }
.mk-old { border-radius: 2px; font-family: Tahoma, Verdana, 'Segoe UI', sans-serif; font-size: 12px; background: #f0f0f0; }
.mk-old .mk-bar { height: 26px; background: linear-gradient(#5b7fb8, #3c5f99); color: #fff; border: 0; }
.mk-old .mk-bar i { display: none; }
.mk-new .mk-bar { background: #fff; color: var(--blue); }
.mk-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6a7888; margin-bottom: 6px !important; }
.mk-title { font-size: 15px; font-weight: 700; color: #0b2a5c; margin-bottom: 8px !important; }
.mk-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; background: #e9eff9; color: var(--blue); white-space: nowrap; }
.mk-tag.ok { background: #e3f4ea; color: var(--ok); }
.mk-tag.bad { background: #fbe6e1; color: var(--bad); }
.mk-tag.gold { background: #fff1d6; color: #7a5208; }
.mk-tag.grey { background: #eceff3; color: #5d6b7a; }
.mk-btn { display: inline-block; padding: 5px 11px; border: 1px solid #aab3bd; background: #e9ecef; font-size: 12px; font-weight: 700; color: #333; border-radius: 3px; }
.mk-btn.xl { background: #1f7a3a; border-color: #1f7a3a; color: #fff; }
.mk-btn.pri { background: var(--blue); border-color: var(--blue); color: #fff; border-radius: 6px; padding: 7px 14px; }
.mk-banner { padding: 7px 10px; margin-bottom: 10px; background: #fff3cd; border: 1px solid #e9c46a; color: #6b4a00; font-weight: 700; font-size: 12px; }
.mk-fields { display: grid; gap: 5px; }
.mk-f { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; align-items: center; }
.mk-f > span { font-size: 11.5px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-in { height: 22px; padding: 2px 6px; border: 1px solid #a9b1ba; background: #fff; font-size: 11.5px; color: #333; white-space: nowrap; overflow: hidden; }
.mk-in.req { border-color: #d9534f; background: #fff4f2; color: #b5402c; }
.mk-foot { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.mk-err { font-size: 11.5px; color: var(--bad); font-weight: 700; }
.mk-postit { position: absolute; width: 158px; padding: 12px 12px 14px; background: #ffe680; color: #3b3200; font: 600 13.5px/1.3 'Segoe Print', 'Bradley Hand', 'Comic Neue', cursive; box-shadow: 0 12px 24px rgba(0,0,0,.32); }
.mk-postit.pink { background: #ffc8d6; color: #4a1222; }
.mk-postit.paper { background: #fbfaf5; color: #333; background-image: repeating-linear-gradient(transparent 0 19px, #d7e3f3 19px 20px); }
.mk-list { display: grid; gap: 0; }
.mk-list > li { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #e8ecf1; white-space: nowrap; overflow: hidden; }
.mk-list > li > span:first-child { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.mk-list b { font-weight: 700; }
.mk-unread { font-weight: 700; color: #0b2a5c; }
.mk-sheet { width: 100%; border-collapse: collapse; font-size: 11.5px; font-family: Calibri, 'Segoe UI', sans-serif; table-layout: fixed; }
.mk-sheet th, .mk-sheet td { border: 1px solid #d4d9df; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.mk-sheet th { background: #eef1f4; color: #555; font-weight: 700; }
.mk-sheet .q { background: #fff2c2; color: #8a5a00; }
.mk-sheet .red { background: #fde2dc; color: var(--bad); }
.mk-xls .mk-bar { background: #1f7a3a; color: #fff; border: 0; }
.mk-xls .mk-bar i { display: none; }
.mk-bars { display: grid; gap: 7px; }
.mk-bars > li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 30px; gap: 8px; align-items: center; font-size: 12.5px; }
.mk-bars .bar { height: 8px; background: #edf1f6; border-radius: 4px; overflow: hidden; }
.mk-bars .bar > i { display: block; height: 100%; width: var(--w); background: var(--blue); border-radius: 4px; }
.mk-bars .mk-out { opacity: .55; }
.mk-bars .mk-out .bar > i { background: #9aa7b6; }
.mk-bars .why { grid-column: 1 / -1; margin-top: -4px; font-size: 11px; color: #7a5208; }
.mk-dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; font-size: 12.5px; }
.mk-dl dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6a7888; padding-top: 2px; }
.mk-dl dd { margin: 0; color: #1d2b3a; }
.mk-why { margin-top: 10px !important; padding: 9px 11px; background: #fff5df; border-left: 3px solid var(--gold); font-size: 12.5px; color: #3b2c06; }
.mk-why b { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #7a5208; margin-bottom: 2px; }
.mk-ok { color: var(--ok); font-weight: 700; }
.mk-ai { background: linear-gradient(180deg, #0d2350, #0a3d91); color: #e8eef8; }
.mk-ai .mk-bar { background: rgba(255,255,255,.06); color: #ffcc76; border-bottom-color: rgba(255,255,255,.12); }
.mk-ai .mk-h { color: #9fb6dc; }
.mk-ai .mk-tag { background: rgba(255,255,255,.12); color: #fff; }
.mk-ai .mk-tag.gold { background: var(--gold); color: #132436; }
.mk-ai .mk-btn.pri { background: var(--gold); border-color: var(--gold); color: #132436; }
.mk-ai p, .mk-ai li { color: #dbe6f6; }
.mk-tl { display: grid; gap: 0; }
.mk-tl > li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 0 0 10px; }
.mk-tl > li::before { content: ''; position: absolute; left: 10px; top: 18px; bottom: -2px; width: 2px; background: #dbe3ee; }
.mk-tl > li:last-child::before { display: none; }
.mk-tl .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #e9eff9; color: var(--blue); position: relative; z-index: 1; }
.mk-tl .dot.ok { background: var(--ok); color: #fff; }
.mk-tl .dot.now { background: var(--gold); color: #132436; }
.mk-tl b { display: block; font-size: 13px; color: #0b2a5c; }
.mk-tl small { display: block; font-size: 11.5px; color: #6a7888; }
.mk-strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.light .mk-strip { background: #fff; border-color: #dbe1e8; }
.mk-strip .lbl { flex: none; display: grid; margin-right: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9fb6dc; }
.mk-strip .lbl > span { grid-area: 1 / 1; }
.mk-strip .mk-chip { flex: none; display: inline-flex; align-items: center; height: 28px; font-size: 12px; font-weight: 700; color: #e8eef8; white-space: nowrap; }
.mk-strip .mk-chip > span { padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.1); }
.mk-strip .mk-chip > span::after { content: none; }
.mk-strip .mk-chip + .chip::before { content: '\203A'; margin: 0 6px; color: #7f93b5; }
.mk-strip .mk-chip.c + .chip::before, .mk-strip .mk-chip.c::before { }
.mk-strip .keep > span { background: rgba(47,111,224,.35); }

/* ═════ Schermata: apertura home (paradigma) ═════ */
.mk-hero .erp { left: 17%; top: 0; width: 50%; }
.mk-hero .p1 { left: 1%; top: 4%; --r0: -6deg; }
.mk-hero .p2 { left: 3%; top: 46%; --r0: 5deg; }
.mk-hero .p3 { left: 54%; top: 58%; --r0: -4deg; z-index: 3; }
.mk-hero .mail { right: 0; top: 0; width: 31%; height: 46%; }
.mk-hero .xls { right: 2%; top: 49%; width: 29%; bottom: 68px; }
.mk-hero .app { left: 3%; right: 3%; top: 0; }
.mk-app { display: grid; grid-template-columns: 170px minmax(0, 1fr) 290px; height: 100%; }
.mk-side { padding: 12px 10px; background: #f4f7fb; border-right: 1px solid #e3e8ef; display: grid; align-content: start; gap: 2px; }
.mk-side > span { padding: 7px 10px; border-radius: 6px; font-size: 13px; color: #42526a; white-space: nowrap; }
.mk-side > span.on { background: var(--blue); color: #fff; font-weight: 700; }
.mk-side .k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8796a8; padding: 4px 10px 6px; }
.mk-main { padding: 14px 18px; overflow: hidden; }
.mk-aside { padding: 14px 16px; border-left: 1px solid #e3e8ef; overflow: hidden; }
.mk-read { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.mk-prop { padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; margin-bottom: 12px !important; }

/* ═════ Schermata: Export ═════ */
.mk-exp .budget { left: 0; top: 2%; width: 29%; }
.mk-exp .csv { left: 31%; top: 0; width: 39%; }
.mk-exp .calls { right: 0; top: 8%; width: 28.5%; }
.mk-exp .step4 { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mk-crit-line { margin-bottom: 10px !important; padding: 6px 8px; border-radius: 6px; background: #eef3fa; font-size: 11.5px; font-weight: 700; color: #0a3d91; }
.mk-exp .step4 > .mk-dk { position: relative; }
.mk-exp .step4 .mk-win { position: relative; }
.mk-step { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; }
.mk-crit { display: grid; gap: 6px; }
.mk-crit > li { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 6px; align-items: center; font-size: 12.5px; padding-bottom: 6px; border-bottom: 1px solid #eef1f5; }
.mk-crit > li b { justify-self: end; color: var(--blue); }
.mk-crit small { grid-column: 1 / -1; color: #6a7888; font-size: 11px; margin-top: -3px; }
.mk-tabs { display: none; }

/* ═════ Schermata: CRM ═════ */
.mk-crm .form { left: 0; top: 0; width: 54%; }
.mk-crm .form .mk-fields { grid-template-columns: 1fr 1fr; column-gap: 14px; }
.mk-crm .form .mk-f { grid-template-columns: 96px minmax(0, 1fr); }
.mk-crm .chat { right: 0; top: 0; width: 40%; background: #ece5dd; }
.mk-crm .chat .mk-bar { background: #075e54; color: #fff; border: 0; }
.mk-crm .chat .mk-bar i { display: none; }
.mk-bub { max-width: 88%; margin-bottom: 7px !important; padding: 6px 9px; border-radius: 8px; background: #fff; font-size: 12.5px; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.mk-bub.me { margin-left: auto; background: #dcf8c6; }
.mk-bub b { display: block; font-size: 11px; color: #075e54; }
.mk-crm .note { right: 4%; top: 210px; width: 34%; --r0: 2deg; }
.mk-crm .graph { left: 0; top: 0; width: 55%; }
.mk-crm .voice { right: 0; top: 0; width: 43%; }
.mk-chain { display: grid; gap: 0; }
.mk-node { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 12px; border: 1px solid #dbe3ee; border-radius: 8px; background: #fff; }
.mk-node b { font-size: 13.5px; color: #0b2a5c; }
.mk-node small { grid-column: 1; font-size: 11.5px; color: #6a7888; }
.mk-node .mk-tag { grid-row: 1 / span 2; grid-column: 2; }
.mk-node.you { background: var(--gold); border-color: var(--gold); }
.mk-node.you b, .mk-node.you small { color: #132436; }
.mk-node.dec { background: var(--blue); border-color: var(--blue); }
.mk-node.dec b, .mk-node.dec small { color: #fff; }
.mk-node.dec .mk-tag { background: #fff; color: var(--blue); }
.mk-link { position: relative; height: 16px; margin-left: 22px; }
.mk-link::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(var(--lp, 1)); transform-origin: 50% 0; }
.mk-link > span { position: absolute; left: 12px; top: 0; font-size: 10.5px; color: #7a5208; white-space: nowrap; line-height: 16px; }
.mk-wave { display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 10px; border-radius: 18px; background: rgba(255,255,255,.1); }
.mk-wave .play { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); flex: none; position: relative; margin-right: 6px; }
.mk-wave .play::after { content: ''; position: absolute; left: 8px; top: 6px; border: 5px solid transparent; border-left: 8px solid #132436; border-right: 0; }
.mk-wave i { flex: 1 1 0; height: var(--h); max-width: 4px; border-radius: 2px; background: #9fb6dc; }
.mk-wave span { flex: none; margin-left: 8px; font-size: 11.5px; color: #dbe6f6; }
.mk-facts > li { position: relative; padding: 0 0 6px 16px; font-size: 12.5px; }
.mk-facts > li::before { content: '\2713'; position: absolute; left: 0; color: #6fd39b; font-weight: 700; }
.mk-task { padding: 10px 12px; border-radius: 8px; background: #fff; color: #132436; margin: 8px 0 10px !important; font-size: 12.5px; }
.mk-task b { display: block; color: #0b2a5c; font-size: 13.5px; }

/* ═════ Schermata: Audilia ═════ */
.mk-aud .seven { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; align-content: center; gap: 14px 12px; }
.mk-aud .seven .mk-win { position: relative; }
.mk-aud .seven .mk-win:nth-child(odd) { transform: rotate(-.6deg); }
.mk-aud .seven .mk-num { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #b5402c; color: #fff; font-size: 11px; }
.mk-seven-note { grid-column: 4; grid-row: 2; align-self: center; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--bad); border: 2px dashed rgba(181,64,44,.4); border-radius: 10px; background: rgba(255,255,255,.6); }
.mk-aud .obj { left: 0; right: 0; top: 0; height: 74px; }
.mk-aud .blocks { position: absolute; left: 0; right: 0; top: 88px; height: 118px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-aud .blocks .mk-win { position: relative; }
.mk-aud .tl { left: 0; right: 0; top: 220px; }
.mk-tlh { display: flex; align-items: flex-start; gap: 0; }
.mk-tlh > li { flex: 1 1 0; position: relative; padding: 0 8px 0 0; font-size: 12px; }
.mk-tlh > li::before { content: ''; position: absolute; left: 22px; right: 0; top: 10px; height: 2px; background: #dbe3ee; }
.mk-tlh > li:last-child::before { display: none; }
.mk-tlh .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.mk-tlh .dot.now { background: var(--gold); color: #132436; }
.mk-tlh b { display: block; color: #0b2a5c; font-size: 12.5px; }
.mk-tlh small { color: #6a7888; font-size: 11px; }
.mk-gone { font-size: 11.5px; color: #6a7888; margin-top: 8px !important; }
.mk-gone s { color: var(--bad); }

/* ═════ Schermate: landing export ═════ */
.mk-cont .meet { left: 6%; top: 2%; width: 44%; }
.mk-cont .pa { left: 54%; top: 8%; --r0: 4deg; }
.mk-cont .pb { left: 74%; top: 38%; --r0: -5deg; }
.mk-cont .pc { left: 56%; top: 62%; --r0: 3deg; }
.mk-cont .matrix { left: 4%; right: 4%; top: 0; }
.mk-mx { width: 100%; border-collapse: collapse; font-size: 13px; }
.mk-mx th, .mk-mx td { padding: 7px 8px; border-bottom: 1px solid #e8ecf1; text-align: left; white-space: nowrap; }
.mk-mx th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #6a7888; }
.mk-mx td.s { width: 30%; }
.mk-mx .sc { display: flex; align-items: center; gap: 8px; }
.mk-mx .sc i { display: block; height: 8px; width: var(--w); background: var(--blue); border-radius: 4px; }
.mk-mx tr.mk-out td { color: #8a96a3; }
.mk-mx tr.mk-out .sc i { background: #a9b4c1; }
.mk-mx .lv { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.lv.h { background: var(--ok); } .lv.m { background: var(--gold); } .lv.l { background: #c9542f; }
.mk-paese .fair { left: 4%; top: 2%; width: 50%; }
.mk-paese .em { right: 4%; top: 14%; width: 38%; }
.mk-paese .px { right: 10%; top: 250px; --r0: -3deg; }
.mk-paese .plan { left: 3%; right: 3%; top: 0; }
.mk-plan { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px; }
.mk-plan > div { min-width: 0; }
.mk-steps3 > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding-bottom: 9px; font-size: 12.5px; }
.mk-steps3 .n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; }
.mk-lead .csv { left: 4%; right: 30%; top: 0; }
.mk-lead .res { right: 2%; top: 20%; width: 26%; --r0: 3deg; }
.mk-lead .mk-cards { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.mk-lead .mk-cards .mk-win { position: relative; }

/* ═════ Schermata: metodo ═════ */
.mk-met .old { position: absolute; left: 0; right: 0; top: 26%; display: flex; align-items: center; justify-content: center; gap: 0; }
.mk-met .old .box { flex: 0 1 190px; padding: 14px; border-radius: 4px; background: #eceff3; border: 1px solid #c3cbd5; color: #3b4652; font-size: 13.5px; font-weight: 700; text-align: center; }
.mk-met .old .box small { display: block; margin-top: 4px; font-weight: 500; font-size: 11.5px; color: var(--bad); }
.mk-met .old .arr { flex: none; width: 34px; text-align: center; color: #8a96a3; font-size: 20px; }
.mk-met .old .box.end { background: #fbe6e1; border-color: #e7b9ae; color: var(--bad); }
.mk-met .new { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; align-content: start; padding-top: 4%; }
.mk-met .new .mk-win { position: relative; }
.mk-cut > li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 0; }
.mk-cut > li.x { width: max-content; max-width: 100%; }

/* Video di trasformazione (se presente /assets/hero-morph.mp4) */
.hero-scrub-video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.has-video .hero-scrub-video { display: block; }
.has-video .pd-layer { display: none; }

/* ── Introduzione dell'offerta (prima della dimostrazione) e collegamento dopo ── */
.pd-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px 56px; align-items: start; max-width: 1140px; margin: 0 auto; padding: 64px 16px 12px; }
.pd-h { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; color: #fff; }
.pd-h strong { color: var(--gold-soft); }
.light .pd-h { color: #0b2a5c; }
.light .pd-h strong { color: var(--blue); }
.pd-lead { margin-top: 16px !important; font-size: 17.5px; line-height: 1.55; color: rgba(232,238,248,.86); }
.light .pd-lead { color: #3b4b5c; }
.pd-points { display: grid; gap: 12px; margin-bottom: 22px !important; }
.pd-points li { padding-left: 14px; border-left: 3px solid var(--gold); font-size: 15px; line-height: 1.45; color: rgba(232,238,248,.8); }
.pd-points b { display: block; font-size: 15.5px; color: #fff; }
.pd-points a { margin-left: 6px; font-size: 13px; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.light .pd-points li { color: #3b4b5c; }
.light .pd-points b { color: #0b2a5c; }
.light .pd-points a { color: var(--blue); }
.pd-intro .pd-ctas, .pd-open .pd-ctas { justify-content: flex-start; }
.pd-intro .pd-cta, .pd-open .pd-cta { align-items: flex-start; }
.pd-intro .pd-note { margin-top: 14px !important; font-size: 13.5px; line-height: 1.5; max-width: 560px; }
.pd-after { padding: 6px 16px 44px; text-align: center; }
.pd-after .pd-link { margin-top: 0; }
.pd-after .pd-ctas { margin-top: 4px; }

/* ── Apertura della home ── */
.pd-open-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(40px, 7vh, 80px) 16px 24px; }
.pd-h1 { font-size: clamp(32px, 3.9vw, 54px); line-height: 1.05; letter-spacing: -.025em; font-weight: 700; color: #fff; }
.pd-h1 strong { color: var(--gold-soft); }
.pd-open .pd-lead { font-size: 18.5px; max-width: 620px; }
.pd-open .pd-ctas { margin-top: 26px; }
.pd-offers { display: grid; gap: 12px; }
.pd-offers a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.04); color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.pd-offers a:hover { background: rgba(255,255,255,.08); border-color: var(--gold); }
.pd-offers .n { grid-row: span 3; font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; line-height: 1.1; color: var(--gold); }
.pd-offers b { font-size: 18px; }
.pd-offers span:not(.n) { font-size: 14.5px; line-height: 1.45; color: rgba(232,238,248,.78); }
.pd-offers em { margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--gold-soft); }
.pd-open-note { max-width: 1180px; margin: 0 auto !important; padding: 0 16px 36px; font-size: 14px; color: rgba(232,238,248,.62); }

/* ── Schermate: sistema Audilia, imbuto Export ── */
.mk-sys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-blk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #cfdcef; border-radius: 6px; background: #f4f7fc; font-size: 12.5px; font-weight: 700; color: #0b2a5c; white-space: nowrap; }
.mk-blk.plan { border-style: dashed; background: #fff; color: #5d6b7a; }
.mk-funnel { margin-bottom: 8px !important; padding: 6px 8px; border-radius: 6px; background: #eef3fa; font-size: 11.5px; font-weight: 700; color: #0a3d91; }
.mk-funnel b { color: var(--gold); }

/* ── Barra di lettura e barra azioni su telefono ── */
.scroll-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.scroll-prog i { display: block; height: 100%; background: #e8a020; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
html:not(.pd-js) .scroll-prog { display: none; }
.pd-mbar { display: none; }
@media (max-width: 768px) {
  .pd-js .pd-mbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid #dbe1e8; box-shadow: 0 -8px 24px rgba(7,45,106,.12); transform: translateY(110%); visibility: hidden; transition: transform .3s, visibility .3s; font-family: 'DM Sans', system-ui, sans-serif; }
  .pd-js .pd-mbar.show { transform: none; visibility: visible; }
  .pd-mbar a { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 18px; font-size: 15px; font-weight: 700; text-decoration: none; background: #e8a020; color: #132436; }
  .pd-mbar a.call { background: #0a3d91; color: #fff; }
  .pd-mbar [hidden] { display: none !important; }
}

/* ══════════ Desktop medio ══════════ */
@media (max-width: 1100px) {
  .mk-app { grid-template-columns: 150px minmax(0, 1fr) 250px; }
  .mk-exp .step4 { gap: 10px; }
  .mk-dl { grid-template-columns: 80px minmax(0, 1fr); }
}

/* ══════════ Telefono e tablet stretto: schermate ridisegnate, non rimpicciolite ══════════ */
@media (max-width: 760px) {
  .pd-intro { grid-template-columns: 1fr; gap: 18px; padding: 36px 16px 4px; }
  .pd-h { font-size: 27px; }
  .pd-lead { font-size: 16px; margin-top: 12px !important; }
  .pd-points { gap: 10px; margin-bottom: 18px !important; }
  .pd-points li { font-size: 14.5px; }
  .pd-intro .pd-cta small, .pd-open .pd-cta small { display: block; text-align: left; }
  .pd-js .pd-live .pd-space { height: var(--scroll-m, var(--scroll)); }
  .pd-live .pd-stage { flex: 1 1 auto; height: auto; min-height: 0; }
  .pd-after { padding: 4px 16px 32px; }
  .pd-open-in { grid-template-columns: 1fr; gap: 26px; padding: 30px 16px 18px; }
  .pd-h1 { font-size: 31px; }
  .pd-open .pd-lead { font-size: 16.5px; }
  .pd-open .pd-ctas { margin-top: 20px; }
  .pd-offers a { padding: 13px 14px; }
  .pd-offers span:not(.n) { font-size: 14px; }
  .pd-open-note { padding-bottom: 28px; }
  .mk-aud .obj { height: auto; }
  .mk-sys { gap: 4px; }
  .mk-blk { padding: 3px 6px; font-size: 11px; gap: 4px; }
  .mk-blk .mk-tag { padding: 1px 5px; font-size: 9.5px; }
  .mk-aud .blocks { top: 96px; }
  .pd-pin { padding: 40px 16px 40px; }
  .pd-t { font-size: 21px; line-height: 1.22; }
  .pd-t.big { font-size: 27px; }
  .pd-live .pd-pin { padding: 2vh 14px 2vh; gap: 1.2vh; }
  .pd-js .pd-live .pd-pin { height: calc(100svh - var(--pd-top, 0px) - 68px); overflow: hidden; }
  .pd-eyebrow { font-size: 11px; margin-bottom: 6px !important; }
  .pd-sl i { display: none; }
  .pd-stage { height: 560px; }
  .pd-cta { max-width: none; width: 100%; }
  .pd-btn { width: 100%; }
  .pd-cta small { display: none; }
  .mk-win { font-size: 12px; border-radius: 8px; }
  .mk-body { padding: 10px 11px; }
  .mk-bar { height: 26px; font-size: 11px; }
  .hide-m { display: none !important; }
  .pd-demo { bottom: -34px; left: 0; font-size: 10px; }
  .mk-postit { width: 124px; padding: 9px 9px 10px; font-size: 12px; }
  .mk-f { grid-template-columns: 112px minmax(0, 1fr); }
  .mk-strip { padding: 8px 10px; flex-wrap: wrap; row-gap: 6px; }
  .mk-strip .lbl { width: 100%; margin: 0 0 2px; }
  .mk-strip .mk-chip { height: 24px; font-size: 11px; }
  .mk-strip .mk-chip > span { padding: 3px 7px; }
  .mk-strip .mk-chip + .chip::before { margin: 0 3px; }

  .mk-hero .erp { left: 0; right: 0; width: auto; top: 0; bottom: 104px; }
  .mk-hero .p1 { left: auto; right: -4px; top: 30%; }
  .mk-hero .p2 { left: -4px; top: 58%; }
  .mk-hero .app { left: 0; right: 0; bottom: 104px; }
  .mk-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mk-side { display: flex; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid #e3e8ef; overflow: hidden; }
  .mk-side .k { display: none; }
  .mk-side > span { padding: 4px 8px; font-size: 11.5px; }
  .mk-main { padding: 10px 12px; }
  .mk-aside { display: none; }
  .mk-ai-m { display: block !important; }

  .mk-exp .budget { left: 0; right: 0; width: auto; top: auto; bottom: 0; height: 40%; z-index: 2; }
  .mk-exp .csv { left: 0; right: 0; width: auto; top: 0; bottom: 36%; }
  .mk-exp .step4 { display: block; }
  .mk-exp .step4 > .mk-dk { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; }
  .mk-exp .step4 > .mk-dk:not(:last-child) { --lq: clamp(0, (var(--m) - var(--s2)) / (var(--e2) - var(--s2)), 1); opacity: calc(1 - var(--lq)); transform: translateY(calc(var(--lq) * -30px)) scale(calc(1 - .06 * var(--lq))); }
  .mk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; position: absolute; left: 0; right: 0; top: 0; height: 30px; }
  .mk-tabs > span { display: grid; place-items: center; border-radius: 6px; font-size: 11px; font-weight: 700; background: #dfe6f0; color: #6a7888; }
  .mk-tabs > span { background: color-mix(in srgb, #0a3d91 calc(var(--lp) * 100%), #dfe6f0); color: color-mix(in srgb, #fff calc(var(--lp) * 100%), #6a7888); }

  .mk-crm .form { left: 0; right: 0; width: auto; bottom: 34%; }
  .mk-crm .form .mk-fields { grid-template-columns: 1fr; }
  .mk-crm .chat { left: 8%; right: 0; width: auto; top: auto; bottom: 0; height: 40%; z-index: 2; --dx: 60px !important; --dy: 40px !important; }
  .mk-crm .note { right: auto; left: -4px; top: auto; bottom: 30%; width: 150px; z-index: 3; }
  .mk-crm .graph { left: 0; right: 0; width: auto; bottom: 47%; }
  .mk-crm .voice { left: 0; right: 0; width: auto; top: auto; bottom: 0; height: 45%; }
  .mk-node { padding: 4px 10px; }
  .mk-node small { display: none; }
  .mk-link { height: 10px; }
  .mk-link > span { display: none; }

  .mk-aud .seven { grid-template-columns: 1fr; grid-template-rows: none; gap: 6px; align-content: start; }
  .mk-aud .seven .mk-win { transform: none !important; }
  .mk-aud .seven .mk-bar { height: auto; padding: 6px 10px; }
  .mk-aud .seven .mk-body { display: none; }
  .mk-seven-note { grid-column: auto; grid-row: auto; padding: 6px 10px; font-size: 12px; }
  .mk-aud .obj { height: 64px; }
  .mk-aud .blocks { top: 74px; height: auto; bottom: 112px; grid-template-columns: 1fr; gap: 6px; }
  .mk-aud .blocks .mk-body { padding: 6px 10px; }
  .mk-aud .tl { top: auto; bottom: 0; height: auto; }
  .mk-tlh > li { font-size: 10.5px; padding-right: 4px; }
  .mk-tlh b { font-size: 10.5px; line-height: 1.25; }
  .mk-tlh small { display: none; }

  .mk-cont .meet { left: 0; right: 0; width: auto; bottom: 30%; }
  .mk-cont .pa { left: auto; right: -2px; top: auto; bottom: 14%; }
  .mk-cont .pb { left: 2%; top: auto; bottom: 0; }
  .mk-cont .pc { display: none; }
  .mk-cont .matrix { left: 0; right: 0; }
  .mk-mx { font-size: 12px; }
  .mk-mx th, .mk-mx td { padding: 6px 4px; }
  .mk-paese .fair { left: 0; right: 0; width: auto; bottom: 36%; }
  .mk-paese .em { left: 6%; right: 0; width: auto; top: auto; bottom: 0; height: 40%; }
  .mk-paese .plan { left: 0; right: 0; }
  .mk-plan { grid-template-columns: 1fr; gap: 10px; }
  .mk-lead .csv { left: 0; right: 0; bottom: 18%; }
  .mk-lead .res { right: 0; top: auto; bottom: 0; width: 70%; }
  .mk-lead .mk-cards { grid-template-columns: 1fr; gap: 8px; align-content: start; }
  .mk-sheet { table-layout: auto; }
  .mk-mx td[colspan] { white-space: normal; }
  .mk-met .old { top: 0; flex-direction: column; }
  .mk-met .old .box { flex: none; width: 100%; padding: 9px; }
  .mk-met .old .arr { height: 20px; line-height: 20px; transform: rotate(90deg); }
  .mk-met .new { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 380px) {
  .pd-t { font-size: 19.5px; }
}
.mk-ai-m { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after { transition: none !important; }
  .pd-btn:hover { transform: none; }
}