/* Hallo Pronto — SOLO regole di pagina, sul design system V2 di riservati.de (04.10.2026).
   Barra, menu del telefono, piede, lingua e pulsanti NON stanno qui: il layout estende themes/riservati/templates/base.html
   e i componenti hanno la struttura di quelli di riservati.de (riservati-v2.css + sito.css + riservati-v2.js).
   Qui solo griglie e blocchi delle pagine del prodotto, con i token del tema (--rv-*, --fs-*, --space-*), i suoi caratteri
   (Unbounded, Barlow Condensed) e i suoi colori. Nessun colore nuovo: l'oro scuro #8a5f00 è quello degli h3 del V2. */

.sv-solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv-centro { text-align: center; }
.sv-nota { font-size: var(--rv-note); color: rgb(var(--rv-ink-rgb) / 0.78); letter-spacing: 0.02em; }
.sv-nota a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Anteprima: banner e bolli (solo con SITO_VOICEBOT_ANTEPRIMA) ─────────────────────── */
.sv-anteprima { background: var(--rv-error); color: var(--rv-white); text-align: center; padding: var(--rv-space-2) var(--rv-space-4); font-size: var(--rv-note); letter-spacing: 0.03em; }
.sv-bollo { display: inline-block; margin: var(--rv-space-2) 0 0; padding: 2px 8px; font-size: var(--rv-note); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6; }
.sv-bollo--rosso { background: var(--rv-error); color: var(--rv-white); }
.sv-bollo--giallo { background: var(--rv-accent); color: var(--rv-ink); }
.sv-anteprima ~ main .sv-stato-rosso { outline: 2px dashed var(--rv-error); outline-offset: 4px; }

/* ── Hero (polish 05.10.2026): cinematografico, con una foto vera come la prima schermata di riservati.de ──────────
   Sul computer la foto riempie la prima schermata e un velo d'inchiostro da sinistra tiene il testo leggibile (contrasto
   AA sul velo, non sulla foto); sotto i 1024 px la foto sta sopra, il testo sotto, e il velo sfuma la foto nel fondo.
   Due tagli (contenuti.FOTO['hero']): 16:9 da 641 px, 4:3 sul telefono. La foto è l'LCP: fetchpriority alta, misure
   scritte (nessuno spostamento), AVIF e WebP. */
.sv-hero { position: relative; display: grid; align-items: center; min-height: min(calc(100vh - 72px), 860px); background: var(--rv-ink); color: var(--rv-cream); overflow: hidden; isolation: isolate; }
.sv-hero__foto { position: absolute; inset: 0; z-index: -1; display: block; }
.sv-hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 38%; animation: sv-foto-in 1.6s ease-out both; }
/* Il velo è pieno (≥ 0,9) fin dove arriva la colonna di testo (--sv-colonna) e si apre dopo: contrasto AA misurato sul
   pixel più chiaro sotto ogni riga (strumenti/accessibilita.mjs + analizza_contrasto.py del diario del polish). */
