/* ==========================================================================
   ZampaSuite — zs-components.css
   Sistema componenti condiviso del sito marketing. Nessuna regola con important.
   1 token · 2 reset/base · 3 tipografia · 4 layout · 5 componenti · 6 dark
   Breakpoint: 1100px (tablet) e 700px (mobile).
   ========================================================================== */

/* 1 · TOKEN ---------------------------------------------------------------- */
:root{
  /* colori brand */
  --zs-indigo:#5B3DF5; --zs-indigo-700:#4529D6; --zs-indigo-900:#2A1785; --zs-ink:#1A1240; --zs-night:#120E26;
  --zs-accent:#FFA64D; --zs-accent-600:#FF9A38; --zs-accent-ink:#A45700;
  --zs-cream-50:#FDFAF5; --zs-cream-100:#FBF6EE; --zs-cream-200:#F5ECDD; --zs-cream-300:#EADBC2;
  --zs-lilac-50:#F9F7FF; --zs-lilac-100:#EEE9FF; --zs-lilac-200:#F1EEFA; --zs-lilac-300:#E6E1F5;
  --zs-green-700:#17703E; --zs-green-500:#2DB36B; --zs-green-50:#EDF8F1;
  /* ruoli (usati dai componenti) */
  --p:var(--zs-indigo); --ph:var(--zs-indigo-700); --ps:var(--zs-lilac-100); --ind:var(--zs-indigo-900);
  --acc:var(--zs-accent); --acch:var(--zs-accent-600); --on:var(--zs-ink); --accs:var(--zs-accent-ink); --accsoft:var(--zs-cream-100);
  --t:var(--zs-ink); --t2:#5E5878; --bg:var(--zs-lilac-50); --sf:#FFFFFF; --sf2:var(--zs-lilac-200); --bd:var(--zs-lilac-300);
  --ok:var(--zs-green-700); --oks:var(--zs-green-50); --lilla:var(--zs-lilac-100);
  --warm-bg-subtle:var(--zs-cream-100); --warm-bg:var(--zs-cream-200); --cream-300:var(--zs-cream-300);
  --band-t:#FFFFFF; --band-t2:#D9D2FF;
  /* scala spazi 4–128 */
  --zs-space-1:4px; --zs-space-2:8px; --zs-space-3:12px; --zs-space-4:16px; --zs-space-5:20px; --zs-space-6:24px;
  --zs-space-7:32px; --zs-space-8:40px; --zs-space-9:48px; --zs-space-10:64px; --zs-space-11:80px; --zs-space-12:96px; --zs-space-13:128px;
  /* layout */
  --maxw:1344px; --gx:48px; --sy:96px; --sy-band:80px; --hd-gap:40px;
  --edge:max(var(--gx),calc((100% - var(--maxw))/2));
  /* ritmo interno */
  --card-pad:32px; --card-gap:24px; --card-inner:12px;
  --r-sm:12px; --r-md:16px; --r-card:24px; --r-box:32px; --r-pill:999px;
  /* tipografia */
  --ff-d:'Plus Jakarta Sans',system-ui,sans-serif; --ff-t:Inter,system-ui,sans-serif;
  --fs-display:64px; --lh-display:70px; --fs-h2:40px; --lh-h2:48px; --fs-h3:28px; --lh-h3:36px;
  --fs-lead:20px; --lh-lead:30px; --fs-p:16px; --lh-p:24px; --fs-sm:14px; --lh-sm:20px;
  /* ombre */
  --sh:0 1px 2px rgba(26,18,64,.06),0 4px 10px rgba(26,18,64,.06),0 16px 36px rgba(26,18,64,.10);
  --sh-card:0 1px 2px rgba(26,18,64,.05);
}
@media(max-width:1100px){:root{--gx:32px;--sy:80px;--sy-band:64px;--hd-gap:32px;
  --fs-display:52px;--lh-display:58px;--fs-h2:34px;--lh-h2:42px;--fs-h3:24px;--lh-h3:32px}}
@media(max-width:700px){:root{--gx:20px;--sy:64px;--sy-band:48px;--hd-gap:24px;--card-pad:24px;--card-gap:16px;
  --fs-display:40px;--lh-display:46px;--fs-h2:28px;--lh-h2:34px;--fs-h3:22px;--lh-h3:30px;--fs-lead:18px;--lh-lead:28px}}

