/* ============================================================================
   LexNova — veste secondo le Human Interface Guidelines di Apple
   (developer.apple.com/design/human-interface-guidelines, lette il 16-09-2026;
   copia locale in /root/lexnova/ai/refs/apple-hig).

   Due cose insieme:
   · la disciplina delle HIG   — colori semantici con varianti chiara/scura/
     contrasto aumentato, scala dei text style, Liquid Glass solo per i
     controlli, bersagli da 44 px, fuoco visibile, Reduce Motion, mai il colore
     da solo a portare un'informazione;
   · le proporzioni delle pagine Apple — respiro largo, titoli grandi centrati,
     fotografie a tutta larghezza, tessere di prodotto, numeri enormi, un solo
     bottone pieno per schermata e accanto un collegamento con la freccetta.
   ========================================================================== */

/* ── 1. COLORE ─────────────────────────────────────────────────────────────*/
:root{
  color-scheme: light;   /* il sito e' solo chiaro: il tema scuro e' stato tolto il 30/09 */

  --bg:            #FFFFFF;   /* il fondo del progetto è bianco */
  --bg-elevated:   #FFFFFF;   /* le superfici si staccano col filo, non col grigio */
  --bg-muted:      #F5F5F7;   /* il grigio delle superfici (tessere, elenchi) sulle sezioni bianche */
  /* Le sezioni si alternano bianco / verde LexNova molto sbiadito: il 7% di
     #17C24A sul bianco. Il grigio da solo rendeva il sito monotono (decisione
     del 25/09/2026). Contrasti misurati su questo fondo: label-3 4,6:1,
     label-2 6,7:1, tint-ink 5,1:1 — come sul grigio di prima. */
  --bg-sezione:    #EFFAF2;
  --bg-tertiary:   #FAFAFB;
  --bg-ink:        #F5F5F7;   /* nessun capitolo nero: resta chiaro */

  --label:         #0A0B0A;
  --label-2:       rgba(60,62,60,.86);   /* 6,8:1 su bianco */
  --label-3:       rgba(60,62,60,.73);   /* 4,6:1 su bianco */
  --separator:     rgba(60,62,60,.18);
  --separator-opaque:#DCDFDC;

  /* il verde del marchio è SUPERFICIE: su bianco fa 1,4:1 e non è mai testo */
  --tint:          #17C24A;
  --tint-ink:      #0A7A32;   /* 4,9:1 su bianco */
  --tint-soft:     #E9FBEF;
  --tint-line:     rgba(10,122,50,.22);
  --on-tint:       #04240F;
  --deep:          #04351A;

  --red-ink:       #B3261E;
  --red-soft:      #FDECEA;

  /* l'ambra della citazione da verificare: era usata in cinque punti
     (.cit.dubbia, .avviso, .fonti a.dubbia) senza essere mai definita */
  --ambra-ink:     #8A5A00;   /* 5,3:1 su bianco */
  --ambra-soft:    #FFF7E6;
  --ambra-line:    rgba(138,90,0,.32);

  /* materiale della barra: Liquid Glass, variante regular */
  --material:      rgba(255,255,255,.72);
  --material-line: rgba(0,0,0,.08);
  --material-blur: saturate(180%) blur(24px);

  --focus:         #0A7A32;

  /* misure */
  --wrap: 1120px;
  --narrow: 860px;
  --read: 66ch;
  --gutter: clamp(20px, 4vw, 32px);
  /* stesso margine a destra e a sinistra, isole comprese */
  --gutter-safe: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  --chapter-y: clamp(84px, 11vw, 168px);
  --radius-xl: 28px;
  --ombra: 0 40px 80px -40px rgba(8,25,14,.28), 0 8px 24px -16px rgba(8,25,14,.18);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --tap: 44px;
  --shadow: 0 30px 60px -40px rgba(4,53,26,.45);
  --shadow-soft: 0 2px 10px rgba(0,0,0,.04);

  /* un solo carattere: SF sui dispositivi Apple, Inter altrove */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* scala dei text style iOS per il testo corrente … */
  --f-body:      1.0625rem; --lh-body:     1.294;  /* 17 / 22 */
  --f-callout:   1rem;      --lh-callout:  1.3125; /* 16 / 21 */
  --f-subhead:   .9375rem;  --lh-subhead:  1.333;  /* 15 / 20 */
  --f-footnote:  .8125rem;  --lh-footnote: 1.385;  /* 13 / 18 */
  --f-caption:   .75rem;    --lh-caption:  1.333;  /* 12 / 16 */
  --f-title3:    1.3125rem; --lh-title3:   1.238;  /* 21 / 26 */
  --f-title2:    1.5rem;    --lh-title2:   1.25;   /* 24 / 30 */
  --f-title1:    1.75rem;   --lh-title1:   1.214;  /* 28 / 34 */
  /* … e le taglie da pagina di presentazione, che partono dal Large Title */
  --f-display:   clamp(3rem, 1.1rem + 7vw, 7rem);           /* 48 → 112 */
  --f-h2:        clamp(2.25rem, 1.2rem + 4vw, 4.5rem);      /* 36 → 72 */
  --f-h3:        clamp(1.25rem, 1rem + .9vw, 1.625rem);     /* 20 → 26 */
  --f-lead:      clamp(1.125rem, 1rem + .6vw, 1.5rem);      /* 18 → 24 */
}


@media (prefers-contrast: more){
  :root{
    --label-2: rgba(38,40,38,.94); --label-3: rgba(38,40,38,.78);
    --separator: rgba(0,0,0,.42); --tint-ink:#05521F;
    --material: rgba(255,255,255,.96); --material-line: rgba(0,0,0,.30);
  }
  }

/* ── 2. BASE ───────────────────────────────────────────────────────────────*/
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* la barra misura 62px, non 90: con 90 l'ancora si fermava troppo in basso.
     In standalone va sommata l'isola di sistema. */
  scroll-padding-top:calc(70px + env(safe-area-inset-top)) }
body{
  margin:0; font-family:var(--font); font-size:var(--f-body); line-height:var(--lh-body);
  font-weight:400; color:var(--label); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video,svg{ max-width:100%; height:auto; display:block }
/* sei pagine su sette non caricano open.css, quindi qui non arriva nessun
   azzeramento universale: senza questa riga <figure> tiene il margine di
   40px del browser e a 320px la fotografia esce larga 200px su 280. */
figure,blockquote,dl,dd,fieldset{ margin:0 }
a{ color:var(--tint-ink); text-decoration:none }
p{ margin:0 0 .8em } p:last-child{ margin-bottom:0 }
strong,b{ font-weight:600; color:inherit }
::selection{ background:var(--tint); color:var(--on-tint) }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:3px;
}

/* ── 3. TIPOGRAFIA ─────────────────────────────────────────────────────────*/
h1,h2,h3,h4{ margin:0; color:var(--label); text-wrap:balance }
.t-display{ font-size:var(--f-display); line-height:1.04; font-weight:700; letter-spacing:-.04em }
.t-h2{ font-size:var(--f-h2); line-height:1.07; font-weight:700; letter-spacing:-.035em }
.t-h3{ font-size:var(--f-h3); line-height:1.15; font-weight:600; letter-spacing:-.025em }
.t-title2{ font-size:var(--f-title2); line-height:var(--lh-title2); font-weight:600; letter-spacing:-.02em }
.t-title3{ font-size:var(--f-title3); line-height:var(--lh-title3); font-weight:600; letter-spacing:-.02em }
.t-headline{ font-size:var(--f-body); line-height:var(--lh-body); font-weight:600 }
.t-lead{ font-size:var(--f-lead); line-height:1.4; font-weight:400; color:var(--label-2); letter-spacing:-.012em }
.t-body{ font-size:var(--f-body); line-height:1.5; color:var(--label-2) }
.t-callout{ font-size:var(--f-callout); line-height:var(--lh-callout); color:var(--label-2) }
/* dentro un titolo (il prezzo: «30 € al mese, IVA inclusa») il sottotitolo
   erediterebbe grassetto e tracking negativo del titolo, che a 15px incollano
   le lettere: peso e tracking vanno riaffermati, non lasciati ereditare */
.t-subhead{ font-size:var(--f-subhead); line-height:var(--lh-subhead); color:var(--label-2);
  font-weight:500; letter-spacing:normal }
.t-footnote{ font-size:var(--f-footnote); line-height:var(--lh-footnote); color:var(--label-3) }
.t-caption{ font-size:var(--f-caption); line-height:var(--lh-caption); color:var(--label-3) }
.t-num{ font-variant-numeric:tabular-nums lining-nums }
.accent{ color:var(--tint-ink) }
mark{ background:none; color:var(--tint-ink); font-weight:600 }

/* occhiello di capitolo: una riga breve sopra il titolo, non un maiuscoletto */
.kicker{ display:block; font-size:var(--f-subhead); line-height:var(--lh-subhead);
  font-weight:600; color:var(--tint-ink); margin:0 0 14px }

/* ── 4. IMPAGINATO ─────────────────────────────────────────────────────────*/
.wrap{ max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gutter-safe) }
.narrow{ max-width:var(--narrow); margin-inline:auto }
.read{ max-width:var(--read) }
.center{ text-align:center }
.center .t-lead,.center .read,.center .narrow{ margin-inline:auto }

.chapter{ padding:var(--chapter-y) 0 }
.chapter--white{ background:var(--bg-elevated) }
.chapter--tint{ background:var(--tint-soft) }
.chapter--white{ background:var(--bg-elevated) }
.chapter--muted{ background:var(--bg-sezione) }
/* i due nomi storici restano, ma ora sono chiari: il progetto è bianco */
.chapter--deep,.chapter--ink{ background:var(--bg-sezione); color:var(--label) }
.chapter--deep h1,.chapter--deep h2,.chapter--deep h3,
.chapter--ink h1,.chapter--ink h2,.chapter--ink h3{ color:var(--label) }
.chapter--deep .t-lead,.chapter--deep .t-body,.chapter--deep .t-callout,
.chapter--ink .t-lead,.chapter--ink .t-body,.chapter--ink .t-callout{ color:var(--label-2) }
.chapter--deep .kicker,.chapter--ink .kicker,
.chapter--deep .accent,.chapter--ink .accent,
.chapter--deep mark,.chapter--ink mark{ color:var(--tint-ink) }
.chapter--deep .stats b,.chapter--ink .stats b{ color:var(--label) }
.chapter--deep .stats span,.chapter--ink .stats span{ color:var(--label-3) }
.chapter--deep .chev,.chapter--ink .chev{ color:var(--tint-ink) }
.chapter--deep .checks li,.chapter--ink .checks li{ color:var(--label-2) }
.chapter--deep .checks li::before,.chapter--ink .checks li::before{ border-color:var(--tint-ink) }
.chapter--deep .pullquote,.chapter--ink .pullquote{ color:var(--label); border-color:var(--tint) }
.chapter--tight{ padding:clamp(56px,7vw,96px) 0 }

/* intestazione di capitolo, centrata come nelle pagine Apple */
.intro{ max-width:min(100%, 940px); margin-inline:auto; text-align:center }
.intro--wide{ max-width:min(100%, 1080px) }
/* il limite in ch va messo sul titolo, dove il carattere è grande davvero */
.intro > h2{ max-width:20ch; margin-inline:auto }
.intro .t-lead{ max-width:46ch; margin:22px auto 0 }

/* ── 5. BARRA (Liquid Glass) ───────────────────────────────────────────────*/
.bar{ position:sticky; top:0; z-index:200;
  padding:calc(8px + env(safe-area-inset-top)) var(--gutter-safe) 0 }
.bar-in{ max-width:var(--wrap); margin-inline:auto; display:flex; align-items:center; gap:10px;
  min-height:52px; padding:6px 8px 6px 16px; border-radius:999px; border:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease }
.is-scrolled .bar-in{ background:var(--material); border-color:var(--material-line);
  -webkit-backdrop-filter:var(--material-blur); backdrop-filter:var(--material-blur);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.55) }
.bar-brand{ display:inline-flex; align-items:center; gap:9px; min-height:var(--tap);
  min-width:0; flex:0 1 auto; color:var(--label) }
.bar-brand img{ flex:none; height:20px; width:auto }
.bar-brand span{ font-size:var(--f-subhead); font-weight:600; letter-spacing:-.01em;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bar-nav{ display:flex; align-items:center; gap:2px; margin-inline:auto }
.bar-nav a{ display:inline-flex; align-items:center; min-height:36px; padding:0 13px; border-radius:999px;
  font-size:var(--f-subhead); font-weight:500; color:var(--label-2);
  transition:color .18s ease, background .18s ease }
.bar-nav a:hover{ color:var(--label); background:color-mix(in srgb, var(--label) 8%, transparent) }
.bar-nav a[aria-current="page"]{ color:var(--label); font-weight:600 }
.bar .btn{ flex:none }
/* finché la barra galleggia sopra una fotografia il suo testo è bianco */
/* sopra la fotografia la barra galleggia davvero: il capitolo le passa sotto */
.bar--over-media{ margin-bottom:-68px }
.bar--over-media:not(.is-scrolled) .bar-in .bar-brand,
.bar--over-media:not(.is-scrolled) .bar-in .bar-nav a,
.bar--over-media:not(.is-scrolled) .bar-in .bar-more{ color:#fff }
/* sopra la fotografia anche i bottoni chiari diventano vetro, se no spariscono */
.bar--over-media:not(.is-scrolled) .bar-in .btn--tinted{ background:rgba(255,255,255,.20); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%) }
.bar--over-media.is-scrolled .bar-brand,.bar--over-media.is-scrolled .bar-more{ color:var(--label) }
.bar--over-media.is-scrolled .bar-nav a{ color:var(--label-2) }

/* menu compatto: sotto i 900 px le voci entrano in un foglio, non spariscono */
.bar-more{ display:none; align-items:center; justify-content:center; flex:none;
  width:var(--tap); height:var(--tap);
  margin-left:auto; border:none; background:none; color:var(--label); cursor:pointer; border-radius:999px }
.bar-more svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round }
.bar-sheet{ display:none }
@media (max-width:900px){
  .bar-nav{ display:none }
  .bar-more{ display:inline-flex }
}
/* Il foglio sta FUORI dalla @media: dentro, ruotando il telefono da 768 a 1024
   con il menu aperto, il pannello spariva mentre hig.js teneva la pagina
   bloccata con overflow:hidden e nessun comando visibile per chiuderla. */