.sv-hero { --sv-colonna: calc(var(--space-section-x) + 34rem); }
.sv-hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--rv-ink-rgb) / 0.95) 0, rgb(var(--rv-ink-rgb) / 0.9) var(--sv-colonna), rgb(var(--rv-ink-rgb) / 0.3) calc(var(--sv-colonna) + 10rem), rgb(var(--rv-ink-rgb) / 0) calc(var(--sv-colonna) + 20rem)), linear-gradient(0deg, rgb(var(--rv-ink-rgb) / 0.5) 0%, rgb(var(--rv-ink-rgb) / 0) 28%); }
.sv-hero__testo { position: relative; max-width: calc(34rem + 2 * var(--space-section-x)); padding: var(--space-hero-y) var(--space-section-x); animation: heroIn 0.9s ease both; }
.sv-hero__accento { display: block; color: var(--rv-accent); }
.sv-hero__prezzo { margin-top: var(--space-20); font-family: Unbounded, sans-serif; font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.6; color: rgb(var(--rv-cream-rgb) / 0.88); text-wrap: pretty; }
.sv-hero__prezzo a { color: var(--rv-cream); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sv-hero__riservati { margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid rgb(var(--rv-cream-rgb) / 0.2); max-width: 30rem; }
@keyframes sv-foto-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
.sv-eyebrow { font-family: Unbounded, sans-serif; font-weight: 400; font-size: var(--fs-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; color: rgb(var(--rv-ink-rgb) / 0.84); margin-bottom: var(--space-28); text-align: center; }
.sv-hero .sv-eyebrow { text-align: left; font-size: 0.8125rem; letter-spacing: 0.22em; margin-bottom: var(--space-20); }
.sv-eyebrow--chiaro { color: var(--rv-accent); }
.sv-titolo { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: var(--fs-h2); line-height: 1.04; text-transform: uppercase; color: var(--rv-ink); text-align: center; max-width: 1080px; margin: 0 auto var(--space-48); text-wrap: balance; }
.sv-titolo--hero { font-size: clamp(2.25rem, 1.15rem + 3.6vw, 4.75rem); line-height: 0.98; color: var(--rv-white); text-align: left; margin: 0 0 var(--space-28); max-width: none; }
.sv-titolo--chiaro { color: var(--rv-cream); }
.sv-lead { font-family: Unbounded, sans-serif; font-weight: 300; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); line-height: 1.6; letter-spacing: 0.02em; color: rgb(var(--rv-cream-rgb) / 0.9); max-width: 36rem; text-wrap: pretty; }
.sv-lead--centro { margin: calc(-1 * var(--space-28)) auto var(--space-48); text-align: center; }
.sv-lead--scuro { color: rgb(var(--rv-ink-rgb) / 0.8); }
.sv-bottoni { display: flex; flex-wrap: wrap; gap: var(--space-element-gap); margin-top: var(--space-36); }
.sv-hero .sv-bottoni { margin-top: var(--space-28); }
.sv-btn { font-family: Unbounded, sans-serif; font-weight: 700; font-size: var(--rv-note); letter-spacing: 0.09em; text-transform: uppercase; padding: var(--space-16) var(--space-32); display: inline-flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; border: 1.5px solid transparent; min-height: 48px; }
.sv-btn.btn-sweep-a { background: var(--rv-accent); color: var(--rv-ink); border-color: var(--rv-accent); }
.sv-btn--contorno-chiaro { background: transparent; color: var(--rv-white); border-color: rgb(255 255 255 / 0.55); font-weight: 400; }
.sv-btn--contorno-scuro { background: transparent; color: var(--rv-ink); border-color: var(--rv-ink); font-weight: 400; }
.sv-btn--pieno { width: 100%; }
.sv-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.sv-btn[hidden] { display: none !important; }
/* ── Prima schermata (giro di chiusura 1 del polish, R1/R2 dell'audit di Sol, 05.10.2026) ──────────────────────────────
   In ogni vista misurata la prima schermata porta la proposta (H1 e lead), il prezzo previsto e il pulsante principale:
   computer 1920×1080…1280×720, tablet 1180×820, 1024×768, 820×1180, 768×1024, telefoni 412×915…360×640; a 320×568 almeno
   il pulsante. La misura la fa Chrome (strumenti/prime_viste.mjs nel diario del giro), qui stanno le regole:
   - computer bassi: ritmo verticale più stretto e H1 limitato anche dall'altezza della finestra;
   - da 900 a 1279 px (tablet orizzontali, portatili piccoli): testo e foto AFFIANCATI — testo su fondo pieno a sinistra,
     foto a destra a tutta altezza (la foto sopra il testo riempiva la prima schermata e tagliava l'H1);
   - sotto i 900 px: foto sopra, testo sotto (come prima); al telefono l'altezza della foto si adatta all'altezza della
     finestra, fra 120 px e il 16:9, perché proposta, prezzo e pulsante restino nella prima schermata;
   - fino a 340 px (320×568): niente foto (altezza zero, non display:none: un passaggio per «none» riavvia la dissolvenza
     d'ingresso della foto, e la cattura a pagina intera di Chrome la fotografava quasi nera anche a 1440 px), caratteri
     un poco più piccoli: lì il messaggio e il pulsante vengono prima. */
@media (min-width: 1280px) and (max-height: 860px) {
  .sv-hero__testo { padding-top: var(--space-40); padding-bottom: var(--space-40); }
  .sv-hero .sv-eyebrow { margin-bottom: var(--space-14); }
  .sv-titolo--hero { font-size: min(clamp(2.25rem, 1.15rem + 3.6vw, 4.75rem), 8vh); margin-bottom: var(--space-20); }
  .sv-hero .sv-bottoni { margin-top: var(--space-22); }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .sv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .sv-hero__foto { position: relative; inset: auto; z-index: 0; grid-column: 2; grid-row: 1; align-self: stretch; }
  .sv-hero__foto img { object-position: 66% 34%; }
  .sv-hero__foto::after { background: linear-gradient(90deg, var(--rv-ink) 0, rgb(var(--rv-ink-rgb) / 0) 28%); }
  .sv-hero__testo { grid-column: 1; grid-row: 1; padding: var(--space-40) var(--space-40) var(--space-40) var(--space-section-x); max-width: 40rem; }
  .sv-hero .sv-eyebrow { margin-bottom: var(--space-14); }
  .sv-titolo--hero { font-size: min(clamp(2.25rem, 1.15rem + 3.6vw, 4.75rem), 8vh); margin-bottom: var(--space-20); }
  .sv-hero .sv-bottoni { margin-top: var(--space-22); }
}
@media (max-width: 899px) {
  .sv-hero { display: block; min-height: 0; }
  .sv-hero__foto { position: relative; z-index: 0; aspect-ratio: 16 / 9; }
  .sv-hero__foto img { object-position: 62% 34%; }
  .sv-hero__foto::after { background: linear-gradient(180deg, rgb(var(--rv-ink-rgb) / 0) 45%, rgb(var(--rv-ink-rgb) / 0.88) 82%, var(--rv-ink) 100%); }
  .sv-hero__testo { margin-top: calc(-1 * var(--space-40)); padding-top: 0; max-width: 46rem; }
  .sv-titolo--hero { max-width: 20ch; }
}
/* Al telefono la foto non è mai più alta del 16:9 (la 4:3 del polish 1–5 spingeva il pulsante sotto la prima schermata,
   giro 3) e si abbassa fino a 120 px sulle finestre basse (375×667, 390×664 di Safari con le barre, 360×640): 30,5rem è
   l'altezza di barra, testo, prezzo e pulsante del tedesco, la lingua più lunga. Il volto resta nel taglio.
   Il velo scuro si misura dal FONDO della foto, non in percentuale: l'occhiello sale di 40 px sulla foto, e con la foto
   bassa (152 px a 360×640) l'82 % cadeva sopra di lui — pixel peggiore sotto l'occhiello 4,44:1 (ripresa 2). */
@media (max-width: 640px) {
  .sv-hero__foto { aspect-ratio: auto; height: clamp(7.5rem, calc(100vh - 30.5rem), 56.25vw); height: clamp(7.5rem, calc(100svh - 30.5rem), 56.25vw); }
  .sv-hero__foto::after { background: linear-gradient(180deg, rgb(var(--rv-ink-rgb) / 0) 45%, rgb(var(--rv-ink-rgb) / 0.88) calc(100% - 3.5rem), var(--rv-ink) 100%); }
  .sv-hero__foto img { object-position: 50% 30%; }
  .sv-hero .sv-eyebrow { margin-bottom: var(--space-12); }
  .sv-titolo--hero { margin-bottom: var(--space-14); }
  .sv-hero .sv-lead { line-height: 1.5; }
  .sv-hero__prezzo { margin-top: var(--space-14); }
  .sv-hero .sv-bottoni { margin-top: var(--space-18); }
  .sv-bottoni .sv-btn { flex: 1 1 100%; }
}
@media (max-width: 340px) {
  .sv-hero__foto { height: 0; }
  .sv-hero__testo { margin-top: 0; padding-top: var(--space-28); }
  /* «Assistente telefonico IA» andava a capo e lasciava «IA» da solo (ripresa 2) */
  .sv-hero .sv-eyebrow { letter-spacing: 0.14em; }
  .sv-titolo--hero { font-size: 2rem; }
  .sv-hero .sv-lead { font-size: 0.9375rem; }
}

/* ── Fascia di fiducia (polish): tante colonne quante voci (erano 3 in una griglia da 4), icona del segno B, niente
   maiuscolo forzato, a capo con la sillabazione della lingua invece dello spezzamento a metà parola del tema. ─────── */
.sv-fiducia { background: var(--rv-paper); border-bottom: 1px solid var(--rv-divider); }
.sv-fiducia__lista { list-style: none; max-width: 1200px; margin: 0 auto; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sv-fiducia__voce { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-22) var(--space-component-gap); border-right: 1px solid var(--rv-divider); color: var(--rv-ink); text-align: center; }
.sv-fiducia__voce:last-child { border-right: 0; }
.sv-fiducia__testo { display: inline-flex; align-items: center; gap: var(--space-icon-gap); font-family: Unbounded, sans-serif; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.4; text-align: left; overflow-wrap: normal; hyphens: auto; }
.sv-fiducia__testo .sv-icona { width: 30px; height: 30px; }
.sv-fiducia .sv-bollo { margin: 0; font-size: 0.625rem; padding: 1px 6px; }
@media (max-width: 760px) {
  .sv-fiducia__lista { grid-auto-flow: row; grid-auto-columns: auto; }
  .sv-fiducia__voce { align-items: flex-start; border-right: 0; border-bottom: 1px solid var(--rv-divider); padding: var(--space-14) var(--space-section-x); }
  .sv-fiducia__voce:last-child { border-bottom: 0; }
}

/* ── Sezioni ─────────────────────────────────────────────────────────────────────────── */
.sv-sezione { padding: var(--space-section-y-sm) var(--space-section-x); }
.sv-pagina-home .sv-sezione { padding-top: var(--space-section-y-md); padding-bottom: var(--space-section-y-md); }
.sv-sezione--carta { background: var(--rv-paper); }
.sv-sezione--crema { background: var(--rv-cream); }
.sv-sezione--scura { background: var(--rv-ink); color: var(--rv-cream); }
.sv-h3 { font-family: Unbounded, sans-serif; font-weight: 700; font-size: var(--fs-h3); line-height: 1.35; text-transform: uppercase; color: #8a5f00; margin: 0 0 var(--space-8); text-wrap: pretty; }
.sv-h3--chiaro { color: var(--rv-accent); }
.sv-sezione .rv-text, .sv-carta .rv-text { color: rgb(var(--rv-ink-rgb) / 0.82); line-height: var(--rv-leading); letter-spacing: 0.02em; }
.sv-sezione--scura .rv-text { color: rgb(var(--rv-cream-rgb) / 0.86); }

.sv-passi { list-style: none; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-component-gap); counter-reset: passo; }
.sv-passo { background: var(--rv-white); border: 1px solid var(--rv-divider); padding: var(--space-card-pad-y) var(--space-card-pad-x-sm); }
.sv-passo__numero { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: var(--fs-h2-sm); line-height: 1; color: #8a5f00; margin-bottom: var(--space-14); }

.sv-griglia { list-style: none; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-component-gap); }
.sv-griglia--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
.sv-carta { background: var(--rv-paper); border: 1px solid var(--rv-divider); padding: var(--space-card-pad-y) var(--space-card-pad-x-sm); }
.sv-carta--bianca { background: var(--rv-white); }
.sv-carta--scura { background: rgb(var(--rv-cream-rgb) / 0.06); border-color: rgb(var(--rv-cream-rgb) / 0.16); }
.sv-carta--scura .rv-text { color: rgb(var(--rv-cream-rgb) / 0.86); }
.sv-prova { margin-top: var(--space-14); font-size: var(--rv-note); line-height: var(--rv-leading); color: rgb(var(--rv-ink-rgb) / 0.86); border-top: 1px solid var(--rv-divider); padding-top: var(--space-10); }
.sv-carta--scura .sv-prova { color: rgb(var(--rv-cream-rgb) / 0.72); border-top-color: rgb(var(--rv-cream-rgb) / 0.16); }
/* Limiti di oggi (home): elenco a destra del titolo, una riga di separazione per voce, il trattino oro del tema. */
.sv-limiti { list-style: none; margin: 0; padding: 0; display: grid; }
.sv-limiti li { padding: var(--space-16) 0 var(--space-16) 1.6em; position: relative; color: rgb(var(--rv-cream-rgb) / 0.9); line-height: 1.65; border-top: 1px solid rgb(var(--rv-cream-rgb) / 0.16); max-width: 68ch; }
.sv-limiti li:last-child { border-bottom: 1px solid rgb(var(--rv-cream-rgb) / 0.16); }
.sv-limiti li::before { content: "—"; position: absolute; left: 0; color: var(--rv-accent); }
@media (max-width: 900px) {
  .sv-passi, .sv-griglia, .sv-griglia--due { grid-template-columns: 1fr; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .sv-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Demo vocale ─────────────────────────────────────────────────────────────────────── */
.sv-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-row-gap); align-items: center; background: var(--rv-ink); color: var(--rv-cream); padding: var(--space-section-y-sm) var(--space-section-x); border-top: 1px solid rgb(var(--rv-cream-rgb) / 0.08); }
.sv-demo .sv-eyebrow, .sv-demo .sv-titolo { text-align: left; margin-left: 0; }
.sv-demo .sv-titolo { margin-bottom: var(--space-28); }
.sv-demo__extra { margin-top: var(--space-18); font-size: var(--rv-note); color: rgb(var(--rv-cream-rgb) / 0.8); }
.sv-demo__pannello { background: rgb(var(--rv-cream-rgb) / 0.05); border: 1px solid rgb(var(--rv-cream-rgb) / 0.16); padding: var(--space-card-pad-y) var(--space-card-pad-x-sm); display: flex; flex-direction: column; align-items: center; gap: var(--space-14); max-width: 520px; width: 100%; justify-self: center; }
.sv-orb { position: relative; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--rv-cream), var(--rv-accent) 38%, #8a5f00 72%, var(--rv-ink)); box-shadow: 0 0 52px 2px rgb(var(--rv-accent-rgb) / 0.32); }
.sv-orb__onda { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 3px; align-items: center; height: 38%; width: 62%; justify-content: center; }
.sv-orb__onda i { width: 3px; height: 100%; border-radius: 3px; background: var(--rv-ink); transform: scaleY(0.35); }
.sv-orb[data-stato="parla"] .sv-orb__onda i { animation: sv-onda 0.7s ease-in-out infinite; }
.sv-orb[data-stato="ascolta"] .sv-orb__onda i { animation: sv-onda 1.5s ease-in-out infinite; }
@keyframes sv-onda { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }
.sv-demo__stato { font-family: Unbounded, sans-serif; font-weight: 600; font-size: var(--rv-note); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rv-accent); min-height: 1.5em; text-align: center; }
.sv-demo__tempo { font-size: var(--rv-note); color: rgb(var(--rv-cream-rgb) / 0.75); min-height: 1.5em; margin-top: calc(-1 * var(--space-10)); }
.sv-demo__dialogo { width: 100%; max-height: 220px; overflow-y: auto; display: none; }
.sv-demo__dialogo[data-pieno="1"] { display: block; }
.sv-msg { font-size: 0.875rem; line-height: 1.45; margin: 0 0 var(--space-8); padding: var(--space-8) var(--space-12); max-width: 92%; border: 1px solid rgb(var(--rv-cream-rgb) / 0.16); }
.sv-msg b { display: block; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; margin-bottom: 2px; }
.sv-msg--ai { background: rgb(var(--rv-accent-rgb) / 0.12); margin-right: auto; }
.sv-msg--tu { background: rgb(var(--rv-cream-rgb) / 0.06); margin-left: auto; }
.sv-demo__consenso { display: flex; gap: var(--space-10); align-items: flex-start; font-size: var(--rv-note); line-height: var(--rv-leading); color: rgb(var(--rv-cream-rgb) / 0.86); cursor: pointer; text-align: left; }
.sv-demo__consenso input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--rv-accent); }
.sv-demo__comandi { display: flex; gap: var(--space-element-gap); flex-wrap: wrap; justify-content: center; }
.sv-demo__nota { font-size: var(--rv-note); line-height: var(--rv-leading); color: rgb(var(--rv-cream-rgb) / 0.75); text-align: center; }
.sv-demo audio { position: absolute; width: 0; height: 0; opacity: 0; }
/* Demo spenta (giro di chiusura 1 del polish, R3 di Sol: la fascia scura era alta ~556 px sul telefono): una fascia chiara
   e bassa sul fondo carta dei prezzi, separata da un filetto — lo stato in una riga, la richiesta di test come
   collegamento, accanto l'avviso IA con la sua misura (F3) in testo corrente. Niente occhiello, pulsante o riquadro:
   un'assenza non prende il volume di una funzione. Colori e caratteri del tema, nessun colore nuovo. */
