/* SCALA TIPOGRAFICA OPLYO
   ---------------------------------------------------------------------------------------------------------------
   Un solo punto di controllo per i testi della landing (nav, hero, titoli, card, recensioni, FAQ, CTA finale, footer).
   Caricato PER ULTIMO: sovrascrive le dimensioni sparse nei fogli precedenti senza toccare colori, spazi o layout.
   Restano FUORI i mockup dell'interfaccia di Oplyo (telefono hero, notifiche .hn, finestre app .lfd_/.cx_/.dsl_/.rs_/.fv_):
   sono riproduzioni del prodotto in scala ridotta, non tipografia della pagina.

   Principio: i testi che fanno la gerarchia (display, titolo di sezione, sottotitolo) sono FLUIDI e seguono lo stesso
   intervallo della scala desktop di oplyo-ai.css §23 (radice 90% a <=1366 px -> 100% a 1920 px): sui laptop restano in
   proporzione con gli spazi (rem), sui monitor grandi raggiungono il massimo e non crescono oltre. I testi di lettura
   (card, FAQ, note, pulsanti, footer) sono FISSI in px: la leggibilita' non dipende dal viewport.

   Ruolo                      <640        640 -> 1920 (fluido)                 >=1920     line-height
   --ty-display (h1 hero)     34          45 -> 56   (34px + 1.15vw)           56         1.15 / 1.1 (>=1024)
   --ty-h2 (titolo sezione)   30          32 -> 48   (24px + 1.3vw)            48         1.2 / 1.06 (>=768)
   --ty-lead (sottotitolo)    18          18 -> 20   (solo >=1024)             20         1.55 / 1.6
   --ty-cta (h2 CTA finale)   30          30 -> 36   (22px + 1vw, da 768)     36         1.2 / 1.12  (sempre < h2)
   --ty-h3 24 w700 · --ty-h3s 20 w700 · --ty-card 18 · --ty-card-sm 16 · --ty-note/foot/label 14 · --ty-badge 12
   --ty-quote 16 (titolo recensione 18 w600, nome 16 w600, ruolo 14) · FAQ domanda 18 w600, risposta 18
   --ty-nav 15 (992-1439) / 16 (>=1440) · --ty-btn 16 w600 */

:root {
  --ty-display: calc(34px * var(--vs));  --ty-display-lh: 1.15;  --ty-display-ls: -.035em;  --ty-display-w: 600;
  --ty-h2: calc(30px * var(--vs));       --ty-h2-lh: 1.2;        --ty-h2-ls: -.025em;
  --ty-cta: calc(30px * var(--vs));      --ty-cta-lh: 1.2;
  --ty-lead: calc(18px * var(--vs));     --ty-lead-lh: 1.5556;
  --ty-h3: calc(24px * var(--vs));       --ty-h3-lh: 1.3333;     --ty-h3-ls: -.02em;
  --ty-h3s: calc(20px * var(--vs));      --ty-h3s-lh: 1.4;
  --ty-card: calc(18px * var(--vs));     --ty-card-lh: 1.5556;
  --ty-card-sm: calc(16px * var(--vs));  --ty-card-sm-lh: 1.5;
  --ty-quote: calc(16px * var(--vs));    --ty-quote-lh: 1.75;    --ty-quote-lg: calc(18px * var(--vs));
  --ty-q-title: calc(18px * var(--vs));  --ty-q-title-lh: 1.3333;
  --ty-name: calc(16px * var(--vs));     --ty-role: calc(14px * var(--vs));        --ty-role-lh: 1.4286;
  --ty-faq-q: calc(18px * var(--vs));    --ty-faq-q-lh: 1.5556;
  --ty-faq-a: calc(18px * var(--vs));    --ty-faq-a-lh: 1.5556;
  --ty-btn-lg: calc(16px * var(--vs));   --ty-btn-lg-lh: 1.5;
  --ty-btn: calc(16px * var(--vs));      --ty-btn-lh: 1.5;
  --ty-nav: calc(16px * var(--vs));
  --ty-label: calc(14px * var(--vs));    --ty-badge: calc(12px * var(--vs));
  --ty-note: calc(14px * var(--vs));     --ty-note-lh: 1.4286;
  --ty-foot: calc(14px * var(--vs));     --ty-foot-lh: 1.4286;
  --ty-ft: calc(15px * var(--vs));       --ty-ft-lh: 1.5;   /* footer: link, intestazioni, descrizione, copyright, selettore lingua (prima 14, e il selettore 16) */
}
@media (min-width: 640px)  { :root { --ty-display: clamp(calc(45px * var(--vs)), calc(34px * var(--vs)) + 1.15vw, calc(56px * var(--vs))); --ty-h2: clamp(calc(30px * var(--vs)), calc(24px * var(--vs)) + 1.3vw, calc(48px * var(--vs))); } }
@media (min-width: 768px)  { :root { --ty-h2-lh: 1.06; --ty-cta: clamp(calc(30px * var(--vs)), calc(22px * var(--vs)) + 1vw, calc(36px * var(--vs))); --ty-cta-lh: 1.12; } }
@media (min-width: 992px) and (max-width: 1439px) { :root { --ty-nav: calc(15px * var(--vs)); } }
@media (min-width: 1024px) { :root { --ty-display-lh: 1.1; --ty-display-ls: -.03em; --ty-lead: clamp(calc(18px * var(--vs)), calc(14px * var(--vs)) + .3125vw, calc(20px * var(--vs))); --ty-lead-lh: 1.6; } }

