/* ============================================================================
   PsicoVoice — sito vetrina (statico).
   Design system rispecchiato da frontend/src/styles/theme.css: stessa palette
   "clinico-contabile" (teal + panna fumato), stessi font, stesse forme morbide.
   Font SELF-HOSTED (assets/fonts): nessuna chiamata a Google Fonts, per conformità
   GDPR — l'IP del visitatore non viene inviato a terzi.
   ========================================================================== */

/* --- Font self-hosted --- */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }

:root {
  /* Palette — allineata a theme.css */
  --ink: #15302E;
  --ink-soft: #2B4A47;
  --primary: #0E8C82;
  --primary-deep: #0B6E66;
  --primary-soft: #DEEDE8;
  --accent: #1FB9AC;
  --paper: #F2EFE7;
  --card: #FBFAF6;
  --cream: #EFEADD;
  --cream-soft: #F6F2E9;
  --line: #E6E0D2;
  --line-soft: #EFEBE0;
  --muted: #556865; /* verde-grigio brand, scurito quanto basta per l'AA (≥4.5) su card e paper */
  --honey: #E8A04B;
  --honey-soft: #FBEFD9;
  /* PERCHÉ QUESTI VALORI SI SCOSTANO DAL BRAND BOOK — e perché non è un'infrazione.
     Il brand book calibra la palette sulle GRAFICHE 1080, dove §4 impone «mai sotto
     24px»: a quella dimensione la soglia WCAG è 3:1 e i colori del libro la reggono
     (il verde su card dà 3.04). Nel prodotto il corpo del testo sta a 13-16px, dove
     la soglia è 4.5:1 — e lì gli stessi colori non bastano. Non sono due palette in
     disaccordo: sono due mezzi con soglie diverse. `campagna/assets/brand.css`, che
     serve alle grafiche, resta infatti ai valori del libro.

     BADGE PIENI: §3 assegna i badge al PRIMARY («Primary #0E8C82 — CTA, link, badge»)
     e riserva l'accent a «gradienti, highlight su scuro»: un accent come fondo pieno
     su pagina chiara era già fuori dal libro, oltre che a 2.44:1 col testo bianco. Si
     usa --primary-deep (6.11:1), che il libro destina agli highlight di testo. Il
     --primary puro darebbe 4.12:1, sotto soglia.

     Verde e terracotta sono usati soprattutto come TESTO e come icone su fondi chiari:
     ai valori originali (#2BA37A, #C8553D) restavano sotto il 4.5:1 richiesto dalla
     WCAG 1.4.3. Scuriti quanto basta per stare sopra la soglia con margine — stessa
     scelta già fatta a suo tempo per --muted, e stessa tinta: cambia la leggibilità,
     non l'identità. Su fondo chiaro il verde dà 5.0:1 (green-soft) e 5.7:1 (card).
     Il verde serve anche da SFONDO alla striscia newsletter con testo bianco: scurirlo
     sistema pure quella (era 3.17:1). */
  --green: #1E7154;
  --green-soft: #DBF1E7;
  --clay: #A94833;
  --clay-soft: #F7E2DB;
  /* Bruno delle etichette "Beta"/honey su fondo miele: era var(--honey-ink) (4.43:1). */
  --honey-ink: #8F5C10;

  --font-display: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------------------------------------------------------------------------
     FORMA E PROFONDITÀ — stesso sistema della webapp (frontend/src/styles/theme.css).

     I due fogli sono separati e devono restarlo (il sito non carica React), ma la
     grammatica dev'essere UNA: chi passa dalla vetrina all'app non deve accorgersi di
     aver cambiato materiale. Se qui si toccano i valori, si toccano anche là.

     Sul sito i contenitori sono più grandi e più radi, quindi la scala ha un gradino in
     più (`--r-xl`, per le sezioni-manifesto dell'hero) che nell'app non serve.
     --------------------------------------------------------------------------- */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --radius: var(--r-lg);
  --radius-lg: var(--r-xl);
  --radius-sm: var(--r);

  /* La luce e la materia: il punto in cui si innesterebbe un tema scuro. L'ombra è
     TINTA d'inchiostro, non grigia — su carta calda il grigio neutro sporca. */
  --ombra-tinta: 21, 48, 46;
  --luce-bordo: rgba(255, 255, 255, .62);
  --filo-luce: inset 0 1px 0 var(--luce-bordo);

  /* Elevazione per SIGNIFICATO, non per dimensione: sul sito i piani sono meno, ma la
     regola è la stessa — chi scrive una regola sceglie il piano, non l'intensità. */
  --elev-appoggiata: 0 1px 2px rgba(var(--ombra-tinta), .05);
  --elev-superficie: 0 1px 2px rgba(var(--ombra-tinta), .05), 0 8px 20px rgba(var(--ombra-tinta), .06);
  --elev-sollevata: 0 2px 4px rgba(var(--ombra-tinta), .06), 0 16px 36px rgba(var(--ombra-tinta), .12);
  --elev-fluttuante: 0 4px 8px rgba(var(--ombra-tinta), .07), 0 22px 48px rgba(var(--ombra-tinta), .14);
  --elev-premuta: inset 0 2px 4px rgba(var(--ombra-tinta), .10);

  /* Alias storici: le 54 occorrenze esistenti guadagnano il piano giusto senza
     toccarle una per una. */
  --shadow-sm: var(--elev-superficie);
  --shadow: var(--elev-superficie);
  --shadow-hover: var(--elev-sollevata);

  /* La carta: mezzo punto di luminosità dall'alto al basso. Impercettibile da fermi, ed
     è ciò che separa «rettangolo chiaro» da «foglio». */
  --carta: linear-gradient(180deg, #FCFBF8 0%, var(--card) 100%);

  --nav-h: 70px;
  --maxw: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--topstrip-h, 0px) + 12px); }
body {
  margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6;
  /* `clip` contiene l'overflow orizzontale senza trasformare il body in un
     secondo contenitore di scroll (cosa che `hidden` fa forzando overflow-y:auto):
     evita il doppio scrollbar e il layout "spostato a destra" su Chrome. */
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ink); line-height: 1.1; }
p { margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Skip link ----------
   Scorciatoia da tastiera verso il contenuto, iniettata da layout.js come primo nodo
   del body. Invisibile finché non riceve il fuoco, poi compare come un elemento
   normale. Stesse regole della webapp (frontend/src/styles/theme.css), con i token
   del sito. NON usare `display:none` né `visibility:hidden`: toglierebbero il link
   anche allo screen reader, cioè proprio a chi serve.
   Il <main> bersaglio ha `tabindex="-1"`, così il salto sposta anche il fuoco. */
.sr-only-focusable:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  display: inline-flex; align-items: center; height: 46px; padding: 0 18px;
  border-radius: var(--radius-sm); background: var(--card); color: var(--primary-deep);
  border: 2px solid var(--primary); font-weight: 600; font-size: 15px;
  box-shadow: var(--shadow);
}
/* Il <main> riceve il fuoco solo programmaticamente (tabindex=-1): senza questo,
   Chrome gli disegna intorno un contorno grande quanto la pagina. */
