/* ZampaSuite — faq.css (pagina /faq). Disposizione della pagina; i componenti stanno in zs-components.css. */
.zs-faq{--bg:#FFFFFF}
.zs-faq .nav{position:sticky;top:0;background:var(--bg)}
.zs-faq .nav nav a[aria-current="page"]{color:var(--p)}
.zs-faq [id]{scroll-margin-top:96px}
@media(prefers-color-scheme:dark){.zs-faq{--bg:#120E26}}

/* HERO: testo + illustrazione, poi indice delle aree */
.fz-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--zs-space-10);align-items:center;padding-block:var(--zs-space-10) var(--zs-space-9)}
.fz-hero .kick+h1{margin-top:var(--zs-space-6)}
.fz-hero h1 span{display:block;color:var(--p)}
.fz-hero h1+p{margin-top:var(--zs-space-6);max-width:560px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--t2)}
.fz-hero .cta{display:flex;gap:var(--zs-space-4);margin-top:var(--zs-space-7)}
.fz-hero .ill5{max-width:520px;justify-self:end}

.fz-idx{padding-block:0}
.fz-idx ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--card-gap)}
.fz-idx a{display:grid;grid-template-columns:auto 1fr;gap:var(--zs-space-2) var(--zs-space-3);align-items:center;height:100%;padding:var(--zs-space-5);border:1px solid var(--bd);border-radius:var(--r-md);background:var(--sf);transition:border-color .15s,background-color .15s}
.fz-idx a:hover{border-color:var(--p);background:var(--ps)}
.fz-idx .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ps);color:var(--p)}
.fz-idx b{font:700 17px/24px var(--ff-d)}
.fz-idx small{grid-column:1 / -1;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--t2)}
.fz-idx .n{font:700 12px/16px var(--ff-t);letter-spacing:.08em;color:var(--t2)}

/* SEZIONI DI DETTAGLIO: testo + schermata, alternate */
.fz-sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--zs-space-11);align-items:center}
.fz-sec+.fz-sec{padding-top:0}
.fz-sec.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fz-sec.rev .fz-tx{order:2}
.fz-tx .eye+h2{margin-top:var(--zs-space-3)}
.fz-tx h2+p{color:var(--t2);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.fz-tx .chk{margin-top:var(--zs-space-7)}
.fz-plan{display:inline-flex;align-items:center;gap:8px;margin-top:var(--zs-space-7);height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--sf2);font:600 14px/20px var(--ff-t);color:var(--t2)}
.fz-plan svg{color:var(--p)}

/* schermata dell'app (ritaglio) */
.fz-shot{padding:var(--zs-space-9);border-radius:var(--r-box);background:var(--lilla)}
.fz-shot.warm{background:var(--warm-bg-subtle)}
.fz-app{max-width:560px;margin-inline:auto;padding:var(--zs-space-6);border-radius:var(--r-card);background:var(--sf);border:1px solid var(--bd);box-shadow:0 24px 60px rgba(42,23,133,.12);font-size:15px;line-height:22px}
.fz-app+.fz-app{margin-top:var(--zs-space-4)}
.fz-ah{display:flex;align-items:center;justify-content:space-between;gap:var(--zs-space-4);margin-bottom:var(--zs-space-5)}
.fz-ah small{display:block;font-size:13px;line-height:18px;color:var(--t2)}
.fz-ah b{font:700 20px/26px var(--ff-d)}
.fz-seg{display:flex;padding:3px;border-radius:var(--r-pill);background:var(--sf2);font:600 13px/1 var(--ff-t)}
.fz-seg span{padding:8px 12px;border-radius:var(--r-pill);color:var(--t2)}
.fz-seg .on{background:var(--sf);color:var(--t);box-shadow:var(--sh-card)}
.fz-list{display:grid;gap:var(--zs-space-3)}
.fz-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:var(--zs-space-3);align-items:center;padding:var(--zs-space-3) var(--zs-space-4);border-radius:var(--r-sm);background:var(--sf2);border-left:4px solid var(--c,var(--p))}
.fz-row .h{font:600 13px/18px var(--ff-t);color:var(--t2)}
.fz-row b{display:block;font-weight:600}
.fz-row small{display:block;font-size:13px;line-height:18px;color:var(--t2)}
.fz-row em{font-style:normal;font-weight:600;white-space:nowrap}
.fz-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--ps);color:var(--p);font:600 12px/1 var(--ff-t);white-space:nowrap}
.fz-pill.ok{background:var(--oks);color:var(--ok)}
.fz-pill.wa{background:var(--accsoft);color:var(--accs)}
.fz-foot{display:flex;justify-content:space-between;gap:var(--zs-space-3);margin-top:var(--zs-space-5);padding-top:var(--zs-space-4);border-top:1px solid var(--bd);font-size:14px;color:var(--t2)}
.fz-foot b{color:var(--t)}

