/* ==========================================================================
   email-marketing-nuova.css — BOZZA della nuova pagina /email-marketing.
   Direzione artistica «Il canvas»: carta bianca editoriale e ariosa, griglia a
   punti del flow builder, viola come colore guida e tocchi di ciano. Niente
   fasce scure: le sezioni si alternano fra bianco, lilla tenue e ciano tenue.
   Menu e footer sono quelli del sito (partials): qui se ne adatta solo
   l'aspetto alla pagina chiara.
   Animazioni solo su transform/opacity (e il disegno dei collegamenti SVG);
   movimento ridotto: tutto fermo e già visibile; «Ferma le animazioni»
   (html.em-still) ferma i cicli continui.
   ========================================================================== */

:root {
  --em-paper: #FFFFFF;
  --em-paper-2: #FBFAFF;
  --em-lilac: #F4F0FF;
  --em-lilac-2: #EAE3FF;
  --em-cyan-wash: #EEFBFD;
  --em-ink: #0B1020;
  --em-ink-2: #262C3D;
  --em-muted: #535A6D;
  --em-faint: #646B7D;
  --em-line: #E8E5F1;
  --em-line-2: #D9D4E8;
  --em-dot: rgba(91, 46, 224, .16);
  --em-violet: #7C4DFF;
  --em-violet-ink: #5B2EE0;
  --em-violet-deep: #3A1C9E;
  --em-cyan: #00E5FF;
  --em-cyan-ink: #006F87;
  --em-green: #00E676;
  --em-green-2: #12C26A;
  --em-green-ink: #047A44;
  --em-amber: #FFB020;
  --em-amber-ink: #8A5A00;
  --em-blue: #2F6BFF;
  --em-blue-ink: #2149C9;
  --em-red: #F04B55;
  --em-red-ink: #B42330;
  --em-sh-1: 0 1px 2px rgba(20, 16, 50, .05), 0 2px 8px -3px rgba(20, 16, 50, .07);
  --em-sh-2: 0 2px 6px rgba(20, 16, 50, .04), 0 18px 40px -14px rgba(48, 24, 140, .18);
  --em-sh-3: 0 6px 16px rgba(20, 16, 50, .05), 0 40px 80px -24px rgba(48, 24, 140, .28);
  --em-ease: cubic-bezier(.2, .8, .2, 1);
  --em-spring: cubic-bezier(.34, 1.56, .64, 1);
  --em-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --em-gutter: 32px;
  --em-sec: 112px;
}

/* ---------- Base ---------- */
body.em-page { background: var(--em-paper); color: var(--em-ink); font-family: var(--em-font); -webkit-font-smoothing: antialiased; }
.em-page main { display: block; font-size: 18px; line-height: 1.65; font-feature-settings: "cv11" 1, "ss01" 1; overflow-x: clip; }
.em-page main:focus { outline: none; }
.em-page main ul, .em-page main ol { list-style: none; }
.em-page main img { display: block; max-width: 100%; height: auto; }
.em-page main picture { display: block; }
.em-page main code { font: 500 .86em/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--em-violet-ink); background: var(--em-lilac); padding: .18em .4em; border-radius: 6px; white-space: nowrap; }
.em-ic { width: 18px; height: 18px; flex: none; }
.em-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.em-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.em-page [id] { scroll-margin-top: 88px; }
.em-page main a:not([class]) {
  color: var(--em-violet-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(91, 46, 224, .32);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s;
}
.em-page main a:not([class]):hover { text-decoration-color: currentColor; }
.em-page main :focus-visible, .em-skip:focus-visible { outline: 3px solid var(--em-violet); outline-offset: 3px; }
.em-page main a:not([class]):focus-visible, .em-page main summary:focus-visible { border-radius: 6px; }
.em-skip {
  position: fixed; left: 16px; top: -64px; z-index: 1100; padding: 10px 16px; border-radius: 12px;
  background: var(--em-ink); color: #fff; font: 600 14px/20px var(--em-font); text-decoration: none; transition: top .2s;
}
.em-skip:focus { top: 12px; }
.em-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--em-gutter); }
.em-nw { white-space: nowrap; }
.em-demo { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--em-faint); white-space: nowrap; }
.em-demo::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--em-violet); vertical-align: 1px; opacity: .55; }

