/*
* Stili della landing "Audit E-commerce".
* Tutti i selettori sono ancorati a .landing-audit (classe sul del
* template) per evitare che queste regole tocchino il resto del sito nel
* caso lo stylesheet venga mai caricato fuori dalla pagina corretta.
* Le custom property in :root non hanno effetto visivo da sole: restano
* inerti finche' non richiamate da var(...), quindi non serve scoparle.
*/
/* Font self-hosted (assets/fonts/): niente piu' @import verso
fonts.googleapis.com, che era una chiamata esterna bloccante il
rendering. Google serve Plus Jakarta Sans e Martian Mono come font
variabili: un solo file copre tutti i pesi richiesti, il browser
sceglie l'istanza giusta in base al font-weight dichiarato in ogni
@font-face. Sottoinsieme "latin" (U+0000-00FF): copre l'italiano,
niente cirillico/vietnamita/greco che non servono su questa pagina. */
@font-face{
font-family:'Martian Mono';
font-style:normal;
font-weight:400 700;
font-display:swap;
src:url('../fonts/martian-mono.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:400 700;
font-display:swap;
src:url('../fonts/plus-jakarta-sans.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
--bg:#0B1210;
--card:#131E19;
--card-2:#17251F;
--ink:#E8F3ED;
--muted:#9FB3A9;
--border:rgba(234,240,245,0.10);
--cyan:#3FBF8F;
--cyan-ink:#0B1210;
--amber:#A78BFA;
--track:#1D2C25;
--radius:3px;
--display:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
--mono:'Martian Mono',ui-monospace,'SFMono-Regular',monospace;
}
/* Selettore di contesto: definisce sfondo/colore base della landing. */
.landing-audit{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--display);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
.landing-audit, .landing-audit *{box-sizing:border-box}
.landing-audit img, .landing-audit svg, .landing-audit picture{max-width:100%;display:block}
.landing-audit .wrap{max-width:1160px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.landing-audit .wrap{padding:0 20px}}
/* Compensa l'header sticky durante lo scroll morbido (JS): senza
questo, il titolo della sezione di destinazione finirebbe nascosto
sotto l'header invece di comparire subito sotto. */
.landing-audit [id]{scroll-margin-top:76px}
@media(min-width:768px){.landing-audit [id]{scroll-margin-top:90px}}
.landing-audit a{color:inherit}
.landing-audit h1, .landing-audit h2, .landing-audit h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;letter-spacing:-.01em}
.landing-audit .tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:500;color:var(--cyan)}
.landing-audit .head-center{text-align:center}
.landing-audit .head-center ul, .landing-audit .head-center ol{list-style-position:inside}
.landing-audit .hl-green{color:var(--cyan)}
.landing-audit .tnum{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.landing-audit ::selection{background:var(--cyan);color:var(--cyan-ink)}
.landing-audit :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
.landing-audit, .landing-audit *{animation:none!important;transition:none!important}
}
/* Fuori schermo finche' non riceve focus da tastiera (Tab), poi diventa
visibile in alto a sinistra: primo elemento raggiungibile per chi
naviga senza mouse. */
.landing-audit .skip-link{position:absolute;left:-9999px;top:0;background:var(--cyan);color:var(--cyan-ink);padding:12px 20px;border-radius:var(--radius);font-family:var(--mono);font-size:13px;font-weight:700;text-decoration:none;z-index:100}
.landing-audit .skip-link:focus{left:16px;top:16px}
/* ============================================
HEADER (mobile-first: logo + CTA compatta,
menu nascosto - 4 link non giustificano un
hamburger. Menu completo dai 768px in su.)
============================================ */
.landing-audit header.nav{position:sticky;top:0;z-index:40;background:rgba(13,17,23,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.landing-audit .nav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
@media(min-width:768px){.landing-audit .nav-row{height:74px}}
/* Logo (wordmark orizzontale, rapporto ~9.6:1): piu' piccolo sui
telefoni piu' stretti (~320px) per non sommarsi alla CTA e sforare
la larghezza dello schermo; torna alla dimensione piena da 380px. */
.landing-audit .nav-logo-img{height:16px;width:auto}
@media(min-width:380px){.landing-audit .nav-logo-img{height:22px}}
.landing-audit nav.links{display:none}
@media(min-width:768px){
.landing-audit nav.links{display:flex;gap:30px;font-size:17px;font-weight:600;color:var(--ink)}
}
.landing-audit nav.links a{text-decoration:none;transition:color .2s,text-shadow .2s}
/* Il glow resta acceso dopo il click, finche' il link mantiene il focus. */
.landing-audit nav.links a:hover,
.landing-audit nav.links a:focus,
.landing-audit nav.links a:active{color:var(--cyan);text-shadow:0 0 12px rgba(63,191,143,.7)}
/* CTA compatta in nav mobile, torna alla dimensione piena da 768px. */
/* min-height 44px: target touch minimo anche in versione compatta,
dato che questa CTA e' la conversione primaria della pagina. */
.landing-audit .nav-row .btn-ghost{padding:9px 14px;font-size:12px;min-height:44px}
@media(min-width:768px){.landing-audit .nav-row .btn-ghost{padding:15px 26px;font-size:15px;min-height:0}}
/* Sotto i 768px il menu links e' gia' nascosto: con la CTA header rimossa
resta solo il logo, quindi va centrato invece di appoggiarsi a sinistra
(effetto dello justify-content:space-between pensato per 3 elementi). */
@media(max-width:767px){
.landing-audit .nav-row{justify-content:center}
.landing-audit .nav-row .btn-ghost{display:none}
}
/* max-width:100% + white-space normale: su viewport molto stretti (~320px)
il testo va a capo su due righe invece di sfondare il contenitore e
causare scroll orizzontale sull'intera pagina. */
.landing-audit .btn-primary, .landing-audit .btn-ghost{max-width:100%;white-space:normal;text-align:center}
.landing-audit .btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--cyan);color:var(--cyan-ink);border:2px solid var(--cyan);border-radius:var(--radius);padding:16px 28px;font-family:var(--display);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:filter .15s ease,box-shadow .15s ease,transform .1s ease}
.landing-audit .btn-primary:hover{filter:brightness(1.15);box-shadow:0 0 26px 2px rgba(63,191,143,.65)}
.landing-audit .btn-primary:active{filter:brightness(.8);transform:translateY(1px);box-shadow:0 0 10px 0 rgba(63,191,143,.35)}
.landing-audit .btn-ghost{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);border:1px solid var(--cyan);border-radius:var(--radius);padding:15px 26px;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;cursor:pointer;background:rgba(63,191,143,.08);box-shadow:0 0 16px 0 rgba(63,191,143,.4);transition:box-shadow .2s,background .2s}
.landing-audit .btn-ghost:hover,
.landing-audit .btn-ghost:focus-visible{box-shadow:0 0 26px 3px rgba(63,191,143,.7);background:rgba(63,191,143,.14)}
.landing-audit .btn-ghost:active{background:rgba(63,191,143,.22);box-shadow:0 0 10px 0 rgba(63,191,143,.4)}
/* ============================================
01 · HERO (mobile-first: 1 colonna di base,
2 colonne dai 900px in su)
============================================ */
.landing-audit .hero{padding:40px 0 32px;border-bottom:1px solid var(--border)}
@media(min-width:768px){.landing-audit .hero{padding:64px 0 56px}}
.landing-audit .hero-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:900px){
.landing-audit .hero-grid{grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
}
.landing-audit .hero h1{margin-top:18px;font-size:clamp(28px,7vw,44px);line-height:1.18}
.landing-audit .hero p.lede{margin-top:18px;font-size:16px;line-height:1.65;color:var(--muted);max-width:46ch}
@media(min-width:768px){.landing-audit .hero p.lede{font-size:17px}}
.landing-audit .hero-cta{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media(min-width:640px){.landing-audit .hero-cta{flex-direction:row;align-items:center;flex-wrap:wrap;gap:24px}}
.landing-audit .cta-secondary-link{font-family:var(--mono);font-size:13.5px;color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(63,191,143,.4);padding-bottom:2px;transition:border-color .2s ease,color .2s ease}
.landing-audit .cta-secondary-link:hover,
.landing-audit .cta-secondary-link:focus-visible{border-color:var(--cyan);color:var(--ink)}
.landing-audit .cta-microcopy{margin-top:12px;font-size:12.5px;color:var(--muted)}
.landing-audit .trust-row{margin-top:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.landing-audit .trust-row a{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.landing-audit .trust-row img{height:38px;width:auto}
@media(min-width:768px){.landing-audit .trust-row img{height:46px}}
.landing-audit .trust-row span{font-size:13px;color:var(--muted);font-family:var(--mono)}
.landing-audit .trust-row-center{justify-content:center}
/* Card "dato reale": sostituisce il grafico decorativo, nessuna
animazione, i numeri sono statici e verificati. */
.landing-audit .data-card{margin-top:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:opacity .35s ease}
@media(min-width:900px){.landing-audit .data-card{margin-top:0}}
/* Altezza minima: evita che la card "salti" quando lo script (in fondo
al file) alterna il contenuto tra la versione a righe (metrica prima/
dopo) e quella a paragrafo unico (risultati degli altri casi). */
.landing-audit .data-card[data-rotating-results]{min-height:190px;display:flex;flex-direction:column;justify-content:center}
/* flex-wrap: su viewport molto stretti (~320px) etichetta e valore non
stanno sulla stessa riga senza sovrapporsi; il wrap li impila invece
di farli sfondare il bordo della card. */
.landing-audit .data-card-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.landing-audit .data-card-row:first-of-type{margin-top:22px}
.landing-audit .data-card-label{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.landing-audit .data-card-value{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink);text-align:right;margin-left:auto}
.landing-audit .data-card-value-lg{font-size:26px;color:var(--cyan)}
.landing-audit .data-card-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:13px;line-height:1.6;color:var(--muted)}
.landing-audit .data-card-result{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-size:15px;line-height:1.6;color:var(--ink)}
/* ============================================
02 · BARRA CREDIBILITÀ (mobile-first: colonna
unica centrata, 3 colonne con separatori dai
768px in su)
============================================ */
.landing-audit .credibility-bar{padding:28px 0;border-bottom:1px solid var(--border);background:var(--card)}
.landing-audit .credibility-grid{display:grid;grid-template-columns:1fr;gap:20px;text-align:center}
@media(min-width:768px){
.landing-audit .credibility-grid{grid-template-columns:repeat(3,1fr);gap:0;text-align:left}
.landing-audit .credibility-item{padding:0 28px;border-left:1px solid var(--border)}
.landing-audit .credibility-item:first-child{border-left:none;padding-left:0}
}
.landing-audit .credibility-num{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--cyan);margin:0}
.landing-audit .credibility-label{font-size:13.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.landing-audit .credibility-label-lg{color:var(--ink);font-size:14.5px}
/* Mobile-first: padding ridotto di base, ripristinato dai 768px in su. */
.landing-audit .section{padding:48px 0}
@media(min-width:768px){.landing-audit .section{padding:80px 0}}
.landing-audit .section-narrow{max-width:740px}
/* Tipografia dei blocchi di lettura lunga (sezioni 03 · Il problema e
04 · La storia): colore leggermente attenuato rispetto a --ink per
distinguere il corpo del testo dai titoli, ma piu' leggibile di
--muted (riservato a etichette/didascalie piccole). */
.landing-audit .prose p{font-size:16.5px;line-height:1.8;color:#C4CDD6}
.landing-audit .prose p+p{margin-top:18px}
.landing-audit .prose strong{color:var(--ink);font-weight:700;background:linear-gradient(transparent 70%, rgba(87,217,196,.16) 0)}
.landing-audit .problem-questions{margin:24px 0;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.landing-audit .problem-questions ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px}
.landing-audit .problem-questions li{font-size:15px;line-height:1.6;color:var(--ink)}
.landing-audit .story-highlight{margin:28px 0;padding:20px 24px;background:var(--card);border-left:3px solid var(--cyan);border-radius:0 var(--radius) var(--radius) 0;font-size:17px;line-height:1.55;font-weight:600;color:var(--ink)}
/* Intro paragrafo sotto H2, usato nelle sezioni 05 e 06. */
.landing-audit .section-intro{margin-top:14px;font-size:16px;line-height:1.6;color:var(--muted);max-width:60ch}
/* ============================================
05 · IL SISTEMA IN 3 TAPPE (mobile-first:
colonna unica, 3 colonne dai 900px in su).
Card sempre visibili, nessun accordion: il
contenuto che vende non si nasconde dietro
un clic.
============================================ */
.landing-audit .method-grid{margin-top:32px;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.landing-audit .method-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
.landing-audit .method-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px}
.landing-audit .method-icon{color:var(--cyan);margin-bottom:16px}
.landing-audit .method-card .tag{display:block;margin-bottom:6px}
.landing-audit .method-card h3{font-size:21px;margin-top:2px}
.landing-audit .method-card > p{margin-top:14px;font-size:14.5px;line-height:1.7;color:#C4CDD6}
.landing-audit .method-meta{margin-top:20px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:14px}
.landing-audit .method-meta dt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 4px}
/* Solo "Cosa ti porti a casa" stacca dal resto della lista (Durata,
Investimento restano nel muted standard): e' la riga che vende. */
.landing-audit .method-meta dt.dt-accent{color:var(--amber)}
.landing-audit .method-meta dd{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
/* ============================================
06 · I CINQUE PILASTRI (mobile-first: colonna
unica, 2 colonne dai 640px, 3+2 dai 900px)
============================================ */
.landing-audit .pillars-grid{margin-top:32px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.landing-audit .pillars-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.landing-audit .pillars-grid{grid-template-columns:repeat(3,1fr)}}
.landing-audit .pillar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.landing-audit .pillar-num{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--amber);display:block}
.landing-audit .pillar h3{font-size:16px;margin-top:10px}
.landing-audit .pillar p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}
.landing-audit .pillars-cta{margin-top:40px;padding:28px;background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.landing-audit .pillars-cta h3{font-size:19px}
.landing-audit .pillars-cta p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:50ch;margin-left:auto;margin-right:auto}
.landing-audit .pillars-cta .btn-primary{margin-top:20px}
/* ============================================
07 · CASI REALI (mobile-first: colonna unica,
3 colonne dai 900px in su)
============================================ */
.landing-audit .case-grid{margin-top:32px;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.landing-audit .case-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
.landing-audit .case-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column}
.landing-audit .case-card h3.tag{margin-bottom:4px}
.landing-audit .case-card h4{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 6px;font-weight:500}
.landing-audit .case-card h4:first-of-type{margin-top:16px}
.landing-audit .case-card p{font-size:14px;line-height:1.65;color:#C4CDD6;margin:0}
.landing-audit .case-result{margin-top:auto;padding-top:18px;border-top:1px solid var(--border)}
.landing-audit .case-result .case-result-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--amber);margin:0 0 8px;font-weight:700}
.landing-audit .case-result p{color:var(--ink);font-weight:600;font-size:14.5px;line-height:1.6}
/* ============================================
08 · CHI SONO (mobile-first: foto sopra,
testo sotto; da 860px in su due colonne,
foto a sinistra piu' stretta del testo)
============================================ */
.landing-audit .about-band{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:860px){
.landing-audit .about-band{grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
}
/* Larghezza fissa = larghezza della foto: si centra da sola su mobile,
torna ad allinearsi a sinistra della sua colonna da 860px in su. */
.landing-audit .portrait-col{width:220px;max-width:100%;margin:0 auto}
@media(min-width:860px){.landing-audit .portrait-col{margin:0}}
.landing-audit .about-band img.portrait{width:220px;height:275px;object-fit:cover;object-position:center top;border-radius:var(--radius);border:1px solid var(--border)}
.landing-audit .signature{margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.03em}
/* ============================================
09 · PER CHI FUNZIONA (mobile-first: colonna
unica, 2 colonne affiancate dai 768px in su)
============================================ */
.landing-audit .fit-grid{margin-top:28px;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.landing-audit .fit-grid{grid-template-columns:1fr 1fr;gap:32px}}
.landing-audit .fit-column{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.landing-audit .fit-yes{border-color:rgba(63,191,143,.35)}
.landing-audit .fit-no{border-color:rgba(167,139,250,.3)}
.landing-audit .fit-column h3{font-size:17px}
.landing-audit .fit-column ul{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:12px}
.landing-audit .fit-column li{font-size:14.5px;line-height:1.6;color:#C4CDD6}
.landing-audit .fit-yes li::marker{color:var(--cyan)}
.landing-audit .fit-no li::marker{color:var(--amber)}
/* ============================================
10 · TESTIMONIANZE (mobile-first: scroll
orizzontale con snap, griglia 2 colonne dai
768px in su. Niente carousel automatico.)
============================================ */
.landing-audit .testi-grid{margin-top:24px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.landing-audit .testi-grid .testi{flex:0 0 85%;scroll-snap-align:start}
@media(min-width:480px){.landing-audit .testi-grid .testi{flex:0 0 65%}}
@media(min-width:768px){
.landing-audit .testi-grid{display:grid;grid-template-columns:repeat(2,1fr);overflow-x:visible;gap:20px;padding-bottom:0}
.landing-audit .testi-grid .testi{flex:none;scroll-snap-align:none}
}
.landing-audit .testi{background:var(--card);border:1px solid var(--border);padding:24px;border-radius:var(--radius)}
.landing-audit .testi .testi-stars{font-size:13px;letter-spacing:2px;color:var(--cyan)}
.landing-audit .testi p{margin-top:12px;font-size:14px;line-height:1.7;color:#C4CDD6}
.landing-audit .testi footer{margin-top:16px;display:flex;align-items:center;gap:10px}
.landing-audit .testi .initial{width:28px;height:28px;border-radius:50%;background:var(--card-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--cyan);flex-shrink:0}
.landing-audit .testi .who{font-size:12.5px;font-weight:700}
.landing-audit .testi .role{font-size:11.5px;color:var(--muted)}
/* ============================================
11 · FAQ. Lo stato aperto/chiuso e' guidato
dalla classe "is-open" sul .faq-item (aggiunta
via JS insieme a aria-expanded nello step 5):
un selettore basato solo su [aria-expanded]+
non funzionerebbe, perche' .faq-answer e'
figlio di .faq-item, non fratello diretto del
bottone (che sta dentro un
).
============================================ */
.landing-audit .faq-list{margin-top:28px}
.landing-audit .faq-item{border-bottom:1px solid var(--border)}
.landing-audit .faq-item:first-child{border-top:1px solid var(--border)}
.landing-audit .faq-heading{margin:0}
.landing-audit .faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-family:var(--display);font-size:15.5px;font-weight:600;padding:20px 4px;cursor:pointer}
.landing-audit .faq-question:hover{color:var(--cyan)}
.landing-audit .faq-toggle{position:relative;width:16px;height:16px;flex-shrink:0}
.landing-audit .faq-toggle::before, .landing-audit .faq-toggle::after{content:"";position:absolute;background:var(--muted);transition:transform .25s ease,background .25s ease,opacity .25s ease}
.landing-audit .faq-toggle::before{left:0;top:7px;width:16px;height:2px}
.landing-audit .faq-toggle::after{left:7px;top:0;width:2px;height:16px}
.landing-audit .faq-item.is-open .faq-toggle::before,
.landing-audit .faq-item.is-open .faq-toggle::after{background:var(--cyan)}
.landing-audit .faq-item.is-open .faq-toggle::after{transform:rotate(90deg);opacity:0}
.landing-audit .faq-answer{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .25s ease}
.landing-audit .faq-item.is-open .faq-answer{max-height:600px;opacity:1}
.landing-audit .faq-answer p{margin:0;padding:0 4px 20px;font-size:14.5px;line-height:1.7;color:#C4CDD6}
/* ============================================
12 · CTA FINALE (mobile-first: colonna unica,
testo + form affiancati dai 900px in su)
============================================ */
.landing-audit .closing{background:var(--card);border-top:1px solid var(--border)}
.landing-audit .final-cta-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:900px){.landing-audit .final-cta-grid{grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}}
.landing-audit .final-cta p{margin-top:14px;font-size:15.5px;line-height:1.7;color:#C4CDD6}
.landing-audit .final-cta-bullets{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.landing-audit .final-cta-bullets li{font-size:14.5px;line-height:1.6;color:#C4CDD6}
.landing-audit .final-form-card{padding:28px}
.landing-audit .final-form-microcopy{margin-top:16px;font-size:12.5px;color:var(--muted);text-align:center}
.landing-audit .cruscotto-alt{margin-top:40px;padding-top:32px;border-top:1px solid var(--border);text-align:center}
.landing-audit .cruscotto-alt p{max-width:50ch;margin:0 auto 12px;font-size:14.5px;color:var(--muted)}
.landing-audit .card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.landing-audit .card h5{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 16px;font-weight:500}
/* Stili condivisi dai due embed di Contact Form 7 (sezione Contattami
e box "Prenota la tua call"): il markup dei campi (
, span
wrapper, classi wpcf7-*) e' generato dal plugin CF7, non da questo
template. La regola su input/textarea e' scoped a quei tag (non al
generico ".wpcf7-form-control") perche' CF7 assegna la STESSA classe
anche allo che avvolge checkbox/radio: senza questo scoping
quello span riceve bordo/sfondo/padding come se fosse un campo di
testo, creando un riquadro indesiderato attorno alla checkbox. */
.landing-audit .cf7-form p{margin:0 0 14px}
.landing-audit .cf7-form input.wpcf7-form-control,
.landing-audit .cf7-form textarea.wpcf7-form-control,
.landing-audit .cf7-form select.wpcf7-form-control{width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:var(--ink);padding:12px 14px;font-family:var(--display);font-size:14px}
.landing-audit .cf7-form textarea.wpcf7-form-control{resize:vertical;min-height:110px}
/* Il