.sv-demo--pausa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-20) var(--space-row-gap); align-items: start; background: var(--rv-paper); color: var(--rv-ink); border-top: 1px solid var(--rv-divider); padding-top: var(--space-40); padding-bottom: var(--space-40); }
.sv-pausa__titolo { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.45; letter-spacing: 0.01em; color: var(--rv-ink); margin: 0 0 var(--space-10); text-wrap: balance; }
.sv-pausa__testo { margin: 0; }
.sv-avviso-ia { display: grid; gap: var(--space-8); }
.sv-avviso-ia .sv-h3 { display: flex; align-items: center; gap: var(--space-10); margin: 0; font-size: 0.8125rem; letter-spacing: 0.04em; }
.sv-avviso-ia .sv-icona { width: 22px; height: 22px; color: var(--rv-ink); flex: none; }
.sv-avviso-ia__testo { margin: 0; max-width: 68ch; font-size: 0.8125rem; line-height: var(--rv-leading); color: rgb(var(--rv-ink-rgb) / 0.82); }
@media (max-width: 900px) {
  .sv-demo { grid-template-columns: 1fr; }
}

/* ── Prezzi (polish): due carte con le stesse righe nello stesso ordine, un'etichetta per tipo, cifre grandi allineate,
   il conto che le rende confrontabili, le condizioni come nota a sinistra sotto le carte. IVA esclusa accanto a OGNI
   cifra (F2 dell'audit di Sol). ──────────────────────────────────────────────────────────────────────────────── */
