/* assets/marketing/pagine/home.css — stili della sola homepage (index.html)

   TF-MKT-REFACTOR-2026-10-06. Qui ci sono i blocchi <style> che stavano sparsi nella
   pagina, nello stesso ordine in cui stavano, ognuno con un'intestazione «[n] sezione».
   Il menu e' in ../nav.css, il wall Trustpilot in ../trustpilot.css.

   Rispetto alla pagina di partenza, due interventi (commit a parte):
   - tolte tre sezioni di CSS MORTO, senza alcun elemento in pagina ne' classe aggiunta
     da script (verificato su HTML, script inline, main-*.js, tf-topnav, tf-launchbar,
     vendor): le stelline TurboBot (.tf-ai-spark*, .pf-card-turbobot), le animazioni del
     vecchio hero (.hero-word, .hero-glass-card, .hero-notif-*, ... e i loro 15 @keyframes)
     e le card .pf-card / .pf-glow / .pf-mini della vecchia sezione funzionalita';
   - la parola accento con il gradiente animato (tfHeroGradient) e' dichiarata UNA volta
     per le quattro sezioni che la usano (era copiata quattro volte, @keyframes compreso).

   Ordine dei fogli nella home: main → tf-marketing → tf-tw-supplement → nav →
   trustpilot → home. I selettori di questo file (hv4c1a-, cfa-, pfd-, tf-nfa, tfpbd,
   stat-card, tf-arrow, tf-demo-model, tf-rotator) non toccano menu ne' recensioni. */

/* ═══ [1] Hero V4c-1A — <section class="hv4c1a-hero"> ═══ */
/* ============================================================
   HV4c-1a — Declinazione A "Essenziale"
   Base: HV4c-1 "Pannello Chiaro". Copy ridotto a 4 blocchi:
   titolo, sottotitolo di una riga, riga CTA, riga trust unica
   (Trustpilot + canale SDI + badge Google Play).
   Eliminati: bullets, microcopy sotto CTA, "Setup in 2 min".
   Respiro verticale generoso (>=28px tra i gruppi). Zero
   movimento, pannello pastello destro invariato.
   ============================================================ */
.hv4c1a-hero {
position: relative;
background: #fff;
min-height: min(94vh, 840px);
display: flex;
align-items: stretch;
overflow-x: hidden;
overflow-x: clip;
}

/* ---------- Colonna copy (52%) ---------- */
.hv4c1a-copy {
position: relative;
z-index: 2;
width: 52%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
/* allineato alla stessa colonna del main-container (max 1290px, inset 20px) */
padding: 170px 112px 92px max(20px, calc((100vw - 1290px) / 2 + 20px));
}
@media (min-width: 1440px) {
/* a >=1440px il main-container azzera il padding-inline */
.hv4c1a-copy { padding-left: calc((100vw - 1290px) / 2); }
}

.hv4c1a-h1 {
margin: 0 0 30px;
max-width: 17ch;
font-size: clamp(42px, 4.8vw, 58px);
line-height: 1.08;
letter-spacing: -0.025em;
font-weight: 700;
color: #0f172a;
}

/* ---------- Parola accento: la firma gradiente della home ---------- */
/* TF-HERO-SEMPLICE-GC-2026-07-19: firma gradiente di brand (effetto dashboard, senza fucsia).
   TF-MKT-REFACTOR-2026-10-06: dichiarazione, animazione e reduced-motion erano copiati
   QUATTRO volte (hero, Come funziona, Funzionalita' premium, fatture ricevute): ora sono
   qui, una volta, per tutte e quattro le parole. Nessuna regola delle quattro sezioni
   tocca queste proprieta' su questi elementi, quindi l'anticipo nella cascata e' neutro.
   Fuori dalla home la stessa firma e' .tf-grad di assets/tf-marketing.css. */
