/* ==========================================================================
   claude-chatgpt.css — pagina /claude-chatgpt (connettore MCP per Claude e
   ChatGPT). Stile della pagina download (proposta B «Luminosa»): superfici
   chiare e ariose, aurora ciano/lilla, tipografia grande, fasce scure
   alternate, app vera dentro i dispositivi. Menu e footer sono quelli del sito
   (partials): qui se ne adatta solo l'aspetto alla pagina chiara.
   Animazioni solo su transform/opacity; movimento ridotto: tutto fermo.
   ========================================================================== */

:root {
  --mc-bg: #F7F9FC;
  --mc-bg-2: #EEF3F9;
  --mc-ink: #0A0C12;
  --mc-ink-2: #262B36;
  --mc-muted: #596072;
  --mc-faint: #8A90A0;
  --mc-line: rgba(15, 23, 42, .08);
  --mc-line-2: rgba(15, 23, 42, .14);
  --mc-cyan: #00E5FF;
  --mc-violet: #7C4DFF;
  --mc-green: #00E676;
  --mc-violet-ink: #6A3DF5;
  --mc-cyan-ink: #007A96;
  --mc-green-ink: #047A44;
  --mc-amber-ink: #A44A00;
  --mc-red-ink: #C81E4A;
  --mc-dark: #0A0C12;
  --mc-dark-2: #111827;
  --mc-dark-text: #A7AEBD;
  --mc-dark-line: rgba(255, 255, 255, .09);
  --mc-r: 28px;
  --mc-sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --mc-sh-2: 0 2px 4px rgba(16, 24, 40, .03), 0 14px 34px -10px rgba(16, 24, 40, .13);
  --mc-sh-3: 0 4px 10px rgba(16, 24, 40, .04), 0 34px 70px -18px rgba(16, 24, 40, .24);
  --mc-ease: cubic-bezier(.2, .8, .2, 1);
  --mc-ease-io: cubic-bezier(.65, 0, .35, 1);
  --mc-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --mc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mc-nav: 64px;
}