.sv-piani { list-style: none; max-width: 900px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-28); align-items: stretch; }
.sv-piano { background: var(--rv-white); border: 1px solid var(--rv-divider); padding: var(--space-card-pad-y) var(--space-card-pad-x); display: flex; flex-direction: column; gap: var(--space-12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sv-piano:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgb(var(--rv-ink-rgb) / 0.45); }
.sv-piano--consigliato { border: 2px solid var(--rv-ink); }
.sv-piano__etichetta { align-self: flex-start; border: 1px solid var(--rv-ink); color: var(--rv-ink); font-family: Unbounded, sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; }
.sv-piano--consigliato .sv-piano__etichetta { background: var(--rv-accent); border-color: var(--rv-accent); }
.sv-piano__nome { font-family: Unbounded, sans-serif; font-weight: 700; font-size: var(--fs-h3); text-transform: uppercase; color: var(--rv-ink); margin-top: var(--space-6); }
.sv-piano__prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-8); }
.sv-piano__cifra { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: var(--fs-h2-xl); line-height: 1; color: var(--rv-ink); }
.sv-piano__mese { font-family: Unbounded, sans-serif; font-size: 0.875rem; color: rgb(var(--rv-ink-rgb) / 0.8); }
/* IVA esclusa sotto la cifra (giro di chiusura 1, F2): stessi token della riga «/ Monat». */
.sv-piano__iva { display: block; flex-basis: 100%; margin-top: var(--space-6); font-size: var(--rv-note); color: rgb(var(--rv-ink-rgb) / 0.78); }
.sv-piano__oltre { font-size: var(--rv-note); color: rgb(var(--rv-ink-rgb) / 0.78); }
.sv-piano__righe { list-style: none; display: grid; gap: var(--space-10); align-content: start; margin: var(--space-10) 0 var(--space-20); padding: var(--space-16) 0 0; border-top: 1px solid var(--rv-divider); flex: 1; }
.sv-piano__righe li { padding-left: 1.6em; position: relative; color: rgb(var(--rv-ink-rgb) / 0.86); line-height: var(--rv-leading); }
.sv-piano__righe li::before { content: "✓"; position: absolute; left: 0; color: #8a5f00; font-weight: 700; }
.sv-conto { max-width: 900px; margin: var(--space-28) auto 0; padding: var(--space-16) var(--space-20); background: rgb(var(--rv-accent-rgb) / 0.16); border-left: 3px solid var(--rv-accent); color: var(--rv-ink); font-size: 0.9375rem; line-height: 1.6; }
.sv-condizioni { list-style: none; max-width: 900px; margin: var(--space-20) auto 0; padding: 0; display: grid; gap: var(--space-8); color: rgb(var(--rv-ink-rgb) / 0.82); font-size: 0.8125rem; line-height: 1.6; }
.sv-prezzi-note { max-width: 900px; margin: var(--space-14) auto 0; display: grid; gap: var(--space-6); }
@media (max-width: 760px) { .sv-piani { grid-template-columns: 1fr; max-width: 560px; } }
@media (prefers-reduced-motion: reduce) { .sv-piano, .sv-piano:hover { transition: none; transform: none; } }

/* ── Domande ─────────────────────────────────────────────────────────────────────────── */
.sv-faq { max-width: 860px; margin: 0 auto; border-top: 1px solid rgb(var(--rv-ink-rgb) / 0.18); }
.sv-faq__voce { border-bottom: 1px solid rgb(var(--rv-ink-rgb) / 0.18); }
.sv-faq__voce summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-14); min-height: 56px; padding: var(--space-16) 0; font-family: Unbounded, sans-serif; font-weight: 500; color: var(--rv-ink); }
.sv-faq__voce summary::-webkit-details-marker { display: none; }
.sv-faq__voce summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: #8a5f00; flex: none; transition: transform 0.2s; }
.sv-faq__voce[open] summary::after { transform: rotate(45deg); }
.sv-faq__voce p { padding: 0 0 var(--space-18); max-width: 70ch; }
.sv-due .sv-faq { max-width: none; margin: 0; }
.sv-faq__voce summary:hover { color: #8a5f00; }
.sv-faq__voce summary:focus-visible { outline: 2px solid var(--rv-ink); outline-offset: 4px; }

/* ── Fascia finale ───────────────────────────────────────────────────────────────────── */
.sv-fascia { background: var(--rv-ink); color: var(--rv-cream); padding: var(--space-section-y-xs) var(--space-section-x); text-align: center; border-top: 1px solid rgb(var(--rv-cream-rgb) / 0.08); }
.sv-fascia .sv-lead { margin-left: auto; margin-right: auto; }
/* Chiusura della home (polish): la foto vera di una persona al telefono, a destra; testo a sinistra sul velo. */
.sv-fascia:has(.sv-fascia__foto) { position: relative; display: grid; align-items: center; min-height: clamp(28rem, 46vw, 40rem); padding: 0; text-align: left; overflow: hidden; isolation: isolate; }
.sv-fascia__foto { position: absolute; inset: 0; z-index: -1; display: block; }
.sv-fascia__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 35%; }
.sv-fascia { --sv-colonna: calc(var(--space-section-x) + 40rem); }
.sv-fascia__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--rv-ink-rgb) / 0.95) 0, rgb(var(--rv-ink-rgb) / 0.92) var(--sv-colonna), rgb(var(--rv-ink-rgb) / 0.35) calc(var(--sv-colonna) + 10rem), rgb(var(--rv-ink-rgb) / 0.1) 100%); }
.sv-fascia__testo { padding: var(--space-section-y-sm) var(--space-section-x); max-width: 46rem; }
.sv-fascia__testo .sv-titolo { text-align: left; margin: 0 0 var(--space-20); }
.sv-fascia__testo .sv-lead { margin: 0; }
.sv-fascia__mail { margin-top: var(--space-20); font-size: 0.875rem; color: rgb(var(--rv-cream-rgb) / 0.85); }
.sv-fascia__mail a { color: var(--rv-cream); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1279px) {
  .sv-fascia:has(.sv-fascia__foto) { display: block; min-height: 0; }
  .sv-fascia__foto { position: relative; z-index: 0; aspect-ratio: 16 / 9; }
  .sv-fascia__foto img { object-position: 78% 35%; }
  .sv-fascia__foto::after { background: linear-gradient(180deg, rgb(var(--rv-ink-rgb) / 0) 55%, var(--rv-ink) 100%); }
  .sv-fascia__testo { padding-top: var(--space-28); }
}