/* ---- navigazione ---------------------------------------------------------------------------------------- */
html body .hd_nav a { font-size: var(--ty-nav); line-height: 1.5; font-weight: 500; }
html body .hd_login { font-size: var(--ty-nav); line-height: 1.5; font-weight: 500; }
html body .hd .btn { font-size: var(--ty-nav); line-height: var(--ty-btn-lh); font-weight: 600; }

/* ---- pulsanti -------------------------------------------------------------------------------------------- */
html body .btn { font-size: var(--ty-btn); line-height: var(--ty-btn-lh); }
html body .btn--lg, html body .plan .btn { font-size: var(--ty-btn-lg); line-height: var(--ty-btn-lg-lh); font-weight: 600; }

/* ---- hero ------------------------------------------------------------------------------------------------ */
html body .hero .hero_title, html body .hero .hero_title .ht-ig, html body .hero .hero_title .ht-ai, html body .hero .hero_title .ht-ai * {
  font-size: var(--ty-display); line-height: var(--ty-display-lh); letter-spacing: var(--ty-display-ls); font-weight: var(--ty-display-w);
}
/* Larghezza del titolo: con 61px il limite 22ch/50rem lo spezzava su 3 righe con la centrale corta. Il contenitore largo 64rem lo mantiene su 2 righe. */
@media (min-width: 768px) { html body .hero--demo .hero_copy { max-width: 64rem; } html body .hero--demo .hero_title { max-width: 40ch; } }
html body .hero .hero_sub { font-size: var(--ty-lead); line-height: var(--ty-lead-lh); font-weight: 400; }
html body .hero .trust li { font-size: var(--ty-card-sm); line-height: 1.5; font-weight: 500; white-space: normal; }   /* normal: a 16px la voce piu' lunga EN sforava il viewport a 375px */

/* ---- titoli e sottotitoli di sezione ----------------------------------------------------------------------- */
html body .h2 { font-size: var(--ty-h2); line-height: var(--ty-h2-lh); letter-spacing: var(--ty-h2-ls); }
html body .final .h2, html body .final .h2 .final_acc { font-size: var(--ty-cta); line-height: var(--ty-cta-lh); }
html body .lead, html body .problem .head .lead { font-size: var(--ty-lead); line-height: var(--ty-lead-lh); }
html body .head .lead { text-wrap: balance; }   /* a 20px i sottotitoli andavano a capo con una parola sola sull'ultima riga */

/* ---- Come funziona (titoli e testi dei passi) -------------------------------------------------------------- */
html body .hws_h { font-size: var(--ty-h3); line-height: var(--ty-h3-lh); letter-spacing: var(--ty-h3-ls); font-weight: 700; }
html body .hws_p { font-size: var(--ty-card); line-height: var(--ty-card-lh); }

/* ---- Controllo ----------------------------------------------------------------------------------------------- */
html body .control .h3 { font-size: var(--ty-h3s); line-height: var(--ty-h3s-lh); letter-spacing: 0; font-weight: 700; }
html body .control .h3 + p { font-size: var(--ty-card); line-height: var(--ty-card-lh); }

/* ---- Per chi (card piccole) --------------------------------------------------------------------------------- */
html body .uses .h3 { font-size: var(--ty-h3s); line-height: var(--ty-h3s-lh); letter-spacing: 0; font-weight: 700; }
html body .uses .uc_goal { font-size: var(--ty-card-sm); line-height: var(--ty-card-sm-lh); }
html body .uses .head .h2 { font-size: var(--ty-h2); white-space: normal; }   /* niente riduzione automatica su mobile: il titolo va a capo */
html body .uses_cta p { font-size: var(--ty-note); line-height: var(--ty-note-lh); }