main:focus { outline: none; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 92px 0; position: relative; }
.section.tight { padding: 64px 0; }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary-deep); background: var(--primary-soft);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
}
.section-title { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.section-lead { font-size: 18px; color: var(--ink-soft); max-width: 620px; }
.center .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 24px; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 600; font-size: 15.5px; white-space: nowrap;
  /* Filo di luce sul bordo alto: è la differenza fra un rettangolo colorato e un tasto.
     Sul sito conta di più che nell'app, perché qui i bottoni sono grandi e isolati. */
  box-shadow: var(--filo-luce), var(--elev-appoggiata);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
/* La pressione. I bottoni del sito salivano in hover (`translateY(-2px)`) e non
   scendevano al clic: metà del gesto. Su una CTA grande la mancanza si sente. */
.btn:active { transform: translateY(1px); box-shadow: var(--elev-premuta); }
.btn svg { width: 18px; height: 18px; }
/* Ingresso diretto nell'hero: è l'unica azione della pagina, e deve pesare come tale.
   Nasce con l'apertura della beta — prima il posto d'onore era il modulo email, perché
   l'email consegnava la chiave; senza chiave quel campo è un pedaggio, e il bottone che
   porta dentro prende il suo posto. Più alto e più largo del `.btn` normale: non per
   gridare, ma perché accanto non c'è più nient'altro da confrontare. */
.btn-lg { height: 58px; padding: 0 34px; font-size: 17px; border-radius: var(--r); }
.hero-entra { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
/* Nell'hero centrato di /beta il bottone sta al centro, come ci stava il modulo email.
   Il contenitore è `.wrap.center`: si aggancia a quello e basta. C'era un `:has()` con
   tre selettori alternativi, scritto senza guardare il markup — due dei tre non
   corrispondevano a niente, e il terzo faceva il lavoro da solo. */
.center .hero-entra { justify-content: center; }
/* La seconda strada (kit via email) è visivamente subordinata: un filo che la separa,
   niente riquadro. Un box le darebbe lo stesso peso dell'ingresso, e tornerebbe a
   sembrare una scelta fra due cose invece che un ripiego per chi non è pronto. */
.hero-oppure { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
@media (max-width: 640px) {
  .btn-lg { height: 54px; padding: 0 24px; font-size: 16px; width: 100%; }
  .hero-entra { justify-content: center; }
}
.btn-primary { background: linear-gradient(180deg, var(--accent) -30%, var(--primary) 75%); color: #fff; border-color: var(--primary-deep); box-shadow: 0 4px 14px rgba(14,140,130,.30); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,140,130,.32); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-light:hover { background: rgba(255,255,255,.22); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: var(--r); }
.btn-block { width: 100%; }

/* ---------- Navbar ---------- */
.nav {
  /* `top` non è 0 ma la parte ancora scoperta della striscia newsletter (--topstrip-h,
     misurata e aggiornata allo scroll da layout.js): senza, la barra le si sovrappone e
     la striscia non si vede mai. A striscia assente o già scorsa via il valore è 0. */
  position: fixed; top: var(--topstrip-h, 0px); left: 0; right: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(242,239,231,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.nav.scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Il logo porta alla home, ma non lo dichiarava: nessuno stato al passaggio del
   mouse lo faceva leggere come un'immagine ferma. Ora ha volume (luce in alto,
   ombra propria) e si comporta come un tasto: si alza sotto il puntatore e si
   abbassa al click. Le transizioni sono già azzerate da prefers-reduced-motion. */
.brand { display: flex; align-items: center; gap: 11px; border-radius: var(--r); }
.brand-badge {
  width: 40px; height: 40px; border-radius: var(--r); flex-shrink: 0;
  background: linear-gradient(150deg, var(--accent), var(--primary));
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(31,185,172,.35),
              inset 0 1px 0 rgba(255,255,255,.34),
              inset 0 -1px 0 rgba(0,0,0,.10);
  transition: transform .16s ease, box-shadow .16s ease;
}
.brand:hover .brand-badge {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(31,185,172,.48),
              inset 0 1px 0 rgba(255,255,255,.40),
              inset 0 -1px 0 rgba(0,0,0,.10);
}
.brand:active .brand-badge {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(31,185,172,.40),
              inset 0 1px 0 rgba(255,255,255,.22),
              inset 0 -1px 0 rgba(0,0,0,.10);
}
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brand-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.05; transition: color .16s ease; }
.brand:hover .brand-name { color: var(--primary-deep); }
.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-links a {
  padding: 9px 12px; border-radius: var(--r); font-weight: 500; font-size: 15px; color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: rgba(14,140,130,.08); color: var(--primary-deep); }
/* Voci in risalto (Calcolatore, Beta): pill colorata sempre visibile. */
.nav-links a.hot { background: var(--honey-soft); color: var(--honey-ink); font-weight: 700; }
.nav-links a.hot:hover { background: var(--honey); color: #3a2408; }
.nav-links a.hot.active { background: var(--primary-soft); color: var(--primary-deep); }
/* Menu a tendina "Risorse" nella navbar. */
.nav-dd { position: relative; }
.nav-dd-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border: 0; background: transparent;
  border-radius: var(--r); font-weight: 500; font-size: 15px; color: var(--ink-soft); cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s;
}
.nav-dd-toggle:hover, .nav-dd.active .nav-dd-toggle { background: rgba(14,140,130,.08); color: var(--primary-deep); }
.nav-dd-caret { transition: transform .2s; }
.nav-dd.open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px; z-index: 60;
}
.nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.nav-dd-menu a:hover { background: rgba(14,140,130,.08); color: var(--primary-deep); }
.nav-dd-menu a.active { background: var(--primary-soft); color: var(--primary-deep); }
@media (min-width: 1025px) { .nav-dd:hover .nav-dd-menu { display: block; } }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.nav-burger span { display: block; width: 18px; height: 2px; margin: 3px auto; background: var(--ink); border-radius: 2px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--nav-h) + 74px) 0 90px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 88% 4%, var(--green-soft) 0%, transparent 60%),
    radial-gradient(50% 50% at 4% 96%, var(--honey-soft) 0%, transparent 55%);
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.6vw, 62px); font-weight: 800; letter-spacing: -.03em; }
.hero h1 .hl { color: var(--primary-deep); position: relative; white-space: nowrap; }
.hero-lead { font-size: 19.5px; color: var(--ink-soft); margin: 22px 0 30px; max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* "Accedi": pensato per chi ha già una chiave d'invito — più evidente di un ghost. */
.btn-accedi { background: #fff; color: var(--primary-deep); border: 1.5px solid var(--primary); box-shadow: var(--shadow-sm); }
.btn-accedi:hover { background: var(--primary-soft); border-color: var(--primary-deep); }
.hero-accedi-nota { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 62ch; }
.center .hero-accedi-nota { margin-left: auto; margin-right: auto; }
.hero-accedi-nota a { color: var(--primary-deep); font-weight: 600; text-decoration: none; }
.hero-accedi-nota a:hover { text-decoration: underline; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; }
.hero-trust .t { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); font-weight: 500; }
.hero-trust .t svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }

/* Mockup dell'app nell'hero */
.hero-visual { position: relative; }
.mock {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; transform: rotate(1.2deg);
}
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); background: var(--cream-soft); }
/* Schermata reale del prodotto dentro la finta finestra del browser. width/height
   nell'<img> tengono il rapporto e riservano lo spazio: niente salto del layout al
   caricamento (CLS). Ha sostituito il mockup schematico .mock-body/-side/-main. */
.mock-shot { display: block; width: 100%; height: auto; }

/* Schermate del prodotto nelle pagine di contenuto. width/height sull'<img>
   riservano lo spazio prima del caricamento: nessun salto del layout. */
.shot { margin: 34px auto 0; max-width: 940px; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); background: var(--card);
}
.shot figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--ink-soft); }
.shot figcaption strong { color: var(--ink); }
@media (max-width: 720px) { .shot { margin-top: 24px; } .shot figcaption { font-size: 13px; text-align: left; } }
.mock-dot { width: 11px; height: 11px; border-radius: 50%; }
.hero-badge {
  position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600;
}
.hero-badge .ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; }
.hero-badge.b1 { top: 8%; left: -26px; }
.hero-badge.b2 { bottom: 10%; right: -18px; }

/* ---------- Loghi / social proof ---------- */
.proof { padding: 34px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--cream-soft); }
.proof p { text-align: center; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 18px; }
.proof-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; opacity: .8; }
.proof-item {
  display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink-soft);
  font-family: var(--font-display); font-size: 17px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 7px 14px 7px 8px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.proof-item:hover { background: var(--card); border-color: var(--line-soft); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.proof-item[aria-expanded="true"] { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); }
.pi-ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; background: var(--primary-soft); color: var(--primary-deep); }
.pi-ic svg { width: 17px; height: 17px; }
.proof-item.honey .pi-ic { background: var(--honey-soft); color: var(--honey-ink); }
.proof-item.green .pi-ic { background: var(--green-soft); color: var(--green); }
.proof-item.clay .pi-ic { background: var(--clay-soft); color: var(--clay); }