.hv4c1a-h1-accent,
#cfa-come .cfa-grad,
.pfd-grad,
.tfpbd__grad {
background: linear-gradient(120deg, #f59e0b 0%, #fb923c 45%, #ef4444 95%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% 100%;
animation: tfHeroGradient 8s ease-in-out infinite;
}
.hv4c1a-h1-accent { background-position: 0% 50%; }
@keyframes tfHeroGradient { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@media (prefers-reduced-motion: reduce) {
.hv4c1a-h1-accent, #cfa-come .cfa-grad, .pfd-grad, .tfpbd__grad { animation: none; }
}

.hv4c1a-sub {
margin: 0 0 40px;
max-width: 44ch;
font-size: 18px;
line-height: 1.6;
font-weight: 400;
color: rgba(15,23,42,.62);
}

/* ---------- CTA ---------- */
.hv4c1a-ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.hv4c1a-cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
color: #fff;
text-decoration: none;
background-color: #f59e0b;
box-shadow: 0 1px 2px rgba(15,23,42,.08);
transition: background-color .15s ease, box-shadow .15s ease;
}
.hv4c1a-cta-primary:hover { background-color: #d97706; }
.hv4c1a-cta-bolt { flex: none; display: block; width: 15px; height: 15px; }
.hv4c1a-cta-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
padding: 14px 28px;
border: 1px solid rgba(15,23,42,.16);
font-size: 15px;
font-weight: 600;
color: #0f172a;
text-decoration: none;
background-color: transparent;
transition: background-color .15s ease;
}
.hv4c1a-cta-ghost:hover { background-color: rgba(15,23,42,.04); }
.hv4c1a-cta-primary:focus-visible,
.hv4c1a-cta-ghost:focus-visible,
.hv4c1a-tp:focus-visible,
.hv4c1a-store:focus-visible {
outline: 2px solid #b45309;
outline-offset: 2px;
}

/* ---------- Riga trust unica: Trustpilot + professionisti + Google Play ---------- */
.hv4c1a-trust {
margin-top: 44px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 20px;
}
.hv4c1a-tp {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.hv4c1a-tp-stars { display: inline-flex; gap: 2px; }
.hv4c1a-tp-star {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
background: #00b67a;
border-radius: 3px;
}
.hv4c1a-tp-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13.5px;
font-weight: 600;
color: #0f172a;
}
.hv4c1a-tp-label svg { flex: none; display: block; }
.hv4c1a-tp-meta {
font-weight: 400;
color: rgba(15,23,42,.6);
margin-left: 2px;
}
.hv4c1a-trust-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13.5px;
color: rgba(15,23,42,.65);
}
.hv4c1a-trust-item strong { font-weight: 600; color: #0f172a; }

/* ---------- Badge store (bianco, testo nero) ----------
   TF-MSSTORE-BADGE-2026-07-21: la cornice era nata per un solo store
   (.hv4c1a-gplay). Ora e condivisa (.hv4c1a-store) e la classe per-store resta
   solo come modificatore della misura dell icona, che cambia perche un logo e
   quadrato e l altro e piu alto che largo.
   NB: niente nomi di brand nei commenti — i test cercano quelle stringhe nel
   markup e un commento le farebbe passare a vuoto (gia successo 3 volte). */
/* TF-HERO-STORES-2026-07-27 — i badge sono UN oggetto solo dentro il flusso.
   La fila .hv4c1a-trust va a capo da sola (flex-wrap) e prima i badge erano
   figli sciolti: a seconda dei pixel disponibili se ne staccava uno e restava
   orfano su una riga sua — a 375px in un modo, a 390px in un altro. Con un
   contenitore proprio o stanno entrambi sulla riga, o scendono entrambi.
   `flex:none` perche' dentro un flex un gruppo si lascerebbe comprimere fino a
   spezzare le due pillole (stessa trappola di feedback_svg_flex_item_needs_flexnone). */
.hv4c1a-stores {
display: flex;
flex: none;
flex-wrap: wrap;
align-items: center;
gap: 10px;
/* TF-BADGE-APPLE-MOBILE-2026-08-04: con TRE badge la larghezza max-content del
   gruppo supera il viewport phone e `flex:none` (voluto, anti-schiacciamento)
   gli impedisce di comprimersi: sbordava a destra e l'App Store usciva tagliato.
   Il tetto al 100% lascia lavorare il flex-wrap INTERNO: il terzo badge scende
   su una seconda riga invece di sparire oltre il bordo. */
max-width: 100%;
}
.hv4c1a-store {
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 14px 0 11px;
background: #fff;
border: 1px solid rgba(15,23,42,.18);
border-radius: 8px;
text-decoration: none;
box-shadow: 0 1px 2px rgba(15,23,42,.06);
transition: background-color .15s ease, box-shadow .15s ease;
}
.hv4c1a-store:hover { background-color: #fafafa; box-shadow: 0 2px 5px rgba(15,23,42,.10); }
.hv4c1a-store-icon { flex: none; display: block; }
.hv4c1a-gplay .hv4c1a-store-icon { width: 24px; height: 26px; }
.hv4c1a-msstore .hv4c1a-store-icon { width: 22px; height: 22px; }
/* glifo Apple: rapporto 3:4, pieno — a parita' di altezza pesa piu' dei
   loghi colorati, quindi scende un filo sotto il triangolo Play */
.hv4c1a-appstore .hv4c1a-store-icon { width: 18px; height: 24px; }
.hv4c1a-store-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
}
.hv4c1a-store-top {
font-size: 8px;
font-weight: 500;
letter-spacing: .08em;
line-height: 1;
color: rgba(15,23,42,.65);
text-transform: uppercase;
}
.hv4c1a-store-name {
font-size: 16px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
color: #0f172a;
}

/* ---------- Pannello pastello (48%) ---------- */
.hv4c1a-panel {
position: absolute;
top: 128px;                 /* parte sotto l'header flottante */
right: 0;
bottom: 28px;               /* aria in fondo alla hero */
width: 48%;
z-index: 1;
border-radius: 40px 0 0 40px;
background: #fff7ed;
border: 1px solid #fde68a;
border-right: 0;
}
/* Duo prodotto DENTRO il pannello, centrato, senza sbordo (~8% più grande) */
.hv4c1a-duo {
position: absolute;
top: 50%;
left: 4%;
width: 92%;
max-width: min(990px, calc(150vh - 240px));
transform: translateY(-50%);
user-select: none;
pointer-events: none;
}
.hv4c1a-mac {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 24px 48px rgba(15,23,42,.16));
}
.hv4c1a-phone {
position: absolute;
right: 0;
bottom: -14px;
width: 136px;
height: auto;
filter: drop-shadow(0 12px 22px rgba(15,23,42,.2));
}

/* ---------- Tablet e mobile: pannello sotto il copy ---------- */
@media (max-width: 1023px) {
.hv4c1a-hero {
display: block;
min-height: 0;
padding-top: 130px;
}
.hv4c1a-copy {
width: auto;
padding: 8px 20px 0 20px;
}
.hv4c1a-h1 { max-width: 15ch; }
.hv4c1a-trust { margin-top: 40px; }
.hv4c1a-panel {
position: relative;
top: auto;
right: auto;
bottom: auto;
width: auto;
margin: 44px 16px 12px;
border-radius: 28px;
border-right: 1px solid #fde68a;
overflow: hidden;
}
/* duo dentro il pannello; il margine inferiore copre l'overhang dell'iPhone */
.hv4c1a-duo {
position: relative;
top: auto;
left: auto;
width: min(92%, 600px);
max-width: 100%;
margin: clamp(28px, 6vw, 48px) auto 40px;
transform: none;
}
.hv4c1a-mac { filter: drop-shadow(0 18px 36px rgba(15,23,42,.14)); }
.hv4c1a-phone { width: 116px; }
}

