/* carattere Bricolage Grotesque caricato dal sito (licenza SIL Open Font License): niente richieste a Google */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(font/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(font/bricolage-grotesque-latin.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}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF}
a{color:#1E1A2B}a:hover{color:#E8553E}
*{box-sizing:border-box}
.tenda{height:56px;background-color:transparent;background-image:radial-gradient(circle at 25% 28px,#E8553E 0 13.5px,transparent 14.5px),radial-gradient(circle at 75% 28px,#F4A38F 0 13.5px,transparent 14.5px),repeating-linear-gradient(90deg,#E8553E 0 28px,#F4A38F 28px 56px);background-size:56px 56px,56px 56px,56px 28px;background-repeat:repeat-x;background-position:0 0}
.press{transition:transform 160ms cubic-bezier(.2,.8,.2,1),background-color 200ms ease,color 200ms ease}
.press:focus-visible{outline:3px solid #1E1A2B;outline-offset:3px}
#schermate .press:focus-visible,footer .press:focus-visible{outline-color:#FFFFFF}
.shutter{animation:shutter 1.1s cubic-bezier(.7,0,.2,1) both}
.shutter>*{animation:settle 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes shutter{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.12)}to{transform:scale(1)}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.rise2{animation:rise .7s .08s cubic-bezier(.2,.7,.2,1) both}
.rise3{animation:rise .7s .16s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.navlinks{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
@media (max-width:720px){.navhide{display:none}.tenda{height:44px;background-size:44px 44px,44px 44px,44px 22px;background-image:radial-gradient(circle at 25% 22px,#E8553E 0 10.5px,transparent 11.5px),radial-gradient(circle at 75% 22px,#F4A38F 0 10.5px,transparent 11.5px),repeating-linear-gradient(90deg,#E8553E 0 22px,#F4A38F 22px 44px)}}
@media (max-width:1100px){.navlinks{gap:20px}}
input[type=range]{accent-color:#E8553E}

/* elementi che entrano quando cambiano (testi delle fasi, schermate, risposte) */
.entra{animation:entra .45s cubic-bezier(.2,.7,.2,1) both}
.entra2{animation:entra .45s .08s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sfuma{from{opacity:0}to{opacity:1}}

/* i conti della demo in alto fanno un piccolo salto quando cambiano */
.pop{animation:none}

/* le sezioni compaiono quando arrivano sullo schermo (la classe "anima" la mette app.js) */
.anima [data-appare]{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.anima [data-appare]:not([data-visto]){opacity:0;transform:translateY(40px)}

/* le strisce della tenda nel footer seguono lo scorrimento (--tenda va da 0 a 1, lo calcola app.js):
   scendendo si allungano una dopo l'altra da sinistra, risalendo si accorciano al contrario */
.anima .striscia{transform-origin:top;transform:scaleY(calc(.12 + .88 * clamp(0, (var(--tenda, 0) - var(--i) * .04) / .68, 1)));transition:transform .15s linear}

@media (prefers-reduced-motion:reduce){.shutter,.shutter>*,.rise,.rise2,.rise3,.entra,.entra2,.pop{animation:none}.press{transition:none}}

/* righe delle funzioni: niente doppia linea sopra la prima */
#funz-pannello [data-banda]:first-child{border-top:none !important}

/* telefono: tutto intero e centrato nello schermo, pulsanti comodi per il dito */
.solo-tel{display:none}
@media (max-width:720px){
.solo-tel{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;padding:4px;background:#F3F2F5;border-radius:999px;width:100%}
.solo-tel>*{flex:1 1 0}
#piani{display:grid !important;grid-template-columns:minmax(0,1fr) !important}
#piani>article{grid-area:1/1}
#piani>[data-nascosto="true"]{visibility:hidden}
#piani [style*="text-align: center"]{min-height:2.9em}
footer [data-tenda]{height:80px !important;min-height:0 !important}

footer{padding-top:32px !important}
footer [style*="margin-top: 56px"]{margin-top:28px !important}
footer [style*="gap: 40px 24px"]{gap:16px 16px !important}
footer a:not(.press){padding:4px 0}
footer [style*="minmax(150px, 1fr)"]{grid-template-columns:1fr 1fr !important}
footer [style*="minmax(150px, 1fr)"]>div:first-child,footer [style*="minmax(150px, 1fr)"]>div:last-child{grid-column:1/-1}
footer{padding-bottom:88px !important}
#funzioni .schede{flex-wrap:nowrap !important;gap:4px !important;padding:4px;background:#F3F2F5;border-radius:999px}
#funzioni .schede>*{flex:1 1 0;padding:10px 6px !important;font-size:15px !important}
#schermate .schede{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px !important;padding:4px;background:#3D3A48;border-radius:24px;width:100%}
#schermate .schede>*{padding:10px 4px !important;font-size:14px !important}
#top [role=group] button{min-height:40px}
[aria-label="Stato del pezzo"] button{padding-top:.4em !important;padding-bottom:.4em !important}
#come-funziona .press{min-height:44px;text-align:center !important}
footer a:not(.press){display:inline-block;padding:6px 0}
#domande button.press{min-height:48px}
#domande [style*="margin-top: -6px"]{margin-top:10px !important}
#domande [style*="margin-left: min("]{margin-left:0 !important}
#funzioni [role=switch]{width:58px !important;height:34px !important}
#funzioni [role=switch] span{width:26px !important;height:26px !important}
#funzioni [role=switch][aria-checked=true] span{transform:translateX(24px) !important}
#funzioni [role=switch][aria-checked=false] span{transform:none !important}
}

/* telefono: misure in proporzione (titoli, testo, spazi), il computer resta com'è */
@media (max-width:720px){
#app [style*="font-size: clamp(46px"]{font-size:36px !important}
#app [style*="font-size: clamp(40px"]{font-size:29px !important;line-height:1.05 !important}
#app [style*="font-size: clamp(32px"],#app [style*="font-size: clamp(30px"]{font-size:25px !important}
#app [style*="font-size: clamp(28px"]{font-size:21px !important}
#app [style*="font-size: clamp(22px"],#app [style*="font-size: clamp(24px"]{font-size:18px !important}
#app [style*="font-size: clamp(20px, 1.8vw"]{font-size:17px !important}
#app [style*="font-size: 56px"],#app [style*="font-size: 52px"]{font-size:38px !important}
#app [style*="font-size: 28px"]{font-size:21px !important}
#app [style*="font-size: 22px"]{font-size:18px !important}
#app [style*="font-size: 20px"],#app [style*="font-size: 19px"],#app [style*="font-size: 18px"]{font-size:16px !important}
#app [style*="font-size: 17px"]{font-size:15px !important}
#app [style*="padding: clamp(72px"],#app [style*="padding: clamp(96px"],#app [style*="padding: clamp(56px"],#app [style*="padding: clamp(48px"]{padding-top:44px !important;padding-bottom:44px !important}
#app [style*="padding: 0 clamp(16px, 3vw, 40px) clamp("]{padding-bottom:44px !important}
#app [style*="padding: clamp(40px, 7vw"]{padding-top:24px !important}
#app [style*="padding: 28px"]{padding:20px !important}
#app [style*="padding: 0 28px 28px"]{padding:0 20px 20px !important}
#app [style*="margin-top: 40px"],#app [style*="margin-top: 36px"]{margin-top:24px !important}
#app [style*="margin: 20px 0 0"]{margin-top:12px !important}
#app [style*="min-height: 220px"]{min-height:0 !important}
#app [style*="padding: 18px 28px"],#app [style*="padding: 20px 30px"]{padding:14px 22px !important}
.shutter{min-height:0 !important}
#top{gap:8px !important;padding-right:16px !important}
#top>div:first-child{padding-bottom:24px !important;padding-right:0 !important}
.shutter{border-radius:24px !important}
.shutter [data-ui]{border-radius:16px !important;margin-bottom:16px}
.shutter>div>div:last-child{padding:24px 12px 0 !important}
}

/* varianti sovrapposte nello stesso posto (stati, schede, fasi): se ne vede una, la misura non cambia mai */
.pila{display:grid}
.pila>*,.pila>.strato{grid-area:1/1}
.strato{transition:opacity .3s ease,visibility 0s}
.strato[data-attivo="false"]{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
@media (prefers-reduced-motion:reduce){.strato,.strato[data-attivo="false"]{transition:none;transform:none}}

/* "Torna su": tondo, fisso in basso a destra, compare quando hai scorso un po' */
.su{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:10;width:52px;height:52px;border-radius:999px;background:#E8553E;color:#1E1A2B;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(30,26,43,.25);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease,background-color .2s ease}
.su[data-visto]{opacity:1;pointer-events:auto;transform:none}
.su:hover{color:#1E1A2B;background:#F4A38F}
@media (prefers-reduced-motion:reduce){.su{transition:none}}

/* computer e telefono: alcune parti hanno due versioni (desk = computer, mob = telefono) */
@media (max-width:720px){
.desk{display:none !important}
.entra,.entra2{animation-name:sfuma}
#scarica .etichette{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
#scarica .etichette li{border-radius:16px !important;padding:12px 14px !important;line-height:1.3;display:flex;align-items:center;justify-content:center;text-align:center}
}
@media (min-width:721px){
.mob{display:none !important}
/* demo in alto: testo e pulsanti sempre sulla stessa riga */
.riga-demo{flex-wrap:nowrap !important}
.riga-demo>div:first-child{flex:1 1 auto;min-width:0}
.riga-demo [role=group]{flex:none}
}

/* in tutto il sito: lo scomparto scelto si distingue dal colore, non dal grassetto (così non si allarga e non sposta gli altri) */
[role=tab],[role=radio]:not([aria-label="Stato del pezzo"] *),#top [role=group] button,#come-funziona .press{font-weight:500 !important}

/* cursore delle fasi: pallino 20px, i 5 punti di arresto cadono al centro delle 5 colonne dei nomi */
#fase-range{-webkit-appearance:none;appearance:none;display:block;background:transparent;height:32px;width:calc(80% + 20px);margin:0 0 0 calc(10% - 10px)}
#fase-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#F4A38F}
#fase-range::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:20px;height:20px;margin-top:-7px;border-radius:999px;background:#E8553E;border:3px solid #FFFFFF;box-shadow:0 0 0 1px #E8553E}
#fase-range::-moz-range-track{height:6px;border-radius:999px;background:#F4A38F}
#fase-range::-moz-range-thumb{box-sizing:border-box;width:20px;height:20px;border-radius:999px;background:#E8553E;border:3px solid #FFFFFF}
#fase-range:focus-visible{outline:3px solid #1E1A2B;outline-offset:4px;border-radius:999px}
.nomi-fasi>*{text-align:center !important}

/* nel menu e nel footer: il link alla pagina in cui sei */
header nav a[aria-current=page]:not(.press){color:#E8553E}
footer a[aria-current=page]{color:#F4A38F !important}

/* menu del telefono: tasto accanto a "Prova gratis", si apre a tutto schermo sopra la pagina (non sposta niente) */
.menu-apri,.menu-tel{display:none}
@media (max-width:720px){
#app header[style]{gap:8px !important;padding-left:16px !important;padding-right:16px !important}
header>a{gap:8px !important}
header>a svg{width:34px;height:27px}
header>a span{font-size:22px !important}
.navlinks{gap:8px}
header nav>.press:not(.menu-apri){padding:12px 14px !important}
.menu-apri,.menu-chiudi{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:999px;padding:0;cursor:pointer}
.menu-apri{background:#F3F2F5;color:#1E1A2B}
.menu-chiudi{background:#3D3A48;color:#FFFFFF}
.menu-tel{display:block;position:fixed;inset:0;z-index:20;overflow-y:auto;background:#1E1A2B;color:#FFFFFF;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.menu-tel[data-aperto="true"]{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
.menu-tel nav a{color:#FFFFFF;text-decoration:none;font-size:29px;font-weight:700;letter-spacing:-0.03em;padding:12px 0;border-bottom:1px solid #3D3A48}
.menu-tel nav a[aria-current=page]{color:#F4A38F}
html:has(.menu-tel[data-aperto="true"]){overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.menu-tel,.menu-tel[data-aperto="true"]{transition:none}}

/* "Il tuo computer è compatibile?": finestra sopra la pagina (non sposta niente) */
.verifica{position:fixed;inset:0;z-index:30;background:rgba(30,26,43,.55);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.verifica[data-aperto="true"]{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
.verifica-scheda{width:100%;max-width:520px;max-height:100%;overflow-y:auto;background:#FFFFFF;color:#1E1A2B;border-radius:24px;padding:24px;text-align:left}
.verifica-chiudi{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:999px;padding:0;background:#F3F2F5;color:#1E1A2B;cursor:pointer}
.ver-scelta{border:none;border-radius:999px;padding:14px 16px;font:inherit;font-size:16px;font-weight:700;background:#1E1A2B;color:#FFFFFF;cursor:pointer}
.ver-finto[data-luce="chip"] .ver-riga[data-luce="chip"],.ver-finto[data-luce="ver"] .ver-riga[data-luce="ver"]{background:#FBE3DB;box-shadow:inset 0 0 0 2px #E8553E}
html:has(.verifica[data-aperto="true"]){overflow:hidden}
@media (max-width:720px){.verifica{align-items:flex-end;padding:0}.verifica-scheda{border-radius:24px 24px 0 0;max-height:92vh;padding:20px 16px 24px}}
@media (prefers-reduced-motion:reduce){.verifica,.verifica[data-aperto="true"]{transition:none}}

/* salti con #: si vede il titolo della sezione. I riquadri (#mac, #attiva…) lasciano spazio anche per il titolo che hanno sopra */
section[id]{scroll-margin-top:16px}
#mac,#windows,#attiva,#cambia-computer{scroll-margin-top:220px}
@media (max-width:720px){#mac,#windows,#attiva,#cambia-computer{scroll-margin-top:260px}}