/* ── Modulo ──────────────────────────────────────────────────────────────────────────── */
.sv-modulo { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-28); }
.sv-campo { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; border: 0; }
.sv-campo--largo { grid-column: 1 / -1; }
.sv-campo label, .sv-campo legend { font-family: Unbounded, sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--rv-ink); }
.sv-campo legend { margin-bottom: var(--space-8); }
.sv-campo input[type="text"], .sv-campo input[type="email"], .sv-campo input[type="tel"], .sv-campo select, .sv-campo textarea { width: 100%; min-height: 48px; padding: var(--space-10) var(--space-12); font: inherit; color: var(--rv-ink); background: var(--rv-white); border: 1px solid var(--rv-border); border-radius: 0; }
.sv-campo textarea { min-height: 120px; resize: vertical; }
.sv-scelte { display: flex; flex-wrap: wrap; gap: var(--space-10) var(--space-28); margin-bottom: var(--space-10); }
.sv-scelta { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; cursor: pointer; font-weight: 400 !important; }
.sv-scelta input { width: 20px; height: 20px; accent-color: var(--rv-ink); flex: none; }
.sv-scelta--privacy { align-items: flex-start; line-height: var(--rv-leading); }
.sv-scelta--privacy input { margin-top: 3px; }
.sv-scelta--privacy a { text-decoration: underline; }
.sv-trappola { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sv-invio { display: flex; align-items: center; gap: var(--space-20); flex-wrap: wrap; }
.sv-errori { max-width: 860px; margin: 0 auto var(--space-28); padding: var(--space-14) var(--space-18); border: 2px solid var(--rv-error); color: var(--rv-error); background: var(--rv-white); }
@media (max-width: 640px) { .sv-modulo { grid-template-columns: 1fr; } }

/* ── Pagine brevi e legali ───────────────────────────────────────────────────────────── */
.sv-pagina-breve { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; }
.sv-legale { max-width: 860px; margin: 0 auto; color: var(--rv-ink); }
.sv-legale .sv-titolo { text-align: left; margin-left: 0; }
.sv-legale h2.sv-h3 { margin-top: var(--space-36); }
.sv-legale p, .sv-legale address { margin: var(--space-10) 0; line-height: var(--rv-leading); font-style: normal; }
.sv-legale a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .sv-hero__testo { animation: none; }
  .sv-orb__onda i { animation: none !important; }
  .sv-faq__voce summary::after { transition: none; }
}

/* ── Marchio: logo B «fumetto-girandola» e firma «ein Produkt von riservati.» (04.10.2026) ─────────────────────────
   Immagini del marchio (static/sito_voicebot/img/marca/, solo tracciati, nessun carattere): lockup compatto (.sv-marca) e
   riga di firma (.sv-firma), nelle versioni per fondo scuro (--scuro) e per fondo chiaro (--chiaro). La barra è scura in
   cima e bianca dopo lo scorrimento (riservati-v2.js mette data-scrolled="1"): lo scambio lo fa il CSS; prima schermata,
   menu e piede hanno sempre il fondo scuro. Altezze da --sv-marca-h e --sv-firma-h, la larghezza segue il disegno.
   La firma italiana e inglese è alta 59 unità invece di 50 (discendenti di p e y), con la stessa cima e la stessa linea
   di base della tedesca: .sv-firma--alta la fa 1,18 volte più alta e restituisce la differenza col margine negativo, così
   corpo e ingombro sono gli stessi nelle tre lingue. Il tema forza le immagini della barra (.nav-logo-group img: alte
   20 px sotto 1024 px, larghe 78 px sotto 481 px): qui la misura si riprende con !important. */
.sv-marca, .sv-firma { display: block; width: auto; max-width: none; }
.sv-marca, .nav-logo-group .sv-marca { height: var(--sv-marca-h, 30px) !important; width: auto !important; max-width: none !important; }
.sv-firma, .nav-logo-group .sv-firma { height: var(--sv-firma-h, 11px) !important; width: auto !important; max-width: none !important; }
.sv-firma--alta, .nav-logo-group .sv-firma--alta { height: calc(var(--sv-firma-h, 11px) * 1.18) !important; margin-bottom: calc(var(--sv-firma-h, 11px) * -0.18); }
[data-rv-nav] .sv-marca--chiaro, [data-rv-nav] .sv-firma--chiaro { display: none; }
[data-rv-nav][data-scrolled="1"] .sv-marca--scuro, [data-rv-nav][data-scrolled="1"] .sv-firma--scuro { display: none; }
[data-rv-nav][data-scrolled="1"] .sv-marca--chiaro, [data-rv-nav][data-scrolled="1"] .sv-firma--chiaro { display: block; }
.sv-riservati { display: inline-flex; align-items: center; min-height: 44px; }
.sv-riservati--hero { --sv-firma-h: 15px; }
.sv-riservati--menu, .sv-riservati--footer { --sv-firma-h: 12px; }
.footer-brand .sv-marca { --sv-marca-h: 36px; }
@media (max-width: 900px) { .sv-riservati--hero { --sv-firma-h: 13px; } }
/* Barra: marchio e firma sono un blocco solo (.sv-lockup). Affiancati, con un filetto, dove c'è posto (come nella pagina
   di scelta del logo: lockup alto 30 px, firma 11 px); uno sotto l'altra sul telefono e da 1280 a 1439 px, dove tornano
   le cinque voci: allora la firma sta sotto il wordmark, rientrata fin dove comincia «hallo» (297,1 unità su 258 di
   altezza del lockup), come nel lockup intero del logo, e il pulsante della barra lascia il posto sotto 480 px (resta
   nella prima schermata e nel menu). Il link della firma resta alto 24 px (WCAG 2.5.8) ma l'immagine sta in cima: il
   rientro in alto (24 px meno la firma) rimette al centro della barra ciò che si vede, marchio e firma. */
.sv-lockup { --sv-marca-h: 30px; --sv-firma-h: 11px; display: flex; align-items: center; gap: 14px; min-width: 0; }
.sv-riservati--nav { position: relative; padding-left: 15px; }
.sv-riservati--nav::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px; transform: translateY(-50%); background: rgb(var(--rv-cream-rgb) / 0.25); }
[data-rv-nav][data-scrolled="1"] .sv-riservati--nav::before { background: rgb(var(--rv-ink-rgb) / 0.22); }
/* Senza le voci (≤ 1279 px, sito.css) il gruppo di destra non si allarga: lo spazio resta al marchio. */
@media (max-width: 1279px) { .sv-nav-destra { flex: 0 0 auto !important; } }
@media (max-width: 820px), (min-width: 1280px) and (max-width: 1439px) {
  .sv-lockup { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: calc(24px - var(--sv-firma-h)); }
  .sv-lockup a[href] { min-height: 24px; min-width: 0; }
  .sv-lockup .sv-riservati--nav { align-items: flex-start; padding-left: 0; margin-left: calc(var(--sv-marca-h) * 1.1516); }
  .sv-riservati--nav::before { display: none; }
}
@media (max-width: 820px) { .sv-lockup { --sv-marca-h: 26px; --sv-firma-h: 10px; } }
@media (max-width: 479px) { .sv-nav-cta { display: none !important; } }
/* La frase in testo (giro di chiusura 2, 05.10.2026 — R3 dell'audit 2 di Sol): in barra e nella prima schermata
   «Ein Produkt von riservati.de» è scritta, col dominio per esteso (l'immagine della firma diceva «riservati.» senza «de»,
   e un alt non è ciò che si vede). Stesso carattere della firma — Unbounded 400 per «Ein Produkt von», 700 per il dominio
   come il wordmark — e stesso posto; colori del tema: crema sul fondo scuro, inchiostro sulla barra bianca dopo lo
   scorrimento. In barra il corpo è quello della firma (--sv-firma-fs), nell'hero più grande. Menu e piede tengono la firma
   in immagine del logo B. */