/* 2 · RESET + BASE --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:400 var(--fs-p)/var(--lh-p) var(--ff-t);color:var(--t);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.07;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--p);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--gx);top:-100px;z-index:1000;padding:12px 20px;border-radius:var(--r-pill);background:var(--t);color:var(--bg);font-weight:700}
.skip:focus{top:12px}

/* 3 · TIPOGRAFIA ----------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--ff-d);color:inherit}
h1{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:800;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;letter-spacing:-.015em}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700;letter-spacing:-.01em}
h4{font-size:16px;line-height:24px;font-weight:700}
p{font-size:var(--fs-p);line-height:var(--lh-p)}
small{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.lead,.hd p,.tx>p,.ft>p{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--t2)}
.eye{display:block;font:700 13px/16px var(--ff-t);letter-spacing:.1em;text-transform:uppercase;color:var(--p)}
.lnk{display:inline-flex;gap:8px;align-items:center;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.u{text-decoration:underline}

/* 4 · LAYOUT --------------------------------------------------------------- */
/* contenitore: ogni sezione allinea il contenuto a max 1344 con margini 48/32/20 */
.container,main>section,.foot{padding-inline:var(--edge)}
main>section{padding-block:var(--sy)}
.band{padding-block:var(--sy-band)}
.grid{display:grid;gap:var(--card-gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.grid-3,.grid-4{grid-template-columns:1fr}}
@media(max-width:700px){.grid-2{grid-template-columns:1fr}}
/* intestazione di sezione: occhiello → 12 → h2 → 16 → testo; poi --hd-gap al contenuto */
.hd{max-width:760px;margin-bottom:var(--hd-gap)}
.hd .eye+h2,.ft .eye+h2{margin-top:var(--zs-space-3)}
h2+p,.hd h2+p{margin-top:var(--zs-space-4)}
.hd.c{margin-inline:auto;text-align:center}
/* blocco CTA: testo → 32 → CTA → 16 → nota (identico in hero, prezzi, FAQ, CTA finale) */
.cta{display:flex;gap:var(--zs-space-6);align-items:center;flex-wrap:wrap;margin-top:var(--zs-space-7)}
.hd>.btn{margin-top:var(--zs-space-7)}
.cta+.trust,.cta+small{margin-top:var(--zs-space-4)}
@media(max-width:700px){.cta{flex-direction:column;align-items:stretch;gap:var(--zs-space-4)}.cta .btn{width:100%}}

/* 5 · COMPONENTI ----------------------------------------------------------- */
/* bottoni: 56 (CTA) / 44 (sm, come gli input); hover = solo colore */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 28px;border-radius:var(--r-pill);border:1.5px solid transparent;font:700 16px/1 var(--ff-t);white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn.sm{height:44px;padding:0 20px;font-size:15px;gap:8px}
.btn.acc,.acc{background:var(--acc);color:var(--on);box-shadow:inset 0 -2px 0 rgba(26,18,64,.12)}
.btn.acc:hover{background:var(--acch)}
.btn.out,.btn.sec{background:transparent;border-color:var(--p);color:var(--p)}
.btn.out:hover,.btn.sec:hover{background:var(--ps)}
.btn.ghost{background:transparent;color:var(--t)}
.btn.ghost:hover{background:var(--ps)}
.btn.block{width:100%}
.arr{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(26,18,64,.1)}
.btn.sm .arr{width:20px;height:20px}
input,select,textarea{height:44px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--bd);background:var(--sf)}
textarea{height:auto;padding:12px 16px}

/* pill / kick / badge */
.kick{display:inline-flex;gap:8px;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--sf);color:var(--t);border:1px solid var(--cream-300);font:600 14px/20px var(--ff-t);box-shadow:0 2px 6px rgba(164,87,0,.08)}
.kick i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.badge{position:absolute;top:-14px;right:24px;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-pill);background:var(--acc);color:var(--on);font:700 13px/1 var(--ff-t)}
.new{font-style:normal;font-size:11px;font-weight:700;background:var(--acc);color:var(--on);padding:2px 8px;border-radius:var(--r-pill)}

/* trust notes */
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;font:500 14px/20px var(--ff-t);color:var(--t2)}
.trust span{display:flex;gap:8px;align-items:center}.trust svg{color:var(--ok)}