@media (max-width: 639px) {
.hv4c1a-hero { padding-top: 130px; }
.hv4c1a-h1 { font-size: clamp(34px, 9.4vw, 42px); margin-bottom: 28px; }
.hv4c1a-sub { font-size: 16.5px; margin-bottom: 32px; }
.hv4c1a-ctas {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.hv4c1a-trust { gap: 14px 16px; margin-top: 36px; }
/* niente max-width qui: "Microsoft Store" e piu lungo di "Google Play" e un
   tetto fisso lo troncherebbe. I badge si dimensionano sul contenuto e la
   riga trust va a capo da sola (flex-wrap). */
.hv4c1a-store { height: 42px; padding: 0 12px 0 10px; gap: 8px; }
.hv4c1a-gplay .hv4c1a-store-icon { width: 21px; height: 23px; }
.hv4c1a-msstore .hv4c1a-store-icon { width: 19px; height: 19px; }
.hv4c1a-store-name { font-size: 14.5px; }
.hv4c1a-panel { margin: 36px 12px 12px; border-radius: 24px; }
.hv4c1a-duo { width: min(94%, 500px); margin: clamp(24px, 7vw, 40px) auto 34px; }
.hv4c1a-phone { width: 94px; right: 0; bottom: -10px; }
}

/* ═══ [2] Numeri in evidenza (.stat-card) — sezione dopo la trust bar ═══ */
/* Counter animation */
@keyframes counterPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Card entrance */
@keyframes cardSlideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Glow pulse on icon */
@keyframes iconGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
50% { box-shadow: 0 0 20px 4px rgba(245, 158, 11, 0.15); }
}
.stat-card {
animation: cardSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }
.stat-card:hover .stat-icon {
animation: iconGlow 2s ease-in-out infinite;
}
.stat-card:hover .stat-number {
animation: counterPulse 0.4s ease-in-out;
}
/* Counter count-up effect */
.stat-number {
font-variant-numeric: tabular-nums;
will-change: transform;
}