.fz-who{display:flex;align-items:center;gap:var(--zs-space-4)}
.fz-av{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--ps);color:var(--p);font:700 16px/1 var(--ff-d)}
.fz-pets{display:flex;gap:var(--zs-space-2);margin-top:var(--zs-space-5)}
.fz-pets span{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--bd);font-weight:600}
.fz-pets .on{background:var(--ps);border-color:transparent;color:var(--p)}
.fz-dl{display:grid;gap:var(--zs-space-3);margin-top:var(--zs-space-5)}
.fz-dl div{display:grid;grid-template-columns:24px 140px minmax(0,1fr);gap:var(--zs-space-3);align-items:start}
.fz-dl svg{color:var(--p);margin-top:1px}
.fz-dl dt{font-weight:600;color:var(--t2)}

.fz-times{display:grid;grid-template-columns:1fr 1fr;gap:var(--zs-space-3)}
.fz-times div{display:flex;align-items:center;gap:var(--zs-space-3);padding:var(--zs-space-3) var(--zs-space-4);border-radius:var(--r-sm);background:var(--sf2)}
.fz-times svg{color:var(--p)}.fz-times small{display:block;font-size:13px;color:var(--t2)}
.fz-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--zs-space-3);margin-top:var(--zs-space-4)}
.fz-photos span{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-sm);background:var(--ps);color:var(--p)}
.fz-photos span:nth-child(2){background:var(--warm-bg);color:var(--t2)}
.fz-note{margin-top:var(--zs-space-4);padding:var(--zs-space-3) var(--zs-space-4);border-radius:var(--r-sm);border:1px dashed var(--bd);color:var(--t2)}
.fz-act{display:flex;justify-content:flex-end;margin-top:var(--zs-space-4)}
.fz-act span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--p);color:#fff;font:600 14px/1 var(--ff-t)}

.fz-kpi{display:grid;grid-template-columns:1fr 1fr;gap:var(--zs-space-3);margin-bottom:var(--zs-space-4)}
.fz-kpi div{padding:var(--zs-space-4);border-radius:var(--r-sm);background:var(--sf2)}
.fz-kpi small{display:block;font-size:13px;color:var(--t2)}
.fz-kpi b{display:block;margin-top:4px;font:800 28px/34px var(--ff-d)}
.fz-kpi .g b{color:var(--ok)}
.fz-bars{display:flex;align-items:flex-end;gap:10px;height:72px;padding:0 4px}
.fz-bars i{flex:1;border-radius:6px 6px 0 0;background:var(--ps)}
.fz-bars i.on{background:var(--p)}

.fz-notif{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--zs-space-3);padding:var(--zs-space-4);border-radius:var(--r-md);background:var(--sf2)}
.fz-notif .ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--p);color:#fff}
.fz-notif small{display:flex;justify-content:space-between;font-size:12px;color:var(--t2)}
.fz-bub{margin-top:var(--zs-space-4);padding:var(--zs-space-4);border-radius:var(--r-md) var(--r-md) var(--r-md) 4px;background:var(--oks);color:var(--t)}
.fz-bub small{display:block;margin-top:6px;font-size:12px;color:var(--t2)}
.fz-tog{display:flex;justify-content:space-between;align-items:center;padding:var(--zs-space-3) 0;border-bottom:1px solid var(--bd)}
.fz-tog:last-child{border-bottom:0}
.fz-tog i{position:relative;width:40px;height:24px;border-radius:12px;background:var(--bd)}
.fz-tog i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.fz-tog i.on{background:var(--p)}.fz-tog i.on::after{left:19px}