/* ---- Recensioni ----------------------------------------------------------------------------------------------- */
html body .vc_title { font-size: var(--ty-q-title); line-height: var(--ty-q-title-lh); font-weight: 600; letter-spacing: -.01em; }
html body .vc_text p { font-size: var(--ty-quote); line-height: var(--ty-quote-lh); }
html body .vc_item--lg .vc_text p { font-size: var(--ty-quote-lg); line-height: 1.5556; }
html body .vc_who b { font-size: var(--ty-name); font-weight: 600; }
html body .vc_who small { font-size: var(--ty-role); line-height: var(--ty-role-lh); }
html body .vc_note { font-size: var(--ty-note); line-height: var(--ty-note-lh); }

/* ---- Prezzi (la base e' gia' in px in oplyo-ai.css; qui solo cio' che divergeva) ----------------------- */
html body .seg_badge, html body .gift, html body .pill, html body .tick_tag { font-size: var(--ty-badge); }
html body .plan_badge { font-size: var(--ty-label); }
html body .plan .ticks li b { font-size: var(--ty-card-sm); line-height: var(--ty-card-sm-lh); font-weight: 600; }
html body .plan .ticks li span { font-size: var(--ty-note); line-height: var(--ty-note-lh); }
html body .plan .ticks .tick_tag { font-size: var(--ty-badge); }
html body .seg button { font-size: var(--ty-btn); line-height: var(--ty-btn-lh); font-weight: 500; }
html body .seg_note { font-size: var(--ty-btn); line-height: var(--ty-btn-lh); }
html body .price > span > i.pill { font-size: var(--ty-badge); line-height: 16px; }
html body .pricing .head .lead { line-height: var(--ty-lead-lh); }
html body .plan_note, html body .plan_foot, html body .seg_note { font-size: var(--ty-note); line-height: var(--ty-note-lh); }
html body .plan_off, html body .plan_micro { font-size: var(--ty-card-sm); line-height: var(--ty-card-sm-lh); }

/* ---- FAQ -------------------------------------------------------------------------------------------------------- */
html body .qa summary h3 { font-size: var(--ty-faq-q); line-height: var(--ty-faq-q-lh); font-weight: 600; letter-spacing: 0; }
html body .qa_a p { font-size: var(--ty-faq-a); line-height: var(--ty-faq-a-lh); }

/* ---- footer e note --------------------------------------------------------------------------------------------- */
html body .ft_col p, html body .ft_col a, html body .ft_brand p, html body .ft_id, html body .ft_low, html body .ft_low * { font-size: var(--ty-ft); line-height: var(--ty-ft-lh); }
html body .ft_brand p { line-height: 1.6; }
html body .ft_col p { font-weight: 600; }
html body .ft .oplyo-lang button, html body .ft .oplyo-lang_cur { font-size: var(--ty-ft); line-height: var(--ty-ft-lh); }

/* ---- widget WhatsApp, barra sticky mobile, menu lingua ------------------------------------------------------- */
html body .wa, html body .wa span { font-size: var(--ty-note); line-height: var(--ty-note-lh); font-weight: 600; }
html body .oplyo-sticky_btn { font-size: var(--ty-btn); line-height: var(--ty-btn-lh); }
html body .oplyo-lang_item { font-size: var(--ty-foot); }

/* ---- MOBILE (<= 767 px): gerarchia e ritmo, audit visivo 12/10 --------------------------------------------------
   Solo telefoni: da 768 px in su tutto resta com'era. Valori effettivi (x --vs .95): titolo di sezione 28,5 px (invariato),
   titolo del passo/della card 24 -> 20,9 (prima era 80% del titolo di sezione e dello stesso peso: i due livelli si leggevano uguali),
   testo di card e passi 17,1 -> 16,2, FAQ 17,1 -> 16,2 (domanda 16,2 w600). Sottotitoli (17,1) e note (13,3) invariati. */