.bar-sheet[open]{ display:block; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.35) }
.bar-sheet-panel{ position:absolute; padding:10px;
  left:max(10px, env(safe-area-inset-left)); right:max(10px, env(safe-area-inset-right));
  top:max(10px, env(safe-area-inset-top));
  /* in orizzontale il contenuto è più alto dello schermo: deve scorrere */
  max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--material); -webkit-backdrop-filter:var(--material-blur);
  backdrop-filter:var(--material-blur); border:1px solid var(--material-line);
  border-radius:var(--radius-xl); box-shadow:0 30px 60px -30px rgba(0,0,0,.6) }
.bar-sheet a{ display:flex; align-items:center; min-height:var(--tap); padding:0 14px;
  border-radius:var(--radius-md); font-size:var(--f-body); font-weight:500; color:var(--label) }
/* `.bar-sheet a+a` (0,1,2) batte `.btn{border:none}` (0,1,0): senza :not(.btn)
   l'ultima voce, che è la pillola verde, prendeva un filo scuro sopra */
.bar-sheet a+a:not(.btn){ border-top:1px solid var(--separator) }
.bar-sheet .btn{ width:100%; margin-top:8px }

/* ── 6. BOTTONI ────────────────────────────────────────────────────────────
   Uno pieno per schermata; accanto, il collegamento con la freccetta. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 22px; border:none; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:var(--f-body); font-weight:600; letter-spacing:-.01em; line-height:1.2;
  transition:filter .18s ease, background .18s ease, transform .18s ease }
.btn:active{ transform:scale(.97) }
.btn--prominent{ background:var(--tint); color:var(--on-tint) }
.btn--prominent:hover{ filter:brightness(1.06) }
.btn--tinted{ background:var(--tint-soft); color:var(--tint-ink); box-shadow:inset 0 0 0 1px var(--tint-line) }
.btn--plain{ background:none; color:var(--tint-ink); padding-inline:14px }
.btn--plain:hover{ background:color-mix(in srgb, var(--tint-ink) 10%, transparent) }
/* il vetro serve solo sopra una fotografia: sul bianco non si vede */
.btn--glass{ background:rgba(255,255,255,.20); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%) }
.btn--glass:hover{ background:rgba(255,255,255,.30) }
.btn--sm{ min-height:36px; font-size:var(--f-subhead); padding:0 16px }
.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:28px }
.center .btn-row,.intro .btn-row{ justify-content:center }
.btn-note{ margin-top:14px; font-size:var(--f-footnote); line-height:var(--lh-footnote); color:var(--label-3) }
@media (max-width:520px){
  .btn{ width:100% }
  .btn-row{ flex-direction:column; align-items:stretch }
  /* nella barra il bottone resta della sua misura, se no sfonda la finestra */
  .bar-in .btn{ width:auto; padding-inline:14px }
  .bar-sheet .btn{ width:100% }
}

/* collegamento con la freccetta */
.chev{ display:inline-flex; align-items:center; gap:6px; min-height:var(--tap);
  font-size:var(--f-body); font-weight:500; color:var(--tint-ink) }
.chev::after{ content:"›"; font-size:1.25em; line-height:1; transform:translateY(-1px);
  transition:transform .18s ease }
.chev:hover::after{ transform:translate(3px,-1px) }
.chapter--deep .chev,.chapter--ink .chev,.hero .chev{ color:#7CEB9C }
.chev-row{ display:flex; flex-wrap:wrap; gap:26px; margin-top:20px }
.center .chev-row,.intro .chev-row{ justify-content:center }

/* ── 7. APERTURA ───────────────────────────────────────────────────────────*/
.hero{ position:relative; isolation:isolate; min-height:min(92vh, 860px); display:flex;
  align-items:flex-end; background:var(--deep); overflow:hidden }
.hero > img,.hero > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 42%; z-index:-1 }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(3,20,10,.92) 0%, rgba(3,20,10,.62) 42%, rgba(3,20,10,.42) 100%) }
.hero-in{ width:100%; max-width:var(--wrap); margin-inline:auto; text-align:center;
  padding:clamp(120px,16vw,200px) var(--gutter-safe) clamp(64px,9vw,110px) }
.hero-in h1{ color:#fff; max-width:16ch; margin-inline:auto }
.hero-in .t-lead{ color:rgba(255,255,255,.88); max-width:44ch; margin:24px auto 0 }
.hero-in .kicker{ color:#7CEB9C }
.hero-in .btn-note{ color:rgba(255,255,255,.66) }
.hero--short{ min-height:min(64vh,620px) }

/* ── 8. TESSERE DI PRODOTTO ────────────────────────────────────────────────*/
.tiles{ display:grid; gap:20px; grid-template-columns:repeat(3,1fr); margin-top:clamp(40px,5vw,64px) }
@media (max-width:980px){ .tiles{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ .tiles{ grid-template-columns:1fr } }
.tile{ display:flex; flex-direction:column; background:var(--bg-elevated);
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-soft);
  border:1px solid var(--separator); transition:transform .3s ease, box-shadow .3s ease }
.tile:hover{ transform:translateY(-6px); box-shadow:var(--ombra) }
.tile-media{ aspect-ratio:4/3; background:var(--tint-soft); overflow:hidden }
.tile-media img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.tile-body{ display:flex; flex-direction:column; gap:10px; flex:1; padding:28px 28px 30px }
.tile-body p{ flex:1; font-size:var(--f-callout); line-height:1.45; color:var(--label-2); margin:0 }
.tile .badge{ align-self:flex-start }
.tile .chev{ min-height:32px }

/* ── 9. NUMERI ─────────────────────────────────────────────────────────────*/
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,4vw,56px);
  margin-top:clamp(44px,6vw,80px); text-align:center }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr) } }
/* tre numeri invece di quattro. Serve una classe e non uno `style=` in pagina:
   un inline batte la @media qui sopra, e sul telefono le tre colonne restavano
   larghe 90px l'una. */
.stats--3{ grid-template-columns:repeat(3,1fr); text-align:left }
@media (max-width:760px){ .stats--3{ grid-template-columns:1fr; gap:30px } }
/* barra dati: numeri allineati a sinistra, separati da un filo verticale —
   non il contorno attorno a ogni riquadro (tic gia' tolto altrove, §28), un
   solo filo fra le colonne. Solo a schermo pieno: sotto i 760px .stats--3
   crolla a una colonna e il filo perderebbe senso. */
@media (min-width:761px){
  .stats--3 > div + div{ border-left:1px solid var(--separator); padding-left:clamp(22px,3vw,32px) }
}
.stats > div{ min-width:0 }
/* le parole stanno su una riga sola, la cifra è quella che deve gridare.
   Le tre cifre della barra pesano uguale: prima una sola aveva la taglia del
   contatore animato (`data-conta`) e le altre due restavano piccole. */
.stats b{ display:block; font-size:clamp(1.75rem,1.05rem + 2.2vw,3rem); font-weight:700;
  letter-spacing:-.045em; line-height:1.05; overflow-wrap:normal; hyphens:none;
  white-space:nowrap; font-variant-numeric:tabular-nums }
.stats span{ display:block; margin-top:12px; font-size:var(--f-subhead);
  line-height:var(--lh-subhead); color:var(--label-2) }
.chapter--deep .stats b,.chapter--ink .stats b{ color:#7CEB9C }
.chapter--deep .stats span,.chapter--ink .stats span{ color:rgba(242,242,244,.75) }

/* ── 10. ELENCHI RAGGRUPPATI (modello Impostazioni) ───────────────────────*/
.list{ background:var(--bg-elevated); border:1px solid var(--separator);
  border-radius:var(--radius-xl); overflow:hidden }
.list > * + *{ border-top:1px solid var(--separator) }
.row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  min-height:var(--tap); padding:22px 26px; color:inherit }
a.row{ transition:background .18s ease }
a.row:hover{ background:var(--tint-soft) }
.row-lead{ display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  flex:none; border-radius:999px; background:var(--tint-soft); color:var(--tint-ink);
  box-shadow:inset 0 0 0 1px var(--tint-line);
  font-size:var(--f-subhead); font-weight:700; font-variant-numeric:tabular-nums }
.row-lead svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }
.row-body > .t-headline,.row-body > h3{ display:block; margin-bottom:3px }
.row-body p{ margin:0; font-size:var(--f-subhead); line-height:1.45; color:var(--label-2) }
.row-trail{ color:var(--label-3); font-size:var(--f-subhead); white-space:nowrap }
@media (max-width:620px){ .row{ grid-template-columns:auto 1fr; row-gap:10px; padding:20px }
  .row-trail{ grid-column:2 } }

/* ── 11. SUPERFICI E INSEGNE ──────────────────────────────────────────────*/
.card{ background:var(--bg-elevated); border:1px solid var(--separator);
  border-radius:var(--radius-xl); padding:32px 30px;
  transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease }
.card > .badge{ align-self:flex-start }
.card h3,.card h4{ margin-bottom:10px }
.card p{ font-size:var(--f-callout); line-height:1.45; color:var(--label-2) }
.grid{ display:grid; gap:20px }
.grid--2{ grid-template-columns:repeat(2,1fr) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .grid--3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .grid--3{ grid-template-columns:1fr } }
@media (max-width:680px){ .grid--2{ grid-template-columns:1fr } }

.badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  font-size:var(--f-caption); line-height:var(--lh-caption); font-weight:600;
  background:var(--tint-soft); color:var(--tint-ink); box-shadow:inset 0 0 0 1px var(--tint-line) }
.badge svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round }
.badge--quiet{ background:color-mix(in srgb, var(--label) 7%, transparent); color:var(--label-2);
  box-shadow:inset 0 0 0 1px var(--separator) }

/* ── 12. FOTOGRAFIE ───────────────────────────────────────────────────────*/
.media{ position:relative; border-radius:var(--radius-xl); overflow:hidden; isolation:isolate }
.media img{ width:100%; height:100%; object-fit:cover }
.media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(3,20,10,.88) 0%, rgba(3,20,10,.30) 48%, rgba(3,20,10,.10) 100%) }
.media-cap{ position:absolute; inset:auto 0 0 0; z-index:2; padding:30px 32px; color:#fff }
.media-cap b{ display:block; font-size:var(--f-title2); line-height:var(--lh-title2); font-weight:600;
  letter-spacing:-.02em }
.media-cap span{ display:block; margin-top:6px; font-size:var(--f-subhead);
  line-height:var(--lh-subhead); color:rgba(255,255,255,.84); max-width:54ch }
.figure{ margin-top:clamp(40px,5vw,64px) }
.figure img,.figure video{ width:100%; border-radius:var(--radius-xl); border:1px solid var(--separator);
  background:var(--bg-elevated) }
.figure figcaption{ margin-top:14px; text-align:center; font-size:var(--f-footnote);
  line-height:var(--lh-footnote); color:var(--label-3) }

/* ── 13. DOMANDE FREQUENTI ────────────────────────────────────────────────*/
.disclosure{ background:var(--bg-elevated); border:1px solid var(--separator);
  border-radius:var(--radius-xl); overflow:hidden; margin-top:clamp(36px,4vw,56px) }
.disclosure > details + details{ border-top:1px solid var(--separator) }
.disclosure summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:20px; min-height:var(--tap); padding:22px 26px;
  font-size:var(--f-title3); line-height:var(--lh-title3); font-weight:600; color:var(--label) }
.disclosure summary::-webkit-details-marker{ display:none }
.disclosure summary::after{ content:""; flex:none; width:11px; height:11px;
  border-right:2px solid var(--label-3); border-bottom:2px solid var(--label-3);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease, border-color .2s ease }
.disclosure details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px);
  border-color:var(--tint-ink) }
.disclosure summary:hover{ background:var(--tint-soft) }
.disclosure .answer{ padding:0 26px 24px; font-size:var(--f-callout); line-height:1.5;
  color:var(--label-2); max-width:var(--read) }

/* ── 14. CONFRONTI ────────────────────────────────────────────────────────*/
.verdict{ display:flex; align-items:center; gap:9px; margin-top:18px;
  font-size:var(--f-subhead); line-height:var(--lh-subhead); font-weight:600 }
.verdict svg{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round }
.verdict--ok{ color:var(--tint-ink) }
.verdict--no{ color:var(--red-ink) }
.quote{ font-size:var(--f-title3); line-height:1.4; font-weight:500; color:var(--label) }

/* ── 15. MODULI ───────────────────────────────────────────────────────────*/
.field{ display:block; margin-bottom:18px }
.field > span{ display:block; margin-bottom:7px; font-size:var(--f-subhead);
  line-height:var(--lh-subhead); font-weight:600; color:var(--label) }
.field input,.field select,.field textarea{ width:100%; min-height:var(--tap); padding:12px 16px;
  font:inherit; color:var(--label); background:var(--bg-elevated);
  border:1px solid var(--separator-opaque); border-radius:var(--radius-md);
  transition:border-color .18s ease, box-shadow .18s ease }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none;
  border-color:var(--tint-ink); box-shadow:0 0 0 3px var(--tint-soft) }