.sv-riservati--testo { font-family: Unbounded, sans-serif; font-weight: 400; font-size: var(--sv-firma-fs, 12px); line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; color: rgb(var(--rv-cream-rgb) / 0.8); text-decoration: none; }
.sv-riservati__dominio { font-weight: 700; color: var(--rv-cream); }
.sv-riservati--testo:hover .sv-riservati__dominio, .sv-riservati--testo:focus-visible .sv-riservati__dominio { text-decoration: underline; text-underline-offset: 3px; }
[data-rv-nav][data-scrolled="1"] .sv-riservati--testo { color: rgb(var(--rv-ink-rgb) / 0.75); }
[data-rv-nav][data-scrolled="1"] .sv-riservati--testo .sv-riservati__dominio { color: var(--rv-ink); }
.sv-lockup { --sv-firma-fs: 12px; }
.sv-riservati--hero.sv-riservati--testo { --sv-firma-fs: 16px; }
@media (max-width: 900px) { .sv-riservati--hero.sv-riservati--testo { --sv-firma-fs: 14px; } }
@media (max-width: 820px) { .sv-lockup { --sv-firma-fs: 11px; } }

/* ── Per chi: le attività ─────────────────────────────────────────────────────────────────────────────────── */
.sv-branchen { list-style: none; max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-10) var(--space-12); }
.sv-branchen li { font-family: Unbounded, sans-serif; font-weight: 500; font-size: var(--rv-note); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rv-ink); background: var(--rv-white); border: 1px solid var(--rv-divider); padding: var(--space-10) var(--space-16); }
.sv-branchen-nota { max-width: 860px; margin: var(--space-40) auto 0; text-align: center; color: rgb(var(--rv-ink-rgb) / 0.82); line-height: var(--rv-leading); }
/* Nella home (polish) l'elenco dei settori è una riga di collegamenti sotto le telefonate d'esempio. */
.sv-esempi .sv-branchen { margin-top: var(--space-40); gap: var(--space-6) var(--space-10); }
.sv-esempi .sv-branchen li { background: none; border: 0; padding: 0; font-weight: 400; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: none; color: rgb(var(--rv-ink-rgb) / 0.82); }
.sv-esempi .sv-branchen li + li::before { content: "·"; margin-right: var(--space-10); color: #8a5f00; }
.sv-esempi .sv-branchen-nota { margin-top: var(--space-20); font-size: 0.875rem; max-width: 62ch; }
.sv-esempi .sv-branchen-tutte { margin-top: var(--space-16); text-align: center; }
@media (max-width: 760px) {
  .sv-esempi .sv-branchen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; gap: var(--space-10) var(--space-16); max-width: 30rem; }
  .sv-esempi .sv-branchen li + li::before { content: none; }
  .sv-esempi .sv-branchen-nota { text-align: left; }
}


/* ── Pagine per la ricerca (SEO+GEO, 04.10.2026): testa con la risposta breve, briciole, elenchi, tabella, fatti ────
   Solo token e componenti del tema (--rv-*, --space-*, --fs-*, Unbounded, Barlow Condensed); nessun colore nuovo. La
   testa è testo (nessuna immagine): è lei l'LCP della pagina. */
.sv-briciole { background: var(--rv-paper); border-bottom: 1px solid var(--rv-divider); padding: var(--space-10) var(--space-section-x); }
.sv-briciole ol { list-style: none; max-width: 920px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); font-size: var(--rv-note); letter-spacing: 0.02em; color: rgb(var(--rv-ink-rgb) / 0.78); }
.sv-briciole li { display: inline-flex; align-items: center; min-height: 24px; }
.sv-briciole li + li::before { content: "/"; margin-right: var(--space-10); color: rgb(var(--rv-ink-rgb) / 0.5); }
.sv-briciole a { color: var(--rv-ink); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 24px; }
.sv-testa { background: var(--rv-ink); color: var(--rv-cream); padding: var(--space-section-y-sm) var(--space-section-x); }
.sv-testa > * { max-width: 920px; margin-left: auto; margin-right: auto; }
.sv-testa .sv-eyebrow { text-align: left; }
.sv-titolo--testa { color: var(--rv-white); text-align: left; margin-bottom: var(--space-28); }
.sv-kurz { font-family: Unbounded, sans-serif; font-weight: 300; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); line-height: 1.6; letter-spacing: 0.02em; color: rgb(var(--rv-cream-rgb) / 0.92); border-left: 3px solid var(--rv-accent); padding-left: var(--space-18); }
.sv-stand { margin-top: var(--space-14); font-size: var(--rv-note); letter-spacing: 0.04em; color: rgb(var(--rv-cream-rgb) / 0.75); }
.sv-testa .sv-bottoni { margin-top: var(--space-28); }
.sv-elenco { list-style: none; max-width: 860px; margin: 0 auto; display: grid; gap: var(--space-12); }
.sv-elenco li { position: relative; padding-left: 1.4em; color: rgb(var(--rv-ink-rgb) / 0.86); line-height: var(--rv-leading); }
.sv-elenco li::before { content: "—"; position: absolute; left: 0; color: #8a5f00; }
.sv-tabella { max-width: 1000px; margin: 0 auto; overflow-x: auto; }
.sv-tabella table { width: 100%; border-collapse: collapse; background: var(--rv-white); color: var(--rv-ink); }
.sv-tabella caption { caption-side: top; text-align: left; padding: 0 0 var(--space-14); font-size: var(--rv-note); color: rgb(var(--rv-ink-rgb) / 0.78); }
.sv-tabella th, .sv-tabella td { border: 1px solid var(--rv-divider); padding: var(--space-12) var(--space-14); text-align: left; vertical-align: top; line-height: var(--rv-leading); }
.sv-tabella thead th, .sv-tabella tbody th { font-family: Unbounded, sans-serif; font-weight: 600; font-size: var(--rv-note); letter-spacing: 0.04em; }
.sv-tabella td:last-child { background: rgb(var(--rv-accent-rgb) / 0.10); }
.sv-fatti { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-28); color: var(--rv-ink); }
.sv-fatti div { border-bottom: 1px solid var(--rv-divider); padding: var(--space-12) 0; }
.sv-fatti dt { font-family: Unbounded, sans-serif; font-weight: 600; font-size: var(--rv-note); letter-spacing: 0.06em; text-transform: uppercase; color: #8a5f00; }
.sv-fatti dd { margin: var(--space-4) 0 0; line-height: var(--rv-leading); }
.sv-branchen a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 24px; }
.sv-branchen-tutte { margin-top: var(--space-28); }
.sv-branchen-tutte a { color: var(--rv-ink); text-decoration: underline; text-underline-offset: 3px; font-family: Unbounded, sans-serif; font-weight: 500; font-size: var(--rv-note); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 640px) { .sv-fatti { grid-template-columns: 1fr; } }
.sv-fatti a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ══ Polish della home (05.10.2026) ═══════════════════════════════════════════════════════════════════════════════════
   Componenti nuovi, sempre con i token del tema (--rv-*, --space-*, --fs-*, Unbounded, Barlow Condensed) e nessun colore
   nuovo: inchiostro, crema, carta, bianco, l'oro del tema e l'oro scuro #8a5f00 degli h3 del V2. Le icone (icone.py) hanno
   il tratto in currentColor e un dettaglio pieno nell'oro. Le animazioni sono brevi e solo di opacità e posizione; con
   prefers-reduced-motion il tema le azzera e qui si tolgono anche i ritardi. */