/* ---------- Menu del sito: stessa struttura, aspetto chiaro ---------- */
.em-page #nav { background: rgba(255, 255, 255, .7); border-bottom-color: transparent; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); transition: background .3s, box-shadow .3s, transform .3s; }
.em-page #nav.em-scrolled { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 var(--em-line), 0 10px 30px -18px rgba(20, 16, 50, .18); }
.em-page .nav-logo, .em-page .nav-logo a { color: var(--em-ink) !important; letter-spacing: -.02em; }
.em-page #nav .logo-icon { box-shadow: var(--em-sh-1), inset 0 0 0 1px var(--em-line); }
.em-page .nav-links a { color: var(--em-ink-2); }
.em-page .nav-links a:hover { color: var(--em-ink); }
.em-page .nav-links a[href="/prezzi"] { color: var(--em-violet-ink) !important; }
.em-page .nav-dropdown-menu { background: rgba(255, 255, 255, .98); border-color: var(--em-line); box-shadow: var(--em-sh-3); }
.em-page .mega-left { background: #F7F5FD; border-right-color: var(--em-line); }
.em-page .mega-label, .em-page .mega-desc, .em-page .ndm-text span { color: var(--em-muted); }
.em-page .mega-right a { color: var(--em-ink) !important; }
.em-page .mega-right a:hover { background: rgba(91, 46, 224, .05); }
.em-page .ndm-text strong { color: var(--em-ink); }
.em-page .nav-auth { border-left-color: var(--em-line); }
.em-page .nav-login { color: var(--em-ink) !important; border-color: var(--em-line-2); border-radius: 999px; }
.em-page .nav-login:hover { color: var(--em-ink) !important; background: rgba(20, 16, 50, .04); border-color: rgba(20, 16, 50, .24); }
.em-page .nav-cta { background: var(--em-ink) !important; color: #fff !important; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(11, 16, 32, .6); }
.em-page .nav-cta:hover { opacity: 1; box-shadow: 0 10px 22px -10px rgba(124, 77, 255, .7); }
.em-page .nav-account-btn { background: #fff; border-color: var(--em-line-2); color: var(--em-ink) !important; box-shadow: var(--em-sh-1); }
.em-page .nav-account-btn:hover { background: #fff; border-color: rgba(124, 77, 255, .4); }
.em-page .nav-hamburger span { background: var(--em-ink); }
.em-page .nav-mobile-overlay { top: 64px; padding-top: 20px; background: rgba(255, 255, 255, .98); border-top: 1px solid var(--em-line); }
.em-page .nav-mobile-overlay a { color: var(--em-ink); border-bottom-color: var(--em-line); }
.em-page .nav-mobile-overlay a:hover { color: var(--em-violet-ink); }
.em-page .nav-mobile-overlay .nav-auth { border-top-color: var(--em-line); }
.em-page #nav a:focus-visible, .em-page #nav button:focus-visible, .em-page .nav-mobile-overlay a:focus-visible { outline: 3px solid var(--em-violet); outline-offset: 2px; border-radius: 8px; }

/* ---------- Footer del sito: superficie chiara ---------- */
.em-page footer { background: var(--em-paper-2); border-top: 1px solid var(--em-line); color: var(--em-ink); padding-bottom: 24px; }
.em-page footer .nav-logo { color: var(--em-ink); }
.em-page footer .logo-icon { box-shadow: var(--em-sh-1), inset 0 0 0 1px var(--em-line); }
.em-page .footer-brand p, .em-page .footer-col a, .em-page .footer-hours, .em-page .footer-bottom p,
.em-page .footer-bottom-links a, .em-page .footer-bottom-links button { color: var(--em-muted); }
.em-page .footer-col h4 { color: var(--em-ink); }
.em-page .footer-col a:hover { color: var(--em-ink); }
.em-page .footer-contact-link { color: var(--em-muted) !important; }
.em-page .footer-contact-link:hover { color: var(--em-violet-ink) !important; }
.em-page .footer-contact-link svg { color: var(--em-cyan-ink); }
.em-page .footer-hours { border-top-color: var(--em-line); }
.em-page .footer-hours svg { color: var(--em-green-ink); }
.em-page .footer-hours strong, .em-page .trust-made-in strong { color: var(--em-ink); }
.em-page .footer-trust { border-color: var(--em-line); }
.em-page .trust-made-in { color: var(--em-ink-2); }
.em-page .trust-flag { box-shadow: 0 0 0 1px var(--em-line), 0 1px 3px rgba(20, 16, 50, .15); }
.em-page .trust-badge { background: #fff; border-color: var(--em-line); color: var(--em-ink-2); }
.em-page .trust-badge:hover { background: #fff; border-color: rgba(124, 77, 255, .3); color: var(--em-ink); }
.em-page .trust-badge.ssl svg { color: var(--em-green-ink); }
.em-page .trust-badge.gdpr svg { color: var(--em-blue-ink); }
.em-page .trust-badge.pci svg { color: var(--em-cyan-ink); }
.em-page .trust-badge.uptime svg { color: var(--em-violet-ink); }
.em-page .footer-bottom { border-top: 0; padding-top: 4px; padding-right: 96px; }
.em-page .footer-bottom-links a:hover, .em-page .footer-bottom-links button:hover { color: var(--em-violet-ink); }
.em-page footer a:focus-visible, .em-page footer button:focus-visible { outline: 3px solid var(--em-violet); outline-offset: 2px; border-radius: 6px; }

/* ---------- Pulsanti ---------- */
.em-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 16px/1.2 var(--em-font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .4s var(--em-spring), box-shadow .35s var(--em-ease), background-color .25s, color .25s, border-color .25s;
}
.em-btn--primary { background: var(--em-ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(11, 16, 32, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
.em-btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(120deg, rgba(124, 77, 255, .0) 10%, rgba(124, 77, 255, .55) 50%, rgba(0, 229, 255, .45) 90%);
  transition: opacity .35s var(--em-ease);
}
.em-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(91, 46, 224, .75); }
.em-btn--primary:hover::after { opacity: .55; }
.em-btn--ghost { background: transparent; color: var(--em-ink); box-shadow: inset 0 0 0 1.5px var(--em-line-2); }
.em-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--em-violet); color: var(--em-violet-ink); transform: translateY(-2px); }
.em-btn:active { transform: translateY(0) scale(.98); }
.em-btn:focus-visible { outline: 3px solid var(--em-violet); outline-offset: 3px; }
.em-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.em-ctas--center { justify-content: center; }

/* ---------- Tipografia editoriale ---------- */
.em-h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.032em; word-spacing: .06em; font-weight: 800; color: var(--em-ink); text-wrap: balance; }
.em-h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; font-weight: 700; color: var(--em-ink); }
.em-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--em-violet-ink); }
.em-kicker-n {
  display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 8px;
  font-size: 13px; letter-spacing: .04em; color: var(--em-violet-ink); background: var(--em-lilac); box-shadow: inset 0 0 0 1px var(--em-lilac-2);
}
.em-kicker::after { content: ""; flex: 1; height: 1px; max-width: 120px; background: linear-gradient(90deg, var(--em-lilac-2), transparent); }
.em-head { max-width: 860px; margin-bottom: 56px; }
.em-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 56px; align-items: end; margin-bottom: 44px; }
.em-head--split .em-kicker { grid-column: 1 / -1; }
.em-head--split .em-head-p { margin-top: 0; font-size: 18px; }
.em-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.em-head--center .em-kicker { justify-content: center; }
.em-head--center .em-kicker::after { display: none; }
.em-head-p { margin-top: 20px; font-size: 20px; line-height: 1.6; color: var(--em-muted); max-width: 720px; }
.em-head--center .em-head-p { margin-left: auto; margin-right: auto; }
.em-prose-lead { font-size: 21px; line-height: 1.6; color: var(--em-ink-2); margin: 24px 0 18px; }
.em-main > p { color: var(--em-muted); margin-bottom: 16px; }
.em-more { font-size: 16px; color: var(--em-muted); margin-top: 18px; }
.em-sec { padding: var(--em-sec) 0; position: relative; }
.em-cols { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: 64px; }
.em-side { position: relative; }
.em-side .em-kicker::after { display: none; }
.em-pull {
  position: sticky; top: 112px; margin-top: 8px; padding-left: 18px; border-left: 3px solid var(--em-violet);
  font-size: 22px; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; color: var(--em-violet-deep);
}
.em-side-p { font-size: 16px; color: var(--em-muted); }