/* ── 16. MOVIMENTO ────────────────────────────────────────────────────────*/
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  .reveal{ opacity:1; transform:none }
  .btn:active,.tile:hover{ transform:none }
}

/* ── 17. PIEDE ────────────────────────────────────────────────────────────*/
.foot{ background:var(--bg); border-top:1px solid var(--separator);
  padding:clamp(48px,6vw,72px) 0 32px; color:var(--label-2) }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px;
  padding-bottom:30px; border-bottom:1px solid var(--separator) }
.foot h4{ font-size:var(--f-footnote); line-height:var(--lh-footnote); font-weight:600;
  color:var(--label); margin-bottom:12px }
.foot a{ display:inline-flex; align-items:center; min-height:32px;
  font-size:var(--f-footnote); color:var(--label-2) }
.foot a:hover{ color:var(--tint-ink) }
.foot-links{ display:flex; flex-direction:column }
.foot-brand .name{ display:block; font-size:var(--f-body); font-weight:600; letter-spacing:-.02em;
  color:var(--label); margin-bottom:8px }
.foot-brand p{ font-size:var(--f-footnote); line-height:var(--lh-footnote); max-width:34ch }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:14px; padding-top:22px;
  font-size:var(--f-caption); line-height:var(--lh-caption); color:var(--label-3) }
.foot-bottom .l{ display:flex; gap:20px; flex-wrap:wrap; align-items:center }
/* `.foot a` da' a ogni link del piede il corpo dei link e una casella alta 32px
   (44 al tocco): nella riga in fondo l'email usciva piu' grande delle scritte
   accanto e, allineata in alto con loro, scendeva di una decina di pixel. Qui il
   link prende il corpo della riga; la casella resta alta per il dito, e
   `align-items:center` la mette sulla stessa linea del testo. */
.foot-bottom a{ font-size:inherit; line-height:inherit }
@media (max-width:760px){
  /* col dito servono 44px, col puntatore 32 bastano e tengono il piede compatto */
  .foot a{ min-height:var(--tap) }
  .foot-links{ gap:2px }
}
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr } }

/* ── 18. UTILITÀ ──────────────────────────────────────────────────────────*/
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
/* parole che si tolgono quando la barra si stringe: "Apri LexNova Chat" → "Apri Chat" */
@media (max-width:560px){ .solo-largo{ display:none } }

/* ── 18b. TENUTA SOTTO I 400 px ───────────────────────────────────────────
   Le parole del lessico giuridico sono lunghe ("giurisprudenza",
   "allucinazione", "Cassazione"): su uno schermo da 320 px un titolo da 48 px
   le fa uscire dal margine. Qui il titolo può spezzare la parola e la scala
   grande scende di un gradino. Sopra i 400 px non cambia nulla. */
h1,h2,h3,h4,.t-display,.t-hero,.sk-h1{ overflow-wrap:break-word }
.row-body p,.card p,.tile-body p,.passo p,.prose p{ overflow-wrap:break-word }
@media (max-width:520px){
  /* sotto i 520px il padding dei riquadri si mangiava il 21% della riga */
  .card{ padding:clamp(20px,5.5vw,32px) clamp(18px,5vw,30px) }
  .passo{ padding:clamp(20px,5.5vw,28px) clamp(18px,5vw,30px) }
  .disclosure summary{ padding:18px clamp(16px,4.5vw,26px); gap:12px }
  .disclosure .answer{ padding:0 clamp(16px,4.5vw,26px) 20px }
  .versus > div{ padding:18px clamp(16px,4.5vw,26px) }
  .callout{ padding:22px clamp(18px,5vw,28px) }
  .pricecard{ padding:clamp(24px,6vw,32px) clamp(18px,5vw,28px) }
}
@media (max-width:400px){
  :root{
    --f-display: clamp(2.375rem, 1.1rem + 7vw, 7rem);
    --f-h2:      clamp(1.875rem, 1.2rem + 4vw, 4.5rem);
  }
  h1,h2,.t-display{ hyphens:auto }
  /* nella barra il marchio, il menu e il bottone devono stare in 280px:
     si stringono i margini prima di troncare il nome */
  .bar-in,.hdr-in{ gap:6px; padding-left:12px; padding-right:6px }
  .bar-in .btn--sm,.hdr-cta{ padding-inline:13px }
}

.skip{ position:absolute; left:12px; top:-60px; z-index:400; padding:12px 18px;
  background:var(--bg-elevated); border-radius:var(--radius-md); font-weight:600;
  box-shadow:var(--shadow); transition:top .18s ease }
.skip:focus{ top:12px }

/* ── 19. COMPONENTI DI PAGINA ─────────────────────────────────────────────*/
.tiles--2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:820px){ .tiles--2{ grid-template-columns:1fr } }
.tile--flat .tile-media{ aspect-ratio:16/10; background:var(--bg) }
.tile--flat .tile-media img{ object-position:top left }

/* colonna di lettura: testo lungo, allineato a sinistra dentro un capitolo centrato */
.prose{ max-width:var(--read); margin:clamp(32px,4vw,52px) auto 0; text-align:left }
.prose p{ font-size:var(--f-callout); line-height:1.55; color:var(--label-2) }
.prose p + p{ margin-top:16px }
.prose h3{ margin:34px 0 10px }

/* marchi collegati, in scorrimento */
.marquee{ margin-top:clamp(36px,4vw,56px); overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent) }
.marquee .track{ display:flex; gap:12px; width:max-content; animation:hig-slide 52s linear infinite }
@keyframes hig-slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.chip{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  background:var(--bg-elevated); border:1px solid var(--separator); white-space:nowrap;
  font-size:var(--f-subhead); font-weight:500; color:var(--label-2) }
.chip img{ width:20px; height:20px; object-fit:contain }
.chip--tint{ color:var(--tint-ink); background:var(--tint-soft); border-color:var(--tint-line) }
@media (prefers-reduced-motion: reduce){
  .marquee{ mask-image:none }
  .marquee .track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center }
  /* fermo lo scorrimento, la seconda serie non serve più: senza questa riga
     si vedevano trentasei pastiglie, cioè diciotto marchi ripetuti due volte */
  .marquee .track .bis{ display:none }
}

/* elenco di garanzie: riga con spunta */
.checks{ display:grid; gap:14px; margin:clamp(28px,3vw,40px) auto 0; max-width:var(--read); padding:0; list-style:none }
.checks li{ position:relative; padding-left:32px; font-size:var(--f-callout); line-height:1.5; color:var(--label-2) }
.checks li::before{ content:""; position:absolute; left:4px; top:.38em; width:13px; height:7px;
  border-left:2.5px solid var(--tint-ink); border-bottom:2.5px solid var(--tint-ink);
  transform:rotate(-45deg); border-radius:1px }
.chapter--deep .checks li::before,.chapter--ink .checks li::before{ border-color:#7CEB9C }

/* ── 20. MODULO DELLA LISTA D'ATTESA ─────────────────────────────────────*/
.form-card{ max-width:680px; margin:clamp(40px,5vw,64px) auto 0; background:var(--bg-elevated);
  border:1px solid var(--separator); border-radius:var(--radius-xl); padding:clamp(28px,4vw,44px) }
.form-card h2{ font-size:var(--f-h3); line-height:1.2 }
.form-card .t-subhead{ margin-top:10px }
.field input.bad,.field textarea.bad,.field select.bad{ border-color:var(--red-ink);
  box-shadow:0 0 0 3px var(--red-soft) }
.field textarea{ min-height:96px; resize:vertical }
.field .opt{ font-weight:400; color:var(--label-3) }
.field .req{ color:var(--red-ink) }
.err{ margin-top:7px; font-size:var(--f-footnote); line-height:var(--lh-footnote);
  color:var(--red-ink); font-weight:600 }
#m-glob{ display:none; margin-bottom:16px; padding:14px 16px; border-radius:var(--radius-md);
  background:var(--red-soft); border:1px solid color-mix(in srgb, var(--red-ink) 30%, transparent);
  font-size:var(--f-subhead); line-height:var(--lh-subhead); color:var(--red-ink); font-weight:600 }
#m-ok{ display:none; text-align:center }
#m-ok .ico{ width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--tint);
  color:var(--on-tint); display:flex; align-items:center; justify-content:center; font-size:28px }
#m-ok h3{ margin-bottom:10px }
#m-ok p{ font-size:var(--f-callout); line-height:1.5; color:var(--label-2) }
.spin{ display:inline-block; width:15px; height:15px; margin-right:8px; border-radius:50%;
  border:2px solid rgba(0,0,0,.25); border-top-color:currentColor;
  animation:hig-spin .8s linear infinite; vertical-align:-2px }
@keyframes hig-spin{ to{ transform:rotate(360deg) } }
.form-legal{ margin-top:18px; font-size:var(--f-footnote); line-height:var(--lh-footnote);
  color:var(--label-3); text-align:center }
.form-legal a{ color:var(--tint-ink) }

/* ── 21. PAGINA DI PRODOTTO ───────────────────────────────────────────────*/
/* riquadro in attesa dello screenshot vero */
.ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:220px; padding:40px 28px; text-align:center; border-radius:var(--radius-xl);
  border:1px dashed var(--tint-line); background:var(--tint-soft);
  font-size:var(--f-subhead); line-height:var(--lh-subhead); color:var(--label-2) }
.ph b{ font-size:var(--f-body); color:var(--label) }
.ph code{ font-size:var(--f-caption); color:var(--label-3) }

/* segnalazione dentro al testo: colore + simbolo + parola */
.warn{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
  background:#FFF3DC; border:1px solid #C98A12; color:#6B4400;
  font-size:var(--f-subhead); line-height:var(--lh-subhead); font-weight:600 }

/* citazione in evidenza */
.pullquote{ max-width:var(--read); margin:clamp(32px,4vw,48px) auto 0; padding-left:22px;
  border-left:3px solid var(--tint); font-size:var(--f-title3); line-height:1.4;
  font-weight:500; color:var(--label) }
.chapter--deep .pullquote,.chapter--ink .pullquote{ color:#fff; border-color:#7CEB9C }

/* riquadro di nota */
.callout{ max-width:var(--read); margin:clamp(28px,3vw,40px) auto 0; padding:26px 28px;
  background:var(--tint-soft); border:1px solid var(--tint-line); border-radius:var(--radius-xl) }
.callout b{ display:block; margin-bottom:8px; font-size:var(--f-body); color:var(--label) }
.callout p{ font-size:var(--f-callout); line-height:1.5; color:var(--label-2) }

/* riga con la data a sinistra */
.row-lead--date{ width:auto; min-width:120px; height:auto; padding:6px 0; border-radius:0;
  background:none; box-shadow:none; justify-content:flex-start; font-size:var(--f-subhead);
  font-weight:600; color:var(--tint-ink) }
/* con 120px riservati alla data al testo restavano 100px: le parole lunghe
   ("allucinazione") non ci stavano e uscivano dalla carta */
@media (max-width:620px){
  .row-lead--date{ min-width:0; grid-column:1 / -1; padding-bottom:0 }
  .row-lead--date + .row-body{ grid-column:1 / -1 }
}

/* confronto “mentre altrove / con LexNova” */
.versus{ display:grid; grid-template-columns:1fr 1fr; background:var(--bg-elevated);
  border:1px solid var(--separator); border-radius:var(--radius-xl); overflow:hidden }
.versus + .versus{ margin-top:14px }
.versus > div{ padding:22px 26px; font-size:var(--f-callout); line-height:1.5 }
.versus .then{ background:var(--bg); color:var(--label-3); border-right:1px solid var(--separator) }
.versus .now{ color:var(--label) }
.versus .now b{ color:var(--tint-ink) }
@media (max-width:760px){
  .versus{ grid-template-columns:1fr }
  .versus .then{ border-right:none; border-bottom:1px solid var(--separator) }
}

/* il prezzo */
.pricecard{ max-width:680px; margin:clamp(40px,5vw,64px) auto 0; padding:clamp(32px,4vw,48px);
  background:var(--bg-elevated); border:1px solid var(--tint-line); border-radius:var(--radius-xl);
  text-align:center }
.pricecard .amount{ font-size:clamp(3.25rem,2rem + 4vw,5.5rem); font-weight:700; letter-spacing:-.045em;
  line-height:1; color:var(--label); font-variant-numeric:tabular-nums }
.pricecard .per{ display:block; margin-top:12px; font-size:var(--f-title3); font-weight:500;
  color:var(--label-2) }
.pricecard p{ font-size:var(--f-callout); line-height:1.5; color:var(--label-2) }

/* ── 22. CATALOGO DEGLI STRUMENTI ─────────────────────────────────────────*/
.catnav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:clamp(32px,4vw,48px) auto 0; max-width:900px }
.catnav a{ display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border-radius:999px;
  background:var(--bg-elevated); border:1px solid var(--separator);
  font-size:var(--f-subhead); font-weight:500; color:var(--label-2) }
.catnav a:hover{ border-color:var(--tint-line); background:var(--tint-soft); color:var(--tint-ink) }
.catblock{ margin-top:clamp(48px,6vw,80px) }
.catblock > h2{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px }
.catblock > h2 .count{ font-size:var(--f-subhead); font-weight:500; color:var(--label-3) }
.toolgrid{ display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)) }
.toolcard{ display:block; padding:22px 24px; border-radius:var(--radius-lg);
  background:var(--bg-elevated); border:1px solid var(--separator);
  transition:border-color .2s ease, transform .2s ease, box-shadow .25s ease }
.toolcard:hover{ border-color:var(--tint-line); transform:translateY(-2px); box-shadow:var(--shadow-soft) }
.toolcard b{ display:block; font-size:var(--f-body); line-height:1.3; font-weight:600;
  letter-spacing:-.015em; color:var(--label); margin-bottom:6px }