/* ---------- Base ---------- */
body.mc-page { background: var(--mc-bg); color: var(--mc-ink); font-family: var(--mc-font); -webkit-font-smoothing: antialiased; }
.mc-page main { display: block; font-size: 17px; line-height: 1.6; font-feature-settings: "cv11" 1; }
.mc-page main:focus { outline: none; }
.mc-page main ul, .mc-page main ol { list-style: none; }
.mc-page main img { max-width: 100%; height: auto; display: block; }
.mc-page [id] { scroll-margin-top: 88px; }
.mc-ic { width: 18px; height: 18px; flex: none; }
.mc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mc-page main a:not([class]) { color: var(--mc-violet-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(106, 61, 245, .35); text-underline-offset: 3px; }
.mc-page main a:not([class]):hover { text-decoration-color: currentColor; }
.mc-dark a:not([class]) { color: #C9B8FF !important; text-decoration-color: rgba(201, 184, 255, .45) !important; }
.mc-page main :focus-visible { outline: 3px solid var(--mc-violet); outline-offset: 3px; border-radius: 6px; }
.mc-dark :focus-visible { outline-color: var(--mc-cyan) !important; }
.mc-skip { position: fixed; left: 16px; top: -64px; z-index: 1100; padding: 10px 16px; border-radius: 12px; background: var(--mc-ink); color: #fff; font: 600 14px/20px var(--mc-font); text-decoration: none; transition: top .2s; }
.mc-skip:focus { top: 12px; }
.mc-page code { font-family: var(--mc-mono); }

/* ---------- Menu del sito: stessa struttura, aspetto chiaro ---------- */
.mc-page #nav { background: rgba(247, 249, 252, .62); 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; }
.mc-page #nav.mc-scrolled { background: rgba(255, 255, 255, .88); box-shadow: 0 1px 0 var(--mc-line), 0 10px 30px -18px rgba(16, 24, 40, .18); }
.mc-page .nav-logo, .mc-page .nav-logo a { color: var(--mc-ink) !important; letter-spacing: -.02em; }
.mc-page #nav .logo-icon { box-shadow: var(--mc-sh-1), inset 0 0 0 1px var(--mc-line); }
.mc-page .nav-links a { color: var(--mc-ink-2); }
.mc-page .nav-links a:hover { color: var(--mc-ink); }
.mc-page .nav-links a[href="/prezzi"] { color: var(--mc-violet-ink) !important; }
.mc-page .nav-dropdown-menu { background: rgba(255, 255, 255, .98); border-color: var(--mc-line); box-shadow: var(--mc-sh-3); }
.mc-page .mega-left { background: #F5F7FB; border-right-color: var(--mc-line); }
.mc-page .mega-label, .mc-page .mega-desc, .mc-page .ndm-text span { color: var(--mc-muted); }
.mc-page .mega-right a { color: var(--mc-ink) !important; }
.mc-page .mega-right a:hover { background: rgba(15, 23, 42, .045); }
.mc-page .ndm-text strong { color: var(--mc-ink); }
.mc-page .nav-auth { border-left-color: var(--mc-line); }
.mc-page .nav-login { color: var(--mc-ink) !important; border-color: var(--mc-line-2); border-radius: 999px; }
.mc-page .nav-login:hover { color: var(--mc-ink) !important; background: rgba(15, 23, 42, .04); border-color: rgba(15, 23, 42, .24); }
.mc-page .nav-cta { background: var(--mc-ink) !important; color: #fff !important; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(10, 12, 18, .6); }
.mc-page .nav-cta:hover { opacity: 1; box-shadow: 0 10px 22px -10px rgba(124, 77, 255, .7); }
.mc-page .nav-account-btn { background: #fff; border-color: var(--mc-line-2); color: var(--mc-ink) !important; box-shadow: var(--mc-sh-1); }
.mc-page .nav-account-btn:hover { background: #fff; border-color: rgba(124, 77, 255, .4); }
.mc-page .nav-hamburger span { background: var(--mc-ink); }
.mc-page .nav-mobile-overlay { top: var(--mc-nav); padding-top: 20px; background: rgba(247, 249, 252, .98); border-top: 1px solid var(--mc-line); }
.mc-page .nav-mobile-overlay a { color: var(--mc-ink); border-bottom-color: var(--mc-line); }
.mc-page .nav-mobile-overlay a:hover { color: var(--mc-violet-ink); }
.mc-page .nav-mobile-overlay .nav-auth { border-top-color: var(--mc-line); }
.mc-page #nav a:focus-visible, .mc-page #nav button:focus-visible, .mc-page .nav-mobile-overlay a:focus-visible { outline: 3px solid var(--mc-violet); outline-offset: 2px; border-radius: 8px; }

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


/* ---------- Pulsanti ---------- */
@property --mc-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mc-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; isolation: isolate;
  font: 600 16px/1.2 var(--mc-font); letter-spacing: -.01em; text-decoration: none; text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .4s var(--mc-spring), box-shadow .4s var(--mc-ease), background-color .25s, color .25s;
}
.mc-btn:hover { transform: translateY(-2px); }
.mc-btn:active { transform: scale(.97); transition-duration: .1s; }
.mc-btn-cta { color: #fff; background: transparent; box-shadow: 0 12px 26px -12px rgba(10, 12, 18, .7), 0 10px 30px -16px rgba(124, 77, 255, .55); }
/* Bordo luminoso: due giri all'arrivo, poi fermo; gira di nuovo solo al passaggio del mouse */
.mc-btn-cta::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--mc-ang), rgba(0, 229, 255, 0) 0deg, rgba(0, 229, 255, 0) 150deg, var(--mc-cyan) 230deg, var(--mc-violet) 300deg, rgba(124, 77, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: mc-ang 3.8s linear 2; }
.mc-btn-cta:hover::before { animation: mc-ang 3.8s linear infinite; }
.mc-btn-cta:hover { box-shadow: 0 16px 30px -12px rgba(10, 12, 18, .7), 0 18px 40px -14px rgba(124, 77, 255, .75), 0 8px 30px -14px rgba(0, 229, 255, .6); }
.mc-shine { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 140% at 50% -40%, #2a2f42 0%, var(--mc-ink) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.mc-shine::before { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); }
.mc-btn-cta:hover .mc-shine::before { animation: mc-shine .9s var(--mc-ease); }
.mc-btn-secondary { color: var(--mc-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--mc-line-2), 0 1px 2px rgba(16, 24, 40, .05), 0 10px 22px -14px rgba(16, 24, 40, .25); }
.mc-btn-secondary:hover { box-shadow: inset 0 0 0 1px rgba(124, 77, 255, .4), 0 16px 30px -16px rgba(124, 77, 255, .45); }
.mc-btn-light { color: var(--mc-ink); background: #fff; box-shadow: 0 14px 30px -16px rgba(0, 229, 255, .55); }
.mc-btn-light:hover { box-shadow: 0 18px 36px -14px rgba(124, 77, 255, .7); }
.mc-btn-outline { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.mc-btn-outline:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Titoli di sezione: tre pesi per dare ritmo ---------- */
.mc-sec { position: relative; padding: 120px 0 0; }
.mc-sec-last { padding-bottom: 96px; }
.mc-sec-tint { margin-top: 120px; padding: 112px 0; background: linear-gradient(180deg, #EDF1F8 0%, #F3F6FB 100%); box-shadow: inset 0 1px 0 var(--mc-line), inset 0 -1px 0 var(--mc-line); }
.mc-sec-tint + .mc-sec { padding-top: 112px; }
.mc-sec-head { max-width: 780px; margin: 0 0 40px; }
.mc-sec-head-wide { max-width: 920px; }
.mc-sec-head-c { margin-left: auto; margin-right: auto; text-align: center; }
.mc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mc-violet-ink); }
.mc-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--mc-cyan), var(--mc-violet)); }
.mc-eyebrow-now { color: var(--mc-green-ink); }
.mc-eyebrow-now::before { background: #10B861; box-shadow: 0 0 0 4px rgba(16, 184, 97, .16); }
.mc-eyebrow-next { color: var(--mc-amber-ink); }
.mc-eyebrow-next::before { background: transparent; box-shadow: inset 0 0 0 2px #E08A00; }
.mc-h2 { margin: 0; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.038em; font-weight: 800; color: var(--mc-ink); text-wrap: balance; }
.mc-h2-xl { font-size: clamp(42px, 6.2vw, 84px); line-height: .98; letter-spacing: -.045em; }
.mc-h2-calm { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -.022em; font-weight: 700; color: var(--mc-ink-2); }
.mc-sub { margin: 18px 0 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--mc-muted); text-wrap: pretty; }
.mc-sub-s { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--mc-muted); }
.mc-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--mc-muted); }
.mc-grad { background: linear-gradient(100deg, #4B2BD6 0%, #7C4DFF 40%, #0A8FB3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-grad-l { background: linear-gradient(100deg, #7FF0FF 0%, #B9A2FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-display { margin: 22px 0 6px; padding-left: 18px; border-left: 4px solid; border-image: linear-gradient(180deg, var(--mc-cyan), var(--mc-violet)) 1; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; color: var(--mc-ink); }
.mc-display-plain { margin: 12px 0 0; padding: 0; border: 0; }
.mc-display-plain .mc-grad { display: block; }
.mc-plans .mc-display-plain { font-size: clamp(30px, 3.4vw, 46px); }
.mc-display .mc-grad { padding-bottom: .06em; }

/* ---------- Hero ---------- */
.mc-hero { position: relative; padding: calc(var(--mc-nav) + 34px) 0 40px; overflow-x: clip; isolation: isolate; }
.mc-aurora { position: absolute; left: 0; right: 0; top: -60px; height: 1180px; z-index: -2; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.mc-aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.mc-aurora i:nth-child(1) { width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; left: -16vw; top: -18vw; background: radial-gradient(closest-side, rgba(0, 229, 255, .32), rgba(0, 229, 255, 0)); animation: mc-au1 26s var(--mc-ease-io) infinite alternate; }
.mc-aurora i:nth-child(2) { width: 58vw; height: 58vw; max-width: 920px; max-height: 920px; right: -14vw; top: -10vw; background: radial-gradient(closest-side, rgba(124, 77, 255, .26), rgba(124, 77, 255, 0)); animation: mc-au2 31s var(--mc-ease-io) infinite alternate; }
.mc-aurora i:nth-child(3) { width: 50vw; height: 50vw; max-width: 800px; max-height: 800px; left: 24%; top: 300px; background: radial-gradient(closest-side, rgba(190, 172, 255, .4), rgba(190, 172, 255, 0)); animation: mc-au3 28s var(--mc-ease-io) infinite alternate; }
.mc-aurora i:nth-child(4) { width: 44vw; height: 44vw; max-width: 720px; max-height: 720px; right: 6%; top: 420px; background: radial-gradient(closest-side, rgba(120, 214, 255, .34), rgba(120, 214, 255, 0)); animation: mc-au4 35s var(--mc-ease-io) infinite alternate; }
.mc-grid-bg { position: absolute; left: 0; right: 0; top: 0; height: 900px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(10, 12, 18, .045) 1px, transparent 1px), linear-gradient(to bottom, rgba(10, 12, 18, .045) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 0%, #000 25%, transparent 75%); }
.mc-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
.mc-hero-text { max-width: 640px; }
.mc-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; font-size: 13.5px; color: var(--mc-muted); }
.mc-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--mc-faint); }
.mc-crumbs a { color: var(--mc-muted) !important; font-weight: 500 !important; text-decoration: none !important; }
.mc-crumbs a:hover { color: var(--mc-ink) !important; }
.mc-chip { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 5px 16px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); box-shadow: var(--mc-sh-1), inset 0 0 0 1px var(--mc-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; font-weight: 600; color: var(--mc-ink-2); line-height: 1.2; }
.mc-chip-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--mc-ink); color: #fff; display: grid; place-items: center; flex: none; }
.mc-chip-ic .mc-ic { width: 15px; height: 15px; }
.mc-h1 { margin: 0; font-size: clamp(42px, 5.2vw, 70px); line-height: 1.0; letter-spacing: -.048em; font-weight: 800; color: var(--mc-ink); }
.mc-ln { display: inline; }
.mc-wd { display: inline; }
.mc-h1 .mc-grad { background: linear-gradient(100deg, #4B2BD6 0%, #7C4DFF 45%, #0A8FB3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.mc-lead { margin: 22px 0 0; max-width: 580px; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.55; color: var(--mc-muted); text-wrap: pretty; }
.mc-lead strong { color: var(--mc-ink); font-weight: 700; }
.mc-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Etichette di stato: «Oggi» (pieno, verde) e «In arrivo» (contorno, ambra) */
.mc-state { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; line-height: 1.35; white-space: nowrap; }
.mc-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mc-state-now { background: #EAFBF2; color: var(--mc-green-ink); box-shadow: inset 0 0 0 1px rgba(4, 122, 68, .18); }
.mc-state-next { background: #FFF5E0; color: var(--mc-amber-ink); box-shadow: inset 0 0 0 1px rgba(164, 74, 0, .22); }
.mc-state-next::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.mc-now { display: grid; gap: 8px; max-width: 540px; margin: 28px 0 0; padding: 0; }
.mc-now-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border-radius: 16px; border: 1px solid var(--mc-line); background: rgba(255, 255, 255, .78); box-shadow: var(--mc-sh-1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--mc-ink) !important; font-size: 15px; font-weight: 600 !important; line-height: 1.35; text-decoration: none !important;
  transition: box-shadow .3s var(--mc-ease), border-color .3s, transform .4s var(--mc-ease); }
.mc-now li + li .mc-now-row { border: 1px dashed rgba(164, 74, 0, .32); background: rgba(255, 255, 255, .5); box-shadow: none; color: var(--mc-ink-2) !important; }
.mc-now-row:hover { transform: translateY(-1px); border-color: rgba(124, 77, 255, .35) !important; box-shadow: var(--mc-sh-2); }
.mc-now .mc-state { min-width: 88px; justify-content: center; }
.mc-now-t { flex: 1; min-width: 0; }
.mc-now-go { width: 16px; height: 16px; color: var(--mc-faint); transition: transform .3s var(--mc-ease), color .3s; }
.mc-now-row:hover .mc-now-go { transform: translateY(2px); color: var(--mc-violet-ink); }

/* Ingresso iniziale: il testo sale; il visivo si muove SOLO con transform (resta visibile dal primo disegno) */
.js .mc-in-1 { animation: mc-fade-up .9s var(--mc-ease) .05s both; }
.js .mc-h1 .mc-ln:nth-child(1) .mc-wd { display: inline-block; animation: mc-word-up 1s var(--mc-ease) .1s both; }
.js .mc-h1 .mc-ln:nth-child(2) .mc-wd { display: inline-block; animation: mc-word-up 1s var(--mc-ease) .2s both; }
.js .mc-in-2 { animation: mc-fade-up 1s var(--mc-ease) .32s both; }
.js .mc-in-3 { animation: mc-fade-up 1s var(--mc-ease) .44s both; }
.js .mc-win { animation: mc-rise 1.2s var(--mc-ease) both; }
.js .mc-chat-hero { animation: mc-rise-2 1.2s var(--mc-ease) .08s both; }

/* Palco: finestra dell'app (ritaglio leggibile) e conversazione sovrapposta al bordo */
.mc-hero-visual { position: relative; min-width: 0; }
.mc-stage { position: relative; padding-top: 22px; }
.mc-halo { position: absolute; left: -12%; right: -12%; top: -4%; height: 92%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(124, 77, 255, .22), rgba(0, 229, 255, .13) 55%, rgba(0, 229, 255, 0)); animation: mc-halo 9s var(--mc-ease-io) infinite alternate; }
.mc-win { position: relative; margin: 0; border-radius: 18px; background: #0B0F14;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12), 0 0 0 7px rgba(255, 255, 255, .55), 0 2px 6px rgba(16, 24, 40, .08), 0 44px 90px -34px rgba(16, 24, 40, .5); }
.mc-win-bar { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 18px 18px 0 0; background: linear-gradient(#151B26, #10151D); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.mc-tl { display: flex; gap: 7px; }
.mc-tl i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.mc-tl i:nth-child(2) { background: #FEBC2E; }
.mc-tl i:nth-child(3) { background: #28C840; }
.mc-win-title { position: absolute; left: 84px; right: 260px; text-align: left; color: rgba(255, 255, 255, .78); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-win-title span { color: rgba(255, 255, 255, .5); font-weight: 500; }
.mc-win-body { position: relative; overflow: hidden; border-radius: 0 0 18px 18px; }
.mc-win-zoom { position: relative; width: 100%; }
.mc-win-zoom picture, .mc-win-zoom img { display: block; width: 100%; height: auto; max-width: none !important; }
.mc-hl { position: absolute; left: 1.2%; right: -2%; top: var(--t); height: var(--h); border-radius: 12px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 229, 255, .17), rgba(0, 229, 255, .05) 60%, rgba(0, 229, 255, 0));
  box-shadow: inset 0 0 0 2px rgba(0, 229, 255, .9), 0 0 26px rgba(0, 229, 255, .3);
  opacity: 0; transform: scaleX(.97); transform-origin: left center; transition: opacity .45s var(--mc-ease), transform .5s var(--mc-ease); }
.mc-hl.is-on { opacity: 1; transform: none; }
.mc-hl-hot { background: linear-gradient(90deg, rgba(255, 145, 50, .2), rgba(255, 145, 50, .05) 60%, rgba(255, 145, 50, 0)); box-shadow: inset 0 0 0 2px rgba(255, 166, 77, .95), 0 0 28px rgba(255, 138, 0, .3); }
html:not(.js) .mc-hl-hot { opacity: 1; transform: none; }
.mc-tag { position: absolute; top: -15px; right: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); font-size: 13px; font-weight: 600; color: var(--mc-ink-2); white-space: nowrap; }
.mc-tag-dot, .mc-dot-live { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mc-green); }
.mc-dot-live { width: 7px; height: 7px; background: #10B861; }
.mc-tag-dot::after, .mc-dot-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: mc-ping 2.4s var(--mc-ease) infinite; }

/* ---------- Conversazione (stile del sito, non quello di un assistente) ---------- */
.mc-chat { position: relative; border-radius: 22px; }
.mc-chat-hero { z-index: 4; width: min(450px, 80%); margin: -40px -14px 0 auto; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--mc-sh-3), inset 0 0 0 1px var(--mc-line); overflow: hidden; }
.mc-chat-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--mc-line); font-size: 14px; font-weight: 600; color: var(--mc-ink); }
.mc-ai-ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: var(--mc-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.mc-ai-ava .mc-ic { width: 16px; height: 16px; }
.mc-chat-title { white-space: nowrap; }
.mc-chat-conn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #EAFBF2; color: var(--mc-green-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mc-chat-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.mc-msg { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.mc-who { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-muted); }
.mc-msg-me { align-items: flex-end; }
.mc-bubble { display: inline-block; max-width: 88%; min-height: 1.5em; padding: 9px 15px; border-radius: 18px 18px 5px 18px; background: var(--mc-ink); color: #fff; font-size: 15px; line-height: 1.45; font-weight: 500; }
.mc-ans { font-size: 14.5px; line-height: 1.5; color: var(--mc-ink-2); }
.mc-ans p { margin: 0; }
.mc-ans p + p, .mc-ans p + ul, .mc-ans ul + p { margin-top: 8px; }
.mc-agenda { margin: 6px 0 0; padding: 0; }
.mc-agenda li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px dashed var(--mc-line-2); }
.mc-agenda li:last-child { border-bottom: 1px dashed var(--mc-line-2); }
.mc-agenda b { flex: none; min-width: 44px; font-variant-numeric: tabular-nums; color: var(--mc-violet-ink); font-weight: 700; }
.mc-agenda .mc-hot b { color: #C2410C; }
.mc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px !important; font-size: 12px; color: var(--mc-muted); }
.mc-tools .mc-ic { width: 14px; height: 14px; color: var(--mc-violet-ink); }
.mc-tools code, .mc-code-row code { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: #F1EDFF; color: #5B2FE0; }
.mc-msg-ai { position: relative; }
.mc-typing { position: absolute; left: 0; top: 24px; display: inline-flex; gap: 5px; align-items: center; height: 22px; padding: 0 2px; opacity: 0; }
.mc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mc-violet); opacity: .35; animation: mc-dot 1s var(--mc-ease-io) infinite; }
.mc-typing i:nth-child(2) { animation-delay: .15s; }
.mc-typing i:nth-child(3) { animation-delay: .3s; }
.mc-typing i { animation-play-state: paused; }
.mc-chat-hero.is-typing .mc-typing i { animation-play-state: running; }
/* Animazione dell'eroe. Lo stato nascosto arriva già dallo script in <head> (classe mc-chat-pre),
   quindi al primo disegno la risposta non compare per poi sparire. Nessuna transizione verso lo
   stato nascosto: si anima solo la comparsa. */
.mc-chat-pre .mc-chat-hero .mc-bubble, .mc-chat-hero.is-anim .mc-bubble.is-empty { opacity: 0; }
.mc-chat-pre .mc-chat-hero .mc-a-line, .mc-chat-hero.is-anim .mc-a-line { opacity: 0; transform: translateY(6px); }
.mc-chat-hero.is-anim.is-typing .mc-typing { opacity: 1; }
.mc-chat-hero.is-anim.is-ans .mc-a-line { opacity: 1; transform: none; transition: opacity .45s var(--mc-ease), transform .45s var(--mc-ease); transition-delay: calc(var(--i, 0) * 220ms); }
.mc-caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--mc-cyan); animation: mc-blink 1s steps(1) infinite; }
.mc-hero-note { max-width: 450px; margin-left: auto; margin-right: -14px; text-align: right; }

/* ---------- Cos'è ---------- */
.mc-split { display: grid; gap: 8px 56px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.mc-split .mc-sec-head { margin-bottom: 0; }
.mc-prose p { margin: 0 0 16px; font-size: 18px; line-height: 1.7; color: var(--mc-ink-2); text-wrap: pretty; }
.mc-prose strong { color: var(--mc-ink); }
.mc-flow { margin: 56px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; justify-items: center; }
.mc-node { position: relative; width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 24px 20px 22px; border-radius: 24px; background: #fff; box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); }
.mc-node-core { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--mc-cyan), var(--mc-violet)) border-box; border: 2px solid transparent; box-shadow: var(--mc-sh-3), 0 0 0 8px rgba(124, 77, 255, .06); }
.mc-node-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 8px; background: #F5F7FB; box-shadow: inset 0 0 0 1px var(--mc-line); color: var(--mc-ink); }
.mc-node-ic .mc-ic { width: 24px; height: 24px; }
.mc-node-ic img { width: 30px; height: 30px; border-radius: 8px; }
.mc-node-ic-ai { color: #fff; background: var(--mc-ink); box-shadow: 0 10px 22px -10px rgba(10, 12, 18, .6); }
.mc-node-ic-db { color: var(--mc-green-ink); background: #EAFBF2; }
.mc-node-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-violet-ink); }
.mc-node-t { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--mc-ink); }
.mc-node-d { font-size: 14.5px; color: var(--mc-muted); }
.mc-pipe { position: relative; width: 2px; height: 76px; }
.mc-pipe-line { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(124, 77, 255, .45) 0 6px, transparent 6px 12px); }
.mc-pipe i { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--mc-cyan); box-shadow: 0 0 0 4px rgba(0, 229, 255, .18); animation: mc-flow-y 2.4s linear infinite; }
.mc-pipe i:nth-of-type(2) { animation-delay: -1.2s; }
.mc-pipe i.mc-back { background: var(--mc-violet); box-shadow: 0 0 0 4px rgba(124, 77, 255, .18); animation-name: mc-flow-y-back; animation-duration: 3s; animation-delay: -.6s; }
.mc-pipe-lbl { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--mc-muted); }
.mc-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 56px 0 0; padding: 0; }
.mc-tile { padding: 26px 26px 24px; border-radius: 24px; background: #fff; box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); transition: transform .5s var(--mc-ease), box-shadow .5s var(--mc-ease); }
.mc-tile:hover { transform: translateY(-4px); box-shadow: var(--mc-sh-3), inset 0 0 0 1px var(--mc-line); }
.mc-tile-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--mc-violet-ink); background: linear-gradient(135deg, rgba(0, 229, 255, .14), rgba(124, 77, 255, .14)); }
.mc-tile-ic .mc-ic { width: 21px; height: 21px; }
.mc-tile h3 { margin: 16px 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; color: var(--mc-ink); }
.mc-tile p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mc-muted); }