/* ═══ [3] Come funziona CF-A — <section id="cfa-come"> ═══ */
/* TF-COMEFUNZIONA-CF-A-2026-07-20 — palette risanata: SOLO ambra + slate/bianco */
#cfa-come .cfa-tabbar{border-color:#e2e8f0;background:rgba(255,255,255,.88)}
#cfa-come .cfa-tab{color:rgba(30,41,59,.72);-webkit-tap-highlight-color:transparent}
#cfa-come .cfa-tab[aria-selected="false"]:hover{color:#b45309}
#cfa-come .cfa-tab.cfa-tab-on{color:#fff}
#cfa-come .cfa-tab:focus-visible{outline:2px solid #b45309;outline-offset:2px}
#cfa-come .cfa-ind{background:#1e293b;box-shadow:0 6px 18px -8px rgba(30,41,59,.55)}
#cfa-come .cfa-frame{border-color:#e2e8f0;background:#fff}
#cfa-come .cfa-pane{background:linear-gradient(140deg,#fffdf5 0%,#fef3c7 100%)}
#cfa-come .cfa-card{border:1px solid rgba(180,83,9,.16);background:rgba(255,255,255,.78);box-shadow:0 8px 24px -14px rgba(120,53,15,.35)}
#cfa-come .cfa-ic{box-shadow:0 6px 14px -6px rgba(120,53,15,.5)}
#cfa-come .cfa-ic-1{background:#f59e0b}
#cfa-come .cfa-ic-2{background:#d97706}
#cfa-come .cfa-ic-3{background:#b45309}
#cfa-come .cfa-ic-4{background:#92400e}
#cfa-come .cfa-st{color:#1e293b}
#cfa-come .cfa-sd{color:#64748b}
#cfa-come .cfa-conn-line{display:block;width:1px;height:20px;background:#cbd5e1}
#cfa-come .cfa-conn-caret{display:block;color:#94a3b8;margin-top:-1px}
@media (min-width:1024px){#cfa-come .cfa-conn-line{height:24px}}
@media (prefers-reduced-motion: reduce){
#cfa-come .cascade-step-1,#cfa-come .cascade-step-2,#cfa-come .cascade-step-3,#cfa-come .cascade-step-4,
#cfa-come .cascade-arrow-1,#cfa-come .cascade-arrow-2,#cfa-come .cascade-arrow-3{animation:none!important;opacity:1!important;transform:none!important}
#cfa-come .progress-check .ring{opacity:0!important}
#cfa-come .progress-check .check{opacity:1!important;stroke-dashoffset:0!important;animation:none!important}
#cfa-come .progress-check{animation:none!important}
}
.cfa-panels{height:860px;position:relative;overflow:hidden}
/* TF-CFA-MOBILE-2026-07-27 — stessa storia del range 768-1279 qui sotto, che
   era gia' stata corretta: il frame a misura fissa piu' `overflow:hidden` taglia
   il contenuto quando il contenuto cresce. Sul mobile era rimasta aperta.
   Misurato sul sito vero a 375px: il pannello 1 chiede 877px, il frame ne dava
   860, e il bottone "Scopri di piu" finiva 8px SOTTO il taglio — mozzato a
   meta' e, in quella parte, nemmeno cliccabile.
   La card interna aveva `h-[300px]` fisso mentre il suo contenuto ne misura
   317 (il titolo va su tre righe a 375px): diventa auto con un minimo, cosi'
   cresce col testo invece di spingerlo fuori. @media esplicita e non varianti
   `sm:` arbitrarie, per la stessa ragione scritta due blocchi piu' giu': nel
   CSS compilato del sito quelle varianti non esistono. */
@media (max-width:767.98px){
.cfa-panels{height:900px}
#cfa-come .cfa-pane-card{height:auto;min-height:300px;padding-top:16px;padding-bottom:16px}
}
@media (min-width:768px){.cfa-panels{height:480px}}
@media (min-width:1280px){.cfa-panels{height:624px}}
/* 768-1279px il frame era alto 480px ma la cascata misura 515px (md) e 599px (lg):
   le card venivano tagliate sopra e sotto da overflow:hidden. Alzo il frame a misura
   e faccio riempire i due riquadri al 100%. @media esplicita: le varianti responsive
   arbitrarie tipo `md:h-[480px]` NON esistono nel CSS compilato del sito. */
@media (min-width:768px) and (max-width:1023.98px){
.cfa-panels{height:544px}
#cfa-come [data-cfa-panel] > div{height:100%}
/* con il frame a 544px il paragrafo ci sta intero: via il troncamento di line-clamp-4
   (il sorgente lo toglie solo da lg in su) */
#cfa-come [data-cfa-panel] p.line-clamp-4{display:block;overflow:visible;-webkit-line-clamp:unset}
}
@media (min-width:1024px) and (max-width:1279.98px){
.cfa-panels{height:624px}
#cfa-come [data-cfa-panel] > div{height:100%}
}

/* ═══ [4] Funzionalita' premium FP-D — <section class="pfd"> ═══ */
.pfd{position:relative;background:linear-gradient(180deg,#0f172a 0%,#1e293b 52%,#0f172a 100%);padding:116px 0 124px;overflow:hidden}
.pfd-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.pfd-head{max-width:660px;margin:0 auto 72px;text-align:center}
.pfd-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid rgba(245,158,11,.22);background:rgba(245,158,11,.08);padding:7px 15px 7px 13px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fcd34d;line-height:1}
.pfd-badge svg{width:14px;height:14px;flex:none}
.pfd-h2{margin:24px 0 0;font-weight:700;letter-spacing:-.03em;line-height:1.14;font-size:clamp(29px,4.2vw,46px);color:#fff}
.pfd-br{display:none}
.pfd-sub{margin:20px auto 0;max-width:500px;font-size:15.5px;line-height:1.68;color:rgba(226,232,240,.6)}
.pfd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pfd-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(30,41,59,.4);padding:28px 26px;transition:border-color .3s ease,background-color .3s ease}
.pfd-card:hover{border-color:rgba(245,158,11,.3);background:rgba(30,41,59,.62)}
.pfd-ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:13px;border:1px solid rgba(245,158,11,.2);background:rgba(245,158,11,.1);margin-bottom:20px;flex:none}
.pfd-ico svg{width:22px;height:22px;color:#fbbf24;flex:none}
.pfd-t{margin:0 0 9px;font-size:17px;font-weight:700;letter-spacing:-.015em;color:#fff}
.pfd-d{margin:0 0 22px;font-size:13.5px;line-height:1.62;color:rgba(203,213,225,.62)}
.pfd-new{position:absolute;top:18px;right:18px;border-radius:999px;background:#f59e0b;color:#0f172a;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;line-height:1}
.pfd-mini{margin-top:auto;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);padding:13px}
.pfd-row{display:flex;align-items:center;gap:10px}
.pfd-row+.pfd-row{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)}
.pfd-lbl{min-width:0;font-size:11px;font-weight:500;color:rgba(148,163,184,.92);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfd-chip{margin-left:auto;flex:none;border-radius:999px;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.26);color:#fcd34d;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;line-height:1}
.pfd-bars{display:flex;align-items:flex-end;gap:6px;height:52px;margin-top:15px;padding-bottom:1px;border-bottom:1px solid rgba(255,255,255,.08)}
.pfd-bars span{flex:1;min-width:0;border-radius:3px 3px 0 0;background:#b45309}
.pfd-amt{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.pfd-amt--ok{color:#e2e8f0}
.pfd-amt--warn{color:#fbbf24}
.pfd-amt--late{color:#f87171}
.pfd-fbox{width:32px;height:32px;flex:none;border-radius:9px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);display:flex;align-items:center;justify-content:center}
.pfd-fbox svg{width:15px;height:15px;color:#fbbf24}
.pfd-ftxt{min-width:0;flex:1}
.pfd-ftxt b{display:block;font-size:11px;font-weight:600;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfd-ftxt i{display:block;font-style:normal;font-size:10px;color:rgba(148,163,184,.95);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfd-av{width:24px;height:24px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:#fcd34d;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.22)}
.pfd-role{margin-left:auto;flex:none;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);padding:3px 8px;font-size:9px;font-weight:600;color:#cbd5e1;line-height:1;white-space:nowrap}
.pfd-role--a{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.26);color:#fcd34d}
.pfd-num{width:18px;height:18px;flex:none;border-radius:50%;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.3);color:#fcd34d;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.pfd-num--todo{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(203,213,225,.75)}
.pfd-tick{margin-left:auto;flex:none;width:14px;height:14px;color:#fbbf24}
.pfd-wait{margin-left:auto;flex:none;position:relative;top:-4px;font-size:12px;font-weight:700;letter-spacing:.16em;color:rgba(245,158,11,.6);line-height:1}
.pfd-msg{display:flex;align-items:flex-start;gap:9px}
.pfd-msg+.pfd-msg{margin-top:11px}
.pfd-msg p{margin:0;min-width:0;font-size:11px;line-height:1.58;color:rgba(203,213,225,.66)}
.pfd-msg--you p{color:#e2e8f0}
.pfd-ava{width:21px;height:21px;flex:none;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700}
.pfd-ava--you{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#cbd5e1}
.pfd-ava--bot{background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.32);color:#fbbf24}
.pfd-ava--bot svg{width:11px;height:11px}
.pfd-hl{color:#fcd34d;font-weight:600}
.pfd-foot{margin-top:66px;text-align:center}
.pfd-more{display:inline-block;font-size:13.5px;font-weight:600;color:rgba(203,213,225,.82);text-decoration:underline;text-decoration-color:rgba(148,163,184,.38);text-underline-offset:5px;text-decoration-thickness:1px;transition:color .25s ease,text-decoration-color .25s ease}
.pfd-more:hover{color:#fff;text-decoration-color:rgba(226,232,240,.7)}
.pfd-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:34px;border-radius:12px;background:#fff;color:#0f172a;font-size:14.5px;font-weight:600;line-height:1;padding:16px 30px;text-decoration:none;transition:background-color .25s ease}
.pfd-cta:hover{background:#f1f5f9}
.pfd-cta svg{width:16px;height:16px;flex:none}
.pfd-note{margin:14px 0 0;font-size:12px;color:rgba(148,163,184,.92)}
@media (min-width:640px){.pfd-br{display:block}}
@media (max-width:1023px){.pfd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (max-width:639px){
.pfd{padding:80px 0 88px}
.pfd-wrap{padding:0 20px}
.pfd-head{margin-bottom:46px}
.pfd-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.pfd-card{padding:24px 22px}
.pfd-d{margin-bottom:20px}
.pfd-foot{margin-top:46px}
.pfd-cta{display:flex;width:100%;padding-left:18px;padding-right:18px}
}

/* ═══ [5] Demo — foto modello laterale (id="tf-demo-model-css") ═══ */
/* TF-DEMO-MODEL M-A: foto laterale sinistra, solo desktop largo (>=1200px). */
.tf-demo-model{display:none}
@media (min-width:1200px){
  .tf-demo-model{display:block;position:absolute;left:-16px;bottom:0;width:min(430px,calc(50vw - 300px));z-index:0;pointer-events:none}
  .tf-demo-model img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(15,23,42,.18))}
  .tf-demo-stage-shift{position:relative;z-index:1;margin-left:auto !important;margin-right:max(12px, calc((100% - 880px)/2 - 150px)) !important}
}

/* ═══ [6] Demo — freccia sotto il titolo (id="tf-title-arrow-css") ═══ */
.tf-arrow{display:none}
@media (min-width:1200px){
.tf-title-b{max-width:640px !important;text-align:left !important;margin-left:calc(100% - 880px - max(12px, calc((100% - 880px)/2 - 150px))) !important;margin-right:0 !important;position:relative}
.tf-arrow{display:block;position:absolute;pointer-events:none;z-index:2;right:-250px;top:12px;width:230px}
.tf-arrow svg{width:100%;height:auto;display:block}
.tf-arrow-prep path{stroke-dasharray:1;stroke-dashoffset:1}
/* nth-of-type e NON first/last-child: il <defs> del gradiente e' un figlio dell'svg
   e sposterebbe i path fuori da :first-child/:last-child, spegnendo il disegno. */
.tf-arrow-drawn path:nth-of-type(1){animation:tfArrowDraw .8s cubic-bezier(.4,0,.2,1) forwards}
.tf-arrow-drawn path:nth-of-type(2){animation:tfArrowDraw .3s ease-out .7s forwards}
}
@keyframes tfArrowDraw{to{stroke-dashoffset:0}}
/* Freccia cangiante: stessi 3 colori del gradiente dei titoli (#f59e0b → #fb923c →
   #ef4444) e stesso respiro di 8s. Sull'SVG il gradiente e' uno stroke: si anima
   lo stop-color (proprieta' animabile ovunque), non background-position. */
.tf-arrow .tfag1{animation:tfArrowHue1 8s ease-in-out infinite}
.tf-arrow .tfag2{animation:tfArrowHue2 8s ease-in-out infinite}
.tf-arrow .tfag3{animation:tfArrowHue3 8s ease-in-out infinite}
@keyframes tfArrowHue1{0%,100%{stop-color:#f59e0b}50%{stop-color:#fb923c}}
@keyframes tfArrowHue2{0%,100%{stop-color:#fb923c}50%{stop-color:#ef4444}}
@keyframes tfArrowHue3{0%,100%{stop-color:#ef4444}50%{stop-color:#f59e0b}}
@media (prefers-reduced-motion: reduce){.tf-arrow path{stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important}.tf-arrow stop{animation:none !important}}

/* ═══ [7] Demo animata "nuova fattura" (.tf-nfa) ═══ */
.tf-nfa{
    --ink-0:#0f172a; --ink-1:#334155; --ink-2:#64748b; --ink-3:#94a3b8;
    --line:#e7eaf0; --bg:#f4f6f9; --card:#ffffff;
    --amber:#f59e0b; --amber-soft:#fef3e2; --amber-ink:#b45309;
    --green:#16a34a; --green-2:#15803d; --green-soft:#ecfdf3;
    --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
    --radius:16px;
  }
.tf-nfa *{box-sizing:border-box;margin:0;padding:0}
.tf-nfa{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.tf-nfa .stage{width:980px;max-width:100%;position:relative}
.tf-nfa .sectlabel{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink-3);
    text-transform:uppercase;margin:0 4px 10px}
.tf-nfa .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:22px 24px;margin-bottom:22px}
.tf-nfa .field-label{font-size:12.5px;font-weight:600;color:var(--ink-1);margin-bottom:7px;display:block}
.tf-nfa .req{color:var(--amber)}
.tf-nfa .cliente-row{display:flex;gap:12px;align-items:stretch}
.tf-nfa .input{flex:1;height:46px;border:1.5px solid var(--line);border-radius:11px;
    display:flex;align-items:center;gap:10px;padding:0 14px;background:#fff;
    transition:border-color .3s ease, box-shadow .3s ease}
.tf-nfa .input.focus{border-color:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.tf-nfa .input svg{flex:0 0 auto;color:var(--ink-3)}
.tf-nfa .input .ph{color:var(--ink-3);font-size:14.5px}
.tf-nfa .input .val{color:var(--ink-0);font-size:14.5px;font-weight:600;opacity:0;transform:translateY(4px);
    transition:opacity .35s ease, transform .35s ease}
.tf-nfa .input .val.show{opacity:1;transform:none}
.tf-nfa .input .b2b{margin-left:8px;font-size:10.5px;font-weight:700;color:#0e7490;background:#ecfeff;
    border:1px solid #cffafe;padding:2px 7px;border-radius:6px;opacity:0;transition:opacity .35s ease .05s}
.tf-nfa .input .b2b.show{opacity:1}
.tf-nfa .btn-nuovo{flex:0 0 auto;height:46px;padding:0 16px;border:1.5px solid var(--line);border-radius:11px;
    background:#fff;color:var(--ink-1);font-weight:600;font-size:14px;display:flex;align-items:center;gap:7px}
.tf-nfa .btn-nuovo .plus{color:var(--amber);font-weight:800;font-size:16px}
.tf-nfa .meta{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.tf-nfa .meta .mlabel{font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.tf-nfa .meta .oggi{color:var(--amber);font-size:10.5px;font-weight:700}
.tf-nfa .meta .mbox{height:42px;border:1.5px solid var(--line);border-radius:10px;display:flex;align-items:center;
    padding:0 12px;font-size:14px;font-weight:600;color:var(--ink-0);background:#fcfcfd;gap:8px;justify-content:space-between}
.tf-nfa .badge{font-size:11px;font-weight:800;background:var(--amber-soft);color:var(--amber-ink);
    padding:3px 7px;border-radius:6px;letter-spacing:.02em;
    /* TF-DEMO-BADGE-CASE-2026-07-07: i codici SDI (TD06/TP02) sono MAIUSCOLI. Il .badge globale
       (main.css) forza text-transform:lowercase + :first-letter uppercase → renderizzava "Td06"/"Tp02".
       Qui riportiamo i codici a tutto-maiuscolo. */
    text-transform:uppercase}
.tf-nfa .mbox .chev{color:var(--ink-3)}
.tf-nfa .righe-head{display:flex;justify-content:flex-end;margin-bottom:14px}
.tf-nfa .toggle{display:inline-flex;background:#f1f3f7;border-radius:9px;padding:3px}
.tf-nfa .toggle span{font-size:12.5px;font-weight:600;color:var(--ink-2);padding:5px 14px;border-radius:7px}
.tf-nfa .toggle span.on{background:#fff;color:var(--ink-0);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tf-nfa .riga{border:1.5px solid var(--line);border-radius:13px;padding:14px 14px;
    transition:border-color .3s ease, box-shadow .3s ease}
.tf-nfa .riga.active{border-color:rgba(245,158,11,.55);box-shadow:0 0 0 3px rgba(245,158,11,.08)}
.tf-nfa .riga-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tf-nfa .grip{color:var(--ink-3);font-size:16px;line-height:1;letter-spacing:-1px}
.tf-nfa .desc{flex:1;height:40px;border:1px solid transparent;border-radius:9px;display:flex;align-items:center;
    padding:0 10px;font-size:14.5px;color:var(--ink-0);font-weight:500}
.tf-nfa .desc .ph{color:var(--ink-3);font-weight:400}
.tf-nfa .caret{display:inline-block;width:1.5px;height:18px;background:var(--amber);margin-left:1px;
    vertical-align:middle;animation:tfnfa-blink 1s steps(1) infinite;opacity:0}
.tf-nfa .caret.on{opacity:1}
@keyframes tfnfa-blink{50%{opacity:0}}
.tf-nfa .trash{color:var(--ink-3)}
.tf-nfa .riga-bot{display:flex;align-items:center;gap:12px}
.tf-nfa .price{flex:0 0 150px;height:40px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;
    padding:0 12px;gap:6px;background:#fff}
.tf-nfa .price .eu{color:var(--ink-3);font-weight:600}
.tf-nfa .price .num{margin-left:auto;font-size:15px;font-weight:700;color:var(--ink-0)}
.tf-nfa .qty{flex:0 0 auto;height:40px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;
    gap:14px;padding:0 12px;color:var(--ink-1)}
.tf-nfa .qty .op{color:var(--ink-3);font-weight:700}
.tf-nfa .qty .q{font-weight:700;color:var(--ink-0)}
.tf-nfa .iva{flex:0 0 auto;height:40px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;
    gap:10px;padding:0 12px}
.tf-nfa .iva .pill{font-size:12.5px;font-weight:800;background:var(--amber-soft);color:var(--amber-ink);padding:3px 8px;border-radius:6px}
.tf-nfa .iva .chev{color:var(--ink-3)}
.tf-nfa .rc{flex:0 0 auto;display:flex;gap:6px;color:var(--ink-3);font-size:12px;font-weight:700}
.tf-nfa .sc{flex:0 0 80px;height:40px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;
    padding:0 10px;color:var(--ink-3);font-size:13px;gap:4px}
.tf-nfa .linetot{margin-left:auto;font-size:16px;font-weight:800;color:var(--ink-0);min-width:120px;text-align:right}
.tf-nfa .addrow{margin-top:16px;color:var(--amber-ink);font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.tf-nfa .addrow .plus{color:var(--amber);font-weight:800}
.tf-nfa .totstrip{position:absolute;left:50%;transform:translateX(-50%);bottom:-30px;
    background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(16,24,40,.12);
    display:flex;align-items:center;gap:18px;padding:11px 14px}
.tf-nfa .totstrip .tl{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.06em}
.tf-nfa .totstrip{white-space:nowrap}
.tf-nfa .totstrip .tv{font-size:17px;font-weight:800;color:var(--ink-0);white-space:nowrap}
.tf-nfa .totstrip .rg{font-size:11px;color:var(--ink-3)}
.tf-nfa .sbtn{height:40px;padding:0 16px;border-radius:10px;display:flex;align-items:center;gap:7px;
    font-weight:700;font-size:14px}
.tf-nfa .sbtn.ghost{background:var(--amber-soft);color:var(--amber-ink)}
.tf-nfa .sbtn.gho2{background:#fff;border:1px solid var(--line);color:var(--ink-1)}
.tf-nfa .sbtn.invia{background:linear-gradient(180deg,#f7a823,#f0930d);color:#fff;
    box-shadow:0 6px 16px rgba(240,147,13,.35);transition:transform .25s ease, box-shadow .25s ease}
.tf-nfa .sbtn.invia.pulse{transform:translateY(-1px) scale(1.04);box-shadow:0 10px 22px rgba(240,147,13,.5)}
.tf-nfa .overlay{position:absolute;inset:-60px -40px;background:rgba(15,23,42,.30);border-radius:22px;
    display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
    backdrop-filter:blur(3px);transition:opacity .45s ease}
.tf-nfa .overlay.show{opacity:1}
.tf-nfa .modal{width:486px;background:#fff;border-radius:22px;overflow:hidden;padding:28px 26px 22px;
    box-shadow:0 40px 90px rgba(16,24,40,.40), 0 2px 6px rgba(16,24,40,.08);
    transform:translateY(18px) scale(.965);opacity:0;
    transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .45s ease}
.tf-nfa .overlay.show .modal{transform:none;opacity:1}
.tf-nfa .mtop{text-align:center;margin-bottom:18px}
.tf-nfa .successbadge{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;position:relative;
    background:radial-gradient(circle at 50% 40%,#e9fff4,#d2f7e2);color:#0fa45a;
    display:flex;align-items:center;justify-content:center}
.tf-nfa .successbadge .ring{position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(16,165,84,.16)}
.tf-nfa .chip{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;font-weight:700;color:#0e7a4d;
    background:#e9fbf1;border:1px solid #c9f2dc;padding:4px 11px;border-radius:999px;margin-bottom:12px}
.tf-nfa .mtop h3{font-size:23px;font-weight:800;color:var(--ink-0);letter-spacing:-.015em}
.tf-nfa .mtop p{font-size:13px;color:var(--ink-2);margin-top:6px;font-weight:500;line-height:1.4;padding:0 14px}
.tf-nfa .checks2{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:4px 4px 18px}
.tf-nfa .chk{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink-1);
    opacity:0;transform:translateY(5px);transition:opacity .3s ease, transform .3s ease}
.tf-nfa .chk.show{opacity:1;transform:none}
.tf-nfa .chk i{width:19px;height:19px;border-radius:50%;background:#e4f9ee;color:#0fa45a;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-style:normal;font-weight:800}
.tf-nfa .summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:#f7f8fa;border:1px solid var(--line);border-radius:14px;padding:13px 16px;margin-bottom:16px}
.tf-nfa .summary .s-cli{display:block;font-size:13.5px;font-weight:700;color:var(--ink-0)}
.tf-nfa .summary .s-doc{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.tf-nfa .summary .s-tot{font-size:20px;font-weight:800;color:var(--ink-0);white-space:nowrap}
.tf-nfa .mfoot{display:flex;gap:10px}
.tf-nfa .mghost{flex:0 0 auto;height:50px;padding:0 20px;border-radius:13px;background:#fff;
    border:1.5px solid var(--line);color:var(--ink-1);font-weight:700;font-size:14px;font-family:inherit;cursor:pointer}
.tf-nfa .mbtn{flex:1;height:50px;border-radius:13px;border:none;font-family:inherit;cursor:pointer;
    background:linear-gradient(180deg,#13b46c,#0c9656);color:#fff;font-weight:800;font-size:14.5px;
    display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 22px rgba(16,165,84,.30);
    transition:transform .25s ease, box-shadow .25s ease}
.tf-nfa .mbtn.pulse{transform:translateY(-1px) scale(1.04);box-shadow:0 14px 30px rgba(16,165,84,.5)}
.tf-nfa .modal.succ{padding:30px 26px 24px;text-align:center}
.tf-nfa .modal.succ h3{font-size:23px;font-weight:800;letter-spacing:-.01em}
.tf-nfa .modal.succ p{font-size:13px;color:var(--ink-2);margin-top:7px;font-weight:500;padding:0 10px;line-height:1.45}
.tf-nfa .statuscard{background:#f7f8fa;border:1px solid var(--line);border-radius:14px;padding:4px 16px;margin:18px 0 16px;text-align:left}
.tf-nfa .srow{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:10px 0;border-bottom:1px solid var(--line)}
.tf-nfa .srow:last-child{border-bottom:none}
.tf-nfa .srow .k{color:var(--ink-2);font-weight:600}
.tf-nfa .srow .v{font-weight:800;color:var(--ink-0)}
.tf-nfa .statpill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
    background:#fff7e6;color:#b45309;border:1px solid #fde9c2;padding:4px 10px;border-radius:999px}
.tf-nfa .acts{display:flex;gap:10px}
.tf-nfa .acts .mghost,.tf-nfa .acts .mbtn{flex:1}
.tf-nfa{position:relative}
.tf-nfa .stage{max-width:860px;width:100%;margin:0 auto}

/* ── TF-DEMO-MOBILE-2026-07-27 — la demo aveva un layout solo, quello desktop ──
   Segnalata dal fondatore: mockup e barra azioni tagliati sul telefono.
   Misurato a 375px sul sito vero: il campo "Condizioni di Pagamento" arrivava a
   x=673 e la striscia dei totali era larga 564px, su un viewport di 375.

   La causa NON era la scala (la demo e' gia' `width:100%`): era
   `grid-template-columns:repeat(4,1fr)`. Un `1fr` ha `min-width:auto`, quindi
   NON scende sotto il contenuto della cella: quattro etichette lunghe fanno
   una griglia larga quanto vogliono loro e il resto sborda. E' la trappola
   gia' scritta in memoria per le griglie a colonne fisse, e la cura e' la
   stessa: `minmax(0,1fr)`, che permette davvero alle celle di stringersi.

   Stesso motivo per la riga cliente: `.input` e' un flex item, e senza
   `min-width:0` non scende sotto il testo del segnaposto — che infatti andava
   a capo su quattro righe e finiva SOPRA l'etichetta "Cliente". */
@media (max-width:767.98px){

  /* 4 colonne -> 2+2, e celle che possono davvero stringersi */
  .tf-nfa .meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tf-nfa .meta > div{min-width:0}
  .tf-nfa .meta .mlabel{font-size:11px}
  .tf-nfa .meta .mbox{min-width:0;font-size:12.5px;padding-left:10px;padding-right:8px;gap:6px}
  /* il testo dentro il riquadro si accorcia invece di spingere fuori il riquadro */
  .tf-nfa .meta .mbox{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

  /* riga cliente: il segnaposto sta su UNA riga e sfuma, invece di
     impaginarsi sopra l'etichetta */
  .tf-nfa .cliente-row{gap:8px}
  .tf-nfa .input{min-width:0}
  .tf-nfa .input .ph,.tf-nfa .input .val{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

  /* barra azioni: su 375px non ci stanno tre bottoni piu' i totali. Cade
     "Bozza" — e' l'azione meno rappresentativa delle tre, mentre Anteprima e
     Invia sono il punto della demo. Niente scorrimento orizzontale: una barra
     che va trascinata di lato, su un mockup che nessuno tocca, non la vede
     nessuno. */
  .tf-nfa .totstrip{left:0;right:0;transform:none;width:auto;
                    display:flex;align-items:center;gap:8px;
                    padding-left:12px;padding-right:12px;white-space:nowrap}
  .tf-nfa .totstrip .sbtn.gho2{display:none}
  .tf-nfa .totstrip .tl{display:none}
  .tf-nfa .totstrip .sbtn{padding-left:12px;padding-right:12px;font-size:12.5px}
  .tf-nfa .totstrip .tv{font-size:15px}
  .tf-nfa .totstrip .rg{font-size:10.5px}

  /* ── la RIGA della fattura ────────────────────────────────────────────
     Sfuggita al primo giro: avevo sistemato i campi documento (.meta) e la
     barra dei totali, non questa. `.riga-bot` e' un flex con figli a base
     fissa — prezzo 150px, poi quantita', IVA, RC, sconto e totale riga — e
     la somma supera i 375px: misurato dopo il deploy, `.linetot` arrivava
     ancora a x=672. E' lo stesso pezzo che si vedeva mozzato nel primo
     screenshot del fondatore ("€ 0,00 | − 1 + | 22% | R").
     Stessa logica della barra azioni: la riga va a capo e cadono i due
     comandi meno rappresentativi (reverse charge e sconto), che in una demo
     non raccontano niente. Restano prezzo, quantita', IVA e totale — cioe'
     come si compone una riga di fattura. */
  .tf-nfa .riga-bot{flex-wrap:wrap;gap:8px}
  .tf-nfa .riga-bot .rc,.tf-nfa .riga-bot .sc{display:none}
  .tf-nfa .price{flex:1 1 130px;min-width:0}
  .tf-nfa .linetot{flex:1 1 auto;min-width:0;text-align:right}
  .tf-nfa .riga-top{gap:8px}
  .tf-nfa .desc{min-width:0}
}

/* ═══ [8] Prezzi — rotator dei piani (data-tf-rotator) ═══ */
/* TF-ROTATOR-SPAZIO-2026-07-27 — il contenitore dichiara lo spazio che il suo
   figlio sporgente occupa. Il segmented control e' `position:absolute;
   bottom:-52px`, quindi sta FUORI dal flusso: sporge 52px di offset + 36 di
   altezza propria (padding 3+3, bottone 7+14+7, bordo 2) = 88px sotto il
   contenitore. La riga "Confronta tutti i piani" che segue aveva solo il suo
   `mt-6`, cioe' 24px: le due cose finivano una sopra l'altra, come nello
   screenshot del fondatore del 27/07/2026.
   Si riserva qui, sul contenitore, invece di gonfiare il margine della riga
   sotto: chi sporge e' il rotatore, e deve essere il rotatore a pagarne lo
   spazio — se domani il segmented control sparisce, sparisce anche il vuoto.
   72 + i 24 del `mt-6` = 96, cioe' 8px di respiro sotto la pillola. */
.tf-rotator { position: relative; min-height: 216px; margin-bottom: 72px; }
.tf-rotator-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.tf-rotator-slide[data-idx="0"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* v16.11-segmented: segmented control con knob animato */
.tf-rotator-seg { position: absolute; bottom: -52px; left: calc(50% + 28px); transform: translateX(-50%); display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; background: rgba(15,23,42,0.06); border: 1px solid rgba(15,23,42,0.08); box-shadow: inset 0 1px 2px rgba(15,23,42,0.04); }
.tf-rotator-seg-knob { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #ffffff; box-shadow: 0 2px 6px -1px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.06); transition: transform .42s cubic-bezier(.32,.72,0,1); pointer-events: none; }
.tf-rotator-seg[data-pos="1"] .tf-rotator-seg-knob { transform: translateX(100%); }
.tf-rotator-seg-btn { position: relative; z-index: 1; border: 0; padding: 7px 18px; border-radius: 999px; background: transparent; font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; color: rgba(15,23,42,0.55); cursor: pointer; transition: color .3s ease; font-family: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.tf-rotator-seg-plus { width: 11px; height: 11px; transition: transform .3s ease; }
.tf-rotator-seg-btn.is-active .tf-rotator-seg-plus { transform: rotate(90deg); }
.tf-rotator-seg-btn:hover { color: rgba(15,23,42,0.78); }
.tf-rotator-seg-btn.is-active { color: #0f172a; font-weight: 700; }
.tf-rotator-seg-btn:focus-visible { outline: 2px solid rgba(245,158,11,0.35); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tf-rotator-slide { transition: opacity .12s linear; transform: none; } }

/* ═══ [9] Fatture ricevute illimitate PB-D — <section id="tfpbd"> ═══ */
.tfpbd{position:relative;background:linear-gradient(180deg,#0f172a 0%,#1e293b 52%,#0f172a 100%);padding:124px 0;overflow:hidden}
.tfpbd::before{content:"";position:absolute;inset:0;background:radial-gradient(56% 44% at 50% 0%,rgba(245,158,11,.11) 0%,rgba(245,158,11,0) 72%);pointer-events:none}
.tfpbd__wrap{position:relative;max-width:940px;margin:0 auto;padding:0 28px;text-align:center}
.tfpbd__kick{margin:0 0 30px;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fcd34d}
.tfpbd__h2{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.16;font-size:clamp(31px,5.1vw,58px);color:#fff;text-wrap:balance}
.tfpbd__rule{width:46px;height:2px;margin:44px auto 0;border-radius:2px;background:linear-gradient(90deg,#f59e0b,#ef4444)}
.tfpbd__sub{max-width:700px;margin:34px auto 0;font-size:clamp(16.5px,1.55vw,20px);line-height:1.64;letter-spacing:-.006em;color:#e2e8f0;text-wrap:pretty}
.tfpbd__sub .kk{font-weight:600}
/* reveal: acceso solo dal JS. No-JS e reduced-motion => testo pieno, gi&agrave; leggibile */
.tfpbd.is-reveal .tfpbd__h2 .w:not(.tfpbd__grad){color:rgba(255,255,255,.62);transition:color .28s ease}
.tfpbd.is-reveal .tfpbd__h2 .w.on:not(.tfpbd__grad){color:#fff}
.tfpbd.is-reveal .tfpbd__sub .w{color:rgba(226,232,240,.62);transition:color .28s ease}
.tfpbd.is-reveal .tfpbd__sub .w.on{color:#e2e8f0}
.tfpbd.is-reveal .tfpbd__sub .kk .w.on{color:#fff}
.tfpbd.is-reveal .tfpbd__grad{opacity:.62;transition:opacity .28s ease}
.tfpbd.is-reveal .w.on .tfpbd__grad{opacity:1}
@media (max-width:640px){.tfpbd{padding:88px 0}.tfpbd__wrap{padding:0 22px}.tfpbd__kick{margin-bottom:24px;letter-spacing:.15em}.tfpbd__h2{line-height:1.2}.tfpbd__rule{margin-top:34px}.tfpbd__sub{margin-top:28px;line-height:1.6}}