/* liste */
.em-list { display: grid; gap: 12px; }
.em-list li { position: relative; padding-left: 30px; color: var(--em-ink-2); font-size: 17px; line-height: 1.6; }
.em-list--yes li::before, .em-list--no li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--em-green-ink) no-repeat center / 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.em-list--no li::before {
  background-color: #9A3B46;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.em-list--dots li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 8px; height: 8px; border-radius: 3px; background: var(--em-violet); transform: rotate(45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.em-hero { position: relative; padding: 108px 0 72px; overflow: clip; background: var(--em-paper); isolation: isolate; }
.em-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(var(--em-dot) 1.1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 78%);
}
.em-hero::after {
  content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; right: -160px; top: -200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 77, 255, .14), rgba(0, 229, 255, .06) 55%, transparent 72%);
}
.em-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.em-crumbs ol { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--em-faint); }
.em-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--em-line-2); }
.em-crumbs a { color: var(--em-muted); text-decoration: none; }
.em-crumbs a:hover { color: var(--em-violet-ink); }
.em-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 18px; padding: 7px 14px 7px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--em-ink-2); background: #fff; box-shadow: var(--em-sh-1), inset 0 0 0 1px var(--em-line);
}
.em-eyebrow-dot { width: 10px; height: 10px; border-radius: 50%; background: conic-gradient(var(--em-violet), var(--em-cyan), var(--em-violet)); box-shadow: 0 0 0 3px var(--em-lilac); }
.em-h1 { font-weight: 800; letter-spacing: -.045em; word-spacing: .07em; color: var(--em-ink); }
.em-h1-k { display: block; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: var(--em-violet-ink); margin-bottom: 10px; }
.em-h1-big { display: block; font-size: clamp(42px, 4.5vw, 66px); line-height: 1; text-wrap: balance; }
.em-h1-big em {
  font-style: normal; background: linear-gradient(100deg, var(--em-violet-ink) 10%, var(--em-violet) 55%, #0090AB 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.em-lead { margin-top: 22px; font-size: 18px; line-height: 1.62; color: var(--em-muted); max-width: 540px; }
.em-hero .em-ctas { margin-top: 28px; }
.em-hero-facts { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--em-muted); }
.em-hero-facts li { display: inline-flex; align-items: center; gap: 7px; }
.em-hero-facts .em-ic { width: 16px; height: 16px; color: var(--em-violet-ink); }
/* ingresso del testo: solo movimento, il testo resta visibile (LCP) */
.js .em-hero-copy > * { animation: em-rise .9s var(--em-ease) both; }
.js .em-hero-copy > :nth-child(2) { animation-delay: .05s; }
.js .em-hero-copy > :nth-child(3) { animation-delay: .1s; }
.js .em-hero-copy > :nth-child(4) { animation-delay: .16s; }
.js .em-hero-copy > :nth-child(5) { animation-delay: .22s; }
.js .em-hero-copy > :nth-child(6) { animation-delay: .28s; }
@keyframes em-rise { from { transform: translateY(14px); } to { transform: none; } }

/* il canvas */
.em-hero-art { position: relative; }
.em-canvas {
  position: relative; border-radius: 24px; background: #fff; overflow: hidden;
  box-shadow: var(--em-sh-3), inset 0 0 0 1px var(--em-line);
}
.em-canvas::before {
  content: ""; position: absolute; inset: 48px 0 0; pointer-events: none;
  background-image: radial-gradient(rgba(38, 44, 61, .13) 1px, transparent 1.2px); background-size: 18px 18px; background-position: 9px 9px;
}
.em-canvas-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--em-line); background: rgba(251, 250, 255, .9); font-size: 13px; }
.em-cb-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--em-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.em-cb-title .em-ic { width: 16px; height: 16px; color: var(--em-violet-ink); }
.em-cb-tag { flex: none; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--em-amber-ink); background: #FFF4DB; }
.em-cb-btns { margin-left: auto; display: flex; gap: 6px; flex: none; }
.em-cb-btns > span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; font-weight: 600; font-size: 12px; color: var(--em-ink-2); box-shadow: inset 0 0 0 1px var(--em-line-2); background: #fff; }
.em-cb-btns .em-cb-go { color: #fff; background: var(--em-green-ink); box-shadow: none; }
.em-cb-btns .em-cb-go .em-ic { width: 11px; height: 11px; }

/* grafo dei nodi (hero e simulatore) */
.em-flow { position: relative; display: grid; }
.em-edges { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.em-edge { fill: none; stroke: #B9BFCF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s, opacity .35s, stroke-width .35s; }
.em-edge--yes { stroke: var(--em-green-2); }
.em-edge--no { stroke: var(--em-red); }
.em-edge--reply { stroke: var(--em-violet); stroke-dasharray: 2 7; }
.em-elabel {
  position: absolute; left: 0; top: 0; z-index: 2; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: .02em;
  background: #fff; box-shadow: inset 0 0 0 1.5px currentColor; pointer-events: none; transition: opacity .35s;
}
.em-elabel--yes { color: var(--em-green-ink); }
.em-elabel--no { color: var(--em-red-ink); }
.em-elabel--reply { color: var(--em-violet-ink); }
.em-node {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; align-self: center;
  padding: 11px 13px 12px; border-radius: 14px; background: #fff; box-shadow: var(--em-sh-1), inset 0 0 0 1.5px var(--c-line, var(--em-line-2));
  transition: transform .5s var(--em-spring), box-shadow .35s var(--em-ease), opacity .35s;
}
.em-node-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--c-ink); }
.em-node-k .em-ic { width: 14px; height: 14px; }
.em-node-t { font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--em-ink-2); }
.em-node-t b { font-weight: 700; color: var(--em-violet-ink); }
.em-node--email { --c-ink: var(--em-violet-ink); --c-line: #D8CCFF; --c-glow: rgba(124, 77, 255, .32); }
.em-node--wait { --c-ink: var(--em-amber-ink); --c-line: #FFDE9C; --c-glow: rgba(255, 176, 32, .34); }
.em-node--cond { --c-ink: var(--em-blue-ink); --c-line: #C3D4FF; --c-glow: rgba(47, 107, 255, .3); }
.em-node--exit { --c-ink: var(--em-violet-ink); --c-line: #CDBDFF; --c-glow: rgba(124, 77, 255, .34); background: linear-gradient(180deg, #FBF9FF, #F3EEFF); }
.em-node--end { --c-ink: var(--em-faint); --c-line: var(--em-line-2); --c-glow: rgba(38, 44, 61, .18); background: #FAFAFC; }
.em-node.is-active { transform: translateY(-3px) scale(1.035); box-shadow: 0 0 0 4px var(--c-glow), 0 14px 30px -14px var(--c-glow), inset 0 0 0 1.5px var(--c-ink); }
.em-pulse {
  position: absolute; left: -7px; top: -7px; z-index: 3; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: var(--p-c, var(--em-violet)); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 7px var(--p-g, rgba(124, 77, 255, .28)), 0 4px 14px var(--p-g, rgba(124, 77, 255, .4));
  transition: opacity .25s; will-change: transform;
}
.em-pulse.is-on { opacity: 1; }
.em-pulse[data-k="yes"] { --p-c: var(--em-green-2); --p-g: rgba(18, 194, 106, .3); }
.em-pulse[data-k="no"] { --p-c: var(--em-red); --p-g: rgba(240, 75, 85, .28); }

/* layout del grafo hero */
.em-flow--hero {
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 34px; row-gap: 34px;
  grid-template-areas: ". rp . e2" "e1 w1 c1 ." ". . . e4";
  padding: 34px 28px 96px;
}
.em-flow--hero [data-node="e1"] { grid-area: e1; }
.em-flow--hero [data-node="w1"] { grid-area: w1; }
.em-flow--hero [data-node="c1"] { grid-area: c1; }
.em-flow--hero [data-node="e2"] { grid-area: e2; }
.em-flow--hero [data-node="e4"] { grid-area: e4; }
.em-flow--hero [data-node="rp"] { grid-area: rp; }
.em-flow--hero [data-node="e1"]::before {
  content: ""; position: absolute; left: -22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: var(--em-green-2); box-shadow: 0 0 0 4px rgba(18, 194, 106, .18);
}
/* comparsa del grafo hero (solo con JS e movimento consentito) */
.js .em-flow--hero.is-pre .em-node { opacity: 0; transform: translateY(10px) scale(.94); }
.js .em-flow--hero.is-pre .em-elabel { opacity: 0; }
.js .em-flow--hero.is-pre .em-node.is-shown { opacity: 1; transform: none; }
.js .em-flow--hero.is-pre .em-elabel.is-shown { opacity: 1; }
/* rete di sicurezza: se lo script non parte, il grafo compare comunque */
.js .em-flow--hero.is-pre .em-node:not(.is-shown) { animation: em-failsafe .4s 6s forwards; }
@keyframes em-failsafe { to { opacity: 1; transform: none; } }

/* il redattore AI */
.em-writer {
  position: relative; z-index: 2; width: min(400px, 82%); margin: -76px 0 0 -26px; border-radius: 18px; background: rgba(255, 255, 255, .96);
  box-shadow: var(--em-sh-3), inset 0 0 0 1px var(--em-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden;
}
.em-writer-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 12.5px; font-weight: 700; color: var(--em-ink-2); border-bottom: 1px solid var(--em-line); background: linear-gradient(90deg, #F7F3FF, #F0FCFE); }
.em-writer-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--em-violet), #00B8D4); }
.em-writer-badge .em-ic { width: 14px; height: 14px; }
.em-writer-stack { display: grid; }
.em-wl { grid-area: 1 / 1; padding: 14px 16px 15px; display: grid; gap: 7px; opacity: 0; transition: opacity .55s var(--em-ease); }
.em-wl.is-on { opacity: 1; }
.em-wl p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--em-ink-2); }
.em-wl-to, .em-wl-subj { display: flex; gap: 10px; align-items: baseline; }
.em-wl-l { flex: none; width: 64px; white-space: nowrap; overflow-wrap: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--em-faint); }
.em-wl-line { font-weight: 600; color: var(--em-ink); min-width: 0; overflow-wrap: anywhere; }
.em-wl-to > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.em-wl-h { font-weight: 700; color: var(--em-ink) !important; font-size: 15px !important; letter-spacing: -.01em; padding-top: 4px; border-top: 1px dashed var(--em-line); }
.em-wl-out { display: flex; align-items: center; gap: 8px; margin-top: 2px !important; font-size: 12.5px !important; font-weight: 700; color: var(--em-violet-ink) !important; }
.em-wl-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(124, 77, 255, .18); }
.em-wl-out--yes { color: var(--em-green-ink) !important; }
.em-wl-out--no { color: var(--em-red-ink) !important; }
.em-var { display: inline-block; padding: 0 6px; border-radius: 6px; font-weight: 700; color: var(--em-violet-ink); background: var(--em-lilac); box-shadow: inset 0 0 0 1px var(--em-lilac-2); font-feature-settings: normal; }
.em-fill { display: inline; padding: 0 3px; border-radius: 4px; font-weight: 700; color: var(--em-ink); background: linear-gradient(transparent 58%, rgba(0, 229, 255, .32) 58%); }
[data-pop] { transition: transform .45s var(--em-spring), opacity .3s; }
.js .is-typing [data-pop] { opacity: 0; transform: scale(.6); }
.js .is-typing [data-fade] { opacity: 0; transform: translateY(6px); }
[data-fade] { transition: opacity .5s var(--em-ease), transform .5s var(--em-ease); }
.em-caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--em-violet); animation: em-blink 1s steps(2) infinite; }
@keyframes em-blink { to { opacity: 0; } }

