/* Motion graphic della pagina (hero, funzioni).
   L'interfaccia dell'app è ricostruita in HTML su tele a misura fissa che si
   rimpiccioliscono per stare nel loro riquadro (--mgw, --mgh e --mgs li mette
   motion/kit.js). Qui stanno i componenti; i movimenti stanno nei file .js. */
@media (max-width: 900px) {
  .hero { --stage-h: calc(min(100vw - var(--gut) * 2, 520px) * 1.3846 + 92px); }
}
.mg { position: relative; overflow: hidden; }
.mg__fit { height: calc(var(--mgh) * var(--mgs, 1) * 1px); }
.mg__scene { position: absolute; left: 0; top: 0; width: calc(var(--mgw) * 1px); height: calc(var(--mgh) * 1px); transform: scale(var(--mgs, 1)); transform-origin: 0 0; font: 400 14px/1.35 Geist, system-ui, sans-serif; letter-spacing: -0.005em; text-align: left; color: #0f172a; -webkit-font-smoothing: antialiased; }
.mg__scene *, .mg__scene *::before, .mg__scene *::after { box-sizing: border-box; }
.mg__scene b, .mg__scene i, .mg__scene span { font-family: inherit; font-style: normal; font-weight: inherit; }
.mg__scene svg { display: block; flex: 0 0 auto; }
.mg__world { position: absolute; inset: 0; }
.mg__world > * { position: absolute; left: 0; top: 0; }
.mg-cap { position: relative; margin: 0; padding: 18px 84px 20px; min-height: 76px; box-sizing: border-box; display: grid; place-items: center; text-align: center; font-size: clamp(15.5px, 1.35vw, 18px); line-height: 1.35; letter-spacing: -0.005em; color: #1b1250; }
.mg-cap span { grid-area: 1 / 1; }
.mg-cap span + span { opacity: 0; }                 /* prima che parta lo script si legge la prima */

/* etichetta del capitolo, in alto a sinistra */
.mg-tag { position: absolute; z-index: 6; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .62); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); font: 400 12px/1 "Geist Mono", ui-monospace, monospace; color: #1b1250; overflow: hidden; }
.mg-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4f46e5; }
.mg-tag__w { height: 30px; overflow: hidden; }
.mg-tag__w span { display: block; height: 30px; line-height: 30px; white-space: nowrap; }

