/* Lorenzo Zugaro — sito v4
   Direzione: "nero su bianco". Notte e carta che si alternano: le aperture sono scure e calde di luce verde,
   i contenuti sono fogli bianchi ordinati come un registro. Un solo accento: il verde della pallina
   e il verde chiaro del marchio AiDocuBase™. Titoli in Inter Tight, testi in Inter, ospitati sul sito.
   Il sito sceglie un solo aspetto (chiaro con fasce scure) e lo dichiara: color-scheme light. */

@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; src: url("../assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url("../assets/fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* impaginazione: colonna 1200px, testo a sinistra; aperture a due colonne da 1000px; fasce a tutta larghezza */
:root {
  --paper: #ffffff;   --paper-2: #f4f6f5;  --ink: #0d0f12;   --muted: #5b6168;  --line: #e5e8ea;
  --night: #0b0d10;   --night-2: #13161b;  --night-ink: #f1f3f2; --night-muted: #9aa3a0; --night-line: rgb(255 255 255 / .1);
  --green: #17803f;   --dot: #45b649;      --lime: #c8ea88;  --lime-soft: #e9f6d8; --lime-line: #7cc04a;
  --ok: #17803f; --ok-bg: #e5f4e8; --mid: #8a5a00; --mid-bg: #fdf0d5; --high: #b03a12; --high-bg: #fde5da; --crit: #a1122b; --crit-bg: #fbdce3;
  --shadow: 0 1px 2px rgb(13 15 18 / .06), 0 24px 48px -24px rgb(13 15 18 / .32);
  --shadow-dark: 0 30px 60px -28px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .08);

  --f: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fd: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --t-hero: clamp(42px, 7.2vw, 88px);
  --t-h2: clamp(32px, 4.8vw, 56px);
  --t-h3: clamp(20px, 2vw, 23px);
  --t-lead: clamp(18px, 1.9vw, 21px);

  --w: 1200px;
  --gx: max(20px, env(safe-area-inset-left, 0px));
  --gx-r: max(20px, env(safe-area-inset-right, 0px));
  --bar-h: 68px;
  --r: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--f); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--dot); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--fd); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