.em-hero-cap { display: flex; align-items: center; justify-content: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-top: 18px; padding-left: 4px; font-size: 14px; color: var(--em-muted); }
.em-hero-cap p { margin: 0; }
.em-still-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 var(--em-font); color: var(--em-ink-2); background: #fff; box-shadow: var(--em-sh-1), inset 0 0 0 1px var(--em-line-2);
  transition: box-shadow .25s, color .25s;
}
.em-still-btn[hidden] { display: none; }
.em-still-btn:hover { color: var(--em-violet-ink); box-shadow: var(--em-sh-1), inset 0 0 0 1.5px var(--em-violet); }
.em-still-btn:focus-visible { outline: 3px solid var(--em-violet); outline-offset: 3px; }
.em-still-btn .em-ic { width: 14px; height: 14px; }
.em-still-btn .em-ic-play { display: none; }
.em-still .em-still-btn .em-ic-play { display: block; }
.em-still .em-still-btn .em-ic-pause { display: none; }

/* striscia dei numeri */
.em-ticker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 88px; border-top: 1px solid var(--em-line); border-bottom: 1px solid var(--em-line); }
.em-ticker li { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 26px 0; }
.em-ticker li + li { padding-left: 24px; border-left: 1px solid var(--em-line); }
.em-ticker strong { font-size: 34px; line-height: 1; letter-spacing: -.035em; font-weight: 800; color: var(--em-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 761px) and (max-width: 980px) { .em-ticker strong { font-size: 28px; } .em-ticker li { padding-right: 16px; } .em-ticker li + li { padding-left: 16px; } }
.em-ticker span { font-size: 15px; line-height: 1.45; color: var(--em-muted); }

/* ==========================================================================
   SEZIONI
   ========================================================================== */
/* 01 */
.em-intro { padding-top: 112px; }
.em-dofa { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px 0 8px; }
.em-dofa-col { padding: 26px 26px 28px; border-radius: 20px; background: var(--em-paper-2); box-shadow: inset 0 0 0 1px var(--em-line); }
.em-dofa-col .em-h3 { margin-bottom: 16px; font-size: 18px; }

/* 02 */
.em-builder { background: linear-gradient(180deg, var(--em-paper-2), var(--em-lilac) 70%, var(--em-paper-2)); }
.em-builder::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--em-dot) 1px, transparent 1.2px); background-size: 22px 22px; opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.em-builder .em-wrap { position: relative; }
.em-bricks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 48px; counter-reset: brick; }
.em-brick {
  position: relative; padding: 28px 26px 30px; border-radius: 22px; background: #fff; box-shadow: var(--em-sh-2), inset 0 0 0 1.5px var(--c-line);
  transition: transform .5s var(--em-spring), box-shadow .35s;
}
.em-brick:hover { transform: translateY(-4px); box-shadow: var(--em-sh-3), inset 0 0 0 1.5px var(--c-ink); }
.em-brick--email { --c-ink: var(--em-violet-ink); --c-line: #DED3FF; }
.em-brick--wait { --c-ink: var(--em-amber-ink); --c-line: #FFE3A8; }
.em-brick--cond { --c-ink: var(--em-blue-ink); --c-line: #CCDAFF; }
.em-brick-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; color: var(--c-ink); background: color-mix(in srgb, var(--c-line) 45%, #fff); box-shadow: inset 0 0 0 1px var(--c-line); }
.em-brick-ic .em-ic { width: 22px; height: 22px; }
.em-brick .em-h3 { margin-bottom: 10px; }
.em-brick p { font-size: 16px; line-height: 1.6; color: var(--em-muted); }
.em-brick:not(:last-child)::after {
  content: ""; position: absolute; right: -20px; top: 50%; width: 20px; height: 2px; background: repeating-linear-gradient(90deg, var(--em-line-2) 0 4px, transparent 4px 8px);
}

/* schermate */
.em-shot { margin: 0; }
.em-shot-frame {
  position: relative; border-radius: 20px; overflow: hidden; background: #0D1117; aspect-ratio: var(--ar, auto);
  box-shadow: 0 0 0 1px rgba(11, 16, 32, .08), 0 2px 4px rgba(11, 16, 32, .05), 0 30px 60px -26px rgba(48, 24, 140, .38);
}
.em-shot-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
.em-shot img { width: 100%; }
.em-shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--em-muted); }
.em-shot--wide .em-shot-frame { --ar: auto; }
.em-specs { margin-top: 64px; padding: 36px 36px 38px; border-radius: 24px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px var(--em-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.em-specs-t { margin-bottom: 24px; }
.em-specs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; }
.em-specs-grid dt { font-size: 15px; font-weight: 700; color: var(--em-ink); margin-bottom: 6px; }
.em-specs-grid dd { font-size: 15.5px; line-height: 1.58; color: var(--em-muted); }

/* 03 simulatore */
.em-sim { display: block; }
.em-sim-controls { grid-area: ctl; position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 16px 28px; }
.em-seg { border: 0; min-width: 0; }
.em-seg legend { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--em-ink-2); }
.em-seg-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--em-line-2); width: fit-content; max-width: 100%; }
.em-seg-opts label { position: relative; cursor: pointer; }
.em-seg-opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.em-seg-opts span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--em-ink-2); transition: background .25s, color .25s, box-shadow .25s; }
.em-seg-opts label:hover span { color: var(--em-violet-ink); }
.em-seg-opts input:checked + span { color: #fff; background: var(--em-ink); box-shadow: 0 6px 14px -8px rgba(11, 16, 32, .6); }
.em-seg-opts input:focus-visible + span { outline: 3px solid var(--em-violet); outline-offset: 2px; }
.em-seg-opts input:disabled + span { color: #9AA0AF; cursor: not-allowed; }
.em-seg-opts input:disabled:checked + span { color: #fff; background: #9AA0AF; box-shadow: none; }
.em-seg[disabled] .em-seg-opts { opacity: .7; }
.em-seg-note { margin-top: 8px; font-size: 13.5px; color: var(--em-muted); }
.em-sim-out { grid-area: out; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding: 20px 22px; border-radius: 18px; background: var(--em-ink); color: #E8EAF2; box-shadow: var(--em-sh-2); }
.em-sim-route { font-size: 15px; line-height: 1.55; color: #C9CDDA; min-height: 3.1em; }
.em-sim-stats { display: grid; grid-template-columns: auto auto minmax(0, 300px); gap: 12px; }
.em-sim-stats > div { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); min-width: 0; }
.em-sim-stats dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A3A9BA; margin-bottom: 4px; }
.em-sim-stats dd { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.em-sim-crm dd { font-size: 14.5px; font-weight: 600; letter-spacing: 0; line-height: 1.5; color: #E8EAF2; }
.em-heat { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.em-heat--hot { color: #2B0A0A; background: #FF8A80; }
.em-heat--warm { color: #2B1A00; background: #FFC857; }
.em-heat--cold { color: #06233A; background: #8FD3FF; }
.em-sim-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "ctl out" "flow flow" "cap cap"; gap: 18px 28px; padding: 24px 26px 18px; border-radius: 26px; background: #fff; box-shadow: var(--em-sh-2), inset 0 0 0 1px var(--em-line); position: relative; overflow: hidden; }
.em-sim-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(38, 44, 61, .12) 1px, transparent 1.2px); background-size: 18px 18px; }
.em-flow--sim {
  grid-area: flow; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 26px; row-gap: 24px; padding: 18px 6px 14px; border-top: 1px solid var(--em-line);
  grid-template-areas: ". . . e2 w2 c2 e3" "e1 w1 c1 . . . end" ". rp . w3 e4 . .";
}
.em-flow--sim [data-node] { grid-area: var(--a); }
.em-flow--sim [data-node="e1"] { --a: e1; } .em-flow--sim [data-node="w1"] { --a: w1; } .em-flow--sim [data-node="c1"] { --a: c1; }
.em-flow--sim [data-node="e2"] { --a: e2; } .em-flow--sim [data-node="w2"] { --a: w2; } .em-flow--sim [data-node="c2"] { --a: c2; }
.em-flow--sim [data-node="e3"] { --a: e3; } .em-flow--sim [data-node="end"] { --a: end; } .em-flow--sim [data-node="w3"] { --a: w3; }
.em-flow--sim [data-node="e4"] { --a: e4; } .em-flow--sim [data-node="rp"] { --a: rp; }
.em-flow--sim .em-node.is-dim { opacity: .38; }
.em-flow--sim .em-edge.is-dim { opacity: .22; }
.em-flow--sim .em-elabel.is-dim { opacity: .35; }
.em-flow--sim .em-node.is-on { box-shadow: var(--em-sh-1), inset 0 0 0 2px var(--c-ink); }
.em-flow--sim .em-edge.is-on { stroke-width: 3; }
.em-flow--sim .em-edge:not(.em-edge--yes):not(.em-edge--no):not(.em-edge--reply).is-on { stroke: var(--em-ink-2); }
.em-board-cap { grid-area: cap; position: relative; margin-top: 0; font-size: 13.5px; color: var(--em-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.em-rules { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: 64px; }
.em-rules-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 36px; }
.em-rules-list li { padding-top: 16px; border-top: 1px solid var(--em-line); font-size: 16px; line-height: 1.6; color: var(--em-muted); }
.em-rules-list strong { display: block; margin-bottom: 4px; font-size: 16.5px; color: var(--em-ink); }

/* 04 AI */
.em-ai { background: linear-gradient(180deg, var(--em-paper) 0%, var(--em-cyan-wash) 45%, var(--em-paper) 100%); }
.em-story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, 1.1fr); gap: 22px; align-items: stretch; }
.em-story-col { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: var(--em-sh-2), inset 0 0 0 1px var(--em-line); min-width: 0; }
.em-story-col:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; right: -18px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px var(--em-violet), 0 0 0 4px var(--em-cyan-wash);
}
.em-step { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--em-faint); }
.em-step span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; letter-spacing: 0; color: #fff; background: var(--em-violet-ink); }
.em-brief { flex: 1; padding: 18px; border-radius: 16px; font-size: 16.5px; line-height: 1.6; color: var(--em-ink-2); background: var(--em-paper-2); box-shadow: inset 0 0 0 1px var(--em-line); }
.em-gen { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--em-violet-deep), var(--em-violet-ink) 55%, var(--em-violet)); box-shadow: 0 10px 22px -12px rgba(91, 46, 224, .8), 0 0 0 3px rgba(0, 229, 255, .18); }
.em-gen .em-ic { width: 16px; height: 16px; }
.em-mail { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--em-line-2); overflow: hidden; }
.em-mail-to, .em-mail-subj { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--em-line); color: var(--em-ink-2); overflow-wrap: anywhere; }
.em-mail-l { flex: none; width: 64px; white-space: nowrap; overflow-wrap: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--em-faint); }
.em-mail-line { font-weight: 600; color: var(--em-ink); min-width: 0; }
.em-mail-body { padding: 14px 16px 16px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.58; color: var(--em-ink-2); background: #FCFCFE; }
.em-mail-h { font-size: 17px; line-height: 1.3; font-weight: 800; letter-spacing: -.015em; color: var(--em-ink); }
.em-mail-btn { display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: #fff; background: #047A55; }
.em-mail mark { padding: 0 3px; border-radius: 4px; color: var(--em-ink); font-weight: 700; background: linear-gradient(transparent 55%, rgba(0, 229, 255, .38) 55%); }
.em-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: var(--em-paper-2); box-shadow: inset 0 0 0 1px var(--em-line); }
.em-tabs button { flex: 1 1 auto; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer; font: 600 13.5px/1 var(--em-font); color: var(--em-ink-2); background: transparent; transition: background .25s, color .25s, box-shadow .25s; }
.em-tabs button:hover { color: var(--em-violet-ink); }
.em-tabs button[aria-selected="true"] { color: var(--em-violet-ink); background: #fff; box-shadow: var(--em-sh-1), inset 0 0 0 1px var(--em-lilac-2); }
.em-tabs button:focus-visible { outline: 3px solid var(--em-violet); outline-offset: 2px; }
.em-panels { display: grid; }
.em-pan { grid-area: 1 / 1; }
.em-pan[hidden] { display: block !important; visibility: hidden; }
.js .em-pan { transition: opacity .35s var(--em-ease), transform .35s var(--em-ease); }
.js .em-pan[hidden] { opacity: 0; transform: translateY(6px); }
.em-pan:focus-visible { outline: 3px solid var(--em-violet); outline-offset: 3px; }
.em-story-cap { margin-top: 14px; font-size: 14px; color: var(--em-muted); }
.em-ai-grid { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 56px; align-items: center; }
.em-ai-facts .em-h3 { font-size: 26px; letter-spacing: -.025em; margin-bottom: 20px; }
.em-shot--wide2 { grid-column: 1 / -1; }

/* 05 deliverability */
.em-deliv { background: var(--em-paper); }
.em-warm { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: end; }
.em-warm-copy .em-h3, .em-senders-copy .em-h3, .em-dns .em-h3 { display: flex; align-items: center; gap: 10px; font-size: 24px; letter-spacing: -.02em; margin-bottom: 14px; }
.em-warm-copy .em-h3 .em-ic, .em-senders-copy .em-h3 .em-ic, .em-dns .em-h3 .em-ic { width: 24px; height: 24px; color: var(--em-violet-ink); }
.em-warm-copy > p, .em-senders-copy > p { color: var(--em-muted); margin-bottom: 18px; }
.em-stairs { margin: 0; padding: 26px 26px 18px; border-radius: 24px; background: linear-gradient(180deg, #FBFAFF, #F4F0FF); box-shadow: inset 0 0 0 1px var(--em-line); }
.em-stairs-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 300px; }
.em-stairs-list li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.em-st-bar {
  display: block; width: 100%; height: max(var(--h), 10px); border-radius: 10px 10px 4px 4px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--em-violet), #9E7BFF 60%, #BFE9F2); box-shadow: inset 0 0 0 1px rgba(91, 46, 224, .25);
  transition: transform 1s var(--em-ease);
}
.em-stairs-list li:last-child .em-st-bar { background: linear-gradient(180deg, var(--em-violet-ink), var(--em-violet) 50%, var(--em-cyan)); }
.em-stairs-list strong { order: -1; margin-bottom: 6px; font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--em-ink); font-variant-numeric: tabular-nums; }
.em-stairs-list span:not(.em-st-bar) { margin-top: 8px; font-size: 12.5px; line-height: 1.3; color: var(--em-muted); }
.em-stairs figcaption { margin-top: 14px; font-size: 13.5px; color: var(--em-muted); }
.js .em-warm:not(.is-in) .em-st-bar { transform: scaleY(.04); }
.em-warm .em-stairs-list li:nth-child(2) .em-st-bar { transition-delay: .08s; }
.em-warm .em-stairs-list li:nth-child(3) .em-st-bar { transition-delay: .16s; }
.em-warm .em-stairs-list li:nth-child(4) .em-st-bar { transition-delay: .24s; }
.em-warm .em-stairs-list li:nth-child(5) .em-st-bar { transition-delay: .32s; }
.em-warm .em-stairs-list li:nth-child(6) .em-st-bar { transition-delay: .4s; }

.em-senders { margin-top: 96px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.em-route { position: relative; padding: 24px; border-radius: 24px; background: var(--em-cyan-wash); box-shadow: inset 0 0 0 1px #D3F1F7; }
.em-route-q { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.em-route-l { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--em-cyan-ink); margin-bottom: 2px; }
.em-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--em-ink-2);
  background: #fff; box-shadow: var(--em-sh-1), inset 0 0 0 1px var(--em-line);
  transition: transform .6s var(--em-spring), box-shadow .4s; transition-delay: calc(var(--i) * 90ms + .2s);
}
.em-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #C5CAD6; transition: background .4s; transition-delay: inherit; }
.em-route.is-in .em-chip:nth-child(even)::before, .is-in .em-route .em-chip:nth-child(even)::before { background: var(--em-violet); }
.em-route.is-in .em-chip:nth-child(odd)::before, .is-in .em-route .em-chip:nth-child(odd)::before { background: var(--em-cyan-ink); }
.js .em-senders:not(.is-in) .em-chip { transform: translateY(8px); }
.em-route-s { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.em-sender { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--em-sh-1), inset 0 0 0 1.5px var(--s-c); min-width: 0; }
.em-sender span:last-child { min-width: 0; }
/* l'indirizzo va a capo invece di essere tagliato: la differenza fra i due mittenti è proprio nel dominio */
.em-sender b { display: block; font-size: 13.5px; line-height: 1.35; color: var(--em-ink); overflow-wrap: anywhere; }
.em-sender small { display: block; font-size: 12px; color: var(--em-muted); }
.em-sender-ic { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--s-c); }
.em-sender-ic .em-ic { width: 17px; height: 17px; }
.em-sender--a { --s-c: var(--em-cyan-ink); }
.em-sender--b { --s-c: var(--em-violet-ink); }
.em-route-cap { margin-top: 12px; font-size: 13px; color: var(--em-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }

.em-dns { margin-top: 96px; }
.em-dns-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; counter-reset: dns; }
.em-dns-steps li { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; background: var(--em-paper-2); box-shadow: inset 0 0 0 1px var(--em-line); }
.em-dns-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; font-weight: 800; color: var(--em-violet-ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--em-lilac-2); }
.em-dns-steps strong { display: block; font-size: 16.5px; color: var(--em-ink); margin-bottom: 6px; }
.em-dns-steps p { font-size: 15px; line-height: 1.58; color: var(--em-muted); }
.em-honest { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 18px 20px; border-radius: 16px; font-size: 16px; color: var(--em-ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--em-line-2); }
.em-honest .em-ic { flex: none; margin-top: 3px; color: var(--em-cyan-ink); }
.em-honest > span { min-width: 0; }
.em-deliv-shots { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; }
.em-shot--tall .em-shot-frame { max-width: 360px; }
.em-shot--mx .em-shot-frame { max-width: 640px; }