/* ---------- Fasce scure ---------- */
.mc-dark { position: relative; margin-top: 120px; padding: 112px 0; background: var(--mc-dark); color: #fff; isolation: isolate; overflow: hidden; }
.mc-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); }
.mc-dark-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.mc-dark-glow i { position: absolute; border-radius: 50%; }
.mc-dark-glow i:nth-child(1) { width: 820px; height: 820px; left: -260px; top: -300px; background: radial-gradient(closest-side, rgba(0, 229, 255, .16), rgba(0, 229, 255, 0)); animation: mc-au2 30s var(--mc-ease-io) infinite alternate; }
.mc-dark-glow i:nth-child(2) { width: 900px; height: 900px; right: -320px; bottom: -380px; background: radial-gradient(closest-side, rgba(124, 77, 255, .22), rgba(124, 77, 255, 0)); animation: mc-au1 34s var(--mc-ease-io) infinite alternate; }
.mc-dark .mc-eyebrow { color: var(--mc-cyan); }
.mc-dark .mc-h2 { color: #fff; }
.mc-dark .mc-sub { color: var(--mc-dark-text); }
.mc-note-dark { color: var(--mc-dark-text); text-align: center; margin-top: 28px; }

/* ---------- Esempi ---------- */
.mc-ex .mc-sec-head-c { max-width: 860px; }
.mc-ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 12px; }
.mc-ex-grid > * { min-width: 0; }
.mc-ex-tabs { display: none; }
.js .mc-ex-tabs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 0 -2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.mc-ex-tab { position: relative; flex: none; width: 250px; scroll-snap-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2px 12px; padding: 15px 18px; border-radius: 16px; border: 0; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--mc-dark-line); color: #C4CAD6; font: 500 15.5px/1.4 var(--mc-font);
  transition: background-color .3s, box-shadow .3s, color .3s, transform .4s var(--mc-ease); }
