/* OKSitiweb — base responsive e PWA condivisa (telefono, tablet, desktop; Chrome, Edge, Firefox, Safari, Samsung Internet) */
:root{color-scheme:dark}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body.min-h-screen{min-height:100vh;min-height:100dvh}            /* dvh: barra indirizzi mobile che si nasconde */
img,svg,video,canvas{max-width:100%}
/* tacche/notch e barre di sistema: iPhone, Android con gesture, finestre PWA */
@supports (padding:max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}
@media (display-mode:standalone){body{padding-top:env(safe-area-inset-top)}}
/* accessibilità: focus visibile da tastiera, movimento ridotto */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #ff4a1c;outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* touch: bersagli da almeno 44 px, caselle più grandi */
@media (pointer:coarse){.btn,.inp{min-height:44px}input[type=checkbox],input[type=radio]{width:1.25rem;height:1.25rem}}
/* telefoni stretti */
@media (max-width:420px){#mockup .slot{font-size:.65rem;padding:.2rem 0}.hero h1{font-size:1.75rem!important}}
/* telefoni in orizzontale: banner meno alto */
@media (max-height:480px) and (orientation:landscape){.hero{height:200px!important}}
/* desktop: anteprima sempre visibile mentre si scorre il form, con scroll interno se alta */
@media (min-width:1024px){#pw{max-height:max(20rem,calc(100vh - 24rem));overflow:auto}#riepilogo{max-height:15rem;overflow:auto}}
.info{display:inline-flex;vertical-align:middle;color:#a1a1aa;background:none;border:0;padding:2px;cursor:pointer;border-radius:999px}.info:hover,.info[aria-expanded="true"]{color:#ff4a1c}
/* schermi molto ampi */
@media (min-width:1536px){main.max-w-7xl,header .max-w-7xl{max-width:90rem}}
@media print{#bar,#ck,.hero,header{display:none!important}body{background:#fff!important;color:#000!important}}

/* vista per dispositivo nel simulatore e pulsanti dell'anteprima */
.dvb{padding:.3rem .8rem;border:1px solid #3f3f46;border-radius:999px;color:#d4d4d8;background:transparent;cursor:pointer;font-size:.75rem}
.dvb[aria-pressed="true"]{background:#ff4a1c;border-color:#ff4a1c;color:#fff}
#pvOpen:disabled{background:#3f3f46;color:#a1a1aa;cursor:not-allowed}
#pw{transition:max-width .25s}
#pw.dv-tablet{max-width:768px;margin:0 auto}
#pw.dv-phone{max-width:390px;margin:0 auto}
#pw.dv-phone #mockup .g3{grid-template-columns:1fr}
#pw.dv-phone #mockup nav{flex-wrap:wrap;gap:.5rem}
#pw.dv-phone #mockup aside{width:104px!important;padding:.6rem!important;font-size:.75rem}
#pw.dv-phone #mockup .slot{font-size:.65rem;padding:.2rem 0}
@media print{body.pv-open>*{display:none!important}body.pv-open::before{content:"L’anteprima non è stampabile.";display:block;padding:2rem;color:#000}}

/* menu a scomparsa su telefono: le intestazioni non escono più dallo schermo */
.mnu-btn{display:none;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border:1px solid #3f3f46;border-radius:12px;background:transparent;color:#fff;cursor:pointer}
.mnu-btn[aria-expanded="true"]{border-color:#ff4a1c;color:#ff4a1c}
.mnu{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1.1rem;min-width:0}
.mnu a,.mnu form button,.mnu .mnu-cta{font-size:.875rem;color:#d4d4d8;text-decoration:none;background:none;border:0;cursor:pointer;padding:0;font-family:inherit}
.mnu a:hover,.mnu form button:hover{color:#fff}
.mnu-orange a{color:#fb923c}
.mnu .mnu-pill{border:1px solid #52525b;border-radius:999px;padding:.4rem .9rem;color:#fff}
.mnu .mnu-pill:hover{border-color:#ff4a1c}
.mnu .mnu-cta{background:#ea580c;color:#fff;border-radius:999px;padding:.45rem 1rem;font-weight:700}
.mnu [hidden]{display:none!important}
@media (max-width:767px){
.mnu-btn:not(.mnu-btn-lg){display:inline-flex}
.mnu:not(.mnu-lg){display:none;position:absolute;left:0;right:0;top:100%;z-index:60;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;background:#0b0b0f;border-bottom:1px solid #27272a;padding:.5rem 1rem 1rem;max-height:calc(100vh - 4.5rem);max-height:calc(100dvh - 4.5rem);overflow:auto;box-shadow:0 18px 30px rgba(0,0,0,.6)}
.mnu:not(.mnu-lg).open{display:flex}
.mnu:not(.mnu-lg) a,.mnu:not(.mnu-lg) form button,.mnu:not(.mnu-lg) .mnu-cta{display:flex;align-items:center;min-height:48px;padding:.4rem .25rem;font-size:1rem;border-bottom:1px solid #1f1f23;width:100%;text-align:left;border-radius:0;background:none;color:#e4e4e7}
.mnu:not(.mnu-lg) .mnu-pill{border:0;border-bottom:1px solid #1f1f23;border-radius:0;padding:.4rem .25rem}
.mnu:not(.mnu-lg) .mnu-cta{color:#fb923c;font-weight:600}
.mnu:not(.mnu-lg) form{display:block}
}
@media (max-width:1023px){
.mnu-btn-lg{display:inline-flex}
.mnu-lg{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;background:#0b0b0f;border-bottom:1px solid #27272a;padding:.5rem 1rem 1rem;max-height:calc(100vh - 4.5rem);max-height:calc(100dvh - 4.5rem);overflow:auto;box-shadow:0 18px 30px rgba(0,0,0,.6)}
.mnu-lg.open{display:flex}
.mnu-lg a,.mnu-lg form button,.mnu-lg .mnu-cta{display:flex;align-items:center;min-height:48px;padding:.4rem .25rem;font-size:1rem;border-bottom:1px solid #1f1f23;width:100%;text-align:left;border-radius:0;background:none;color:#e4e4e7}
.mnu-lg .mnu-pill{border:0;border-bottom:1px solid #1f1f23;border-radius:0;padding:.4rem .25rem}
.mnu-lg .mnu-cta{color:#fb923c;font-weight:600}
.mnu-lg form{display:block}
}

/* navigazione tra le pagine del sito simulato */
#mockup .pg{cursor:pointer;padding:.15rem .1rem;border-bottom:2px solid transparent}
#mockup .pg:hover{opacity:.8}
#mockup .pgon{border-bottom-color:var(--acc);font-weight:700}
#mockup .mb.pg{border-bottom:0}
#mockup .pg:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

#mockup nav{flex-wrap:wrap}
.pgx{border:0;background:transparent;color:#a1a1aa;cursor:pointer;padding:0 .35rem;font-size:.8rem;min-height:0}
.pgx:hover{color:#f87171}