.sv-icona { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.sv-icona .a { fill: var(--rv-accent); stroke: none; }
.sv-sottotitolo { font-family: Unbounded, sans-serif; font-weight: 300; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; letter-spacing: 0.01em; color: rgb(var(--rv-ink-rgb) / 0.82); max-width: 44rem; margin: calc(-1 * var(--space-28)) auto var(--space-48); text-align: center; text-wrap: pretty; }
.sv-freccia { display: inline-flex; align-items: center; gap: 0.45em; min-height: 24px; font-family: Unbounded, sans-serif; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--rv-ink); text-decoration: underline; text-decoration-color: rgb(var(--rv-ink-rgb) / 0.35); text-underline-offset: 4px; transition: text-decoration-color 0.2s ease; }
.sv-freccia::after { content: "→"; text-decoration: none; transition: transform 0.2s ease; }
.sv-freccia:hover { text-decoration-color: currentColor; }
.sv-freccia:hover::after { transform: translateX(3px); }
.sv-freccia:focus-visible { outline: 2px solid var(--rv-ink); outline-offset: 3px; }

/* Due colonne: titolo a sinistra (fermo mentre si scorre), contenuto a destra. Funzioni, limiti, domande. */
.sv-due { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-row-gap); align-items: start; }
.sv-due__testa { position: sticky; top: calc(72px + var(--space-28)); }
.sv-due__testa .sv-eyebrow, .sv-due__testa .sv-titolo { text-align: left; margin-left: 0; }
.sv-due__testa .sv-titolo { margin-bottom: var(--space-20); }
.sv-due__testa .rv-text { color: rgb(var(--rv-ink-rgb) / 0.82); line-height: 1.6; max-width: 34ch; }
.sv-due__testa .rv-text a { color: var(--rv-ink); text-decoration: underline; text-underline-offset: 3px; }
.sv-due--scura .sv-due__testa .rv-text { color: rgb(var(--rv-cream-rgb) / 0.86); }
@media (max-width: 1023px) {
  .sv-due { grid-template-columns: 1fr; gap: var(--space-36); }
  .sv-due__testa { position: static; }
}

/* ── Per chi: telefonate d'esempio per settore ────────────────────────────────────────────────────────────────────
   Schede senza JavaScript: un gruppo di radio (fieldset + legend, frecce da tastiera) e il pannello della radio scelta,
   per fratello (~). I sei id sono quelli di contenuti.ESEMPI fuori dai ristoranti. Senza CSS si vedono tutti. */