/* ---------- Social follow (contatti) ---------- */
.social-follow { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.social-follow h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; color: var(--ink); }
.social-follow p { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.social-row { display: flex; gap: 12px; flex-wrap: wrap; }
.social-btn {
  display: inline-flex; align-items: center; gap: 11px; padding: 9px 20px 9px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.15;
  color: var(--ink-soft); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.social-btn.ig:hover { border-color: #D92E7F; }
.social-btn.fb:hover { border-color: #1877F2; }
.social-btn .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.social-btn.ig .ic { background: radial-gradient(circle at 28% 110%, #FDB443 0%, #F75E3E 32%, #D92E7F 62%, #9B36B7 92%); }
.social-btn.fb .ic { background: #1877F2; }
.social-btn small { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 11.5px; color: var(--muted); }

/* ---------- Ecosistema: anteprima grafica delle funzioni ---------- */
.eco-preview { max-width: 760px; margin: 24px auto 0; }
.eco-preview[hidden], .eco-card[hidden] { display: none; }
.eco-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 20px; animation: ecoIn .25s ease;
}
@keyframes ecoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.eco-info h3 { font-family: var(--font-display); font-size: 19px; margin-bottom: 8px; color: var(--ink); }
.eco-info p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 12px; text-transform: none; letter-spacing: normal; text-align: left; font-weight: 400; }
.eco-link { font-weight: 700; font-size: 14px; color: var(--primary-deep); text-decoration: none; }
.eco-link:hover { text-decoration: underline; }
.eco-mock { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.eco-bar { display: flex; align-items: center; gap: 5px; padding: 8px 11px; border-bottom: 1px solid var(--line-soft); background: var(--cream-soft); }
.eco-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.eco-bar span { margin-left: 7px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.eco-body { padding: 13px; display: flex; flex-direction: column; gap: 9px; }
/* elementi condivisi dei mini-mockup */
.eco-lines { display: block; flex: 1; min-width: 0; }
.eco-lines i { display: block; height: 7px; border-radius: 4px; background: var(--cream); margin: 5px 0; }
.eco-lines.full i { background: var(--cream); }
.eco-lock { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.eco-lock.green { color: var(--green); }
/* pazienti */
.eco-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 7px 10px; }
.eco-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 10.5px; font-weight: 700; font-family: var(--font-mono); background: var(--primary-soft); color: var(--primary-deep); }
.eco-av.honey { background: var(--honey-soft); color: var(--honey-ink); }
.eco-av.clay { background: var(--clay-soft); color: var(--clay); }
.eco-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); white-space: nowrap; }
.eco-tag.green { background: var(--green-soft); color: var(--green); }
.eco-tag.honey { background: var(--honey-soft); color: var(--honey-ink); }
/* agenda */
.eco-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.eco-cal .h { font-size: 9.5px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.eco-cal .c { min-height: 34px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 3px; }
.eco-cal .ev { display: block; font-size: 8.5px; font-weight: 700; line-height: 1.25; border-radius: var(--r-sm); padding: 3px 5px; background: var(--primary-soft); color: var(--primary-deep); }
.eco-cal .ev.honey { background: var(--honey-soft); color: var(--honey-ink); }
.eco-cal .ev.green { background: var(--green-soft); color: var(--green); }
/* fatture */
.eco-doc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); border-bottom: 1px dashed var(--line-soft); padding-bottom: 6px; }
.eco-doc-row b { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.eco-doc-tot { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.eco-doc-tot b { font-family: var(--font-mono); margin-left: auto; }
.eco-stamp { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green); border: 1.5px solid var(--green); border-radius: var(--r-sm); padding: 2px 6px; transform: rotate(-3deg); }
/* gdpr */
.eco-sign { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 8px; font-size: 10.5px; color: var(--muted); }
.eco-sign svg { color: var(--ink-soft); flex-shrink: 0; }
/* dashboard */
.eco-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.eco-stats > div { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 8px 10px; }
.eco-stats b { display: block; font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.eco-stats span { font-size: 9.5px; color: var(--muted); }
.eco-chart { display: flex; align-items: flex-end; gap: 6px; height: 84px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 9px; }
.eco-chart i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), var(--primary)); opacity: .9; }
/* email */
.eco-mail-row { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.eco-mail-row i { display: block; height: 7px; border-radius: 4px; background: var(--cream); }
.eco-mail-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.eco-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--ink-soft); background: var(--cream-soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 9px; }
.eco-send { font-size: 11px; font-weight: 700; color: #fff; background: var(--primary); border-radius: 999px; padding: 5px 14px; }
@media (max-width: 720px) {
  .eco-card { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .proof-item { font-size: 15.5px; padding: 6px 11px 6px 7px; }
}

/* ---------- Come funziona (step) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.step-num {
  width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; margin-bottom: 16px;
  font-family: var(--font-mono); font-weight: 600; font-size: 17px; color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--primary)); box-shadow: 0 4px 12px rgba(14,140,130,.28);
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- Funzionalità (grid) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.feature-ic { width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center; margin-bottom: 16px; background: var(--primary-soft); color: var(--primary-deep); }
.feature-ic svg { width: 26px; height: 26px; }
.feature.honey .feature-ic { background: var(--honey-soft); color: var(--honey-ink); }
.feature.green .feature-ic { background: var(--green-soft); color: var(--green); }
.feature.clay .feature-ic { background: var(--clay-soft); color: var(--clay); }
.feature h3 { font-size: 19px; margin-bottom: 8px; }
.feature p { color: var(--ink-soft); font-size: 15px; }

/* Schede funzione cliccabili: aprono l'anteprima grafica (vedi [data-feat] in site.js). */
button.feature { width: 100%; display: block; text-align: left; font: inherit; color: inherit; cursor: pointer; position: relative; }
button.feature:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,185,172,.30); }
.feature[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-hover); }
.feature-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--primary-deep); }
.feature-more svg { width: 15px; height: 15px; transition: transform .2s ease; }
.feature[aria-expanded="true"] .feature-more svg { transform: rotate(180deg); }
.feature[aria-expanded="true"] .feature-more { color: var(--accent); }
.feature.honey .feature-more { color: var(--honey-ink); }
.feature.green .feature-more { color: var(--green); }
.feature.clay .feature-more { color: var(--clay); }
/* Host dell'anteprima sotto la griglia: entra con un lieve fade. */
.eco-preview[data-feat-host] { animation: ecoIn .22s ease; }
@keyframes ecoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Split "per chi è" ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split.rev .split-media { order: 2; }
.audience { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.aud-item { display: flex; gap: 14px; align-items: flex-start; }
.aud-ic { width: 42px; height: 42px; border-radius: var(--r); flex-shrink: 0; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--primary-deep); }
.aud-item h3 { font-size: 17px; margin-bottom: 3px; }
.aud-item p { color: var(--ink-soft); font-size: 15px; }
.media-card {
  position: relative; border-radius: var(--radius-lg); padding: 40px; overflow: hidden;
  background: linear-gradient(150deg, var(--ink), var(--primary-deep)); color: #fff; min-height: 320px;
  display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow);
}
.media-card .quote { font-family: var(--font-display); font-size: 24px; line-height: 1.35; font-weight: 600; position: relative; z-index: 1; }
.media-card .who { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.72); position: relative; z-index: 1; }