.mc-ex-tab:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.mc-ex-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 18px 40px -22px rgba(124, 77, 255, .8); }
.mc-ex-tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--mc-cyan), var(--mc-violet)); }
.mc-ex-n { grid-row: span 2; font-family: var(--mc-mono); font-size: 12.5px; font-weight: 700; color: var(--mc-cyan); padding-top: 2px; }
.mc-ex-q { font-weight: 600; }
.mc-ex-plan { justify-self: start; margin-top: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #C9B8FF; background: rgba(124, 77, 255, .16); }
.mc-ex-plan-crm { color: #8FF0BE; background: rgba(0, 230, 118, .12); }
.mc-ex-plan-ads { color: #FFD08A; background: rgba(255, 170, 0, .14); }
.mc-ex-panels { display: grid; gap: 48px; }
/* Con JS resta nel flusso solo la scheda attiva: niente vuoti sotto le risposte brevi */
.js .mc-ex-panels { display: block; overflow: hidden; transition: height .45s var(--mc-ease); }
.js .mc-ex-panel { display: none; }
.js .mc-ex-panel.is-on { display: block; animation: mc-fade-up .5s var(--mc-ease) both; }
.mc-ex-h { margin: 0 0 14px; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.js .mc-ex-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mc-ex-req { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #DCD2FF; background: rgba(124, 77, 255, .14); box-shadow: inset 0 0 0 1px rgba(124, 77, 255, .3); }
.mc-ex-req .mc-ic { width: 15px; height: 15px; color: #B9A2FF; }
.mc-chat-dark { padding: 20px 22px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px var(--mc-dark-line), 0 30px 60px -30px rgba(0, 0, 0, .8); display: flex; flex-direction: column; gap: 14px; }
.mc-chat-dark .mc-who { color: #8D95A6; }
.mc-chat-dark .mc-bubble { background: #fff; color: var(--mc-ink); }
.mc-chat-dark .mc-ans { color: #D7DCE6; font-size: 15.5px; line-height: 1.6; }
.mc-chat-dark .mc-ans strong, .mc-chat-dark .mc-ans b { color: #fff; }
.mc-chat-dark .mc-agenda li { border-color: rgba(255, 255, 255, .1); }
.mc-chat-dark .mc-agenda b { color: #7FEAFF; min-width: 112px; }
.mc-chat-dark .mc-tools { color: #8D95A6; }
.mc-chat-dark .mc-tools .mc-ic { color: #B9A2FF; }
.mc-chat-dark .mc-tools code { background: rgba(124, 77, 255, .2); color: #D9CCFF; }
.mc-heat { margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mc-heat li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.mc-lv { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #FFB27A; background: rgba(255, 109, 0, .16); }
/* Ritagli dell'app: inquadrature strette, testo leggibile */
.mc-shot { margin: 18px 0 0; max-width: var(--mw, 640px); }
.mc-shot-wide { --mw: 100%; }
.mc-shot-tall { --mw: 460px; }
.mc-shot-frame { position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: 14px; background: #0B0F14; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.mc-shot-frame picture, .mc-shot-frame img { display: block; width: 100%; height: auto; }
.mc-shot:not(.mc-shot-tall) .mc-shot-frame { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.mc-shot figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--mc-dark-text); }
.js .mc-ex-panel.is-on .mc-a-line { animation: mc-fade-up .5s var(--mc-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* ---------- Che cosa può leggere ---------- */
.mc-caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mc-cap { position: relative; display: flex; flex-direction: column; padding: 30px 28px 26px; border-radius: var(--mc-r); background: #fff; box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); overflow: hidden; }
.mc-cap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan)); }
.mc-cap-mail::before { background: linear-gradient(90deg, var(--mc-cyan), var(--mc-violet)); }
.mc-cap-ads::before { background: linear-gradient(90deg, #FFC400, #FF8A00); }
.mc-cap-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-cap-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #EAFBF2; color: var(--mc-green-ink); flex: none; }
.mc-cap-mail .mc-cap-ic { background: #F1EDFF; color: var(--mc-violet-ink); }
.mc-cap-ads .mc-cap-ic { background: #FFF5E0; color: var(--mc-amber-ink); }
.mc-cap-ic .mc-ic { width: 22px; height: 22px; }
.mc-badge { display: inline-flex; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-align: right; }
.mc-badge-green { background: #EAFBF2; color: var(--mc-green-ink); }
.mc-badge-violet { background: #F1EDFF; color: var(--mc-violet-ink); }
.mc-badge-amber { background: #FFF5E0; color: var(--mc-amber-ink); }
.mc-cap h3 { margin: 18px 0 14px; font-size: 22px; line-height: 1.25; letter-spacing: -.025em; font-weight: 700; color: var(--mc-ink); }
.mc-checks { margin: 0; padding: 0; display: grid; gap: 10px; }
.mc-checks li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--mc-ink-2); }
.mc-checks .mc-ic { width: 17px; height: 17px; margin-top: 3px; color: var(--mc-green-ink); }
.mc-code-row { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 18px; border-top: 1px dashed var(--mc-line-2); }
.mc-checks + .mc-code-row { margin-top: 20px; }
.mc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--mc-violet-ink); text-decoration: none; }
.mc-more .mc-ic { width: 16px; height: 16px; transition: transform .3s var(--mc-ease); }
.mc-more:hover .mc-ic { transform: translateX(4px); }

/* ---------- In arrivo (roadmap) ---------- */
.mc-road-sec { isolation: isolate; }
.mc-road-glow { position: absolute; left: 0; right: 0; top: 60px; bottom: -60px; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 42% at 76% 58%, rgba(255, 190, 60, .13), transparent 70%), radial-gradient(40% 40% at 18% 55%, rgba(0, 230, 118, .09), transparent 70%); }
.mc-road { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.mc-road-now { position: relative; padding: 28px 26px 24px; border-radius: var(--mc-r); border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--mc-green), var(--mc-cyan)) border-box; box-shadow: var(--mc-sh-3), 0 0 0 8px rgba(0, 230, 118, .06); }
.mc-road-h { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 15px; font-weight: 700; color: var(--mc-ink); }
.mc-road-list { margin: 0; padding: 0; display: grid; gap: 18px; }
.mc-road-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--mc-muted); }
.mc-road-list b { display: block; margin-bottom: 2px; font-size: 16.5px; letter-spacing: -.01em; color: var(--mc-ink); }
.mc-road-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #EAFBF2; color: var(--mc-green-ink); }
.mc-road-ic .mc-ic { width: 19px; height: 19px; }
.mc-road-ic-mail { background: #F1EDFF; color: var(--mc-violet-ink); }
.mc-road-ic-ads { background: #FFF5E0; color: var(--mc-amber-ink); }
.mc-road-track { display: none; }
.mc-road-next { margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mc-next { position: relative; padding: 24px 24px 22px; border-radius: 24px; border: 1.5px dashed rgba(164, 74, 0, .3); background: rgba(255, 255, 255, .62);
  transition: transform .5s var(--mc-ease), background-color .4s, border-color .4s; }
.mc-next:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .95); border-color: rgba(164, 74, 0, .5); }
.mc-next-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-next-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--mc-amber-ink); background: rgba(255, 245, 224, .85); box-shadow: inset 0 0 0 1.5px rgba(164, 74, 0, .18); }
.mc-next-ic .mc-ic { width: 21px; height: 21px; }
.mc-next h3 { margin: 16px 0 8px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; color: var(--mc-ink); }
.mc-next p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mc-muted); }
.mc-next .mc-next-ex { margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(245, 247, 251, .95); box-shadow: inset 0 0 0 1px var(--mc-line); font-size: 14.5px; line-height: 1.5; font-style: italic; color: var(--mc-ink-2); }
.mc-next { display: flex; flex-direction: column; }
.mc-next .mc-next-goal { margin-top: auto; padding-top: 18px; font-size: 21px; line-height: 1.2; letter-spacing: -.03em; font-weight: 800;
  background: linear-gradient(100deg, #4B2BD6 0%, #7C4DFF 45%, #0A8FB3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-road-note { margin-top: 24px; }

/* ---------- Limiti ---------- */
.mc-limits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.mc-limits-text > p:not([class]) { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--mc-ink-2); max-width: 560px; }
.mc-nope { margin: 0; padding: 10px 28px; border-radius: var(--mc-r); background: #fff; box-shadow: var(--mc-sh-3), inset 0 0 0 1px var(--mc-line); }
.mc-nope li { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.mc-nope li + li { border-top: 1px solid var(--mc-line); }
.mc-nope-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #FFF1F3; color: var(--mc-red-ink); }
.mc-nope-ic .mc-ic { width: 15px; height: 15px; }
.mc-nope-t { font-size: 16px; line-height: 1.45; color: var(--mc-ink-2); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(200, 30, 74, 0); transition: text-decoration-color .8s var(--mc-ease); transition-delay: calc(var(--i, 0) * 110ms + .25s); }
.mc-nope.is-in .mc-nope-t, html:not(.js) .mc-nope-t { text-decoration-color: rgba(200, 30, 74, .55); }

/* ---------- Collegamento ---------- */
.mc-connect { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 56px; align-items: start; }
.mc-steps { position: relative; margin: 0; padding: 0; display: grid; gap: 14px; }
.mc-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 22px 24px 22px 20px; border-radius: 22px; background: #fff; box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); }
.mc-step-n { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #00B8D4, #7C4DFF); box-shadow: 0 10px 22px -12px rgba(124, 77, 255, .8); }
.mc-step h3 { margin: 6px 0 6px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; color: var(--mc-ink); }
.mc-step p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mc-muted); }
.mc-url { display: flex; gap: 8px; margin-top: 12px; padding: 6px; border-radius: 14px; background: #F3F5FA; box-shadow: inset 0 0 0 1px var(--mc-line-2); }
.mc-url-in { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 8px; font: 500 13.5px/1 var(--mc-mono); color: var(--mc-ink); text-overflow: ellipsis; }
.mc-url-in:focus-visible { outline: 2px solid var(--mc-violet); outline-offset: 2px; border-radius: 8px; }
.mc-url-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer; background: var(--mc-ink); color: #fff; font: 600 14px/1 var(--mc-font); transition: background-color .25s, transform .3s var(--mc-spring); }
.mc-url-btn:hover { background: #262B36; }
.mc-url-btn:active { transform: scale(.96); }
.mc-url-btn .mc-ic { width: 16px; height: 16px; }
.mc-url-btn.is-ok { background: var(--mc-green-ink); }
.mc-consent { margin: 0; position: relative; }
.mc-consent::before { content: ""; position: absolute; inset: 8% -6% -4% -6%; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, rgba(0, 229, 255, .22), rgba(124, 77, 255, .14) 60%, transparent); }
.mc-consent-card { position: relative; max-width: 440px; margin: 0 auto; padding: 26px 24px 22px; border-radius: 18px; color: #e5e7eb; font-size: 14px; line-height: 1.55;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 229, 255, .1), transparent 70%), #0d1320; box-shadow: 0 0 0 1px #1f2937, 0 30px 60px -24px rgba(4, 7, 13, .7); }
.mc-consent-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; margin-bottom: 18px; color: #fff; }
.mc-consent-brand img { border-radius: 8px; }
.mc-consent-h { margin: 0 0 8px; font-size: 20px; line-height: 1.3; font-weight: 700; color: #fff; }
.mc-consent-p { margin: 0 0 12px; color: #9ca3af; }
.mc-consent-p b, .mc-consent-perm b, .mc-consent-who b { color: #fff; }
.mc-consent-perm { padding: 12px 14px; border-radius: 12px; border: 1px solid #1f2937; font-size: 13.5px; }
.mc-consent-perm p { margin: 0; }
.mc-consent-no { margin-top: 6px !important; color: #9ca3af; }
.mc-consent-who { margin: 14px 0 4px; }
.mc-consent-small { margin: 0 0 6px; font-size: 12.5px; color: #9ca3af; }
.mc-consent-btn { display: block; margin-top: 10px; padding: 11px; border-radius: 10px; text-align: center; font-weight: 600; background: #00E5FF; color: #04070d; }
.mc-consent-btn-2 { background: #111827; color: #e5e7eb; box-shadow: inset 0 0 0 1px #1f2937; }
.js .mc-consent.is-in .mc-consent-btn:not(.mc-consent-btn-2) { animation: mc-press 4.5s var(--mc-ease) 1.2s 3; }
.mc-consent figcaption { margin: 14px auto 0; max-width: 440px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--mc-muted); }
.mc-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 40px; }
.mc-how-card { padding: 26px 26px 24px; border-radius: 22px; background: #fff; box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); }
.mc-how-card h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; font-weight: 700; color: var(--mc-ink); }
.mc-how-card p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--mc-muted); }
.mc-tip { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; padding: 14px 18px; border-radius: 16px; background: #F1EDFF; color: #3A2390; font-size: 15px; line-height: 1.55; }
.mc-tip .mc-ic { margin-top: 2px; color: var(--mc-violet-ink); }

/* ---------- Sicurezza ---------- */
.mc-sec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; }
.mc-sec-tile { padding: 26px 24px 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px var(--mc-dark-line); transition: transform .5s var(--mc-ease), box-shadow .5s var(--mc-ease); }
.mc-sec-tile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 50px -30px rgba(0, 229, 255, .45); }
.mc-sec-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--mc-cyan); background: rgba(0, 229, 255, .1); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .22); }
.mc-sec-ic .mc-ic { width: 21px; height: 21px; }
.mc-sec-tile h3 { margin: 16px 0 8px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; color: #fff; }
.mc-sec-tile p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mc-dark-text); }
.mc-bars { margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.mc-bars li { display: grid; gap: 6px; }
.mc-bar { position: relative; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mc-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mc-cyan), var(--mc-violet)); transform-origin: left center; transform: scaleX(var(--w)); }
.js .mc-sec-life:not(.is-in) .mc-bar i { transform: scaleX(0); }
.js .mc-sec-life .mc-bar i { transition: transform 1.4s var(--mc-ease) .3s; }
.js .mc-sec-life li:nth-child(2) .mc-bar i { transition-delay: .5s; }
.js .mc-sec-life li:nth-child(3) .mc-bar i { transition-delay: .7s; }
.mc-bar-t { font-size: 14.5px; line-height: 1.4; color: var(--mc-dark-text); }
.mc-bar-t b { color: #fff; margin-right: 6px; font-variant-numeric: tabular-nums; }

/* ---------- Per chi è ---------- */
.mc-who-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; padding: 0; }
.mc-who-card { padding: 26px 24px 24px; border-radius: 24px; background: #fff; box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); transition: transform .5s var(--mc-ease), box-shadow .5s var(--mc-ease); }
.mc-who-card:hover { transform: translateY(-4px); box-shadow: var(--mc-sh-3), inset 0 0 0 1px var(--mc-line); }
.mc-who-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--mc-cyan-ink); background: #E6FAFE; }
.mc-who-ic .mc-ic { width: 21px; height: 21px; }
.mc-who-card h3 { margin: 16px 0 8px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; color: var(--mc-ink); }
.mc-who-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mc-muted); }

/* ---------- Piani ---------- */
.mc-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.mc-plans .mc-sec-head { margin-bottom: 0; }
.mc-table-card { border-radius: var(--mc-r); background: #fff; box-shadow: var(--mc-sh-3), inset 0 0 0 1px var(--mc-line); overflow: hidden; }
.mc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mc-table th, .mc-table td { padding: 16px 12px; border-bottom: 1px solid var(--mc-line); }
.mc-table tbody tr:last-child th, .mc-table tbody tr:last-child td { border-bottom: 0; }
.mc-table thead th { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mc-muted); background: #F7F9FC; text-align: center; }
.mc-table thead th:first-child { text-align: left; padding-left: 22px; }
.mc-table tbody th { text-align: left; font-weight: 500; color: var(--mc-ink-2); line-height: 1.45; padding-left: 22px; }
.mc-table td { text-align: center; width: 13%; }
.mc-yes { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #EAFBF2; color: var(--mc-green-ink); vertical-align: middle; }
.mc-no { width: 22px; height: 22px; color: var(--mc-faint); vertical-align: middle; }
.mc-table tbody tr { transition: background-color .25s; }
.mc-table tbody tr:hover { background: #FAFBFE; }

/* ---------- FAQ ---------- */
.mc-faq-wrap { max-width: 920px; }
.mc-faq-list { border-radius: var(--mc-r); background: #fff; box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); overflow: hidden; }
.mc-qa + .mc-qa { box-shadow: inset 0 1px 0 var(--mc-line); }
.mc-qa summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 64px 20px 26px; cursor: pointer; list-style: none; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--mc-ink); transition: background-color .25s; }
.mc-qa summary::-webkit-details-marker { display: none; }
.mc-qa summary:hover { background: #FAFBFE; }
.mc-qa summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #F3F5FA;
  background-image: linear-gradient(var(--mc-ink-2), var(--mc-ink-2)), linear-gradient(var(--mc-ink-2), var(--mc-ink-2)); background-size: 10px 2px, 2px 10px; background-position: center; background-repeat: no-repeat; transition: transform .35s var(--mc-ease), background-color .25s; }
.mc-qa[open] summary::after { transform: rotate(45deg); background-color: #F1EDFF; }
.mc-qa summary:focus-visible { outline-offset: -3px; border-radius: 12px; }
.mc-qa-a { padding: 0 26px 22px; }
.mc-qa-a p { margin: 0; max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--mc-muted); }
.mc-qa[open] .mc-qa-a { animation: mc-fade-up .4s var(--mc-ease) both; }

/* ---------- CTA finale ---------- */
.mc-final { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding: 48px 32px; border-radius: 32px; background: var(--mc-dark); color: #fff; overflow: hidden; isolation: isolate; box-shadow: var(--mc-sh-3); }
.mc-final-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 0% 0%, rgba(0, 229, 255, .22), transparent 60%), radial-gradient(60% 90% at 100% 100%, rgba(124, 77, 255, .32), transparent 60%); }
.mc-final-h { margin: 0; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; color: #fff; text-wrap: balance; }
.mc-final-text p { margin: 14px 0 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--mc-dark-text); }
.mc-final .mc-final-text a:not([class]) { color: #C9B8FF !important; text-decoration-color: rgba(201, 184, 255, .45) !important; }
.mc-final-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.mc-legal { margin: 26px auto 0; max-width: 860px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--mc-muted); }

/* Rifinitura 17/10: voce «In arrivo» nella scheda Google Ads e traguardo a tutta larghezza */
.mc-cap-soon { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(164, 74, 0, .3); background: rgba(255, 245, 224, .45); font-size: 14.5px; line-height: 1.5; color: var(--mc-ink-2); }
.mc-cap-soon .mc-state { margin-top: 1px; }
.mc-cap-soon + .mc-code-row { margin-top: 20px; }
.mc-next-wide { grid-column: 1 / -1; }
.mc-h2-xl.mc-h2-sic { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; }
@media (min-width: 1000px) {
  .mc-road-sec .mc-road { align-items: start; }
  .mc-road > .mc-road-now { position: sticky; top: 104px; }
  .mc-road > .mc-road-track { position: sticky; top: 324px; margin: 220px 6px 220px; }
}

/* ---------- Comparsa allo scorrimento ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--mc-ease), transform .8s var(--mc-ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Animazioni continue ferme quando la loro sezione è fuori dallo schermo */
.mc-off, .mc-off *, .mc-off *::before, .mc-off *::after { animation-play-state: paused !important; }

/* ---------- Layout ampi ---------- */
@media (min-width: 640px) {
  .mc-sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-road-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-final { padding: 56px 52px; }
}
@media (min-width: 860px) {
  .mc-flow { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 120px minmax(0, 1fr); }
  .mc-node { max-width: none; }
  .mc-pipe { width: 100%; height: 2px; }
  .mc-pipe-line { background: repeating-linear-gradient(90deg, rgba(124, 77, 255, .45) 0 6px, transparent 6px 12px); }
  .mc-pipe i { left: 0; top: -4px; animation-name: mc-flow-x; }
  .mc-pipe i.mc-back { animation-name: mc-flow-x-back; }
  .mc-pipe-lbl { left: 50%; top: auto; bottom: 14px; transform: translateX(-50%); font-size: 11.5px; }
  .mc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-final { grid-template-columns: minmax(0, 1fr) auto; }
  .mc-final-cta { flex-direction: column; align-items: stretch; }
}
@media (min-width: 1000px) {
  .mc-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .mc-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-limits { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mc-connect { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mc-consent { position: sticky; top: 104px; }
  .mc-sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-ex-grid { grid-template-columns: 330px minmax(0, 1fr); gap: 36px; align-items: start; }
  .js .mc-ex-tabs { flex-direction: column; overflow: visible; padding: 0; margin: 0; position: sticky; top: 100px; }
  .mc-ex-tab { width: auto; }
  .mc-plans { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .mc-road { grid-template-columns: minmax(0, 4fr) 56px minmax(0, 7fr); gap: 0; }
  .mc-road-track { display: block; position: relative; height: 2px; margin: 0 6px; }
  .mc-road-line { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(164, 74, 0, .4) 0 6px, transparent 6px 12px); }
  .mc-road-track i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #FFB300; box-shadow: 0 0 0 4px rgba(255, 179, 0, .2); animation: mc-road-dot 2.6s linear infinite; }
}
/* Hero affiancato da 1100 px e, sui tablet in orizzontale, già da 1000 px (iPad 1024×768):
   prima a 1024 testo e finestra stavano in colonna, allineati a sinistra con un terzo di
   pagina vuoto a destra. */
@media (min-width: 1000px) and (max-width: 1099px) and (orientation: landscape) {
  .mc-hero { padding-top: calc(var(--mc-nav) + 30px); padding-bottom: 48px; }
  .mc-hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; }
  .mc-h1 { font-size: 46px; }
  .mc-hero .mc-cta-row { gap: 10px; }
  .mc-hero .mc-cta-row .mc-btn { padding: 0 18px; }
  .mc-hero-text, .mc-hero-visual { max-width: none; }
  .mc-chat-hero { margin-right: 0; }
  .mc-hero-note { margin-right: 0; }
}
@media (min-width: 1100px) {
  .mc-hero { padding-top: calc(var(--mc-nav) + 40px); padding-bottom: 56px; }
  .mc-hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
  /* I due pulsanti restano affiancati nella colonna dell'eroe anche con Inter caricato */
  .mc-hero .mc-cta-row { gap: 10px; }
  .mc-hero .mc-cta-row .mc-btn { padding: 0 20px; }
  .mc-win { margin-right: -36px; }
  .mc-chat-hero { margin-right: -10px; }
  .mc-hero-note { margin-right: -10px; }
  .mc-who-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .mc-h1 { font-size: 68px; }
}

/* ---------- Schermi stretti ---------- */
@media (max-width: 1099px) {
  .mc-hero-text { max-width: 720px; }
  .mc-hero-visual { max-width: 720px; }
  .mc-chat-hero { margin-right: 14px; }
  .mc-hero-note { margin-right: 14px; }
}
/* Esempi sui tablet in verticale (640-999 px): le sei domande in una griglia 3×2, tutte in
   vista, invece di una fila da scorrere col dito con metà delle domande fuori schermo.
   Sotto i 640 px (telefono) resta la fila scorrevole. */
@media (min-width: 640px) and (max-width: 999px) {
  .js .mc-ex-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
  .mc-ex-tab { width: auto; padding: 14px 16px; }
}
/* Hero in colonna sui tablet (es. iPad Pro 12,9 in verticale, 1024 px): testo e finestra
   centrati nella pagina invece che appoggiati a sinistra con un vuoto a destra. */
@media (min-width: 768px) and (max-width: 999px), (min-width: 768px) and (max-width: 1099px) and (orientation: portrait) {
  .mc-hero-text, .mc-hero-visual { margin-left: auto; margin-right: auto; width: 100%; }
}
@media (max-width: 639px) {
  .mc-wrap { padding: 0 16px; }
  .mc-sec { padding-top: 88px; }
  .mc-sec-tint { margin-top: 88px; padding: 80px 0; }
  .mc-sec-tint + .mc-sec { padding-top: 80px; }
  .mc-dark { margin-top: 88px; padding: 80px 0; }
  .mc-sec-head { margin-bottom: 28px; }
  .mc-btn { width: 100%; }
  .mc-cta-row { flex-direction: column; }
  .mc-now-row { font-size: 14.5px; }
  .mc-now .mc-state { min-width: 82px; }
  .mc-road-now { padding: 22px 20px 20px; }
  .mc-next { padding: 20px 18px 18px; }
  /* Eroe: il ritaglio si ingrandisce e si legge anche sul telefono */
  .mc-win { border-radius: 14px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12), 0 0 0 5px rgba(255, 255, 255, .55), 0 30px 60px -28px rgba(16, 24, 40, .5); }
  .mc-win-bar { height: 32px; border-radius: 14px 14px 0 0; padding: 0 12px; }
  .mc-tl i { width: 9px; height: 9px; }
  .mc-win-title { display: none; }
  .mc-win-body { border-radius: 0 0 14px 14px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .mc-win-zoom { width: 140%; }
  .mc-tag { right: 10px; top: -13px; font-size: 12px; padding: 6px 12px; }
  .mc-chat-hero { width: auto; margin: -10px 0 0; }
  .mc-hero-note { margin: 14px 0 0; text-align: left; max-width: none; }
  .mc-chat-head { gap: 8px; padding: 10px 12px; font-size: 13px; }
  .mc-chat-conn { padding: 3px 8px; font-size: 11.5px; gap: 5px; }
  .mc-chat-body { padding: 12px 14px 14px; }
  .mc-ans { font-size: 14px; }
  .mc-chat-dark { padding: 16px 16px 14px; }
  .mc-chat-dark .mc-agenda li { flex-direction: column; gap: 2px; }
  .mc-agenda li { gap: 10px; }
  .mc-shot { max-width: none; }
  .mc-shot-frame { aspect-ratio: var(--arm); }
  .mc-shot-frame picture { width: var(--mz); max-width: none; }
  .mc-shot-frame img { max-width: none !important; }
  .mc-shot:not(.mc-shot-tall) .mc-shot-frame { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .mc-cap, .mc-tile, .mc-who-card, .mc-how-card { padding: 22px 20px 20px; }
  /* Sicurezza compatta: icona a sinistra, testo a destra */
  .mc-sec-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .mc-sec-ic { width: 40px; height: 40px; border-radius: 12px; }
  .mc-sec-tile h3 { margin: 6px 0 4px; font-size: 17px; }
  .mc-sec-tile p { font-size: 15px; line-height: 1.55; }
  .mc-sec-grid { gap: 10px; }
  .mc-nope { padding: 4px 18px; }
  .mc-step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .mc-step-n { width: 40px; height: 40px; font-size: 16px; }
  .mc-url { flex-direction: column; }
  .mc-url-in { padding: 10px 8px; font-size: 12.5px; }
  .mc-url-btn { justify-content: center; }
  .mc-table { font-size: 13.5px; }
  .mc-table th, .mc-table td { padding: 12px 4px; }
  .mc-table td { width: 11%; }
  .mc-table tbody th, .mc-table thead th:first-child { padding-left: 14px; padding-right: 8px; }
  .mc-table thead th { font-size: 10.5px; letter-spacing: .02em; }
  .mc-yes, .mc-no { width: 20px; height: 20px; }
  .mc-qa summary { padding: 18px 56px 18px 18px; font-size: 16px; }
  .mc-qa summary::after { right: 16px; }
  .mc-qa-a { padding: 0 18px 20px; }
  .mc-final { padding: 36px 22px; border-radius: 26px; }
}

/* ---------- Tocco (tablet e telefono) ---------- */
/* Aree di tocco di almeno 44 px (dito, non mouse) */
@media (pointer: coarse) {
  .mc-crumbs ol { align-items: center; margin: -12px 0 6px; }
  .mc-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .mc-now-row { min-height: 44px; }
  .mc-more { min-height: 44px; }
  .mc-url-btn { min-height: 44px; }
}
/* Gli effetti del mouse non restano «appiccicati» dopo un tocco: schede sollevate, bordo
   luminoso del pulsante che continua a girare. Il feedback alla pressione (:active) resta. */
@media (hover: none) {
  .mc-btn:hover:not(:active) { transform: none; }
  .mc-btn-cta:hover::before { animation: mc-ang 3.8s linear 2; }
  .mc-btn-cta:hover .mc-shine::before { animation: none; }
  .mc-tile:hover, .mc-who-card:hover { transform: none; box-shadow: var(--mc-sh-2), inset 0 0 0 1px var(--mc-line); }
  .mc-sec-tile:hover { transform: none; box-shadow: inset 0 0 0 1px var(--mc-dark-line); }
  .mc-next:hover { transform: none; background: rgba(255, 255, 255, .62); border-color: rgba(164, 74, 0, .3); }
  .mc-now-row:hover { transform: none; border-color: var(--mc-line) !important; box-shadow: var(--mc-sh-1); }
  .mc-now li + li .mc-now-row:hover { border-color: rgba(164, 74, 0, .32) !important; box-shadow: none; }
  .mc-now-row:hover .mc-now-go, .mc-more:hover .mc-ic { transform: none; color: inherit; }
  .mc-now-row:hover .mc-now-go { color: var(--mc-faint); }
  .mc-ex-tab:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .035); color: #C4CAD6; }
  .mc-table tbody tr:hover, .mc-qa summary:hover { background: transparent; }
}

/* ---------- Animazioni (solo transform e opacity) ---------- */
@keyframes mc-au1 { to { transform: translate3d(14vw, 7vw, 0) scale(1.18); } }
@keyframes mc-au2 { to { transform: translate3d(-12vw, 9vw, 0) scale(.9); } }
@keyframes mc-au3 { to { transform: translate3d(-10vw, -6vw, 0) scale(1.2); } }
@keyframes mc-au4 { to { transform: translate3d(-16vw, -8vw, 0) scale(1.1); } }
@keyframes mc-halo { from { transform: scale(.94); opacity: .75; } to { transform: scale(1.05); opacity: 1; } }
@keyframes mc-ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes mc-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mc-word-up { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes mc-rise { from { transform: translateY(26px) scale(.985); } to { transform: none; } }
@keyframes mc-rise-2 { from { transform: translateY(44px); } to { transform: none; } }
@keyframes mc-ang { to { --mc-ang: 360deg; } }
@keyframes mc-shine { to { left: 120%; } }
@keyframes mc-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes mc-blink { 50% { opacity: 0; } }
@keyframes mc-flow-y { from { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(72px); opacity: 0; } }
@keyframes mc-flow-y-back { from { transform: translateY(72px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(-6px); opacity: 0; } }
@keyframes mc-flow-x { from { transform: translateX(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(116px); opacity: 0; } }
@keyframes mc-flow-x-back { from { transform: translateX(116px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(-6px); opacity: 0; } }
@keyframes mc-road-dot { from { transform: translateX(-4px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateX(34px); opacity: 0; } }
@keyframes mc-press { 0%, 70%, 100% { transform: none; } 76% { transform: scale(.96); } 84% { transform: none; } }

/* ---------- Movimento ridotto: tutto fermo e visibile ---------- */
@media (prefers-reduced-motion: reduce) {
  .mc-page *, .mc-page *::before, .mc-page *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .mc-sec-life:not(.is-in) .mc-bar i { transform: scaleX(var(--w)); }
  .mc-nope-t { text-decoration-color: rgba(200, 30, 74, .55); }
  .mc-pipe i, .mc-road-track i { display: none; }
  .mc-hl-hot { opacity: 1; transform: none; }
  .mc-btn:hover, .mc-tile:hover, .mc-who-card:hover, .mc-sec-tile:hover, .mc-next:hover, .mc-now-row:hover { transform: none; }
}