/*
Theme Name: Image & Beauty Growth 6
Theme URI: https://imageandbeauty.it
Author: Image & Beauty
Description: Tema personalizzato Image & Beauty Growth System (home ottimizzata per i lead, mobile-first, senza Elementor).
Version: 6.0
Text Domain: ibg
*/


  :root{--ink:#14100d;--ink2:#1e1813;--grey:#5c5349;--muted:#9a8e80;--muted-d:#6a5f51;--orange:#F5843C;--orange-d:#e0722e;--orange-lt:#f0a568;--orange-text:#a84d15;--cream:#F6EEE4;--card:#fbf5ec;--line:#e8ddcf;--green:#2f8f52;--green-d:#1f7a45;--shadow:0 26px 60px rgba(30,15,5,.14)}
  /* --green (4.06:1 su bianco) resta per icone e decorazioni; --green-d (5.35:1) per il TESTO —
     serviva al messaggio di conferma dell'invio del form, che era sotto la soglia AA.
     --muted (chiaro) resta per testo su fondo scuro; --muted-d per testo piccolo su fondo chiaro (contrasto AA).
     --orange-text: arancio per TESTO su fondi chiari (AA: 5.6:1 su bianco, 4.9:1 su cream); --orange-d resta per hover/decorazioni. */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
  body{font-family:'Inter',sans-serif;color:var(--grey);background:#fff;line-height:1.6;font-size:17px;overflow-x:hidden}
  h1,h2,h3{font-family:'Archivo',sans-serif;color:var(--ink);line-height:1.03;letter-spacing:-.02em}
  h1{font-size:clamp(2rem,6vw,4.2rem);font-weight:800;text-transform:uppercase}
  h2{font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:800;text-transform:uppercase}
  h3{font-size:1.12rem;font-weight:700}
  /* height:auto obbligatorio: senza, un'immagine con attributi width/height si DEFORMA quando
     max-width la restringe (bug già visto sulle featured del blog e sullo screenshot della home). */
  img{max-width:100%;height:auto;display:block}
  /* Skip-link (WCAG 2.4.1, Livello A): fuori schermo finché non riceve il focus da tastiera.
     Il target è <main id="main" tabindex="-1"> — il tabindex serve a far atterrare davvero il
     focus sul contenuto, non solo a scrollare. */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--orange);color:#141010;font-weight:800;font-size:.9rem;padding:14px 22px;border-radius:0 0 8px 0;text-decoration:none}
  .skip-link:focus{left:0}
  main[tabindex="-1"]{outline:none}
  /* Link di approfondimento in-body (blocchi di internal linking commerciale): il tema non ha una
     regola generica per <a>, quindi questi link nudi cadevano sul blu di default del browser.
     Un <a> senza classe dentro un blocco di contenuto va sempre stilizzato qui. */
  .v-morelinks a,.fn-verticali a,.fx-related a,.fn-correlate a{color:var(--orange-text);font-weight:700;
    text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .v-morelinks a:hover,.fn-verticali a:hover,.fx-related a:hover,.fn-correlate a:hover{color:var(--orange-d)}
  /* Blocco "Approfondimenti" (inc/prodotto-blog-links.php): dalle pagine prodotto agli articoli.
     Volutamente sobrio — e' un passo laterale per chi non e' pronto alla demo, non deve competere
     con la CTA che lo segue. */
  .pb-blog{padding:52px 0}
  .pb-list{list-style:none;margin:24px auto 0;padding:0;max-width:640px}
  .pb-list li{border-top:1px solid var(--line)}
  .pb-list li:last-child{border-bottom:1px solid var(--line)}
  .pb-list a{display:block;padding:16px 2px;color:var(--ink);font-weight:700;text-decoration:none;
    font-family:'Archivo',sans-serif;font-size:1.02rem;line-height:1.35;transition:color .18s}
  .pb-list a:hover{color:var(--orange-d)}
  .pb-all{color:var(--orange-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .pb-all:hover{color:var(--orange-d)}
  @media(max-width:520px){.pb-blog{padding:40px 0}.pb-list a{padding:14px 2px}}
  /* "Ne hanno parlato" (inc/stampa.php): menzioni su testate di settore.
     Registro volutamente sobrio e quasi editoriale — una citazione di cronaca deve sembrare
     una citazione, non un banner promozionale, o smette di funzionare come prova. */
  .st-blocco{padding:56px 0;background:var(--cream)}
  .st-quote{margin:26px auto 0;max-width:720px;text-align:center}
  .st-quote blockquote{margin:0;font-family:'Archivo',sans-serif;font-weight:700;
    font-size:clamp(1.25rem,3.2vw,1.7rem);line-height:1.32;color:var(--ink)}
  .st-quote figcaption{margin-top:12px;font-size:.92rem;color:var(--muted-d)}
  .st-quote figcaption a{color:var(--orange-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .st-quote figcaption a:hover{color:var(--orange-d)}
  .st-list{list-style:none;margin:30px auto 0;padding:0;max-width:720px}
  .st-list li{border-top:1px solid var(--line);padding:14px 2px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
  .st-list li:last-child{border-bottom:1px solid var(--line)}
  /* Niente uppercase: l'etichetta e' un DOMINIO (parrucchierando.com), e un dominio in
     maiuscolo si legge male e non sembra piu' un indirizzo verificabile. */
  .st-testata{font-family:'Archivo',sans-serif;font-weight:800;
    font-size:.78rem;letter-spacing:.02em;color:var(--muted-d);flex:0 0 auto}
  .st-list a{color:var(--ink);font-weight:600;text-decoration:none;line-height:1.35;transition:color .18s}
  .st-list a:hover{color:var(--orange-d);text-decoration:underline;text-underline-offset:3px}
  /* Fascia in home: stessa citazione, su fondo scuro. Sta tra .nums (crema) e .prod (bianco),
     quindi lo stacco di colore basta a darle peso senza aggiungere decorazione. */
  .st-home{background:var(--ink);color:#fff;padding:56px 0;text-align:center}
  .st-home .ey{color:var(--orange-lt)}
  .st-quote-dark blockquote{color:#fff}
  .st-quote-dark figcaption{color:var(--muted)}
  .st-home-cta{margin-top:22px}
  .st-home-cta a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px;
    text-decoration-color:var(--orange);text-decoration-thickness:2px;transition:color .18s}
  .st-home-cta a:hover{color:var(--orange-lt)}
  @media(max-width:520px){.st-blocco{padding:42px 0}.st-list li{padding:13px 2px}.st-home{padding:42px 0}}
  /* Link dentro le risposte delle FAQ (<details><div class="in">): stesso trattamento. */
  details .in a{color:var(--orange-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
  details .in a:hover{color:var(--orange-d)}
  .wrap{max-width:1180px;margin:0 auto;padding:0 22px}
  section{padding:clamp(56px,8vw,94px) 0;position:relative}
  .ey{font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--orange-text);margin-bottom:16px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--orange);color:#141010!important;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.9rem;padding:16px 30px;border-radius:8px;cursor:pointer;transition:background .2s;min-height:52px;border:0}
  .btn:hover{background:var(--orange-d)}
  .btn-dark{background:var(--ink);color:#fff!important}
  .btn-ghost{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.35)}
  .micro{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:.82rem;color:var(--muted-d)}
  .micro.light{color:#c9bfb2}
  .micro b{color:inherit}.micro .chk{color:var(--green-d);font-weight:700}
  /* --green-d e' tarato sui fondi CHIARI: sopra un hero scuro la spunta scendeva a
     3,54:1. Su .light serve il verde chiaro (8,4:1). Vale per tutti gli hero scuri. */
  .micro.light .chk{color:#5fbf85}
  a:focus-visible,button:focus-visible{outline:3px solid var(--orange-lt);outline-offset:2px}
  .draftbar{background:#241a10;color:#f0d8bf;text-align:center;font-size:.8rem;padding:8px 12px}
  .draftbar b{color:var(--orange)}

  .topbar{background:#0c0a08;color:#c9bfb2;font-size:.8rem}
  .topbar .in{max-width:1220px;margin:0 auto;padding:8px 22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .topbar b{color:#fff}
  .topbar a{color:inherit;text-decoration:none}
  .topbar a:hover b{color:#F5843C}
  /* Accesso al gestionale per i clienti attivi. Volutamente discreto: non deve competere
     con la CTA primaria "Richiedi la demo", che resta l'unica azione in evidenza. */
  .topbar .tb-right{display:flex;align-items:center;gap:18px}
  .topbar .tb-login{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid rgba(255,255,255,.18);border-radius:20px;transition:border-color .2s,color .2s;white-space:nowrap}
  .topbar .tb-login:hover{border-color:var(--orange);color:#fff}
  .topbar .tb-login svg{opacity:.7}
  @media(max-width:700px){
    .topbar .tb-claim{display:none}
  }
  header{position:sticky;top:0;z-index:80;background:rgba(20,16,13,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
  .nav{display:flex;align-items:center;justify-content:space-between;max-width:1220px;margin:0 auto;padding:12px 22px}
  .nav .logo{height:28px;width:auto;flex:0 0 auto}
  .logo-text{font-family:'Archivo',sans-serif;font-weight:800;color:#fff;text-decoration:none;font-size:1.2rem;letter-spacing:.06em;line-height:1}
  .logo-text i{font-style:normal;font-weight:500;font-size:.62em;vertical-align:middle;margin:0 .28em;color:var(--orange);letter-spacing:.14em;text-transform:uppercase}
  .nav ul{display:flex;gap:18px;list-style:none;align-items:center;flex-wrap:nowrap}
  .nav a{color:#e7ddd0;text-decoration:none;font-weight:500;font-size:.92rem}
  .nav>ul>li>a{white-space:nowrap}
  .nav>ul>li{flex:0 0 auto}
  .burger{display:none;background:none;border:0;cursor:pointer;padding:8px}.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}
  /* Il sistema a tendina (.has-sub/.sub) e' stato rimosso: il menu e' volutamente piatto.
     Le regole relative erano CSS morto ed erano l'unico uso di quelle classi. */
  .nav ul li a:hover{color:var(--orange)}
  /* PAGINA CORRENTE. Il segnale portante e' la BARRA, non il colore: la voce "AI" e'
     gia' arancione di suo (regola .nav ul li.ai a piu' in basso, con !important), e
     una segnalazione affidata al solo colore sparirebbe proprio li' — oltre a non
     esistere per chi non distingue i colori. aria-current="page" la annuncia comunque
     agli screen reader: lo stampa ibg_nav_attivo(). */
  .nav>ul>li>a[aria-current]{position:relative;color:#fff;font-weight:700}
  .nav>ul>li>a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
    height:2px;background:var(--orange);border-radius:2px}
  @media(max-width:1120px){
    /* Chiuso, il menu e' traslato fuori schermo. Toglierlo dal tab order NON si fa qui:
       una transizione su visibility non torna in modo affidabile a hidden dopo la chiusura
       (verificato: restava visible e i link restavano focusabili). Se ne occupa `inert`,
       messo e tolto da main.js. */
    /* Il pannello era `position:fixed; inset:56px`, cioe' ancorato a un'altezza di header
       ipotizzata. Ma la topbar va a capo sotto i 700px e l'header arriva a ~124px: a scroll 0
       il menu aperto copriva logo e hamburger, cioe' il pulsante per richiuderlo — al primo
       tap di ogni visitatore. Ancorandolo al fondo dell'header (`absolute; top:100%`) segue
       l'altezza reale, qualunque essa sia. */
    header{position:sticky;top:0}
    .nav{position:relative}
    .nav ul{position:absolute;top:100%;left:0;right:0;background:#14100d;flex-direction:column;gap:0;padding:8px 0 16px;transform:translateY(-130%);transition:transform .3s;align-items:stretch;
      max-height:80dvh;overflow-y:auto;box-shadow:0 24px 40px rgba(0,0,0,.4)}
    .nav ul.open{transform:translateY(0)}
    .nav ul[inert]{pointer-events:none}
    .nav ul li{padding:0 22px}.nav ul li a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
    .nav ul li.cta{padding:14px 22px 4px}.nav ul li.cta a{width:100%}.burger{display:block}
    /* Qui il menu e' una lista verticale: la barra va a SINISTRA, non sotto — sotto
       finirebbe sopra il border-bottom che separa le voci. */
    .nav>ul>li>a[aria-current]::after{left:-12px;right:auto;top:12px;bottom:12px;width:3px;height:auto}
  }

  .hero{background:var(--ink);color:#fff;overflow:hidden}
  .hero .grid{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;min-height:84vh}
  .hero .l{padding:56px 3vw 56px 22px;max-width:780px;position:relative;z-index:3}
  .hero h1{color:#fff}.hero h1 .o{color:var(--orange)}
  .hero .sub{font-size:1.14rem;color:#d9cdbd;max-width:540px;margin:22px 0 14px}
  .hero .sub b{color:#fff}
  .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:16px}
  /* Base per fondo CHIARO: senza questa, un .txtlink fuori dagli hero scuri restava blu di default. */
  .txtlink{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:.92rem}
  .txtlink:hover{color:var(--orange-d)}
  /* Hero scuri (.hero e .cs-hero): testo chiaro. */
  .hero .txtlink,.cs-hero .txtlink{color:#e7ddd0!important;text-decoration:underline;font-weight:500;font-size:.92rem}
  .hero .txtlink:hover,.cs-hero .txtlink:hover{color:#fff!important}
  .hero .r{position:relative;align-self:stretch;min-height:60vh}
  .hero .r .ph{position:absolute;inset:0;background:linear-gradient(120deg,#2c1d12,#140f09)}
  .hero .r .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;transform:scaleX(-1);filter:contrast(1.06) brightness(1.02);mix-blend-mode:luminosity;-webkit-mask-image:radial-gradient(100% 84% at 50% 54%,#000 22%,transparent 60%);mask-image:radial-gradient(100% 84% at 50% 54%,#000 22%,transparent 60%)}
  .hero .r::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--ink),transparent 48%),linear-gradient(0deg,var(--ink),transparent 32%)}
  .hero .r .cap{position:absolute;left:6%;bottom:28px;z-index:3;font-family:'Archivo';font-weight:700;font-size:1rem;color:#fff}
  .hero .r .cap small{display:block;color:var(--orange);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem}
  /* Su mobile il testo viene PRIMA dell'immagine. Con `order:-1` la foto (fino a 420px di altezza)
     spingeva l'H1 a 544px e la CTA a 889px: fuori dalla piega su qualunque telefono. L'immagine
     resta, sotto, e piu' bassa: e' atmosfera, non informazione. */
  @media(max-width:900px){.hero .grid{grid-template-columns:1fr;min-height:auto}.hero .r{min-height:56vw;max-height:300px}.hero .l{padding:32px 22px 34px}.hero .cta-row .btn{width:100%}}

  .nums{background:var(--cream)}
  .nums .g{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
  .nums .n{font-family:'Archivo';font-weight:800;font-size:clamp(2.3rem,6vw,3.5rem);color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
  /* Etichetta "FINO A" sopra il numero: era ripetuta come inline style in 6 template
     (e come .lab solo nei verticali). Una classe sola, usata ovunque. */
  .nums .n{position:relative}
  .nums .n .lab{position:absolute;top:-1.05em;left:0;right:0;font-size:.32em;font-weight:600;letter-spacing:.12em;color:var(--muted-d)}
  .nums .n .s{color:var(--orange-d)}.nums small{display:block;margin-top:8px;color:var(--muted-d);font-size:.82rem}
  @media(max-width:620px){.nums .g{grid-template-columns:1fr 1fr;gap:30px 14px}}

  .prod .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,54px);align-items:center}
  .frame{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  /* I mock di interfaccia del gestionale (.am) stanno in assets/mock.css (enqueue condizionale)
     e vengono resi da template-parts/mock-app.php. */
  .frame .bar{display:flex;gap:7px;padding:11px 13px;background:#f1e9de;border-bottom:1px solid var(--line)}
  .frame .bar i{width:11px;height:11px;border-radius:50%;background:#d8cbbc}.frame .bar i:nth-child(1){background:#f0837a}.frame .bar i:nth-child(2){background:#f3c26b}.frame .bar i:nth-child(3){background:#7fd18f}
  .frame .fb{aspect-ratio:16/10;background:linear-gradient(135deg,#fde8d8,#f6c9a6);display:flex;align-items:center;justify-content:center;color:#b06a2e;font-weight:600}
  .prod ul{list-style:none;margin-top:18px}.prod li{padding:8px 0 8px 28px;position:relative;color:var(--ink);font-weight:500}
  .prod li::before{content:"";position:absolute;left:0;top:14px;width:15px;height:3px;background:var(--orange)}
  @media(max-width:820px){.prod .grid{grid-template-columns:1fr}.prod .btn{width:100%}}

  .feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;transition:.2s}
  .card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
  .feat a.card{display:block;text-decoration:none;color:var(--ink)}
  .feat a.card:hover h3{color:var(--orange-d)}
  .ic{width:46px;height:46px;border-radius:12px;background:#f0dcc8;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .ic svg{width:22px;height:22px;stroke:var(--orange-d);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .card p{font-size:.92rem;margin-top:6px}
  @media(max-width:820px){.feat{grid-template-columns:1fr 1fr}}@media(max-width:480px){.feat{grid-template-columns:1fr}}

  .eco{background:var(--ink);color:#e9ddcf}.eco h2{color:#fff}.eco .ey{color:var(--orange-lt)}
  .eco .g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:40px;background:rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
  .eco .e{background:var(--ink2);padding:28px}.eco .e .k{color:var(--orange);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
  .eco .e h3{color:#fff}.eco .e p{color:#b7ab9c;font-size:.92rem;margin-top:6px}
  @media(max-width:820px){.eco .g{grid-template-columns:1fr}}

  .tst{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
  .q{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
  .q p{color:var(--ink)}.stars{color:#e0902f;margin-bottom:10px;letter-spacing:2px}
  .who{display:flex;align-items:center;gap:12px;margin-top:16px}
  .who .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#e6a06a,#c25a2a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Archivo';flex:0 0 auto}
  .who b{color:var(--ink);display:block;font-size:.92rem}.who small{color:var(--muted-d);font-size:.8rem}
  .res{margin-top:14px;background:#eef7f0;color:#2f7a3d;font-weight:700;border-radius:8px;padding:8px 12px;font-size:.86rem;text-align:center}
  .disc{text-align:center;color:var(--muted-d);font-size:.76rem;font-style:italic;margin-top:20px}
  @media(max-width:820px){.tst{grid-template-columns:1fr}}

  /* lead magnet */
  .lm{background:#fff}
  .lm .box{background:linear-gradient(120deg,#fff3e9,#fbe6d3);border:1px solid var(--line);border-radius:20px;padding:clamp(28px,5vw,44px);display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
  .lm h3{font-size:clamp(1.3rem,3vw,1.8rem);text-transform:none}
  .lm p{margin-top:8px}
  .lm form{display:flex;gap:10px;flex-wrap:wrap}
  .lm input{flex:1;min-width:180px;padding:14px 16px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;font-size:1rem;background:#fff}
  @media(max-width:760px){.lm .box{grid-template-columns:1fr}}

  .founder{background:var(--cream)}
  .founder .g{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,48px);align-items:center}
  .founder .ph{aspect-ratio:4/5;border-radius:14px;background:radial-gradient(78% 68% at 50% 38%,#2a2018,#140f09);position:relative;overflow:hidden;box-shadow:var(--shadow)}
  .founder .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 6%;filter:contrast(1.02)}
  @media(max-width:820px){.founder .g{grid-template-columns:1fr}.founder .ph{max-width:300px}.founder .btn{width:100%}}

  .price{background:#fff}
  .price .tabs{display:flex;gap:8px;justify-content:center;margin:24px 0;flex-wrap:wrap}
  .tab{position:relative;background:#fff;border:1.5px solid var(--line);color:var(--grey);font-family:'Inter';font-weight:700;padding:12px 22px;border-radius:8px;cursor:pointer;min-height:48px}
  /* Badge sul piano consigliato: /prezzi lo aveva, i tab dei verticali no — stessa offerta,
     due gerarchie diverse. Qui MARKETING e' anche il tab attivo di default. */
  .tab .tab-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--orange);color:#141010;
    font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:20px;white-space:nowrap}
  .tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
  .tab .b{display:block;font-size:.72rem;opacity:.85;font-weight:500}
  .panel{max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:34px;text-align:center}
  .panel[hidden]{display:none}.panel .p{font-family:'Archivo';font-weight:800;font-size:2.8rem;color:var(--ink)}.panel .p span{font-size:1rem;color:var(--muted-d);font-weight:400;font-family:'Inter'}
  .panel ul{list-style:none;text-align:left;display:inline-block;margin-top:12px}.panel li{padding:7px 0 7px 26px;position:relative;color:var(--ink);font-size:.95rem}.panel li::before{content:"✓";position:absolute;left:0;color:var(--orange-d);font-weight:700}
  .panel .btn{margin-top:20px;width:100%}.price .extra{text-align:center;color:var(--muted-d);font-size:.82rem;margin-top:16px}

  /* demo form */
  .demo{background:var(--ink);color:#fff}
  .demo .stance{max-width:760px;margin:0 auto 40px;text-align:center}
  .demo .stance h2{color:#fff}.demo .stance p{color:#d9cdbd;margin-top:12px;font-size:1.1rem}
  .demo .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,50px);align-items:center}
  .demo .l h3{color:#fff;font-size:1.5rem}.demo .l p{color:#c9bfb2;margin-top:12px}
  .demo .l .b{list-style:none;margin-top:18px}.demo .l .b li{padding:8px 0 8px 28px;position:relative;color:#e7ddd0}
  .demo .l .b li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:700}
  .fcard{background:#fff;border-radius:16px;padding:30px;box-shadow:var(--shadow);color:var(--ink)}
  /* Il titolo della card e' h2 o h3 secondo il contesto (vedi form-demo.php): lo stile non deve dipendere dal livello. */
  .fcard h2,.fcard h3,.fcard h4{font-family:'Archivo';font-weight:800;font-size:1.3rem;text-transform:uppercase;color:var(--ink);line-height:1.15;letter-spacing:normal}
  /* Riga di testo, NON flex: con display:flex i pezzi di testo diventano flex-item anonimi e su
     375px "su Google" si spezzava a meta' lasciando un punto orfano a capo (visto su mobile). */
  .fcard .ftrust{margin:9px 0 2px;font-size:.82rem;font-weight:600;color:var(--muted-d);line-height:1.6}
  .fcard .ftrust svg{display:inline-block;width:15px;height:15px;fill:#4285F4;vertical-align:-3px;margin-right:5px}
  .fcard .ftrust b{color:var(--ink);font-weight:800}
  .fcard .ftrust .fstars{display:inline-flex;gap:1px;margin:0 5px;vertical-align:-2px}
  .fcard .ftrust .fstars svg{width:13px;height:13px;fill:#f5a623;margin:0}
  /* I due pezzi restano interi quando la riga va a capo. */
  .fcard .ftrust .fnw{white-space:nowrap}
  /* Errore di compilazione: accanto al campo, non in fondo al form (assets/main.js).
     #b3261e = 6.2:1 su bianco, e il colore non e' l'unico segnale (c'e' anche il testo). */
  .fe{color:#b3261e;font-size:.82rem;font-weight:600;margin-top:6px;line-height:1.35}
  .field.err input,.field.err select,input.err,.lm input.err{border-color:#b3261e;background:#fffafa}
  label.ck.err span{color:#b3261e}
  label.ck.err input[type=checkbox]{outline:2px solid #b3261e;outline-offset:2px}
  .fcard .field{margin-top:14px}.fcard label{display:block;font-size:.82rem;font-weight:600;color:var(--grey);margin-bottom:6px}
  .fcard input,.fcard select{width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;font-size:1rem;background:#fff;min-height:48px}
  .fcard .btn{width:100%;margin-top:18px}
  .fcard .rr{text-align:center;color:var(--muted-d);font-size:.8rem;margin-top:12px}
  .fcard .fpriv{text-align:center;color:var(--muted-d);font-size:.74rem;margin-top:10px;line-height:1.5}
  .fcard .fpriv a{color:inherit;text-decoration:underline}
  /* Checkbox brandizzata (.ck): consensi nei form (WhatsApp, email marketing, lead magnet).
     Input con appearance:none = la casella È l'input (tastiera/screen reader ok); spunta scura
     su arancio come i bottoni; tutta la label è cliccabile (touch target ampio). */
  /* label.ck e input[type=checkbox]: specificità alzata apposta per battere .fcard label / .fcard input. */
  label.ck{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:.85rem;font-weight:400;line-height:1.5;color:var(--muted-d);text-align:left;padding:7px 0;margin:2px 0}
  .ck input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:21px;height:21px;min-width:0;min-height:0;padding:0;margin:1px 0 0;border:2px solid #cdbfae;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;display:grid;place-items:center}
  .lm form label.ck{flex:1 1 100%;margin:2px 0 0;padding:2px 0}
  .ck:hover input[type=checkbox]{border-color:var(--orange)}
  .ck input[type=checkbox]:checked{background:var(--orange);border-color:var(--orange)}
  .ck input[type=checkbox]:checked::before{content:"";width:11px;height:11px;background:#141010;clip-path:polygon(14% 44%,0 65%,40% 100%,100% 16%,84% 0,39% 62%)}
  .ck input[type=checkbox]:focus-visible{outline:3px solid var(--orange-lt);outline-offset:2px}
  .ck b{color:var(--ink);font-weight:600}
  .ck a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .fcard .ok{display:none;text-align:center;padding:20px;color:var(--green-d);font-weight:700}
  .ibg-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
  .fcard.ibg-ok{text-align:center;color:var(--green-d);font-weight:700}
  .fcard .ibg-msg{margin-top:12px;text-align:center;font-size:.85rem;color:#c0392b;font-weight:600}
  .fcard button[disabled]{opacity:.6;cursor:progress}
  @media(max-width:820px){.demo .grid{grid-template-columns:1fr}}

  footer{background:#0c0a08;color:#8a7f72;padding:40px 0;text-align:center;font-size:.84rem}
  footer .flogo{height:26px;margin:0 auto 12px;filter:brightness(0) invert(1);opacity:.8}
  /* .reveal nasconde il contenuto finche' main.js non aggiunge .in. Due reti di
     sicurezza, ENTRAMBE in CSS — un fallback dentro main.js non serve a niente
     nel caso che conta, cioe' quando e' main.js stesso a non caricare:
       1) senza JS non c'e' .js sull'<html> (vedi header.php) e non si nasconde nulla;
       2) con JS ma senza main.js, l'animazione qui sotto ripristina tutto dopo 2,5s.
     Serve a non farsi leggere il contenuto da Google come "testo nascosto".
     Durante il ritardo l'animazione non applica nulla (niente fill backwards),
     quindi il comportamento normale con .in resta identico a prima. */
  html.js .reveal{opacity:0;transform:translateY(18px);transition:.6s;
    animation:ibg-reveal-sicurezza 1ms linear 2.5s forwards}
  /* Anche la regola che RIVELA deve stare sotto html.js: il prefisso alza la
     specificita' (0,2,1) e senza lo stesso prefisso ".reveal.in" (0,2,0)
     perderebbe la cascata, lasciando il contenuto invisibile per sempre. */
  html.js .reveal.in{opacity:1;transform:none}
  .reveal.in{opacity:1;transform:none}
  @keyframes ibg-reveal-sicurezza{to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){
    html.js .reveal{opacity:1;transform:none;transition:none;animation:none}}

/* footer ricco */
footer{background:#0c0a08;color:#8a7f72;padding:56px 0 30px;font-size:.9rem;text-align:left}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
footer .fbrand .flogo{height:30px;margin:0 0 14px;filter:none;opacity:.92}
footer .fbrand p{color:#8a7f72;max-width:300px;font-size:.9rem}
footer h4{font-family:'Archivo',sans-serif;color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
footer .fcol ul{list-style:none}
footer .fcol li{margin-bottom:9px}
footer .fcol a{color:#b7ab9c;text-decoration:none;font-size:.9rem}
footer .fcol a:hover{color:#F5843C}
footer .fbottom{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:22px;text-align:center;color:#8a7f72;font-size:.82rem}
footer .fbottom a{color:#8a7f72;text-decoration:underline;text-underline-offset:2px}
  footer .fbottom a:hover{color:#fff}
  /* Riga dati societari: i separatori sono generati in CSS, cosi' andando a capo su mobile
     non resta un puntino orfano a fine riga. */
  footer .fdati{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0;line-height:1.7}
  /* gap: con inline-flex gli spazi bianchi fra i figli vengono ignorati, e "Privacy Policy | Cookie Policy"
     usciva con la barra attaccata alle parole. */
  footer .fdati>span{display:inline-flex;align-items:center;gap:6px}
  footer .fdati>span:not(:last-child)::after{content:"\00b7";margin:0 10px;color:#5f564c}
  @media(max-width:520px){footer .fdati>span:not(:last-child)::after{margin:0 7px}}
  /* "Preferenze cookie" e' un <button> (riapre il pannello del CMP), ma deve leggersi
     come gli altri link della riga. */
  footer .fpref{background:none;border:0;padding:0;font:inherit;color:#8a7f72;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  footer .fpref:hover{color:#fff}
@media(max-width:820px){footer .fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){footer .fgrid{grid-template-columns:1fr}}

/* Fascia AI in home */
.ai-band{background:var(--cream)}
.ai-band .box{background:var(--ink);color:#fff;border-radius:20px;padding:clamp(30px,5vw,52px);text-align:center;position:relative;overflow:hidden}
.ai-band .box::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:160%;background:radial-gradient(50% 50% at 60% 40%,rgba(245,132,60,.28),transparent 70%);z-index:0}
.ai-band .box>*{position:relative;z-index:1}
.ai-band .tag{display:inline-block;background:rgba(245,132,60,.16);color:var(--orange-lt);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;padding:7px 14px;border-radius:20px;margin-bottom:16px}
.ai-band h2{color:#fff;max-width:720px;margin:0 auto}
.ai-band p{color:#d9cdbd;max-width:600px;margin:12px auto 22px}
.ai-band p b{color:#fff}
/* voce menu AI evidenziata */
.nav ul li.ai a{color:var(--orange)!important;font-weight:700}
.nav ul li.ai a:hover{color:var(--orange-lt)!important}

/* teaser prezzi in home (il dettaglio completo è su /prezzi) */
.price .pt-lead{max-width:560px;margin:12px auto 0;color:var(--grey)}
.pt-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:28px 0 24px}
.pt-chip{border:1.5px solid var(--line);border-radius:14px;padding:18px 26px;min-width:150px;background:#fff;position:relative}
.pt-chip.rec{border-color:var(--orange);box-shadow:var(--shadow)}
.pt-chip .nm{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;color:var(--grey)}
.pt-chip .pr{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.7rem;color:var(--ink);margin-top:4px;line-height:1}
.pt-chip .pr span{font-size:.8rem;color:var(--muted-d);font-weight:400;font-family:'Inter',sans-serif}
.pt-chip .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--orange);color:#141010;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.6rem;padding:4px 12px;border-radius:12px;white-space:nowrap}

  /* ===== Domande frequenti in home (template-parts/home-faq.php) =====
     Sta tra la fascia prezzi e la sezione demo scura: fondo crema per staccare da entrambe.
     Accordion nello stesso pattern "+"/"–" dei verticali e di /domande-frequenti/. */
  .hf{background:var(--cream)}
  .hf .wrap{max-width:820px}
  .hf .ey,.hf h2{text-align:center}
  .hf h2{font-size:clamp(1.6rem,4vw,2.3rem);text-transform:none;letter-spacing:-.02em}
  .hf-list{margin-top:32px}
  .hf-list details{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff}
  .hf-list summary{padding:18px 22px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;
    display:flex;justify-content:space-between;align-items:flex-start;gap:14px;line-height:1.35}
  .hf-list summary::-webkit-details-marker{display:none}
  .hf-list summary::after{content:"+";color:var(--orange-d);font-size:1.4rem;font-weight:700;line-height:1.1;flex:0 0 auto}
  .hf-list details[open] summary::after{content:"–"}
  .hf-list summary:hover{color:var(--orange-d)}
  .hf-list .in{padding:0 22px 20px;color:var(--grey);line-height:1.6}
  .hf-list .in p{margin:0 0 10px}
  .hf-list .in p:last-child{margin-bottom:0}
  .hf-list .in a{color:var(--orange-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .hf-list .in a:hover{color:var(--orange-d)}
  .hf-tutte{margin-top:22px;text-align:center}
  .hf-tutte a{color:var(--orange-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .hf-tutte a:hover{color:var(--orange-d)}
  @media(max-width:520px){
    .hf-list summary{padding:16px 18px}
    .hf-list .in{padding:0 18px 18px}
  }

  /* ===== CTA fissa, solo mobile =====
     Il mobile è il 58% delle impressioni. La CTA primaria resta quella della pagina: questa è
     una scorciatoia sempre raggiungibile, non un secondo invito che compete con il primo. */
  .sticky-cta{display:none}
  /* .sc-via: la barra si toglie di mezzo quando il form e' a schermo (vedi main.js).
     La transizione evita che sparisca di scatto mentre l'utente sta scrivendo. */
  .sticky-cta.sc-via{transform:translateY(120%);pointer-events:none}
  @media(max-width:900px){
    .sticky-cta{transition:transform .25s ease}
    .sticky-cta{display:flex;gap:8px;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:60;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);
      box-shadow:0 -8px 30px rgba(30,15,5,.10)}
    .sticky-cta .sc-main{flex:1;display:inline-flex;align-items:center;justify-content:center;
      background:var(--orange);color:#141010;text-decoration:none;font-family:'Archivo',sans-serif;font-weight:800;
      text-transform:uppercase;letter-spacing:.02em;font-size:.82rem;border-radius:8px;padding:0 14px;min-height:52px;text-align:center}
    .sticky-cta .sc-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;min-height:52px;
      border-radius:8px;border:1.5px solid var(--line);background:#fff;flex:0 0 auto}
    .sticky-cta .sc-ic svg{width:24px;height:24px;fill:currentColor}
    .sticky-cta .sc-wa{background:#25D366;border-color:#1da851;color:#0b1f12}
    .sticky-cta .sc-tel{color:var(--ink)}
    /* La barra copre il fondo pagina: si restituisce lo spazio al footer. */
    footer{padding-bottom:84px}
  }