/* 06 tracking */
.em-track { background: linear-gradient(180deg, var(--em-lilac) 0%, var(--em-paper-2) 55%, var(--em-paper) 100%); }
.em-meter { padding: 36px 36px 28px; border-radius: 28px; background: #fff; box-shadow: var(--em-sh-3), inset 0 0 0 1px var(--em-line); }
.em-meter-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.em-meter-i { display: flex; flex-direction: column; gap: 8px; padding: 4px 22px; }
.em-meter-i + .em-meter-i { border-left: 1px solid var(--em-line); }
.em-meter-i:first-child { padding-left: 0; }
.em-meter-n { font-size: clamp(44px, 5vw, 72px); line-height: .95; font-weight: 800; letter-spacing: -.05em; color: var(--em-ink); font-variant-numeric: tabular-nums; }
.em-meter-i--hl .em-meter-n { background: linear-gradient(100deg, var(--em-violet-ink), var(--em-violet) 60%, #0090AB); -webkit-background-clip: text; background-clip: text; color: transparent; }
.em-meter-l { font-size: 15px; color: var(--em-muted); }
.em-meter-bar { margin-top: 28px; height: 10px; border-radius: 999px; background: var(--em-lilac); overflow: hidden; }
.em-meter-bar span { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--em-violet), var(--em-cyan)); transform-origin: left; transition: transform 1.4s var(--em-ease) .2s; }
.js .em-meter:not(.is-in) .em-meter-bar span { transform: scaleX(0); }
.em-meter-cap { margin-top: 14px; font-size: 14px; color: var(--em-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.em-track-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.em-track-col .em-h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 18px; }
.em-track-shots { margin-top: 64px; display: grid; gap: 48px; }

/* 07 regole */
.em-rulesec { background: var(--em-paper); }
.em-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--em-line); border-left: 1px solid var(--em-line); }
.em-tile { padding: 30px 28px 32px; border-right: 1px solid var(--em-line); border-bottom: 1px solid var(--em-line); transition: background .3s; }
.em-tile:hover { background: var(--em-paper-2); }
.em-tile > .em-ic { width: 26px; height: 26px; margin-bottom: 18px; color: var(--em-violet-ink); }
.em-tile .em-h3 { margin-bottom: 10px; font-size: 18.5px; }
.em-tile p { font-size: 15.5px; line-height: 1.6; color: var(--em-muted); }
.em-legalnote { margin-top: 28px; max-width: 860px; font-size: 15px; line-height: 1.6; color: var(--em-muted); }