/* ── analisi (primo capitolo): i contenuti del brand in fila, la lente, quello che ne ricava ── */
.mg-live { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: #cbd5e1; }
.mg-an { width: 0; height: 0; }
.mg-ap { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 56px -28px rgba(30, 27, 75, .65); }
.mg-ap__h { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; font-size: 12.5px; color: #64748b; white-space: nowrap; }
.mg-ap__h .mg-logo { width: 24px; height: 24px; border-radius: 50%; font-size: 13px; }
.mg-ap__h b { font-size: 13px; color: #0f172a; }
.mg__scene .mg-ap__h b { font-weight: 600; }
.mg-ap__h .d { margin-left: auto; }
.mg-ap__h .mg-ch { width: 20px; height: 20px; border-radius: 6px; }
.mg-ap__h .d:empty + .mg-ch { margin-left: 0; }
/* la scheda del sito: barra del browser, immagine, titolo della pagina */
.mg-ap__h--web { gap: 10px; background: #f1f5f9; }
.mg-ap__h--web .dots { display: flex; gap: 4px; }
.mg-ap__h--web .dots i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.mg-ap__h--web .url { flex: 1; min-width: 0; height: 24px; padding: 0 10px; border-radius: 999px; background: #fff; font-size: 12px; line-height: 24px; color: #475569; overflow: hidden; text-overflow: ellipsis; }
.mg-ap__cap--web { display: grid; gap: 6px; justify-items: start; }
.mg-ap__cap--web b { font-size: 17px; line-height: 1.2; letter-spacing: -0.015em; color: #0f172a; }
.mg__scene .mg-ap__cap--web b { font-weight: 600; }
.mg-ap__img { position: relative; flex: 1 1 0; min-height: 0; background: #b5573a center / cover no-repeat; }
.mg-ap__img--cover { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px; color: #f3e9d8; }
.mg-ap__img--cover .k { font: 400 11px/1 "Geist Mono", ui-monospace, monospace; opacity: .85; }
.mg-ap__img--cover .t { font-size: 22px; line-height: 1.12; letter-spacing: -0.02em; }
.mg__scene .mg-ap__img--cover .t { font-weight: 600; }
.mg-ap__img--cover .dt { display: flex; gap: 5px; }
.mg-ap__img--cover .dt i { width: 6px; height: 6px; border-radius: 50%; background: rgba(243, 233, 216, .45); }
.mg-ap__img--cover .dt i:first-child { background: #f3e9d8; }
.mg-ap__cap { flex: 0 0 auto; padding: 12px 14px 15px; font-size: 14px; line-height: 1.42; color: #1e293b; }
.mg-ap__hl { position: relative; display: inline-block; white-space: nowrap; }
.mg-ap__hl i { position: absolute; inset: 0 -3px; border-radius: 4px; background: #d9d5ff; }
.mg-ap__hl span { position: relative; }
.mg-ap__play { position: absolute; left: 50%; top: 42%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0f172a; }
.mg-ap__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; }
.mg-ap__sub { position: absolute; left: 12px; right: 12px; bottom: 44px; min-height: 34px; padding: 8px 11px; border-radius: 10px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 13.5px; line-height: 1.3; }
.mg-ap__wave { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 22px; }
.mg-ap__wave span { position: absolute; inset: 0; display: flex; align-items: center; gap: 3px; }
.mg-ap__wave i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .42); }
.mg-ap__wave .on i { background: #fff; }
.mg-ap__st { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px; font-size: 13.5px; color: #475569; }
.mg-ap__st span { display: flex; align-items: center; gap: 6px; }
.mg-ap__st svg { width: 16px; height: 16px; }
.mg-ap__st .hi { height: 30px; padding: 0 9px; margin-left: -4px; border-radius: 8px; color: #0f172a; }
.mg__scene .mg-ap__st .hi b { font-weight: 600; }
.mg-ap__ok { position: absolute; right: 10px; top: 52px; }
.mg-ap__ok .mg-okc { width: 24px; height: 24px; box-shadow: 0 0 0 2px #fff; }
.mg-ap__ok .mg-okc svg { width: 13px; height: 13px; }
.mg-lens { z-index: 2; border-radius: 22px; box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(255, 255, 255, .24), 0 0 46px 6px rgba(79, 70, 229, .5); pointer-events: none; }
.mg-lens__c { position: absolute; inset: 7px; overflow: hidden; border-radius: 16px; }
.mg-lens__s { position: absolute; left: 0; right: 0; top: 0; height: 84px; opacity: 0; background: linear-gradient(180deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, .34) 100%); border-bottom: 2px solid #6366f1; }
.mg-src { z-index: 3; display: flex; align-items: center; height: 30px; padding: 0 13px 0 5px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .85); font: 400 12px/1 "Geist Mono", ui-monospace, monospace; color: #1b1250; }
.mg-src__w { display: block; height: 30px; overflow: hidden; }
.mg-src__r { display: block; }
.mg-src__r > span { display: flex; align-items: center; gap: 8px; height: 30px; white-space: nowrap; }
.mg-src .mg-ch { width: 20px; height: 20px; border-radius: 50%; }
.mg-src .sp { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #4f46e5; color: #fff; }
.mg-src .sp svg { width: 12px; height: 12px; }
.mg-rule__t { position: absolute; left: 0; right: 0; top: 0; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .5); }
.mg-rule__f { position: absolute; inset: 0; border-radius: 3px; background: #4f46e5; }
.mg-rule__l { position: absolute; left: 0; right: 0; top: 15px; display: grid; grid-template-columns: repeat(12, 1fr); text-align: center; font: 400 10.5px/1 "Geist Mono", ui-monospace, monospace; color: rgba(27, 18, 80, .72); }
.mg-pv { z-index: 5; padding: 13px 16px 15px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 24px 46px -18px rgba(30, 27, 75, .65); }
.mg-pv .k { display: flex; align-items: center; gap: 7px; font: 400 11.5px/1 "Geist Mono", ui-monospace, monospace; color: #4f46e5; }
.mg-pv .k svg { width: 15px; height: 15px; }
.mg-pv b { display: block; margin-top: 9px; font-size: 19px; line-height: 1.2; letter-spacing: -0.018em; color: #0f172a; white-space: nowrap; }
.mg__scene .mg-pv b { font-weight: 600; }
/* la memoria del brand: si riempie durante l'analisi, poi ci si scrive dentro */
.mg-mpring { z-index: 3; border-radius: 18px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); pointer-events: none; }
.mg-mp { z-index: 4; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 44px 84px -40px rgba(30, 27, 75, .75); }
.mg-mp__h { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 20px; border-bottom: 1px solid #e6eaf1; }
.mg-mp__h .mg-logo { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
.mg-mp__h .t { flex: 1; min-width: 0; white-space: nowrap; }
.mg-mp__h .t b { display: block; font-size: 16px; letter-spacing: -0.01em; }
.mg__scene .mg-mp__h .t b { font-weight: 600; }
.mg-mp__h .s { display: block; margin-top: 2px; font-size: 12.5px; color: #64748b; }
.mg-mp__st { flex: 0 0 auto; display: flex; align-items: center; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: #f1f5f9; font-size: 12.5px; color: #475569; white-space: nowrap; }
.mg__scene .mg-mp__st { font-weight: 600; }
.mg-mp__st .st { position: relative; }
.mg-mp__st .st span + span { position: absolute; left: 0; top: 0; opacity: 0; }
.mg-mp__c { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; height: 86px; padding: 0 20px; }
.mg-mp__c > span + span { padding-left: 16px; border-left: 1px solid #e6eaf1; }
.mg-mp__c .n { display: block; font-size: 30px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mg__scene .mg-mp__c .n { font-weight: 600; }
.mg-mp__c span span { display: block; margin-top: 6px; font-size: 12.5px; color: #64748b; white-space: nowrap; }
.mg-mp__r { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 20px; border-top: 1px solid #eef1f6; }
.mg-mp__r .k { flex: 0 0 60px; font-size: 13px; color: #64748b; }
.mg-mp__r .v { position: relative; flex: 1; min-width: 0; height: 20px; }
.mg-mp__r .v b { position: absolute; left: 0; right: 0; top: 0; font-size: 14.5px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg__scene .mg-mp__r .v b { font-weight: 600; }
.mg-mp__r .sk { position: absolute; left: 0; top: 5px; width: 64%; height: 10px; border-radius: 5px; background: #e8ecf3; }
.mg-mp__r:nth-of-type(4) .sk { width: 82%; }
.mg-mp__r:nth-of-type(5) .sk { width: 72%; }
.mg--m .mg-ap { border-radius: 12px; }
.mg--m .mg-ap__h { height: 30px; padding: 0 8px; gap: 6px; }
.mg--m .mg-ap__h .mg-logo { width: 18px; height: 18px; font-size: 10px; }
.mg--m .mg-ap__h b { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.mg--m .mg-ap__h .d { display: none; }
.mg--m .mg-ap__h .mg-ch { width: 16px; height: 16px; margin-left: auto; border-radius: 5px; }
.mg--m .mg-ap__cap { padding: 7px 9px 9px; font-size: 10.5px; line-height: 1.38; }
.mg--m .mg-ap__h--web { gap: 6px; }
.mg--m .mg-ap__h--web .dots i { width: 5px; height: 5px; }
.mg--m .mg-ap__h--web .url { height: 18px; padding: 0 7px; font-size: 9.5px; line-height: 18px; }
.mg--m .mg-ap__cap--web { gap: 4px; }
.mg--m .mg-ap__cap--web b { font-size: 12px; }
.mg--m .mg-ap__img--cover { padding: 10px; gap: 6px; }
.mg--m .mg-ap__img--cover .k { font-size: 8.5px; }
.mg--m .mg-ap__img--cover .t { font-size: 13.5px; }
.mg--m .mg-ap__play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.mg--m .mg-ap__play svg { width: 13px; height: 13px; }
.mg--m .mg-ap__sub { left: 7px; right: 7px; bottom: 28px; min-height: 26px; padding: 5px 7px; border-radius: 7px; font-size: 10.5px; }
.mg--m .mg-ap__wave { left: 7px; right: 7px; bottom: 8px; height: 14px; }
.mg--m .mg-ap__wave span { gap: 2px; }
.mg--m .mg-ap__st { height: 34px; padding: 0 8px; gap: 7px; font-size: 10.5px; }
.mg--m .mg-ap__st svg { width: 12px; height: 12px; }
.mg--m .mg-ap__st span { gap: 4px; }
.mg--m .mg-ap__st .hi { height: 22px; padding: 0 6px; }
.mg--m .mg-ap__ok { right: 7px; top: 37px; }
.mg--m .mg-ap__ok .mg-okc { width: 20px; height: 20px; }
.mg--m .mg-lens { border-radius: 17px; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255, 255, 255, .24), 0 0 30px 4px rgba(79, 70, 229, .5); }
.mg--m .mg-lens__c { border-radius: 12px; }
.mg--m .mg-lens__s { height: 56px; }
.mg--m .mg-rule__l { top: 12px; font-size: 9.5px; }
.mg--m .mg-pv { padding: 10px 13px 12px; border-radius: 12px; }
.mg--m .mg-pv b { margin-top: 7px; font-size: 16px; white-space: normal; }
.mg--m .mg-mp, .mg--m .mg-mpring { border-radius: 16px; }
.mg--m .mg-mp__h { height: 50px; padding: 0 14px; gap: 10px; }
.mg--m .mg-mp__h .mg-logo { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
.mg--m .mg-mp__h .t b { font-size: 14.5px; }
.mg--m .mg-mp__h .s { margin-top: 1px; font-size: 11.5px; }
.mg--m .mg-mp__st { height: 26px; padding: 0 10px 0 8px; font-size: 12px; }
.mg--m .mg-mp__c { height: 60px; padding: 0 14px; }
.mg--m .mg-mp__c > span + span { padding-left: 10px; }
.mg--m .mg-mp__c .n { font-size: 23px; }
.mg--m .mg-mp__c span span { margin-top: 4px; font-size: 12.5px; }
.mg--m .mg-mp__r { height: 40px; padding: 0 14px; gap: 9px; }
.mg--m .mg-mp__r .k { flex-basis: 52px; font-size: 12.5px; }
.mg--m .mg-mp__r .v b { font-size: 13px; }
.mg--m .mg-src { justify-content: space-between; padding-right: 12px; }
.mg-src__n { flex: 0 0 auto; margin-left: 10px; white-space: nowrap; color: rgba(27, 18, 80, .8); }
.mg-src__n b { display: inline-block; min-width: 3ch; text-align: right; color: #1b1250; font-variant-numeric: tabular-nums; }
.mg__scene .mg-src__n b { font-weight: 600; }

/* il campo della chat */
.mg-bar { z-index: 5; display: flex; align-items: center; gap: 12px; padding: 0 9px 0 18px; border-radius: 15px; background: #fff; box-shadow: 0 0 0 1px #d5dcec, 0 22px 50px -22px rgba(30, 27, 75, .55); }
.mg-bar__ring { position: absolute; inset: -3px; border-radius: 19px; box-shadow: 0 0 0 3px rgba(99, 102, 241, .45), 0 0 34px 2px rgba(99, 102, 241, .35); opacity: 0; pointer-events: none; }
.mg-bar svg.plus, .mg-bar svg.mic { width: 20px; height: 20px; color: #64748b; }
.mg-bar__f { position: relative; flex: 1; min-width: 0; height: 24px; font-size: 15.5px; line-height: 24px; white-space: nowrap; }
.mg-bar__ph { position: absolute; left: 0; top: 0; color: #94a3b8; }
.mg-bar__tx { position: relative; color: #0f172a; }
.mg-caret { display: inline-block; width: 1.5px; height: 19px; margin-left: 1px; vertical-align: -3px; background: #0f172a; opacity: 0; }
.mg-send { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: #b9b5f3; color: #fff; display: grid; place-items: center; }
.mg-send > * { grid-area: 1 / 1; }
.mg-send svg { width: 20px; height: 20px; }
.mg-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(99, 102, 241, .25); border-top-color: #4f46e5; opacity: 0; }
.mg-send .mg-spin { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.mg-okc { width: 20px; height: 20px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; opacity: 0; }
.mg-okc svg { width: 11px; height: 11px; }

/* cosa sta facendo: tre passi che si spuntano */
.mg-work { display: flex; gap: 10px; }
.mg-work span { position: relative; display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 24px -14px rgba(30, 27, 75, .5); font-size: 13.5px; font-weight: 500; color: #1e1b4b; white-space: nowrap; }
.mg-work i.st { position: relative; width: 20px; height: 20px; display: grid; place-items: center; }
.mg-work i.st > * { grid-area: 1 / 1; }
.mg-work .mg-spin { width: 16px; height: 16px; }
.mg--m .mg-work { display: block; }
.mg--m .mg-work span { position: absolute; left: 0; top: 0; }

/* bottoni dell'app */
.mg-btn { display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #d5dcec, 0 12px 26px -16px rgba(30, 27, 75, .5); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.mg-btn svg { width: 17px; height: 17px; }
.mg-btn--soft { background: #e0e1fb; box-shadow: 0 0 0 1px #b9bcf2, 0 12px 26px -16px rgba(30, 27, 75, .5); color: #4338ca; }

/* una card del piano che poi diventa evento in calendario e poi barra */
.mg-item { overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #d0d8e6, 0 24px 46px -24px rgba(30, 27, 75, .55); }
.mg-item__card { position: absolute; left: 0; top: 0; padding: 19px 20px 0; }
.mg-item__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #98a6bc; }
/* mentre lavora la card è uno scheletro: righe grigie con un riflesso che passa */
.mg-sk { position: absolute; inset: 0; padding: 22px 20px 0; overflow: hidden; }
.mg-sk i { display: block; height: 12px; border-radius: 6px; background: #e6ebf3; }
.mg-sk .h { width: 46%; height: 14px; }
.mg-sk .hr { height: 1px; margin: 20px 0 18px; border-radius: 0; background: #e3e8f0; }
.mg-sk .t { height: 15px; margin-top: 9px; }
.mg-sk .d { height: 9px; margin-top: 10px; background: #eef1f6; }
.mg-sk .f { position: absolute; left: 20px; bottom: 22px; width: 34%; height: 12px; }
.mg-sk .c { position: absolute; right: 20px; bottom: 15px; width: 26px; height: 26px; border-radius: 8px; }
.mg-sk__sh { position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 100%); }
.mg--m .mg-sk { padding: 16px 13px 0; }
.mg--m .mg-sk .hr { margin: 13px 0 10px; }
.mg--m .mg-sk .d { display: none; }
.mg--m .mg-sk .f { left: 13px; bottom: 15px; }
.mg--m .mg-sk .c { right: 13px; bottom: 10px; width: 22px; height: 22px; }
.mg-c__h { display: flex; align-items: center; gap: 8px; height: 26px; font-size: 14.5px; font-weight: 600; }
.mg-c__h .n { color: #7b78e6; font-weight: 700; }
.mg-c__h .dash { color: #94a3b8; font-weight: 400; }
.mg-date { margin-left: auto; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: #eef0ff; color: #4f46e5; font-size: 11.5px; font-weight: 600; }
.mg-date svg { width: 12px; height: 12px; }
.mg-c__hr { height: 1px; margin: 14px 0 15px; background: #d9e0ea; }
.mg-c__title { font-size: 15.5px; font-weight: 600; line-height: 1.32; letter-spacing: -0.012em; }
.mg-c__desc { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: #8a97ab; }
.mg-c__f { position: absolute; left: 20px; right: 20px; bottom: 15px; padding-top: 13px; border-top: 1px solid #d9e0ea; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.mg-c__dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.mg-c__st { position: relative; }
.mg-c__st span + span { position: absolute; left: 0; top: 0; color: #15803d; opacity: 0; }
/* le immagini pronte dentro la card */
.mg-c__media { position: absolute; left: 20px; bottom: 66px; display: flex; gap: 6px; }
.mg-c__media i { display: grid; place-items: center; width: 46px; height: 58px; border-radius: 6px; background-size: cover; background-position: center; color: rgba(255, 255, 255, .95); opacity: 0; }
.mg-c__media svg { width: 16px; height: 16px; }
.mg-ch { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; }
.mg-ch svg { width: 62%; height: 62%; }
.mg-c__f .mg-ch { margin-left: auto; }
.mg-ch--ig { background: linear-gradient(45deg, #f9a03c, #e8336e 55%, #b62fb3); }
.mg-ch--fb { background: #1877f2; }
.mg-ch--in { background: #0a66c2; }
.mg-ch--tt { background: #111114; }
.mg-ch--yt { background: #f03; }
.mg-face { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 0 5px 0 10px; font-size: 12px; line-height: 1; white-space: nowrap; opacity: 0; }
.mg-face b { font-weight: 700; }
.mg-face .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #334155; }
.mg-face .mg-ch { width: 17px; height: 17px; border-radius: 5px; }
.mg-face--s { background: #eef0ff; box-shadow: inset 3px 0 0 #6366f1; }
.mg-face--p { background: #e7faef; box-shadow: inset 3px 0 0 #22c55e; }
.mg-face--p .mg-okc { width: 15px; height: 15px; opacity: 1; }
.mg-face--p .mg-okc svg { width: 9px; height: 9px; }
.mg-item__bar { position: absolute; inset: 0; background: #a7a2f2; opacity: 0; }
.mg-item--top .mg-item__bar { background: #4f46e5; }

/* crea: ogni card si gira e diventa la sua grafica, coi colori e il logo del kit del brand */
.mg-kit { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 7px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #d0d8e6, 0 14px 30px -16px rgba(30, 27, 75, .55); font-size: 13.5px; font-weight: 600; white-space: nowrap; opacity: 0; }
.mg-kit .sw { display: flex; }
.mg-kit .sw i { width: 16px; height: 16px; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.mg-kit .sw i:first-child { margin-left: 0; }
.mg-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #f3e9d8; color: #2a1810; font: 700 14px/1 Georgia, "Times New Roman", serif; box-shadow: 0 0 0 1px rgba(42, 24, 16, .14); }
.mg__scene .mg-logo { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.mg-logo--fly { margin: -13px 0 0 -13px; opacity: 0; z-index: 7; }
.mg-item__art { position: absolute; left: 0; top: 0; overflow: hidden; background: #e6e2fa; opacity: 0; }
.mg-art__pic { position: absolute; inset: 0; }
.mg-art__pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mg-art__pic--cover { padding: 46px 20px 20px; background: #b5573a; color: #f3e9d8; display: flex; flex-direction: column; }
.mg-art__pic--cover .k { font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; opacity: .85; }
.mg-art__pic--cover .t { margin-top: 14px; font-size: 27px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.mg-art__pic--cover .dt { margin-top: auto; padding-left: 38px; display: flex; align-items: center; gap: 5px; height: 26px; }
.mg-art__pic--cover .dt i { width: 6px; height: 6px; border-radius: 50%; background: rgba(243, 233, 216, .4); }
.mg-art__pic--cover .dt i:first-child { background: #f3e9d8; }
.mg-art__tag { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(15, 10, 51, .62); color: #fff; font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .02em; }
.mg-art__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0f172a; box-shadow: 0 10px 24px -8px rgba(15, 10, 51, .6); }
.mg-art__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.mg-item__art > .mg-logo { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.mg-art__gen { position: absolute; inset: 0; background: linear-gradient(140deg, #dcd7fb, #c6befa 55%, #e6d3fb); overflow: hidden; }
.mg-art__gen b { position: absolute; top: 0; bottom: 0; left: 0; width: 70%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0)); }
.mg-art__gen .mg-spin { position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px; opacity: 1; }

/* calendario */
.mg-cal { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #d0d8e6, 0 34px 70px -34px rgba(30, 27, 75, .6); overflow: hidden; }
.mg-cal__head { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 18px; }
.mg-cal__m { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.mg-cal__m i { font-weight: 400; color: #94a3b8; }
.mg-cal__n { display: flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #eef0ff; color: #4338ca; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-dock { margin-left: auto; display: flex; gap: 7px; }
.mg-dock .mg-ch { width: 26px; height: 26px; border-radius: 50%; }
.mg-cal__wd { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid #dfe5ee; border-bottom: 1px solid #dfe5ee; background: #f8fafc; font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; color: #94a3b8; }
.mg-cal__wd span { padding-left: 11px; align-self: center; }
.mg-vl, .mg-hl { position: absolute; background: #dfe5ee; }
.mg-day { position: absolute; font-size: 12.5px; font-weight: 600; color: #475569; }
.mg-day.off { color: #cbd5e1; }
.mg-today { position: absolute; left: 0; top: 0; border-radius: 12px; background: rgba(99, 102, 241, .08); box-shadow: inset 0 0 0 2px #6366f1; opacity: 0; }
.mg-x { position: absolute; border-radius: 7px; overflow: hidden; }
.mg-x .mg-face { position: static; height: 100%; width: 100%; opacity: 1; }
.mg-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); opacity: 0; }
.mg-toast { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 12px; border-radius: 999px; background: #0f0a33; color: #fff; box-shadow: 0 18px 40px -16px rgba(15, 10, 51, .7); font-size: 14px; font-weight: 500; opacity: 0; }
.mg-toast .mg-okc { opacity: 1; }
.mg-toast__w { height: 42px; overflow: hidden; }
.mg-toast__w span { display: block; height: 42px; line-height: 42px; white-space: nowrap; }

/* numeri */
.mg-panel { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #d0d8e6, 0 30px 60px -32px rgba(30, 27, 75, .6); }
.mg-panel__t { position: absolute; left: 24px; top: 22px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.mg-panel__t svg { width: 18px; height: 18px; color: #64748b; }
.mg-panel__t i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f1f5f9; }
.mg-kpi__per { position: absolute; right: 24px; top: 24px; font: 400 11.5px/1 "Geist Mono", ui-monospace, monospace; color: #94a3b8; }
.mg-kpi__n { position: absolute; left: 24px; top: 58px; font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.mg-kpi__d { position: absolute; left: 24px; top: 126px; display: flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #e7faef; color: #15803d; font-size: 12px; font-weight: 600; }
.mg-barx { position: absolute; border-radius: 6px 6px 0 0; background: #dcd9fa; }
.mg-row { position: absolute; left: 22px; right: 22px; display: flex; align-items: center; gap: 14px; border-top: 1px solid #e5eaf1; }
.mg-row .rk { width: 12px; font-size: 14px; font-weight: 700; color: #16a34a; }
.mg-row .th { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; }
.mg-row .tx { flex: 1; min-width: 0; }
.mg-row .tx b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-row .tx span { display: block; margin-top: 3px; font-size: 12.5px; color: #8a97ab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-row__hi { position: absolute; left: -10px; right: -10px; top: 6px; bottom: 6px; border-radius: 12px; background: rgba(99, 102, 241, .07); box-shadow: inset 0 0 0 1.5px rgba(99, 102, 241, .55); opacity: 0; }
.mg-when__v { position: absolute; left: 24px; top: 70px; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; }
.mg-when__c { position: absolute; right: 24px; top: 74px; display: flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: #e7faef; color: #15803d; font-size: 12.5px; font-weight: 600; }
.mg-pdf { padding: 16px 15px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #d0d8e6, 0 30px 56px -22px rgba(30, 27, 75, .65); }
.mg-pdf i { display: block; border-radius: 3px; background: #e2e8f0; }
.mg-pdf .lg { width: 22px; height: 22px; border-radius: 6px; background: #4f46e5; }
.mg-pdf .tt { margin-top: 12px; font-size: 12.5px; font-weight: 600; }
.mg-pdf .bs { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 12px; }
.mg-pdf .bs i { flex: 1; border-radius: 3px 3px 0 0; background: #c9c5f7; }
.mg-pdf .ln { height: 6px; margin-top: 8px; }
.mg-pdfl { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #d0d8e6, 0 12px 26px -14px rgba(30, 27, 75, .5); font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; }
.mg-pdfl .mg-okc { opacity: 1; width: 16px; height: 16px; }
.mg-pdfl .mg-okc svg { width: 9px; height: 9px; }

/* cursore (freccia da desktop, dito da telefono) */
.mg-cur { z-index: 9; width: 30px; height: 30px; opacity: 0; pointer-events: none; }
.mg-cur svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(15, 10, 51, .4)); }
.mg--touch .mg-cur { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(15, 10, 51, .32); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.mg--touch .mg-cur svg { display: none; }
/* fotogramma fermo (movimento ridotto): niente cursore né onda del clic sopra l'interfaccia */
.mg--still .mg-cur, .mg--still .mg-rip { display: none; }
.mg-rip { z-index: 8; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid rgba(79, 70, 229, .7); background: rgba(79, 70, 229, .14); opacity: 0; pointer-events: none; }

.mg--m .mg-c__media { left: auto; right: 42px; bottom: 11px; gap: 3px; }
.mg--m .mg-c__media i { width: 15px; height: 19px; border-radius: 3px; }
.mg--m .mg-c__media svg { display: none; }
.mg--m .mg-kit { height: 34px; font-size: 12.5px; }
.mg--m .mg-logo { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.mg--m .mg-logo--fly { margin: -10px 0 0 -10px; }
.mg--m .mg-art__pic--cover { padding: 34px 12px 10px; }
.mg--m .mg-art__pic--cover .k { font-size: 8.5px; }
.mg--m .mg-art__pic--cover .t { margin-top: 7px; font-size: 16px; }
.mg--m .mg-art__pic--cover .dt { padding-left: 28px; height: 20px; }
.mg--m .mg-art__tag { left: 8px; top: 8px; height: 20px; padding: 0 7px; font-size: 9px; }
.mg--m .mg-art__play { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.mg--m .mg-art__play svg { width: 13px; height: 13px; }
.mg--m .mg-item__art > .mg-logo { left: 8px; bottom: 8px; }
/* telefono e tablet stretti: tela verticale, mai più larga di 520px */
.mg--m { max-width: 520px; margin: 0 auto; }
.mg--m .mg-bar { padding: 0 8px 0 14px; gap: 10px; border-radius: 14px; }
.mg--m .mg-bar__f { font-size: 15px; }
.mg--m .mg-send { width: 38px; height: 38px; border-radius: 10px; }
.mg--m .mg-item__card { padding: 13px 13px 0; }
.mg--m .mg-c__h { font-size: 12.5px; gap: 5px; height: 22px; }
.mg--m .mg-date { height: 20px; padding: 0 7px; font-size: 10.5px; }
.mg--m .mg-date svg { display: none; }
.mg--m .mg-c__hr { margin: 9px 0 10px; }
.mg--m .mg-c__title { font-size: 13px; line-height: 1.3; }
.mg--m .mg-c__desc { display: none; }
.mg--m .mg-c__f { left: 13px; right: 13px; bottom: 10px; padding-top: 9px; font-size: 12px; }
.mg--m .mg-c__f .mg-ch { width: 22px; height: 22px; border-radius: 7px; }
.mg--m .mg-face { padding: 0 3px 0 7px; gap: 3px; font-size: 10.5px; }
.mg--m .mg-face .lb, .mg--m .mg-face .mg-ch { display: none; }
.mg--m .mg-face--p .mg-okc { width: 12px; height: 12px; }
.mg--m .mg-cal__head { padding: 0 12px; gap: 8px; }
.mg--m .mg-cal__m { font-size: 14px; }
.mg--m .mg-dock { gap: 5px; }
.mg--m .mg-dock .mg-ch { width: 22px; height: 22px; }
.mg--m .mg-cal__wd span { padding-left: 6px; }
.mg--m .mg-day { font-size: 12px; }
.mg--m .mg-toast { height: 38px; font-size: 13px; padding: 0 14px 0 10px; }
.mg--m .mg-toast__w, .mg--m .mg-toast__w span { height: 38px; line-height: 38px; }
.mg--m .mg-panel__t { left: 18px; top: 16px; font-size: 14px; }
.mg--m .mg-kpi__per { right: 18px; top: 19px; }
.mg--m .mg-kpi__n { left: 18px; top: 46px; font-size: 42px; }
.mg--m .mg-kpi__d { left: 18px; top: 96px; }
.mg--m .mg-row { left: 16px; right: 16px; gap: 10px; }
.mg--m .mg-row .th { width: 36px; height: 36px; border-radius: 8px; }
.mg--m .mg-row .tx b { font-size: 13px; }
.mg--m .mg-row .tx span { font-size: 11.5px; }
.mg--m .mg-row__hi { top: 3px; bottom: 3px; }
.mg--m .mg-btn { font-size: 13.5px; }
.mg-cap--m { padding: 14px 68px 16px 16px; text-align: left; justify-items: start; font-size: 14.5px; line-height: 1.32; }
.mg--m .mg-pdf { padding: 11px 10px; }
.mg--m .mg-pdf .lg { width: 16px; height: 16px; border-radius: 5px; }
.mg--m .mg-pdf .tt { margin-top: 8px; font-size: 10.5px; }
.mg--m .mg-pdf .bs { height: 38px; margin-top: 8px; gap: 4px; }
.mg--m .mg-pdf .ln { height: 4px; margin-top: 6px; }
.mg--m .mg-pdfl { height: 28px; font-size: 11.5px; }