@property --agc-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/*
 * Archimedes marketing site theme.
 *
 * Ported from the approved design (rev.24). Served at
 * /api/cms/themes/archimedes.css and selected by putting the marketing
 * org's cms_brands row in Code mode with fixed_theme_name 'archimedes'.
 *
 * Fonts and the backdrop photo were base64 data-URIs in the source; they
 * now live under public/fonts/marketing and public/images/marketing so the
 * stylesheet stays small and cacheable.
 *
 * LICENCE: Tiempos Headline is a commercial face. The files here came with
 * the design and must be covered by a purchased licence before go-live.
 */

  @font-face {
    font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(/fonts/marketing/geist-100_900.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Tiempos Headline'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(/fonts/marketing/tiempos-headline-400.otf) format('opentype');
  }
  @font-face {
    font-family: 'Tiempos Headline'; font-style: normal; font-weight: 500; font-display: swap;
    src: url(/fonts/marketing/tiempos-headline-500.otf) format('opentype');
  }
  @font-face {
    font-family: 'Tiempos Headline'; font-style: normal; font-weight: 600; font-display: swap;
    src: url(/fonts/marketing/tiempos-headline-600.otf) format('opentype');
  }
  @font-face {
    font-family: 'Tiempos Headline'; font-style: normal; font-weight: 700; font-display: swap;
    src: url(/fonts/marketing/tiempos-headline-700.otf) format('opentype');
  }
  @font-face {
    font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
    src: url(/fonts/marketing/instrument-serif-400-italic.woff2) format('woff2');
  }

  :root {
    color-scheme: light;
    --paper: #FFFFFF; --card: #FFFFFF; --mist: #F6F6F4;
    --ink: #151412; --slate: #5F5E57; --faint: #93928A;
    --line: rgba(21, 20, 18, 0.09); --line-strong: rgba(21, 20, 18, 0.17);
    --accent: #2E5BFF; --accent-dark: #1F41C4;
    --ok: #1B9E5A; --ok-bg: #E7F5EC; --warn: #B7791F; --warn-bg: #FBF1DA; --info-bg: #EAF0FE;
    /* hero (invariata) */
    --royal: #0F4C9D; --electric: #4D65FF; --electric-dark: #3346D3; --sky: #EAF1FB; --navy: #0B2247;
    --sans: 'Geist', system-ui, sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --serif-d: 'Tiempos Headline', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  }

  * { box-sizing: border-box; }
  html, body { overflow-x: clip; }
  html {
    scroll-behavior: smooth;
    /* rev.17 — sfondo punteggiato su tutta la pagina (stessa texture delle card .dots) */
    background: var(--paper);
    background-image: radial-gradient(rgba(21, 20, 18, 0.10) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  body {
    /* niente background sul body: lo tiene html — così la riga curva di scroll
       (z-index -1) resta visibile dietro al contenuto */
    margin: 0; background: transparent; color: var(--ink);
    font-family: var(--sans); font-size: 16.5px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--accent); color: #fff; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

  html:not(.lang-it) .it { display: none !important; }
  html.lang-it .en { display: none !important; }

  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

  h1 { font-family: var(--serif-d); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; margin: 0; text-wrap: balance; }
  h2 {
    font-family: var(--serif-d); font-weight: 600; letter-spacing: -0.015em;
    line-height: 1.05; margin: 0; text-wrap: balance;
    font-size: clamp(38px, 5vw, 64px);
  }
  .serif-em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--electric); letter-spacing: -0.01em; }
  /* La seconda marca inline: sottolinea una parola, nient'altro. */
  .ul-em { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; text-decoration-color: var(--accent, #2E5BFF); }
  .label {
    display: block; font-size: 12.5px; font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 18px;
  }
  p.lede { color: var(--slate); max-width: 52ch; font-size: clamp(16px, 1.4vw, 18px); margin: 0; }
  p.lede b { color: var(--ink); font-weight: 700; }

  /* split section header: titolo bold a sinistra, lede grigio centrato a destra */
  .shead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px 84px; align-items: center; }
  .shead h2 { max-width: 14ch; }
  .shead .lede { max-width: 46ch; font-size: clamp(16px, 1.5vw, 18.5px); }
  .shead.centered { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; }
  .shead.centered h2 { max-width: 18ch; }
  /* Righe spezzate dall'autore: il limite in ch le rispezzerebbe. Stessa
     specificità di .shead.centered h2, e viene dopo — quindi vince. */
  .shead.shead--lines h2 { max-width: none; }
  .shead.centered .lede { max-width: 52ch; margin: 0 auto; }
  .label.centered { display: block; text-align: center; }

  /* Hidden only once the island has announced itself (html.arc-js). Without
     JavaScript nothing is hidden, so a visitor or a crawler whose scripts
     never run still gets the whole page rather than a blank one. */
  .arc-js .fade { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .arc-js .fade.in { opacity: 1; transform: none; }

  /* ============ NAV ============ */

  .nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 6px;
    padding: 11px 24px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .logo { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; margin-right: 14px; }
  .logo-a { height: 21px; width: auto; display: block; }
  .logo-a path { fill: var(--accent); }
  .logo-word { font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: 0.01em; color: var(--navy); }
  .logo-word .li { color: var(--accent); }
  .logo-hero { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 26px; }
  .logo-hero .logo-a { height: 40px; }
  .logo-hero .logo-word { font-size: 38px; }

  .nav-menu { display: flex; align-items: center; gap: 2px; }
  .nav-item { position: relative; }
  .nav-trigger, .nav-link {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink);
    padding: 9px 13px; border-radius: 10px;
  }
  .nav-trigger:hover, .nav-link:hover, .nav-item:focus-within .nav-trigger { background: var(--mist); }
  .nav-trigger .chev { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.6; fill: none; transition: transform 0.2s; }
  .nav-item:hover .nav-trigger .chev, .nav-item:focus-within .nav-trigger .chev { transform: rotate(180deg); }
  .mega {
    position: absolute; top: calc(100% + 10px); left: 0;
    min-width: 320px; background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: 0 26px 64px -26px rgba(21, 20, 18, 0.3);
    padding: 12px; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  }
  .nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
  .mega.wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .mega a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; text-decoration: none; }
  .mega a:hover { background: var(--mist); }
  .mega a .mi { width: 34px; height: 34px; border-radius: 9px; background: var(--mist); color: var(--ink); display: grid; place-items: center; flex: none; }
  .mega a .mi svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .mega a .mt { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
  .mega a .md { display: block; font-size: 12.5px; font-weight: 500; color: var(--slate); margin-top: 3px; }

  .nav-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
  .nav-textlink { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 9px 12px; border-radius: 10px; text-decoration: none; }
  .nav-textlink:hover { background: var(--mist); }
  .lang { display: flex; gap: 5px; font-size: 13px; font-weight: 800; color: var(--faint); align-items: center; padding: 0 8px; }
  .lang button { all: unset; cursor: pointer; font: inherit; padding: 2px 3px; color: var(--faint); }
  .lang button.on { color: var(--accent); }
  .lang button:hover { color: var(--ink); }

  .btn {
    white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--sans); font-size: 15.5px; font-weight: 700;
    padding: 13px 26px; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: none; }
  .btn-blue { background: var(--electric); color: #fff; }
  .btn-blue:hover { background: var(--electric-dark); }
  .btn-dark { background: var(--ink); color: #fff; }
  .btn-dark:hover { background: #2C2B26; }
  .btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-sm { padding: 9px 20px; font-size: 14px; }

  /* ============ HERO (invariata) ============ */
  .intro { position: relative; }
  .hero {
    position: relative; min-height: min(100vh, 880px);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; padding: 96px 24px 72px;
    background: radial-gradient(ellipse 92% 72% at 50% 38%, var(--sky), var(--paper) 68%);
  }
  .hero-icons { position: absolute; top: 0; left: 0; right: 0; height: 100vh; z-index: 20; pointer-events: none; }
  .float-icon { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; will-change: transform, opacity; }
  .float-mid { width: 100%; height: 100%; will-change: transform; }
  .float-inner {
    width: 100%; height: 100%; border-radius: 18px; background: #fff;
    border: 1px solid var(--line); box-shadow: 0 12px 28px -12px rgba(21, 20, 18, 0.28);
    display: grid; place-items: center;
    opacity: 0; transform: scale(0.4);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .float-inner.entered { opacity: 1; transform: none; }
  /* La deriva a riposo. La regola cercava .floating sul contenitore, ma l'island
     lo mette sulla tessera: le icone restavano ferme. */
  .float-inner.floating { animation: floatIdle var(--fdur, 7s) ease-in-out var(--fdelay, 0s) infinite; }
  .float-inner svg { width: 56%; height: 56%; }
  @keyframes floatIdle {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25% { translate: 4px -8px; rotate: 3deg; }
    50% { translate: 0 5px; rotate: 0deg; }
    75% { translate: -5px -4px; rotate: -3deg; }
  }
  .hero-content { position: relative; z-index: 10; text-align: center; max-width: 780px; margin: 0 auto; }
  /* ---- l'hero del Prodotto: gli strumenti esplodono via mentre scorri ----
     L'island scrive solo `--p` (0 fermo, 1 a metà hero); qui ogni logo ne
     ricava la sua fuga — direzione, velocità, rotazione, dissolvenza. */
  /* Sopra il testo: nell'esplosione i loghi vengono in primo piano. A riposo
     stanno attorno alla copia, quindi non la coprono. */
  .hero-burst { position: absolute; inset: 0; z-index: 12; pointer-events: none; --p: 0; }
  /* Tagliato solo in orizzontale: in verticale i loghi escono dal bordo mentre
     sbiadiscono, invece di essere tranciati a metà dal fondo dell'hero. */
  .hero.hero--burst { overflow: clip visible; }
  /* La corona di loghi è disegnata attorno a un titolo di due righe:
     «Dieci software in meno.» a 80px ne fa tre e spinge i bottoni sotto i
     loghi. A 72px sta in due righe e dentro la corona. */
  .hero.hero--burst h1 { font-size: clamp(40px, 5.6vw, 72px); }
  /* L'esplosione in due tempi, tutta da --p: prima vengono avanti (piene,
     nitide, più grandi, sopra il testo), poi volano via ingrandendosi e
     spariscono. min() tiene la profondità a riposo e la annulla appena
     parte lo scroll. */
  .hb-ic { position: absolute; left: calc(50% + var(--ox)); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); --o: 1; --bl: 0px;
    transform: translate(calc(var(--bx) * var(--p) * var(--k) * 30vw), calc(var(--by) * var(--p) * var(--k) * 26vh)) rotate(calc(var(--r) * var(--p))) scale(calc(1 + var(--p) * 1.9));
    opacity: min(calc(var(--o) + var(--p) * 3), calc(1.3 - var(--p) * 1.55)); will-change: transform, opacity; }
  .hb-ic.l2 { --o: 0.8; --bl: 0.4px; }
  .hb-ic.l3 { --o: 0.55; --bl: 1px; }
  .hb-tile { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 1px solid rgba(21, 20, 18, 0.07); box-shadow: 0 12px 26px -14px rgba(21, 20, 18, 0.3); filter: blur(max(0px, calc(var(--bl) - var(--p) * 5px))); }
  .hb-tile svg { width: 50%; height: 50%; }
  /* Entrata a scatto, poi la fluttuazione di sempre: `scale` e `translate`
     sono proprietà diverse, quindi le due animazioni non si pestano. */
  html.arc-js .hb-tile { opacity: 0; scale: 0.6; }
  html.arc-js .hero-burst.shown .hb-tile { animation: hbPop 0.7s var(--ease) var(--pd) forwards, floatIdle var(--fd, 7s) ease-in-out var(--pd) infinite; }
  @keyframes hbPop { to { opacity: 1; scale: 1; } }
  /* Un tablet non ha spazio per colonne e angoli: restano le fasce. */
  @media (max-width: 900px) { .hb-ic[data-side] { display: none; } }
  /* Telefono: due file sopra il marchio e due sotto i bottoni, con lo spazio
     per stare sotto senza toccare i bottoni. */
  @media (max-width: 640px) {
    /* Spazio sopra e sotto in pari misura: aggiungerlo solo sotto alzava il
       testo contro la seconda fila di loghi. */
    .hero.hero--burst { padding-top: 174px; padding-bottom: 150px; }
    .hb-ic:not([data-m]) { display: none; }
    .hb-ic[data-m] { display: block; left: var(--mx); top: var(--mt); --bx: var(--mbx); --by: var(--mby); width: calc(var(--s) * 0.68); height: calc(var(--s) * 0.68); margin: calc(var(--s) * -0.34) 0 0 calc(var(--s) * -0.34); }
  }
  .hero-content::before {
    content: ""; position: absolute; inset: -48px -80px; z-index: -1;
    background: radial-gradient(ellipse 68% 74% at 50% 50%, color-mix(in srgb, var(--paper) 80%, transparent) 52%, transparent);
  }
  .hero h1 { font-size: clamp(40px, 6.4vw, 80px); }
  /* Un titolo di due frasi, una per riga: «Fai crescere l'azienda.» misura
     790px a 80px e il blocco 780. Il titolo si prende 24px per lato, il
     resto dell'hero resta alla sua misura. Solo dove c'è spazio intorno. */
  @media (min-width: 900px) { .hero-content h1 { margin-inline: -24px; } }
  .hero-sub { margin: 22px auto 0; max-width: 100%; color: var(--slate); font-size: clamp(15.5px, 1.4vw, 17.5px); text-wrap: balance; }
  .hero-sub2 { margin-top: 12px; font-size: clamp(14px, 1.2vw, 16px); font-weight: 600; color: var(--faint); }
  /* Una frase per riga: il punto va sempre a capo. La colonna più stretta fa
     andare ogni frase su righe di lunghezza simile, invece di una frase corta
     spezzata in due sopra una lunga su una riga sola. */
  .hero-sub .hero-line { display: block; }
  .hero-content > .hero-sub:not(.hero-sub2) { max-width: 36em; }
  .hero-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

  /* ============ DEMO (target del risucchio + unlock moduli) ============ */
  .demo-sec { padding: 24px 0 110px; }
  /* rev.12: tutte le chip su una riga sola (overflow scrollabile, senza barra) */
  .mods-kick { text-align: center; margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--slate); }
  .mods-kick .mk-n {
    font-family: var(--serif-d); font-size: 24px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-right: 8px; vertical-align: -2px;
  }
  .demo-golink { text-align: center; margin: 18px 0 0; }
  .demo-golink a { font-size: 15px; font-weight: 700; color: var(--accent-dark); text-decoration: none; border-bottom: 1px solid rgba(46, 91, 255, 0.35); padding-bottom: 2px; }
  .demo-golink a:hover { border-bottom-color: var(--accent-dark); }
  .mods-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-bottom: 16px; }
  .mods-strip::-webkit-scrollbar { display: none; }
  .mchip {
    flex: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
    padding: 4px 10px; border-radius: 10px; /* stessa forma dei bottoni CTA — mai pill */
    background: #fff; border: 1px solid var(--line); color: var(--faint);
    transition: background 0.25s, color 0.25s, border-color 0.25s;
  }
  .mchip svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .mchip .ck { display: none; }
  .mchip.on { background: var(--info-bg); color: var(--accent-dark); border-color: rgba(46, 91, 255, 0.35); animation: chipPop 0.32s var(--ease); }
  .mchip.on .lk { display: none; }
  .mchip.on .ck { display: block; }
  @keyframes chipPop { 0% { transform: scale(0.72); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
  .dash-wrap {
    border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong);
    box-shadow: 0 40px 90px -48px rgba(21, 20, 18, 0.45); background: var(--card);
    transition: box-shadow 0.35s var(--ease);
  }
  .dash-wrap.glow { box-shadow: 0 0 0 4px rgba(46, 91, 255, 0.12), 0 40px 90px -44px rgba(31, 65, 196, 0.5); }
  .dash-wrap.flash { box-shadow: 0 0 0 5px rgba(46, 91, 255, 0.28), 0 40px 90px -44px rgba(31, 65, 196, 0.55); }
  .dash-chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--mist); border-bottom: 1px solid var(--line); }
  .dash-chrome .cd { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
  .dash-chrome .addr { margin-left: 14px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--faint); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 14px; }
  /* rev.9 — shell replicata dal prodotto vero (AppSidebar + DashboardHeader, token reali) */
  .mods-cap { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--slate); }
  .dash { display: grid; grid-template-columns: 232px 1fr; min-height: 520px; background: #FAFAFA; }
  .dash-side { display: flex; flex-direction: column; border-right: 1px solid #E2E4E9; background: #fff; padding: 0 10px 10px; }
  .ds-brand { display: flex; align-items: center; gap: 10px; height: 56px; border-bottom: 1px solid #E2E4E9; padding: 0 6px; margin-bottom: 8px; flex: none; }
  .ds-logo { width: 34px; height: 34px; border-radius: 11px; background: rgba(137, 90, 246, 0.12); display: grid; place-items: center; flex: none; }
  .ds-logo svg { width: 19px; height: 19px; }
  .ds-logo path { fill: #895AF6; }
  .ds-brand b { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: #17171C; }
  .ds-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .ds-label { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6A7181; }
  .ds-item { appearance: none; -webkit-appearance: none; border: 0; background: transparent; display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: #6A7181; cursor: pointer; text-align: left; transition: background 0.1s, color 0.1s; }
  .ds-item svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .ds-item:hover { background: #F3F4F6; color: #17171C; }
  .ds-item.on { background: #F2EDFD; color: #17171C; font-weight: 600; }
  .ds-item.dim { cursor: default; }
  .ds-item.dim:hover { background: transparent; color: #6A7181; }
  .ds-div { height: 1px; background: #E2E4E9; margin: 8px 12px; }
  .ds-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #E2E4E9; padding-top: 8px; flex: none; }
  .dash-main { display: flex; flex-direction: column; background: #FAFAFA; min-width: 0; }
  .dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 22px; background: #FAFAFA; border-bottom: 1px solid #E2E4E9; }
  .dh-left b { display: block; font-size: 15px; font-weight: 600; color: #17171C; }
  .dh-left small { font-size: 12.5px; color: #6A7181; font-weight: 500; }
  .dh-right { display: flex; align-items: center; gap: 6px; }
  .dh-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 500; color: #6A7181; background: #F3F4F7; border: 1px solid #E2E4E9; border-radius: 8px; white-space: nowrap; }
  .dh-search svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  .dh-search kbd { margin-left: 14px; font-family: ui-monospace, monospace; font-size: 10.5px; color: rgba(106, 113, 129, 0.6); }
  .dh-ic { position: relative; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #6A7181; }
  .dh-ic:hover { background: #F3F4F6; }
  .dh-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .dh-bell i { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; border-radius: 999px; background: #DC2828; color: #fff; font-size: 9px; font-weight: 800; font-style: normal; display: grid; place-items: center; padding: 0 3px; }
  .dh-av { width: 28px; height: 28px; border-radius: 50%; background: rgba(137, 90, 246, 0.15); color: #895AF6; font-size: 11px; font-weight: 700; display: grid; place-items: center; margin-left: 4px; }
  .dash-body { padding: 20px 22px; }
  .dash-tabs { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; }
  .dash-tab { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--slate); }
  .dash-tab:hover { background: #fff; }
  .dash-tab.active { background: var(--ink); color: #fff; }
  @media (min-width: 921px) { .dash-tabs { display: none; } }
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .kpi { background: #fff; border: 1px solid #E2E4E9; border-radius: 12px; padding: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
  .kpi .kl { font-size: 12px; font-weight: 500; color: #6A7181; }
  .kpi .kv { display: block; font-size: 26px; font-weight: 650; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; color: #17171C; }
  .kpi .kd { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
  .kpi .kd.up { background: #DCFCE7; color: #15803D; }
  .kpi .kd.down { background: #FEE2E2; color: #B91C1C; }
  .dash-lower { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; margin-top: 12px; }
  .dash-card { background: #fff; border: 1px solid #E2E4E9; border-radius: 12px; padding: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
  .dash-card h4 { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: #17171C; }
  .dash-card .sub { margin: 0 0 14px; font-size: 12.5px; color: #6A7181; font-weight: 500; }
  .chart { width: 100%; height: auto; display: block; overflow: visible; }
  .chart .grid-l { stroke: #EEF0F4; stroke-width: 1; }
  .chart .area { fill: url(#dashgrad); opacity: 0; transition: opacity 0.6s ease; }
  .chart .line { fill: none; stroke: #1D4FD7; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .dash-wrap.in .chart .line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease); }
  .dash-wrap.in .chart .area { opacity: 1; }
  .chart .pt { fill: #fff; stroke: #1D4FD7; stroke-width: 2.5; }
  .dash-list .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF0F4; font-size: 13px; }
  .dash-list .row:last-child { border-bottom: none; }
  .dash-list .rc { display: flex; flex-direction: column; gap: 2px; }
  .dash-list .row .who { font-weight: 700; color: var(--ink); }
  .dash-list .row .meta { font-size: 12px; color: var(--faint); font-weight: 600; }
  .pillx { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
  .pillx.ok { background: #DCFCE7; color: #15803D; }
  .pillx.wait { background: #FEF3C7; color: #A16207; }
  .pillx.new { background: #DBEAFE; color: #1D4ED8; }
  .demo-note { text-align: center; margin-top: 26px; font-size: 12.5px; color: var(--faint); }

  /* ============ SEZIONI ============ */
  section { padding: 140px 0; }
  /* rev.6: niente hairline tra le sezioni — il ritmo lo fanno padding + eyebrow (fondo tutto bianco) */
  section.hairline { border-top: 0; }

  /* ---- il problema (accordion stile Asana: autoplay 5s + pannello visivo) ---- */
  .prob-sec { padding: 140px 0; }
  /* Una frase per riga anche nei testi di sezione: il punto va a capo,
     e nessuna frase finisce con una parola sola sull'ultima riga. */
  .s-line { display: block; text-wrap: pretty; }
  .prob-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px 72px; margin-top: 40px; align-items: stretch; }
  .prob-close { margin: 44px 0 0; font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
  .prob-item { border-top: 1px solid var(--line); position: relative; }
  .prob-item:first-child { border-top: none; }
  .prob-head { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 24px 2px; }
  .prob-head h3 {
    margin: 0; font-family: var(--serif-d); font-weight: 600;
    font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.015em; line-height: 1.1;
    color: var(--faint); transition: color 0.35s var(--ease);
  }
  .prob-item.on .prob-head h3 { color: var(--ink); }
  .prob-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
  .prob-body-in { overflow: hidden; }
  .prob-body-in p { margin: 0 0 22px; padding: 0 2px; color: var(--slate); font-size: 15.5px; max-width: 46ch; }
  .prob-item.on .prob-body { grid-template-rows: 1fr; }
  .prob-bar { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: transparent; }
  .prob-item.on .prob-bar { background: var(--line); }
  .prob-bar i { display: block; height: 100%; width: 0%; background: var(--electric); }
  .prob-visual {
    position: relative; background: var(--mist); border: 1px solid var(--line);
    border-radius: 24px; min-height: 440px; overflow: hidden;
  }
  .prob-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 36px; opacity: 0; transition: opacity 0.5s var(--ease); }
  .prob-scene.on { opacity: 1; }
  .prob-scene .stackcol { display: flex; flex-direction: column; gap: 10px; width: min(340px, 100%); }
  .prob-count {
    position: absolute; right: 20px; bottom: 15px; font-size: 12.5px; font-weight: 800;
    letter-spacing: 0.08em; color: var(--faint); font-variant-numeric: tabular-nums;
  }

  @media (max-width: 560px) {
    .nav { padding: 10px 14px; }
    .nav .btn { padding: 9px 14px; font-size: 13.5px; }
    .logo-word { font-size: 17px; }
  }
  /* Sotto i 400px la barra non ci stava: marchio 126 + lingua + pulsante 149
     su 292 utili, e "Prenota una demo" finiva 52px fuori dallo schermo —
     tagliato a metà, quindi mezzo intoccabile. Nessuno dei tre pezzi può
     sparire, quindi si stringono tutti. */
  @media (max-width: 400px) {
    .nav { padding: 10px 10px; gap: 4px; }
    .logo { margin-right: 6px; }
    .logo-a { height: 18px; }
    .logo-word { font-size: 15px; }
    .nav-right { gap: 0; }
    .lang { padding: 0 2px; gap: 2px; font-size: 12px; }
    .nav .btn { padding: 8px 11px; font-size: 12.5px; white-space: nowrap; }
  }
  /* Menu a tendina. Sotto i 920px i link delle pagine sparivano e con loro la
     possibilità di cambiare pagina; sul telefono la lingua stava schiacciata
     contro il pulsante. Ora la barra tiene marchio e pulsante del menu, e
     sotto si apre tutto il resto: pagine, lingua, demo. */
  .nav-burger { display: none; }
  @media (max-width: 920px) {
    .nav { flex-wrap: wrap; row-gap: 0; }
    .nav .nav-right { display: none; }
    .nav-burger {
      all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto;
      width: 44px; height: 44px; border-radius: 10px;
      display: grid; place-content: center; gap: 5px;
    }
    .nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s var(--ease), opacity 0.2s; }
    .nav-burger:hover { background: var(--mist); }
    .nav-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
    .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav.open { background: var(--paper); box-shadow: 0 24px 48px -28px rgba(21, 20, 18, 0.35); }
    .nav.open .nav-menu {
      display: flex; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
      margin-top: 10px; border-top: 1px solid var(--line);
    }
    .nav.open .nav-link { display: flex; padding: 15px 4px; font-size: 17px; border-radius: 0; border-bottom: 1px solid var(--line); }
    .nav.open .nav-link:hover { background: transparent; color: var(--accent); }
    .nav.open .nav-right { display: flex; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 18px; margin: 18px 0 10px; }
    .nav.open .lang { padding: 0 4px; gap: 10px; font-size: 15px; }
    .nav.open .lang a { padding: 4px 2px; }
    .nav.open .lang a.on { color: var(--ink); }
    .nav.open .nav-right .btn { width: 100%; padding: 15px 20px; font-size: 16px; }
  }
  @media (prefers-reduced-motion: reduce) { .nav-burger span { transition: none; } }

  /* ---- telefono: niente demo, i loghi alimentano Archimedes ----
     La demo su un telefono non si riusciva a guardare. Al suo posto il marchio
     di Archimedes sotto il testo, grigio: le icone attorno all'hero ci
     confluiscono scorrendo e lo accendono, mentre la cifra conta i moduli. */
  .demo-feed { display: none; }
  @media (max-width: 640px) {
    .hero:has(+ .demo-sec) { min-height: 0; padding: 162px 20px 30px; }
    /* L'alone dietro il testo serve dove le icone gli stanno accanto; qui
       riposano fuori dal testo e lo attraversano solo scendendo, e l'alone
       sbiadiva quelle ai lati dei bottoni. */
    /* Il bottone chiaro è trasparente: le icone che scendono gli passavano
       dietro e si vedevano attraverso. */
    .hero:has(+ .demo-sec) .btn-ghost { background: var(--paper); }
    .hero:has(+ .demo-sec) .hero-content::before { inset: -8px 0; background: radial-gradient(ellipse 52% 58% at 50% 42%, color-mix(in srgb, var(--paper) 70%, transparent) 30%, transparent 100%); }
    .demo-sec .scn-pick, .demo-sec .dash-wrap { display: none; }
    .demo-sec { padding-top: 0; padding-bottom: 72px; }
    .demo-feed { display: grid; place-items: center; height: 250px; }
    .feed-core {
      --feed: 0;
      width: 104px; height: 104px; border-radius: 50%; background: #fff;
      border: 1px solid color-mix(in srgb, var(--accent) calc(12% + var(--feed) * 26%), transparent);
      display: grid; place-items: center;
      box-shadow: 0 0 0 calc(6px + var(--feed) * 12px) color-mix(in srgb, var(--accent) calc(var(--feed) * 9%), transparent), 0 22px 44px -22px rgba(31, 65, 196, 0.5);
      transform: scale(calc(0.94 + var(--feed) * 0.08));
      transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
    }
    .feed-core svg { width: 48px; height: 50px; }
    .feed-core svg path { fill: color-mix(in srgb, var(--accent) calc(var(--feed) * 100%), var(--faint)); transition: fill 0.3s var(--ease); }
    .demo-sec .mods-kick { max-width: 30ch; margin: 0 auto 22px; line-height: 1.5; }
    /* La cifra sotto il marchio, da sola sulla sua riga: è lei che conta i
       moduli mentre le icone entrano. */
    .demo-sec .mods-kick .mk-n { display: block; margin: 0 0 4px; font-size: 46px; line-height: 1.1; vertical-align: 0; }
    /* «Oltre» sopra la cifra, come un'etichetta: si legge «oltre 30 moduli». */
    .demo-sec .mods-kick .mk-pre { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
    /* Dietro il testo dell'hero, non sopra: mentre scendono verso il marchio
       non coprono quello che si sta leggendo. */
    .hero-icons.hero-icons--feed { z-index: 5; }
  }
  @media (max-width: 640px) and (prefers-reduced-motion: reduce) { .feed-core, .feed-core svg path { transition: none; } }

  :root { --eu-photo: url(/images/marketing/backdrop.jpg); }

  /* ---- piattaforma: video di presentazione ---- */
  .video-panel { scroll-margin-top: 92px; margin-top: 64px; background: var(--mist); border: 1px solid var(--line); border-radius: 28px; padding: 10px; position: relative; }
  .video-panel video { display: block; width: 100%; height: auto; border-radius: 20px; }
  /* play esplicito: al click il video riparte dall'inizio CON l'audio */
  .vp-play {
    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(21, 20, 18, 0.65); color: #fff;
    font-family: var(--sans); font-weight: 700; font-size: 14px; cursor: pointer;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  }
  /* Lo script lo nasconde dopo il click, ma un display esplicito batte
     l'[hidden] del browser: restava lì sopra il video per sempre. */
  .vp-play[hidden] { display: none; }
  .vp-play:hover { background: rgba(21, 20, 18, 0.85); transform: translateX(-50%) translateY(-1px); }
  .vp-play svg { width: 15px; height: 15px; fill: #fff; flex: none; }

  /* ---- piattaforma: 3 card con mini-mockup ---- */
  .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
  .trio-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
  .trio-card .mock { background: var(--mist); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-height: 230px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
  .trio-card h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
  .trio-card > p { margin: 0; color: var(--slate); font-size: 15px; }
  .trio-txt { display: flex; flex-direction: column; gap: 8px; }
  /* Tre strati — i moduli registrano, l'AI Brain capisce, gli agenti fanno:
     ogni card apre col numero e il nome dello strato nel suo colore e un
     titolo grande, la schermata tinta come lo strato, una freccia porta alla
     successiva (a destra in riga, sotto in colonna). */
  .trio--layers { gap: 34px; }
  .trio--layers .trio-card { position: relative; border-top: 3px solid var(--tone, var(--electric)); box-shadow: 0 24px 50px -34px rgba(21, 20, 18, 0.35); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .trio--layers .trio-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(21, 20, 18, 0.42); }
  .trio--layers .trio-txt { order: -1; }
  .trio--layers .trio-kick { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone, var(--electric)); }
  .trio--layers .trio-card h3 { font-family: var(--serif-d); font-size: clamp(24px, 2.3vw, 29px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; text-wrap: balance; }
  .trio--layers .trio-txt p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.5; }
  .trio--layers .trio-card .mock { background: var(--tone-bg, var(--mist)); border-color: color-mix(in srgb, var(--tone, var(--electric)) 22%, transparent); }
  .trio--layers .trio-card .mock.gleam::before, .trio--layers .trio-card .mock.gleam::after { display: none; }
  .trio-card.tone-blue { --tone: #3346D3; --tone-bg: #EEF1FE; }
  .trio-card.tone-violet { --tone: #6B4FD8; --tone-bg: #F3EFFE; }
  .trio-card.tone-gold { --tone: #B7791F; --tone-bg: #FBF3E3; }
  .trio--layers .trio-card + .trio-card::before { content: "→"; position: absolute; left: -27px; top: 50%; width: 20px; transform: translateY(-50%); text-align: center; font-size: 18px; font-weight: 700; color: var(--faint); }
  @media (max-width: 920px) {
    .trio--layers .trio-card + .trio-card::before { content: "↓"; left: 50%; top: -29px; transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) { .trio--layers .trio-card { transition: none; } .trio--layers .trio-card:hover { transform: none; } }
  /* mini feed */
  .feed-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; box-shadow: 0 6px 14px -10px rgba(21,20,18,0.15); }
  .feed-item .fav { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
  .feed-item b { display: block; color: var(--ink); font-weight: 700; line-height: 1.35; }
  .feed-item small { color: var(--faint); font-weight: 600; }
  /* module toggles */
  .tog { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--ink); }
  .tog .ti { width: 26px; height: 26px; border-radius: 8px; background: var(--info-bg); color: var(--accent-dark); display: grid; place-items: center; flex: none; }
  .tog .ti svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tog small { display: block; font-size: 11px; color: var(--faint); font-weight: 600; }
  .tog .sw { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background 0.2s; }
  .tog .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
  .tog.on .sw { background: var(--ok); }
  .tog.on .sw::after { left: 16px; }
  /* ari draft mini */
  .draft-q { align-self: flex-end; background: var(--info-bg); color: var(--accent-dark); border-radius: 12px 12px 4px 12px; padding: 8px 12px; font-size: 12.5px; font-weight: 700; max-width: 90%; }
  .draft-a { background: #fff; border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: 12.5px; color: var(--slate); }
  .draft-a b { color: var(--ink); }
  .draft-doc { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12px; box-shadow: 0 6px 14px -10px rgba(21,20,18,0.15); }
  .draft-doc .dt { font-weight: 800; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
  .draft-doc .dl { color: var(--faint); font-weight: 600; margin-top: 4px; }
  .draft-act { display: flex; gap: 6px; margin-top: 2px; }
  .draft-act span { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff; transition: transform 0.15s var(--ease), background 0.25s; }
  .draft-act span + span { background: transparent; border: 1px solid var(--line-strong); color: var(--slate); }
  .draft-act span.pressed { transform: scale(0.92); background: var(--ok); }
  .draft-sent { align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--ok); }

  /* animazioni trio card */
  .feed-item.pop { animation: feedIn 0.55s var(--ease) both; }
  @keyframes feedIn { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: none; } }
  #trioAI .step { opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
  #trioAI .step.show { opacity: 1; transform: none; }

  /* ---- aree / moduli ---- */
  /* ---- copertura moduli: doppio nastro che scorre (rev. 5) ---- */
  .cover { margin-top: 72px; }
  #modulare .cover { margin-top: 0; }
  .cover-line { margin: 0 0 34px; text-align: center; color: var(--slate); font-size: clamp(16px, 1.5vw, 18.5px); }
  .cover-line b { color: var(--ink); }
  .mq {
    display: flex; flex-direction: column; gap: 14px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .mq-track { display: flex; gap: 12px; width: max-content; animation: mq-scroll 60s linear infinite; }
  .mq-track.rev { animation-direction: reverse; animation-duration: 70s; }
  @keyframes mq-scroll { to { transform: translateX(-50%); } }
  .mchip2 {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 18px 9px 9px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
    box-shadow: 0 10px 20px -16px rgba(21, 20, 18, 0.4);
  }
  .mchip2 .dico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
  .mchip2 .dico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .dt-blue { background: var(--info-bg); color: var(--accent-dark); }
  .dt-green { background: var(--ok-bg); color: #14713F; }
  .dt-amber { background: var(--warn-bg); color: #8A5E12; }
  .dt-violet { background: #F1EBFE; color: #6B46C1; }
  .dt-teal { background: #E4F4F4; color: #0C617A; }
  .dt-rose { background: #FCEBEC; color: #B4434B; }

  .areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
  .area { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
  .area .ah { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
  .area .badge { width: 40px; height: 40px; border-radius: 12px; background: var(--mist); color: var(--ink); display: grid; place-items: center; flex: none; }
  .area h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
  .area p { margin: 0; color: var(--slate); font-size: 14.5px; }
  .area .mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .area .mods span { font-size: 12px; font-weight: 700; color: var(--slate); background: var(--mist); border-radius: 999px; padding: 4px 11px; }
  .areas-note { margin-top: 34px; color: var(--slate); font-size: 15px; }
  .areas-note b { color: var(--ink); }
  /* 8 macro-aree (al posto del nastro moduli) */
  .areas8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
  .areas8 .a8 { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-weight: 700; font-size: 14.5px; color: var(--ink); box-shadow: 0 10px 26px -22px rgba(21, 20, 18, 0.35); }
  /* PORT FIX — in the source design this rule was the only one reaching the
     area icons, so the eight duotone glyphs drawn for this grid rendered at
     zero width and were invisible on the published page. The sizing below
     mirrors .mchip2 .dico, which is where the intended treatment lives. */
  .areas8 .a8 .dico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
  .areas8 .a8 .dico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 980px) { .areas8 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .areas8 { grid-template-columns: 1fr; } }
  .areas-cta { margin-top: 28px; text-align: center; }
  .ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  /* tinte per area: badge + chip coordinati */
  .area { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .area:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(21, 20, 18, 0.25); }
  .area.c-blue .badge { background: var(--info-bg); color: var(--accent-dark); }
  .area.c-blue .mods span { background: var(--info-bg); color: var(--accent-dark); }
  .area.c-green .badge { background: var(--ok-bg); color: var(--ok); }
  .area.c-green .mods span { background: var(--ok-bg); color: #14713F; }
  .area.c-amber .badge { background: var(--warn-bg); color: var(--warn); }
  .area.c-amber .mods span { background: var(--warn-bg); color: #8A5E12; }
  .area.c-violet .badge { background: #F1EBFE; color: #6B46C1; }
  .area.c-violet .mods span { background: #F1EBFE; color: #5A38A8; }
  .area.c-teal .badge { background: #E4F4F4; color: #0E7490; }
  .area.c-teal .mods span { background: #E4F4F4; color: #0C617A; }
  .area.c-rose .badge { background: #FCEBEC; color: #B4434B; }
  .area.c-rose .mods span { background: #FCEBEC; color: #9C3940; }

  /* ---- automazioni + query (dotted canvas) ---- */
  /* rev. 5: la sezione automazioni sta su banda grigia, le card emergono */
  /* rev.6: #automazioni torna bianco (era mist per far staccare le card — ora ci pensa l'ombra) */
  .duo-card { box-shadow: 0 30px 60px -34px rgba(21, 20, 18, 0.35); }
  .duo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-top: 64px; }
  .duo-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px;
    box-shadow: 0 30px 60px -38px rgba(21, 20, 18, 0.45);
  }
  .duo-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
  .duo-card > p { margin: 0 0 24px; color: var(--slate); font-size: 15px; max-width: 52ch; }
  .dots {
    position: relative; border-radius: 12px; min-height: 300px; padding: 24px;
    background-image: radial-gradient(rgba(21, 20, 18, 0.13) 1px, transparent 1px);
    background-size: 18px 18px;
  }
  .flow { position: relative; height: 260px; }
  .fnode {
    position: absolute; width: 218px; background: #fff; border: 1px solid var(--line-strong);
    border-radius: 12px; padding: 11px 14px; font-size: 12.5px;
    box-shadow: 0 12px 26px -14px rgba(21,20,18,0.25);
  }
  .fnode .ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; color: var(--ink); }
  .fnode .ft .chipb { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 8px; background: var(--mist); color: var(--slate); letter-spacing: 0.04em; }
  .fnode .fd { color: var(--faint); font-weight: 600; margin-top: 3px; font-size: 11.5px; }
  .fstat { position: absolute; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 8px; }
  .fstat.done { background: var(--ok-bg); color: var(--ok); }
  .fstat.run { background: var(--info-bg); color: var(--accent-dark); }
  .fedge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .fedge path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
  .fedge .live { stroke: var(--ok); stroke-dasharray: 5 5; animation: dashmove 1.4s linear infinite; }
  @media (max-width: 640px) {
    .flow { height: auto; display: flex; flex-direction: column; gap: 10px; padding-left: 20px; }
    /* `static` annulla left/top in linea, che valgono solo se posizionati. */
    .fnode { position: static !important; width: auto; }
    .fstat { position: static !important; align-self: flex-start; margin: -4px 0 0; }
    .fedge { display: none; }
    /* Una guida verticale al posto della curva. E siccome la curva era
       l'unica cosa che si muoveva in questa card, la guida si muove: senza,
       spegnendo la curva avrei tolto l'animazione al telefono. */
    .flow::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 10px); background-size: 2px 10px; animation: railmove 1.4s linear infinite; }
  }
  @keyframes railmove { to { background-position-y: 10px; } }
  @media (prefers-reduced-motion: reduce) { .flow::before { animation: none; } }
  @keyframes dashmove { to { stroke-dashoffset: -20; } }
  .pills { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .pillq {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; /* mai pill */
    padding: 9px 18px; font-size: 13.5px; font-weight: 700; color: var(--ink);
    box-shadow: 0 8px 18px -12px rgba(21,20,18,0.25);
  }
  .pillq svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 2.2; stroke-linecap: round; }
  .pillq.dim { opacity: 0.5; box-shadow: none; }
  .pillq.hot { border-color: var(--accent); }

  /* ---- Ari chat ---- */
  .ari-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
  /* rev.20: canali di Ari col logo inline — incuriosisce e dice "dal telefono" */
  .chan { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); white-space: nowrap; vertical-align: baseline; }
  .chan svg { width: 21px; height: 21px; flex: none; transform: translateY(2px); }
  .ari-points { margin: 36px 0 0; display: flex; flex-direction: column; gap: 20px; color: var(--slate); font-size: 16px; }
  .ari-points p { margin: 0; }
  .ari-points b { color: var(--ink); font-weight: 700; }
  .chat {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 26px; min-height: 360px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 30px 70px -35px rgba(21, 20, 18, 0.25);
  }
  .chat-head { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 800; color: var(--slate); }
  .chat-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
  .msg { max-width: 86%; padding: 13px 17px; border-radius: 18px; font-size: 15px; line-height: 1.55; opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .msg.show { opacity: 1; transform: none; }
  .msg-user { align-self: flex-end; background: var(--info-bg); color: var(--ink); border-bottom-right-radius: 6px; }
  .msg-ai { align-self: flex-start; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); border-bottom-left-radius: 6px; }
  .msg-ai .figure { color: var(--accent-dark); font-weight: 800; font-variant-numeric: tabular-nums; }
  .typing { align-self: flex-start; display: none; gap: 5px; padding: 14px 18px; }
  .typing.show { display: flex; }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: blink 1.1s infinite; }
  .typing i:nth-child(2) { animation-delay: 0.18s; }
  .typing i:nth-child(3) { animation-delay: 0.36s; }
  @keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
  .chat-actions { display: flex; gap: 10px; flex-wrap: wrap; opacity: 0; transition: opacity 0.5s var(--ease) 0.15s; }
  .chat-actions.show { opacity: 1; }
  .chat-chip { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--accent-dark); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 16px; background: transparent; cursor: pointer; }
  .chat-chip:hover { background: var(--info-bg); }
  .chat-note { margin-top: auto; padding-top: 12px; font-size: 12.5px; color: var(--faint); }

  .tt-a { background: linear-gradient(135deg, #C9D5F6, #8CA5DC); }
  .tt-b { background: linear-gradient(135deg, #CFE8D6, #8FBF9F); }
  .tt-c { background: linear-gradient(135deg, #F3E3C6, #D2AE7B); }
  .tt-d { background: linear-gradient(135deg, #E3DCF7, #A794D6); }
  .tt-e { background: linear-gradient(135deg, #D7E6EF, #8FB4C9); }
  .tt-f { background: linear-gradient(135deg, #F0D9D3, #CE9A8B); }

  /* ---- agent hub: card orizzontale sotto il duo (rev.7) ---- */
  /* ---- Agent House (rev.21): la squadra come registro di lavoro — niente icone, il lavoro parla ---- */
  .ahouse { position: relative; margin-top: 26px; border: 1px solid var(--line); border-radius: 22px; padding: 46px 38px 42px; background: linear-gradient(155deg, var(--sky) 0%, #FFFFFF 46%, var(--warn-bg) 100%); overflow: hidden; }
  .ahouse::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(21, 20, 18, 0.09) 1px, transparent 1.1px); background-size: 20px 20px; pointer-events: none; }
  .ah-head { position: relative; text-align: center; max-width: 60ch; margin: 0 auto; }
  .ah-head .label { display: block; margin-bottom: 14px; }
  .ah-head h3 { margin: 0 0 12px; font-family: var(--serif-d); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance; }
  .ah-head p { margin: 0; color: var(--slate); font-size: 15.5px; text-wrap: balance; }
  /* ---- rev.24: la striscia del tempo — tre numeri, zero coreografia ---- */
  .av-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 38px auto 0; max-width: 900px; }
  .av-stat { text-align: center; padding: 0 10px; transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); transition-delay: var(--ad, 0s); }
  /* Hidden only once the island is running — same reasoning as .fade: with no
     JavaScript the figures must still be on the page, not three blanks. */
  .arc-js .av-stat { opacity: 0; transform: translateY(10px); }
  .arc-js .ahouse.crew .av-stat { opacity: 1; transform: none; }
  .av-n { display: block; font-family: var(--serif-d); font-size: clamp(40px, 5vw, 58px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
  .av-n small { font-size: 0.52em; font-weight: 500; color: var(--slate); letter-spacing: 0; margin-left: 2px; }
  .av-k { display: block; margin-top: 9px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-dark); }
  .av-l { display: block; margin: 9px auto 0; max-width: 30ch; font-size: 14px; color: var(--slate); line-height: 1.5; text-wrap: balance; }
  .av-l .was { color: var(--faint); }
  .av-why { position: relative; margin: 38px auto 0; padding-top: 22px; border-top: 1px solid var(--line); max-width: 66ch; text-align: center; font-size: 15.5px; color: var(--slate); line-height: 1.6; text-wrap: balance; }
  .av-why b { color: var(--ink); }
  @media (max-width: 860px) { .av-grid { grid-template-columns: 1fr; gap: 28px; max-width: 420px; } }

  /* ---- la pila del valore: il lavoro degli agenti voce per voce, e il totale ----
     Stesso pannello a puntini delle cifre. Il totale entra con .av-stat e conta
     verso l'alto; le righe arrivano in fila sotto la stessa classe `crew` che
     l'island del pannello già imposta. Solo opacità sulle righe: una
     trasformazione su una riga di tabella non è affidabile in ogni browser. */
  .vs-total { position: relative; margin: 34px auto 0; max-width: 460px; }
  .vs-total .av-n { font-size: clamp(60px, 7.4vw, 88px); }
  .vs-total .av-n small { margin-left: 0.18em; }
  /* Tempo e soldi, affiancati: le ore restano, e accanto il loro valore in
     euro — è quello che un imprenditore cerca. */
  .vs-totals { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 800px; margin: 34px auto 0; }
  .vs-totals .vs-total { margin: 0; max-width: none; }
  .vs-totals .vs-total + .vs-total { border-left: 1px solid var(--line); }
  .vs-money .av-n { color: var(--ok); }
  .vs-money .av-n .vs-cur { font-size: 0.52em; font-weight: 500; margin: 0 0.1em 0 0; color: var(--ok); }
  .vs-money .av-k { color: #14713F; }
  .vs-table .vs-eur { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: #14713F; }
  @media (max-width: 640px) {
    .vs-totals { grid-template-columns: 1fr; row-gap: 26px; }
    .vs-totals .vs-total + .vs-total { border-left: 0; border-top: 1px solid var(--line); padding-top: 26px; }
  }
  .vs-table { position: relative; width: 100%; max-width: 820px; margin: 34px auto 0; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
  .vs-table th { padding: 0 12px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); text-align: left; border-bottom: 1px solid var(--line-strong); }
  .vs-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); color: var(--slate); vertical-align: baseline; }
  .vs-table th:first-child, .vs-table td:first-child { padding-left: 0; }
  .vs-table th:last-child, .vs-table td:last-child { padding-right: 0; text-align: right; }
  .vs-table .vs-task { color: var(--ink); font-weight: 700; }
  .vs-table .vs-was { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(21, 20, 18, 0.3); white-space: nowrap; }
  .vs-table .vs-now { color: var(--accent-dark); font-weight: 600; }
  .vs-table .vs-saved { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .vs-table tbody tr { transition: opacity 0.45s var(--ease); transition-delay: var(--vd, 0s); }
  .arc-js .vs-table tbody tr { opacity: 0; }
  .arc-js .ahouse.crew .vs-table tbody tr { opacity: 1; }
  .vs-foot { position: relative; max-width: 820px; margin: 14px auto 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
  @media (max-width: 640px) {
    /* Su un telefono ogni voce è una scheda: lavoro e ore sopra, prima → dopo sotto. */
    .vs-table thead { display: none; }
    .vs-table, .vs-table tbody { display: block; }
    .vs-table tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "task task saved" "was now now"; column-gap: 8px; row-gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .vs-table td { display: block; padding: 0 !important; border: 0; text-align: left !important; }
    .vs-table .vs-task { grid-area: task; }
    .vs-table .vs-saved { grid-area: saved; text-align: right !important; }
    .vs-table .vs-was { grid-area: was; }
    .vs-table .vs-now { grid-area: now; }
    .vs-table .vs-now::before { content: "→ "; color: var(--faint); font-weight: 600; }
  }

  /* La stima sulla tua azienda, sotto l'esempio: tre domande (persone,
     fatturato, software), la stima e il pulsante. Parte nascosta: la mostra
     l'island, così senza JavaScript resta l'esempio da solo. */
  .vs-calc { position: relative; max-width: 820px; margin: 34px auto 0; padding: 26px 28px 28px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; text-align: left; box-shadow: 0 24px 50px -36px rgba(21, 20, 18, 0.35); }
  .vs-calc[hidden] { display: none; }
  /* Il calcolo dietro la stima, chiuso: si parte dalla propria cifra e chi
     vuole vedere come nasce lo apre. */
  .vs-how { position: relative; max-width: 820px; margin: 22px auto 0; }
  .vs-how > summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 9px 14px; font-size: 14px; font-weight: 700; color: var(--accent-dark); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; }
  .vs-how > summary::-webkit-details-marker { display: none; }
  .vs-how > summary::after { content: "+"; font-size: 16px; font-weight: 800; line-height: 1; }
  .vs-how[open] > summary::after { content: "−"; }
  .vs-how > summary:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
  .vs-how .vs-table { margin-top: 18px; }
  .vs-calc-title { margin: 0 0 20px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); text-wrap: balance; }
  .vs-calc-in { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 18px 22px; align-items: end; }
  .vs-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
  .vs-field > span, .vs-field > legend { padding: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
  .vs-field input, .vs-field select { width: 100%; font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; }
  .vs-field input:focus-visible, .vs-field select:focus-visible, .vs-tool:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
  .vs-tools { grid-column: 1 / -1; }
  .vs-tool-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .vs-tool { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--slate); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
  .vs-tool:hover { border-color: var(--ink); }
  .vs-tool[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }
  .vs-est { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
  .vs-est .label { display: block; }
  /* Il risultato si legge come uno scontrino: il totale, poi le due voci
     che lo compongono, poi perché è un minimo e cosa resta fuori dal conto. */
  .vs-est-grid { margin-top: 10px; }
  .vs-est-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; }
  .vs-est-total b { font-family: var(--serif-d); font-size: clamp(32px, 4vw, 46px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; color: var(--ok); font-variant-numeric: tabular-nums; }
  .vs-est-total span { font-size: 16px; font-weight: 700; color: var(--ink); }
  .vs-est-total span + span { flex-basis: 100%; font-size: 14.5px; font-weight: 600; color: var(--slate); }
  .vs-est-parts { list-style: none; display: grid; gap: 8px; margin: 18px 0 0; padding: 0; }
  .vs-est-parts li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 14px; background: var(--mist); border-radius: 10px; }
  .vs-est-parts li[hidden] { display: none; }
  .vs-est-parts b { font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
  .vs-est-parts strong { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
  .vs-est-parts span { font-size: 14.5px; line-height: 1.5; color: var(--slate); }
  .vs-est-min { margin-top: 14px; padding: 14px 16px; background: var(--ok-bg); border-left: 3px solid var(--ok); border-radius: 0 10px 10px 0; }
  .vs-est-min p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
  .vs-est-min p + p { margin-top: 8px; color: var(--slate); }
  .vs-est-min b { color: var(--ink); }
  /* La spesa per i software: la somma dei prezzi medi, correggibile. */
  .vs-spend { grid-column: 1 / -1; }
  .vs-money-in { display: flex; align-items: center; max-width: 240px; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; }
  .vs-money-in:focus-within { outline: 2px solid var(--electric); outline-offset: 2px; }
  .vs-money-in i { padding-left: 13px; font-style: normal; font-weight: 700; color: var(--slate); }
  .vs-field .vs-money-in input { border: 0; background: transparent; padding-left: 6px; }
  .vs-field .vs-money-in input:focus-visible { outline: none; }
  .vs-spend small { font-size: 12.5px; line-height: 1.45; color: var(--faint); }
  .vs-est-over { display: none; margin: 12px 0 0; font-size: 15.5px; font-weight: 700; color: var(--ink); }
  .vs-calc.is-over .vs-est-over { display: block; }
  .vs-calc.is-over .vs-est-grid, .vs-calc.is-empty .vs-est-grid { display: none; }
  .vs-method { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
  .vs-real { margin: 16px 0 14px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
  @media (max-width: 640px) {
    .vs-calc { margin-top: 28px; padding: 20px 18px 22px; }
    .vs-calc-in { grid-template-columns: minmax(0, 1fr); }
    .vs-est-parts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .vs-calc .btn { width: 100%; white-space: normal; text-align: center; }
  }

  /* ---- fasce: sezioni che stanno insieme (l'area AI di Prodotto) ----
     Stesso sfondo alba e nessuno stacco fra una sezione e l'altra: ognuna
     sfuma dal cielo al caldo al verde e torna al cielo, così dove due
     sezioni si toccano il colore è lo stesso e la fascia si legge come una.
     In cima l'indice; l'island ne fissa una copia sotto la barra finché si
     è dentro la fascia. */
  .band-ai {
    background:
      radial-gradient(rgba(21, 20, 18, 0.07) 1px, transparent 1.1px) 0 0 / 20px 20px,
      linear-gradient(180deg, #F2F6FF 0%, #FFF6E6 45%, #EFF9F2 75%, #F2F6FF 100%);
    scroll-margin-top: 132px;
  }
  :not(.band-ai) + .band-ai { border-top: 1px solid rgba(46, 91, 255, 0.16); }
  .band-ai:not(:has(+ .band-ai)) { border-bottom: 1px solid rgba(46, 91, 255, 0.16); }
  .band-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -24px auto 64px; }
  .band-index a { display: inline-flex; align-items: center; padding: 9px 15px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line-strong); border-radius: 8px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
  .band-index a:hover { border-color: var(--ink); }
  .band-index a[aria-current] { color: #fff; background: var(--ink); border-color: var(--ink); }
  .band-index a:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
  .band-pin {
    position: fixed; left: 0; right: 0; top: 0; z-index: 90; padding: 9px 16px;
    background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(21, 20, 18, 0.5);
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  .band-pin.shown { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
  .band-pin .band-index { margin: 0 auto; max-width: 1180px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .band-pin .band-index::-webkit-scrollbar { display: none; }
  .band-pin .band-index a { padding: 7px 12px; font-size: 13.5px; }
  @media (max-width: 920px) {
    .band-index { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: -12px -20px 48px; padding: 2px 20px; scrollbar-width: none; }
    .band-index::-webkit-scrollbar { display: none; }
    .band-pin .band-index { justify-content: flex-start; margin: 0 -16px; padding: 0 16px; }
  }
  @media (prefers-reduced-motion: reduce) { .band-pin, .band-pin.shown { transition: none; } }

  /* ---- pilota automatico o guidi tu: una card sola, tre posizioni ----
     La card è la stessa; cambia il lavoro disegnato dentro. I passi usano le
     classi del pannello agenti (agr-*), e l'island li accende a ogni cambio. */
  .mc { margin-top: 44px; }
  .mc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
  .mc-l { font-size: 14px; font-weight: 700; color: var(--ink); }
  .mc-tabs { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; box-shadow: 0 10px 24px -18px rgba(21, 20, 18, 0.4); }
  .mc-tab { position: relative; overflow: hidden; appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--slate); padding: 10px 22px; border-radius: 7px; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
  .mc-tab:hover { color: var(--ink); background: var(--mist); }
  .mc-tab.on { background: var(--info-bg); color: var(--accent-dark); box-shadow: inset 0 0 0 1px rgba(46, 91, 255, 0.35); }
  .mc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* La linea che si riempie nel bottone attivo: dice quando la card andrà avanti. */
  .mc-prog { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0.5; transform: scaleX(0); transform-origin: left; }
  .mc-tab.on.run .mc-prog { animation: mcProg var(--mc-cycle, 5200ms) linear forwards; }
  @keyframes mcProg { to { transform: scaleX(1); } }
  .mc-card { position: relative; max-width: 940px; margin: 22px auto 0; padding: 30px 32px; border-radius: 18px; border: 1px solid rgba(46, 91, 255, 0.26); background: linear-gradient(155deg, var(--sky) 0%, #FFFFFF 48%, var(--warn-bg) 100%); box-shadow: 0 34px 70px -40px rgba(21, 20, 18, 0.45); text-align: left; }
  /* Le tre facce stanno nella stessa cella: la card prende l'altezza della più
     alta e non salta quando si cambia. */
  .mc-faces { display: grid; }
  .mc-face { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 34px; align-items: start; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s; }
  .mc-face.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s; }
  .mc-k { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
  .mc-face[data-kind="off"] .mc-k { color: var(--faint); }
  .mc-face[data-kind="draft"] .mc-k { color: var(--warn); }
  .mc-copy h3 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
  .mc-copy > p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--slate); }
  .mc-copy > p.mc-result { margin: 18px 0 0; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ink); }
  .mc-face[data-kind="off"] .mc-copy > p.mc-result { color: #8A5E12; }
  .mc-face[data-kind="auto"] .mc-copy > p.mc-result { color: #14713F; }
  .mc-copy > p.mc-fit { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--faint); }
  .mc-steps { margin: 0; }
  .mc-note { margin: 18px auto 0; text-align: center; font-size: 13.5px; color: var(--slate); }
  .modes-chips { list-style: none; margin: 24px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
  .modes-chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--slate); }
  .modes-chips svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 920px) {
    .mc-face { grid-template-columns: 1fr; gap: 20px; }
    .mc-card { padding: 22px 18px; }
    .mc-tab { padding: 10px 14px; }
  }

  /* ---- il catalogo dei moduli, per area — come Odoo, nel segno del sito ----
     Card piccole apposta: quello che deve arrivare è quanti sono. */
  .mcat { display: flex; flex-direction: column; gap: 36px; margin-top: 48px; text-align: left; }
  .mcat-title { margin: 0 0 14px; font-family: var(--serif-d); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.01em; color: var(--ink); }
  .mcat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .mcat-card { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; background: var(--mist); border: 1px solid transparent; border-radius: 10px; transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
  .mcat-card:hover { background: #fff; border-color: var(--line); transform: translateY(-1px); }
  .mcat-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; box-shadow: 0 6px 14px -10px rgba(21, 20, 18, 0.45); }
  .mcat-ic svg { width: 18px; height: 18px; }
  .mcat-txt { min-width: 0; }
  .mcat-txt b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ink); }
  .mcat-txt small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--slate); }
  .mcat-custom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding: 26px 28px; border-radius: 16px; border: 1px solid rgba(46, 91, 255, 0.28); background: linear-gradient(135deg, #F2F6FF 0%, #FFF6E6 52%, #EFF9F2 100%); text-align: left; }
  .mcat-custom .label { margin-bottom: 8px; }
  .mcat-custom b { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
  .mcat-custom p { margin: 0; max-width: 62ch; font-size: 14.5px; line-height: 1.55; color: var(--slate); }
  .mcat-custom .btn { flex: none; }
  @media (max-width: 1100px) { .mcat-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 920px) {
    .mcat-grid { grid-template-columns: repeat(2, 1fr); }
    .mcat-custom { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  }
  @media (max-width: 560px) {
    /* Su un telefono basta il nome: la densità è il messaggio. */
    .mcat-card { align-items: center; padding: 10px 11px; gap: 9px; }
    .mcat-ic { width: 30px; height: 30px; }
    .mcat-ic svg { width: 16px; height: 16px; }
    .mcat-txt b { font-size: 13px; }
    .mcat-txt small { display: none; }
  }

  /* ---- l'articolo: una colonna di lettura, titoli nel serif del sito ---- */
  .art { padding-top: 120px; }
  .art-wrap { max-width: 760px; }
  .art-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 13px; font-weight: 600; color: var(--faint); }
  .art-crumbs a { color: var(--accent-dark); text-decoration: none; }
  .art-crumbs a:hover { text-decoration: underline; }
  .art-head .label { margin-bottom: 14px; }
  .art-title { margin: 0; font-family: var(--serif-d); font-weight: 600; font-size: clamp(36px, 5vw, 56px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
  .art-lede { margin: 20px 0 0; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.55; color: var(--slate); text-wrap: pretty; }
  .art-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 0; font-size: 13.5px; font-weight: 600; color: var(--faint); }
  .art-author { color: var(--ink); }
  .art-when { white-space: nowrap; }
  .art-when > * + *::before { content: "·"; margin: 0 10px; color: var(--line-strong); }
  /* La copertina: un'immagine se c'è, altrimenti tipografica — gradiente
     alba, puntini e il marchio — così un articolo non aspetta mai una foto. */
  .art-cover { margin: 36px 0 44px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; background: var(--mist); }
  .art-cover img, .al-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .art-cover-type { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(155deg, var(--sky) 0%, #FFFFFF 46%, var(--warn-bg) 100%); }
  .art-cover-type::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(21, 20, 18, 0.09) 1px, transparent 1.1px); background-size: 20px 20px; }
  .art-cover-mark { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 44px -14px rgba(46, 91, 255, 0.45), 0 0 0 10px rgba(46, 91, 255, 0.06); }
  .art-cover-mark svg { height: 40px; width: auto; }
  .art-cover-mark svg path { fill: var(--accent); }
  .art-body { font-size: 18px; line-height: 1.72; color: #34332F; }
  .art-body > * + * { margin-top: 1.05em; }
  .art-body p { margin-bottom: 0; }
  .art-body h2 { margin: 1.9em 0 0; font-family: var(--serif-d); font-weight: 600; font-size: clamp(26px, 2.8vw, 32px); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
  .art-body h3 { margin: 1.5em 0 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
  .art-body h2 + *, .art-body h3 + * { margin-top: 0.6em; }
  .art-body strong, .art-body b { color: var(--ink); font-weight: 700; }
  .art-body a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .art-body ul, .art-body ol { padding-left: 0; list-style: none; }
  .art-body ul li, .art-body ol li { position: relative; padding-left: 28px; }
  .art-body ul li + li, .art-body ol li + li { margin-top: 0.55em; }
  .art-body ul li::before { content: ""; position: absolute; left: 6px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .art-body ol { counter-reset: art; }
  .art-body ol li { counter-increment: art; }
  .art-body ol li::before { content: counter(art, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }
  .art-body blockquote { margin: 1.6em 0 0; padding: 22px 26px; border-radius: 12px; border: 1px solid rgba(46, 91, 255, 0.24); background: linear-gradient(135deg, #F2F6FF 0%, #FFF6E6 52%, #EFF9F2 100%); font-size: 19px; line-height: 1.6; color: var(--ink); }
  .art-body blockquote p { margin: 0; }
  .art-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 26px 28px; border-radius: 16px; border: 1px solid rgba(46, 91, 255, 0.28); background: linear-gradient(135deg, #F2F6FF 0%, #FFF6E6 52%, #EFF9F2 100%); }
  .art-cta b { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
  .art-cta p { margin: 0; max-width: 52ch; font-size: 14.5px; line-height: 1.55; color: var(--slate); }
  .art-cta .btn { flex: none; }
  .art-back { display: inline-block; margin-top: 30px; font-size: 14px; font-weight: 700; color: var(--accent-dark); text-decoration: none; }
  .art-back:hover { text-decoration: underline; }

  /* ---- Risorse: l'ultimo articolo in grande, gli altri in griglia ---- */
  .al-feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: center; margin-top: 44px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: inherit; box-shadow: 0 26px 60px -44px rgba(21, 20, 18, 0.45); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .al-feat:hover { transform: translateY(-2px); box-shadow: 0 32px 70px -40px rgba(21, 20, 18, 0.5); }
  .al-cover { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); }
  .al-cover .art-cover-mark { width: 72px; height: 72px; }
  .al-cover .art-cover-mark svg { height: 30px; }
  .al-txt { display: flex; flex-direction: column; gap: 12px; padding-right: 12px; }
  .al-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; font-weight: 700; color: var(--faint); }
  .al-meta > span:first-child { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
  .al-meta > * + *::before { content: "·"; margin: 0 8px; color: var(--line-strong); }
  .al-title { font-family: var(--serif-d); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
  .al-excerpt { font-size: 15.5px; line-height: 1.6; color: var(--slate); }
  .al-read { font-size: 14px; font-weight: 700; color: var(--accent-dark); }
  .al-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
  .al-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: inherit; transition: transform 0.25s var(--ease); }
  .al-card:hover { transform: translateY(-2px); }
  .al-card .al-title { font-size: 20px; }
  .al-card .al-excerpt { font-size: 14px; }
  .al-empty { margin: 40px auto 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--faint); }
  @media (max-width: 920px) {
    .al-feat { grid-template-columns: 1fr; gap: 18px; }
    .al-txt { padding: 0 6px 6px; }
    .al-grid { grid-template-columns: 1fr 1fr; }
    .art-cta { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  }
  @media (max-width: 560px) {
    .al-grid { grid-template-columns: 1fr; }
    .art { padding-top: 96px; }
    .art-body { font-size: 17px; }
    .art-cover { aspect-ratio: 16 / 9; margin: 28px 0 34px; }
  }

  /* ---- in parole semplici: le card numerate, e una riga che riassume ---- */
  /* ---- In parole semplici: un motivo per card ----
     Chi scorre legge il titolo e basta, quindi il titolo porta da solo il
     motivo; la riga sotto è per chi si ferma. */
  .vals { display: grid; grid-template-columns: repeat(var(--vals, 4), minmax(0, 1fr)); gap: 16px; max-width: 1084px; margin: 48px auto 0; text-align: left; }
  .val { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px 30px; box-shadow: 0 18px 36px -30px rgba(21, 20, 18, 0.35); }
  .val h3 { margin: 0 0 12px; font-family: var(--serif-d); font-weight: 600; font-size: clamp(30px, 2.7vw, 38px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); }
  .val p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--slate); }
  @media (max-width: 980px) { .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .vals { grid-template-columns: 1fr; gap: 12px; } .val { padding: 22px 22px 24px; } }
  .steps-close { margin: 30px auto 0; max-width: 60ch; text-align: center; font-size: 16px; line-height: 1.55; color: var(--slate); text-wrap: balance; }
  .steps-close b { color: var(--ink); }

  /* ---- ari: telefono (rev.7) ---- */
  .phone {
    width: min(392px, 100%); margin: 0 auto; background: #fff;
    border: 9px solid #151412; border-radius: 46px; overflow: hidden;
    box-shadow: 0 46px 90px -42px rgba(21, 20, 18, 0.55);
  }
  .phone-top { height: 32px; display: grid; place-items: start center; }
  .phone-top i { width: 96px; height: 19px; background: #151412; border-radius: 999px; margin-top: 7px; }
  .phone-bar { height: 24px; display: grid; place-items: center; }
  .phone-bar::after { content: ""; width: 118px; height: 5px; border-radius: 999px; background: var(--line-strong); }
  .phone .chat { border: 0; box-shadow: none; border-radius: 0; padding: 10px 16px 8px; height: 500px; }
  .ch-sub { margin-left: auto; font-size: 11px; color: var(--ok); font-weight: 700; }
  .chat-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding-top: 14px; overflow: hidden; }
  .msg.out, .typing.out, .chat-actions.out { opacity: 0; transform: translateY(-8px); }

  /* ---- confronto: la nota sotto la tabella (il resto sta in «Il confronto, riga per riga») ---- */
  .cmpt-note { margin-top: 16px; font-size: 12.5px; color: var(--faint); }

  /* ---- migrazione (arco di strumenti → Archimedes, flussi bidirezionali) ---- */
  .mig-sec { text-align: center; }
  .mig-sec h2 { max-width: 22ch; margin: 0 auto; }
  p.mig-lede { margin: 24px auto 0; max-width: 56ch; text-align: center; }
  .arc-stage {
    position: relative; width: 860px; height: 340px;
    left: 50%; margin: 48px 0 0 -430px;
    overflow: hidden;
  }
  .arc-flows { position: absolute; inset: 0; width: 100%; height: 100%; }
  .arc-flows path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
  .arc-flows .base { stroke: var(--line); }
  .arc-flows .fin { stroke: var(--accent); stroke-dasharray: 3 12; animation: flowIn 1.5s linear infinite; opacity: 0.8; }
  .arc-flows .fout { stroke: var(--ok); stroke-dasharray: 3 12; animation: flowOut 1.5s linear infinite; opacity: 0.7; }
  @keyframes flowIn { to { stroke-dashoffset: -15; } }
  @keyframes flowOut { to { stroke-dashoffset: 15; } }
  .arc-ring { position: absolute; left: 50%; transform: translateX(-50%); border: 1.5px solid var(--line); border-radius: 50%; background: radial-gradient(closest-side, rgba(21, 20, 18, 0.02), transparent 72%); }
  .arc-ring.r1 { width: 720px; height: 720px; top: 70px; }
  .arc-ring.r2 { width: 470px; height: 470px; top: 155px; }
  .arc-core {
    position: absolute; left: 50%; top: 235px; transform: translateX(-50%);
    width: 108px; height: 108px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 0 0 10px rgba(21, 20, 18, 0.03), 0 24px 48px -20px rgba(21, 20, 18, 0.35);
    display: grid; place-items: center;
  }
  .arc-core svg { height: 44px; width: auto; }
  .arc-core svg path { fill: var(--accent); }
  .arc-ic {
    position: absolute; width: 62px; height: 62px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 12px 26px -12px rgba(21, 20, 18, 0.3);
    display: grid; place-items: center; transform: translate(-50%, -50%);
  }
  .arc-ic svg { width: 28px; height: 28px; }
  /* rev. 5: convergenza "tanti tool → Archimedes" al posto dell'arco */
  .mig-flow { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; max-width: 960px; margin: 56px auto 0; }
  /* rev.20: nuvola di 30 app che si accavallano — soffuse, non nitide; poi ingrigiscono */
  .mig-cloud { position: relative; width: 350px; height: 300px; }
  .mig-cloud .arc-ic { position: absolute; left: var(--x); top: var(--y); width: var(--s, 46px); height: var(--s, 46px); transform: translate(-50%, -50%); border-color: rgba(21, 20, 18, 0.07); box-shadow: 0 10px 24px -14px rgba(21, 20, 18, 0.3); transition: filter 0.9s var(--ease), opacity 0.9s var(--ease); transition-delay: var(--gd, 0s); }
  .mig-cloud .arc-ic svg { width: 50%; height: 50%; }
  .mig-cloud .l1 { z-index: 3; opacity: 0.96; }
  .mig-cloud .l2 { z-index: 2; opacity: 0.76; filter: blur(0.5px); }
  .mig-cloud .l3 { z-index: 1; opacity: 0.52; filter: blur(1.2px); }
  .mig-flow.migrated .mig-cloud .l1 { filter: grayscale(1); opacity: 0.5; }
  .mig-flow.migrated .mig-cloud .l2 { filter: grayscale(1) blur(0.5px); opacity: 0.38; }
  .mig-flow.migrated .mig-cloud .l3 { filter: grayscale(1) blur(1.2px); opacity: 0.26; }
  .mf-lines { width: 100%; height: 300px; display: block; }
  /* Due tracciati: uno corre verso destra sugli schermi larghi, l'altro verso
     il basso su quelli stretti, dove la nuvola sta sopra Archimedes. */
  .mf-lines.mf-v { display: none; height: 130px; }
  .mf-lines path { fill: none; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .mf-lines .base { stroke: var(--line-strong); }
  /* la "cometa": un segmento luminoso che percorre la linea da sinistra ad Archimedes */
  .mf-lines .comet {
    stroke: var(--accent); stroke-width: 2.6; opacity: 0;
    stroke-dasharray: 0.13 0.87; stroke-dashoffset: 1;
    filter: drop-shadow(0 0 5px rgba(46, 91, 255, 0.6));
    transition: opacity 0.6s var(--ease);
  }
  .mig-flow.run .comet { opacity: 0.95; animation: migComet 2.2s linear infinite; animation-delay: var(--cd, 0s); }
  @keyframes migComet { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .mf-dest { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  /* A riposo Archimedes è grigio e gli strumenti a colori; con `migrated` il
     quadro si inverte. È il racconto della sezione, non una decorazione. */
  .mig-flow .arc-core { position: static; transform: none; transition: box-shadow 1s var(--ease), border-color 1s var(--ease); }
  .mig-flow .arc-core svg path { fill: var(--faint); transition: fill 0.9s var(--ease); }
  .mig-flow.migrated .arc-core svg path { fill: var(--accent); }
  .mig-flow.migrated .arc-core { border-color: rgba(46, 91, 255, 0.35); }
  .mig-flow .mf-dest b { color: var(--faint); transition: color 0.9s var(--ease); }
  .mig-flow.migrated .mf-dest b { color: var(--ink); }
  .mig-flow.migrated .arc-core { box-shadow: 0 0 0 10px rgba(46, 91, 255, 0.07), 0 18px 44px -14px rgba(46, 91, 255, 0.45); }
  /* Telefono: trenta icone con il loro filtro (sfocatura di profondità, grigio
     a cascata) e le comete col loro alone sono decine di livelli grafici da
     ricomporre a ogni fotogramma — la condizione in cui Safari su iPhone
     sporca lo schermo, come la linea viola vista una volta su questo
     diagramma. Qui la profondità la dà l'opacità, il grigio si posa sulla
     nuvola intera in un colpo solo e le comete perdono l'alone: a vista
     cambia pochissimo, da ridisegnare molto meno. */
  @media (max-width: 920px) {
    .mig-cloud { transition: filter 0.9s var(--ease); }
    .mig-cloud .arc-ic { transition: opacity 0.9s var(--ease); transition-delay: var(--gd, 0s); }
    .mig-cloud .l2 { filter: none; opacity: 0.7; }
    .mig-cloud .l3 { filter: none; opacity: 0.45; }
    .mig-flow.migrated .mig-cloud { filter: grayscale(1); }
    .mig-flow.migrated .mig-cloud .l1 { filter: none; opacity: 0.55; }
    .mig-flow.migrated .mig-cloud .l2 { filter: none; opacity: 0.4; }
    .mig-flow.migrated .mig-cloud .l3 { filter: none; opacity: 0.28; }
    .mf-lines .comet { filter: none; }
  }
  .mf-dest b { font-size: 15px; font-weight: 800; color: var(--ink); }
  .mf-dest small { display: block; font-size: 12.5px; font-weight: 600; color: var(--faint); margin-top: 2px; }

  .mig-points { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; column-gap: 20px; row-gap: 0; max-width: 940px; margin: 44px auto 0; text-align: left; }
  /* Le stesse card del resto del sito — carta, filetto, titolo in grassetto —
     con un numero al posto di un'icona: tre punti, in ordine. Ogni card è una
     sottogriglia delle tre righe (numero, titolo, testo), così i testi partono
     alla stessa altezza anche quando un titolo va a capo. */
  .mp { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px 26px; }
  .mp-n { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
  .mp b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 8px; color: var(--ink); }
  .mp p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--slate); }
  .mig-cta { margin-top: 40px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
  /* Le righe spezzate dall'autore restano quelle: il tetto in ch le rispezzerebbe. */
  .mig-sec h2.h2-lines { max-width: none; }

  /* ---- gli agenti: un agente al lavoro, poi la squadra ---- */
  /* Il pannello parla la lingua delle schermate del prodotto, così si legge
     come il prodotto e non come un'illustrazione. Senza JavaScript il lavoro
     è disegnato finito; con `arc-js` l'island lo accende passo per passo. */
  .agr { max-width: 860px; margin: 56px auto 0; background: #fff; border: 1px solid #E2E4E9; border-radius: 16px; padding: 22px 24px 24px; box-shadow: 0 30px 60px -34px rgba(21, 20, 18, 0.35); }
  .agr-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .agr-hd small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #6A7181; margin-bottom: 4px; }
  .agr-hd b { display: block; font-size: 16px; font-weight: 700; color: #17171C; letter-spacing: -0.01em; }
  .agr-done { font-size: 12.5px; font-weight: 700; color: #14713F; white-space: nowrap; transition: opacity 0.35s; }
  .agr-chain { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 10px; }
  .agr-rail { position: absolute; left: 8px; top: 16px; bottom: 16px; width: 2px; background: #E2E4E9; border-radius: 2px; overflow: hidden; }
  .agr-rail i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--accent), var(--ok)); transition: height 0.5s var(--ease); }
  .agr-step { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid rgba(46, 91, 255, 0.22); border-radius: 10px; background: #fff; transition: opacity 0.35s, border-color 0.35s, background 0.35s, box-shadow 0.35s; }
  .agr-step::before { content: ""; position: absolute; left: -23px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ok); transition: background 0.3s; }
  .agr-step.you { background: #FFFBF2; border-color: rgba(183, 121, 31, 0.4); }
  .agr-step.you::before { background: var(--warn); }
  .agr-txt { min-width: 0; }
  .agr-txt b { display: block; font-size: 13.5px; font-weight: 650; color: #17171C; line-height: 1.3; }
  .agr-txt small { display: block; font-size: 12.5px; color: #6A7181; line-height: 1.4; margin-top: 2px; }
  .agr-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; color: #6D4AE0; background: #EEE9FC; border-radius: 6px; padding: 2px 6px; margin-left: 8px; vertical-align: 1px; }
  .agr-step.you .agr-tag { color: var(--warn); background: var(--warn-bg); }
  .agr-st { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #14713F; white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity 0.3s; }
  .agr-step:first-of-type .agr-st { color: #6A7181; }
  html.arc-js .agr-done { opacity: 0; }
  html.arc-js .agr-done.show { opacity: 1; }
  html.arc-js .agr-rail i { height: 0; }
  html.arc-js .agr-step { opacity: 0.5; background: #FAFAFB; border-color: #E2E4E9; box-shadow: none; }
  html.arc-js .agr-step::before { background: #E2E4E9; }
  html.arc-js .agr-step .agr-st { opacity: 0; }
  html.arc-js .agr-step.on { opacity: 1; background: #fff; border-color: rgba(46, 91, 255, 0.35); box-shadow: 0 6px 16px -10px rgba(46, 91, 255, 0.45); }
  html.arc-js .agr-step.on::before { background: var(--accent); }
  html.arc-js .agr-step.you.on { background: #FFFBF2; border-color: rgba(183, 121, 31, 0.45); box-shadow: 0 6px 16px -10px rgba(183, 121, 31, 0.5); }
  html.arc-js .agr-step.you.on::before { background: var(--warn); }
  html.arc-js .agr-step.done::before { background: var(--ok); }
  html.arc-js .agr-step.done .agr-st { opacity: 1; }

  /* La squadra: la card del sito, nessuna icona. Cosa fa, cosa resta a te,
     dove lavora. Ogni card è una sottogriglia delle tre righe (nome, compito,
     righe finali), così in ogni fila le righe finali partono alla stessa
     altezza anche quando una frase va a capo. Lo spazio fra le file è il
     margine delle card: il gap di riga cadrebbe anche dentro ogni card. */
  .agc-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 16px; row-gap: 0; margin-top: 40px; }
  .agc { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; margin-bottom: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 20px; }
  .agc h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
  .agc p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--slate); }
  .agc dl { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
  .agc dt { margin: 0 0 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
  .agc dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink); }
  .agc-you dt { color: var(--accent); }
  /* Cosa ci guadagni, in verde come i soldi del blocco valore. */
  .agc-gain dt { color: var(--ok); }
  .agc-gain dd { color: #14713F; font-weight: 700; }
  /* Il filo d'oro: una luce che gira lungo il bordo di ogni card, sfalsata
     fra le card così non si accendono tutte insieme. `--agc-a` è registrata
     con @property perché un angolo si possa animare; senza, resta il bordo
     dorato fermo, che da solo dice già "premium". */
  .agc { position: relative; border-color: rgba(183, 121, 31, 0.3); box-shadow: 0 18px 40px -32px rgba(183, 121, 31, 0.6); transition: box-shadow 0.3s var(--ease); }
  .agc:hover { box-shadow: 0 24px 50px -28px rgba(183, 121, 31, 0.7); }
  .agc::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--agc-a), transparent 0deg 230deg, rgba(245, 210, 122, 0.25) 262deg, #F5D27A 306deg, #C9962E 334deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: agcGlow 5.5s linear infinite; animation-delay: calc(var(--i, 0) * -0.69s); }
  @keyframes agcGlow { to { --agc-a: 360deg; } }
  .agc-note { margin: 28px auto 0; max-width: 60ch; text-align: center; font-size: 14px; font-weight: 600; color: var(--slate); }

  /* ---- FAQ ---- */
  .faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px 80px; margin-top: 8px; align-items: start; }
  .faq-list { display: flex; flex-direction: column; }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
    padding: 20px 2px; font-size: 16.5px; font-weight: 700; color: var(--ink);
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary .pm { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--slate); transition: transform 0.2s; }
  .faq-list details[open] summary .pm { transform: rotate(45deg); }
  .faq-list .fa { padding: 0 2px 22px; color: var(--slate); font-size: 15px; max-width: 62ch; }
  .faq-list .fa p { margin: 0; }

  /* ---- prenota la demo (chiusura fotografica, stile Folio) ----
     la foto sta sul contenitore .close-photo, così avvolge anche il footer
     (card bianca che "galleggia" sull'immagine su tutti i lati) */
  .close-photo {
    position: relative;
    background: var(--eu-photo) center / cover no-repeat;
    padding-bottom: 40px;
  }
  .photo-cta {
    position: relative; padding: 170px 0 260px;
  }
  .photo-cta::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08) 58%, rgba(255,255,255,0) 80%);
  }
  .pc-inner { position: relative; max-width: 720px; margin: 0 auto; text-align: center; }
  .pc-inner::before {
    content: ""; position: absolute; inset: -80px -140px;
    background: radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(255,255,255,0.28) 55%, transparent);
    pointer-events: none;
  }
  .pc-inner > * { position: relative; }
  .pc-inner .label { color: var(--ink); opacity: 0.65; }
  .pc-inner h2 { color: var(--ink); font-size: clamp(40px, 5.6vw, 72px); }
  .pc-inner .lede { margin: 22px auto 0; max-width: 46ch; color: rgba(21, 20, 18, 0.72); }
  .pc-inner .btn { margin-top: 34px; }
  .df-trust { margin-top: 26px; font-size: 13px; font-weight: 700; display: flex; gap: 10px 12px; flex-wrap: wrap; justify-content: center; }
  /* leggibili sulla foto: pannellino chiaro dietro ogni voce (radius 10px, come i bottoni) */
  .df-trust > span { color: rgba(21, 20, 18, 0.85); background: rgba(255, 255, 255, 0.74); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 10px; padding: 7px 14px; box-shadow: 0 6px 18px -12px rgba(21, 20, 18, 0.5); }
  .df-card { background: #fff; border-radius: 18px; padding: 32px; box-shadow: 0 30px 70px -35px rgba(21, 20, 18, 0.35); }
  .df-card .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .df-card label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); margin: 0 0 6px; }
  .df-field { margin-bottom: 16px; }
  .df-card input, .df-card select, .df-card textarea {
    width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
    background: var(--mist); border: 1px solid var(--line-strong); border-radius: 10px;
    padding: 11px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .df-card input:focus, .df-card select:focus, .df-card textarea:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.13); }
  .df-card textarea { resize: vertical; min-height: 74px; }
  .df-card .btn { width: 100%; margin-top: 6px; font-size: 16px; padding: 15px 26px; }
  .df-note { margin-top: 14px; font-size: 12.5px; color: var(--faint); text-align: center; }
  .df-ok { display: none; text-align: center; padding: 40px 10px; }
  .df-ok .big { font-family: var(--serif-d); font-size: 26px; font-weight: 700; margin: 0 0 10px; }
  .df-ok p { margin: 0; color: var(--slate); font-size: 15px; }
  .df-card.sent form { display: none; }
  .df-card.sent .df-ok { display: block; }


  footer {
    position: relative; z-index: 2; margin-top: -110px;
    background: #fff; border-radius: 32px;
    box-shadow: 0 26px 60px -30px rgba(21, 20, 18, 0.45);
    padding: 76px 0 42px;
    width: min(1240px, calc(100% - 32px));
    margin-left: auto; margin-right: auto;
  }
  .foot-grid { display: flex; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
  .foot-col { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; color: var(--slate); }
  .foot-col b { color: var(--ink); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
  .foot-col a:hover { color: var(--accent); }
  .foot-base { margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--faint); }

  /* ---- appendice interna ---- */
  .eco { border-top: 3px solid var(--accent); background: var(--mist); padding: 84px 0 100px; }
  .eco-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 7px 16px; border-radius: 999px; margin-bottom: 30px; }
  .eco h2 { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 3vw, 38px); max-width: 30ch; line-height: 1.15; }
  .eco h3 { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); margin: 44px 0 12px; }
  .eco p, .eco li { color: var(--slate); font-size: 15px; max-width: 76ch; }
  .eco li { margin-bottom: 9px; }
  .eco b { color: var(--ink); font-weight: 700; }
  .eco code { font-family: ui-monospace, monospace; font-size: 13px; background: rgba(21, 20, 18, 0.07); padding: 2px 7px; border-radius: 6px; color: var(--accent-dark); }

  @media (max-width: 920px) {
    section { padding: 92px 0; }
    .nav-menu, .nav-textlink { display: none; }
    .shead { grid-template-columns: 1fr; align-items: start; }
    .trio, .areas { grid-template-columns: 1fr; }
    .duo { grid-template-columns: 1fr; }
    .mig-flow { grid-template-columns: 1fr; justify-items: center; gap: 0; }
    .mf-lines.mf-h { display: none; }
    .mf-lines.mf-v { display: block; width: min(350px, 92vw); }
    .mig-cloud { width: min(350px, 92vw); height: 250px; }
    .prob-grid { grid-template-columns: 1fr; }
    .prob-visual { min-height: 320px; }
    .ari-grid { grid-template-columns: 1fr; gap: 44px; }
    /* In colonna, i punti vanno sotto il telefono: sono la didascalia di
       quello che si vede, e letti prima non hanno ancora niente da
       commentare. `display: contents` scioglie il blocco del testo nella
       griglia, così i tre pezzi si possono ordinare uno per uno. */
    .ari-grid > div:not(.phone):not([class*="media"]) { display: contents; }
    .ari-grid .label { order: 1; }
    .ari-grid h2 { order: 2; }
    .ari-grid .phone { order: 3; }
    .ari-grid .ari-points { order: 4; margin-top: 0; }
    .ahouse { padding: 36px 22px 30px; }
    .phone .chat { height: 460px; }
    .mig-points { grid-template-columns: 1fr; row-gap: 14px; }
    .agc-grid { grid-template-columns: 1fr 1fr; }
    .agr { padding: 18px 16px 20px; }
    .agr-hd { flex-direction: column; align-items: flex-start; gap: 6px; }
    .mp { display: block; grid-row: auto; }
    .faq-grid { grid-template-columns: 1fr; }
    .df-panel { grid-template-columns: 1fr; gap: 40px; padding: 36px 26px; }
    .df-card .frow { grid-template-columns: 1fr; gap: 0; }
    .dash { grid-template-columns: 1fr; }
    .dash-side { display: none; }
    .dash-lower { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 700px) {
    .arc-stage { transform: scale(0.6); transform-origin: 50% 0; margin-bottom: -128px; }
  }

  @media (max-width: 560px) {
    /* Prima ne sopravvivevano due su dodici, perché le altre cadevano fuori
       campo con le coordinate del monitor. Ora hanno un impianto loro. */
    .float-icon { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
    .flow { height: 320px; }
    .arc-stage { transform: scale(0.46); margin-bottom: -178px; }
    .phone { border-width: 7px; border-radius: 38px; }
    .agc-grid { grid-template-columns: 1fr; }
    /* Su un telefono lo stato va sotto il testo: accanto lo schiaccerebbe. */
    .agr-step { flex-wrap: wrap; row-gap: 4px; }
    .agr-st { margin-left: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fade { opacity: 1; transform: none; transition: none; }
    .float-inner { opacity: 1; transform: none; }
    .float-inner.floating { animation: none; }
    .msg, .chat-actions { transition: none; }
    .typing i { animation: none; }
    .fedge .live { animation: none; }
    .arc-flows .fin, .arc-flows .fout { animation: none; opacity: 0.35; }
    .mf-lines .comet { animation: none !important; opacity: 0.45; stroke-dasharray: 0.02 0.05; filter: none; }
    .mig-cloud .arc-ic { transition: none; }
    .agr-step, .agr-step::before, .agr-st, .agr-done, .agr-rail i { transition: none; }
    .hb-tile { animation: none !important; opacity: 1 !important; scale: 1 !important; }
    .mc-face { transition: none; }
    .mc-prog { display: none; }
    .agc::before { animation: none; background: linear-gradient(135deg, #F5D27A, #C9962E 55%, #F5D27A); }
    .chart .line { stroke-dashoffset: 0; }
    .chart .area { opacity: 1; }
    .mchip.on { animation: none; }
    .prob-head h3, .prob-body, .prob-scene { transition: none; }
    .prob-bar { display: none; }
    .av-stat { transition: none; }
    .vs-table tbody tr { transition: none; }
    .mq { mask-image: none; -webkit-mask-image: none; }
    .mq-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .mq-track > .mchip2:nth-child(n+17) { display: none; } /* senza scroll basta una copia */
  }
  /* ---- rev.8: chip moduli cliccabili + chiusura fotografica della demo ---- */
  .demo-sec { position: relative; padding-bottom: 84px; }
  .demo-sec .wrap { position: relative; }
  .demo-glow {
    position: absolute; inset: -60px 0 0;
    background:
      radial-gradient(ellipse 58% 42% at 50% 40%, rgba(77, 101, 255, 0.13), transparent 68%),
      radial-gradient(ellipse 82% 62% at 50% 42%, var(--sky), transparent 72%);
  }
  .dash-wrap {
    -webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0,0,0,0.6) 92%, rgba(0,0,0,0.22) 100%);
    mask-image: linear-gradient(180deg, #000 74%, rgba(0,0,0,0.6) 92%, rgba(0,0,0,0.22) 100%);
  }
  .demo-sec .demo-note { position: relative; color: rgba(21, 20, 18, 0.72); font-weight: 600; }
  @media (prefers-reduced-motion: reduce) { .mchip { transition: none; } .mchip:active { transform: none; } }
  /* ---- rev.23: la demo cambia scena — tab-beneficio sopra la cornice + sidebar sincronizzata ---- */
  .scn-tabs { position: relative; display: flex; justify-content: center; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
  /* Il selettore delle scene. Era una fila di etichette pallide in mezzo a
     una pagina bianca: nessuno capiva di poterle toccare. Ora è un pannello
     "alba" che si stacca dallo sfondo e lo dice a parole. */
  .scn-pick { position: relative; max-width: 780px; margin: 0 auto 22px; padding: 15px 18px 17px; border-radius: 14px; border: 1px solid rgba(46, 91, 255, 0.26); background: linear-gradient(135deg, #F2F6FF 0%, #FFF6E6 54%, #EFF9F2 100%); box-shadow: 0 18px 40px -30px rgba(46, 91, 255, 0.5); }
  .scn-hint { margin: 0 0 12px; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-dark, #1F41C4); }
  .scn-pick .scn-tabs { margin: 0; }
  .scn-pick .scn-tab { background: #fff; border-color: rgba(46, 91, 255, 0.32); box-shadow: 0 1px 2px rgba(21, 20, 18, 0.06); }
  .scn-pick .scn-tab:hover { border-color: var(--accent, #2E5BFF); color: var(--ink); }
  .scn-pick .scn-tab.on { background: var(--accent, #2E5BFF); border-color: var(--accent, #2E5BFF); color: #fff; }
  .scn-pick .scn-tab.on kbd { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); }
  .scn-pick .scn-tab.on .tprog { background: #fff; }
  .scn-tab { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 650; letter-spacing: -0.005em; color: var(--slate); background: #fff; border: 1px solid var(--line-strong); border-radius: 11px; padding: 9px 16px 10px; transition: color 0.2s, border-color 0.2s, background 0.2s; }
  .scn-tab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .scn-tab kbd { font-family: ui-monospace, monospace; font-size: 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; background: var(--mist); }
  .scn-tab:hover { color: var(--ink); border-color: var(--ink); }
  .scn-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .scn-tab.on { color: var(--ink); background: var(--info-bg); border-color: rgba(46, 91, 255, 0.42); }
  .scn-tab .tprog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background: var(--electric); pointer-events: none; }
  /* sulle scene la dissolvenza fotografica in basso si fa più gentile: il contenuto va letto */
  .dash-wrap.scn-alt { -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0.6) 100%); mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0.6) 100%); }
  /* Le quattro scene su una riga sola, larghe e in evidenza: sul monitor sono
     il modo di usare la demo, e andando a capo sembravano un elenco di
     etichette. La demo si allarga quanto serve per tenerle. Sotto i 1120px
     la riga non ci sta più e tornano a disporsi su due; sul telefono la
     demo non c'è. */
  @media (min-width: 1101px) {
    .demo-sec .wrap { max-width: 1296px; }
    .demo-sec .lch-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  }
  @media (min-width: 1120px) {
    .scn-pick { max-width: none; padding: 18px 20px 20px; margin-bottom: 26px; }
    .scn-hint { font-size: 12.5px; margin-bottom: 14px; }
    .scn-pick .scn-tabs { flex-wrap: nowrap; gap: 10px; }
    .scn-pick .scn-tab {
      flex: 1 1 auto; justify-content: center; white-space: nowrap;
      min-height: 58px; padding: 0 15px; gap: 9px;
      font-size: 14px; font-weight: 700; color: var(--ink);
      border-radius: 10px; box-shadow: 0 10px 24px -18px rgba(46, 91, 255, 0.55);
      transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .scn-pick .scn-tab:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(46, 91, 255, 0.6); }
    .scn-pick .scn-tab.on { box-shadow: 0 16px 32px -16px rgba(46, 91, 255, 0.75); }
    .scn-pick .scn-tab svg { width: 18px; height: 18px; }
    .scn-pick .scn-tab .tprog { height: 3px; }
  }
  @media (min-width: 1280px) {
    .scn-pick .scn-tabs { gap: 12px; }
    .scn-pick .scn-tab { min-height: 60px; padding: 0 22px; gap: 11px; font-size: 15.5px; }
    .scn-pick .scn-tab svg { width: 20px; height: 20px; }
  }
  @media (min-width: 1120px) and (prefers-reduced-motion: reduce) { .scn-pick .scn-tab:hover { transform: none; } }

  @keyframes scnIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
  .scn.in { animation: scnIn 0.38s var(--ease); }
  .ds-item[data-scn] { cursor: pointer; }
  .ds-item[data-scn]:hover { background: #F3F4F6; color: #17171C; }
  .ds-item.on[data-scn]:hover { background: #F2EDFD; }
  .dh-search[data-scn] { cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
  .dh-search.on { background: var(--info-bg); border-color: rgba(46, 91, 255, 0.45); color: #17171C; }

  /* scena Fatture: la vita di una fattura, dentro la shell (neutri della shell, non del sito) */
  .inv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .inv-head b { display: block; font-size: 14px; font-weight: 650; color: #17171C; }
  .inv-head small { font-size: 12px; color: #6A7181; }
  .inv-new { font-size: 12px; font-weight: 700; color: #fff; background: #17171C; border-radius: 9px; padding: 7px 13px; white-space: nowrap; }
  .inv-list { background: #fff; border: 1px solid #E2E4E9; border-radius: 12px; overflow: hidden; }
  .inv-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) 84px minmax(150px, auto); gap: 14px; align-items: center; padding: 13px 16px; font-size: 13px; color: #3E4552; }
  .inv-row + .inv-row { border-top: 1px solid #EDEFF3; }
  .inv-row b { font-weight: 650; color: #17171C; font-variant-numeric: tabular-nums; }
  .inv-amt { text-align: right; font-variant-numeric: tabular-nums; color: #17171C; }
  .inv-st { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: #F3F4F7; color: #6A7181; transition: background 0.35s, color 0.35s; white-space: nowrap; }
  .inv-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
  .inv-st.st-sent, .inv-st.st-sdi { background: var(--info-bg); color: #1F41C4; }
  .inv-st.st-paid { background: var(--ok-bg); color: #14713F; }
  .inv-st.st-late { background: var(--warn-bg); color: #8A5E12; }
  @keyframes invZap { 0% { background: var(--info-bg); } 100% { background: transparent; } }
  .inv-row.zap { animation: invZap 0.7s var(--ease); }
  .inv-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #14713F; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease); }
  .inv-sub svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .inv-sub.show { max-height: 30px; opacity: 1; margin-top: 2px; }
  .inv-cap { margin: 12px 2px 0; font-size: 12px; color: #6A7181; }

  /* scena Automazione: canvas verticale (come il builder vero) + registro esecuzioni */
  .flo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 14px; align-items: start; }
  .flo-panel { background: #fff; border: 1px solid #E2E4E9; border-radius: 12px; padding: 14px 16px; }
  .flo-panel > small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #6A7181; margin-bottom: 3px; }
  .flo-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .flo-hd b { font-size: 13.5px; font-weight: 650; color: #17171C; letter-spacing: -0.005em; }
  .flo-hd .fdone { font-size: 11.5px; font-weight: 700; color: #14713F; opacity: 0; transition: opacity 0.35s; white-space: nowrap; }
  .flo-hd .fdone.show { opacity: 1; }
  .flo-chain { position: relative; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
  .flo-rail { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: #E2E4E9; border-radius: 2px; overflow: hidden; }
  .flo-rail i { display: block; width: 100%; height: 0%; background: linear-gradient(180deg, var(--accent), var(--ok)); transition: height 0.7s var(--ease); }
  .flo-node { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #E2E4E9; border-radius: 10px; background: #FAFAFB; opacity: 0.55; transition: opacity 0.35s, border-color 0.35s, background 0.35s, box-shadow 0.35s; }
  .flo-node::before { content: ""; position: absolute; left: -19px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #E2E4E9; transition: background 0.3s; }
  .flo-node.on { opacity: 1; background: #fff; border-color: rgba(46, 91, 255, 0.35); box-shadow: 0 6px 16px -10px rgba(46, 91, 255, 0.45); }
  .flo-node.on::before { background: var(--accent); }
  .flo-node.done::before { background: var(--ok); }
  .flo-node .fico { width: 28px; height: 28px; border-radius: 8px; background: #EEE9FC; display: grid; place-items: center; flex: none; }
  .flo-node .fico svg { width: 15px; height: 15px; stroke: #6D4AE0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .flo-node > div { min-width: 0; }
  .flo-node b { display: block; font-size: 12.5px; font-weight: 650; color: #17171C; line-height: 1.25; }
  .flo-node small { display: block; font-size: 11.5px; color: #6A7181; line-height: 1.3; }
  .flo-node .fst { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #14713F; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
  .flo-node.done .fst { opacity: 1; }
  .flo-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.07em; color: #6D4AE0; background: #EEE9FC; border-radius: 6px; padding: 2px 6px; margin-left: 7px; vertical-align: 1px; }
  .flo-log { display: flex; flex-direction: column; gap: 7px; }
  .flo-run { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #3E4552; padding: 8px 11px; border: 1px solid #EDEFF3; border-radius: 9px; font-variant-numeric: tabular-nums; }
  .flo-run b { color: #17171C; font-weight: 650; }
  .flo-run .fok { margin-left: auto; font-size: 11px; font-weight: 700; color: #14713F; white-space: nowrap; }
  .flo-run.new { opacity: 0; transform: translateY(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); border-color: rgba(27, 158, 90, 0.35); background: #F7FCF9; }
  .flo-run.new.show { opacity: 1; transform: none; }

  /* scena fattura: il documento che si spedisce e si salda da solo.
     Prima era una riga di elenco con una parolina che cambiava ogni secondo
     e mezzo: non si muoveva niente, quindi sembrava uno screenshot. */
  .ivx { position: relative; background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 24px 50px -34px rgba(23, 23, 28, 0.35); transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
  .ivx.paid { border-color: rgba(27, 158, 90, 0.45); box-shadow: 0 24px 50px -30px rgba(27, 158, 90, 0.4); }
  .ivx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #EDEFF3; }
  .ivx-id small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #6A7181; }
  .ivx-id b { font-size: 16px; font-weight: 700; color: #17171C; letter-spacing: -0.01em; }
  .ivx-st { flex: none; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 8px; background: #F3F4F7; color: #6A7181; transition: background 0.3s, color 0.3s; }
  .ivx-st.is-sent { background: var(--info-bg, #EAF0FF); color: var(--accent-dark, #1F41C4); }
  .ivx-st.is-paid { background: var(--ok-bg, #E5F4EA); color: #14713F; }
  .ivx-who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 13px 0; border-bottom: 1px solid #EDEFF3; }
  .ivx-who small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6A7181; margin-bottom: 2px; }
  .ivx-who b { font-size: 13px; font-weight: 650; color: #17171C; }
  .ivx-lines { padding: 11px 0 9px; display: flex; flex-direction: column; gap: 7px; }
  .ivx-l { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 12.5px; color: #3E4552; }
  .ivx-l b { font-weight: 650; color: #17171C; font-variant-numeric: tabular-nums; }
  .ivx-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 11px; border-top: 1px solid #EDEFF3; font-size: 12.5px; font-weight: 700; color: #6A7181; }
  .ivx-tot b { font-size: 17px; color: #17171C; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .ivx-send { display: block; width: 100%; margin-top: 14px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: #fff; background: var(--accent, #2E5BFF); border: 0; border-radius: 10px; padding: 11px 16px; cursor: default; transition: background 0.2s, transform 0.18s var(--ease), opacity 0.3s, margin 0.3s, padding 0.3s; }
  .ivx-send.pressed { background: var(--accent-dark, #1F41C4); transform: scale(0.98); }
  .ivx-send.gone { opacity: 0; transform: scale(0.96); margin-top: 0; padding-top: 0; padding-bottom: 0; height: 0; overflow: hidden; }
  .ivx-trail { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
  .ivx-step { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #6A7181; opacity: 0; transform: translateY(-4px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
  .ivx-step.in { opacity: 1; transform: none; }
  .ivx-step::before { content: "✓"; font-weight: 800; color: #14713F; }
  .ivx-toast { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; max-width: min(330px, calc(100% - 24px)); background: #fff; border: 1px solid rgba(27, 158, 90, 0.4); border-radius: 12px; padding: 11px 14px; box-shadow: 0 22px 44px -22px rgba(23, 23, 28, 0.45); opacity: 0; transform: translateY(10px) scale(0.98); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
  .ivx-toast.in { opacity: 1; transform: none; }
  .ivx-toast b { display: block; font-size: 12.5px; font-weight: 700; color: #17171C; }
  .ivx-toast small { display: block; font-size: 11.5px; color: #6A7181; line-height: 1.35; }
  .ivx-tic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ok, #1B9E5A); display: grid; place-items: center; }
  .ivx-tic svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 640px) {
    .ivx { padding: 15px 15px 14px; }
    .ivx-who { grid-template-columns: 1fr; gap: 8px; }
    .ivx-toast { position: static; max-width: none; margin-top: 12px; transform: translateY(8px); }
    .ivx-toast.in { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ivx, .ivx-st, .ivx-send, .ivx-step, .ivx-toast { transition: none; }
  }

  /* scena ⌘K: palette di ricerca — risultati da più moduli insieme */
  .sea { display: flex; justify-content: center; padding: 16px 0 8px; }
  .sea-pal { width: min(560px, 100%); background: #fff; border: 1px solid #E2E4E9; border-radius: 14px; box-shadow: 0 34px 70px -34px rgba(23, 23, 28, 0.4); overflow: hidden; }
  .sea-in { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #EDEFF3; font-size: 14px; color: #17171C; }
  .sea-in svg { width: 15px; height: 15px; stroke: #6A7181; fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
  .sea-in kbd { margin-left: auto; font-family: ui-monospace, monospace; font-size: 10.5px; color: #6A7181; border: 1px solid #E2E4E9; border-radius: 5px; padding: 1px 6px; background: #F3F4F7; }
  #seaQ { min-width: 1px; font-weight: 600; }
  .sea-caret { width: 2px; height: 16px; background: var(--accent); animation: seaBlink 0.9s steps(2, start) infinite; }
  @keyframes seaBlink { 50% { opacity: 0; } }
  .sea-rs { padding: 7px 8px 4px; }
  .sea-r { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #17171C; opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
  .sea-r.on { opacity: 1; transform: none; }
  .sea-r.sel { background: #F2EDFD; }
  .sea-r .sico { width: 26px; height: 26px; border-radius: 8px; background: #F3F4F7; display: grid; place-items: center; flex: none; }
  .sea-r .sico svg { width: 14px; height: 14px; stroke: #3E4552; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .sea-r b { font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sea-r small { margin-left: auto; font-size: 11.5px; color: #6A7181; white-space: nowrap; }
  .sea-f { border-top: 1px solid #EDEFF3; padding: 9px 16px; font-size: 11.5px; color: #6A7181; opacity: 0; transition: opacity 0.35s; }
  .sea-f.show { opacity: 1; }
  .sea-f b { color: #17171C; }

  @media (max-width: 900px) {
    .flo { grid-template-columns: 1fr; }
    .flo-runs { display: none; }
  }
  @media (max-width: 640px) {
    /* 40px alti e larghi quanto la parola: sotto il minimo tocabile, e
       incolonnati a caso. Una riga piena ciascuno, 46px, si centrano col
       pollice. */
    .scn-pick { padding: 14px 12px 15px; }
    .scn-pick .scn-tabs { flex-direction: column; gap: 7px; }
    .scn-pick .scn-tab { width: 100%; min-height: 46px; justify-content: flex-start; font-size: 13.5px; padding: 11px 14px; }
    .scn-tab { font-size: 12.5px; padding: 8px 12px 9px; }
    .inv-row { grid-template-columns: 60px minmax(0, 1fr) minmax(130px, auto); }
    .inv-amt { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scn.in { animation: none; }
    .inv-st, .inv-sub, .flo-node, .flo-rail i, .sea-r, .sea-f, .flo-run.new { transition: none; }
    .inv-row.zap { animation: none; }
    .sea-caret { animation: none; }
  }
  /* ---- rev.11 ---- */
  /* ---- rev.19: la demo è il launcher delle App — le icone risucchiate diventano card modulo ---- */
  .lch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #fff; border: 1px solid #E2E4E9; border-radius: 10px; margin-bottom: 14px; }
  .lch-q { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: #6A7181; }
  .lch-q svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  .lch-n { font-size: 12px; font-weight: 700; color: #6A7181; background: #F3F4F7; border: 1px solid #E2E4E9; border-radius: 8px; padding: 4px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lch-n b { color: #17171C; }
  .lch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .mcard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 16px 8px 13px; background: #fff; border: 1px solid #E2E4E9; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); opacity: 0.32; filter: grayscale(1); transition: opacity 0.35s var(--ease), filter 0.35s var(--ease); }
  .mcard .mico { width: 40px; height: 40px; border-radius: 11px; background: #EEE9FC; display: grid; place-items: center; }
  .mcard .mico svg { width: 20px; height: 20px; stroke: #6D4AE0; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mcard b { font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; color: #17171C; text-align: center; line-height: 1.25; }
  .mcard .mstar { position: absolute; top: 7px; right: 8px; width: 13px; height: 13px; opacity: 0; transition: opacity 0.3s; }
  .mcard .mstar svg { width: 100%; height: 100%; fill: #F5A623; stroke: none; }
  .mcard.on { opacity: 1; filter: none; animation: cardPop 0.4s var(--ease); }
  .mcard.on .mstar { opacity: 1; }
  @keyframes cardPop { 0% { transform: scale(0.86); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
  .mcard.plus { border-style: dashed; box-shadow: none; background: transparent; }
  .mcard.plus .pn { font-size: 17px; font-weight: 650; color: #17171C; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .mcard.plus b { color: #6A7181; font-weight: 600; }
  @media (max-width: 640px) { .lch-grid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); } .mcard { padding: 12px 6px 10px; } }
  @media (prefers-reduced-motion: reduce) { .mcard { transition: none; animation: none; } }
  .mchip { margin: 0; font-family: var(--sans); }

  /* sfondo: alba sfocata, chiara e luminosa (rev.12: via la foto — tendeva allo scuro) */
  .gleam { position: relative; overflow: hidden; }
  .gleam::before { content: ""; position: absolute; inset: -48px;
    background:
      radial-gradient(ellipse 75% 60% at 18% 100%, #DFEDCE, transparent 62%),
      radial-gradient(ellipse 70% 55% at 88% 92%, #FFE4BA, transparent 66%),
      radial-gradient(ellipse 95% 75% at 72% 6%, #FFDCA8, transparent 72%),
      linear-gradient(180deg, #D3E3F6 0%, #FBEBD0 56%, #EAF1DC 100%);
    filter: blur(34px) saturate(1.12); transform: scale(1.2); }
  .gleam::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.42); }
  .gleam > * { position: relative; z-index: 1; }
  /* fix rev.12: la regola qui sopra rimetteva le scene del problema in flusso —
     tornavano visibili solo scrollando dentro il riquadro; devono restare sovrapposte */
  .prob-visual > .prob-scene, .prob-visual > .prob-count { position: absolute; z-index: 1; }

  /* whisper text */
  .whisper .ww { display: inline-block; opacity: 0; transform: translateX(-16px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
  .whisper.win .ww { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .whisper .ww { opacity: 1; transform: none; transition: none; } }

  /* riga curva di scroll (rev.13): corre in background dietro alle schede lungo tutta
     la pagina e si illumina da dietro, in giallo, man mano che si scorre */
  .scrollpath { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; pointer-events: none; }
  .scrollpath path { fill: none; stroke-linecap: round; }
  .scrollpath .sp-base { stroke: rgba(21, 20, 18, 0.06); stroke-width: 1.5px; }
  .scrollpath .sp-halo { stroke: rgba(255, 196, 110, 0.18); stroke-width: 14px; filter: blur(11px); }
  .scrollpath .sp-core { stroke: rgba(255, 200, 115, 0.45); stroke-width: 2.5px; filter: blur(0.5px); }
  @media (prefers-reduced-motion: reduce) { .scrollpath .sp-halo, .scrollpath .sp-core { display: none; } }
  @media (max-width: 700px) { .scrollpath { display: none; } }
  /* Un articolo si legge: la curva passerebbe sotto le righe del testo. */
  body:has(.art) .scrollpath { display: none; }

  /* clienti (rev.12): foto dei CEO, non video — banda chiara "alba", carosello a
     tutta larghezza stile Salesforce (le card corrono fino ai bordi, non tagliate
     dentro il contenitore) e anteprima che si apre al click sulla card */
  .tsec { padding: 84px 0 68px; background:
      radial-gradient(ellipse 70% 55% at 15% 100%, #E4F0D4, transparent 60%),
      radial-gradient(ellipse 75% 60% at 88% 88%, #FFE7C0, transparent 64%),
      linear-gradient(180deg, #E9F2FC 0%, #FBEDD2 62%, #F2F6E6 100%); }
  .tsec .label { display: block; text-align: center; color: var(--accent); }
  .tsec h2 { text-align: center; max-width: 24ch; margin: 0 auto; color: var(--ink); }
  .tstrip { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 40px calc(50% - 50vw) 0; padding: 6px max(28px, calc(50vw - 542px)) 10px 28px; scrollbar-width: none; }
  @media (min-width: 1140px) { .tstrip { padding-left: calc(50vw - 542px); } }
  .tstrip::-webkit-scrollbar { display: none; }
  .tcard { position: relative; flex: 0 0 min(440px, 80vw); scroll-snap-align: start; background: #fff; border-radius: 20px; padding: 9px; color: var(--ink); cursor: pointer; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(21, 20, 18, 0.4); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .tcard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(21, 20, 18, 0.45); }
  .tthumb { position: relative; aspect-ratio: 16 / 10; border-radius: 13px; overflow: hidden; display: grid; place-items: center; }
  .tthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tph { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(21, 20, 18, 0.5); border: 1px dashed rgba(21, 20, 18, 0.3); border-radius: 8px; padding: 7px 12px; background: rgba(255, 255, 255, 0.55); }
  .tmeta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 9px 11px; }
  .tmeta b { display: block; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
  .tmeta small { color: var(--slate); font-size: 12.5px; font-weight: 600; line-height: 1.35; display: block; margin-top: 2px; }
  .tmore { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 17px; font-weight: 600; line-height: 1; color: var(--slate); transition: transform 0.3s var(--ease), background 0.15s; }
  .tcard:hover .tmore { background: var(--mist); }
  .tcard.open .tmore { transform: rotate(45deg); }
  /* anteprima: pannello che sale sopra la foto con le info del cliente */
  /* rev.19: la .tinfo non si apre più in-card — è la sorgente dati del popup «card girata» */
  .tinfo { display: none; }
  .tquote { margin: 15px 9px 3px; padding: 0 4px; font-family: var(--serif-d); font-style: italic; font-size: 16.5px; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; color: var(--ink); }
  .tquote::before { content: "\201C"; color: var(--accent); font-size: 1.25em; line-height: 0; margin-right: 2px; }
  .tinfo .tin { font-family: var(--serif-d); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
  .tinfo .tir { font-size: 13px; font-weight: 600; color: var(--slate); }
  .tinfo .tind { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-dark); margin-top: 9px; }
  .timods { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .timods span { font-size: 11.5px; font-weight: 700; color: var(--accent-dark); background: var(--info-bg); border-radius: 8px; padding: 4px 11px; }
  .tid { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--slate); }
  /* popup use case: la card «si gira» in primo piano */
  .uc-ov { position: fixed; inset: 0; z-index: 400; background: rgba(21, 20, 18, 0.45); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 24px; perspective: 1400px; }
  .uc-ov[hidden] { display: none; }
  .uc-pop { position: relative; width: min(500px, 94vw); max-height: 86vh; overflow: auto; background: #fff; border-radius: 20px; padding: 36px 38px 32px; box-shadow: 0 60px 120px -40px rgba(21, 20, 18, 0.55); animation: ucFlip 0.55s var(--ease); }
  @keyframes ucFlip { 0% { transform: rotateY(-100deg) scale(0.92); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
  .uc-x { appearance: none; -webkit-appearance: none; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--slate); transition: background 0.15s; }
  .uc-x:hover { background: var(--mist); }
  .uc-x svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
  .uc-pop .tinfo { display: flex; flex-direction: column; gap: 5px; }
  @media (prefers-reduced-motion: reduce) { .uc-pop { animation: none; } }
  .tnav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
  .tbtn { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(21, 20, 18, 0.25); background: rgba(255, 255, 255, 0.6); cursor: pointer; display: grid; place-items: center; transition: background 0.15s, transform 0.15s; }
  .tbtn:hover { background: #fff; }
  .tbtn:active { transform: scale(0.94); }
  .tbtn svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tnote { margin: 16px auto 0; font-size: 12.5px; color: var(--slate); max-width: 62ch; text-align: center; }

  .mig-cap { margin: 20px auto 0; font-size: 14px; font-weight: 600; color: var(--slate); max-width: 56ch; }

  /* ---- rev.16: aree che si illuminano allo scroll (ordine sparso) ---- */
  .areas8 .a8 {
    transition: background 0.55s var(--ease), border-color 0.55s var(--ease),
                box-shadow 0.55s var(--ease), transform 0.55s var(--ease);
  }
  .areas8 .a8.lit {
    border-color: rgba(46, 91, 255, 0.32);
    /* bianco punteggiato, come la card "Automazioni tra i reparti" */
    background-color: #fff;
    background-image: radial-gradient(rgba(21, 20, 18, 0.13) 1px, transparent 1px);
    background-size: 18px 18px;
    box-shadow: 0 18px 38px -20px rgba(46, 91, 255, 0.38);
    transform: translateY(-3px);
  }
  @keyframes a8pop { 0% { transform: scale(1); } 45% { transform: scale(1.05) translateY(-4px); } 100% { transform: scale(1) translateY(-3px); } }
  .areas8 .a8.pop { animation: a8pop 0.6s var(--ease); }

  /* ---- rev.16: striscia certificazioni → pagina Sicurezza ---- */
  .cert-strip { display: block; text-decoration: none; color: inherit; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cert-in { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 40px; padding: 54px 0; }
  .cert-txt { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; letter-spacing: -0.01em; color: var(--faint); max-width: 46ch; }
  .cert-txt b { color: var(--ink); }
  .cert-link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--accent-dark); }
  .cert-strip:hover .cert-link { text-decoration: underline; }
  .cert-badges { display: grid; grid-template-columns: repeat(3, 1fr); }
  .cert-b { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 8px; border-left: 1px solid var(--line); color: var(--slate); }
  .cert-b svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .cert-b span { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); max-width: 100%; padding: 0 6px; }
  .cert-b span svg { width: 13px; height: 13px; stroke-width: 2.4; color: var(--ok); }
  .cert-strip:hover .cert-b { color: var(--ink); }
  @media (max-width: 860px) {
    .cert-in { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }
    .cert-b { border-left: 0; gap: 10px; }
    /* Su un telefono queste tre sono la prova, non una decorazione. */
    .cert-b svg { width: 38px; height: 38px; stroke-width: 2.1; }
    .cert-b span { font-size: 12px; }
    .cert-badges { border-top: 1px solid var(--line); padding-top: 24px; }
  }

  /* ---- rev.17: evidenziazioni del problema (rosso) e della soluzione (verde) ---- */
  .prob-scene em.bad, .prob-inline em.bad, .prob-close .bad { color: #B4433B; font-style: normal; }
  .prob-close .good { color: var(--ok); }

  /* ---- Il problema, al buio ----
     Problema e piattaforma avevano la stessa faccia — pannello alba, righe
     bianche — e scorrendo non si capiva dove finisse l'uno e iniziasse
     l'altra. Il problema sta ora su una banda scura, con i segni del
     pericolo in rosso: le righe saltano fuori, e la piattaforma che segue,
     chiara, si legge come la risposta. Eccezione voluta dal PO alla regola
     «niente pannelli neri»: vale per questa sezione sola. */
  .prob-sec {
    color: #F4F2EE;
    background: #131211 radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 20px 20px;
  }
  .prob-sec .label { color: #FF8A80; }
  /* Il titolo del problema è una frase intera (PO, 28-09: «il problema non è il
     software, è il lavoro tra un software e l'altro»): un corpo più piccolo la
     tiene in tre righe nella colonna, invece di quattro spezzate a metà. */
  .prob-sec h2 { color: #fff; font-size: clamp(34px, 4vw, 56px); }
  .prob-sec .lede { color: rgba(244, 242, 238, 0.68); }
  .prob-sec .prob-item { border-top-color: rgba(255, 255, 255, 0.1); }
  .prob-sec .prob-head h3 { color: rgba(244, 242, 238, 0.34); }
  .prob-sec .prob-item.on .prob-head h3 { color: #fff; }
  .prob-sec .prob-head:hover h3 { color: rgba(244, 242, 238, 0.7); }
  .prob-sec .prob-body-in p { color: rgba(244, 242, 238, 0.74); }
  .prob-sec .prob-item.on .prob-bar { background: rgba(255, 255, 255, 0.12); }
  .prob-sec .prob-bar i { background: #FF5A4F; }
  .prob-sec .prob-visual { background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(255, 90, 79, 0.16), transparent 62%), #1C1A18; border-color: rgba(255, 255, 255, 0.09); }
  .prob-sec .prob-visual.gleam::before, .prob-sec .prob-visual.gleam::after { display: none; }
  .prob-sec .feed-item { background: #272422; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.85); }
  .prob-sec .feed-item b { color: #F4F2EE; }
  .prob-sec .feed-item small { color: rgba(244, 242, 238, 0.52); }
  .prob-sec .prob-scene em.bad, .prob-sec .prob-inline em.bad { color: #FF6B61; }
  .prob-sec .prob-count { color: rgba(244, 242, 238, 0.42); }
  .prob-sec .prob-close { color: #F4F2EE; }
  .prob-sec .prob-close .bad { color: #FF6B61; }
  .prob-sec .prob-close .good { color: #45D98A; }
  .prob-sec a:focus-visible, .prob-sec button:focus-visible { outline-color: #FF8A80; }
  /* Su un telefono 140px sopra e sotto erano mezzo schermo vuoto. */
  @media (max-width: 920px) { .prob-sec { padding: 88px 0; } }
  /* In colonna il riquadro laterale finirebbe sotto tutta la lista, lontano
     dalla voce aperta: ogni voce mostra la sua schermata dentro di sé. */
  .prob-inline { display: none; }
  @media (max-width: 920px) {
    .prob-sec .prob-visual { display: none; }
    .prob-inline {
      display: grid; place-items: center; margin: 0 0 24px; padding: 22px 16px; border-radius: 16px;
      background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(255, 90, 79, 0.16), transparent 62%), #1C1A18;
      border: 1px solid rgba(255, 255, 255, 0.09);
    }
    .prob-inline .stackcol { display: flex; flex-direction: column; gap: 10px; width: min(340px, 100%); }
  }

  /* ---- rev.16: confronto minimale a due colonne ✓/✕ ---- */
  .vs { display: grid; grid-template-columns: 1fr 1.06fr; gap: 18px; align-items: stretch; max-width: 880px; margin: 0 auto; }
  .vs-col { border-radius: 18px; padding: 26px 28px; }
  .vs-them { background: var(--mist); border: 1px solid var(--line); color: var(--slate); }
  .vs-us { background: linear-gradient(135deg, #F2F6FF 0%, #FFF6E6 52%, #EFF9F2 100%); border: 1px solid rgba(46, 91, 255, 0.28); box-shadow: 0 30px 60px -34px rgba(46, 91, 255, 0.45); }
  .vs-head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 18px; color: var(--ink); }
  .vs-them .vs-head { color: var(--faint); }
  .vs-head .logo-a { width: 20px; height: 20px; fill: var(--ink); }
  .vs-chip { font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; background: var(--ok-bg); color: #14713F; border-radius: 7px; padding: 3px 9px; margin-left: auto; }
  .vs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .vs li { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 15px; font-weight: 600; border-top: 1px solid rgba(21, 20, 18, 0.07); }
  .vs li:first-child { border-top: 0; }
  .vs-us li { color: var(--ink); }
  .vs-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 900; }
  .vs-them .vs-mark { background: #F7E3E4; color: #B4434B; }
  .vs-us .vs-mark { background: var(--ok); color: #fff; box-shadow: 0 6px 14px -6px rgba(27, 158, 90, 0.55); }
  @media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }

  /* ---- Il confronto, riga per riga ----
     Due elenchi affiancati obbligavano a cercare la differenza, e chi scorre
     non la cerca. Ogni riga mette il prima accanto al dopo: a sinistra
     spento e barrato, a destra acceso, dentro una sola carta in rilievo che
     è la colonna di Archimedes. Sul telefono resta a due colonne, più
     strette: il confronto è il punto. */
  .cmp-head { text-align: center; }
  .cmp-head .label { display: block; }
  .cmp-head .shead { grid-template-columns: 1fr; justify-items: center; }
  .cmp-head .shead h2 { max-width: 18ch; margin: 0 auto; }
  .cmp { position: relative; display: grid; grid-template-columns: 44fr 56fr; max-width: 980px; margin: 56px auto 0; }
  .cmp::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 56%;
    border-radius: 18px; border: 1.5px solid rgba(46, 91, 255, 0.45);
    background: linear-gradient(135deg, #F2F6FF 0%, #FFF6E6 52%, #EFF9F2 100%);
    box-shadow: 0 34px 70px -38px rgba(46, 91, 255, 0.55);
  }
  .cmp-row { display: contents; }
  .cmp-them, .cmp-us { position: relative; display: flex; align-items: center; gap: 14px; padding: 17px 30px; }
  .cmp-them { color: var(--faint); font-size: 15.5px; font-weight: 600; border-bottom: 1px solid var(--line); }
  .cmp-us { color: var(--ink); font-size: 17px; font-weight: 750; letter-spacing: -0.01em; border-bottom: 1px solid rgba(46, 91, 255, 0.12); }
  .cmp-row:last-child > .cmp-them, .cmp-row:last-child > .cmp-us { border-bottom: 0; }
  .cmp-top > .cmp-them, .cmp-top > .cmp-us { padding-top: 26px; padding-bottom: 20px; font-size: 15px; font-weight: 800; }
  .cmp-top > .cmp-them { border-bottom-color: var(--line-strong); }
  .cmp-top > .cmp-us { border-bottom-color: rgba(46, 91, 255, 0.22); flex-wrap: wrap; row-gap: 8px; }
  .cmp-top .logo-a { width: 20px; height: 20px; }
  .cmp .vs-chip { margin-left: auto; }
  .cmp .vs-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 900; }
  .cmp-them .vs-mark { background: #F7E3E4; color: #B4434B; }
  .cmp-us .vs-mark { background: var(--ok); color: #fff; box-shadow: 0 6px 14px -6px rgba(27, 158, 90, 0.55); }
  .cmp-them .cmp-t { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(180, 67, 75, 0.5); }
  .cmp-sec .cmpt-note { max-width: 980px; margin: 18px auto 0; text-align: center; }
  @media (max-width: 640px) {
    .cmp { grid-template-columns: 43fr 57fr; margin-top: 36px; }
    .cmp::before { width: 57%; border-radius: 14px; }
    .cmp-them, .cmp-us { gap: 8px; padding: 13px 12px; align-items: flex-start; }
    .cmp-them { font-size: 13.5px; line-height: 1.4; }
    .cmp-us { font-size: 14.5px; line-height: 1.35; }
    .cmp-top > .cmp-them, .cmp-top > .cmp-us { padding-top: 18px; padding-bottom: 14px; font-size: 13.5px; }
    .cmp .vs-mark { width: 20px; height: 20px; font-size: 10px; margin-top: 1px; }
    .cmp .vs-chip { margin-left: 0; }
  }

/* ------------------------------------------------------------------
 * Block additions
 *
 * The design is one hand-built page; these few rules are what the block
 * port needs on top of it, where a section became reusable and gained an
 * option the original never had. Kept together, and deliberately small —
 * anything bigger belongs in the design, not here.
 * ------------------------------------------------------------------ */

/* arc_split: the design's Ari section pairs copy with one bespoke visual.
   As a reusable block it takes a picture instead. */
.arc-split-media { align-self: center; }
.arc-split-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
}

/* arc_area_grid and arc_stats keep their figures legible before the
   scroll islands run — and for anyone who never runs them at all. */
[data-count] { font-variant-numeric: tabular-nums; }

/* Generic blocks on a marketing page
 *
 * news_list and friends are the CMS's own blocks, shared by every tenant,
 * so they carry no knowledge of this site's measure and would otherwise
 * run edge to edge while every section around them sits in .wrap. This
 * gives them the same gutter and the site's typography.
 */
.nl,
.nl > .nl-head,
.nl > .nl-grid {
  max-width: 1084px;
  margin-inline: auto;
  padding-inline: 28px;
}
.nl { padding-block: 84px; }
.nl .nl-head { padding-inline: 0; }
.nl .vn-title,
.nl h2 {
  font-family: var(--serif-d);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
/* Until the first article is published the grid is empty. Collapse it
   rather than leaving a tall blank band under the heading; the copy that
   explains the section lives in the block above it. */
.nl .nl-grid:empty { display: none; }
.nl:has(.nl-grid:empty) { padding-block: 64px 48px; }

/* arc_split with no picture: the design's two-column grid exists to put a
   visual beside the copy. Without one, the copy takes the full measure
   rather than sitting in a half-width column next to nothing. */
.ari-grid.arc-split-solo { grid-template-columns: 1fr; }
.ari-grid.arc-split-solo h2 { max-width: 20ch; }
/* Ari: il titolo sta in mezza colonna, e a 64px l'ultima parola restava da
   sola sulla quinta riga. Un poco più piccolo chiude in quattro. */
#ari .ari-grid h2 { font-size: clamp(38px, 4.2vw, 54px); }
.ari-grid.arc-split-solo .ari-points { max-width: 68ch; }
/* Opt-in: many points and no picture read better as two columns than as
   one run of full-width lines. */
.ari-grid.arc-split-solo .ari-points.ari-points--cols { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
@media (max-width: 920px) { .ari-grid.arc-split-solo .ari-points.ari-points--cols { grid-template-columns: 1fr; gap: 20px; } }

/* arc_demo: the design nests the hero and the demo in one positioned
   .intro wrapper, which is what the floating logos are placed against. A
   block list has no such wrapper, so the host is positioned against the
   page and the island pins it to the hero's box on load and on resize. */
.hero-icons { position: absolute; }

/* ------------------------------------------------------------------
 * Demo-booking funnel
 *
 * The design keeps this dialog's styles in a <style> block of their own,
 * next to its markup at the end of the document rather than up with the
 * rest of the page. The first extraction took only the page's stylesheet
 * and missed it, so the funnel rendered as unstyled markup at the foot of
 * the page. Appended verbatim.
 * ------------------------------------------------------------------ */

  .dm-ov { position: fixed; inset: 0; z-index: 500; background: rgba(21, 20, 18, 0.46); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 20px; }
  .dm-ov[hidden] { display: none; }
  /* Larghezza in percentuale dell'area dell'overlay, non della finestra: con
     `94vw` il dialogo ignorava il padding dell'overlay e sporgeva a destra. */
  .dm { position: relative; width: min(600px, 100%); max-height: 88vh; max-height: 88dvh; overflow: auto; background: #fff; border-radius: 18px; padding: 30px 32px 26px; box-shadow: 0 60px 120px -40px rgba(21, 20, 18, 0.55); }
  .dm-x { appearance: none; -webkit-appearance: none; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--line, #E7E4DD); border-radius: 10px; background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--slate, #56534C); transition: background 0.15s; }
  .dm-x:hover { background: var(--mist, #F4F2ED); }
  .dm-x svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
  .dm-prog { height: 4px; border-radius: 2px; background: var(--line, #E7E4DD); overflow: hidden; margin: 4px 44px 10px 0; }
  .dm-prog i { display: block; height: 100%; width: 33%; border-radius: 2px; background: var(--accent, #2E5BFF); transition: width 0.35s ease; }
  .dm-steplbl { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint, #8A867C); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
  .dm h3 { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 25px); letter-spacing: -0.015em; color: var(--ink, #151412); text-wrap: balance; }
  .dm-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--slate, #56534C); }
  .dm-p[hidden] { display: none; }
  /* step 1: settori */
  .dm-secs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  @media (max-width: 480px) { .dm-secs { grid-template-columns: 1fr; } }
  .dm-sec { appearance: none; -webkit-appearance: none; font-family: inherit; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink, #151412); background: #fff; border: 1px solid var(--line, #E7E4DD); border-radius: 10px; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
  .dm-sec:hover { background: var(--mist, #F4F2ED); }
  .dm-sec.sel { background: var(--info-bg, #EAF0FF); border-color: var(--accent, #2E5BFF); }
  .dm-sec svg { width: 17px; height: 17px; flex: none; stroke: var(--accent-dark, #1F41C4); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  /* step 2: strumenti */
  .dm-tscroll { max-height: 300px; overflow-y: auto; padding: 2px; margin: 0 -2px; }
  .dm-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .dm-tile { appearance: none; -webkit-appearance: none; font-family: inherit; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 10px; background: #fff; border: 1px solid var(--line, #E7E4DD); border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
  .dm-tile:hover { background: var(--mist, #F4F2ED); }
  .dm-tile svg { width: 24px; height: 24px; }
  .dm-tile b { font-size: 10.5px; font-weight: 700; color: var(--slate, #56534C); letter-spacing: 0.01em; line-height: 1.2; text-align: center; }
  .dm-tile.sel { border-color: var(--accent, #2E5BFF); background: var(--info-bg, #EAF0FF); }
  .dm-tile.sel b { color: var(--accent-dark, #1F41C4); }
  .dm-tile .tk { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent, #2E5BFF); display: none; place-items: center; }
  .dm-tile .tk svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .dm-tile.sel .tk { display: grid; }
  .dm-tchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .dm-tchip { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--slate, #56534C); background: #fff; border: 1px solid var(--line, #E7E4DD); border-radius: 10px; padding: 6px 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
  .dm-tchip:hover { background: var(--mist, #F4F2ED); }
  .dm-tchip.sel { background: var(--info-bg, #EAF0FF); border-color: var(--accent, #2E5BFF); color: var(--accent-dark, #1F41C4); }
  .dm-free { width: 100%; box-sizing: border-box; margin-top: 12px; font-family: inherit; font-size: 14px; color: var(--ink, #151412); padding: 11px 14px; background: #fff; border: 1px solid var(--line, #E7E4DD); border-radius: 10px; outline: none; transition: border-color 0.15s; }
  .dm-free:focus { border-color: var(--accent, #2E5BFF); }
  /* step 3: contatti + orario */
  .dm-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 480px) { .dm-frow { grid-template-columns: 1fr; } }
  .dm-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
  .dm-field label { font-size: 12px; font-weight: 700; color: var(--slate, #56534C); }
  .dm-field input, .dm-field select { font-family: inherit; font-size: 14px; color: var(--ink, #151412); padding: 11px 14px; background: #fff; border: 1px solid var(--line, #E7E4DD); border-radius: 10px; outline: none; transition: border-color 0.15s; }
  .dm-field input:focus, .dm-field select:focus { border-color: var(--accent, #2E5BFF); }
  .dm-field.err input { border-color: #B4433B; }
  .dm-recap { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
  .dm-recap span { font-size: 11.5px; font-weight: 700; color: var(--accent-dark, #1F41C4); background: var(--info-bg, #EAF0FF); border-radius: 8px; padding: 4px 10px; }
  /* Honeypot: off-canvas rather than display:none, which some bots skip. */
  .dm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  /* step 4: il calendario, dopo che la lead è al sicuro */
  .dm-sent { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--slate, #56534C); background: var(--ok-bg, #E5F4EA); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
  .dm-sent .okc { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--ok, #1B9E5A); display: grid; place-items: center; }
  .dm-sent .okc svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .dm-sent b { color: var(--ink, #151412); }
  /* Nell'offerta il testo sta a sinistra come tutto il resto del pannello: i
     margini automatici del richiamo in conferma qui lo spostavano al centro. */
  .dm-offer { margin: 0; }
  .dm-again.dm-offer p { margin-left: 0; margin-right: 0; }
  .dm-opened { margin: 12px auto 0; max-width: 42ch; font-size: 13px; line-height: 1.55; color: var(--slate, #56534C); }
  .dm-opened a { color: var(--accent-dark, #1F41C4); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
  .dm-opened[hidden] { display: none; }
  /* nav bottoni */
  .dm-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
  .dm-btn { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 14.5px; font-weight: 700; border-radius: 10px; padding: 11px 20px; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
  .dm-btn:active { transform: scale(0.985); }
  .dm-primary { background: var(--accent, #2E5BFF); color: #fff; margin-left: auto; }
  .dm-primary:hover { background: var(--accent-dark, #1F41C4); }
  .dm-ghost { background: #fff; color: var(--slate, #56534C); border-color: var(--line, #E7E4DD); }
  .dm-ghost:hover { background: var(--mist, #F4F2ED); }
  .dm-skip { background: transparent; color: var(--faint, #8A867C); border: 0; padding: 11px 8px; }
  .dm-skip:hover { color: var(--slate, #56534C); text-decoration: underline; }
  .dm-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--faint, #8A867C); }
  .dm-privacy { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--faint, #8A867C); }
  .dm-privacy a { color: var(--accent-dark, #1F41C4); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
  /* esito */
  .dm-okp { text-align: center; padding: 22px 6px 8px; }
  .dm-okp .okc { width: 52px; height: 52px; border-radius: 50%; background: var(--ok-bg, #E5F4EA); display: grid; place-items: center; margin: 0 auto 16px; }
  .dm-okp .okc svg { width: 24px; height: 24px; stroke: var(--ok, #1B9E5A); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .dm-okp b { display: block; font-size: 21px; letter-spacing: -0.01em; color: var(--ink, #151412); margin-bottom: 8px; }
  .dm-okp p { margin: 0 auto; max-width: 40ch; font-size: 14px; line-height: 1.6; color: var(--slate, #56534C); }
  /* La seconda occasione di prenotare: pannello "alba", mai blu pieno. */
  .dm-again { margin: 22px -6px 0; padding: 20px 22px 22px; border-radius: 12px; border: 1px solid rgba(46, 91, 255, 0.28); background: linear-gradient(135deg, #F2F6FF 0%, #FFF6E6 52%, #EFF9F2 100%); }
  .dm-again b { display: block; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink, #151412); margin-bottom: 6px; }
  .dm-again p { margin: 0 auto 16px; max-width: 42ch; font-size: 13.5px; line-height: 1.55; color: var(--slate, #56534C); }
  .dm-again .dm-btn { display: inline-flex; align-items: center; margin: 0; text-decoration: none; }
  .dm :focus-visible { outline: 2px solid var(--accent, #2E5BFF); outline-offset: 2px; }
  @media (max-width: 480px) {
    .dm-ov { padding: 12px; }
    .dm { padding: 24px 18px 20px; border-radius: 14px; }
    .dm-prog { margin-right: 40px; }
  }
  @media (prefers-reduced-motion: reduce) { .dm-prog i, .dm-btn, .dm-sec, .dm-tile { transition: none; } }