/* ---------- Sicurezza / GDPR ---------- */
.security { background: linear-gradient(180deg, var(--cream-soft), var(--paper)); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
.sec-item { display: flex; gap: 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.sec-ic { width: 46px; height: 46px; border-radius: var(--r); flex-shrink: 0; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.sec-item h3 { font-size: 17px; margin-bottom: 5px; }
.sec-item p { color: var(--ink-soft); font-size: 14.5px; }

/* Variante compatta: striscia unica, meno peso visivo della griglia funzionalità */
.sec-strip { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: var(--shadow-sm); }
.sec-strip-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sec-strip-head .eyebrow { margin: 0; }
.sec-strip-head .section-title { font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.sec-strip-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 22px 0 18px; }
.sec-chip { display: flex; gap: 12px; align-items: flex-start; }
.sec-chip .sec-ic { width: 38px; height: 38px; border-radius: var(--r); }
.sec-chip h3 { font-size: 15.5px; margin-bottom: 3px; }
.sec-chip p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.sec-strip-link { font-size: 14px; font-weight: 600; color: var(--primary-deep); }

/* ---------- Chi siamo (teaser home) ---------- */
.about-teaser { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.about-teaser-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.about-teaser-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-teaser-txt .eyebrow { margin-bottom: 8px; }
.about-teaser-txt .btn { margin-top: 8px; }
/* Volti dei fondatori nel teaser di home. Le regole stanno DOPO
   `.about-teaser-photo img`: stessa specificità, vince l'ultima — serve a non
   ereditare width/height 100% pensati per una foto a tutto riquadro. */
.teaser-volti { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 30px 22px; background: linear-gradient(150deg, var(--green-soft), var(--cream-soft)); }
/* margin:0 non è pleonastico: <figure> ha 40px di margine laterale di default,
   che qui stringevano la colonna a 129px e mandavano i ruoli a capo. */
.teaser-volto { text-align: center; margin: 0; }
.teaser-volto img { display: block; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card); box-shadow: var(--shadow-sm); }
.teaser-volto-nome { display: block; font-weight: 700; font-size: 15px; color: var(--ink); }
/* Professione e ruolo su due righe distinte: uniti andavano a capo a caso.
   La professione è la riga che porta la credibilità, quindi è quella marcata. */
.teaser-volto-ruolo { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--primary-deep); margin-top: 3px; }
.teaser-volto-sotto { display: block; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
@media (max-width: 420px) { .teaser-volti { gap: 14px; padding: 22px 14px; } .teaser-volto img { width: 76px; height: 76px; } }

/* ---------- Team (Chi siamo) ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.team-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); text-align: center; }
.team-photo { width: 110px; height: 110px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(150deg, var(--green-soft), var(--cream-soft)); color: var(--primary-deep); border: 1px dashed var(--line); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-nome { font-size: 18px; margin-bottom: 2px; }
.team-ruolo { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-deep); margin-bottom: 10px; }
.team-bio { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 720px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- Fondatori (Chi siamo) ---------- */
/* Card con intestazione (ritratto tondo + nome) e bio sotto a piena larghezza.
   Il ritratto è piccolo e circolare per due motivi: le bio sono lunghe tre
   paragrafi e un ritratto grande di fianco lasciava al testo una colonna stretta
   (righe corte, lettura faticosa); e il tondo è la forma che il brand usa già per
   eyebrow e badge. Niente più alternanza destra/sinistra: serviva solo a rompere
   la monotonia di due foto grandi, che ora non ci sono. */
/* Colonna stretta e centrata: la card abbraccia il testo invece di stendersi per
   tutta la `wrap` lasciando mezza card vuota a destra. */
.founders { display: grid; gap: 26px; margin: 44px auto 0; max-width: 780px; }
.founder {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 30px 32px;
}
.founder-head { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.founder-photo {
  width: 104px; height: 104px; flex: none; border-radius: 999px; overflow: hidden;
  /* Anello brand invece del bordo: stacca il ritratto dalla card senza squadrarlo. */
  box-shadow: 0 0 0 4px var(--primary-soft);
  background: linear-gradient(150deg, var(--green-soft), var(--cream-soft));
}
.founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder-name { font-size: 23px; margin-bottom: 3px; }
.founder-role { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-deep); }
.founder-tag { color: var(--muted); font-style: italic; margin: 7px 0 0; }
/* La misura di lettura (~70 caratteri per riga) la dà la larghezza di .founders:
   qui basta il ritmo verticale. */
.founder-bio p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.75; margin: 0 0 15px; }
.founder-bio p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .founder { padding: 24px 20px; }
  .founder-head { gap: 16px; margin-bottom: 18px; }
  .founder-photo { width: 74px; height: 74px; box-shadow: 0 0 0 3px var(--primary-soft); }
  .founder-name { font-size: 20px; }
  .founder-bio p { font-size: 15px; }
}

/* ---------- Prezzi ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--carta); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px 26px; box-shadow: var(--filo-luce), var(--elev-superficie); transition: transform .18s ease, box-shadow .18s ease; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--filo-luce), var(--elev-sollevata); }
/* Il piano consigliato sta UN PIANO PIÙ SU degli altri, non solo con un bordo diverso:
   la raccomandazione si legge prima di leggerla. */
.plan.pro { border: 2px solid var(--accent); box-shadow: var(--filo-luce), var(--elev-fluttuante); }
.plan.max { background: linear-gradient(180deg, var(--honey-soft), var(--card)); border: 1.5px dashed var(--honey); }
.plan-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); height: 26px; padding: 0 14px; border-radius: var(--r-sm); display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.plan-ribbon.rec { background: var(--primary-deep); color: #fff; }
.plan-ribbon.soon { background: var(--honey); color: #5A3A0A; }
.plan-name { font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* IL PREZZO ERA ROVESCIATO, e per una regola di una riga.
   Il markup è `<div class="plan-price"><span data-price>9,90</span> €<span data-period>/mese</span></div>`,
   e la regola `.plan-price span { font-size: 17px }` colpiva OGNI span dentro — compreso
   quello del prezzo. Risultato: il numero usciva a 17px, e il «€», che è testo nudo,
   ereditava i 46px del contenitore. Sulla pagina dove si decide, il prezzo era un terzo
   del simbolo di valuta.
   Si sistema rovesciando la regola invece del markup: il CONTENITORE porta lo stile
   piccolo (che vale per «€» e «/mese», che sono contorno), e solo `[data-price]` — il
   numero, l'unica cosa che deve gridare — sale a 46. Nessun file HTML da toccare, e la
   correzione vale su tutte le pagine che mostrano un listino. */
.plan-price { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--muted); margin: 8px 0 2px; }
.plan-price [data-price] { font-size: 46px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.plan-desc { color: var(--ink-soft); font-size: 14.5px; min-height: 44px; margin-bottom: 20px; }
/* Riga sotto il bottone di un piano a pagamento: durante la beta si entra dal Free e il
   cambio piano avviene nell'app. Serve a spiegare perché il bottone dice "entra" e non
   "passa a Pro" — senza quella riga sembrerebbe un errore. */
.plan-nota-beta { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }
/* "Porti i pazienti che hai già": risponde nell'hero all'obiezione di chi uno studio ce
   l'ha già. Sta accanto all'icona, quindi flex con allineamento in alto (il testo va a
   capo su telefono e l'icona deve restare sulla prima riga). */
.hero-porta-dati { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.hero-porta-dati svg { flex-shrink: 0; margin-top: 2px; color: var(--primary-deep); }
.hero-porta-dati a { color: var(--primary-deep); font-weight: 600; text-decoration: underline; }
.hero-porta-dati.center { justify-content: center; text-align: left; max-width: 620px; margin-left: auto; margin-right: auto; }
.plan-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; }
/* RIENTRO APPESO, non flex. La riga era un contenitore flex con dentro l'icona, uno
   `<strong>` e il testo che segue: in flex ognuno di quei tre diventa un elemento a sé,
   quindi il `gap: 9px` si infilava FRA il grassetto e la virgola successiva e i due si
   spezzavano su colonne diverse. «Il paziente ti conferma di aver pagato, dal link in
   fattura» si leggeva in due blocchi disallineati.
   Con l'icona in posizione assoluta e il testo che scorre normalmente, il contenuto
   torna un paragrafo solo — e si ottiene per giunta il rientro appeso, che è come una
   lista andrebbe composta comunque. */
.plan-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.plan-list li svg { position: absolute; left: 0; top: 4px; color: var(--green); flex-shrink: 0; }
.plan .btn { margin-top: auto; }
.pricing-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }
/* Ancoraggio di valore (L19): sta fra i piani e la nota legale, e pesa più della nota
   ma meno dei prezzi — è una frase da leggere, non una postilla da saltare. */
.pricing-anchor { text-align: center; color: var(--ink-soft); font-size: 16px; margin-top: 26px; max-width: 560px; margin-left: auto; margin-right: auto; }
.pricing-anchor strong { color: var(--primary-deep); }
/* In beta i pagamenti sono spenti (config.beta.paymentsDisabled): l'ancora dice quanto
   costerà, non quanto stai per spendere. La precisazione sta più in basso di tono ma
   nella stessa frase, perché separarla la renderebbe una postilla da saltare. */
.pricing-anchor-beta { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

/* ---------- Testimonianze ---------- */
.testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.testi-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.testi-stars { color: var(--honey); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
.testi-card p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 18px; }
.testi-who { display: flex; align-items: center; gap: 12px; }
.testi-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; color: #fff; font-family: var(--font-display); }
.testi-who b { font-size: 14.5px; display: block; }
.testi-who span { font-size: 13px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 16.5px; color: var(--ink); }
.faq-q .chev { transition: transform .2s; color: var(--muted); flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a-in { padding: 0 22px 20px; color: var(--ink-soft); font-size: 15.5px; }

/* ---------- CTA finale ---------- */
.cta { position: relative; overflow: hidden; }
.cta-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 66px 40px; text-align: center;
  background: linear-gradient(140deg, var(--ink) 0%, var(--primary-deep) 100%); color: #fff; box-shadow: var(--shadow);
}
.cta-card h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); position: relative; z-index: 1; }
.cta-card p { color: rgba(255,255,255,.82); font-size: 18px; margin: 16px auto 30px; max-width: 520px; position: relative; z-index: 1; }
.cta-actions { position: relative; z-index: 1; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.72); padding: 62px 0 30px; }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer .brand-name { color: #fff; }
.footer-about { font-size: 14.5px; max-width: 280px; margin-top: 16px; }
.footer-mail { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.footer-col h2 { color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; font-family: var(--font-ui); font-weight: 700; }
.footer-col a { display: block; font-size: 14.5px; padding: 5px 0; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover { color: #fff; transform: translateY(-2px); border-color: transparent; }
.footer-social a.ig:hover { background: radial-gradient(circle at 28% 110%, #FDB443 0%, #F75E3E 32%, #D92E7F 62%, #9B36B7 92%); }
.footer-social a.fb:hover { background: #1877F2; }
.footer-social a.li:hover { background: #0A66C2; }
.footer-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.55); }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
/* Bersagli toccabili: WCAG 2.2 AA (2.5.8) chiede almeno 24×24px. I link di servizio
   (footer legale, link di approfondimento, contatti) restavano sui 17–23px: da
   telefono si sbaglia bersaglio. L'altezza minima non cambia l'aspetto — allarga
   solo l'area sensibile al tocco. */
.footer-legal a, .footer-col a, .footer-mail, .sec-strip-link {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; margin: 0 auto; max-width: 760px;
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.cookie.show { transform: none; }
.cookie p { font-size: 14px; color: var(--ink-soft); flex: 1; min-width: 0; }
.cookie p a { color: var(--primary-deep); font-weight: 600; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Widget feedback (FAB comprimibile) ---------- */
.fb-widget { position: fixed; right: 16px; bottom: 16px; z-index: 55; }
/* Bolla compatta: entra dolcemente e non copre i contenuti. */
.fb-fab {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--green); box-shadow: var(--shadow);
  display: grid; place-items: center; cursor: pointer;
  transform: translateY(160%) scale(.9); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s, background .15s;
}
.fb-widget.show .fb-fab { transform: none; opacity: 1; }
.fb-fab:hover { background: var(--green-soft); }
.fb-widget.open .fb-fab { display: none; }
/* Pannello espanso: appare solo al click, ancorato in basso a destra. */
.fb-panel {
  position: absolute; right: 0; bottom: 0; width: 300px; max-width: calc(100vw - 32px);
  display: none; padding: 16px 18px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.fb-widget.open .fb-panel { display: block; animation: fb-pop .28s cubic-bezier(.2,.8,.2,1); }
@keyframes fb-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.fb-panel-txt strong { display: block; font-size: 14.5px; }
.fb-panel-txt span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.fb-panel .btn { width: 100%; justify-content: center; margin-top: 12px; }
.fb-panel-x {
  position: absolute; top: 6px; right: 8px; border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-soft); padding: 2px 6px; border-radius: var(--r-sm);
}
.fb-panel-x:hover { background: var(--cream-soft); color: var(--ink); }
@media (max-width: 720px) { .fb-widget { right: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .fb-fab { transition: opacity .2s, background .15s; transform: none; }
  .fb-widget.open .fb-panel { animation: none; }
}

/* ---------- Decorazioni botaniche ---------- */
.leaf-deco { position: absolute; pointer-events: none; z-index: 0; opacity: .9; }
.leaf-soft { opacity: .5; }

/* ---------- Pagine di contenuto (legal / contatti) ---------- */
.page-hero { padding: calc(var(--nav-h) + 60px) 0 44px; background: linear-gradient(180deg, var(--cream-soft), var(--paper)); border-bottom: 1px solid var(--line-soft); position: relative; overflow: hidden; }
/* Su telefono i 60px di respiro sopra l'occhiello diventano spazio sprecato: su uno
   schermo da ~660px erano il 9% dell'unica schermata che decide se l'utente resta. */
@media (max-width: 720px) { .page-hero { padding-top: calc(var(--nav-h) + 18px); padding-bottom: 32px; } }
/* Hero di /beta su telefono: il modulo d'iscrizione deve stare nel PRIMO schermo.
   La riga prezzo (fino a 200px) è un ottimo argomento ma non deve precedere il campo:
   qui scende sotto al modulo, restando comunque nella prima schermata di scroll.
   Ambito ristretto all'hero che contiene il modulo beta, così le altre page-hero
   (privacy, schede, guide) non cambiano di una virgola. */
@media (max-width: 720px) {
  .page-hero [data-beta-mini-root] { display: flex; flex-direction: column; }
  /* Il verso di questa regola conta più dei numeri. Prima l'elenco era per ESCLUSIONE
     (`p:not(.prezzo-claim):not(.hero-accedi-nota)` sopra il modulo): bastava aggiungere
     un paragrafo all'hero perché si piazzasse da solo sopra il campo email, senza che
     nessuno toccasse questo blocco. È andata così — `.hero-porta-dati`, nata con db25ac9,
     ha spinto il pulsante d'iscrizione 93px SOTTO la piega su 390×664 (audit onda 3, V2).
     Ora il default è `order: 4`, cioè DOPO il modulo, nell'ordine del markup: chi aggiunge
     un blocco e si dimentica di questo file ottiene al peggio un testo troppo in basso,
     mai il modulo fuori schermo. Sopra il modulo ci va solo ciò che è nominato qui. */
  .page-hero [data-beta-mini-root] > * { order: 4; }
  .page-hero [data-beta-mini-root] > .eyebrow,
  .page-hero [data-beta-mini-root] > h1,
  .page-hero [data-beta-mini-root] > .hero-sommario { order: 0; }
  /* `.hero-entra` (l'ingresso diretto) prende il posto che era del modulo email: è
     l'azione della pagina, e su telefono deve stare subito sotto il titolo. Senza questa
     riga cadrebbe nel catch-all `order: 4`, cioè sotto i badge di fiducia e a filo della
     piega — lo stesso difetto già corretto una volta su questa pagina. */
  .page-hero [data-beta-mini-root] > .hero-entra,
  .page-hero [data-beta-mini-root] > .beta-mini,
  .page-hero [data-beta-mini-root] > [data-beta-mini-ok],
  .page-hero [data-beta-mini-root] > [data-beta-mini-err],
  /* La rassicurazione («nessun invito, nessun codice, nessuna carta») spiega il bottone:
     separata da tre blocchi risponde a una domanda che il lettore si è già fatto e a cui
     ha già risposto da solo — di solito con «lascio perdere». Sale accanto all'azione.
     Il `>` la limita ai figli diretti: le note dentro `.hero-oppure` restano dove sono. */
  .page-hero [data-beta-mini-root] > .hero-accedi-nota { order: 1; }
  .page-hero [data-beta-mini-root] > .prezzo-claim { order: 2; margin-top: 18px; }
  .page-hero [data-beta-mini-root] > .hero-trust { order: 3; }
  /* La seconda strada (kit via email) va in fondo, dopo tutto il resto: è per chi non
     entra adesso, e non deve competere con chi sta per farlo. */
  .page-hero [data-beta-mini-root] > .hero-oppure { order: 5; }
}
/* Schermi molto piccoli (iPhone SE e simili, 320px): recupero gli ultimi pixel perché
   anche il pulsante — non solo il campo — resti dentro la prima schermata. */
@media (max-width: 400px) {
  .page-hero { padding-top: calc(var(--nav-h) + 6px); }
  .page-hero p { margin-top: 8px; }
  .page-hero [data-beta-mini-root] > h1 { font-size: 27px; line-height: 1.12; }
}
.page-hero h1 { font-size: clamp(30px, 4.4vw, 44px); }
.page-hero p { color: var(--ink-soft); font-size: 17px; margin-top: 12px; max-width: 640px; }
.prose { max-width: 820px; margin: 0 auto; padding: 56px 0 80px; }
.prose h2 { font-size: 24px; margin: 38px 0 12px; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 16px; margin-bottom: 12px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose .updated { font-size: 14px; color: var(--muted); }
.prose strong { color: var(--ink); }
.data-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
.data-table th, .data-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.data-table th { color: var(--muted); font-weight: 700; background: var(--cream-soft); }
.callout { background: var(--primary-soft); border: 1px solid var(--primary-soft); border-left: 3px solid var(--primary); border-radius: var(--r); padding: 16px 18px; margin: 20px 0; font-size: 15px; color: var(--ink-soft); }
.callout.honey { background: var(--honey-soft); border-left-color: var(--honey); }

/* ---------- Contatti form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-family: inherit;
  font-size: 15.5px; color: var(--ink); background: var(--card); width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
/* Nota sotto un campo: promemoria di minimizzazione, non un errore — tono discreto. */
.field-nota { margin: 0; font-size: 13px; color: var(--ink-soft); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,185,172,.16); }
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info .ci { display: flex; gap: 14px; align-items: flex-start; }
.contact-info .ci .ic { width: 44px; height: 44px; border-radius: var(--r); flex-shrink: 0; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-deep); }
.form-ok { background: var(--green-soft); color: #1A7355; border-radius: var(--r); padding: 14px 16px; font-size: 15px; line-height: 1.55; font-weight: 600; }
/* Il box esito contiene anche il passo successivo ("accedi qui"): il link va distinto. */
.form-ok a { color: #145E45; font-weight: 700; text-decoration: underline; }
/* Errore inline dei form: sostituisce gli alert() del browser, annunciato dagli
   screen reader tramite role="alert" sul contenitore. */
.form-err { background: #F7E8E2; color: #8A3B28; border-left: 3px solid var(--clay, #C8553D); border-radius: var(--r); padding: 14px 16px; font-size: 14.5px; font-weight: 600; }

/* ---------- Mission / Vision ---------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.mv-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-sm); }
.mv-card.dark { background: linear-gradient(150deg, var(--ink), var(--primary-deep)); color: #fff; border-color: transparent; }
.mv-card.dark h3, .mv-card.dark p { color: #fff; }
.mv-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-deep); margin-bottom: 14px; }
.mv-card.dark .mv-tag { color: var(--accent); }
.mv-card h3 { font-size: 24px; margin-bottom: 12px; }
.mv-card p { font-size: 16.5px; color: var(--ink-soft); }
.mv-card p + p { margin-top: 12px; }

/* ---------- Pilastri / valori ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.pillar { text-align: center; padding: 26px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pillar .p-ic { width: 54px; height: 54px; border-radius: var(--r-lg); margin: 0 auto 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-deep); }
.pillar h3 { font-size: 17px; margin-bottom: 6px; }
.pillar p { font-size: 14px; color: var(--ink-soft); }

/* ---------- Toggle billing (mensile/annuale) ---------- */
.billing-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px; margin: 26px auto 0; box-shadow: var(--shadow); }
.billing-toggle button { height: 46px; padding: 0 26px; border: none; border-radius: 999px; background: transparent; font-weight: 700; font-size: 15.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; transition: background .18s, color .18s, box-shadow .18s, transform .12s; }
.billing-toggle button:hover { color: var(--primary-deep); }
.billing-toggle button.on { background: linear-gradient(180deg, var(--accent) -30%, var(--primary) 75%); color: #fff; box-shadow: 0 4px 14px rgba(14,140,130,.35); transform: translateY(-1px); }
.billing-toggle button.on:hover { color: #fff; }
.billing-save { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-sm); background: var(--honey); color: #5A3A0A; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.billing-toggle button.on .billing-save { background: #fff; color: var(--primary-deep); }
.billing-caption { display: block; text-align: center; margin-top: 20px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ---------- Plan: limiti, contatore e badge ---------- */
.plan-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--r-sm); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.plan-badge.free { background: var(--line); color: var(--ink-soft); }
.plan-badge.pro { background: var(--primary-deep); color: #fff; }
.plan-badge.max { background: linear-gradient(135deg, var(--honey), var(--clay)); color: #fff; }
.plan-limits { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.limit-row { }
.limit-row .lr-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); margin-bottom: 5px; }
.limit-row .lr-top b { font-family: var(--font-mono); color: var(--ink); }
.limit-bar { height: 8px; border-radius: var(--r-sm); background: var(--line-soft); overflow: hidden; }
.limit-bar i { display: block; height: 100%; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--accent), var(--primary)); }
.limit-bar.honey i { background: linear-gradient(90deg, var(--honey), var(--clay)); }
.limit-inf { font-size: 13px; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* ---------- Tabella comparativa piani ---------- */
.compare-wrap { margin-top: 48px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.compare { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--card); }
.compare th, .compare td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--ink-soft); font-weight: 500; }
.compare thead th { font-family: var(--font-display); font-size: 17px; color: var(--ink); background: var(--cream-soft); }
.compare thead th small { display: block; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.compare .hi { background: rgba(31,185,172,.06); }
.compare tr:last-child td { border-bottom: none; }
.compare .yes { color: var(--green); font-weight: 700; }
.compare .no { color: var(--muted); }
.compare .val { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }

/* ---------- Tabs (guide) ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--line-soft); border-radius: var(--r); padding: 5px; margin-bottom: 26px; }
.tabs button { height: 40px; padding: 0 18px; border: none; border-radius: var(--r); background: transparent; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.tabs button.on { background: var(--card); color: var(--primary-deep); box-shadow: var(--shadow-sm); }

/* ---------- Stepper (guida passo-passo) ---------- */
.stepper { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.stepper-body { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 300px; }
.stepper-txt { padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.stepper-txt .s-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--primary-deep); letter-spacing: .1em; margin-bottom: 10px; }
.stepper-txt h3 { font-size: 24px; margin-bottom: 10px; }
.stepper-txt p { font-size: 16px; color: var(--ink-soft); }
.stepper-visual { background: linear-gradient(150deg, var(--cream-soft), var(--primary-soft)); display: grid; place-items: center; padding: 24px; position: relative; }
.stepper-visual .glyph { width: 120px; height: 120px; border-radius: var(--r-xl); background: var(--card); display: grid; place-items: center; box-shadow: var(--shadow); color: var(--primary-deep); }
.stepper-visual .glyph svg { width: 56px; height: 56px; }
.stepper-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line-soft); background: var(--cream-soft); }
.step-dots { display: flex; gap: 8px; }
.step-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .15s, transform .15s; }
.step-dot.on { background: var(--primary); transform: scale(1.25); }

/* ---------- Risorse / notizie ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.res-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; }
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.res-cover { position: relative; height: 150px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; overflow: hidden; }
.res-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.res-cover-tag { position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .26); font-size: 13px; letter-spacing: .04em; }
.res-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.res-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-deep); }
.res-body h3 { font-size: 17.5px; }
.res-body p { font-size: 14px; color: var(--ink-soft); flex: 1; }
.res-body .res-more { font-size: 13.5px; font-weight: 600; color: var(--primary-deep); }
.link-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.link-item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: transform .15s, border-color .15s, box-shadow .15s; }
a.link-item:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }

/* Articoli delle guide (pagina Risorse) */
.res-article { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--nav-h) + 16px); }
.res-article + .res-article { margin-top: 22px; }
.res-article h2 { font-size: 23px; margin: 6px 0 12px; }
.res-article p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; margin-bottom: 12px; }
.res-article ul { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.res-article .res-fonte { font-size: 13.5px; color: var(--muted); margin-bottom: 0; border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 16px; }
.res-article .res-fonte a, .res-article p a { color: var(--primary-deep); font-weight: 600; }
@media (max-width: 720px) { .res-article { padding: 22px 20px; } }
.link-item .li-ic { width: 40px; height: 40px; border-radius: var(--r); flex-shrink: 0; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-deep); }
.link-item b { font-size: 14.5px; }
.link-item span { font-size: 13px; color: var(--muted); }

/* ---------- Recensioni / feedback ---------- */
.rating-big { display: flex; align-items: center; gap: 16px; justify-content: center; margin-top: 8px; }
.rating-big .rb-score { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--ink); }
.rating-big .rb-stars { color: var(--honey); font-size: 22px; letter-spacing: 2px; }
.rating-big .rb-sub { font-size: 13.5px; color: var(--muted); }
.star-input { display: inline-flex; gap: 4px; }
.star-input button { border: none; background: none; padding: 2px; font-size: 26px; line-height: 1; color: var(--line); cursor: pointer; transition: color .12s, transform .12s; }
.star-input button.on { color: var(--honey); }
.star-input button:hover { transform: scale(1.15); }
.review-soon { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--honey-soft); color: var(--honey-ink); font-size: 13px; font-weight: 600; }

/* Testimonianze dei Fondatori: le scrivono i colleghi dalla webapp, le pubblichiamo
   dopo una rilettura. La griglia sta a una colonna sotto i 760px perché un testo di
   200 parole in due colonne strette non lo legge nessuno. */
/* Colonne che si adattano al NUMERO di voci invece di essere due fisse: con tre
   testimonianze la terza restava sola a metà riga, e una griglia sbilenca su una pagina
   che parla di fiducia si nota. minmax(320px) tiene il massimo a tre per riga: sopra, le
   righe di testo diventano troppo corte per leggersi bene. */
.tstm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 40px; text-align: left;
  /* `start` e non lo stiramento predefinito: le testimonianze hanno lunghezze diverse, e
     con le card tutte alte uguale le più corte restavano con un buco sotto la firma. Cime
     allineate, fondi liberi — che è come stanno le virgolette vere. */
  align-items: start; }
.tstm { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.tstm-stars { color: var(--honey); font-size: 15px; letter-spacing: 2px; }
.tstm-testo { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink); }
.tstm-firma { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.tstm-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-family: var(--font-mono); background: var(--primary-soft); color: var(--primary-deep); }
/* Tre tinte del brand a rotazione: schede accostate che si distinguono senza introdurre
   un colore nuovo. Restano monogrammi — nessun ritratto, vero o generato che sia. */
.tstm-av.t1 { background: var(--honey-soft); color: var(--honey-ink); }
.tstm-av.t2 { background: var(--clay-soft); color: var(--clay); }
.tstm-nome { font-weight: 600; font-size: 14px; }
.tstm-ruolo { font-size: 12.5px; color: var(--muted); }
/* Dichiarazione della recensione incentivata (dir. UE 2019/2161). Volutamente sobria e
   non nascosta: leggibile ma senza gridare — deve informare, non mettere in dubbio la
   testimonianza che accompagna. Un carattere più piccolo del ruolo e lo stesso grigio
   del brand, con un filo di margine che la stacca dalla firma. */
.tstm-incentivo { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
/* Una voce sola (prezzi, beta): senza questo la card si stira per tutta la sezione e le
   righe diventano lunghe il doppio di quelle di /recensioni — la stessa citazione
   sembrerebbe un'altra cosa. Larghezza di lettura, centrata. */
/* La voce nell'hero: una riga, non una card. Se prendesse il riquadro delle
   testimonianze diventerebbe un secondo blocco che compete con il modulo — e il modulo
   nel primo schermo è la cosa che l'hero deve proteggere. Filetto a sinistra, monogramma
   piccolo, corsivo: si legge come una citazione di margine. */
.hero-voce { display: flex; align-items: flex-start; gap: 11px; margin: 20px 0 22px; padding: 0 0 0 14px;
  border-left: 2px solid var(--primary-soft); max-width: 460px; }
.hero-voce .tstm-av { width: 30px; height: 30px; font-size: 11px; }
.hero-voce blockquote { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); font-style: italic; }
.hero-voce figcaption { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* La firma è un link, quindi è un bersaglio: da telefono 16px di altezza non si
   centrano col pollice (minimo 24 nella guardia di e2e/ux-helpers.js, e la norma dice
   lo stesso). L'area cliccabile si allarga con il padding e il layout NON si muove,
   perché il margine negativo la riassorbe: la riga resta dov'è, il dito no. */
.hero-voce figcaption a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line);
  display: inline-block; padding: 6px 0; margin: -6px 0; }