.sv-schede { border: 0; margin: 0 auto; padding: 0; min-width: 0; max-width: 1200px; }
.sv-schede__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sv-schede__etichette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-10); margin-bottom: var(--space-20); }
.sv-scheda { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); min-height: 44px; padding: var(--space-16) var(--space-8); background: var(--rv-white); border: 1px solid var(--rv-divider); color: var(--rv-ink); cursor: pointer; text-align: center; font-family: Unbounded, sans-serif; font-weight: 500; font-size: 0.75rem; line-height: 1.35; letter-spacing: 0.01em; overflow-wrap: normal; hyphens: auto; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.sv-scheda .sv-icona { width: 30px; height: 30px; }
.sv-scheda:hover { border-color: var(--rv-ink); }
#sv-es-praxis:checked ~ .sv-schede__etichette [for="sv-es-praxis"],
#sv-es-kanzlei:checked ~ .sv-schede__etichette [for="sv-es-kanzlei"],
#sv-es-handwerk:checked ~ .sv-schede__etichette [for="sv-es-handwerk"],
#sv-es-geschaefte:checked ~ .sv-schede__etichette [for="sv-es-geschaefte"],
#sv-es-hotel:checked ~ .sv-schede__etichette [for="sv-es-hotel"],
#sv-es-buero:checked ~ .sv-schede__etichette [for="sv-es-buero"] { background: var(--rv-ink); border-color: var(--rv-ink); color: var(--rv-cream); }
#sv-es-praxis:focus-visible ~ .sv-schede__etichette [for="sv-es-praxis"],
#sv-es-kanzlei:focus-visible ~ .sv-schede__etichette [for="sv-es-kanzlei"],
#sv-es-handwerk:focus-visible ~ .sv-schede__etichette [for="sv-es-handwerk"],
#sv-es-geschaefte:focus-visible ~ .sv-schede__etichette [for="sv-es-geschaefte"],
#sv-es-hotel:focus-visible ~ .sv-schede__etichette [for="sv-es-hotel"],
#sv-es-buero:focus-visible ~ .sv-schede__etichette [for="sv-es-buero"] { outline: 3px solid #8a5f00; outline-offset: 3px; }
.sv-schede .sv-esempio { display: none; }
#sv-es-praxis:checked ~ .sv-schede__pannelli [data-sv-esempio="praxis"],
#sv-es-kanzlei:checked ~ .sv-schede__pannelli [data-sv-esempio="kanzlei"],
#sv-es-handwerk:checked ~ .sv-schede__pannelli [data-sv-esempio="handwerk"],
#sv-es-geschaefte:checked ~ .sv-schede__pannelli [data-sv-esempio="geschaefte"],
#sv-es-hotel:checked ~ .sv-schede__pannelli [data-sv-esempio="hotel"],
#sv-es-buero:checked ~ .sv-schede__pannelli [data-sv-esempio="buero"] { display: grid; }
.sv-esempio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--rv-white); border: 1px solid var(--rv-divider); }
.sv-esempio__foto { margin: 0; position: relative; overflow: hidden; background: var(--rv-ink); min-height: 100%; }
.sv-esempio__foto img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sv-esempio__foto--segno { display: grid; place-items: center; min-height: 18rem; color: var(--rv-cream); background: radial-gradient(circle at 30% 25%, rgb(var(--rv-accent-rgb) / 0.22), transparent 55%), var(--rv-ink); }
.sv-esempio__segno .sv-icona { width: 112px; height: 112px; stroke-width: 1.1; }
.sv-telefonata { padding: var(--space-card-pad-y) var(--space-card-pad-x); display: flex; flex-direction: column; gap: var(--space-14); min-width: 0; }
.sv-telefonata__titolo { display: flex; align-items: center; gap: var(--space-10); margin: 0 0 var(--space-6); font-family: Unbounded, sans-serif; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--rv-ink-rgb) / 0.78); }
.sv-telefonata__linea { width: 8px; height: 8px; border-radius: 50%; background: var(--rv-accent); box-shadow: 0 0 0 4px rgb(var(--rv-accent-rgb) / 0.28); animation: sv-linea 2.2s ease-in-out infinite; flex: none; }
@keyframes sv-linea { 0%, 100% { box-shadow: 0 0 0 3px rgb(var(--rv-accent-rgb) / 0.3); } 50% { box-shadow: 0 0 0 7px rgb(var(--rv-accent-rgb) / 0.08); } }
.sv-telefonata__righe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.sv-battuta { max-width: 88%; padding: var(--space-12) var(--space-16); font-size: 0.9375rem; line-height: 1.5; color: var(--rv-ink); animation: sv-battuta 0.4s ease both; }
.sv-battuta__chi { display: block; margin-bottom: 2px; font-family: Unbounded, sans-serif; font-weight: 600; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
/* Il fumetto del logo B: tre angoli tondi, uno vivo verso chi parla. */
.sv-battuta--ai { align-self: flex-start; background: var(--rv-ink); color: var(--rv-cream); border-radius: 18px 18px 18px 4px; }
.sv-battuta--ai .sv-battuta__chi { color: var(--rv-accent); opacity: 1; }
.sv-battuta--tu { align-self: flex-end; background: var(--rv-cream); border-radius: 18px 18px 4px 18px; }
.sv-battuta:nth-child(2) { animation-delay: 0.12s; }
.sv-battuta:nth-child(3) { animation-delay: 0.24s; }
.sv-battuta:nth-child(4) { animation-delay: 0.36s; }
.sv-battuta:nth-child(5) { animation-delay: 0.48s; }
@keyframes sv-battuta { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sv-telefonata__nota { margin-top: var(--space-6); font-size: 0.75rem; line-height: 1.55; letter-spacing: 0.02em; color: rgb(var(--rv-ink-rgb) / 0.78); }
.sv-telefonata__limite { font-size: 0.75rem; line-height: 1.55; color: var(--rv-ink); background: rgb(var(--rv-ink-rgb) / 0.05); border-left: 3px solid #8a5f00; padding: var(--space-10) var(--space-14); }
/* La frase operativa del segreto professionale rimanda ai limiti, dove sta il testo intero (giro di chiusura 1). */
.sv-telefonata__limite a { color: var(--rv-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sv-telefonata .sv-freccia { align-self: flex-start; }
@media (max-width: 1023px) {
  .sv-schede__etichette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-esempio { grid-template-columns: 1fr; }
  .sv-esempio__foto img { aspect-ratio: 16 / 9; }
  .sv-esempio__foto--segno { min-height: 9rem; }
  .sv-esempio__segno .sv-icona { width: 72px; height: 72px; }
}
@media (max-width: 760px) {
  .sv-battuta { max-width: 94%; font-size: 0.875rem; }
}
@media (max-width: 380px) {
  .sv-schede__etichette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── So funktioniert's nella home: tre tappe su un percorso tratteggiato, icona e numero, testo a sinistra ─────────── */
.sv-pagina-home .sv-passi { gap: var(--space-48); position: relative; max-width: 1100px; }
.sv-pagina-home .sv-passi::before { content: ""; position: absolute; top: 36px; left: 72px; right: calc((100% - 2 * var(--space-48)) / 3); height: 0; border-top: 1px dashed rgb(var(--rv-ink-rgb) / 0.4); }
.sv-pagina-home .sv-passo { background: none; border: 0; padding: 0; position: relative; }
.sv-passo__segno { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 0 var(--space-20); border-radius: 50%; background: var(--rv-white); border: 1px solid var(--rv-divider); color: var(--rv-ink); box-shadow: 0 10px 30px -18px rgb(var(--rv-ink-rgb) / 0.5); }
.sv-passo__segno .sv-icona { width: 32px; height: 32px; }
.sv-pagina-home .sv-passo__numero { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 26px; height: 26px; margin: 0; border-radius: 50%; background: var(--rv-ink); color: var(--rv-cream); font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 0.9375rem; line-height: 1; }
.sv-pagina-home .sv-passo .sv-h3 { margin-bottom: var(--space-10); }
.sv-pagina-home .sv-passo .rv-text { max-width: 36ch; line-height: 1.6; }
@media (max-width: 900px) {
  .sv-pagina-home .sv-passi { gap: var(--space-36); }
  .sv-pagina-home .sv-passi::before { top: 36px; bottom: 36px; left: 36px; right: auto; height: auto; border-top: 0; border-left: 1px dashed rgb(var(--rv-ink-rgb) / 0.4); }
  .sv-pagina-home .sv-passo { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--space-20); }
  .sv-pagina-home .sv-passo .sv-passo__segno { grid-row: span 3; margin: 0; }
}

/* ── Funzioni: elenco a due colonne con le icone, senza carte ─────────────────────────────────────────────────────── */
.sv-funzioni { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-28); }
.sv-funzione { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-16); align-items: start; padding-top: var(--space-20); border-top: 1px solid rgb(var(--rv-ink-rgb) / 0.16); }
.sv-funzione__segno { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rv-white); color: var(--rv-ink); }
.sv-funzione__segno .sv-icona { width: 26px; height: 26px; }
.sv-funzione .sv-h3, .sv-elenco-funzioni .sv-h3, .sv-vertrauen .sv-h3 { font-weight: 600; font-size: 1rem; line-height: 1.35; letter-spacing: 0.01em; text-transform: none; color: var(--rv-ink); margin: 0 0 var(--space-8); }
.sv-funzione .rv-text { max-width: 62ch; line-height: 1.6; }

/* ── Ristoranti: la scena (foto + telefonata d'esempio) accanto all'elenco delle funzioni in più ─────────────────── */
.sv-ristoranti { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-row-gap); align-items: start; }
.sv-ristoranti__scena { background: var(--rv-white); border: 1px solid var(--rv-divider); }
.sv-ristoranti__scena .sv-esempio__foto img { aspect-ratio: 16 / 9; }
.sv-ristoranti__intro { display: flex; gap: var(--space-14); align-items: flex-start; margin: 0 0 var(--space-20); font-family: Unbounded, sans-serif; font-weight: 300; font-size: 1.0625rem; line-height: 1.6; color: rgb(var(--rv-ink-rgb) / 0.86); }
.sv-ristoranti__intro .sv-icona { width: 34px; height: 34px; color: var(--rv-ink); }
.sv-elenco-funzioni { list-style: none; margin: 0; padding: 0; display: grid; }
.sv-elenco-funzioni li { padding: var(--space-16) 0; border-top: 1px solid var(--rv-divider); }
.sv-elenco-funzioni .rv-text { color: rgb(var(--rv-ink-rgb) / 0.82); line-height: var(--rv-leading); }
@media (max-width: 1023px) { .sv-ristoranti { grid-template-columns: 1fr; } }

/* ── Chi c'è dietro e dove stanno i dati ─────────────────────────────────────────────────────────────────────────── */
.sv-vertrauen { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-28); }
.sv-vertrauen__voce { background: var(--rv-white); border: 1px solid var(--rv-divider); padding: var(--space-card-pad-y) var(--space-card-pad-x); display: flex; flex-direction: column; gap: var(--space-10); }
.sv-vertrauen .sv-h3 { display: flex; align-items: center; gap: var(--space-12); }
.sv-vertrauen .sv-h3 .sv-icona { width: 30px; height: 30px; }
.sv-vertrauen .rv-text { color: rgb(var(--rv-ink-rgb) / 0.84); line-height: 1.6; }
.sv-indirizzo { font-style: normal; font-size: 0.875rem; line-height: 1.75; color: rgb(var(--rv-ink-rgb) / 0.84); }
.sv-vertrauen__link { margin-top: auto; padding-top: var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-10) var(--space-28); }
@media (max-width: 760px) { .sv-vertrauen { grid-template-columns: 1fr; } }

/* ── Barra: il pulsante con lo stesso corpo dei pulsanti della pagina (era 18 px accanto a voci di 12) ─────────────── */
.sv .nav-cta-btn { font-size: 0.75rem !important; padding: 13px 22px !important; }

@media (prefers-reduced-motion: reduce) {
  .sv-hero__foto img, .sv-battuta, .sv-telefonata__linea { animation: none !important; }
  .sv-freccia::after, .sv-scheda { transition: none; }
}