.toolcard span{ display:block; font-size:var(--f-subhead); line-height:1.4; color:var(--label-2) }
.toolcard .go{ display:inline-flex; align-items:center; gap:5px; margin-top:12px;
  font-size:var(--f-subhead); font-weight:600; color:var(--tint-ink) }
.toolcard .go::after{ content:"›"; font-size:1.2em; line-height:1 }
@media (prefers-reduced-motion: reduce){ .toolcard:hover{ transform:none } }

/* ── 23. PAGINE DI DOCUMENTO (privacy, termini) ──────────────────────────*/
body.doc{ background:var(--bg) }
.doc header.site{ position:sticky; top:0; z-index:100; background:var(--material);
  -webkit-backdrop-filter:var(--material-blur); backdrop-filter:var(--material-blur);
  border-bottom:1px solid var(--separator) }
.doc header.site .inner{ max-width:var(--wrap); margin-inline:auto; display:flex; align-items:center;
  justify-content:space-between; gap:16px; min-height:56px;
  padding:6px var(--gutter-safe) }
.doc a.brand{ display:inline-flex; align-items:center; min-height:var(--tap);
  font-family:inherit; font-size:var(--f-body); font-weight:600; letter-spacing:-.02em;
  color:var(--label) }
.doc a.back{ display:inline-flex; align-items:center; min-height:var(--tap); padding:0 14px;
  border-radius:999px; font-size:var(--f-subhead); font-weight:600; color:var(--tint-ink) }
.doc a.back:hover{ background:color-mix(in srgb, var(--tint-ink) 10%, transparent) }
.doc .container{ max-width:72ch; margin-inline:auto;
  padding:clamp(48px,7vw,88px) var(--gutter-safe) 104px }
.doc h1{ font-size:clamp(2rem,1.3rem + 2.4vw,3rem); line-height:1.08; font-weight:700;
  letter-spacing:-.035em; margin-bottom:12px }
.doc h2{ margin:44px 0 12px; font-size:var(--f-title2); line-height:var(--lh-title2);
  font-weight:600; letter-spacing:-.025em }
.doc h3{ margin:28px 0 8px; font-size:var(--f-title3); line-height:var(--lh-title3); font-weight:600 }
.doc p,.doc li{ font-size:var(--f-body); line-height:1.6; color:var(--label-2) }
.doc .lead{ font-size:var(--f-lead); line-height:1.4; color:var(--label-2); letter-spacing:-.012em }
.doc .updated{ margin-top:10px; font-size:var(--f-footnote); color:var(--label-3) }
.doc ul{ padding-left:22px; margin:0 0 16px }
.doc li{ margin-bottom:8px }
.doc a{ color:var(--tint-ink); text-decoration:underline; text-underline-offset:3px }
/* le due pillole dell'intestazione non sono testo in mezzo a un paragrafo */
.doc a.brand,.doc a.back{ text-decoration:none }
.doc .callout{ margin:24px 0 }
.doc table{ width:100%; table-layout:fixed; border-collapse:collapse; margin:18px 0 26px;
  font-size:var(--f-subhead); background:var(--bg-elevated); border:1px solid var(--separator);
  border-radius:var(--radius-lg); overflow:hidden }
.doc th,.doc td{ overflow-wrap:anywhere }
.doc th,.doc td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--separator) }

/* ── le tabelle dei documenti su telefono ─────────────────────────────────
   Tre colonne a larghezza fissa su 280px danno otto caratteri per riga. Qui
   ogni riga diventa un blocco e ogni cella porta davanti il nome della sua
   colonna, preso dall'attributo data-th scritto nel markup. */
@media (max-width:600px){
  .doc table{ table-layout:auto; border:none; background:none; margin:14px 0 22px }
  .doc thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  .doc table,.doc tbody,.doc tr,.doc td{ display:block; width:auto }
  .doc tr{ padding:16px 18px; margin-bottom:10px; border:none; border-radius:var(--radius-md);
    background:var(--bg-muted) }
  .doc td{ padding:0; border:none }
  .doc td + td{ margin-top:10px }
  .doc td::before{ content:attr(data-th); display:block; margin-bottom:2px;
    font-size:var(--f-caption); line-height:var(--lh-caption); font-weight:600;
    letter-spacing:.02em; color:var(--label-3) }
}
.doc th{ font-weight:600; color:var(--label); background:var(--bg-tertiary) }
.doc td{ color:var(--label-2) }
.doc tr:last-child td{ border-bottom:none }
.doc .footer-doc{ margin-top:56px; padding-top:22px; border-top:1px solid var(--separator);
  font-size:var(--f-footnote); line-height:var(--lh-footnote); color:var(--label-3) }
.doc .serif{ font-family:inherit }

/* ── 24. PRECEDENZA DELLE UTILITÀ ─────────────────────────────────────────
   Un selettore come `.card p` (classe + elemento) batte una classe sola: le
   utilità tipografiche vanno riaffermate con lo stesso peso, altrimenti dentro
   le carte il testo torna alla misura del corpo. */
p.t-lead{ font-size:var(--f-lead); line-height:1.4; color:var(--label-2); letter-spacing:-.012em }
p.t-body{ font-size:var(--f-body); line-height:1.5; color:var(--label-2) }
p.t-callout{ font-size:var(--f-callout); line-height:var(--lh-callout); color:var(--label-2) }
p.t-subhead{ font-size:var(--f-subhead); line-height:var(--lh-subhead); color:var(--label-2) }
p.t-footnote{ font-size:var(--f-footnote); line-height:var(--lh-footnote); color:var(--label-3) }
p.t-caption{ font-size:var(--f-caption); line-height:var(--lh-caption); color:var(--label-3) }
p.quote{ font-size:var(--f-title3); line-height:1.4; font-weight:500; color:var(--label) }
p.verdict{ font-size:var(--f-subhead); line-height:var(--lh-subhead); font-weight:600 }
.pricecard p.amount{ font-size:clamp(3.25rem,2rem + 4vw,5.5rem); font-weight:700;
  letter-spacing:-.045em; line-height:1; color:var(--label) }
.plan p.price{ font-size:clamp(2rem,1.4rem + 1.6vw,2.75rem); font-weight:700; letter-spacing:-.04em;
  line-height:1; color:var(--label) }
/* Le due tessere dei piani stanno una accanto all'altra e si leggono per
   righe: nome, prezzo, a chi serve, che cosa comprende, azione. Gli elenchi
   hanno lunghezze diverse, quindi il bottone va spinto in fondo alla tessera
   (`margin-top:auto`), se no le due azioni restano sfalsate di una riga e il
   prospetto sembra montato a occhio. */
.plan{ display:flex; flex-direction:column }
.plan > h2{ margin-bottom:6px }
.plan p.price{ margin:0 0 16px }
.plan p.price .t-subhead{ margin-left:5px; white-space:nowrap }
.plan .checks{ margin:20px 0 0; max-width:none }
.plan .btn-row{ margin-top:auto; padding-top:28px; justify-content:flex-start }

/* ═══ 25. LA VERIFICA IN MOVIMENTO ════════════════════════════════════════
   L'elemento-firma del sito: la risposta si scrive, poi ogni citazione viene
   cercata in banca dati. Due si accendono di verde, una resta in ambra con
   l'avviso. A movimento ridotto si vede subito lo stato finale. */
.prova{ width:min(100%, 900px); margin:clamp(44px,6vw,80px) auto 0; text-align:left;
  background:var(--bg-elevated); border:1px solid var(--separator); border-radius:var(--radius-xl);
  box-shadow:var(--ombra); overflow:hidden }
.prova-testa{ display:flex; align-items:center; gap:10px; padding:16px 22px;
  border-bottom:1px solid var(--separator) }
.prova-testa b{ width:10px; height:10px; border-radius:50%; background:rgba(60,62,60,.16) }
.prova-testa span{ margin-left:6px; font-size:var(--f-footnote); color:var(--label-3) }
.prova-corpo{ padding:clamp(24px,3vw,36px) }
.prova .domanda{ display:inline-block; max-width:46ch; margin:0; padding:13px 18px;
  border-radius:18px 18px 18px 6px; background:var(--bg-muted);
  font-size:var(--f-callout); line-height:1.45; color:var(--label) }
.prova .risposta{ margin-top:24px; font-size:clamp(1rem, .96rem + .25vw, 1.125rem);
  line-height:1.7; color:var(--label-2) }
.prova .risposta p{ margin:0 0 12px }
.prova .frase{ opacity:0; filter:blur(5px); transform:translateY(6px);
  transition:opacity .5s ease, filter .5s ease, transform .5s ease }
.prova.viva .frase{ opacity:1; filter:none; transform:none }
.prova.viva .frase:nth-of-type(2){ transition-delay:.4s }
.prova.viva .frase:nth-of-type(3){ transition-delay:.8s }
.cit{ display:inline-flex; align-items:center; gap:7px; padding:3px 11px; margin:0 2px;
  border-radius:999px; font-size:.92em; font-weight:600; white-space:nowrap;
  background:var(--bg-muted); border:1px solid var(--separator); color:var(--label-2);
  transition:background .45s ease, border-color .45s ease, color .45s ease }
.cit .segno{ display:inline-flex; width:17px; height:17px; align-items:center; justify-content:center;
  border-radius:50%; font-size:11px; font-weight:700; background:rgba(60,62,60,.14);
  color:var(--label-3); transition:background .45s ease, color .45s ease }
.prova.fatta .cit.ok{ background:var(--tint-soft); border-color:var(--tint-line); color:var(--tint-ink) }
.prova.fatta .cit.ok .segno{ background:var(--tint); color:var(--on-tint) }
.prova.fatta .cit.no{ background:var(--ambra-soft); border-color:var(--ambra-line); color:var(--ambra-ink) }
.prova.fatta .cit.no .segno{ background:#C98A12; color:#241700 }
.prova .avviso{ display:flex; align-items:flex-start; gap:12px; margin-top:20px; padding:15px 18px;
  border-radius:var(--radius-lg); background:var(--ambra-soft); border:1px solid var(--ambra-line);
  color:var(--ambra-ink); font-size:var(--f-subhead); line-height:1.45; font-weight:600;
  opacity:0; transform:translateY(8px); transition:opacity .5s ease .2s, transform .5s ease .2s }
.prova.fatta .avviso{ opacity:1; transform:none }
.prova .avviso svg{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; margin-top:1px }
.prova .stato{ display:flex; align-items:center; gap:14px; margin-top:22px; padding-top:18px;
  border-top:1px solid var(--separator); font-size:var(--f-footnote); color:var(--label-3) }
.prova .traccia{ position:relative; flex:1; height:4px; border-radius:2px;
  background:rgba(60,62,60,.12); overflow:hidden }
.prova .traccia i{ position:absolute; inset:0 100% 0 0; background:var(--tint);
  transition:inset 1.7s cubic-bezier(.2,.75,.2,1) }
.prova.fatta .traccia i{ inset:0 0 0 0 }
.prova.fatta .quante::after{ content:" — 3 su 3 controllate" }

/* l'alone verde: l'unico colore di fondo ammesso sul bianco */
.alone{ position:absolute; left:50%; top:46%; width:min(120vw,1400px); aspect-ratio:2/1;
  translate:-50% 0; z-index:0; pointer-events:none; filter:blur(70px); opacity:.5;
  background:radial-gradient(50% 50% at 50% 50%, rgba(23,194,74,.40), rgba(23,194,74,.10) 55%, transparent 72%) }

/* ═══ 26. SEQUENZA BLOCCATA ═══════════════════════════════════════════════
   I passaggi scorrono, la finestra del prodotto resta ferma e cambia scena. */
.sequenza{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,80px); align-items:start; margin-top:clamp(48px,6vw,80px) }
@media (max-width:940px){ .sequenza{ grid-template-columns:1fr } }
.passi{ display:grid; gap:clamp(18px,2.4vw,26px) }
.passo{ padding:28px 30px; border-radius:var(--radius-xl); border:1px solid var(--separator);
  background:var(--bg-elevated);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease }
/* Lo scarto di 4px del passo acceso resta un transform: col margine l'elemento
   uscirebbe comunque a destra, e trasformato non produce mai una barra di
   scorrimento perché i 4px cadono dentro il padding di .wrap. Sotto i 940px,
   dove la colonna è unica e i margini sono stretti, viene azzerato. */
.passo.acceso{ border-color:var(--tint-line); box-shadow:var(--ombra); transform:translateX(4px) }
/* fuori dalla sequenza i passi sono carte statiche che si accendono TUTTE
   (hig.js §7): lo scarto laterale è il gesto della sequenza — tre carte
   affiancate tutte spostate di 4px sarebbero solo storte */
.passo.acceso:not(.sequenza .passo){ transform:none }
/* a colonna unica i 4px di scarto uscirebbero dal contenitore, e la finestra
   appiccicata non ha senso quando sta sotto i passi invece che accanto */
@media (max-width:940px){
  .sequenza .passo.acceso{ transform:none }
  .sequenza .finestra{ position:static; min-height:0 }
  .sequenza .quadro{ min-height:0 }
}
.passo .n{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background:var(--bg-muted); color:var(--label-3); font-weight:700;
  font-variant-numeric:tabular-nums; margin-bottom:14px;
  transition:background .35s ease, color .35s ease }
.passo.acceso .n{ background:var(--tint); color:var(--on-tint) }
.passo p{ margin:8px 0 0; font-size:var(--f-callout); line-height:1.5; color:var(--label-2) }
.finestra{ position:sticky; top:96px; border-radius:var(--radius-xl); border:1px solid var(--separator);
  background:var(--bg-elevated); box-shadow:var(--ombra); overflow:hidden; min-height:min(56vh,440px) }
