/*
 * 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; }
  .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; }
  .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; }
  .float-icon.floating .float-inner { 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; }
  .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); }
  .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); }
  .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; }
  .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; }
  }
  :root { --eu-photo: url(/images/marketing/backdrop.jpg); }

  /* ---- piattaforma: video di presentazione ---- */
  .video-panel { 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);
  }
  .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; }
  /* 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: 999px; 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: 999px; }
  .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; }
  @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: 999px;
    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: 15px; height: 15px; flex: none; transform: translateY(1px); }
  .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: 999px; 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; } }

  /* ---- 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 (tabella compatta, colonna Archimedes evidenziata) ---- */
  .cmpt-wrap { margin-top: 64px; overflow-x: auto; }
  table.cmpt { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; font-size: 14.5px; }
  .cmpt th, .cmpt td { padding: 13px 18px; }
  .cmpt thead th { font-size: 13px; font-weight: 800; color: var(--slate); text-align: center; padding-bottom: 16px; }
  .cmpt thead th:first-child { text-align: left; }
  .cmpt thead th.hot { color: var(--ink); border-radius: 14px 14px 0 0; font-size: 14.5px; letter-spacing: 0.01em;
    background:
      radial-gradient(ellipse 90% 90% at 20% 100%, #E4F0D4, transparent 65%),
      radial-gradient(ellipse 80% 80% at 85% 80%, #FFE7C0, transparent 70%),
      linear-gradient(180deg, #E9F2FC 0%, #FBEDD2 100%); }
  .cmpt tbody th { text-align: left; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line); width: 40%; font-size: 14.5px; }
  .cmpt tbody td { text-align: center; border-top: 1px solid var(--line); color: var(--slate); }
  .cmpt tbody td.hot { background: #FDF4E2; border-top-color: rgba(183, 121, 31, 0.16); }
  .cmpt tbody tr:last-child td.hot { border-radius: 0 0 14px 14px; }
  .cmpt .y { color: var(--ok); font-weight: 800; }
  .cmpt .n { color: #C9837F; font-weight: 700; }
  .cmpt .m { color: var(--faint); font-weight: 700; }
  .cmpt td.hot .y { color: #14713F; }
  .cmpt-note { margin-top: 16px; font-size: 12.5px; color: var(--faint); }
  /* variante a due colonne con risposte testuali */
  .cmpt-2col { min-width: 640px; }
  .cmpt-2col tbody th { width: 26%; }
  .cmpt-2col tbody td { text-align: left; font-size: 14px; line-height: 1.45; }
  .cmpt-2col tbody td.hot { color: var(--ink); font-weight: 600; }

  /* ---- 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; }
  .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; }
  .mig-flow .arc-core { position: static; transform: none; transition: box-shadow 1s var(--ease); }
  .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); }
  .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); gap: 16px; max-width: 940px; margin: 44px auto 0; text-align: left; }
  .mp { border-radius: 18px; padding: 26px 28px; }
  .mp.t-blue { background: var(--info-bg); }
  .mp.t-green { background: var(--ok-bg); }
  .mp.t-amber { background: var(--warn-bg); }
  .mp b { display: block; font-family: var(--serif-d); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 6px; color: var(--ink); }
  .mp p { margin: 0; font-size: 14px; color: rgba(21, 20, 18, 0.68); }
  .mig-cta { margin-top: 40px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

  /* ---- 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: 26px; }
    .mf-lines { display: none; }
    .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; }
    .ahouse { padding: 36px 22px 30px; }
    .phone .chat { height: 460px; }
    .mig-points { grid-template-columns: 1fr; }
    .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) {
    .float-icon { display: none; }
    .float-icon.keep-mobile { display: block; }
    .flow { height: 320px; }
    .arc-stage { transform: scale(0.46); margin-bottom: -178px; }
    .phone { border-width: 7px; border-radius: 38px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fade { opacity: 1; transform: none; transition: none; }
    .float-inner { opacity: 1; transform: none; }
    .float-icon.floating .float-inner { 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; }
    .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; }
    .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; }
  .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%); }

  @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 ⌘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) {
    .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; } }

  /* 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(--faint); }
  .cert-b svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; 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: 700; letter-spacing: 0.02em; 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(--slate); }
  @media (max-width: 860px) {
    .cert-in { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }
    .cert-b { border-left: 0; }
    .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-close .bad { color: #B4433B; font-style: normal; }
  .prob-close .good { color: var(--ok); }

  /* ---- 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; } }

/* ------------------------------------------------------------------
 * 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-grid.arc-split-solo .ari-points { max-width: 68ch; }

/* 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; }
  .dm { position: relative; width: min(600px, 94vw); max-height: 88vh; 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; }
  /* 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); }
  /* 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); }
  .dm :focus-visible { outline: 2px solid var(--accent, #2E5BFF); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .dm-prog i, .dm-btn, .dm-sec, .dm-tile { transition: none; } }