@media (max-width: 767px) {
  :root {
    --ty-h3: calc(22px * var(--vs));       --ty-h3-lh: 1.27;
    --ty-card: calc(17px * var(--vs));     --ty-card-lh: 1.55;
    --ty-faq-q: calc(17px * var(--vs));    --ty-faq-q-lh: 1.45;
    --ty-faq-a: calc(17px * var(--vs));    --ty-faq-a-lh: 1.55;
  }
  html body .hws_h { font-weight: 650; letter-spacing: -.022em; }

  /* Barra loghi -> Come funziona: meno aria sopra e sotto i loghi, titolo di sezione piu' vicino alla barra */
  html body .tl { padding-block: 1.75rem 1.5rem; }
  html body .tl .tl_title { margin-bottom: 1.125rem; }
  html body .sec.how { padding-block-start: 2.5rem; }
  /* passo = UNA card (come "Solo persone in target" nel Controllo): titolo, testo e demo nello stesso riquadro bianco.
     La demo perde ombra e larghezza ridotta (86%): dentro la card riempie la colonna, con la sola cornice sottile. */
  html body .hws, html body .hws.is-rev { gap: 1rem; padding: 1.25rem 1.125rem 1.125rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
  html body .hws_tx { gap: .5rem; }
  /* la cornice sottile sta sul contenitore della demo (altezza riservata dal JS = stato finale), non sulla finestra: la demo
     cresce DENTRO una cornice di misura fissa, quindi nessun vuoto sotto la finestra e nessun salto durante la sequenza */
  html body .hws_demo { border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); overflow: hidden; }
  html body .hws .rw { width: 100%; max-width: none; margin-inline: 0; border: 0; border-radius: 0; box-shadow: none; }
  html body .hws_list { gap: 1rem; }
}

/* ---- CTA fissa + barra WhatsApp (<= 991 px): superficie piena sotto il pulsante ----------------------------------
   Il gradiente arrivava solo al 96% di opacita': il titolo che passava sotto il pulsante restava visibile come un'ombra
   grigia fra pulsante e barra WhatsApp. Ora la fascia e' opaca dal 34% in giu' (la dissolvenza in alto resta). */
@media (max-width: 991px) {
  html body .oplyo-sticky { background: linear-gradient(180deg, rgba(252, 252, 251, 0), #fcfcfb 34%); }
}

/* ---- RITMO VERTICALE DELLE SEZIONI ------------------------------------------------------------------------------
   Un solo punto di controllo per l'intestazione di sezione (.head = .h2 + .lead): prima ogni sezione aveva la propria
   regola sparsa nei fogli precedenti (titolo -> sottotitolo 7-13 px, sottotitolo -> contenuto 20-48 px). Scala in rem:
   segue la radice (90-95% sui laptop, 100% da 1920 px) come titoli e padding, senza zoom.
     --rh-title  titolo -> sottotitolo        12 px mobile, 14 px da 768 px
     --rh-head   sottotitolo -> contenuto     32 px mobile -> 52 px (scala fluida)
     --rh-tight  contenuto che e' gia' un controllo/carosello a bordo sfumato (Prezzi, Recensioni): 28 px
   Le vecchie regole di margine/gap per sezione in oplyo-ai.css sono state rimosse: questo e' l'unico punto. */
:root { --rh-title: .75rem; --rh-head: 2rem; --rh-tight: 1.75rem; }
@media (min-width: 768px) { :root { --rh-title: .875rem; --rh-head: clamp(2.25rem, 1.25rem + 2.4vw, 3.25rem); --rh-tight: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); } }
html body .sec .head { gap: var(--rh-title); margin-bottom: var(--rh-head); }
html body .sec.pricing, html body .sec.voices { --rh-head: var(--rh-tight); }
@media (min-width: 768px) {
  /* Come funziona: i passi sono righe affiancate di altezza diversa; l'intervallo fra righe resta maggiore dell'intestazione ma non diventa un vuoto */
  html body .hws_list { gap: clamp(3rem, 1.5rem + 4vw, 5.5rem); }
}
@media (min-width: 992px) { html body .sec.how { padding-block: var(--sec); } }
/* Recensioni: il carosello ha il bordo superiore sfumato, quindi sopra il titolo basta meno aria; allineato a Prezzi (55% del padding di sezione) */
html body .sec.voices { padding-block-start: calc(var(--sec) * .55); }
/* Come funziona 768-991 px: colonna singola; testo e demo condividono la stessa colonna centrata (prima il testo era a tutta larghezza e la demo centrata e piu' stretta) */
@media (min-width: 768px) and (max-width: 991px) {
  html body .hws { justify-items: center; }
  html body .hws_tx, html body .hws_demo { width: 100%; }
  html body .hws_tx { max-width: 25rem; }
}