.finestra-testa{ display:flex; align-items:center; gap:8px; padding:15px 20px;
  border-bottom:1px solid var(--separator); font-size:var(--f-footnote); color:var(--label-3) }
.quadro{ position:relative; display:grid; padding:28px; min-height:min(46vh,360px) }
.quadro figure{ grid-area:1 / 1; margin:0; opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease }
.quadro figure.mostra{ opacity:1; transform:none }
.materie{ display:flex; flex-wrap:wrap; gap:9px }
.materie span{ padding:9px 15px; border-radius:999px; border:1px solid var(--separator);
  background:var(--bg-tertiary); font-size:var(--f-subhead); color:var(--label-2) }
.materie span.scelta{ background:var(--tint-soft); border-color:var(--tint-line);
  color:var(--tint-ink); font-weight:600 }
.righe{ display:grid; gap:11px }
.righe i{ display:block; height:12px; border-radius:6px; background:rgba(60,62,60,.10) }
.righe i.luce{ background:linear-gradient(90deg, rgba(23,194,74,.55), rgba(23,194,74,.12)) }
.conteggio{ margin-top:20px; font-size:var(--f-subhead); color:var(--label-3) }
.scheda{ padding:20px; border-radius:var(--radius-lg); border:1px solid var(--tint-line);
  background:var(--tint-soft); font-size:var(--f-subhead); line-height:1.55; color:var(--label) }
.scheda b{ display:block; margin-bottom:8px; font-size:var(--f-footnote); color:var(--tint-ink) }
.fonti{ display:grid; gap:11px }
.fonti a{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--tap); padding:13px 17px; border-radius:var(--radius-md);
  border:1px solid var(--separator); background:var(--bg-tertiary);
  font-size:var(--f-subhead); color:var(--label) }
.fonti a span{ color:var(--tint-ink); font-weight:600 }
.fonti a.dubbia{ background:var(--ambra-soft); border-color:var(--ambra-line) }
.fonti a.dubbia span{ color:var(--ambra-ink) }

/* ═══ 27. MOVIMENTO D'INGRESSO ════════════════════════════════════════════ */
/* `html.js` lo scrive hig.js come prima istruzione: senza quella guardia, se il
   foglio di comportamento non arriva (404 dopo un rilascio, blocco a monte) la
   pagina resta bianca sotto l'apertura, perché niente toglie mai l'opacità 0. */
html.js .sale{ opacity:0; transform:translateY(14px); filter:blur(4px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease }
html.js .sale.dentro{ opacity:1; transform:none; filter:none }
@media (prefers-reduced-motion: reduce){
  html.js .sale{ opacity:1; transform:none; filter:none }
  .prova .frase{ opacity:1; filter:none; transform:none }
  .prova .avviso{ opacity:1; transform:none }
  .finestra{ position:static }
  .quadro{ min-height:0 }
  .quadro figure{ grid-area:auto; opacity:1; transform:none; margin-bottom:20px }
  .alone{ display:none }
}

/* ═══ 28. TOGLIERE I TIC ══════════════════════════════════════════════════
   Tre cose facevano sembrare la pagina generata da una macchina: una parola
   verde dentro ogni titolo, un filo grigio attorno a ogni superficie, e lo
   stesso ritmo (occhiello → titolo centrato → tre schede) ripetuto ovunque.
   Le HIG dicono l'opposto: «il marchio si fa da parte davanti al contenuto»
   e «il piacere non è decorazione». Qui si rimedia. */

/* una sola frase colorata per pagina: quella dell'apertura. Le altre no. */
.accent{ color:inherit }
.t-display .accent, h1 .accent{ color:var(--tint-ink) }

/* le superfici si staccano col tono, non col contorno */
.card{ border:none; background:var(--bg-muted); box-shadow:none }
.chapter--muted .card{ background:var(--bg-elevated) }
.tile{ border:none; box-shadow:none; background:var(--bg-muted) }
.chapter--muted .tile{ background:var(--bg-elevated) }
.tile-media{ border-bottom:none }
.passo{ border:none; background:var(--bg-elevated) }
.chapter--muted .passo{ background:var(--bg-elevated) }
.passo.acceso{ box-shadow:var(--ombra) }
.list,.disclosure{ border:none; background:var(--bg-muted) }
.chapter--muted .list,.chapter--muted .disclosure{ background:var(--bg-elevated) }
.finestra{ border:none }
.prova{ border:none }

/* ── impaginato editoriale: il testo non sta sempre al centro ───────────── */
.intro--sinistra{ max-width:min(100%, 780px); margin-inline:0; text-align:left }
.intro--sinistra > h2{ max-width:16ch; margin-inline:0 }
.intro--sinistra .t-lead{ margin-inline:0 }
/* Un titolo LUNGO non e' un titolo piu' grande. La misura stretta (16-20ch) e
   il corpo fino a 112px sono tarati su frasi da quattro parole: su una frase
   intera — «Se vuoi smettere di perdere tempo a controllare quello che scrive
   l'AI, prova LexNova» — diventano sei righe alte quanto lo schermo, e il
   titolo smette di leggersi in un colpo d'occhio. `lungo` allarga la misura e
   abbassa il corpo di una tacca. La specificita' e' scritta apposta piu' alta
   di `.intro > h2` e di `.apertura h1`, che altrimenti vincerebbero sul ch. */
h1.lungo{ font-size:clamp(2rem, 1.2rem + 3.2vw, 3.75rem) }
h2.lungo{ font-size:clamp(1.75rem, 1.1rem + 2.4vw, 3rem) }
.intro > h1.lungo,.intro > h2.lungo,
.intro--sinistra > h1.lungo,.intro--sinistra > h2.lungo{ max-width:26ch }
/* `riga`: il titolo breve che deve stare su una riga sola a ogni larghezza
   («Nessun limite nascosto.»). Via la misura in ch e l'a capo; il corpo resta
   --f-h2 e scende solo quando la colonna non basta. `--riga-em` e' la larghezza
   del titolo in em, misurata sul carattere (Inter Bold, tracking -.035) e
   maggiorata del 9% per SF Pro: 12 per una frase da ~11em, 13.7 per «Le
   differenze fra i due piani.» (12,6em). Si divide la COLONNA (min(100vw,
   --wrap)), non la finestra: a schermo largo la pagina e' larga 1120px, e un
   titolo tarato su 100vw uscirebbe dalla colonna. */
/* Sotto i 900px la riga unica si paga troppo cara: per stare in 375px un titolo
   da 15,6em scenderebbe a 21px, contro i 34 degli altri titoli della stessa
   pagina — si vedrebbe un titolo rimpicciolito, non un titolo su una riga. Da
   900px in su il ritiro e' al massimo del 6% e non si nota; sotto, il titolo va
   a capo con la misura di casa come tutti gli altri. */
@media (min-width:900px){
  .intro--sinistra > h2.riga{ max-width:none; white-space:nowrap;
    font-size:min(var(--f-h2), calc((min(100vw, var(--wrap)) - 2 * var(--gutter-safe)) / var(--riga-em, 12))) }
}

.blocco{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,80px); align-items:center; margin-top:clamp(48px,6vw,88px) }
.blocco--rovescio > *:first-child{ order:2 }
/* nel blocco rovesciato si scambiano anche le colonne: l'immagine deve stare
   sempre nella colonna larga, se no un blocco su due esce più stretto */
.blocco--rovescio{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
@media (max-width:900px){ .blocco{ grid-template-columns:1fr } .blocco--rovescio > *:first-child{ order:0 } }
.blocco-testo h3{ margin-bottom:12px }
/* quando il blocco crolla a una colonna il paragrafo si prendeva tutta la
   larghezza: 104 caratteri per riga a 900px, contro i 66 dichiarati */
.blocco-testo p{ font-size:var(--f-callout); line-height:1.55; color:var(--label-2);
  max-width:62ch }

/* fotografia a tutta pagina, con la didascalia sotto invece che sopra */
.mostra{ margin-top:clamp(56px,7vw,104px) }
.mostra img{ width:100%; height:clamp(320px,42vw,620px); object-fit:cover;
  border-radius:var(--radius-xl) }
.mostra figcaption{ margin-top:16px; max-width:52ch; font-size:var(--f-subhead);
  line-height:var(--lh-subhead); color:var(--label-3) }

/* ── le fotografie su telefono ─────────────────────────────────────────────
   Le altezze sono scritte come clamp con un minimo in px: sotto i 765px il
   termine in vw non arriva mai al minimo, quindi l'altezza resta ferma mentre
   la larghezza si dimezza e una fotografia orizzontale diventa quasi quadrata
   (a 320px: 280 × 260). Quattro di quelle altezze stanno negli attributi
   style= del markup, che nessun foglio può battere senza !important: è l'unico
   punto del progetto in cui serve, e vale solo sotto i 700px. Sopra, la veste
   resta esattamente quella di prima. */
@media (max-width:700px){
  .mostra img,.media img{ height:auto !important; aspect-ratio:3/2; object-fit:cover }
  .media-cap{ padding:22px 20px }
  .media-cap b{ font-size:var(--f-title3); line-height:var(--lh-title3) }
}

/* il numero grande, con la frase accanto: non quattro colonne uguali */
.cifrona{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,4vw,56px);
  align-items:baseline; margin-top:clamp(40px,5vw,72px) }
@media (max-width:760px){ .cifrona{ grid-template-columns:1fr } }
.cifrona b{ font-size:clamp(4rem, 2rem + 8vw, 10rem); font-weight:700; letter-spacing:-.06em;
  line-height:.86; font-variant-numeric:tabular-nums; white-space:nowrap }
.cifrona p{ margin:0; font-size:var(--f-lead); line-height:1.4; color:var(--label-2);
  max-width:34ch; letter-spacing:-.012em }
.elenco-secco{ display:grid; gap:0; margin-top:clamp(32px,4vw,56px); max-width:760px }
.elenco-secco div{ display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:20px;
  padding:18px 0; border-top:1px solid var(--separator) }
.elenco-secco div:last-child{ border-bottom:1px solid var(--separator) }
.elenco-secco dt,.elenco-secco b{ font-weight:600; color:var(--label) }
.elenco-secco p,.elenco-secco span{ margin:0; font-size:var(--f-subhead); line-height:1.45; color:var(--label-2) }
@media (max-width:620px){ .elenco-secco div{ grid-template-columns:1fr; gap:4px } }

/* niente alone: era la firma delle pagine fatte a macchina */
.alone{ display:none }

/* ═══ 29. FILMATI DEL PRODOTTO ════════════════════════════════════════════
   Il girato vero dentro una cornice, con la stessa ombra delle finestre
   disegnate. Parte da solo, muto, in anello — e sta fermo sulla copertina
   se il sistema chiede meno movimento o se la rete è lenta. */
.girato{ position:relative; border-radius:var(--radius-xl); overflow:hidden;
  background:var(--bg-muted); box-shadow:var(--ombra); line-height:0 }
.girato video,.girato img{ width:100%; height:auto; display:block }
.girato--stretto{ width:min(100%, 900px); margin-inline:auto }
.girato figcaption{ padding:16px 4px 0; line-height:1.4; font-size:var(--f-subhead);
  color:var(--label-3) }
/* attenzione: `figure.girato` (classe + elemento) batte `.girato--stretto`,
   quindi un margin:0 secco toglieva la centratura automatica ai filmati con
   didascalia. Qui si azzera solo il margine sopra e sotto. */