.hero-voce figcaption a:hover { color: var(--primary-deep); border-color: var(--primary-soft); }
/* Il monogramma sta in colonna con la citazione solo da schermo largo: su telefono la
   riga sarebbe di tre parole per riga. */
@media (max-width: 560px) { .hero-voce .tstm-av { display: none; } .hero-voce { gap: 0; } }
.tstm-grid-uno { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; margin-top: 0; }
@media (max-width: 760px) { .tstm-grid { grid-template-columns: 1fr; } }

/* ---------- Programma Fondatori / closed beta ---------- */
.beta-key {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono);
  font-weight: 600; letter-spacing: .1em; font-size: clamp(18px, 3.4vw, 24px); color: var(--primary-deep);
  background: var(--card); border: 1.5px dashed var(--accent); border-radius: var(--r-lg);
  padding: 14px 20px; box-shadow: var(--shadow-sm);
}
.beta-key .k-ic { width: 34px; height: 34px; border-radius: var(--r); flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(150deg, var(--accent), var(--primary)); color: #fff; box-shadow: 0 3px 10px rgba(14,140,130,.3); }
.beta-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 30px 26px; box-shadow: var(--shadow-sm); }
.beta-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.beta-form-grid .field.full { grid-column: 1 / -1; }
/* Nota di consenso: era 13px senza interlinea, il punto in cui l'utente decide di
   fidarsi e inviare. Corpo e interlinea leggibili, misura di riga contenuta. */