/* chips */
.chip,.flow li,.tg span{display:flex;gap:8px;align-items:center;border-radius:var(--r-md)}
.flow{display:flex;align-items:center;gap:var(--zs-space-5)}
.flow ul{display:grid;grid-template-columns:1fr 1fr;gap:var(--zs-space-3);flex:1}
.flow li{min-height:48px;padding:12px 16px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.25);font:500 15px/20px var(--ff-t);color:var(--zs-lilac-100)}
.flow li svg{color:#FFC98F;flex:none}.to{color:var(--acc)}
.zs{display:grid;justify-items:center;gap:8px;padding:24px 32px;border-radius:var(--r-card);background:#fff;color:var(--zs-ink);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.zs img{height:44px}.zs b{font:800 18px/24px var(--ff-d)}.zs small{color:#5E5878}
.tg{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tg span{gap:4px;height:24px;padding:0 8px;border-radius:var(--r-pill);font:600 12px/1 var(--ff-t);background:var(--ps);color:var(--p)}
@media(max-width:700px){.flow{flex-direction:column}.flow ul{width:100%}.flow li{font-size:14px;padding:12px}.to{transform:rotate(90deg)}}

/* card base: padding --card-pad, testo interno ogni 12 */
.t,.pl,.steps li,.pc,.tc{position:relative;display:flex;flex-direction:column;gap:var(--card-inner);border-radius:var(--r-card);background:var(--sf);border:1px solid var(--bd)}
.t,.pl,.steps li{padding:var(--card-pad)}
.t p,.pl>p,.steps p,.pc p,.tc small{color:var(--t2)}
.ico,.si,.ti{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--ps);color:var(--p);flex:none}
.t .ico{background:var(--sf)}
/* card funzione (.t) varianti */
.t{overflow:hidden}
.t1{background:var(--warm-bg);border-color:transparent}
.t2{background:var(--lilla)}
.t3{background:var(--ind);border-color:var(--ind);color:#fff}.t3 p{color:var(--band-t2)}.t3 .ico{background:rgba(255,255,255,.12);color:#FFC98F}
.plain{background:var(--sf)}.peach2{background:var(--warm-bg-subtle);border-color:var(--cream-300)}.peach2 .ico{color:var(--accs)}
/* mini-mockup dentro le card */
.ms{margin-top:var(--zs-space-3);padding:16px;border-radius:var(--r-md);background:var(--sf);color:var(--t);box-shadow:0 10px 30px rgba(26,18,64,.10)}
.wk{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px}.wk span{text-align:center;font:600 12px/16px var(--ff-t);padding:8px 0;border-radius:var(--r-sm);color:var(--t2)}.wk small{display:block;font-size:11px;line-height:12px}.wk .on{background:var(--p);color:#fff}
.cal .r{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--bd);font-size:13px}.cal .r:last-child{border:0}.cal .r>span{width:44px;font-size:12px;color:var(--t2)}
.cal i{flex:1;display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:var(--r-sm);border-left:3px solid var(--c);background:var(--sf2);font-style:normal;font-weight:600}.cal i svg{color:var(--c)}
.pet{display:flex;gap:16px;align-items:center}.pet .ph{width:56px;height:56px;border-radius:var(--r-md);background:var(--warm-bg);color:var(--accs);display:grid;place-items:center;flex:none}.pet small{display:block;color:var(--t2);font-size:12px;line-height:16px}
.inc{background:var(--zs-night);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.1)}.inc small{color:#B9B3D6}.inc>b{display:block;font:800 24px/32px var(--ff-d)}
.bars{display:flex;gap:8px;align-items:flex-end;height:56px;margin:12px 0}.bars i{flex:1;border-radius:6px 6px 2px 2px;background:#A996FF}.bars i:nth-child(6){background:var(--acc)}
.inc .ln{display:flex;justify-content:space-between;font-size:13px;color:var(--band-t2)}.inc .ln span{display:flex;gap:8px;align-items:center}.inc em{font-style:normal;font-weight:700;color:#FFC98F}
/* card passo (.steps li) */
.steps{display:grid;gap:var(--card-gap)}
.steps li:nth-child(2){background:var(--lilla)}
.steps .si{background:var(--accsoft);color:var(--accs)}
.n{position:absolute;right:24px;top:16px;font:800 64px/1 var(--ff-d);color:var(--bd)}
/* card target (.pc) e timeline (.tc) */
.pc{padding:16px 16px 24px;border-color:var(--cream-300)}.pc.b{border-color:var(--bd)}.pc h3,.pc p{padding:0 8px}.pc h3{font-size:22px;line-height:30px}.mini-ill{width:100%}
.tc{padding:16px;gap:4px;box-shadow:var(--sh-card)}
/* prezzi (.pl) */
.pls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap);align-items:start}
.pl{padding:var(--card-pad);border-radius:var(--r-box)}
.pr{display:flex;align-items:baseline;gap:8px}.pr b{font:800 56px/56px var(--ff-d);letter-spacing:-.03em}.pr span,.pl small{color:var(--t2)}
.pl .btn{width:100%;margin-top:var(--zs-space-5)}
.pl ul{display:grid;gap:12px;margin-top:var(--zs-space-5)}.pl li{display:flex;gap:12px;align-items:center}.pl li svg{color:var(--ok)}
.pl.hot{background:var(--ind);border-color:var(--ind);color:#fff;box-shadow:0 24px 60px rgba(42,23,133,.35)}
.pl.hot>p,.pl.hot small,.pl.hot .pr span{color:var(--band-t2)}.pl.hot li svg{color:#FFC98F}
.note{margin-top:var(--zs-space-7);text-align:center;color:var(--t2)}
@media(max-width:700px){.pls{grid-template-columns:1fr}}
/* FAQ */
.qs{display:grid;gap:var(--zs-space-3)}
details{border-radius:var(--r-md);background:var(--sf);border:1px solid var(--bd);padding:0 var(--zs-space-6)}
details[open]{background:var(--warm-bg-subtle);border-color:var(--cream-300)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:20px 0;font:700 18px/24px var(--ff-d);cursor:pointer}
summary::-webkit-details-marker{display:none}.pm{color:var(--t2)}details[open] .pm{transform:rotate(180deg)}
details p{padding:0 0 var(--zs-space-5);color:var(--t2)}
/* banda indaco */
.sei{background:var(--ind);color:var(--band-t)}.sei p{color:var(--band-t2)}
/* box CTA finale */
.box{border-radius:var(--r-box);background:var(--warm-bg);padding:var(--zs-space-10);overflow:hidden}
.ft small{display:block;color:var(--t2)}.fi svg{width:100%}
@media(max-width:1100px){.box{padding:var(--zs-space-8)}}
@media(max-width:700px){.box{padding:var(--zs-space-7) var(--zs-space-6);border-radius:var(--r-card)}}

/* header / nav */
.nav{position:relative;z-index:5;display:flex;align-items:center;gap:var(--zs-space-8);padding:var(--zs-space-4) var(--edge)}
.logo{display:flex;align-items:center;gap:8px;font:800 21px/1 var(--ff-d);letter-spacing:-.02em}.logo img{height:32px}
.nav nav{display:flex;gap:4px;margin-inline:auto;padding:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.6);border:1px solid var(--bd)}
.nav nav a{display:flex;gap:8px;align-items:center;height:36px;padding:0 16px;border-radius:var(--r-pill);font:500 15px/1 var(--ff-t);white-space:nowrap}
.nav nav a:hover{background:var(--ps)}
.nr{display:flex;gap:var(--zs-space-5);align-items:center}.lk{font:600 15px/1 var(--ff-t)}
@media(max-width:1100px){.nav{gap:var(--zs-space-5)}.nav nav a{padding:0 12px}}
@media(max-width:700px){.nav{gap:var(--zs-space-3)}.nav nav,.lk{display:none}.nr{margin-left:auto}.btn.sm .arr{display:none}.logo{font-size:19px}.logo img{height:28px}}

/* footer */
.foot{background:var(--zs-night);color:var(--band-t2);padding-block:var(--zs-space-10) var(--zs-space-6);border-top:1px solid #2A2545}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--zs-space-8)}
.foot .logo,.foot h4{color:#fff}.foot p{margin:var(--zs-space-3) 0}
address{font-style:normal;font-size:14px;line-height:24px;color:#B9B3D6;margin-bottom:var(--zs-space-5)}
.foot h4{margin-bottom:var(--zs-space-3)}.foot ul{display:grid;gap:8px;font-size:15px}.foot a:hover{color:#fff}
.fb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--zs-space-8);padding-top:var(--zs-space-5);border-top:1px solid #2A2545;font-size:13px;color:#B9B3D6}
@media(max-width:1100px){.fg{grid-template-columns:repeat(3,1fr)}.fg>div:first-child{grid-column:1/-1}}
@media(max-width:700px){.fg{grid-template-columns:1fr 1fr;gap:var(--zs-space-7)}}

/* bolle e card flottanti */
.bub{position:absolute;z-index:3;display:flex;gap:8px;align-items:center;padding:8px 16px 8px 8px;border-radius:var(--r-pill);background:var(--sf);color:var(--t);font:600 14px/20px var(--ff-t);box-shadow:var(--sh)}
.bub.b2{background:var(--zs-ink);color:#fff}
.bi{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accsoft);color:var(--accs)}.bi.g{background:var(--oks);color:var(--ok)}.b2 .bi{background:rgba(255,255,255,.14);color:var(--acc)}
.fl{position:absolute;z-index:4;display:flex;gap:12px;align-items:center;width:max-content;white-space:nowrap;padding:12px 16px 12px 12px;border-radius:var(--r-md);background:var(--sf);color:var(--t);border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 4px rgba(15,6,60,.12),0 20px 44px rgba(15,6,60,.35)}
.fl b{display:block;font-size:15px;line-height:20px}.fl small{display:block;color:var(--t2);font-size:12px;line-height:16px}
.fl.f1{transform:rotate(-5deg)}.fl.f2{transform:rotate(4deg)}
.av{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center}.av.o{background:var(--accsoft);color:var(--accs)}.av.p{background:var(--ps);color:var(--p)}.av.g{background:var(--oks);color:var(--ok)}
.amt{font:800 16px/1 var(--ff-d);color:var(--ok);margin-left:8px;font-style:normal}
.st{font:700 11px/1 var(--ff-t);font-style:normal;padding:4px 8px;border-radius:var(--r-pill);margin-left:8px}
.er em.ok,.st.ok{background:var(--oks);color:var(--ok)}.er em.wa{background:var(--accsoft);color:var(--accs)}.er em.in{background:var(--ps);color:var(--p)}

/* phone mock (330×676; si scala con transform nel layout di pagina) */
.ph-wrap{position:relative}
.halo{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,var(--ps) 0,var(--warm-bg) 55%,transparent 70%)}
.phone{position:absolute;left:0;top:0;width:330px;height:676px;padding:11px;border-radius:58px;background:linear-gradient(145deg,#4A4466,#1A1240 40%,#2B2350 70%,#0E0A25);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 2px 0 #0A061C,0 40px 90px rgba(10,4,50,.6),0 10px 24px rgba(10,4,50,.4)}
.btnl,.btnr{position:absolute;width:4px;border-radius:2px;background:#2B2350}
.glass{position:relative;height:100%;border-radius:47px;overflow:hidden;background:var(--bg)}
.isl{position:absolute;left:50%;top:11px;width:104px;height:30px;margin-left:-52px;background:#000;border-radius:20px;z-index:3}
.glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 70%,rgba(255,255,255,.08) 100%)}
.scr{position:relative;height:100%;padding:0 14px;color:var(--t);font-size:13px;line-height:18px}
.sb{display:flex;justify-content:space-between;padding:15px 18px 0 22px;font-size:13px}.sb span{font-size:10px;letter-spacing:1px}
.ah{display:flex;align-items:center;gap:8px;margin:20px 0 12px}.ah div{flex:1}.ah small{display:block;color:var(--t2);font-size:11.5px;line-height:16px}.ah b{font:800 28px/1.05 var(--ff-d);letter-spacing:-.03em}
.ib,.me{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.ib{color:var(--t2)}.me{background:var(--acc);color:var(--on);font-size:11px;font-weight:700}
.days{display:flex;gap:3px;margin-bottom:12px}.days span{position:relative;flex:1;text-align:center;padding:6px 0 9px;border-radius:14px;color:var(--t2)}.days small{display:block;font-size:10px;line-height:14px}.days b{font-size:11px}
.days i{position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--acc)}.days .on{background:var(--p);color:#fff}.days .on i{background:var(--sf)}
.sum{display:flex;gap:6px;margin-bottom:12px}.sum span{display:flex;gap:6px;align-items:center;padding:5px 10px;border-radius:10px;background:var(--sf);border:1px solid var(--bd);font-size:11.5px;line-height:16px;font-weight:600}.sum svg{color:var(--t2)}
.ev{display:flex;gap:8px;margin-bottom:7px}.hh{width:34px;padding-top:12px;font-size:11px;font-weight:600;color:var(--t2)}
.ec{flex:1;display:flex;gap:9px;align-items:center;padding:9px 10px;border-radius:14px;background:var(--sf);border-left:3px solid var(--c);box-shadow:0 1px 2px rgba(26,18,64,.06)}
.pav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}.ec b{display:block;font-size:12.5px}.ec small{font-size:11px;line-height:14px;color:var(--t2)}
.er{margin-left:auto;text-align:right}.er em{display:block;padding:2px 7px;border-radius:var(--r-pill);font:700 10px/14px var(--ff-t);font-style:normal;white-space:nowrap}.er small{font-weight:700;color:var(--t)}
.fab{position:absolute;right:16px;bottom:84px;display:flex;gap:6px;align-items:center;padding:13px 18px;border-radius:18px;background:var(--acc);color:var(--on);font-weight:700;box-shadow:0 8px 18px rgba(255,166,77,.45)}
.bn{position:absolute;left:0;right:0;bottom:0;height:72px;display:flex;justify-content:space-around;padding-top:9px;background:var(--sf);border-top:1px solid var(--bd)}
.bn span{display:grid;justify-items:center;gap:2px;color:var(--t2);font-size:10.5px;font-weight:600}.bn i{display:grid;place-items:center;width:52px;height:28px;border-radius:14px}.bn .a i{background:var(--ps);color:var(--p)}.bn .a{color:var(--t)}

/* 6 · DARK MODE ------------------------------------------------------------ */
@media(prefers-color-scheme:dark){
  :root{--bg:#120E26;--sf:#1E1938;--sf2:#2A2545;--t:#F1EEFF;--t2:#B9B3D6;--bd:#2A2545;--p:#A996FF;--ph:#CCC0FF;--ps:#2A1785;
    --accs:#FFA64D;--accsoft:#4D2700;--ok:#8FD3AA;--oks:#0C3A20;--warm-bg-subtle:#1E1A25;--warm-bg:#252129;--cream-300:#2F2A2C;--lilla:#1E1938}
  body::after{mix-blend-mode:screen;opacity:.04}
  .nav nav{background:rgba(30,25,56,.7)}
  .wk .on,.days .on{color:#120E26}
  .skip{background:#F1EEFF;color:#120E26}
}

/* 7 · ESTENSIONI v4 -------------------------------------------------------- */
/* tema crema: sfondo pagina crema, arancio solo sui bottoni */
.theme-cream{--bg:var(--zs-cream-50);background:var(--bg)}
.theme-cream .kick i{background:var(--p)}
.theme-cream .badge{background:var(--ps);color:var(--p)}
.theme-cream .to{color:var(--band-t2)}
.theme-cream .flow li svg{color:var(--band-t2)}
/* etichetta di sezione (pill sopra l'h2) */
.tag{display:inline-flex;gap:8px;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--sf);border:1px solid var(--bd);font:600 14px/20px var(--ff-t);color:var(--t)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--p)}
.hd .tag+h2{margin-top:var(--zs-space-4)}
/* area visiva di una card (mockup UI in cima) */
.vis{display:flex;align-items:center;justify-content:center;height:320px;padding:var(--zs-space-6);margin-bottom:var(--zs-space-3);border-radius:var(--r-md);overflow:hidden}
.vis.warm{background:var(--warm-bg)}.vis.lilla{background:var(--lilla)}.vis.ind{background:var(--ind)}
.vis>.ms{width:100%;margin:0}
.t.plain .ico{background:var(--ps);color:var(--p)}
/* bordo "a tratto" (stile illustrazione) */
.outline{border:1.5px solid var(--t);box-shadow:8px 8px 0 var(--cream-300)}
@media(prefers-color-scheme:dark){
  .theme-cream{--bg:#120E26}
  .vis.lilla{background:#2A2545}.vis.warm{background:#252129}
  .outline{border-color:#3A3260;box-shadow:8px 8px 0 #1E1938}
  .btn.out{border-color:#A996FF;color:#CCC0FF}
}

/* 8 · ESTENSIONI v5 -------------------------------------------------------- */
/* illustrazioni line-art: tratto = currentColor, campiture piatte da token */
.ill5{color:var(--zs-ink);width:100%;height:auto}
.ill5 .f-cr{fill:var(--zs-cream-200)}.ill5 .f-cr2{fill:var(--zs-cream-100)}.ill5 .f-lv{fill:#E6DFFF}
.ill5 .f-or{fill:var(--zs-accent)}.ill5 .f-or2{fill:#FFD4A6}.ill5 .f-wh{fill:#FFFFFF}.ill5 .f-ink{fill:currentColor}
.ill5 .o-st{stroke:var(--zs-accent)}.ill5 .bar{stroke:#B9A8FF}
/* finestra app desktop (mockup) */
.win{border-radius:var(--r-card);background:var(--sf);border:1px solid var(--bd);box-shadow:var(--sh);overflow:hidden}
.wbar{display:flex;align-items:center;gap:6px;height:40px;padding:0 16px;background:var(--sf2);border-bottom:1px solid var(--bd)}
.wbar i{width:10px;height:10px;border-radius:50%;background:var(--bd)}
.wbar span{margin-inline:auto;padding:2px 16px;border-radius:var(--r-pill);background:var(--sf);font:500 12px/18px var(--ff-t);color:var(--t2)}
.wbody{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:420px}
.wside{display:flex;flex-direction:column;gap:4px;padding:var(--zs-space-5) var(--zs-space-4);border-right:1px solid var(--bd)}
.wlogo{display:flex;align-items:center;gap:8px;margin-bottom:var(--zs-space-4);font:800 16px/1 var(--ff-d)}.wlogo img{height:24px}
.wside a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:var(--r-sm);font:600 14px/1 var(--ff-t);color:var(--t2)}
.wside a svg{width:18px;height:18px}.wside a.on{background:var(--ps);color:var(--p)}
.wmain{padding:var(--zs-space-6)}
.whead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--zs-space-5)}
.whead small{display:block;font:500 13px/18px var(--ff-t);color:var(--t2)}.whead b{font:800 22px/28px var(--ff-d)}
.wk-sum{display:flex;gap:8px}.wk-sum em{font:600 13px/1 var(--ff-t);font-style:normal;padding:8px 12px;border-radius:var(--r-pill);background:var(--sf2)}
.wk-sum em.g{background:var(--oks);color:var(--ok)}
.wgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.wcol{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r-md);background:var(--warm-bg-subtle);min-height:300px}
.wcol>b{font:700 13px/18px var(--ff-t);color:var(--t2);margin-bottom:4px}.wcol.on>b{color:var(--p)}
.wcol.on{background:var(--ps)}
.wev{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:var(--r-sm);background:var(--sf);border-left:3px solid var(--p);font:700 13px/18px var(--ff-t)}
.wev.o{border-left-color:var(--acc)}.wev.g{border-left-color:var(--zs-green-500)}
.wev small{font:500 12px/16px var(--ff-t);color:var(--t2)}.wev em{font:500 12px/16px var(--ff-t);font-style:normal;color:var(--t2)}
/* lista con spunte */
.chk{display:grid;gap:var(--zs-space-3)}
.chk li{display:flex;gap:10px;align-items:center;font:500 16px/24px var(--ff-t)}
.chk svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--ps);color:var(--p)}
/* timeline orizzontale */
.tl5{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);counter-reset:none}
.tl5::before{content:"";position:absolute;left:24px;right:24px;top:24px;border-top:2px dashed var(--cream-300)}
.tl5 li{position:relative}
.tl5 .dot{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--p);color:#fff;font:800 18px/1 var(--ff-d);box-shadow:0 0 0 8px var(--bg)}
.tl5 h3{margin-top:var(--zs-space-6)}.tl5 p{margin-top:var(--zs-space-3);color:var(--t2);max-width:340px}
/* menu tablet/mobile: burger + pannello full-height da sinistra (JS: zs-home.js) */
.menu{display:none;position:relative;padding:0;border:0;border-radius:0;background:none}
.menu-b{list-style:none;display:grid;align-content:center;justify-items:center;gap:4px;min-height:0;width:44px;height:44px;padding:0 12px;border-radius:50%;border:1px solid var(--bd);background:var(--sf);cursor:pointer}
.menu-b span{display:block;width:18px;height:2px;border-radius:2px;background:var(--t);transition:transform .2s,opacity .2s}
.menu-b:hover{background:var(--ps)}
.menu-b.is-on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-b.is-on span:nth-child(2){opacity:0}
.menu-b.is-on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-backdrop{position:fixed;inset:0;z-index:90;background:rgba(26,18,64,.45);border:0;padding:0;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.menu-backdrop.is-on{opacity:1;visibility:visible}
.menu-panel{position:fixed;inset:0 auto 0 0;z-index:95;display:flex;flex-direction:column;width:min(320px,88vw);max-width:100%;min-height:100vh;min-height:100dvh;padding:var(--zs-space-5) var(--zs-space-4) var(--zs-space-6);background:var(--sf);border-right:1px solid var(--bd);box-shadow:var(--sh);transform:translateX(-100%);transition:transform .28s ease}
.menu-panel.is-on{transform:translateX(0)}
.menu-panel-h{display:flex;align-items:center;justify-content:space-between;gap:var(--zs-space-3);margin-bottom:var(--zs-space-5);padding-bottom:var(--zs-space-4);border-bottom:1px solid var(--bd)}
.menu-panel-t{font:800 18px/1 var(--ff-d);color:var(--t);margin:0}
.menu-x{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--bd);background:var(--sf);color:var(--t);font:400 24px/1 var(--ff-t);cursor:pointer;line-height:1}
.menu-x:hover{background:var(--ps)}
.menu .mp{position:static;display:flex;flex-direction:column;flex:1;gap:4px;min-width:0;padding:0;border-radius:0;background:transparent;border:0;box-shadow:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.menu .mp a{display:flex;align-items:center;height:44px;padding:0 12px;border-radius:var(--r-sm);font:600 15px/1 var(--ff-t);color:var(--t)}
.menu .mp a[aria-current="page"]{color:var(--p)}
.menu .mp a:hover{background:var(--ps)}
body.zs-nav-open{overflow:hidden}
@media(prefers-color-scheme:dark){
  .menu-backdrop{background:rgba(0,0,0,.55)}
}
@media(prefers-color-scheme:dark){
  .ill5{color:#E9E4FF}
  .ill5 .f-cr{fill:#3A3248}.ill5 .f-cr2{fill:#1E1A25}.ill5 .f-lv{fill:#3B3170}.ill5 .f-wh{fill:#1E1938}.ill5 .f-or2{fill:#7A4A1E}
  .ill5 .bar{stroke:#6E5BD6}
  .tl5::before{border-top-color:#3A3260}
}

/* 9 · ESTENSIONI home C (prodotto protagonista) ---------------------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
img.ill5{display:block;width:100%;height:auto}
/* etichette sul prodotto */
.call{display:flex;align-items:flex-start;gap:12px;padding:12px 18px 12px 12px;border-radius:var(--r-md);background:var(--sf);border:1.5px solid var(--t);box-shadow:4px 4px 0 var(--cream-300)}
.call>b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--p);color:#fff;font:800 13px/1 var(--ff-d)}
.call strong{display:block;font:700 15px/20px var(--ff-t)}.call em{display:block;margin-top:2px;font:400 13px/18px var(--ff-t);font-style:normal;color:var(--t2)}
/* carosello orizzontale (scroll-snap, touch) */
.car-row{display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding:4px var(--edge) 24px;scrollbar-width:thin;scrollbar-color:var(--cream-300) transparent;overscroll-behavior-x:contain}
.car-row:focus-visible{outline-offset:-2px}
.cc{flex:none;display:flex;flex-direction:column;width:400px;scroll-snap-align:start;border-radius:var(--r-card);background:var(--warm-bg-subtle);padding:var(--card-pad)}
.cc.l{background:var(--lilla)}
.cc-art{border-radius:var(--r-md);background:var(--sf);padding:var(--zs-space-4);margin-bottom:var(--zs-space-6)}
.cc .eye+h3{margin-top:var(--zs-space-3)}.cc h3+p{margin-top:var(--zs-space-3);color:var(--t2)}
.car-nav{display:flex;gap:var(--zs-space-2)}
.car-nav[hidden]{display:none}
.car-b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--t);background:var(--sf);font:800 18px/1 var(--ff-d);cursor:pointer}
.car-b:hover{background:var(--ps);color:var(--p)}.car-b:disabled{color:var(--bd);border-color:var(--bd);background:transparent;cursor:default}
/* tabella prima / dopo */
.cmp-w{overflow-x:auto;border-radius:var(--r-card);border:1px solid var(--bd);background:var(--sf)}
.cmp-w table{width:100%;min-width:640px;border-collapse:collapse}
.cmp-w th,.cmp-w td{padding:20px 24px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bd);font:400 16px/24px var(--ff-t)}
.cmp-w tr:last-child>*{border-bottom:0}
.cmp-w thead th{font:800 18px/24px var(--ff-d);background:var(--warm-bg-subtle)}
.cmp-w thead th.z{background:var(--ind);color:#fff}
.cmp-w tbody th{width:22%;font:700 16px/24px var(--ff-t)}
.cmp-w td.a{color:var(--t2)}
.cmp-w td.z{background:var(--zs-lilac-50);font-weight:600}
.cmp-w td.z svg{display:inline-block;vertical-align:-4px;margin-right:8px;color:var(--ok)}
/* prezzi: selettore a due piani (radio + CSS, senza JS) */
.prow{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--zs-space-8);align-items:center;padding:var(--zs-space-7);border-radius:var(--r-box);background:var(--sf);border:1.5px solid var(--t);box-shadow:8px 8px 0 var(--cream-300)}
.seg{display:grid;gap:var(--zs-space-3)}
.seg label{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:0 24px;border-radius:var(--r-md);border:1.5px solid var(--bd);background:var(--sf);cursor:pointer;font:700 18px/24px var(--ff-d)}
.seg label b{font:800 28px/1 var(--ff-d)}
.seg label:hover{border-color:var(--p);color:var(--p)}
.seg .badge{top:-12px;right:16px;font-style:normal}
#zs-p-pro:checked~.seg label[for=zs-p-pro],#zs-p-ess:checked~.seg label[for=zs-p-ess]{border-color:var(--p);background:var(--ps);color:var(--p)}
#zs-p-pro:focus-visible~.seg label[for=zs-p-pro],#zs-p-ess:focus-visible~.seg label[for=zs-p-ess]{outline:2px solid var(--p);outline-offset:3px}
.pp{display:none;grid-template-columns:auto minmax(0,1fr);gap:var(--zs-space-4) var(--zs-space-8);align-items:start}
#zs-p-pro:checked~.pp-pro,#zs-p-ess:checked~.pp-ess{display:grid}
.pp-pr b{font:800 64px/1 var(--ff-d)}.pp-pr small{margin-left:6px;color:var(--t2)}.pp-pr em{display:block;margin-top:8px;font:400 14px/20px var(--ff-t);font-style:normal;color:var(--t2)}
.pp-d{color:var(--t2)}.pp-d strong{color:var(--t)}
.pp .chk{grid-column:2;grid-row:1 / span 3;align-self:center}
.pp .btn{justify-self:start}
/* CTA divisa */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-box);overflow:hidden}
.sp-l{padding:var(--zs-space-11) var(--zs-space-10);background:var(--ind);color:#fff}
.sp-l h2{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:800}
.sp-l h2+p{margin-top:var(--zs-space-4);color:var(--band-t2);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.sp-l .cta{margin-top:var(--zs-space-7)}
.sp-r{display:grid;place-items:center;padding:var(--zs-space-8);background:var(--zs-cream-100)}
.sp-r .ill5{max-width:400px}
@media(prefers-color-scheme:dark){
  .call{box-shadow:4px 4px 0 #2A2545;border-color:#3A3260}
  .car-b{border-color:#3A3260}
  .cmp-w td.z{background:#1A1533}
  .prow{border-color:#3A3260;box-shadow:8px 8px 0 #1E1938}
  .sp-r{background:#1E1938}
}