figure.girato{ margin-block:0; margin-inline:auto }
@media (prefers-reduced-motion: reduce){ .girato video{ display:none } .girato .copertina{ display:block } }
.girato .copertina{ display:none; width:100%; height:auto }
/* il filmato pesante in attesa di tocco: si vede che c'è qualcosa da avviare */
.girato[role="button"]{ position:relative }
.girato[role="button"]::after{ content:""; position:absolute; left:50%; top:50%;
  width:60px; height:60px; translate:-50% -50%; border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l12 7-12 7z' fill='%230A0B0A'/%3E%3C/svg%3E") 54% 50%/26px no-repeat;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.45); pointer-events:none }
.girato[role="button"]:focus-visible{ outline:3px solid var(--focus); outline-offset:3px }
/* ── i filmati su telefono ─────────────────────────────────────────────────
   Sono girati su schermo largo e hanno un margine vuoto tutto attorno: portati
   a 350px il testo dell'interfaccia scende sotto i 10px e non si legge più.
   Qui il riquadro va da bordo a bordo e ritaglia solo il vuoto ai lati: 16/10
   su una sorgente 16/9 toglie il 5% per parte, che è quanto basta a non
   tagliare il bottone di invio in fondo al campo. */
@media (max-width:700px){
  .girato{ margin-inline:calc(-1 * var(--gutter-safe)); border-radius:0;
    aspect-ratio:16/10 }
  .girato--stretto{ width:auto }
  figure.girato{ margin-inline:calc(-1 * var(--gutter-safe)) }
  .girato video,.girato img{ width:100%; height:100%; object-fit:cover;
    object-position:50% 50% }
  .girato figcaption{ padding-inline:var(--gutter-safe) }
}

/* ═══ 30. SCHERMATE DEL PRODOTTO ══════════════════════════════════════════
   Una schermata non si ritaglia: o si vede intera o non si capisce. Qui sta
   dentro una cornice con la barra, come una finestra vera, e l'immagine
   mantiene le sue proporzioni. Il ritaglio resta alle fotografie. */
.schermata{ position:relative; border-radius:var(--radius-xl); overflow:hidden;
  background:var(--bg-elevated); box-shadow:var(--ombra); line-height:0 }
.schermata::before{ content:""; display:block; height:38px; background:var(--bg-muted);
  border-bottom:1px solid var(--separator) }
.schermata::after{ content:""; position:absolute; left:16px; top:14px; width:10px; height:10px;
  border-radius:50%; background:rgba(60,62,60,.18);
  box-shadow:18px 0 0 rgba(60,62,60,.18), 36px 0 0 rgba(60,62,60,.18) }
.schermata img{ width:100%; height:auto; display:block }
.schermata figcaption{ padding:16px 20px; line-height:1.4; font-size:var(--f-subhead);
  color:var(--label-3); background:var(--bg-elevated) }
figure.schermata{ margin:0 }
.chapter--muted .schermata{ background:var(--bg-elevated) }
.tile-media--intera{ aspect-ratio:auto; background:var(--bg-muted); padding:0 }
.tile-media--intera img{ width:100%; height:auto; object-fit:contain }

/* ── le schermate nei blocchi hanno tutte la stessa geometria ──────────────
   Le immagini hanno proporzioni diverse (1600×1000, 960×780, 1400×438): se
   ognuna fa da sé i blocchi sembrano sfalsati. Qui la cornice è sempre la
   stessa e l'immagine ci sta dentro intera, centrata. */
.blocco .schermata{ width:100% }
.blocco .schermata img{ aspect-ratio:16/10; object-fit:contain; background:var(--bg-muted);
  padding:0 }
.blocco{ align-items:center }
.blocco-testo{ padding-block:8px }
@media (max-width:900px){ .blocco .schermata img{ aspect-ratio:16/11 } }

/* ═══ 31. BERSAGLI SUL TOCCO ══════════════════════════════════════════════
   Le altezze compatte (36, 38, 32 px) vanno bene col puntatore e non bastano
   col dito. La condizione è il puntatore, non la larghezza: un iPad a 1024px
   è un dito, un portatile a 900px è un puntatore.
   Sta in fondo al foglio di proposito: `.catnav a{min-height:38px}` è
   dichiarato a metà file e, a parità di peso, vince l'ultima regola scritta —
   una @media non aggiunge specificità. */
@media (pointer:coarse){
  .bar-nav a,.hdr-nav a{ min-height:var(--tap) }
  .bar-in,.hdr-in{ min-height:56px }
  .bar-in .btn--sm{ min-height:var(--tap) }
  .catnav a{ min-height:var(--tap) }
  .tile .chev{ min-height:var(--tap) }
  .foot a{ min-height:var(--tap) }
  .foot-links{ gap:2px }
}
.bar-nav{ min-width:0 }
.bar-nav a{ white-space:nowrap }

/* ═══ 32. TABELLA DI CONFRONTO ════════════════════════════════════════════
   Due piani messi uno accanto all'altro. Le righe si staccano con un filo
   orizzontale e basta: il contorno attorno alla tabella sarebbe il tic gia'
   tolto dalle altre superfici (§28).
   `.tabellona` e' il contenitore che scorre: su telefono la tabella e' piu'
   larga dello schermo, e a scorrere deve essere lei, non la pagina.        */
.tabellona{ margin-top:clamp(32px, 2rem + 1.5vw, 52px); overflow-x:auto;
  -webkit-overflow-scrolling:touch }
.confronto{ width:100%; min-width:580px; border-collapse:collapse;
  font-size:var(--f-callout); line-height:1.4 }
.confronto caption{ caption-side:bottom; margin-top:12px; text-align:left;
  color:var(--label-3) }
.confronto th,.confronto td{ padding:14px 18px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--separator) }
.confronto thead th{ padding-top:0; font-size:var(--f-footnote); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--label-3) }
.confronto tbody th{ font-weight:500; color:var(--label) }
.confronto tbody td{ color:var(--label-2); font-variant-numeric:tabular-nums }
/* la colonna del piano a pagamento e' quella che si legge per ultima:
   le si da' il tono pieno, non un fondo colorato */
.confronto thead th:last-child,.confronto tbody td:last-child{ color:var(--label) }
.confronto tbody tr:last-child th,.confronto tbody tr:last-child td{ border-bottom:none }
@media (max-width:520px){
  .confronto{ min-width:460px }
  .confronto th,.confronto td{ padding:12px 12px }
}

/* slogan: nel piede di ogni pagina e sotto il titolo della /chat */
.slogan-piede{ margin:0 0 10px; font-size:var(--f-footnote); line-height:var(--lh-footnote); font-weight:600; color:var(--label) }
.sil h1 + .sil__slogan{ margin:18px auto 0; max-width:34ch; font-size:max(1.1rem,1.5vw); line-height:1.35; color:#E6EBE8; text-wrap:balance }

/* ══ Apertura a tutta pagina (nata su /chat, ora su tutte le sezioni) ══ */
/* L'apertura. L'immagine (1365x768) e' verde scuro fino al 54% della sua altezza, poi
   sfuma nel bianco. La si disegna ancorata in alto e alta almeno h/.88: cosi' il fondo
   dell'apertura cade verso l'88% della foto, gia' quasi bianco, senza una fascia bianca
   vuota. 56,264vw e' l'altezza che ha quando copre in larghezza: sotto quella non scende,
   se no ai lati resterebbe scoperto. */
.sil{ --h: clamp(600px, 100vh, max(900px, 46vw)); --img-h: max(calc(var(--h) / .88), 56.264vw);
  position:relative; height:var(--h);
  background:url(/assets/img/chat-hero.jpg) center top / auto var(--img-h) no-repeat var(--bg);
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 86%, var(--bg) 100%),
    image-set(url(/assets/img/chat-hero.webp) type("image/webp"), url(/assets/img/chat-hero.jpg) type("image/jpeg")) center top / auto var(--img-h) no-repeat,
    var(--bg) }
@supports (height:100svh){ .sil{ --h: clamp(600px, 100svh, max(900px, 46vw)) } }
/* il blocco del titolo arriva al 60% della foto (fin li' il verde e' ancora scuro); 68px
   sono la barra che ci galleggia sopra, il resto dello spazio in alto abbassa la scritta */
.sil__titolo{ height:min(var(--h), .60 * var(--img-h));
  padding:calc(68px + clamp(32px, 7vh, 80px)) var(--gutter-safe) 0;
  display:flex; flex-direction:column; text-align:center }
/* margin:auto e non justify-content:center: se il testo non ci sta, deborda in basso e non sotto la barra */
.sil__titolo > div{ margin-block:auto }
.sil h1{ margin:0; font-family:"Lato", var(--font); font-weight:700; color:#DCE1DE;
  font-size:clamp(2.25rem, .9rem + 5.6vw, 5.5rem); line-height:1.04; letter-spacing:-.012em;
  text-wrap:balance; text-shadow:0 1px 24px rgba(0,40,20,.18) }
.sil h1 .sil__nome{ display:block; margin-top:.5em; font-weight:400; font-size:max(.36em, 1.3rem);
  letter-spacing:.02em; color:#C8D2CD; text-shadow:none }
/* sul telefono il titolo va su due righe («Super Intelligenza» / «Legale»), grande; dai 561px «Intelligenza Legale» resta unito */
@media (max-width:560px){ .sil h1{ font-size:10.8vw } }
@media (min-width:561px){ .sil h1 .insieme{ white-space:nowrap } }
.sil .btn-row{ justify-content:center; margin-top:clamp(28px,3.4vw,40px) }
.sil .btn-row .btn{ width:auto }
@media (max-width:640px){ .sil .btn-row{ flex-direction:row; align-items:center } }
.sil .btn--bianco{ background:#fff; color:var(--on-tint) }
.sil .btn--bianco:hover{ background:#EAF6EE }
.sil .btn--vetro{ background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.42) }
.sil .btn--vetro:hover{ background:rgba(255,255,255,.22) }
.sil .btn-note{ color:rgba(255,255,255,.80) }
/* la barra si vede sempre, anche in cima (Andrea, 04/10/2026): galleggia sul verde ma ha gia' il
   vetro e il testo scuro di quando si scorre, invece di restare trasparente col testo bianco */
#bar.bar--over-media .bar-in{ background:var(--material); border-color:var(--material-line);
  -webkit-backdrop-filter:var(--material-blur); backdrop-filter:var(--material-blur);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.55) }
#bar.bar--over-media .bar-in .bar-brand,
#bar.bar--over-media .bar-in .bar-more{ color:var(--label) }
#bar.bar--over-media .bar-in .bar-nav a{ color:var(--label-2) }
#bar.bar--over-media .bar-in .bar-nav a[aria-current="page"]{ color:var(--label) }
.sil--pagina{ --h: clamp(480px, 80svh, 780px) }
.sil--lungo h1{ font-size:clamp(2rem, .8rem + 4.6vw, 4.5rem) }
@media (max-width:560px){ .sil--lungo h1{ font-size:8.6vw } }
@media (min-width:561px){ .sil--lungo h1 .insieme{ white-space:normal } }

/* ══ Confronto AI generaliste / AI legali / LexNova (home, #problema) ══ */
.cfr{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:calc(-1 * var(--gutter-safe)); padding:8px var(--gutter-safe) 12px }
.cfr-t{ width:100%; min-width:680px; border-collapse:separate; border-spacing:0; table-layout:fixed;
  font-size:var(--f-subhead); line-height:var(--lh-subhead) }