.beta-consent { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; max-width: 62ch; }
.beta-consent a { color: var(--primary-deep); font-weight: 600; text-decoration: underline; }
.beta-steps-note { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--green-soft); color: #1A7355; font-size: 13.5px; font-weight: 600; }
/* Badge "Programma Fondatori": pill dichiaratamente decorativa. Ha sostituito la
   keychip `PSV-••••`, che al centro della pagina veniva letta come un campo dove
   inserire un codice — e chi non aveva un codice usciva. */
.beta-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-deep); background: var(--primary-soft); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; box-shadow: var(--shadow-sm); }
/* Modulo email inline centrato (hero di /beta): larghezza contenuta e centrata,
   così su desktop non si allarga a tutta la colonna. */
.beta-mini-center { max-width: 520px; margin-left: auto; margin-right: auto; justify-content: center; }
/* Riga del prezzo sotto il titolo di /beta: l'argomento più forte, dove si decide. */
.prezzo-claim { max-width: 620px; margin: 16px auto 0; padding: 12px 18px; background: var(--green-soft); border-radius: var(--r); color: #1A7355; font-size: 15px; line-height: 1.5; }
.hero-trust-center { justify-content: center; margin-top: 22px; }
/* Tabella di confronto prezzi (pagina /beta): il prezzo come argomento, in chiaro. */
.cfr { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); }
.cfr-row { display: grid; grid-template-columns: 1.3fr .8fr 1.4fr; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line-soft); align-items: center; font-size: 15px; }
.cfr-row:first-child { border-top: 0; }
.cfr-head { background: var(--cream-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.cfr-pv { background: var(--primary-soft); }
.cfr-row span:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 640px) {
  .cfr-row { grid-template-columns: 1fr; gap: 3px; }
  .cfr-head { display: none; }
  .cfr-row span:nth-child(2) { color: var(--primary-deep); }
  .cfr-row span:nth-child(3) { color: var(--muted); font-size: 13.5px; }
}
/* Tabelle numeriche dentro gli articoli/guide (esempi fiscali). */
.res-article .tbl-wrap { overflow-x: auto; margin: 18px 0; }
.res-article table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); }
.res-article th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--cream-soft); font-weight: 700; }
.res-article td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.res-article tbody tr:last-child td { border-bottom: 0; }
.res-article td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-article tr.tot td { background: var(--primary-soft); font-weight: 700; }
/* Lead magnet in coda all'articolo: blocco caldo che spinge il calcolatore/la beta. */
.res-magnet { background: linear-gradient(140deg, var(--cream-soft), var(--card)); border: 1px solid var(--line); border-left: 4px solid var(--honey); border-radius: var(--radius-lg); padding: 24px 26px; margin: 32px 0 8px; box-shadow: var(--shadow-sm); }
.res-magnet h3 { margin: 0 0 6px; font-size: 20px; }
.res-magnet p { margin: 0 0 14px; color: var(--ink-soft); }
.res-magnet .btn { margin-right: 8px; }
/* Pulsante che si legge come un link (es. "rimandamela" dentro una frase): resta un
   <button> perché compie un'azione, non una navigazione. min-height per il tocco. */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-deep); font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 24px; }