/* 08 confronto */
.em-cmp { background: linear-gradient(180deg, var(--em-paper), var(--em-paper-2)); }
.em-table-wrap { margin: 28px 0 26px; border-radius: 20px; background: #fff; box-shadow: var(--em-sh-2), inset 0 0 0 1px var(--em-line); overflow: hidden; }
.em-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.em-table th, .em-table td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--em-line); line-height: 1.5; }
.em-table thead th { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--em-faint); background: var(--em-paper-2); }
.em-table thead th:last-child { color: var(--em-violet-ink); }
.em-table tbody th { font-weight: 700; color: var(--em-ink); width: 30%; }
.em-table td { color: var(--em-muted); }
.em-table td:last-child { color: var(--em-ink-2); font-weight: 600; background: linear-gradient(90deg, rgba(124, 77, 255, .05), rgba(124, 77, 255, .02)); }
.em-table tr:last-child th, .em-table tr:last-child td { border-bottom: 0; }
.em-tr-minus td:last-child { color: var(--em-muted); font-weight: 500; background: transparent; }
.em-tr-minus th::after { content: "a nostro sfavore"; display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--em-red-ink); }

/* 09 piani */
.em-plans { background: var(--em-paper-2); }
.em-billing { display: inline-flex; gap: 4px; margin-top: 26px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--em-line-2); }
.em-billing button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font: 600 14.5px/1 var(--em-font); color: var(--em-ink-2); background: transparent; transition: background .25s, color .25s; }
.em-billing button[aria-pressed="true"] { color: #fff; background: var(--em-ink); }
.em-billing button:focus-visible { outline: 3px solid var(--em-violet); outline-offset: 2px; }
.em-draft-tag { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--em-amber-ink); }
.em-draft-tag span { color: var(--em-amber); }
.em-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.em-plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px 30px; border-radius: 24px; background: #fff; box-shadow: var(--em-sh-1), inset 0 0 0 1px var(--em-line); }
.em-plan--hl { box-shadow: var(--em-sh-3), inset 0 0 0 2px var(--em-violet); }
.em-plan-badge { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--em-violet-ink); }
.em-plan-name { font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: var(--em-ink); }
.em-plan-for { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--em-muted); min-height: 3em; }
.em-price { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; }
.em-price-n { display: inline-block; min-width: 2ch; font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--em-ink); font-variant-numeric: tabular-nums; }
.em-price-u { font-size: 16px; font-weight: 600; color: var(--em-muted); }
.em-price-note { margin-top: 6px; min-height: 1.5em; font-size: 13.5px; color: var(--em-muted); }
.em-plan-list { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--em-line); display: grid; gap: 11px; }
.em-plan-list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--em-ink-2); }
.em-plan-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--em-green-ink) no-repeat center / 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.em-plan-list li.is-n { color: var(--em-faint); }
.em-plan-list li.is-n::before { background-color: #CDD1DB; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.em-plan-list li.is-n::after { content: " (non incluso)"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.em-noscript { margin-top: 18px; text-align: center; color: var(--em-muted); }
.em-usage { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.em-usage li { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--em-line); }
.em-usage strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--em-ink); }
.em-usage span { font-size: 15px; line-height: 1.5; color: var(--em-muted); }
.em-usage b { color: var(--em-ink-2); } /* senza larghezza minima: lasciava uno spazio prima della parentesi («€4  )») */
.em-trial { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--em-muted); }
.em-plans .em-ctas { margin-top: 28px; }