.cfr-t th, .cfr-t td{ padding:18px 20px; vertical-align:top; text-align:left; border-bottom:1px solid var(--separator) }
.cfr-t thead td, .cfr-t thead th{ border-bottom:none; vertical-align:bottom; padding-top:26px }
.cfr-t tbody th{ width:20%; font-weight:600; color:var(--label) }
.cfr-t thead th b{ display:block; font-size:var(--f-body); font-weight:600; letter-spacing:-.01em; color:var(--label) }
.cfr-t thead th small{ display:block; font-size:var(--f-footnote); color:var(--label-3) }
.cfr-logo{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; margin-bottom:14px }
.cfr-logo svg{ width:26px; height:26px }
.cfr-logo--gpt{ background:#fff; box-shadow:inset 0 0 0 1px var(--separator) }
.cfr-logo--gpt svg{ fill:#0A0B0A }
.cfr-logo--giu{ background:var(--bg-tertiary) }
.cfr-logo--giu svg{ fill:none; stroke:var(--label-3); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.cfr-logo--noi{ background:#fff; box-shadow:inset 0 0 0 1px var(--separator) }
.cfr-logo--noi img{ width:30px; height:30px }
.cfr-gen, .cfr-giu{ color:var(--label-2) }
.cfr-t tbody td{ display:table-cell }
.cfr-t tbody td > *{ vertical-align:top }
.cfr-t td span{ display:block }
.cfr-t td .cfr-s + span{ margin-top:8px }
/* la colonna di LexNova e' una carta sola dall'intestazione all'ultima riga */
.cfr-t .cfr-noi{ background:var(--bg-elevated, #fff); color:var(--label); border-left:2px solid var(--tint); border-right:2px solid var(--tint) }
.cfr-t thead .cfr-noi{ border-top:2px solid var(--tint); border-radius:20px 20px 0 0 }
.cfr-t tbody tr:last-child .cfr-noi{ border-bottom:2px solid var(--tint); border-radius:0 0 20px 20px; font-weight:600 }
.cfr-t tbody tr:last-child th, .cfr-t tbody tr:last-child td:not(.cfr-noi){ border-bottom:none }
.cfr-t thead .cfr-noi b{ color:var(--tint-ink) }
.cfr-s{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50% }
.cfr-s svg{ width:14px; height:14px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.cfr-s--si{ background:var(--tint) } .cfr-s--si svg{ stroke:#fff }
.cfr-s--no{ background:var(--red-soft) } .cfr-s--no svg{ stroke:var(--red-ink) }
.cfr-s--forse{ background:var(--ambra-soft) } .cfr-s--forse svg{ stroke:var(--ambra-ink) }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* due carte sfalsate: la prima a sinistra, la seconda a capo e a destra (home, #tribunali) */
.sfalsate{ display:flex; flex-direction:column; gap:20px }
.sfalsate > .card{ width:100% }
@media (min-width:760px){
  .sfalsate > .card{ width:calc(50% - 12px) }
  .sfalsate > .card:nth-child(even){ align-self:flex-end }
}
/* tre carte alternate: sinistra, destra, sinistra */
@media (min-width:760px){
  .sfalsate--3 > .card{ width:calc(50% - 12px) }
  .sfalsate--3 > .card:nth-child(2){ align-self:flex-end }
  .sfalsate--3 > .card:nth-child(3){ align-self:flex-start }
}

/* ══ Esito del Triplo Vaglio in vetro (home, #vaglio) ══
   Il vetro ha bisogno di qualcosa dietro: un fondo di macchie verdi e ambra sfocate. */
.vetro-esito{ position:relative; margin:clamp(36px,4vw,56px) 0 0; padding:clamp(20px,4vw,56px);
  border-radius:var(--radius-xl, 28px); overflow:hidden; isolation:isolate }
.vetro-esito__fondo{ position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(40% 55% at 12% 18%, rgba(23,194,74,.55), transparent 70%),
    radial-gradient(35% 50% at 88% 30%, rgba(10,122,50,.45), transparent 70%),
    radial-gradient(38% 50% at 70% 92%, rgba(255,183,64,.45), transparent 70%),
    radial-gradient(45% 60% at 25% 95%, rgba(124,235,156,.5), transparent 70%),
    linear-gradient(135deg, #E9F8EE, #F6FBF7) }
.vetro-esito__pannello{ max-width:760px; margin:0 auto; padding:clamp(20px,3vw,32px);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38));
  -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55),
    0 30px 60px -30px rgba(8,40,20,.35), 0 2px 8px rgba(8,40,20,.06) }
.vetro-esito__testa{ display:flex; align-items:center; gap:10px; padding-bottom:16px;
  border-bottom:1px solid rgba(10,11,10,.08); font-size:var(--f-subhead); color:var(--label-2) }
.vetro-esito__testa img{ width:28px; height:28px; border-radius:8px; background:#fff; padding:3px;
  box-shadow:inset 0 0 0 1px var(--separator) }
.vetro-esito__testa b{ color:var(--label) }
.vetro-esito__pill{ margin-left:auto; padding:4px 12px; border-radius:999px; font-size:var(--f-footnote); font-weight:600;
  color:var(--tint-ink); background:rgba(255,255,255,.7); box-shadow:inset 0 0 0 1px rgba(10,122,50,.18) }
.vetro-esito__sintesi{ margin:18px 0 0; color:var(--label) }
.vetro-esito__sintesi .ambra{ color:var(--ambra-ink) }
.vetro-esito__gruppo{ margin:24px 0 10px; font-size:var(--f-footnote); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--label-3) }
.vetro-riga{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; margin-top:8px; border-radius:16px;
  background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(8,40,20,.05) }
.vetro-riga > i{ flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--tint); color:#fff; font-style:normal; font-weight:700; font-size:14px }
.vetro-riga > i svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.vetro-riga b{ display:block; color:var(--label); font-weight:600 }
.vetro-riga span{ display:block; margin-top:2px; font-size:var(--f-subhead); line-height:var(--lh-subhead); color:var(--tint-ink) }
.vetro-riga--ambra{ background:rgba(255,247,230,.72); box-shadow:inset 0 0 0 1px rgba(255,200,110,.55), 0 1px 2px rgba(8,40,20,.05) }
.vetro-riga--ambra > i{ background:#E8A23A }
.vetro-riga--ambra span{ color:var(--ambra-ink) }
.vetro-esito__piede{ margin:20px 0 0; font-size:var(--f-footnote); line-height:var(--lh-footnote); color:var(--label-3) }
.vetro-esito figcaption{ margin-top:16px; text-align:center; font-size:var(--f-footnote); color:var(--label-2) }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vetro-esito__pannello{ background:rgba(255,255,255,.92) } }
@media (prefers-reduced-transparency:reduce){ .vetro-esito__pannello{ background:#fff } }
@media (prefers-color-scheme:dark){
  .vetro-esito__fondo{ background:
    radial-gradient(40% 55% at 12% 18%, rgba(23,194,74,.35), transparent 70%),
    radial-gradient(35% 50% at 88% 30%, rgba(10,122,50,.4), transparent 70%),
    radial-gradient(38% 50% at 70% 92%, rgba(255,183,64,.25), transparent 70%),
    linear-gradient(135deg, #0B1A10, #0E1411) }
  .vetro-esito__pannello{ background:linear-gradient(180deg, rgba(40,48,44,.62), rgba(28,34,31,.45));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6) }
  .vetro-esito__testa{ border-bottom-color:rgba(255,255,255,.1) }
  .vetro-esito__pill{ background:rgba(255,255,255,.08) }
  .vetro-riga{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
  .vetro-riga--ambra{ background:rgba(232,162,58,.14); box-shadow:inset 0 0 0 1px rgba(232,162,58,.3) }
}

/* frase-ponte con freccia verso la sezione sotto (home, #tribunali → #vaglio) */
.verso-giu{ display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; box-sizing:border-box;
  margin-top:clamp(28px,3vw,40px); padding:14px 14px 14px 24px; border-radius:999px;
  background:var(--tint-soft); color:var(--label); text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--tint-line); transition:background .2s ease, box-shadow .2s ease }
.verso-giu:hover{ background:#DDF5E4; box-shadow:inset 0 0 0 1px var(--tint), 0 10px 30px -18px rgba(10,122,50,.5) }
.verso-giu:focus-visible{ outline:3px solid var(--focus, var(--tint-ink)); outline-offset:3px }
.verso-giu__testo{ font-size:var(--f-body); line-height:1.4; font-weight:500 }
.verso-giu__testo b{ color:var(--tint-ink); font-weight:600 }
.verso-giu__freccia{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--tint); box-shadow:0 6px 16px -6px rgba(10,122,50,.6) }
.verso-giu__freccia svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
@media (max-width:560px){ .verso-giu{ border-radius:22px; padding:14px 14px 14px 18px } }
@media (prefers-color-scheme:dark){ .verso-giu:hover{ background:rgba(79,219,120,.16) } }

/* carte in vetro (home, #tribunali) */
.sfalsate--vetro{ position:relative; isolation:isolate }
.sfalsate--vetro > .card{ border:none; border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.40));
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.6),
    0 24px 50px -28px rgba(8,40,20,.35), 0 2px 8px rgba(8,40,20,.05) }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sfalsate--vetro > .card{ background:rgba(255,255,255,.92) } }
@media (prefers-reduced-transparency:reduce){ .sfalsate--vetro > .card{ background:var(--bg-elevated) } }
@media (prefers-color-scheme:dark){
  .sfalsate--vetro > .card{ background:linear-gradient(180deg, rgba(40,48,44,.62), rgba(28,34,31,.45));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 50px -28px rgba(0,0,0,.6) }
}

/* la tabella di confronto dentro una carta grande, col filo grigio su tutto il perimetro */
.cfr-t{ border:1px solid var(--separator-opaque, #D8DAD9); border-radius:24px; background:var(--bg-elevated); padding:8px 12px 12px }

/* le quattro famiglie di fonti, in riquadri (home, #corpus) */
.fonti-4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:clamp(36px,4vw,56px) }
.fonti-4__voce{ display:flex; flex-direction:column; gap:6px; padding:24px 22px 26px;
  border:1px solid var(--separator-opaque); border-radius:22px; background:var(--bg-elevated) }
.fonti-4__voce i{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:12px;
  border-radius:12px; background:var(--tint-soft) }
.fonti-4__voce svg{ width:22px; height:22px; fill:none; stroke:var(--tint-ink); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round }
.fonti-4__voce b{ font-size:var(--f-body); font-weight:600; letter-spacing:-.01em; color:var(--label) }
.fonti-4__voce span{ font-size:var(--f-subhead); line-height:1.45; color:var(--label-2) }
@media (max-width:980px){ .fonti-4{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ .fonti-4{ grid-template-columns:1fr } }
/* filmato con didascalia: la cornice va sul video, la didascalia resta fuori e non viene tagliata */
figure.girato--staccato{ margin-top:clamp(72px,9vw,128px); overflow:visible; background:none; box-shadow:none;
  border-radius:0; line-height:normal }
.girato--staccato video,.girato--staccato .copertina{ border-radius:var(--radius-xl); background:var(--bg-muted); box-shadow:var(--ombra) }
.girato--staccato figcaption{ padding:18px 4px 0 }
@media (max-width:700px){
  figure.girato--staccato{ aspect-ratio:auto }
  .girato--staccato video,.girato--staccato .copertina{ aspect-ratio:16/10; border-radius:0 }
  .girato--staccato figcaption{ padding-inline:var(--gutter-safe) }
}
#corpus .t-h2 .accent{ color:var(--tint-ink) }

/* ══ LexNova Chat disegnata in HTML (home, #prodotti): scala come un'immagine via cqw ══ */
.mock-chat{ margin:0; container-type:inline-size; border-radius:var(--radius-xl, 28px); overflow:hidden;
  background:#fff; aspect-ratio:16/10.4; display:flex; flex-direction:column;
  box-shadow:0 0 0 1px rgba(10,11,10,.06), 0 40px 80px -40px rgba(8,40,20,.40), 0 12px 24px -12px rgba(8,40,20,.12) }
.mock-chat svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.mock-chat__barra{ position:relative; flex:none; display:flex; align-items:center; justify-content:center;
  height:7.4cqw; background:linear-gradient(#F7F8F7,#EFF1EF); border-bottom:1px solid rgba(10,11,10,.07) }
.mock-chat__luci{ position:absolute; left:2.6cqw; display:flex; gap:1cqw }
.mock-chat__luci i{ width:1.45cqw; height:1.45cqw; border-radius:50%; background:#FF5F57 }
.mock-chat__luci i:nth-child(2){ background:#FEBC2E } .mock-chat__luci i:nth-child(3){ background:#28C840 }
.mock-chat__url{ display:flex; align-items:center; gap:.8cqw; padding:.9cqw 3.2cqw; border-radius:99px;
  background:#fff; font-size:1.55cqw; color:#5A615C; box-shadow:0 0 0 1px rgba(10,11,10,.06) }
.mock-chat__url svg{ width:1.5cqw; height:1.5cqw; color:#0A7A32 }
.mock-chat__corpo{ flex:1; display:flex; min-height:0 }
.mock-chat__rail{ flex:none; width:7.5cqw; display:flex; flex-direction:column; align-items:center; gap:2.6cqw;
  padding-top:2.4cqw; background:#fff; border-right:1px solid rgba(10,11,10,.06); color:#6B726E }
.mock-chat__rail img{ width:3.6cqw; height:3.6cqw; margin-bottom:.8cqw }
.mock-chat__rail svg{ width:2.3cqw; height:2.3cqw }
.mock-chat__main{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 6cqw; background:#FBFBFC; overflow:hidden }
.mock-chat__pro{ position:absolute; top:2.2cqw; right:2.4cqw; padding:.5cqw 1.4cqw; border-radius:99px;
  font-size:1.3cqw; font-weight:700; letter-spacing:.06em; color:#fff; background:#17C24A;
  box-shadow:0 .6cqw 1.6cqw -.6cqw rgba(23,194,74,.8) }
.mock-chat__alone{ position:absolute; left:50%; top:56%; width:70cqw; height:34cqw; translate:-50% -50%;
  background:radial-gradient(closest-side, rgba(23,194,74,.20), rgba(124,235,156,.10) 55%, transparent);
  filter:blur(1.5cqw); pointer-events:none }
.mock-chat__saluto{ position:relative; margin:0 0 3cqw; font-size:4.2cqw; font-weight:600; letter-spacing:-.03em; color:#0A0B0A }
.mock-chat__spunti{ position:relative; display:flex; gap:1.2cqw; margin-bottom:1.8cqw }
.mock-chat__spunti span{ display:flex; align-items:center; gap:.7cqw; padding:1cqw 1.8cqw; border-radius:99px;
  background:#fff; font-size:1.55cqw; color:#1C211E; box-shadow:0 0 0 1px rgba(10,11,10,.10), 0 .4cqw 1cqw -.6cqw rgba(8,40,20,.25) }
.mock-chat__spunti svg{ width:1.7cqw; height:1.7cqw; color:#0A7A32 }
.mock-chat__campo{ position:relative; display:flex; align-items:center; gap:1.6cqw; width:min(100%, 62cqw);
  padding:1.2cqw 1.2cqw 1.2cqw 1.6cqw; border-radius:99px; background:#fff;
  box-shadow:0 0 0 1px rgba(10,122,50,.22), 0 1.6cqw 4cqw -1.6cqw rgba(8,40,20,.30) }
.mock-chat__campo b{ display:grid; place-items:center; width:3.6cqw; height:3.6cqw; border-radius:50%; color:#4A514C }
.mock-chat__campo b svg{ width:2.2cqw; height:2.2cqw }
.mock-chat__campo span{ flex:1; font-size:1.8cqw; color:#8A918C }
.mock-chat__campo i{ display:grid; place-items:center; width:4cqw; height:4cqw; border-radius:50%; background:#0A0B0A; color:#fff }
.mock-chat__campo i svg{ width:2.1cqw; height:2.1cqw; stroke-width:2.2 }
.mock-chat__nota{ position:relative; margin:2.2cqw 0 0; font-size:1.35cqw; color:#8A918C }

/* ══ LexNova Open disegnata in HTML (home, #prodotti): stessa cornice di .mock-chat ══ */
.mock-open__pagina{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; align-items:center;
  padding:3.6cqw 6cqw 0; background:#FBFBFC; overflow:hidden }
.mock-open .mock-chat__alone{ top:30% }
.mock-open__occhiello{ position:relative; margin:0; font-size:1.4cqw; font-weight:600; color:#0A7A32 }
.mock-open__titolo{ position:relative; margin:.8cqw 0 2.4cqw; font-size:4cqw; font-weight:700; letter-spacing:-.035em; line-height:1.05; color:#0A0B0A; text-align:center }
.mock-open__titolo em{ font-style:normal; color:#0A7A32 }
.mock-open__cerca{ position:relative; display:flex; align-items:center; gap:1.2cqw; width:min(100%,58cqw);
  padding:1.5cqw 2cqw; border-radius:99px; background:#fff; font-size:1.55cqw; color:#8A918C;
  box-shadow:0 0 0 1px rgba(10,122,50,.22), 0 1.6cqw 4cqw -1.6cqw rgba(8,40,20,.30) }
.mock-open__cerca svg{ width:2cqw; height:2cqw; color:#4A514C }
.mock-open__griglia{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4cqw; width:100%; margin-top:3cqw }
.mock-open__griglia span{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:1.3cqw; align-items:center;
  padding:1.5cqw 1.6cqw; border-radius:1.8cqw; background:#fff;
  box-shadow:0 0 0 1px rgba(10,11,10,.07), 0 .8cqw 2cqw -1.2cqw rgba(8,40,20,.25) }
.mock-open__griglia i{ grid-row:1 / 3; display:grid; place-items:center; width:3.6cqw; height:3.6cqw; border-radius:1cqw; background:#E9FBEF; color:#0A7A32 }
.mock-open__griglia svg{ width:2cqw; height:2cqw }
.mock-open__griglia b{ font-size:1.55cqw; font-weight:600; color:#0A0B0A; line-height:1.2 }
.mock-open__griglia small{ font-size:1.2cqw; color:#8A918C; line-height:1.3 }
.mock-open__cifre{ position:relative; display:flex; gap:4cqw; margin-top:2.6cqw; font-size:1.3cqw; color:#6B726E }
.mock-open__cifre b{ font-size:1.7cqw; color:#0A0B0A; margin-right:.4cqw }

/* ══ LexNova Studio disegnato in HTML (home, #prodotti): stessa cornice di .mock-chat ══ */
.mock-studio__lato{ flex:none; width:21cqw; padding:2.4cqw 1.6cqw; background:#fff; border-right:1px solid rgba(10,11,10,.06) }
.mock-studio__marchio{ display:flex; align-items:center; gap:1cqw; margin:0 0 1.8cqw .6cqw }
.mock-studio__marchio img{ width:3cqw; height:3cqw }
.mock-studio__marchio span{ font-size:1.9cqw; font-weight:700; letter-spacing:-.02em; color:#0A0B0A; line-height:1 }
.mock-studio__marchio small{ display:block; margin-top:.3cqw; font-size:.95cqw; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A918C }
.mock-studio__gruppo{ margin:1.4cqw 0 .5cqw .8cqw; font-size:.95cqw; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#9AA19C }
.mock-studio__voce{ display:flex; align-items:center; gap:1.1cqw; padding:.85cqw .8cqw; border-radius:1cqw; font-size:1.35cqw; color:#3C433E }
.mock-studio__voce svg{ width:1.9cqw; height:1.9cqw; color:#0A7A32 }
.mock-studio__voce.on{ background:#E9FBEF; color:#0A0B0A; font-weight:600 }
.mock-studio__main{ flex:1; min-width:0; display:flex; flex-direction:column; background:#F4F5F4; overflow:hidden }
.mock-studio__testa{ flex:none; display:flex; align-items:center; gap:1.4cqw; padding:1.4cqw 2.2cqw; background:#fff; border-bottom:1px solid rgba(10,11,10,.06) }
.mock-studio__testa > svg{ width:1.9cqw; height:1.9cqw; color:#6B726E }
.mock-studio__testa b{ flex:1; min-width:0; font-size:1.5cqw; font-weight:600; color:#0A0B0A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mock-studio__salvato{ display:flex; align-items:center; gap:.4cqw; font-size:1.15cqw; color:#0A7A32 }
.mock-studio__salvato svg{ width:1.4cqw; height:1.4cqw; stroke-width:2.4 }
.mock-studio__ai{ display:flex; align-items:center; gap:.6cqw; padding:.8cqw 1.4cqw; border-radius:99px; font-size:1.2cqw; font-weight:600;
  color:#fff; background:linear-gradient(135deg,#7C4DFF,#5B3BE0); box-shadow:0 .6cqw 1.6cqw -.6cqw rgba(91,59,224,.7) }
.mock-studio__ai svg{ width:1.5cqw; height:1.5cqw }
.mock-studio__foglio{ margin:2.6cqw auto 0; width:76%; flex:1; padding:3cqw 3.6cqw; background:#fff; border-radius:1.2cqw 1.2cqw 0 0;
  box-shadow:0 0 0 1px rgba(10,11,10,.05), 0 2cqw 4cqw -2cqw rgba(8,40,20,.25) }
.mock-studio__foglio p{ margin:0 0 1.1cqw; font-size:1.18cqw; line-height:1.6; color:#2A302C }
.mock-studio__foglio .mock-studio__h{ margin-bottom:1.8cqw; font-size:2cqw; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#0A0B0A }
.mock-studio__foglio .mock-studio__h2{ margin:1.6cqw 0 .8cqw; font-size:1.3cqw; font-weight:700; color:#0A0B0A }
.mock-studio__foglio mark{ padding:.1cqw .6cqw; border-radius:.5cqw; background:#FFF1D6; color:#8A5A00; font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(232,162,58,.45) }
.mock-studio__righe{ display:grid; gap:.9cqw; margin-top:1.2cqw !important }
.mock-studio__righe i{ display:block; height:.9cqw; width:100%; border-radius:99px; background:#ECEEEC }

/* ══ Come si usa: tre passaggi in vetro su un fondo sfumato (home, #uso) ══ */
.vetro-passi{ position:relative; margin-top:clamp(40px,5vw,64px); padding:clamp(20px,3.6vw,48px);
  border-radius:var(--radius-xl, 28px); overflow:hidden; isolation:isolate }
.vp-lista{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,32px);
  margin:0; padding:0; list-style:none; counter-reset:none }
/* il filo che lega i tre passaggi, all'altezza dei numeri */
.vp-lista::before{ content:""; position:absolute; left:8%; right:8%; top:calc(clamp(20px,2.4vw,28px) + 22px); height:2px; z-index:0;
  background:repeating-linear-gradient(90deg, rgba(10,122,50,.45) 0 8px, transparent 8px 14px) }
.vp-passo{ position:relative; z-index:1; display:flex; flex-direction:column; padding:clamp(20px,2.4vw,28px);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.6),
    0 30px 60px -32px rgba(8,40,20,.40), 0 2px 8px rgba(8,40,20,.06) }
.vp-testa{ display:flex; align-items:center; justify-content:space-between }
.vp-n{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--tint); color:#fff; font-weight:700; font-size:1.05rem;
  box-shadow:0 0 0 6px rgba(255,255,255,.75), 0 8px 18px -8px rgba(10,122,50,.7) }
.vp-ico{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 1px rgba(10,122,50,.15); color:var(--tint-ink) }
.vp-ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.vp-passo h3{ margin:18px 0 8px; font-size:var(--f-title3, 1.25rem); line-height:1.25; font-weight:600; letter-spacing:-.015em; color:var(--label) }
.vp-passo p{ margin:0; font-size:var(--f-subhead); line-height:1.5; color:var(--label-2) }
/* le piccole illustrazioni */
.vp-illo{ margin-top:20px; padding:14px; border-radius:16px; background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 3px rgba(8,40,20,.06); min-height:96px; box-sizing:border-box }
.vp-illo--doc{ display:grid; gap:8px; align-content:start }
.vp-illo--doc span{ display:block; height:8px; width:100%; border-radius:99px; background:#E4E8E5 }
.vp-illo--doc b{ justify-self:start; margin-top:4px; padding:4px 10px; border-radius:99px; font-size:.75rem; font-weight:600;
  color:var(--tint-ink); background:var(--tint-soft) }
.vp-illo--vaglio{ display:grid; gap:7px }
.vp-illo--vaglio span{ display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:500; color:var(--label) }
.vp-illo--vaglio i{ display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; font-style:normal;
  font-size:.7rem; font-weight:700; color:var(--tint-ink); background:var(--tint-soft); box-shadow:inset 0 0 0 1px var(--tint-line) }
.vp-illo--esito{ display:grid; gap:8px; align-content:center }
.vp-illo--esito span{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:12px;
  font-size:.8125rem; font-weight:600 }
.vp-illo--esito b{ display:grid; place-items:center; min-width:22px; height:22px; border-radius:99px; font-size:.75rem; color:#fff }
.vp-illo--esito .ok{ color:var(--tint-ink); background:var(--tint-soft) } .vp-illo--esito .ok b{ background:var(--tint) }
.vp-illo--esito .amb{ color:var(--ambra-ink); background:var(--ambra-soft) } .vp-illo--esito .amb b{ background:#E8A23A }
@media (max-width:900px){
  .vp-lista{ grid-template-columns:1fr }
  .vp-lista::before{ left:calc(clamp(20px,2.4vw,28px) + 21px); right:auto; top:6%; bottom:6%; width:2px; height:auto;
    background:repeating-linear-gradient(180deg, rgba(10,122,50,.45) 0 8px, transparent 8px 14px) }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .vp-passo{ background:rgba(255,255,255,.92) } }
@media (prefers-reduced-transparency:reduce){ .vp-passo{ background:#fff } }
@media (prefers-color-scheme:dark){
  .vp-passo{ background:linear-gradient(180deg, rgba(40,48,44,.62), rgba(28,34,31,.45));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6) }
  .vp-n{ box-shadow:0 0 0 6px rgba(255,255,255,.08) }
  .vp-ico, .vp-illo{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
  .vp-illo--doc span{ background:rgba(255,255,255,.12) }
}

/* ══ La riservatezza: il percorso dei dati, dal computer al server e al modello (home, #dati) ══ */
.dt-render{ position:relative; margin-top:clamp(40px,5vw,64px); padding:clamp(24px,4vw,52px) clamp(18px,3vw,40px);
  border-radius:var(--radius-xl, 28px); overflow:hidden; isolation:isolate }
.dt-percorso{ display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr) 72px minmax(0,1fr);
  align-items:start; margin:0; padding:0; list-style:none }
.dt-nodo{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 16px 24px; border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.44));
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.6),
    0 30px 60px -32px rgba(8,40,20,.40), 0 2px 8px rgba(8,40,20,.06) }
.dt-icona{ position:relative; display:grid; place-items:center; width:76px; height:76px; margin-bottom:14px; border-radius:22px;
  background:#fff; color:var(--tint-ink); box-shadow:inset 0 0 0 1px rgba(10,122,50,.14), 0 12px 24px -14px rgba(8,40,20,.45) }
.dt-icona > svg:not(.dt-ue){ position:relative; width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.dt-nodo--srv .dt-icona{ background:#0B3D91; color:#fff; box-shadow:0 14px 28px -14px rgba(11,61,145,.8) }
.dt-nodo--srv .dt-icona > svg:not(.dt-ue){ width:26px; height:26px }
.dt-ue{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); fill:#FFCC00 }
.dt-nodo--ai .dt-icona{ color:#5B3BE0; box-shadow:inset 0 0 0 1px rgba(91,59,224,.18), 0 12px 24px -14px rgba(91,59,224,.5) }
.dt-nodo h3{ margin:0 0 6px; font-size:var(--f-body); font-weight:600; letter-spacing:-.01em; color:var(--label) }
.dt-nodo p{ margin:0; font-size:var(--f-footnote); line-height:1.45; color:var(--label-2) }
/* i fili fra un nodo e l'altro, con il pacchetto che li percorre */
.dt-filo{ position:relative; align-self:start; height:2px; margin-top:60px }
.dt-filo span{ position:absolute; inset:0 -6px; background:repeating-linear-gradient(90deg, rgba(10,122,50,.55) 0 6px, transparent 6px 11px) }
.dt-filo i{ position:absolute; top:50%; left:-6px; width:10px; height:10px; margin-top:-5px; border-radius:50%;
  background:var(--tint); box-shadow:0 0 0 4px rgba(23,194,74,.22), 0 0 14px rgba(23,194,74,.8);
  animation:dt-va 2.4s cubic-bezier(.45,0,.55,1) infinite }
.dt-filo:nth-of-type(4) i{ animation-delay:.8s } .dt-filo:nth-of-type(6) i{ animation-delay:1.6s }
.dt-filo--doppio span{ inset:-4px -6px auto; height:2px }
.dt-filo--doppio::after{ content:""; position:absolute; left:-6px; right:-6px; top:6px; height:2px;
  background:repeating-linear-gradient(90deg, rgba(91,59,224,.45) 0 6px, transparent 6px 11px) }
.dt-filo--doppio i{ margin-top:-9px }
.dt-filo--doppio i.dt-ritorno{ left:auto; right:-6px; margin-top:2px; background:#7C4DFF;
  box-shadow:0 0 0 4px rgba(124,77,255,.2), 0 0 14px rgba(124,77,255,.7); animation-name:dt-torna; animation-delay:1.2s }
@keyframes dt-va{ 0%{ left:-6px; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ left:calc(100% - 4px); opacity:0 } }
@keyframes dt-torna{ 0%{ right:-6px; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ right:calc(100% - 4px); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .dt-filo i{ animation:none; opacity:0 } }
.dt-note{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin-top:clamp(24px,3vw,36px) }
.dt-note span{ display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:99px; font-size:var(--f-footnote); color:var(--label);
  background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8) }
.dt-note svg{ flex:none; width:16px; height:16px; fill:none; stroke:var(--tint-ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
/* sotto i 1000px il percorso scende dall'alto in basso */
@media (max-width:1000px){
  .dt-percorso{ grid-template-columns:1fr; justify-items:center }
  .dt-nodo{ width:min(100%, 420px); box-sizing:border-box }
  .dt-filo{ width:2px; height:44px; margin:0 }
  .dt-filo span{ inset:-4px 0; background:repeating-linear-gradient(180deg, rgba(10,122,50,.55) 0 6px, transparent 6px 11px) }
  .dt-filo i{ left:50%; top:-6px; margin:0 0 0 -5px; animation-name:dt-giu }
  .dt-filo--doppio{ width:16px }
  .dt-filo--doppio span{ inset:-4px auto -4px 0; width:2px; height:auto }
  .dt-filo--doppio::after{ left:auto; right:0; top:-4px; bottom:-4px; width:2px; height:auto;
    background:repeating-linear-gradient(180deg, rgba(91,59,224,.45) 0 6px, transparent 6px 11px) }
  .dt-filo--doppio i{ left:1px; margin:0 0 0 -4px }
  .dt-filo--doppio i.dt-ritorno{ left:auto; right:1px; top:auto; bottom:-6px; margin:0 -4px 0 0; animation-name:dt-su }
}
@keyframes dt-giu{ 0%{ top:-6px; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ top:calc(100% - 4px); opacity:0 } }
@keyframes dt-su{ 0%{ bottom:-6px; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ bottom:calc(100% - 4px); opacity:0 } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .dt-nodo{ background:rgba(255,255,255,.92) } }
@media (prefers-color-scheme:dark){
  .dt-nodo{ background:linear-gradient(180deg, rgba(40,48,44,.62), rgba(28,34,31,.45));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6) }
  .dt-icona{ background:rgba(255,255,255,.08); color:#4FDB78 }
  .dt-note span{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
}