.linklike:hover { color: var(--primary); }
.linklike:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.reinvio { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.reinvio-esito { color: var(--muted); }
/* Consegna della chiave a schermo, subito dopo l'iscrizione: sta dentro .form-ok, che
   è già verde. Il codice deve leggersi e dettarsi al telefono — quindi monospazio,
   grande e spaziato — e il bottone che apre lo studio deve essere l'unica cosa più
   evidente di lui. La riga dell'email va sotto: è la copia di sicurezza, non la strada. */
.chiave-consegna { margin-top: 12px; }
.chiave-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--line-soft); }
.chiave-codice { font-size: clamp(19px, 5vw, 25px); font-weight: 700; letter-spacing: .06em; color: var(--primary-deep); word-break: break-all; }
.chiave-apri { margin-top: 12px; display: inline-flex; }
.chiave-nota { margin: 10px 0 0; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
/* Richiamo alla scheda a inizio articolo: il blocco di raccolta vero sta in fondo
   (oltre 11 schermate di scroll su telefono), qui c'è solo l'ancora che ci porta. */
.scheda-richiamo { margin: 0 0 20px; padding: 11px 16px; border-radius: var(--r); background: var(--honey-soft); color: #8A5A15; font-size: 14.5px; line-height: 1.5; }
.scheda-richiamo a { color: #8A5A15; font-weight: 700; text-decoration: underline; }
/* L'ancora non deve finire sotto la navbar fissa: si misura da --nav-h come il resto
   del sito (era 90px scritti a mano, l'unico punto fuori convenzione). */
#scheda { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* Esempio di fattura in monospazio dentro un articolo. */
.res-article pre { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--r); padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13.5px; line-height: 1.7; color: var(--ink); margin: 18px 0; }
.res-article blockquote { margin: 16px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--primary-soft); border-radius: 0 12px 12px 0; color: var(--ink-soft); font-style: italic; }

/* Blocco "Iscriviti alla beta" in homepage: card in risalto con cattura email. */
.beta-home {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
  background: linear-gradient(140deg, var(--cream-soft), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px 44px; box-shadow: var(--shadow);
}
.beta-home .eyebrow { margin-bottom: 8px; }
.beta-home .section-title { margin-bottom: 12px; }
.beta-home .section-lead { max-width: 560px; }
.beta-mini { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.beta-mini-input {
  flex: 1; min-width: 220px; height: 52px; padding: 0 18px; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.beta-mini-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-soft); }
/* Email malformata segnalata al blur: il bordo lo rende visibile senza bloccare l'invio. */
.beta-mini-input[aria-invalid="true"], .beta-form input[aria-invalid="true"] { border-color: var(--clay, #C8553D); }
.beta-mini .btn { height: 52px; }
/* Note sotto i moduli: ora possono andare su più righe (consenso + link), quindi
   servono interlinea e una misura di riga leggibile invece di una riga fitta. */
.beta-mini-note { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 14px; max-width: 62ch; }
.beta-mini-note a { color: var(--primary-deep); font-weight: 600; text-decoration: underline; }
.beta-home-visual { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.beta-home-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 260px; }
.beta-home-steps span { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.beta-home-steps b {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-deep); font-size: 13px; font-weight: 700;
}
@media (max-width: 860px) {
  .beta-home { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
  .beta-home-visual { order: -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .beta-home-steps { max-width: none; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) { .beta-form-grid { grid-template-columns: 1fr; } .beta-form { padding: 24px 20px; } }

/* ---------- Reveal on scroll ---------- */
/* Fail-safe: i contenuti sono visibili di default e vengono nascosti per l'animazione
   SOLO se boot.js ha marcato <html class="js">. Se il JS non parte (blocco, errore,
   rete), il sito resta completamente leggibile. */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 480px; margin: 0 auto; }
  .split, .contact-grid, .mv-grid, .about-teaser { grid-template-columns: 1fr; gap: 32px; }
  .split.rev .split-media { order: 0; }
  .steps, .features, .pricing, .testi, .sec-grid, .res-grid { grid-template-columns: 1fr 1fr; }
  .sec-strip-items { grid-template-columns: 1fr; gap: 16px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .stepper-body { grid-template-columns: 1fr; }
  .stepper-visual { min-height: 180px; order: -1; }
  .link-list { grid-template-columns: 1fr; }
}
/* La barra orizzontale non entra sotto ~1140px (troppe voci): sotto i 1024px
   collassa nel menu a panino. Regola solo la navigazione, non il layout mobile. */
@media (max-width: 1024px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-burger { display: block; }
  .nav.open .nav-links {
    display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px; gap: 4px;
  }
  .nav.open .nav-links a { padding: 13px 14px; }
  .nav.open .nav-links a.hot { background: var(--honey-soft); color: var(--honey-ink); }
  /* Dropdown "Risorse" nel menu mobile: voci sempre visibili e indentate. */
  .nav.open .nav-dd { width: 100%; }
  .nav.open .nav-dd-toggle { width: 100%; padding: 13px 14px; font-weight: 600; color: var(--muted); cursor: default; }
  .nav.open .nav-dd-caret { display: none; }
  .nav.open .nav-dd-menu {
    display: block; position: static; border: 0; box-shadow: none; padding: 0 0 4px 12px; min-width: 0; background: transparent;
  }
  .nav.open .nav-dd-menu a { padding: 11px 14px; }
}
@media (max-width: 720px) {
  .section { padding: 66px 0; }
  .steps, .features, .pricing, .testi, .sec-grid, .footer-top, .res-grid, .pillars { grid-template-columns: 1fr; }
  .hero-badge { display: none; }
  /* Su telefono i pulsanti dell'hero si impilano a piena larghezza: niente wrap sbilenco. */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  /* Banner cookie: una BARRA, non un pannello. Impilato occupava 159px — il 19% dello
     schermo — e all'apertura della home copriva esattamente la riga che spiega perché
     lasciare l'email («la chiave del tuo studio compare subito qui»), il link alla
     privacy e «Accedi →». È solo informativo: cookie tecnici, nessuna scelta da
     raccogliere, quindi non gli serve un pannello a due pulsanti. «Dettagli» sparisce
     perché la stessa Cookie Policy è già linkata nel testo, due parole più in là. */
  .cookie {
    left: 8px; right: 8px; bottom: 8px; gap: 12px; padding: 10px 14px;
    border-radius: var(--radius-sm); align-items: center; text-align: left;
  }
  .cookie p { font-size: 12.5px; line-height: 1.35; }
  .cookie-actions .btn-ghost { display: none; }
  /* Il decoro botanico dell'hero di /beta attraversava l'H1 su schermo stretto: a
     390px la foglia passa sopra «Il tuo studio, in ordine. In due minuti.», cioè la
     riga più importante della pagina più pubblicizzata. Dimensione e posizione sono
     inline nel markup e non si possono ritoccare da qui: la si toglie, ed è lecito —
     è decorativa e già `aria-hidden`. Sopra i 720px resta dov'è. */
  .page-hero > .leaf-deco { display: none; }
  .tabs { width: 100%; justify-content: stretch; }
  .tabs button { flex: 1; padding: 0 10px; }
  .stepper-txt { padding: 24px; }
  .plan.pro { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ── Newsletter (footer + home) ─────────────────────────────────────────── */
.footer-news { display:flex; gap:1.4rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-news-txt { max-width:30rem; }
.footer-news-txt strong { display:block; font-size:1.02rem; color:#fff; margin-bottom:2px; }
.footer-news-txt span { font-size:.88rem; color:rgba(255,255,255,.62); }
.news-form { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.news-form input[type=email] { padding:.62rem .8rem; border:1px solid var(--line,#E1EAE8); border-radius: var(--r); font-size:.95rem; min-width:15rem; background:#fff; color:#15302E; }
.news-form input[type=email]:focus { outline:2px solid var(--green,#0B6E66); outline-offset:1px; }
.news-msg { flex-basis:100%; margin:.25rem 0 0; font-size:.82rem; min-height:1rem; }
.footer-news .news-msg.ok { color:#8fe3d6; }
.footer-news .news-msg.err { color:#ffb4a8; }
.newsletter-band .news-card { display:flex; gap:1.6rem; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--cream-soft); border:1px solid var(--line-soft); border-radius: var(--r-lg); padding:1.9rem; }
.news-card-txt { max-width:34rem; }
.news-card-txt h2 { margin:0 0 .35rem; }
.news-card-txt p { margin:0; color:var(--muted); }
.news-form-lg input[type=email] { min-width:17rem; padding:.72rem .9rem; }
.newsletter-band .news-msg.ok { color:var(--green); }
.newsletter-band .news-msg.err { color:var(--clay); }
@media (max-width:640px) { .footer-news, .newsletter-band .news-card { flex-direction:column; align-items:stretch; text-align:left; } .news-form input[type=email] { min-width:0; flex:1; } }

/* ── Top-strip newsletter (header) ──────────────────────────────────────── */
.topstrip { background:var(--green,#1E7154); color:#fff; }
.topstrip-in { display:flex; align-items:center; gap:.8rem; padding:.42rem 1rem; flex-wrap:wrap; }
.topstrip-txt { font-size:.84rem; font-weight:500; }
.topstrip-form { display:flex; gap:.4rem; align-items:center; margin-left:auto; }
.topstrip-form input[type=email] { padding:.34rem .6rem; border:1px solid rgba(255,255,255,.45); border-radius: var(--r-sm); font-size:.84rem; background:rgba(255,255,255,.96); color:#15302E; min-width:12rem; }
.topstrip-form .btn-sm { padding:.34rem .85rem; font-size:.82rem; }
.topstrip .news-msg { flex-basis:auto; font-size:.78rem; color:#eafff9; margin:0; min-height:0; }
.topstrip .news-msg.err { color:#ffd7cf; }
.topstrip .news-msg.ok { color:#eafff9; }
/* La X di chiusura è il bersaglio più piccolo della pagina e va centrata: 24×24px
   minimi (WCAG 2.2 AA 2.5.8), altrimenti da telefono si manca il colpo. */
.topstrip-x { background:none; border:none; color:rgba(255,255,255,.85); font-size:1.35rem; line-height:1; cursor:pointer; padding:0 .2rem; min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center; }
.topstrip-x:hover { color:#fff; }
@media (max-width:680px) { .topstrip-txt { flex-basis:100%; } .topstrip-form { margin-left:0; flex:1; } .topstrip-form input[type=email] { min-width:0; flex:1; } }
/* Da telefono la striscia va a capo (testo + modulo su due righe, ~75px) e ora che la
   navbar le cede il posto quello spazio verrebbe sottratto al primo schermo di OGNI
   pagina — lo stesso difetto già misurato su /beta. Su schermi stretti resta quindi
   fuori: la newsletter si raccoglie comunque dal footer, dalla fascia in home e da
   /newsletter. Su desktop è una riga sola da ~34px e resta. */
@media (max-width:720px) { .topstrip { display:none; } }
/* Su /beta la striscia è la conversione SECONDARIA: da telefono spariva il modulo vero
   sotto la piega, quindi qui cede il posto. Su schermi larghi resta (è una riga sola). */
@media (max-width:720px) { .topstrip-secondaria { display:none; } }

/* ====================================================================
   CALCOLATORI PUBBLICI (/calcolatore e /calcolatore-forfettario)
   Stavano in uno <style> dentro calcolatore.html, quindi esistevano per quella
   pagina sola: il secondo calcolatore è nato senza stili e non se n'era accorto
   nessun test — si vede solo guardando. Qui li vedono entrambi, e si scaricano una
   volta invece che a ogni visita.
   ==================================================================== */
    .calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:40px; }
    .calc-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); }

    /* Selettore a due opzioni (netto/lordo, esente/IVA, privato/azienda) */
    .seg2 { display:flex; background:var(--cream-soft); border:1px solid var(--line); border-radius: var(--r); padding:4px; gap:4px; }
    .seg2 button { flex:1; min-height:44px; border:none; background:none; border-radius: var(--r-sm); font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; padding:8px 10px; line-height:1.25; transition:background .15s, color .15s; }
    .seg2 button.on { background:var(--card); color:var(--primary-deep); box-shadow:var(--shadow-sm); }
    .seg2 button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

    /* Importo con simbolo € integrato */
    .amount-wrap { position:relative; }
    .amount-wrap .cur { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--muted); pointer-events:none; }
    .amount-wrap input { font-size:32px; font-family:var(--font-display); font-weight:700; text-align:right; padding:14px 16px 14px 44px; }

    .hint { font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:6px; }

    /* Nota informativa IVA per i regimi senza IVA */
    .iva-info { display:flex; align-items:flex-start; gap:8px; padding:11px 13px; border-radius: var(--r); background:var(--green-soft); color:#1A7355; font-size:13.5px; font-weight:600; line-height:1.4; }
    .iva-info svg { flex-shrink:0; margin-top:1px; }

    .check-row { display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-weight:500; min-height:44px; padding:6px 0; }
    /* 24px minimi: WCAG 2.2 AA (2.5.8) sui bersagli toccabili. */
    .check-row input { width:24px; height:24px; margin-top:1px; accent-color:var(--primary); flex-shrink:0; }

    /* Risultato */
    .res-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
    .res-row .k { color:var(--ink-soft); font-size:15px; }
    .res-row .v { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:17.5px; color:var(--ink); font-weight:600; white-space:nowrap; }
    .res-row .v.txt { font-family:inherit; font-size:13.5px; font-weight:600; color:#1A7355; white-space:normal; text-align:right; }
    .res-tot { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:18px 0 4px; }
    .res-tot .k { font-family:var(--font-display); font-weight:700; font-size:19px; }
    .res-tot .v { font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--primary-deep); white-space:nowrap; }
    .dicitura { background:var(--cream-soft); border:1px solid var(--line-soft); border-radius: var(--r); padding:16px; font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-top:16px; white-space:pre-wrap; }
    .calc-placeholder { text-align:center; color:var(--muted); padding:30px 10px; }
    [data-calc-result].busy [data-calc-out] { opacity:.45; transition:opacity .15s; }
    .calc-invito { margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft); text-align:center; }
    .calc-invito p { font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:12px; }
    .calc-invito .btn { width:100%; min-height:46px; }
    /* Scheda via email: stessa colonna dell'invito ma tono minore — è l'uscita per chi
       una fattura la doveva fare oggi e un gestionale non lo sta cercando. */
    .calc-scheda { margin-top:16px; padding-top:16px; border-top:1px dashed var(--line-soft); }
    .calc-scheda p { font-size:13px; color:var(--ink-soft); line-height:1.55; margin-bottom:10px; }
    .calc-scheda .news-form { display:flex; gap:8px; flex-wrap:wrap; }
    .calc-scheda .news-form input { flex:1; min-width:150px; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius: var(--r); font:inherit; font-size:14px; background:#fff; }
    .calc-scheda .news-form .btn { min-height:44px; }
    .calc-scheda .beta-mini-note { margin-top:10px; font-size:11.5px; color:var(--muted); line-height:1.5; }

    @media (max-width:860px) {
      .calc-grid { grid-template-columns:1fr; gap:18px; margin-top:28px; }
      .calc-card { padding:22px 18px; }
      .amount-wrap input { font-size:30px; }
      .res-tot .v { font-size:27px; }
    }