/* TUTTO INCLUSO */
.fz-all ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--card-gap)}
.fz-all li{padding:var(--zs-space-6);border-radius:var(--r-md);border:1px solid var(--bd);background:var(--sf)}
.fz-all li svg{color:var(--p)}
.fz-all li b{display:block;margin-top:var(--zs-space-4);font:700 17px/24px var(--ff-d)}
.fz-all li span{display:block;margin-top:var(--zs-space-2);font-size:15px;line-height:22px;color:var(--t2)}
.fz-all .more{margin-top:var(--zs-space-7)}
.u2{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--p)}

/* FAQ accanto al titolo */
.fz-faq{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:var(--zs-space-11);align-items:start}
.fz-faq .hd{margin-bottom:0;position:sticky;top:104px}
.fz-faq .u{text-decoration:underline;text-underline-offset:3px}
.fz-end{padding-top:0}
.fz-end .sp-l .alt{display:inline-block;margin-top:var(--zs-space-4);color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){
  .nav nav,.nav .lk{display:none}
  .nr{margin-left:auto;display:flex;align-items:center;gap:var(--zs-space-3)}
  .menu{display:block}
  .fz-hero{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:var(--zs-space-8)}
  .fz-idx ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fz-sec,.fz-sec.rev{grid-template-columns:1fr;gap:var(--zs-space-8)}
  .fz-sec.rev .fz-tx{order:0}
  .fz-all ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fz-faq{grid-template-columns:1fr;gap:var(--hd-gap)}.fz-faq .hd{position:static}
  .split{grid-template-columns:1fr}.sp-l{padding:var(--zs-space-10) var(--zs-space-8)}.sp-r .ill5{max-width:320px}
}
@media(max-width:700px){
  .fz-hero{grid-template-columns:1fr;padding-block:var(--zs-space-8) var(--zs-space-7)}
  .fz-hero .ill5{display:none}
  .fz-hero .cta{flex-direction:column}.fz-hero .btn{width:100%}
  .fz-idx ol{grid-template-columns:1fr;gap:var(--zs-space-2)}
  .fz-idx a{grid-template-columns:auto 1fr;padding:var(--zs-space-3) var(--zs-space-4)}
  .fz-idx small{display:none}
  .fz-shot{padding:var(--zs-space-4);border-radius:var(--r-card)}
  .fz-app{padding:var(--zs-space-4);font-size:14px}
  .fz-ah{flex-wrap:wrap}
  .fz-row{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .fz-row>em,.fz-row>.fz-pill{grid-column:2;justify-self:start}
  .fz-dl div{grid-template-columns:24px minmax(0,1fr)}.fz-dl dd{grid-column:2}
  .fz-times{grid-template-columns:1fr}
  .fz-kpi b{font-size:24px;line-height:30px}
  .fz-all ul{grid-template-columns:1fr;gap:var(--zs-space-3)}
  .fz-all li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px var(--zs-space-3);padding:var(--zs-space-4)}
  .fz-all li b{margin-top:0}.fz-all li span{grid-column:2;margin-top:0}
  .sp-l{padding:var(--zs-space-9) var(--zs-space-6)}.sp-l .btn{width:100%}
}

/* FAQ */
.zs-faq .fq-hero{padding-bottom:var(--zs-space-8)}
.zs-faq .u{text-decoration:underline;text-underline-offset:3px}
.fq-idx{margin-top:var(--zs-space-7)}
.fq-idx ul{display:flex;flex-wrap:wrap;gap:var(--zs-space-3)}
.fq-idx a{display:inline-flex;align-items:center;gap:var(--zs-space-2);min-height:44px;padding:0 var(--zs-space-2) 0 var(--zs-space-4);border-radius:var(--r-pill);border:1px solid var(--bd);background:var(--sf);font:600 15px/20px var(--ff-t);color:var(--t1,inherit)}
.fq-idx a:hover{border-color:var(--p);color:var(--p)}
.fq-idx a:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.fq-idx span{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:var(--r-pill);background:var(--ps);color:var(--p);font-size:13px}
.fq-cat{scroll-margin-top:96px}
.fq-cat+.fq-cat{border-top:1px solid var(--bd)}
@media(max-width:700px){.fq-idx ul{gap:var(--zs-space-2)}.fq-idx a{font-size:14px}}