/* 10 FAQ */
.em-faq-list { margin-top: 28px; border-top: 1px solid var(--em-line); }
.em-q { border-bottom: 1px solid var(--em-line); }
.em-q summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 700; letter-spacing: -.012em; color: var(--em-ink); }
.em-q summary::-webkit-details-marker { display: none; }
.em-q summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--em-line-2);
  background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%235B2EE0' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform .35s var(--em-ease), box-shadow .25s, background-color .25s;
}
.em-q summary:hover::after { box-shadow: inset 0 0 0 1.5px var(--em-violet); }
.em-q[open] summary::after { transform: rotate(45deg); background-color: var(--em-lilac); }
.em-a { padding: 0 52px 24px 4px; font-size: 17px; line-height: 1.65; color: var(--em-muted); }

/* chiusura */
.em-end { padding: 40px 0 112px; }
.em-end-card {
  position: relative; overflow: hidden; text-align: center; padding: 72px 40px 64px; border-radius: 32px; isolation: isolate;
  background: linear-gradient(140deg, #F6F2FF 0%, #FFFFFF 45%, #EEFBFD 100%); box-shadow: var(--em-sh-2), inset 0 0 0 1px var(--em-line);
}
.em-end-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--em-dot) 1.1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.em-end-card .em-h2 { max-width: 820px; margin: 0 auto; }
.em-end-card > p { margin: 18px auto 30px; max-width: 620px; font-size: 19px; color: var(--em-muted); }
.em-end-flow { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.em-end-node { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #fff; box-shadow: var(--em-sh-2), inset 0 0 0 1.5px var(--n-c); color: var(--n-c); }
.em-end-node .em-ic { width: 22px; height: 22px; }
.em-end-node--a { --n-c: var(--em-violet-ink); }
.em-end-node--b { --n-c: var(--em-blue-ink); }
.em-end-node--c { --n-c: var(--em-green-ink); }
.em-end-line { width: 56px; height: 2px; background: linear-gradient(90deg, var(--em-line-2), var(--em-violet), var(--em-line-2)); background-size: 200% 100%; }
.em-index { margin-top: 72px; }
.em-index-t { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--em-faint); margin-bottom: 18px; }
.em-index ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--em-line); border-left: 1px solid var(--em-line); }
.em-index li { border-right: 1px solid var(--em-line); border-bottom: 1px solid var(--em-line); }
.em-index a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 18px 20px; text-decoration: none; transition: background .25s; }
.em-index a:hover { background: var(--em-lilac); }
.em-index b { font-size: 15.5px; color: var(--em-ink); }
.em-index span { font-size: 13.5px; line-height: 1.45; color: var(--em-muted); }
.em-index a:hover b { color: var(--em-violet-ink); }
.em-legal { margin-top: 36px; font-size: 13px; line-height: 1.6; color: var(--em-faint); max-width: 900px; }