h3 { letter-spacing: -.025em; line-height: 1.15; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: var(--gx); }
.wrap { width: 100%; max-width: calc(var(--w) + var(--gx) + var(--gx-r)); margin: 0 auto; padding-left: var(--gx); padding-right: var(--gx-r); }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- barra in alto (scura sull'apertura, chiara sul resto) */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--night); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; color: var(--night-ink); background: rgb(11 13 16 / .72);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--night-line); transition: background .3s, color .3s, border-color .3s; }
.bar.is-light { color: var(--ink); background: rgb(255 255 255 / .82); border-bottom-color: var(--line); }
.bar__in { display: flex; align-items: center; gap: 26px; min-height: var(--bar-h); }
.logo { display: flex; align-items: center; gap: 10px; font: 700 18px/1 var(--fd); letter-spacing: -.03em; text-decoration: none; margin-right: auto; }
.logo b { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--lime); color: var(--ink); font-size: 14px; letter-spacing: -.04em; }
.nav { display: none; }
.nav a { text-decoration: none; font-size: 15px; opacity: .72; padding: 8px 0; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--dot); }
.bar .btn { display: none; }
.burger { width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-content: center; gap: 6px; margin-right: -10px; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.drawer { padding-block: 6px 22px; border-top: 1px solid var(--night-line); }
.bar.is-light .drawer { border-top-color: var(--line); }
.drawer a { display: block; padding: 13px 0; font: 650 24px/1.2 var(--fd); letter-spacing: -.03em; text-decoration: none; border-bottom: 1px solid var(--night-line); }
.bar.is-light .drawer a { border-bottom-color: var(--line); }
.drawer .btn { margin-top: 18px; font-size: 16px; }
@media (min-width: 1040px) { .nav { display: flex; gap: 28px; } .bar .btn { display: inline-flex; } .burger, .drawer { display: none !important; } }

/* ---------------------------------------------------------------- pulsanti */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap; font: 650 16px/1 var(--f); letter-spacing: -.01em; background: var(--ink); color: #fff; transition: transform .15s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgb(13 15 18 / .55); }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { box-shadow: 0 14px 34px -12px rgb(200 234 136 / .55); }
.btn--ghost { background: rgb(255 255 255 / .06); color: var(--night-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
.btn--ghost:hover { background: rgb(255 255 255 / .12); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--small { min-height: 42px; padding: 0 18px; font-size: 15px; }
.bar .btn { background: var(--lime); color: var(--ink); }
.dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); flex: none; }
.btn--lime .dot, .bar .btn .dot { background: var(--green); }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--green); text-decoration: none; }
.more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.more:hover::after { transform: translateX(3px) rotate(45deg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---------------------------------------------------------------- apertura scura */
.night { background: var(--night); color: var(--night-ink); --muted: var(--night-muted); --line: var(--night-line); }
.hero { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(28px, 5vw, 64px); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: 96px 32px; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -260px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgb(69 182 73 / .34), rgb(200 234 136 / .08) 45%, transparent 68%); filter: blur(10px); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: end; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 550;
  background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero h1 { margin-top: 24px; font-size: var(--t-hero); font-weight: 750; letter-spacing: -.05em; line-height: .96; max-width: 12.5ch; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, #e2f5c7, var(--lime) 40%, #7cd67f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { margin-top: 24px; font-size: var(--t-lead); line-height: 1.55; color: var(--night-muted); max-width: 33em; }
.hero__lead strong { color: var(--night-ink); font-weight: 600; }
.hero .actions { margin-top: 32px; }
.hero__copy { padding-bottom: clamp(24px, 4vw, 72px); }
.hero__visual { position: relative; aspect-ratio: 13 / 15; justify-self: center; width: min(100%, 480px); }
.portrait { position: absolute; left: 50%; bottom: 0; width: 76%; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(#000 74%, transparent 99%); mask-image: linear-gradient(#000 74%, transparent 99%); filter: contrast(1.04); }
.float { position: absolute; z-index: 2; border-radius: 16px; background: rgb(19 22 27 / .78); color: var(--night-ink); box-shadow: var(--shadow-dark);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); font-size: 13px; line-height: 1.35; animation: bob 7s ease-in-out infinite; }
.float b { font-weight: 650; }
.float small { display: block; color: var(--night-muted); font-size: 11.5px; margin-top: 2px; }
.f-reg { left: -4%; top: 6%; width: 250px; padding: 12px; animation-delay: -2s; }
.f-reg__h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; padding-bottom: 8px; border-bottom: 1px solid var(--night-line); }
.f-reg__h i { width: 16px; height: 16px; border-radius: 4px; background: #1d6f42; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; }
.f-reg__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; font-size: 12.5px; }
.f-rule { right: -2%; top: 38%; width: 210px; padding: 12px 14px; animation-delay: -4s; }
.f-rule .tag { display: inline-flex; margin-bottom: 8px; }
.f-rule b { display: block; }
.f-cert { left: 2%; bottom: 14%; padding: 12px 14px; display: flex; align-items: center; gap: 12px; animation-delay: -1s; }
.f-cert span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--lime); color: var(--ink); flex: none; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.trust { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 22px; border-top: 1px solid var(--night-line); font-size: 14.5px; color: var(--night-muted); }
.trust div { display: flex; align-items: center; gap: 10px; }
.trust svg { flex: none; }
@media (min-width: 760px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .hero__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px; }
  .hero__visual { aspect-ratio: auto; min-height: 600px; width: 100%; }
  .portrait { width: 82%; }
}

/* etichette di stato */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.tag--b { color: var(--ok); background: var(--ok-bg); }
.tag--m { color: var(--mid); background: var(--mid-bg); }
.tag--a { color: var(--high); background: var(--high-bg); }
.tag--c { color: var(--crit); background: var(--crit-bg); }
.float .tag--b { color: #b8ec9a; background: rgb(184 236 154 / .12); }
.float .tag--m { color: #f3cc78; background: rgb(243 204 120 / .12); }
.float .tag--a { color: #ffab86; background: rgb(255 171 134 / .12); }

/* nastro */
.ribbon { background: var(--lime); color: var(--ink); overflow: hidden; padding-block: 16px; }
.ribbon__track { display: flex; align-items: center; gap: 24px; width: max-content; animation: ribbon 50s linear infinite; font: 650 16px/1 var(--fd); letter-spacing: -.01em; white-space: nowrap; }
.ribbon__track i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
@keyframes ribbon { to { transform: translateX(-50%); } }
.ribbon:hover .ribbon__track { animation-play-state: paused; }

/* ---------------------------------------------------------------- sezioni */
.sec { padding-block: clamp(64px, 9vw, 128px); }
.sec--paper2 { background: var(--paper-2); }
.sec--night { background: var(--night); color: var(--night-ink); --muted: var(--night-muted); --line: var(--night-line); }
.head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.head h2 { font-size: var(--t-h2); }
.head p { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); }
.kicker { font-size: 15px; font-weight: 650; color: var(--green); display: flex; align-items: center; gap: 8px; }
.night .kicker, .sec--night .kicker { color: var(--lime); }
.kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

/* il problema */
.prob { display: grid; gap: 16px; }
.prob__card { padding: 26px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); display: grid; gap: 12px; align-content: start; }
.prob__card .ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--paper-2); }
.prob__card h3 { font-size: var(--t-h3); }
.prob__card p { color: var(--muted); font-size: 16px; }
.stat { padding: 26px; border-radius: var(--r); background: var(--night); color: var(--night-ink); display: grid; gap: 18px; align-content: start; }
.stat .stat__big { font: 750 clamp(56px, 7vw, 84px)/1 var(--fd); letter-spacing: -.05em; color: var(--lime); }
.stat p { color: var(--night-muted); font-size: 15.5px; }
.stat .src { font-size: 12.5px; color: var(--night-muted); }
.stat .src a { color: var(--night-ink); }
.bar1 { display: grid; grid-template-columns: 52px minmax(0, 1fr) 56px; gap: 12px; align-items: center; font-size: 13.5px; color: var(--night-muted); }
.bar1__t { height: 10px; border-radius: 6px; background: rgb(255 255 255 / .09); overflow: hidden; }
.bar1__t i { display: block; height: 100%; border-radius: 6px; background: rgb(255 255 255 / .55); }
.bar1--on .bar1__t i { background: var(--lime); }
.bar1 b { color: var(--night-ink); text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; }
@media (min-width: 900px) { .prob { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat { grid-column: span 3; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; } }

/* prima / dopo */
.ba { display: grid; gap: 24px; }
.ba__switch { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); justify-self: start; }
.ba__switch button { border: 0; background: transparent; padding: 12px 20px; border-radius: 999px; font: 650 15px var(--f); color: var(--muted); cursor: pointer; }
.ba__switch button[aria-selected="true"] { background: var(--ink); color: #fff; }
.ba__stage { position: relative; min-height: 380px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.ba__panel { padding: clamp(20px, 3vw, 36px); }
.ba__panel[hidden] { display: none; }
.mess { position: relative; height: 340px; }
.note-y { position: absolute; width: min(220px, 46%); padding: 14px 14px 18px; border-radius: 4px; background: #fff6bf; color: #3a3410; font: 600 14px/1.35 var(--f); box-shadow: 0 10px 22px -12px rgb(0 0 0 / .35); }
.note-y small { display: block; margin-top: 6px; font-weight: 500; font-size: 12px; opacity: .7; }
.note-y:nth-child(1) { left: 2%; top: 4%; rotate: -4deg; }
.note-y:nth-child(2) { left: 40%; top: 0; rotate: 3deg; background: #ffe3d6; color: #4a2410; }
.note-y:nth-child(3) { right: 2%; top: 30%; rotate: -2deg; }
.note-y:nth-child(4) { left: 8%; top: 48%; rotate: 5deg; background: #e3ecff; color: #18284a; }
.note-y:nth-child(5) { left: 42%; top: 58%; rotate: -3deg; background: #ffe3d6; color: #4a2410; }
.order { display: grid; gap: 14px; }
.order__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); }
.order__row .ico { width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: var(--lime-soft); }
.order__row b { display: block; font-weight: 650; }
.order__row small { color: var(--muted); font-size: 13.5px; }
.ba__caption { font-size: 15px; color: var(--muted); max-width: 46em; }
@media (min-width: 760px) { .order { grid-template-columns: 1fr 1fr; } }

/* offerte */
.offers { display: grid; gap: 16px; }
.offer { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.offer:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.offer__top { display: flex; align-items: center; gap: 14px; }
.offer .ico { width: 52px; height: 52px; padding: 12px; border-radius: 15px; background: var(--lime-soft); flex: none; }
.offer__lab { font-size: 13px; color: var(--muted); }
.offer h3 { font-size: clamp(24px, 2.4vw, 30px); }
.offer p { color: var(--muted); }
.offer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; }
.offer li { position: relative; padding-left: 26px; }
.offer li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.offer__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line); }
.price { font: 700 22px/1 var(--fd); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price small { font: 500 13px var(--f); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.offer--feat { background: var(--night); color: var(--night-ink); border-color: transparent; --muted: var(--night-muted); --line: var(--night-line); }
.offer--feat .ico { background: rgb(200 234 136 / .14); }
.offer--feat .ico, .offer--feat .ico * { stroke: var(--night-ink); }
.offer--feat .ico .a { stroke: var(--lime); }
.offer--feat .ico .a.f { fill: var(--lime); }
.offer--feat li::before { border-color: var(--lime); }
.offer--feat .more { color: var(--lime); }
.offer__badge { position: absolute; top: 22px; right: 22px; padding: 5px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 700; }
.group-lab { margin: 28px 0 14px; font: 650 15px var(--f); color: var(--muted); }
.group-lab:first-child { margin-top: 0; }
@media (min-width: 760px) { .offers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .offers--3 { grid-template-columns: repeat(3, 1fr); } }

/* metodo in tre passi (fascia scura) */
.road { display: grid; gap: 18px; counter-reset: s; }
.road__step { position: relative; counter-increment: s; padding: 28px; border-radius: 24px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); display: grid; gap: 12px; align-content: start; }
.road__step::before { content: counter(s, decimal-leading-zero); font: 700 15px var(--fd); color: var(--lime); }
.road__step h3 { font-size: clamp(22px, 2.2vw, 28px); }
.road__step p { color: var(--night-muted); }
.road__out { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--night-line); font-size: 14.5px; color: var(--night-ink); display: flex; gap: 10px; align-items: flex-start; }
.road__out::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 5px; background: var(--lime); }
@media (min-width: 900px) { .road { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* vetrina dei documenti di AiDocuBase */
.docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.docs__tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.docs__tabs button { flex: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: 12px; font: 600 14.5px var(--f); cursor: pointer; }
.docs__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.docs__view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.docs__view > * { min-width: 0; }
.paper { position: relative; border-radius: 6px; background: #fff; box-shadow: 0 2px 4px rgb(13 15 18 / .06), 0 30px 60px -30px rgb(13 15 18 / .45), 0 0 0 1px rgb(13 15 18 / .06); padding: clamp(22px, 3vw, 36px); min-height: 400px; font-size: 14.5px; line-height: 1.55; }
.paper::before, .paper::after { content: ""; position: absolute; left: 10px; right: 10px; height: 8px; bottom: -8px; border-radius: 0 0 6px 6px; background: #fff; box-shadow: 0 0 0 1px rgb(13 15 18 / .05), 0 8px 16px -10px rgb(13 15 18 / .3); z-index: -1; }
.paper::after { left: 20px; right: 20px; bottom: -15px; }
.paper[hidden] { display: none; }
.paper__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 16px; }
.paper__h b { font: 700 19px/1.2 var(--fd); letter-spacing: -.02em; }
.paper__h span { font-size: 12px; color: var(--muted); text-align: right; }
.paper ol, .paper ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.paper table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.paper th, .paper td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.paper th { font-size: 12px; color: var(--muted); font-weight: 600; }
.paper__sign { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 12.5px; color: var(--muted); }
.paper__sign span { border-top: 1px solid var(--ink); padding-top: 6px; }
.paper__stamp { position: absolute; right: 22px; bottom: 22px; rotate: -8deg; padding: 6px 10px; border: 2px solid var(--green); color: var(--green); border-radius: 6px; font: 700 12px var(--f); letter-spacing: .02em; }
.paper__note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.buy { border-radius: 24px; padding: clamp(22px, 3vw, 32px); background: var(--night); color: var(--night-ink); display: grid; gap: 16px; align-content: start; --muted: var(--night-muted); --line: var(--night-line); }
.buy__price { font: 750 56px/1 var(--fd); letter-spacing: -.05em; }
.buy__price small { font: 500 15px var(--f); color: var(--night-muted); letter-spacing: 0; margin-left: 6px; }
.buy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.buy li { position: relative; padding-left: 26px; }
.buy li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 12px; height: 7px; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); }
.buy .fine { font-size: 13px; color: var(--night-muted); }
.buy .btn { width: 100%; }
@media (min-width: 1000px) { .docs__view { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; } }

/* registro (foglio di calcolo) */
.sheet { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); box-shadow: var(--shadow); overflow: hidden; font-size: 13.5px; line-height: 1.35; }
.sheet__top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e5e8ea; background: #f4f6f5; }
.sheet__file { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13px; }
.sheet__file i { width: 16px; height: 16px; border-radius: 4px; background: #1d6f42; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; }
.sheet__tag { margin-left: auto; font-size: 12px; color: #5b6168; }
.fx { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr); align-items: center; border-bottom: 1px solid #e5e8ea; min-height: 34px; }
.fx b { font-weight: 650; text-align: center; border-right: 1px solid #e5e8ea; height: 100%; display: grid; place-items: center; font-size: 12px; }
.fx em { font-style: italic; color: #5b6168; text-align: center; font-size: 12px; }
.fx span { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid { overflow-x: auto; }
.grid table { width: 100%; border-collapse: collapse; min-width: 460px; }
.grid th, .grid td { border-right: 1px solid #e5e8ea; border-bottom: 1px solid #e5e8ea; padding: 8px 10px; text-align: left; vertical-align: top; }
.grid tr > :last-child { border-right: 0; }
.grid thead th { font-weight: 500; font-size: 11.5px; color: #5b6168; background: #f4f6f5; padding: 4px 10px; text-align: center; }
.grid .rn { width: 34px; text-align: center; color: #5b6168; font-size: 11.5px; background: #f4f6f5; }
.grid tr.h td { font-weight: 650; font-size: 12.5px; }
.grid td.sel { box-shadow: inset 0 0 0 2px var(--lime-line); background: var(--lime-soft); }
.art { display: block; margin-top: 3px; font-size: 11.5px; color: #5b6168; }
.sheet__tabs { display: flex; gap: 2px; padding: 0 8px; border-top: 1px solid #e5e8ea; background: #f4f6f5; overflow: hidden; white-space: nowrap; font-size: 12px; }
.sheet__tabs span { padding: 7px 12px; color: #5b6168; }
.sheet__tabs .on { background: #fff; color: var(--green); font-weight: 650; box-shadow: inset 0 -2px 0 var(--green); }
.sheet__cap { padding: 10px 14px; font-size: 12.5px; color: #5b6168; border-top: 1px solid #e5e8ea; }
.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (max-width: 559px) { .grid table { min-width: 0; } .grid tr > :nth-child(3) { display: none; } }

/* AI Act in parole semplici */
.law { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.law table { width: 100%; border-collapse: collapse; min-width: 600px; font-size: 15.5px; }
.law th, .law td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.law thead th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--paper-2); }
.law tbody tr:last-child td { border-bottom: 0; }
.law td:first-child { width: 52%; }
.law td b { display: block; font-weight: 650; }
.law td small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.law .when { white-space: nowrap; font-weight: 650; }
.law .when .tag { display: table; margin-bottom: 6px; }
.law .ref { white-space: nowrap; }
.note { margin-top: 18px; font-size: 13.5px; color: var(--muted); max-width: 60em; }
.note a { color: inherit; }
@media (max-width: 699px) {
  .law table { min-width: 0; } .law thead { display: none; }
  .law table, .law tbody, .law tr, .law td { display: block; width: auto !important; }
  .law tr { padding: 16px 18px; border-bottom: 1px solid var(--line); } .law tbody tr:last-child { border-bottom: 0; }
  .law td { padding: 0; border: 0; }
  .law td.ref, .law td.when { display: inline; font-size: 14px; }
  .law td.ref::before { content: ""; display: block; margin-top: 10px; }
  .law .when .tag { display: inline-flex; margin: 0 8px 0 0; vertical-align: 1px; }
  .law td.when::before { content: ""; display: block; margin-top: 6px; }
}

/* banner del test */
.testband { background: var(--lime); color: var(--ink); padding-block: clamp(56px, 7vw, 96px); overflow: hidden; }
.testband__in { display: grid; gap: 36px; align-items: center; }
.testband h2 { font-size: clamp(32px, 4.6vw, 54px); max-width: 14ch; }
.testband p { margin-top: 14px; font-size: 18px; color: #344a22; max-width: 30em; }
.testband .actions { margin-top: 26px; }
.testband .btn { background: var(--ink); color: #fff; }
.testband .btn .dot { background: var(--lime); }
.quiz { margin: 0; justify-self: center; width: min(100%, 440px); rotate: 2deg; border-radius: 22px; background: #fff; padding: 22px; box-shadow: 0 40px 70px -30px rgb(20 50 10 / .45); display: grid; gap: 12px; font-size: 15px; }
.quiz__top { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.quiz__bar { flex: 1; height: 5px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.quiz__bar i { display: block; width: 57%; height: 100%; background: var(--green); }
.quiz__q { font: 700 21px/1.2 var(--fd); letter-spacing: -.03em; }
.quiz__opt { display: block; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 600; }
.quiz__opt.is-on { border-color: var(--green); background: var(--lime-soft); }
@media (min-width: 900px) { .testband__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

/* siti e grafica in vetrina (fascia scura) */
.web { display: grid; gap: 40px; align-items: center; }
.web__list { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--night-line); }
.web__list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--night-line); text-decoration: none; }
.web__list .ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / .06); }
.web__list .ico, .web__list .ico * { stroke: var(--night-ink); }
.web__list .ico .a { stroke: var(--lime); }
.web__list .ico .a.f { fill: var(--lime); }
.web__list b { display: block; font: 650 19px/1.2 var(--fd); letter-spacing: -.02em; }
.web__list small { color: var(--night-muted); font-size: 14px; }
.web__list .price { font-size: 17px; }
.web__list a:hover b { color: var(--lime); }
@media (min-width: 1000px) { .web { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; } }
.mock { margin: 0; position: relative; padding: 0 0 40px; }
.mock__win { border-radius: 14px; background: #fff; color: var(--ink); box-shadow: var(--shadow-dark); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f4f6f5; border-bottom: 1px solid #e5e8ea; }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d8dc; }
.mock__bar span { margin-left: 10px; font-size: 11.5px; color: #5b6168; padding: 3px 10px; border-radius: 6px; background: #fff; }
.mock__nav { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.mock__logo { display: flex; align-items: center; gap: 7px; font: 750 15px var(--fd); letter-spacing: -.02em; margin-right: auto; }
.mock__logo span { width: 18px; height: 18px; border-radius: 5px 50% 50% 50%; background: #c2410c; }
.mock__nav i { width: 36px; height: 6px; border-radius: 3px; background: #e2e5e8; }
.mock__hero { margin: 0 18px; padding: 26px; border-radius: 12px; background: linear-gradient(135deg, #2b1a10, #5a2c12); color: #fff4ea; }
.mock__hero p { font: 750 24px/1.05 var(--fd); letter-spacing: -.035em; max-width: 12ch; }
.mock__hero span { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 650; padding: 8px 13px; border-radius: 999px; background: #fdba74; color: #2b1a10; }
.mock__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 18px 18px; }
.mock__row i { height: 54px; border-radius: 9px; background: #f2ece6; }
.mock__brand { position: absolute; right: -8px; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: var(--shadow-dark); }
.mock__mark { width: 36px; height: 36px; border-radius: 10px; background: #2b1a10; display: grid; place-items: center; }
.mock__mark span { width: 17px; height: 17px; border-radius: 5px 50% 50% 50%; background: #fdba74; }
.mock__sw { display: flex; gap: 4px; }
.mock__sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.mock__brand b { font: 750 20px var(--fd); letter-spacing: -.03em; }

/* chi sono */
.me { display: grid; gap: 36px; align-items: center; }
.me__pic { position: relative; border-radius: 28px; background: radial-gradient(circle at 50% 30%, #f2f6ee, #e3eadf); overflow: hidden; aspect-ratio: 4 / 5; max-width: 440px; }
.me__pic img { position: absolute; left: 50%; bottom: 0; width: 80%; transform: translateX(-50%); }
.me__pic .badge { position: absolute; left: 16px; bottom: 16px; right: 16px; padding: 14px 16px; border-radius: 16px; background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; box-shadow: var(--shadow); }
.me__pic .badge b { display: block; font: 700 17px var(--fd); letter-spacing: -.02em; }
.me h2 { font-size: var(--t-h2); }
.me .lead { margin-top: 18px; font-size: var(--t-lead); line-height: 1.5; color: var(--muted); }
.facts { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; }
.facts li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: var(--lime-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' fill='none' stroke='%2317803f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.split2 { display: grid; gap: 14px; margin-top: 26px; }
.split2 > div { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); }
.split2 b { display: block; font: 650 16px var(--fd); margin-bottom: 4px; }
.split2 p { font-size: 15px; color: var(--muted); }
@media (min-width: 900px) { .me { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; } .split2 { grid-template-columns: 1fr 1fr; } }

/* domande frequenti */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font: 650 19px/1.3 var(--fd); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 8v10M8 13h10' stroke='%230d0f12' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 48em; }
.faqgrid { display: grid; gap: 28px; }
.faqgrid .head { align-content: start; }
@media (min-width: 1000px) { .faqgrid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; } }

/* chiusura */
.final { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: var(--night-ink); padding-block: clamp(80px, 11vw, 150px); text-align: left; }
.final::before { content: ""; position: absolute; z-index: -1; width: 1000px; height: 1000px; left: 50%; bottom: -620px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgb(69 182 73 / .45), rgb(200 234 136 / .1) 45%, transparent 68%); }
.final h2 { font-size: clamp(38px, 6.4vw, 80px); letter-spacing: -.05em; max-width: 13ch; }
.final p { margin-top: 20px; font-size: var(--t-lead); color: var(--night-muted); max-width: 32em; }
.final .actions { margin-top: 34px; }
.final__contacts { margin-top: 40px; display: grid; gap: 12px; }
.final__contacts a { font: 650 clamp(20px, 2.6vw, 28px)/1.2 var(--fd); letter-spacing: -.02em; text-decoration: none; }
.final__contacts a:hover { color: var(--lime); }
@media (min-width: 760px) { .final__contacts { grid-auto-flow: column; justify-content: start; gap: 40px; } }

/* piè di pagina */
.foot { background: var(--night); color: var(--night-muted); border-top: 1px solid var(--night-line); padding-block: 40px calc(96px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.foot__in { display: grid; gap: 24px; }
.foot__name { color: var(--night-ink); font: 700 17px var(--fd); letter-spacing: -.02em; }
.foot p + p { margin-top: 4px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: var(--night-muted); }
.foot a:hover { color: var(--night-ink); }
@media (min-width: 800px) { .foot { padding-bottom: 40px; } .foot__in { grid-template-columns: 1.4fr 1fr 1fr; } }

/* barra fissa da telefono */
.mbar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 10px var(--gx-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gx);
  background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s; }
.mbar.is-on { transform: none; }
.mbar .btn { flex: 1; min-height: 46px; padding: 0 14px; font-size: 15px; }
@media (min-width: 800px) { .mbar { display: none; } }

/* ---------------------------------------------------------------- pagine interne */
.phead { padding-block: clamp(40px, 6vw, 80px); position: relative; overflow: hidden; isolation: isolate; }
.phead::after { content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -280px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgb(69 182 73 / .3), rgb(200 234 136 / .07) 45%, transparent 68%); }
.phead__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.crumb { font-size: 14px; color: var(--night-muted); margin-bottom: 20px; }
.crumb a { color: var(--night-muted); }
.phead h1 { font-size: clamp(40px, 6.6vw, 76px); letter-spacing: -.05em; line-height: .98; font-weight: 750; max-width: 13ch; }
.phead .lead { margin-top: 22px; font-size: var(--t-lead); color: var(--night-muted); max-width: 32em; line-height: 1.5; }
.phead .actions { margin-top: 30px; }
.phead__art { width: 100%; max-width: 560px; justify-self: start; }
@media (min-width: 1000px) { .phead__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .phead__art { justify-self: end; } }

.cols { display: grid; gap: 18px; }
.box { padding: 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 10px; align-content: start; }
.box h3 { font-size: clamp(22px, 2.2vw, 26px); }
.box > p { color: var(--muted); }
.box .ico { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--lime-soft); }
.ticks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.sec--night .ticks li::before { border-color: var(--lime); }
.box__price { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (min-width: 800px) { .cols--2 { grid-template-columns: 1fr 1fr; } .cols--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px) and (max-width: 1099px) { .cols--3 { grid-template-columns: 1fr 1fr; } }

.prices { border-radius: 24px; background: var(--paper); border: 1px solid var(--line); padding: clamp(22px, 3vw, 36px); max-width: 860px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper-2); margin-bottom: 18px; }
.seg button { border: 0; background: transparent; color: var(--muted); font: 650 15px/1 var(--f); padding: 12px 18px; border-radius: 999px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--ink); color: #fff; }
.pl { list-style: none; margin: 0; padding: 0; }
.pl[hidden] { display: none; }
.pl li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-block: 16px; border-top: 1px solid var(--line); }
.pl li:first-child { border-top: 0; }
.pl__name { font-weight: 650; min-width: 0; }
.pl__name small { display: block; margin-top: 3px; font-weight: 400; font-size: 14px; color: var(--muted); line-height: 1.45; }
.pl__price { flex: none; font: 700 21px/1 var(--fd); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prices .note { margin-top: 16px; }
.prices .actions { margin-top: 22px; }

.say { margin: 0; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: var(--shadow-dark); padding: 18px; display: grid; gap: 14px; font-size: 15px; }
.say__top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; }
.say__top .tag { margin-left: auto; }
.say__me { justify-self: end; max-width: 88%; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #fff; min-height: 3em; }
.say__ai { display: grid; gap: 8px; padding: 14px; border-radius: 16px 16px 16px 4px; background: var(--paper-2); max-width: 92%; }
.say__ai i { display: block; height: 8px; border-radius: 4px; background: #dfe3e6; }
.say__ai i.s { width: 55%; }
.say__rule { font-size: 13px; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: var(--lime-soft); box-shadow: inset 3px 0 0 var(--lime-line); }
.say__rule b { display: block; color: var(--ink); font-size: 12.5px; }

/* lavori: copertine tipografiche */
.works { display: grid; gap: 16px; }
.work { position: relative; display: grid; align-content: space-between; min-height: 300px; padding: 26px; border-radius: 24px; color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; background: var(--c1); }
.work::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 85% 15%, var(--c2), transparent 60%); opacity: .9; transition: transform .5s; }
.work:hover::before { transform: scale(1.15); }
.work__type { font-size: 13.5px; font-weight: 600; opacity: .85; }
.work__name { font: 750 clamp(40px, 5vw, 60px)/.95 var(--fd); letter-spacing: -.05em; }
.work__desc { margin-top: 10px; font-size: 15px; opacity: .85; max-width: 26em; }
.work__go { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .16); display: grid; place-items: center; transition: background .2s; }
.work:hover .work__go { background: rgb(255 255 255 / .3); }
@media (min-width: 760px) { .works { grid-template-columns: 1fr 1fr; } .work--wide { grid-column: span 2; } }
@media (min-width: 1100px) { .works { grid-template-columns: repeat(3, 1fr); } .work--wide { grid-column: span 2; } }

/* moduli */
.form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--paper); border: 1px solid var(--line); }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; font: 400 16px/1.4 var(--f); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--lime-soft); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.hp { position: absolute; left: -9999px; }
.form__msg { font-size: 15px; min-height: 1.4em; }
.form__msg.ok { color: var(--ok); }
.form__msg.err { color: var(--high); }
@media (min-width: 700px) { .form--2 { grid-template-columns: 1fr 1fr; } .form--2 .full { grid-column: 1 / -1; } }
.contact { display: grid; gap: 28px; }
.cards { margin: 0; display: grid; gap: 12px; }
.cards > div { padding: 18px 20px; border-radius: 18px; background: var(--paper-2); }
.cards dt { font-size: 13px; color: var(--muted); }
.cards dd { margin: 3px 0 0; font: 650 19px/1.3 var(--fd); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cards dd a { text-decoration: none; }
.cards dd a:hover { color: var(--green); }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: start; } }

/* test AI Act */
.result { border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 3vw, 36px); background: var(--paper); }
.result:focus { outline: none; }
.result__k { font-size: 14px; color: var(--muted); }
.result__head { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.result__score { flex: none; min-width: 88px; height: 88px; padding: 0 10px; border-radius: 22px; display: grid; place-items: center; font: 750 28px var(--fd); background: var(--paper-2); }
.result__score[data-level="low"] { color: var(--high); background: var(--high-bg); }
.result__score[data-level="mid"] { color: var(--mid); background: var(--mid-bg); }
.result__score[data-level="high"], .result__score[data-level="none"] { color: var(--ok); background: var(--ok-bg); }
.result__title { font-size: clamp(24px, 3vw, 30px); }
.result__text { margin-top: 6px; color: var(--muted); }
.result__h { margin-top: 24px; font: 650 17px var(--fd); }
.gaps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.result__next p:last-child { margin-top: 6px; }
.result .actions { margin-top: 24px; }
.qmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px var(--gx-r) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gx); background: rgb(11 13 16 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.qmodal[hidden] { display: none; }
.qmodal.is-open { opacity: 1; }
.qmodal__card { width: 100%; max-width: 580px; max-height: 100%; overflow-y: auto; background: #fff; border-radius: 24px; padding: 24px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6); }
.qmodal__card.swap { animation: swap .3s ease; }
@keyframes swap { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.qmodal__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.qmodal__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); font-size: 24px; cursor: pointer; }
.qmodal__bar { height: 5px; border-radius: 4px; background: var(--paper-2); margin-top: 12px; overflow: hidden; }
.qmodal__bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.qmodal__ref { margin-top: 18px; font-size: 13px; color: var(--green); font-weight: 650; }
.qmodal__q { margin-top: 6px; font-size: clamp(23px, 5vw, 30px); }
.qmodal__ex { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.qmodal__opts { margin-top: 18px; display: grid; gap: 10px; }
.qopt { text-align: left; font: 600 16px/1.35 var(--f); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 16px; cursor: pointer; }
.qopt:hover, .qopt.is-on { border-color: var(--green); background: var(--lime-soft); }
.qmodal__nav { margin-top: 16px; }
.qmodal__back { border: 0; background: none; color: var(--muted); font: 500 15px var(--f); cursor: pointer; padding: 8px 0; }
.qmodal__back[hidden] { display: none; }

/* icone a tratto */
.ico { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico .a { stroke: var(--green); stroke-width: 1.9; }
.ico .f { fill: var(--ink); stroke: none; }
.ico .a.f { fill: var(--green); }
.ico--w, .ico--w * { stroke: var(--night-ink); }
.ico--w .a { stroke: var(--lime); }
.ico--w .f { fill: var(--night-ink); }
.ico--w .a.f { fill: var(--lime); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 559px) {
  .mess { height: auto; display: flex; flex-wrap: wrap; gap: 14px 10px; padding-top: 6px; }
  .mess .note-y { position: static; width: calc(50% - 5px); }
  .offer__badge { position: static; justify-self: start; }
}

/* schede bianche appoggiate sulle fasce scure: tornano ai colori del foglio */
.say, .quiz, .sheet, .mock__win, .mock__brand, .paper { --muted: #5b6168; --line: #e5e8ea; color: var(--ink); }
.me__pic .badge { color: #0d0f12; }

/* ================================================================ AiDocuBase™: identità propria
   Blu scuro e verde chiaro del marchio al posto del nero e del verde del sito principale. */
:root {
  --night: #0F2A44; --night-2: #143657; --night-ink: #EEF4F9; --night-muted: #A9BCCD; --night-line: rgb(255 255 255 / .12);
  --ink: #0D1B2A; --muted: #4f6072; --line: #E1E8EE; --paper-2: #F2F6F9;
  --green: #3f6f0c; --lime: #BEEA7A; --lime-soft: #EEF8DF; --lime-line: #8cc152; --dot: #7cc04a;
  --ok: #3f6f0c; --ok-bg: #EEF8DF;
}
.bar { background: rgb(15 42 68 / .82); }
.logo img { width: 30px; height: auto; }
.logo small { font: 500 13px var(--f); letter-spacing: 0; opacity: .7; margin-left: 4px; }
.hero::after, .phead::after, .final::before { background: radial-gradient(circle, rgb(190 234 122 / .22), rgb(190 234 122 / .05) 45%, transparent 68%); }
.btn:not([class*="btn--"]) { background: var(--night); }
.by { margin-top: 10px; font-size: 13px; color: var(--night-muted); }
.by a { color: var(--night-ink); }
.adb-mark { width: 54px; height: auto; margin-bottom: 18px; }
.me__pic { background: radial-gradient(circle at 50% 28%, #d4d6d9, #9a9ea4 78%); }
.me__pic .badge { color: #0D1B2A; }

/* che cos'è l'AI Act: il banner */
.aia { border-radius: 28px; background: var(--night); color: var(--night-ink); padding: clamp(24px, 4vw, 52px); --muted: var(--night-muted); --line: var(--night-line); }
.aia .kicker { color: var(--lime); }
.aia h2 { margin-top: 14px; font-size: clamp(30px, 4.6vw, 52px); max-width: 16ch; }
.aia__intro { margin-top: 16px; font-size: var(--t-lead); line-height: 1.5; color: var(--night-muted); max-width: 40em; }
.aia__grid { display: grid; gap: 14px; margin-top: 32px; }
.aia__grid > div { padding: 22px; border-radius: 18px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px var(--night-line); }
.aia__grid span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--night); font-weight: 800; font-size: 14px; }
.aia__grid h3 { margin-top: 14px; font-size: 19px; }
.aia__grid p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--night-muted); }
.aia__src { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aia__src p { width: 100%; font-size: 14px; font-weight: 650; color: var(--night-ink); }
.aia__src a { padding: 10px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); color: var(--night-ink); text-decoration: none; font-size: 14.5px; box-shadow: inset 0 0 0 1px var(--night-line); }
.aia__src a::after { content: " ↗"; color: var(--lime); }
.aia__src a:hover { background: rgb(255 255 255 / .14); }
.aia__dates { margin: clamp(36px, 5vw, 56px) 0 18px; font-size: clamp(22px, 2.6vw, 28px); }
@media (min-width: 760px) { .aia__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .aia__grid { grid-template-columns: repeat(4, 1fr); } }

/* la card verde di avvio del test */
.startcard { display: grid; gap: 30px; align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 28px; background: var(--lime); color: var(--ink); overflow: hidden; }
.startcard__k { font-size: 14px; font-weight: 650; color: #2f5208; }
.startcard h2 { margin-top: 10px; font-size: clamp(32px, 4.6vw, 54px); max-width: 14ch; }
.startcard p:not(.startcard__k) { margin-top: 14px; font-size: 18px; line-height: 1.5; color: #2f4219; max-width: 30em; }
.startcard .actions { margin-top: 24px; }
.startcard .btn { background: var(--night); color: #fff; }
.startcard .btn .dot { background: var(--lime); }
@media (min-width: 900px) { .startcard { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
#test .result { margin-top: 20px; }
.ricevi { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.ricevi .form { margin-top: 16px; padding: 0; border: 0; }

/* scelta multipla nel modulo: pillole da spuntare */
.chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 650; color: var(--ink); }
.chips legend .opt { font-weight: 400; color: var(--muted); }
.chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 15px; color: var(--ink); border: 1.5px solid var(--line); background: var(--paper); transition: background .15s, border-color .15s; }
.chip span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #9fb0c0; flex: none; }
.chip:hover span { border-color: var(--lime-line); }
.chip input:checked + span { background: var(--lime-soft); border-color: var(--green); }
.chip input:checked + span::before { background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23BEEA7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--night); }
.chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }

/* dentro l'anteprima: pagina nascosta finché non è portata in alto */
html.fw body { opacity: 0; }

/* menu a scomparsa: stessa logica e stessi movimenti del sito principale, nei colori di AiDocuBase */
.bar__in { justify-content: space-between; }
.burger { display: flex !important; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; }
.menu { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px)) var(--gx, 20px) env(safe-area-inset-bottom, 0px);
  background: rgb(15 42 68 / .9); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  color: var(--night-ink); opacity: 0; transition: opacity .3s ease; }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__list { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 560px; }
.menu__list li { border-bottom: 1px solid var(--night-line); transform: translateY(12px); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; transition-delay: calc(var(--i, 0) * 40ms); }
.menu.is-open .menu__list li { transform: none; opacity: 1; }
.menu__list a { display: block; padding: 14px 0; color: var(--night-ink); text-decoration: none; font: 700 clamp(26px, 8vw, 40px)/1.1 var(--fd); letter-spacing: -.03em; }
.menu__list a:hover { color: var(--lime); }
.menu__list a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
.menu__area { display: block; margin-bottom: 4px; font: 400 10px/1.3 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
body.menu-open { overflow: hidden; }
body.menu-open .bar { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .menu, .menu__list li { transition: none; } }
body.menu-open .bar { color: var(--night-ink); }
body.menu-open .mbar { display: none; }

/* pagine interne e rimandi */
.sec--tight { padding-block: clamp(28px, 4vw, 48px) 0; }
.aiat { display: grid; gap: 8px; padding: clamp(22px, 3.4vw, 36px); border-radius: 24px; background: var(--night); color: var(--night-ink); text-decoration: none; position: relative; overflow: hidden; transition: transform .25s; }
.aiat::after { content: ""; position: absolute; right: -120px; top: -140px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgb(190 234 122 / .28), transparent 65%); }
.aiat:hover { transform: translateY(-2px); }
.aiat__k { font-size: 14px; font-weight: 650; color: var(--lime); }
.aiat__t { font: 700 clamp(24px, 3.2vw, 34px)/1.1 var(--fd); letter-spacing: -.035em; max-width: 22ch; }
.aiat__p { color: var(--night-muted); max-width: 40em; }
.aiat__go { margin-top: 6px; font-weight: 650; color: var(--lime); }
.box--link { color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.box--link:hover { transform: translateY(-3px); border-color: var(--lime-line); box-shadow: 0 20px 40px -28px rgb(15 42 68 / .45); }
.box__go { margin-top: 6px; font-weight: 650; color: var(--green); }
.phead--sub { padding-block: clamp(36px, 5vw, 64px); }
.phead--sub h1 { max-width: 16ch; font-size: clamp(36px, 5.6vw, 64px); }
.fine { display: grid; gap: 22px; align-items: center; }
.fine h2 { font-size: clamp(28px, 3.6vw, 40px); }
.fine p { margin-top: 10px; color: var(--muted); }
@media (min-width: 900px) { .fine { grid-template-columns: minmax(0, 1fr) auto; } }