/* assets/marketing/pagine/strumenti.css — stili della sola pagina strumenti.html
   TF-MKT-REFACTOR-2026-10-06 (passo meccanico): i blocchi <style> della pagina, byte per
   byte e nello stesso ordine. Il <link> sta dove stava il blocco nel <head>. */

/* ═══ [1] blocco nel <head> ═══ */
      /* ══════════════════════════════════════════════════════════════════
         TF-TOOLS-HUB-2026-08-05 — l'hub /strumenti adesso parla la lingua del
         marketing: hero, bande e card vengono da assets/tf-article.css
         (.tfh-* / .tfa-*), le stesse identiche classi di /guide e /blog.
         Qui sotto resta SOLO quello che quel vocabolario non ha:
           · il marquee delle feature (due nastri che scorrono)
           · il mockup animato della fattura (agganciato al JS di fine pagina)
           · tre rifiniture: bottone secondario, chip del risultato, riga check
         Palette: ambra #f59e0b / #d97706 / #b45309 su crema #fff7ed, bordo
         #fde68a — gli stessi esadecimali del resto del sito. Zero blu, zero
         indaco, zero ciano: erano una palette a se', ed e' quella che stonava.
         Questo <style> viene DOPO i <link>, quindi vince a parita' di
         specificita': e' il motivo per cui i pochi override qui sotto reggono.
         ══════════════════════════════════════════════════════════════════ */

      /* In /guide la banda segue l'hero di misura (padding-top 8px). Qui l'hero
         finisce col marquee e serve aria prima dell'intestazione di sezione. */
      .tfh-band{ padding-top:56px; }
      .tfh-hero .tfh-grid{ margin-top:42px; }
      /* intestazione di sezione: .tfh-news nel CSS condiviso e' solo una colonna
         centrata con h2 + p — il nome viene dalla newsletter, la semantica no. */
      .th-sechead{ margin-bottom:16px; }

      /* ── CTA: il primario e' .tfh-btn condiviso, il secondario vive qui ── */
      .th-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
      .tfh-hero-in .th-cta-row, .tfh-news .th-cta-row{ justify-content:center; }
      .th-btn2{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px;
        border-radius:12px; border:1px solid #fde68a; background:#fff7ed; color:#b45309;
        font-size:14.5px; font-weight:600; text-decoration:none; white-space:nowrap;
        transition:background-color .15s, border-color .15s; }
      .th-btn2:hover{ background:#fef3c7; border-color:#fcd34d; }
      .th-btn2:focus-visible{ outline:2px solid #b45309; outline-offset:2px; }
      /* stesse misure esplicite di .tfh-btn svg: senza, l'SVG si gonfia */
      .th-btn2 svg{ flex:none; width:16px; height:16px; }

      /* ── i tre riquadri di garanzia sono .tfh-card ma NON sono link:
            .th-static toglie il lift, che prometterebbe una destinazione ── */
      .tfh-card.th-static{ cursor:default; }
      .tfh-card.th-static:hover{ border-color:#e7e5e4; transform:none; box-shadow:none; }
      .th-static .tfh-d{ margin-bottom:0; }

      /* ── card strumento = .tfh-card + il glow che segue il cursore.
            .th-tool e' l'AGGANCIO del querySelectorAll in fondo alla pagina:
            se la classe sparisce il glow muore in silenzio (le --mx/--my
            continuano a essere scritte su nessuno). ── */
      .tfh-card.th-tool{ position:relative; overflow:hidden; }
      .th-tool::after{ content:''; position:absolute; inset:0; pointer-events:none;
        background:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),
          rgba(245,158,11,.16), transparent 65%);
        opacity:0; transition:opacity .3s; }
      .th-tool:hover::after{ opacity:1; }
      /* in /guide la freccia di .tfh-go e' il carattere →, qui e' un SVG */
      .tfh-go{ display:inline-flex; align-items:center; gap:6px; transition:gap .25s; }
      .tfh-go svg{ flex:none; width:15px; height:15px; }
      .th-tool:hover .tfh-go{ gap:11px; }
      /* un solo margin-top:auto per card, se no lo spazio libero si divide in
         due e il chip resta a mezz'aria: lo tiene il chip, non la freccia. */
      .th-tool .tfh-go{ margin-top:0; }

      /* anteprima del risultato dentro la card: non esiste un equivalente
         condiviso, resta bespoke — ma ambra su crema, non piu' tre colori */
      .th-tool-chip{ position:relative; z-index:1; margin-top:auto; margin-bottom:14px;
        padding:10px 12px; border-radius:10px; background:#fff7ed; border:1px solid #fde68a;
        font-family:'JetBrains Mono','SF Mono','Monaco',monospace; font-size:11.5px;
        font-weight:600; letter-spacing:1.2px; color:#b45309;
        display:flex; align-items:center; gap:8px; }
      /* 2026-09-05: via il pallino ::before — icona svg coerente col set delle card */
      .th-tool-chip svg{ flex:none; width:12px; height:12px; color:#f59e0b; }

      /* ── riga dei check sotto la CTA finale (e' un <div>: dentro .tfh-news
            un <p> prenderebbe max-width 46ch e margin auto) ── */
      .th-checks{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px;
        margin-top:26px; font-size:13.5px; color:rgba(15,23,42,.52); }
      .th-checks span{ display:inline-flex; align-items:center; gap:8px; }
      .th-checks svg{ flex:none; width:15px; height:15px; color:#b45309; }

      /* ── blocco a due colonne: .tfh-lead condiviso (quello dell'articolo in
            evidenza di /blog), ma la colonna figura NON puo' essere
            .tfh-lead-fig: quella regola impone 88px a OGNI svg discendente e
            il mockup ne ha una dozzina da 12-16px. Stessa resa, senza la
            regola che lo distruggerebbe. ── */
      .th-lead-static:hover{ border-color:#e7e5e4; box-shadow:none; }
      .th-lead-mock{ background:#fff7ed; border-left:1px solid #fde68a;
        display:flex; align-items:center; justify-content:center; padding:26px; }
      .th-lead-mock > div{ width:100%; }

      /* ══════════════════════════════════════════════════════════════════
         MARQUEE delle feature — bespoke: non c'e' niente di condiviso che
         faccia scorrere due nastri. CSS-only (@keyframes, nessuna libreria:
         vedi tests/php/test_vendor_js_morto.php). Le pill erano vetro bianco
         su hero scuro, ora sono bianche su crema col bordo del sito.
         ══════════════════════════════════════════════════════════════════ */
      .th-marquee-wrap{ margin-top:46px; text-align:center; }
      .th-marquee{
        position:relative;
        overflow:hidden;
        -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
      }
      .th-marquee + .th-marquee{ margin-top:12px; }
      .th-marquee-track{
        display:flex; gap:12px; width:max-content;
        will-change:transform;
      }
      @keyframes thMarqueeLeft { from { transform:translateX(0); } to { transform:translateX(-50%); } }
      @keyframes thMarqueeRight { from { transform:translateX(-50%); } to { transform:translateX(0); } }
      .th-marquee-left { animation:thMarqueeLeft 50s linear infinite; }
      .th-marquee-right { animation:thMarqueeRight 60s linear infinite; }
      .th-marquee:hover .th-marquee-track { animation-play-state:paused; }

      .th-feat-pill {
        flex-shrink:0;
        display:inline-flex; align-items:center; gap:8px;
        padding:9px 16px; border-radius:12px;
        background:#fff; border:1px solid #eceae7;
        color:rgba(15,23,42,.68); font-size:13.5px; font-weight:500;
        white-space:nowrap;
        transition:background-color .2s, border-color .2s;
      }
      .th-feat-pill svg { color:#f59e0b; flex-shrink:0; }
      .th-feat-pill:hover { background:#fff7ed; border-color:#fde68a; }

      /* ══════════════════════════════════════════════════════════════════
         MOCKUP EDITOR 1:1 (TF-STRUMENTI-MOCK-NF-2026-11-02): copia del
         pannello principale di nuova-fattura a 1280px (senza sidebar).
         Ogni misura e colore viene dagli stili CALCOLATI sulla pagina vera
         (harness headless), non a occhio. Il riquadro .thm-app e' largo 900px
         e alto 800px come l'originale; lo script lo scala alla colonna con
         transform (resta proporzionato al pixel). Senza JS resta a 0.6.
         Font: Poppins, lo stesso dell'app (la versione di agosto usava il font
         di sistema pensando che l'app non avesse Poppins: ce l'ha).
         Niente <p> ne' <h2> dentro: .tfh-lead p e .tfh-lead h2 (tf-article.css)
         li ridimensionerebbero. Ogni id thm-* e' letto dallo script in fondo.
         ══════════════════════════════════════════════════════════════════ */
      .thm-stage{position:relative;width:100%;aspect-ratio:900/800;overflow:hidden;border:1px solid #e9edf3;border-radius:14px;background:#f8fafc;box-shadow:0 24px 60px -28px rgba(15,23,42,.28);text-align:left}
      .thm-app{position:absolute;left:0;top:0;width:900px;height:800px;transform-origin:0 0;transform:scale(.6);background:#f8fafc;font-family:Poppins,sans-serif;color:#0f172a;line-height:1.5;pointer-events:none;user-select:none;-webkit-user-select:none}
      .thm-app svg{display:block;flex:none}
      /* barra in alto */
      .thm-top{position:absolute;left:0;top:0;right:0;z-index:3;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(255,255,255,.82);border-bottom:1px solid #e9edf3}
      .thm-top-l{display:flex;align-items:center;gap:14px}
      .thm-back{color:rgba(30,41,59,.5)}
      .thm-back svg{width:20px;height:20px}
      .thm-cmdk{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid #e8edf3;border-radius:10px;background:#fff;font-size:12px;font-weight:500;line-height:12px;letter-spacing:-.06px;color:rgba(100,116,139,.85)}
      .thm-cmdk svg{width:14px;height:14px}
      .thm-kbd{height:18px;padding:0 6px;display:inline-flex;align-items:center;border:1px solid #e6eaf0;border-radius:6px;background:#f1f5f9;font-size:10px;font-weight:600;letter-spacing:.2px;color:rgba(100,116,139,.7)}
      .thm-h1{font-size:19px;font-weight:700;letter-spacing:-.38px;line-height:29.5px;color:#0f172a;white-space:nowrap}
      .thm-top-r{display:flex;align-items:center;gap:8px}
      .thm-tsep{width:1px;height:24px;margin-right:7px;background:#e9edf3}
      .thm-tbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04);font-size:13px;font-weight:600;letter-spacing:-.065px;color:#334155;white-space:nowrap}
      .thm-tbtn svg{width:16px;height:16px}
      .thm-bell{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:#475569}
      .thm-bell svg{width:19px;height:19px}
      .thm-user{display:inline-flex;align-items:center;gap:6px;width:66px;height:40px;padding-left:3px;border:1px solid #e8edf3;border-radius:12px;background:#fff;color:#94a3b8}
      .thm-user svg{width:12px;height:12px}
      .thm-av{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,#fbbf24,#f97316);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 4px 10px -2px rgba(245,158,11,.4);font-size:12.5px;font-weight:700;letter-spacing:-.25px;color:#fff}
      .thm-av-dot{position:absolute;left:23px;top:23px;width:10px;height:10px;border:2px solid #fff;border-radius:999px;background:#10b981}
      /* colonna centrale: 900px con 24px di padding, schede da 852px */
      .thm-main{position:absolute;left:0;right:0;top:64px;padding:24px 24px 0}
      .thm-sec{margin:2px 0 16px 2px;font-size:15px;font-weight:700;line-height:15px;letter-spacing:-.18px;text-transform:uppercase;color:#aab2c0}
      .thm-card{margin-bottom:24px;padding:16px 18px;border:1px solid #e9edf3;border-radius:16px;background:linear-gradient(#fff,#fbfdff);box-shadow:0 1px 2px rgba(15,23,42,.035)}
      .thm-doc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
      .thm-span4{grid-column:span 4}
      .thm-lbl{margin-bottom:5px;font-size:11px;font-weight:600;line-height:15.7px;color:#51607a}
      .thm-req{color:#f59e0b}
      .thm-lbl-row{display:flex;align-items:center;justify-content:space-between}
      .thm-link{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;line-height:14.3px;color:#d2640a}
      .thm-link svg{width:12px;height:12px}
      .thm-clirow{display:flex;gap:8px}
      .thm-cliwrap{position:relative;flex:1;min-width:0}
      .thm-cliwrap > svg{position:absolute;left:12px;top:11px;width:16px;height:16px;color:rgba(30,41,59,.4)}
      .thm-inp,.thm-desc-inp{display:block;width:100%;margin:0;border:1px solid #e6eaf0;background:#fff;font:inherit;font-size:13px;color:#1e293b;outline:0;transition:border-color .2s,box-shadow .2s}
      .thm-inp{height:38px;padding:0 11px 0 34px;border-radius:10px}
      .thm-inp::placeholder,.thm-desc-inp::placeholder{color:rgba(30,41,59,.5);opacity:1}
      .thm-focus{border-color:#f59e0b !important;box-shadow:0 0 0 3px rgba(245,158,11,.14)}
      .thm-nuovo{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid #f9b870;border-radius:9px;background:#fff8ed;font-size:14px;font-weight:500;color:#ab4d0c}
      .thm-nuovo svg{width:16px;height:16px}
      .thm-ro{height:38px;display:flex;align-items:center;padding:0 11px;border:1px solid #e6eaf0;border-radius:10px;background:#f1f5f9;font-size:13px;color:#1e293b}
      .thm-trg{height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:0 11px;border:1px solid #e3e8ef;border-radius:9px;background:#fff;font-size:13px;color:#0f172a}
      .thm-trg > svg{width:18px;height:18px;color:#94a3b8}
      .thm-ps{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
      .thm-psl{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;color:#0f172a}
      .thm-code{flex:none;padding:3px 8px;border:1px solid rgba(217,119,6,.28);border-radius:6px;background:#fdf4e3;font-family:"SF Mono",Monaco,Menlo,Consolas,monospace;font-size:11.5px;font-weight:600;line-height:13.8px;letter-spacing:.23px;color:#92400e}
      /* tendina clienti (come renderClienteDropdown) */
      .thm-dd{position:absolute;left:0;right:0;top:42px;z-index:2;overflow:hidden;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);opacity:0;visibility:hidden;transition:opacity .18s}
      .thm-dd.thm-show{opacity:1;visibility:visible}
      .thm-dd-row{padding:12px 16px;border-bottom:1px solid #e2e8f0;font-size:14px;color:#1e293b;transition:background-color .15s}
      .thm-dd-row.thm-hover{background:#fff8ed}
      .thm-dd-n{display:flex;align-items:center;font-weight:500;line-height:20px}
      .thm-b2b{margin-left:8px;padding:2px 8px;border-radius:999px;background:#dcfce7;font-size:10px;font-weight:600;line-height:15px;color:#15803d}
      .thm-dd-s{margin-top:2px;font-size:12px;line-height:16px;color:rgba(30,41,59,.5)}
      .thm-dd-new{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:500;line-height:20px;color:#d2640a}
      .thm-dd-new svg{width:16px;height:16px}
      /* righe */
      .thm-pmbar{display:flex;justify-content:flex-end;height:25px;margin-bottom:8px}
      .thm-seg{display:inline-flex;padding:2px;border-radius:7px;background:#f1f5f9}
      .thm-seg > span{padding:4px 11px;border-radius:6px;font-size:12.5px;font-weight:600;line-height:12.5px;letter-spacing:.25px;color:#7c8696}
      .thm-seg .thm-seg-on{background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.1),0 0 0 .5px rgba(15,23,42,.04);color:#0f172a}
      .thm-riga{position:relative;height:117px;padding:8px 14px 8px 42px;border:1px solid #eef1f5;border-radius:12px;background:#fcfdfe;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(15,23,42,.016),0 1px 2px rgba(15,23,42,.024),0 4px 10px -3px rgba(15,23,42,.04)}
      .thm-drag{position:absolute;left:3px;top:7px;width:34px;height:40px;display:flex;align-items:center;justify-content:center;color:#c2c8d2}
      .thm-drag svg{width:21px;height:21px}
      .thm-desc{position:relative}
      .thm-desc-inp{height:40px;padding:10px 28px 10px 10px;border-radius:10px;line-height:18.2px}
      .thm-desc-ic{position:absolute;right:5px;top:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:rgba(30,41,59,.35)}
      .thm-desc-ic svg{width:14px;height:14px}
      .thm-line2{display:flex;align-items:center;height:42px;margin-top:17px}
      .thm-price,.thm-qty{height:42px;display:flex;border:1px solid #e2e8f0;border-radius:10px;background:linear-gradient(#fff,#f8fafc);transition:border-color .2s,box-shadow .2s}
      .thm-price{width:152px;align-items:center}
      .thm-pre{padding:0 6px 0 11px;font-size:14px;font-weight:600;letter-spacing:-.28px;color:#94a3b8}
      .thm-pv{flex:1;padding:0 11px 0 2px;text-align:right;font-size:14px;font-weight:600;color:#0f172a;font-variant-numeric:tabular-nums}
      .thm-pv.thm-empty{color:rgba(15,23,42,.5)}
      .thm-qty{width:176px;margin-left:12px;align-items:stretch}
      .thm-qb{width:28px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#94a3b8}
      .thm-qv{width:66px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:-.14px;color:#0f172a}
      .thm-um{width:52px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-left:1px solid #e6eaf0;font-size:12px;font-weight:500;letter-spacing:.24px;color:#94a3b8}
      .thm-um svg{width:10px;height:6px}
      .thm-iva{width:172px;margin-left:12px;display:flex;align-items:center;gap:5px}
      .thm-trg-iva{flex:none;width:122px;height:42px;padding:0 12px;gap:12px;border-color:#dbe3ef;border-radius:12px}
      .thm-rc{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #e7ebf2;border-radius:50%;background:#fff;font-size:10px;font-weight:750;letter-spacing:.2px;color:#c7cedb}
      .thm-sconto{position:relative;width:72px;height:40px;margin-left:12px;display:flex;align-items:center;justify-content:flex-end;padding:0 27px 0 9px;border:1px solid #e3e8ef;border-radius:9px;background:#fff;font-size:13px;color:#64748b}
      .thm-pct{position:absolute;right:10px;font-size:12px;color:#aab2c0}
      .thm-rtot{flex:1;align-self:flex-end;margin:0 8px 2px 0;text-align:right;font-size:15px;font-weight:700;line-height:18.75px;color:#0f172a;font-variant-numeric:tabular-nums}
      .thm-kebab{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:#8590a2}
      .thm-kebab svg{width:18px;height:18px}
      .thm-addriga{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;color:#d2640a}
      .thm-addriga svg{width:16px;height:16px}
      /* «Aggiungi al documento» */
      .thm-chipbar{margin:2px 0 24px;padding-top:20px;border-top:1px solid #e9edf3}
      .thm-chiphead{display:flex;align-items:center;gap:8px;height:19px;margin-bottom:12px}
      .thm-ck{font-size:11px;font-weight:700;letter-spacing:.77px;text-transform:uppercase;color:#aab2c0}
      .thm-ch{font-size:11.5px;font-weight:500;color:#c2c8d2}
      .thm-chiphead svg{width:15px;height:15px;color:#c2c8d2}
      .thm-chips{display:flex;flex-wrap:wrap;gap:8px}
      .thm-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px 0 11px;border:1px solid #e7ebf2;border-radius:10px;background:#fff;font-size:13px;font-weight:550;line-height:1;color:#51607a;transition:background-color .3s,border-color .3s,color .3s}
      .thm-chip svg{width:14px;height:14px;color:#aeb6c2}
      .thm-chip .thm-ic-on{display:none;color:#e08704}
      .thm-chip.thm-on{border-color:rgba(217,119,6,.28);background:#fdf4e3;color:#92400e}
      .thm-chip.thm-on .thm-ic-add{display:none}
      .thm-chip.thm-on .thm-ic-on{display:block}
      /* sezione bollo: compare da sola sopra 77,47 EUR di esenti, come nell'app */
      .thm-bollo{display:none;margin-bottom:24px;border:1px solid #e9edf3;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.035)}
      .thm-bollo.thm-show{display:block;animation:thmIn .35s ease-out}
      @keyframes thmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
      .thm-bhead{display:flex;align-items:center;gap:10px;padding:13px 20px 4px}
      .thm-bic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#f4f6f9;color:#8590a2}
      .thm-bic svg,.thm-bx svg{width:15px;height:15px}
      .thm-btitle{font-size:14px;font-weight:650;letter-spacing:-.14px;line-height:21px;color:#1f2733}
      .thm-bx{margin-left:auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#c2c8d2}
      .thm-bbody{padding:16px 20px}
      .thm-brow{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
      .thm-tog{position:relative;flex:none;width:44px;height:24px;margin-top:2px;border-radius:999px;background:#f3850e}
      .thm-tog::after{content:"";position:absolute;left:22px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff}
      .thm-btxt{font-size:14px;line-height:20px;color:rgba(30,41,59,.7)}
      .thm-bsub{display:block;margin-top:2px;font-size:12px;line-height:16px;color:rgba(30,41,59,.4)}
      .thm-bnote{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:10px;background:#fffbeb;font-size:12px;line-height:16px;color:#92400e}
      .thm-bnote svg{width:16px;height:16px;margin-top:2px;color:#d97706}
      /* totali (in fondo, sotto la barra flottante) */
      .thm-tot{display:flex;gap:18px;padding:18px 20px;background:#fff}
      .thm-totnote{width:512px;font-size:12px;line-height:18px;color:#8590a2}
      .thm-totnote b{display:block;margin-bottom:6px;font-size:13px;font-weight:700;line-height:20.8px;color:#1f2733}
      .thm-totlist{flex:1}
      .thm-totrow{display:flex;justify-content:space-between;padding:6px 0;margin-bottom:12px;font-size:14px;line-height:20px;color:rgba(30,41,59,.7)}
      .thm-totrow span + span{font-weight:500;color:#1e293b}
      /* barra flottante in basso */
      .thm-sticky{position:absolute;left:50%;bottom:20px;z-index:4;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:55px;padding:8px 10px;border:1px solid rgba(255,255,255,.55);border-radius:18px;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 0 1px rgba(15,23,42,.04),0 6px 16px -4px rgba(15,23,42,.14),0 18px 36px -10px rgba(15,23,42,.22),0 36px 72px -24px rgba(245,158,11,.18);white-space:nowrap}
      .thm-sinfo{display:flex;align-items:center;gap:8px;padding:0 8px 0 12px}
      .thm-slbl{font-size:10px;font-weight:700;letter-spacing:1px;line-height:15px;text-transform:uppercase;color:#94a3b8}
      .thm-samt{font-size:15px;font-weight:750;letter-spacing:-.15px;line-height:22.5px;color:#0f172a;font-variant-numeric:tabular-nums}
      .thm-smeta{font-size:11px;font-weight:500;line-height:16.5px;color:#94a3b8}
      .thm-sdiv{width:1px;height:28px;background:rgba(15,23,42,.08)}
      .thm-btn{display:inline-flex;align-items:center;gap:6px;height:37px;padding:0 14px;border:1px solid transparent;border-radius:10px;font-size:12.5px;font-weight:600;line-height:18.75px}
      .thm-btn svg{width:16px;height:16px}
      .thm-btn-ghost{background:#fffbeb;color:#b45309}
      .thm-btn-outline{background:#fff;color:#475569}
      .thm-btn-pri{padding:0 18px;background:linear-gradient(#f59e0b,#d97706);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(217,119,6,.4),0 6px 16px -4px rgba(245,158,11,.45);transition:transform .15s,box-shadow .25s}
      .thm-btn-pri.thm-press{transform:scale(.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(217,119,6,.4),0 6px 16px -4px rgba(245,158,11,.45),0 0 0 4px rgba(245,158,11,.22)}
      /* schermata «Fattura inviata al SDI» (tf-send-flow.js, showSent) */
      .thm-scrim{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(23,35,56,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
      .thm-scrim.thm-show{opacity:1;visibility:visible}
      .thm-sheet{position:relative;width:520px;padding:38px 34px 26px;border:1px solid #dce3ec;border-radius:14px;background:#fff;box-shadow:0 18px 40px -18px rgba(23,35,56,.22),0 2px 6px rgba(23,35,56,.05);text-align:center;transform:scale(.96);transition:transform .3s cubic-bezier(.22,1,.36,1)}
      .thm-scrim.thm-show .thm-sheet{transform:none}
      .thm-sx{position:absolute;right:14px;top:14px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#fff;color:#4a5567}
      .thm-sx svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
      .thm-succ{position:relative;width:72px;height:72px;margin:4px auto 18px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#eaf6ef}
      .thm-succ::after{content:"";position:absolute;inset:0;border:1px solid #dce3ec;border-radius:50%}
      .thm-succ-ring{position:absolute;inset:-5px;border:2px solid #14785c;border-radius:50%;opacity:0}
      .thm-succ svg{position:relative;z-index:1;width:40px;height:40px;overflow:visible}
      .thm-succ circle{fill:none;stroke:#dce3ec;stroke-width:2.5}
      .thm-succ path{fill:none;stroke:#14785c;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
      .thm-scrim.thm-show .thm-succ path{animation:thmDraw .42s cubic-bezier(.65,0,.35,1) .3s forwards}
      .thm-scrim.thm-show .thm-succ-ring{animation:thmRing .7s ease-out .15s both}
      @keyframes thmDraw{to{stroke-dashoffset:0}}
      @keyframes thmRing{0%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(1.18)}}
      .thm-stitle{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.525px;line-height:1.2;color:#172338}
      .thm-ftref{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:5px 13px;border:1px solid #dce3ec;border-radius:999px;background:#eaf6ef;font-size:13px;font-weight:600;letter-spacing:.13px;color:#14785c;font-variant-numeric:tabular-nums}
      .thm-ftref svg{width:14px;height:14px}
      .thm-elab{max-width:400px;margin:0 auto 24px;font-size:13px;line-height:1.55;letter-spacing:-.065px;color:#5b6880}
      .thm-elab b{font-weight:600;color:#172338}
      .thm-acts{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
      .thm-act{display:flex;flex-direction:column;gap:11px;padding:16px;border:1px solid #dce3ec;border-radius:11px;background:#fff}
      .thm-act-ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px}
      .thm-act-ico svg{width:20px;height:20px}
      .thm-act-dl{background:#eaf1fa;color:#1f5ba8}
      .thm-act-mail{background:#fff5e5;color:#a76518}
      .thm-act-t{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.2175px;line-height:21.75px;color:#172338}
      .thm-act-s{display:block;margin-top:2px;font-size:12px;line-height:1.4;letter-spacing:-.06px;color:#5b6880}
      .thm-seclinks{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid #dce3ec}
      .thm-sl{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:500;letter-spacing:-.065px;line-height:19.5px;color:#5b6880}
      .thm-sl svg{width:14px;height:14px}
      .thm-slsep{width:1px;height:14px;background:#dce3ec}

      @media (max-width:1023px){
        /* .tfh-lead passa a colonna singola: il pannello perde il bordo laterale */
        .th-lead-mock{ border-left:0; border-top:1px solid #fde68a; padding:22px; }
      }
      @media (prefers-reduced-motion: reduce){
        .th-marquee-track{ animation:none !important; }
        .tfh-go, .th-tool::after, .th-btn2, .th-feat-pill{ transition:none; }
      }