/* comparsa delle sezioni */
.js [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--em-ease), transform .9s var(--em-ease); }
.js [data-rv].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .em-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .em-hero-copy { max-width: 760px; }
  .em-lead { max-width: 680px; }
  .em-writer { margin-left: 20px; }
  .em-flow--sim { column-gap: 18px; }
  .em-flow--sim .em-node { padding: 10px 11px 11px; }
  .em-flow--sim .em-node-t { font-size: 12.5px; }
  .em-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .em-story-sent { grid-column: 1 / -1; }
  .em-story-col:nth-child(2)::after { display: none; }
  .em-index ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  :root { --em-sec: 96px; }
  .em-cols, .em-rules { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .em-pull { position: static; margin-bottom: 20px; }
  .em-bricks { grid-template-columns: minmax(0, 1fr); }
  .em-brick:not(:last-child)::after { display: none; }
  .em-specs-grid { grid-template-columns: 1fr 1fr; }
  .em-sim-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ctl" "out" "flow" "cap"; }
  .em-head--split { grid-template-columns: minmax(0, 1fr); }
  .em-head--split .em-head-p { margin-top: 18px; }
  .em-flow--sim {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 28px;
    grid-template-areas: "e1 e1" "w1 rp" "c1 c1" "e2 w3" "w2 e4" "c2 end" "e3 .";
  }
  .em-flow--sim [data-node="e1"], .em-flow--sim [data-node="c1"] { justify-self: center; width: min(320px, 70%); }
  .em-warm, .em-senders, .em-deliv-shots, .em-ai-grid, .em-track-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .em-dns-steps { grid-template-columns: 1fr 1fr; }
  .em-meter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .em-meter-i:nth-child(4) { border-left: 0; padding-left: 0; }
  .em-tiles { grid-template-columns: 1fr 1fr; }
  .em-plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .em-usage { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .em-shot--tall .em-shot-frame { margin: 0 auto; }
}
@media (max-width: 760px) {
  :root { --em-gutter: 16px; --em-sec: 80px; }
  .em-page main { font-size: 17px; }
  .em-hero { padding: 100px 0 56px; }
  .em-lead { font-size: 17.5px; }
  .em-btn { min-height: 52px; padding: 0 22px; }
  .em-hero .em-ctas .em-btn { flex: 1 1 100%; }
  .em-canvas { border-radius: 18px; }
  .em-cb-btns > span:not(.em-cb-go) { display: none; }
  .em-cb-title { white-space: normal; line-height: 1.3; font-size: 13.5px; }
  .em-flow--hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 30px; padding: 26px 16px 84px;
    grid-template-areas: "e1 e1" "w1 rp" "c1 c1" "e2 e4";
  }
  .em-flow--hero [data-node="e1"], .em-flow--hero [data-node="c1"] { justify-self: center; width: min(250px, 78%); }
  .em-flow--hero [data-node="e1"]::before { left: -20px; }
  .em-node { padding: 10px 11px 11px; }
  .em-node-t { font-size: 13px; }
  .em-writer { width: calc(100% - 28px); margin: -60px auto 0; }
  .em-ticker { grid-template-columns: 1fr 1fr; margin-top: 64px; }
  .em-ticker li { padding: 20px 14px 20px 0; }
  .em-ticker li + li { padding-left: 14px; }
  .em-ticker li:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--em-line); }
  .em-ticker li:nth-child(4) { border-top: 1px solid var(--em-line); }
  .em-ticker strong { font-size: 28px; }
  .em-head { margin-bottom: 40px; }
  .em-head-p { font-size: 17.5px; }
  .em-prose-lead { font-size: 18.5px; }
  .em-dofa { grid-template-columns: minmax(0, 1fr); }
  .em-specs { padding: 24px 20px; }
  .em-specs-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .em-sim-out { padding: 18px; }
  .em-sim-controls { padding-bottom: 16px; }
  .em-seg { width: 100%; }
  .em-seg-opts { width: 100%; }
  .em-seg-opts label { flex: 1 1 auto; }
  .em-seg-opts span { width: 100%; justify-content: center; padding: 0 10px; }
  .em-sim-stats { grid-template-columns: 1fr 1fr; }
  .em-sim-crm { grid-column: 1 / -1; }
  .em-sim-board { padding: 18px 12px 14px; border-radius: 20px; }
  .em-flow--sim { column-gap: 12px; padding: 12px 2px 16px; }
  .em-story { grid-template-columns: minmax(0, 1fr); }
  .em-story-col::after { display: none; }
  .em-story-col { padding: 18px; }
  .em-rules-list { grid-template-columns: minmax(0, 1fr); }
  .em-stairs { padding: 20px 14px 14px; }
  .em-stairs-list { height: 240px; gap: 6px; }
  .em-stairs-list strong { font-size: 16px; }
  .em-stairs-list span:not(.em-st-bar) { font-size: 11.5px; }
  .em-route-s { grid-template-columns: minmax(0, 1fr); }
  .em-dns-steps { grid-template-columns: minmax(0, 1fr); }
  .em-meter { padding: 24px 20px 20px; }
  .em-meter-row { grid-template-columns: 1fr 1fr; }
  .em-meter-i { padding: 4px 14px; }
  .em-meter-i:nth-child(odd) { border-left: 0; padding-left: 0; }
  .em-meter-i:nth-child(4) { border-left: 1px solid var(--em-line); padding-left: 14px; }
  .em-meter-i:last-child { grid-column: 1 / -1; }
  .em-tiles { grid-template-columns: minmax(0, 1fr); }
  .em-tile { padding: 24px 20px; }
  .em-table thead { display: none; }
  .em-table, .em-table tbody, .em-table tr, .em-table th, .em-table td { display: block; width: 100%; }
  .em-table tr { padding: 14px 16px; border-bottom: 1px solid var(--em-line); }
  .em-table tbody th { width: 100%; padding: 0 0 8px; border: 0; }
  .em-table td { padding: 6px 10px 6px 0; border: 0; }
  .em-table td::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--em-faint); }
  .em-table td:last-child { margin-top: 6px; padding: 8px 10px; border-radius: 10px; }
  .em-table td:last-child::before { color: var(--em-violet-ink); }
  .em-q summary { font-size: 17px; padding: 18px 2px; }
  .em-a { padding: 0 8px 20px 2px; font-size: 16px; }
  .em-end-card { padding: 48px 20px 44px; border-radius: 24px; }
  .em-end-card > p { font-size: 17px; }
  .em-end-card .em-btn { flex: 1 1 100%; }
  .em-index ul { grid-template-columns: 1fr 1fr; }
  .em-index a { padding: 14px 12px 16px; }
  .em-page .footer-bottom { padding-right: 0; padding-bottom: 84px; }
}
@media (max-width: 400px) {
  .em-h1-big { font-size: 40px; }
  .em-flow--hero .em-node-k { font-size: 10.5px; }
  .em-flow--hero .em-node-t, .em-flow--sim .em-node-t { font-size: 12.5px; }
}

/* ---------- Movimento ridotto e «Ferma le animazioni» ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .js .em-hero-copy > * { animation: none !important; }
  .js [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .em-btn, .em-brick, .em-node, .em-chip, .em-st-bar, .em-meter-bar span, .em-wl, .em-pan, [data-fade], [data-pop], .em-q summary::after { transition: none !important; }
  .js .em-warm:not(.is-in) .em-st-bar, .js .em-meter:not(.is-in) .em-meter-bar span, .js .em-senders:not(.is-in) .em-chip { transform: none !important; }
  .em-caret::after { animation: none !important; }
  .em-pulse { display: none !important; }
  /* il pulsante sparisce già al primo disegno: niente spostamento del layout quando lo nasconde lo script */
  [data-still-toggle] { display: none !important; }
}
.em-still .em-pulse { display: none !important; }
.em-still .em-caret::after { animation: none; }

/* BOZZA (giudizio finale, uguale su tutte le bozze): «Supporto italiano 24h» (uffici lun-ven 9-18) e «Conforme GDPR» (promessa assoluta) nascosti qui; da togliere dal partial del footer. */
.em-page .trust-badge.gdpr, .em-page .trust-badge.uptime { display: none; }

/* Bolla della chat (comune): ferma con «Ferma le animazioni» e con il movimento ridotto, come nelle altre bozze. */
.em-still .msc-bubble { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .em-page .msc-bubble { animation: none !important; } }

/* ==========================================================================
   TABLET (iPad e Android, verticale e orizzontale)
   ========================================================================== */
/* iPad Pro 11 in orizzontale (1194): nella barra del canvas il titolo finiva coi puntini; va su due righe. */
@media (min-width: 1181px) and (max-width: 1279px) {
  .em-cb-title { white-space: normal; line-height: 1.25; }
}
/* «Continua a esplorare» (10 voci): niente voce orfana in ultima riga. */
@media (min-width: 981px) and (max-width: 1180px) {
  .em-index ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 980px) {
  .em-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Piani e consumi affiancati anche in verticale: si confrontano a colpo d'occhio
     invece di scorrere tre schede impilate larghe metà schermo. */
  .em-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: none; }
  .em-plan { padding: 26px 18px 24px; border-radius: 20px; }
  .em-plan-badge { left: 18px; }
  .em-plan-name { font-size: 21px; }
  .em-plan-for { min-height: 4.5em; font-size: 14.5px; }
  .em-price-n { font-size: 40px; }
  .em-price-u { font-size: 14.5px; }
  .em-plan-list { gap: 9px; }
  .em-plan-list li { font-size: 14.5px; padding-left: 26px; }
  .em-usage { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 14px; }
  .em-usage li { padding: 18px; }
  .em-usage strong { font-size: 20px; }
}

/* Al tocco: aree di almeno 44 px (Apple HIG / WCAG 2.5.5), senza cambiare l'aspetto col mouse. */
@media (pointer: coarse) {
  .em-still-btn { min-height: 44px; }
  .em-seg-opts span { min-height: 44px; }
  .em-tabs button { min-height: 44px; }
  .em-billing button { min-height: 44px; }
  /* briciole e link brevi: l'area si allarga in modo invisibile, il testo resta dov'è */
  .em-crumbs a { position: relative; }
  .em-crumbs a::after { content: ""; position: absolute; inset: -12px -6px; }
}

/* Senza mouse l'effetto al passaggio resterebbe «appiccicato» dopo il tocco. */
@media (hover: none) {
  .em-btn--primary:hover, .em-btn--ghost:hover, .em-brick:hover { transform: none; }
  .em-btn--primary:hover { box-shadow: 0 10px 24px -12px rgba(11, 16, 32, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
  .em-btn--primary:hover::after { opacity: 0; }
  .em-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--em-line-2); color: var(--em-ink); }
  .em-brick:hover { box-shadow: var(--em-sh-2), inset 0 0 0 1.5px var(--c-line); }
  .em-tile:hover { background: transparent; }
  .em-index a:hover { background: transparent; }
  .em-index a:hover b { color: var(--em-ink); }
  .em-still-btn:hover { color: var(--em-ink-2); box-shadow: var(--em-sh-1), inset 0 0 0 1px var(--em-line-2); }
  /* resta la risposta al tocco */
  .em-btn:active { transform: scale(.98); }
}