/* =====================================================================
SKOOB · home a 5 slide — CSS del prototipo approvato (design/home.html), invariato.
Caricato solo dalla home della skin (home.php), dopo fonts.css e skin.css.
===================================================================== */
/* =====================================================================
SKOOB · skin "Deserto" sopra il motore Pagenus — prototipo home
Le classi skoob-* ricalcano front-page.php del tema Pagenus, così il
CSS si può portare quasi 1:1 in un foglio di override (vedi NOTE).
===================================================================== */
:root{
/* palette (= palette-skoob.json, chiavi pg_palette_fields) */
--pg-accent:#56622a; --pg-accent-d:#3f4b1f; --pg-tint:#e7e9d2;
--pg-ink:#1f1a14; --pg-ink2:#4a4034; --pg-muted:#6e6252;
--pg-bg:#efe7d8; --pg-surface:#ffffff; --pg-line:#e0d3bf; --pg-star:#8f5c0c;
/* token extra della skin */
--sand-deep:#e5dbcc; /* il beige storico di skoob.club */
--dune:#d6c4a6; /* ornamenti (curve di livello, bordi pagina) */
--ok:#3d6b35;
/* alias usati dal tema skoob (skoob.css) */
--ink:var(--pg-ink); --ink-2:var(--pg-ink2); --muted:var(--pg-muted);
--page:var(--pg-bg); --surface:var(--pg-surface); --line:var(--pg-line);
--accent:var(--pg-accent); --accent-600:var(--pg-accent-d); --accent-tint:var(--pg-tint);
--font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--wrap:1180px;
--r-s:4px; --r:8px; --r-l:14px;
/* firma della skin: bordo "a pagine" (taglio del libro) al posto dell'ombra morbida */
--pages:3px 3px 0 -1px var(--pg-surface),3px 3px 0 0 var(--dune),6px 6px 0 -1px var(--pg-surface),6px 6px 0 0 var(--dune),9px 9px 0 -1px var(--pg-surface),9px 9px 0 0 var(--dune);
--pages-s:3px 3px 0 -1px var(--pg-surface),3px 3px 0 0 var(--dune),6px 6px 0 -1px var(--pg-surface),6px 6px 0 0 var(--dune);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--pg-bg)}
body{margin:0;font-family:var(--font);font-variation-settings:"wdth" 100;color:var(--pg-ink);background:var(--pg-bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--pg-accent);outline-offset:3px;border-radius:3px}
.skoob-wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media(min-width:720px){.skoob-wrap{padding:0 32px}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- SFONDO: curve di livello di dune (al posto delle onde viola Pagenus) ---------- */
.skoob-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--pg-bg)}
.skoob-bg svg{position:absolute;right:-10%;top:-6%;width:120%;height:auto;min-width:900px;color:var(--dune);opacity:.75}
/* Lingue: quadratini affiancati, stessa famiglia delle caselle del codice; attiva = casella scura */
.skoob-langsq{display:flex;gap:4px}
.skoob-langsq button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1.5px solid var(--pg-ink);border-radius:4px;background:var(--pg-surface);cursor:pointer;font-weight:750;font-size:11.5px;letter-spacing:.04em;color:var(--pg-ink2);transition:background .15s,color .15s}
.skoob-langsq button:hover{background:var(--pg-tint);color:var(--pg-ink)}
.skoob-langsq button[aria-pressed="true"]{background:linear-gradient(180deg,#3d3428 0 50%,#2a231b 50%);color:#f1e4c9;border-color:#1f1a14;box-shadow:inset 0 1px 0 rgba(255,236,200,.12)}
@media(max-width:400px){.skoob-langsq{gap:3px}.skoob-langsq button{width:28px;height:28px;font-size:10.5px}}
.skoob-code__label{display:block;font-weight:700;font-size:17px;margin:0 0 18px}
.skoob-code__boxes{display:grid;grid-template-columns:repeat(5,minmax(0,64px));gap:8px}
.skoob-code__box{width:100%;height:66px;text-align:center;font-weight:800;font-size:28px;text-transform:uppercase;border:1.5px solid var(--pg-ink);border-radius:var(--r);background:var(--pg-surface);caret-color:var(--pg-accent);transition:background .15s,border-color .15s}
.skoob-code__box:focus{outline:none;border-color:var(--pg-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pg-accent) 28%,transparent)}
.skoob-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--pg-ink);cursor:pointer;text-decoration:none;font-weight:700;font-size:16px;border-radius:var(--r);padding:15px 24px;transition:transform .12s ease,box-shadow .12s ease,background .15s}
.skoob-btn--send{background:var(--pg-ink);color:var(--pg-bg);width:100%;margin-top:16px;box-shadow:4px 4px 0 var(--pg-accent)}
.skoob-btn--send:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pg-accent)}
.skoob-btn--send:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pg-accent)}
.skoob-btn--ghost{background:var(--pg-surface);color:var(--pg-ink)}
.skoob-btn--ghost:hover{background:var(--pg-tint)}
.skoob-msg--err{margin:14px 0 0;padding:10px 12px;border-radius:var(--r);background:#fbeee9;border:1px solid #e9b9a8;color:#8a2a17;font-size:14px}
.skoob-msg--ok{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.skoob-msg--ok strong{font-size:22px;font-weight:800}
.skoob-msg--ok .skoob-btn{margin-top:10px}
.skoob-recover{margin-top:18px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;cursor:pointer;font-size:14px;color:var(--pg-ink2);text-decoration:underline;text-decoration-color:var(--dune);text-underline-offset:4px}
.skoob-recover:hover{color:var(--pg-ink);text-decoration-color:var(--pg-accent)}
.skoob-hp{position:absolute;left:-9999px}
.skoob-recover{margin-top:14px}
/* ---------- MODALI (FAQ, recupera link, rimuovi dati, autori) ---------- */
dialog.skoob-modal{border:1.5px solid var(--pg-ink);border-radius:var(--r-l);padding:0;max-width:min(640px,calc(100vw - 24px));width:100%;background:var(--pg-surface);color:var(--pg-ink);box-shadow:var(--pages-s)}
dialog.skoob-modal::backdrop{background:rgba(31,26,20,.55)}
.skoob-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 22px 0}
.skoob-modal__title{margin:0;font-weight:800;font-size:24px;line-height:1.15;font-variation-settings:"wdth" 90}
.skoob-modal__x{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1.5px solid var(--pg-ink);border-radius:var(--r-s);background:var(--pg-surface);cursor:pointer}
.skoob-modal__body{padding:14px 22px 24px;max-height:70vh;overflow:auto}
.skoob-modal__body p{color:var(--pg-ink2);margin:0 0 14px}
.skoob-field{display:block;margin:0 0 12px}
.skoob-field>span{display:block;font-weight:650;font-size:14px;margin-bottom:5px}
.skoob-field input,.skoob-field select,.skoob-field textarea{width:100%;border:1.5px solid var(--pg-line);border-radius:var(--r);padding:11px 12px;background:var(--pg-surface);font-size:15.5px}
.skoob-field input:focus,.skoob-field select:focus,.skoob-field textarea:focus{outline:none;border-color:var(--pg-accent)}
.skoob-grid2{display:grid;gap:0 12px}
@media(min-width:560px){.skoob-grid2{grid-template-columns:1fr 1fr}}
.skoob-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--pg-ink2);margin:6px 0 12px}
.skoob-check input{margin-top:3px;accent-color:var(--pg-accent)}
.skoob-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;border:0;padding:0}
.skoob-chips legend{font-weight:650;font-size:14px;margin-bottom:6px;padding:0}
.skoob-chips label{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--pg-line);border-radius:999px;padding:6px 11px;font-size:13.5px;cursor:pointer}
.skoob-chips input{accent-color:var(--pg-accent)}
.skoob-faq details{border-bottom:1px solid var(--pg-line)}
.skoob-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;padding:14px 0;font-weight:650;font-size:16px}
.skoob-faq summary::-webkit-details-marker{display:none}
.skoob-faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;color:var(--pg-accent-d)}
.skoob-faq details[open] summary::after{content:"–"}
.skoob-faq .a{padding:0 0 16px;color:var(--pg-ink2);font-size:15px}
.skoob-faq .a ul{margin:8px 0 0;padding-left:20px}
.skoob-note{font-size:13px;color:var(--pg-ink2);margin-top:10px}
/* ---------- LOADER (verifica codice) ---------- */
.skoob-loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:color-mix(in srgb,var(--pg-bg) 88%,transparent);padding:16px}
.skoob-loader[hidden]{display:none}
.skoob-loader__card{background:var(--pg-surface);border:1.5px solid var(--pg-ink);border-radius:var(--r-l);box-shadow:var(--pages-s);padding:30px 28px;text-align:center;max-width:360px}
.skoob-loader__pages{display:flex;justify-content:center;gap:5px;margin:0 0 16px}
.skoob-loader__pages span{width:9px;height:36px;border:1.5px solid var(--pg-ink);border-radius:2px;background:var(--pg-tint);animation:flip 1s ease-in-out infinite}
.skoob-loader__pages span:nth-child(2){animation-delay:.1s}.skoob-loader__pages span:nth-child(3){animation-delay:.2s}.skoob-loader__pages span:nth-child(4){animation-delay:.3s}.skoob-loader__pages span:nth-child(5){animation-delay:.4s}
@keyframes flip{50%{transform:scaleY(.45);background:var(--pg-accent)}}
.skoob-loader__title{font-weight:800;font-size:18px;margin:0 0 4px}
.skoob-loader__sub{margin:0;color:var(--pg-ink2);font-size:14.5px}
/* ---------- COOKIE BANNER ---------- */
.skoob-cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;max-width:560px;margin-left:auto;background:var(--pg-surface);border:1.5px solid var(--pg-ink);border-radius:var(--r-l);box-shadow:var(--pages-s);padding:18px 18px 16px}
.skoob-cookie[hidden]{display:none}
.skoob-cookie h2{font-size:16px;margin:0 0 4px}
@media(max-width:560px){.skoob-cookie{padding:14px}.skoob-cookie p{font-size:13px;margin-bottom:10px}.skoob-cookie__btns .skoob-btn{flex:1;padding:9px 10px;font-size:13.5px}}
.skoob-cookie p{margin:0 0 12px;font-size:14px;color:var(--pg-ink2)}
.skoob-cookie__btns{display:flex;flex-wrap:wrap;gap:8px}
.skoob-cookie__btns .skoob-btn{padding:10px 16px;font-size:14.5px}
.skoob-cookie__btns .skoob-btn--dark{background:var(--pg-ink);color:var(--pg-bg)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* =====================================================================
HOME A 3 SLIDE: scroll-snap verticale, ogni slide alta 100svh
===================================================================== */
html{scroll-snap-type:y mandatory}
.slide{position:relative;min-height:100vh;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;padding:86px 0 56px}
.slide__in{width:100%}
.slide__title{margin:0 0 10px;font-weight:850;font-size:clamp(30px,4.4vw,54px);line-height:1;letter-spacing:-.022em;font-variation-settings:"wdth" 82;text-wrap:balance}
.slide__lead{margin:0 0 30px;font-size:17px;color:var(--pg-ink2);max-width:36em}
/* barra fissa: nessuna linea; logo piccolo solo fuori dalla slide 1, lingua sempre */
.skoob-top{position:fixed;left:0;right:0;top:0;z-index:20;pointer-events:none}
.skoob-top__in{display:flex;align-items:center;justify-content:space-between;min-height:74px}
.skoob-top a,.skoob-top button,.skoob-top ul{pointer-events:auto}
.skoob-top__in{align-items:flex-start;padding-top:14px;padding-bottom:10px}
.skoob-top .skoob-langsq{margin-top:6px}
/* logo in testata: grande e fisso su tutte le slide (PNG originale, solo ridimensionato) */
.skoob-logo--top{width:84px;height:93px;transition:width .45s cubic-bezier(.2,.7,.2,1),height .45s cubic-bezier(.2,.7,.2,1)}
.skoob-logo--top img{width:122px;height:122px;left:-19px;top:-15px;transition:all .45s cubic-bezier(.2,.7,.2,1)}
@media(max-width:719px){.skoob-logo--top{width:58px;height:64px}.skoob-logo--top img{width:84px;height:84px;left:-13px;top:-10px}}
.skoob-top{transition:background .3s}
.skoob-top__in{min-height:66px}
/* logo ufficiale (PNG 1000x1000): solo ridimensionato; il riquadro taglia il margine trasparente */
.skoob-logo{display:block;position:relative;overflow:hidden;flex:none}
.skoob-logo img{position:absolute;max-width:none}
.skoob-logo--xl{width:96px;height:106px}.skoob-logo--xl img{width:140px;height:140px;left:-22px;top:-17px}
@media(min-width:720px) and (min-height:700px){.skoob-logo--xl{width:122px;height:135px}.skoob-logo--xl img{width:180px;height:180px;left:-29px;top:-22px}}
.skoob-logo--sm{width:46px;height:51px}.skoob-logo--sm img{width:64px;height:64px;left:-9px;top:-7px}
/* indicatore di avanzamento: tre esagoni (geometria del logo) con numero */
.deck-nav{position:fixed;right:clamp(6px,2vw,28px);top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.deck-nav button{display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px;cursor:pointer;color:var(--pg-ink2);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.deck-nav svg{width:14px;height:16px;transition:transform .3s}
.deck-nav svg path{fill:transparent;stroke:currentColor;stroke-width:1.6;transition:fill .3s}
.deck-nav button[aria-current="true"]{color:var(--pg-ink)}
.deck-nav button[aria-current="true"] svg{transform:scale(1.25)}
.deck-nav button[aria-current="true"] svg path{fill:var(--pg-accent);stroke:var(--pg-accent)}
.deck-nav__n{opacity:0;transform:translateX(4px);transition:opacity .3s,transform .3s}
.deck-nav button[aria-current="true"] .deck-nav__n,.deck-nav button:hover .deck-nav__n{opacity:1;transform:none}
@media(max-width:719px){.deck-nav{right:4px;gap:4px}.deck-nav__n{display:none}.deck-nav svg{width:10px;height:12px}}
/* entrata degli elementi quando la slide diventa attiva */
.js-deck [data-in]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
.js-deck .slide.is-active [data-in]{opacity:1;transform:none}
.js-deck [data-in="scale"]{transform:translateY(14px) scale(.97)}
/* ---------- SLIDE 1: cos'è Skoob, due colonne (testo a sinistra, composizione isometrica a destra) ---------- */
.s1{padding-top:clamp(112px,15vh,150px);padding-bottom:clamp(40px,7vh,72px)}
.s1__grid{display:grid;gap:clamp(22px,4vh,40px);align-items:center}
@media(min-width:960px){.s1__grid{grid-template-columns:1fr 1fr;gap:56px}}
.s1 .skoob-brand{display:inline-block;margin:0 0 clamp(10px,2vh,22px) -4px}
.s1__kicker{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:14px;font-weight:600;color:var(--pg-accent-d)}
.s1__kicker::before{content:"";width:22px;height:2px;background:currentColor}
.s1__title{margin:0 0 16px;font-weight:850;font-size:clamp(32px,4.6vw,60px);line-height:.98;letter-spacing:-.024em;font-variation-settings:"wdth" 82;max-width:13ch;text-wrap:balance}
.s1__lead{margin:0 0 26px;font-size:17px;line-height:1.65;color:var(--pg-ink2);max-width:33em}
.s1__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.s1__cta .skoob-btn--send{width:auto;margin:0}
.s1__more{background:none;border:0;padding:6px 0;cursor:pointer;font-weight:650;font-size:15px;color:var(--pg-ink);text-decoration:underline;text-decoration-color:var(--dune);text-decoration-thickness:2px;text-underline-offset:5px}
.s1__more:hover{text-decoration-color:var(--pg-accent)}
/* ---------- SLIDE 2: inserisci il codice ---------- */
.s2c__grid{display:grid;gap:clamp(20px,4vh,40px);align-items:center}
@media(min-width:960px){.s2c__grid{grid-template-columns:1fr 440px;gap:72px}}
.s2c__form{background:var(--pg-surface);border:1.5px solid var(--pg-ink);border-radius:var(--r-l);box-shadow:var(--pages);padding:clamp(20px,3vw,34px)}
.s2c__form .skoob-code__boxes{grid-template-columns:repeat(5,minmax(0,1fr))}
/* ---------- SLIDE 2: cosa trovi dentro ---------- */
.s2__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:960px){.s2__grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.kind{background:var(--pg-surface);border:1.5px solid var(--pg-ink);border-radius:var(--r-l);box-shadow:var(--pages-s);overflow:hidden;display:flex;flex-direction:column}
.kind__art{position:relative;aspect-ratio:4/3;background:var(--sand-deep);border-bottom:1.5px solid var(--pg-ink);overflow:hidden;display:grid;place-items:center}
.kind__art svg{width:78%;height:78%}
.kind__body{padding:12px 14px 14px}
@media(min-width:960px){.kind__body{padding:18px 20px 20px}}
.kind__t{margin:0 0 4px;font-weight:800;font-size:clamp(17px,1.8vw,22px);line-height:1.1;font-variation-settings:"wdth" 88}
.kind__d{margin:0;font-size:14px;line-height:1.45;color:var(--pg-ink2)}
@media(max-width:519px){.kind__d{font-size:12.5px}.kind__art{aspect-ratio:16/10}}
/* micro-animazioni delle illustrazioni, solo quando la slide è attiva */
.kind .eq rect{transform-box:fill-box;transform-origin:50% 100%}
.slide.is-active .kind .eq rect{animation:eq 1.1s ease-in-out infinite alternate}
.slide.is-active .kind .eq rect:nth-child(2n){animation-duration:.8s}
.slide.is-active .kind .eq rect:nth-child(3n){animation-duration:1.4s}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.kind .route{stroke-dasharray:6 6}
.slide.is-active .kind .route{animation:route 6s linear infinite}
@keyframes route{to{stroke-dashoffset:-120}}
.kind .tick{stroke-dasharray:30;stroke-dashoffset:30}
.slide.is-active .kind .tick{animation:tick .6s .9s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.kind .pg2{transition:transform .8s cubic-bezier(.2,.7,.2,1) .3s}
.kind .pg3{transition:transform .8s cubic-bezier(.2,.7,.2,1) .45s}
.slide.is-active .kind .pg2{transform:translate(10px,-8px)}
.slide.is-active .kind .pg3{transform:translate(20px,-16px)}
/* ---------- SLIDE 3: come funziona + aiuto + footer compatto ---------- */
.s3{justify-content:flex-start;padding-bottom:0}
.s3__steps{list-style:none;margin:0 0 clamp(22px,4vh,40px);padding:0;display:grid;gap:12px;counter-reset:s}
@media(min-width:900px){.s3__steps{grid-template-columns:repeat(3,1fr);gap:20px}}
.s3__steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;padding:16px 0;border-top:1.5px solid var(--pg-ink)}
.s3__steps li::before{content:counter(s,decimal-leading-zero);font-weight:850;font-size:30px;line-height:1;font-variation-settings:"wdth" 80;color:var(--pg-accent-d)}
.s3__steps strong{display:block;font-size:17px;line-height:1.25}
.s3__steps span{display:block;font-size:14.5px;color:var(--pg-ink2);margin-top:3px}
.s3__help{display:grid;gap:10px;margin:0 0 clamp(26px,5vh,48px)}
@media(min-width:720px){.s3__help{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.s3__help{grid-template-columns:repeat(4,1fr)}}
.help{display:flex;align-items:center;gap:12px;width:100%;text-align:left;text-decoration:none;cursor:pointer;background:var(--pg-surface);border:1.5px solid var(--pg-ink);border-radius:var(--r);padding:13px 14px;font-weight:700;font-size:15.5px;transition:transform .12s,box-shadow .12s}
.help:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--pg-ink)}
.help small{display:block;font-weight:400;font-size:13px;color:var(--pg-ink2)}
.help__i{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--pg-tint);color:var(--pg-accent-d)}
.s3__foot{margin-top:auto;background:var(--sand-deep);padding:clamp(22px,4vh,36px) 0 22px}
.s3__foot-in{display:grid;gap:18px;align-items:end}
.s3 .slide__title{margin-top:clamp(0px,2vh,24px)}
@media(min-width:900px){.s3__foot-in{grid-template-columns:1fr auto}}
.s3__claim{margin:0;font-weight:850;font-size:clamp(30px,5vw,58px);line-height:.95;letter-spacing:-.02em;font-variation-settings:"wdth" 78}
.s3__meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--pg-ink) 20%,transparent);font-size:13px;color:var(--pg-ink2)}
.skoob-legal{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0;padding:0}
.skoob-legal a,.skoob-legal button{background:none;border:0;padding:0;cursor:pointer;font-size:13px;color:var(--pg-ink2);text-decoration:underline;text-underline-offset:3px}
.skoob-legal a:hover,.skoob-legal button:hover{color:var(--pg-ink)}
.s3__foot-right{display:flex;align-items:center;gap:12px;justify-content:flex-start}
@media(min-width:900px){.s3__foot-right{justify-content:flex-end}}
.s3__foot-right span{font-size:13.5px;color:var(--pg-ink2)}
/* telefoni bassi: compattiamo la slide 1 perché entri nello schermo */
@media(max-width:719px){
.slide{padding:70px 0 40px}
.s1{padding-top:96px}
.s1__lead{font-size:15.5px;margin-bottom:20px}
.slide .slide__in{padding-right:26px}
.skoob-code__box{height:56px!important;font-size:24px!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:y proximity}.js-deck [data-in]{opacity:1!important;transform:none!important}}
/* =====================================================================
COMPOSIZIONE ISOMETRICA (slide 1): la scatola si apre e libera i bonus
===================================================================== */
.s1__visual{display:flex;justify-content:center;align-items:center}
.s1__visual svg.iso{width:100%;max-width:560px;max-height:calc(100svh - 300px);height:auto;overflow:visible}
.iso .iso-pop{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:translate(var(--fx),var(--fy)) scale(.18);transition:transform 1.7s cubic-bezier(.16,.84,.24,1),opacity 1.1s ease;transition-delay:calc(var(--i) * 170ms + 420ms)}
.iso.is-open .iso-pop{opacity:1;transform:none}
.iso .iso-shw{opacity:0;transition:opacity 1.4s ease 1.5s}
.iso.is-open .iso-shw{opacity:1}
.iso-flt{animation:isoFlt 8s ease-in-out infinite;animation-delay:var(--fd)}
@keyframes isoFlt{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.iso-shd{transform-box:fill-box;transform-origin:center;animation:isoShd 8s ease-in-out infinite;animation-delay:var(--fd)}
@keyframes isoShd{50%{transform:scale(.8);opacity:.6}}
/* PDF: la pagina si gira */
.iso-sheet{transform-box:fill-box;transform-origin:0 50%;animation:isoSheet 7s cubic-bezier(.45,0,.25,1) infinite}
@keyframes isoSheet{0%,36%{transform:scaleX(1);opacity:1}54%{transform:scaleX(.03);opacity:1}55%,86%{transform:scaleX(.03);opacity:0}87%{transform:scaleX(1);opacity:0}97%,100%{transform:scaleX(1);opacity:1}}
.iso-sheet__shade{opacity:0;animation:isoShade 7s cubic-bezier(.45,0,.25,1) infinite}
@keyframes isoShade{0%,36%{opacity:0}54%{opacity:.28}55%,100%{opacity:0}}
/* AUDIO */
.iso-eq rect{transform-box:fill-box;transform-origin:50% 100%;animation:isoEq 1.6s ease-in-out infinite alternate}
.iso-eq rect:nth-child(2n){animation-duration:1.15s}.iso-eq rect:nth-child(3n){animation-duration:2s}.iso-eq rect:nth-child(4n+1){animation-delay:-.6s}
@keyframes isoEq{from{transform:scaleY(.38)}to{transform:scaleY(1)}}
.iso-prog{stroke-dasharray:56;stroke-dashoffset:36;animation:isoProg 12s linear infinite}
@keyframes isoProg{from{stroke-dashoffset:56}to{stroke-dashoffset:0}}
/* QUIZ */
.iso-qrow{animation:isoQrow 6s ease infinite}
@keyframes isoQrow{0%,30%{fill:#fff}40%,84%{fill:#e7e9d2}94%,100%{fill:#fff}}
.iso-qdot{animation:isoQdot 6s ease infinite}
@keyframes isoQdot{0%,28%{fill:#fff}34%,84%{fill:#56622a}94%,100%{fill:#fff}}
.iso-tick{stroke-dasharray:30;stroke-dashoffset:30;animation:isoTick 6s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes isoTick{0%,34%{stroke-dashoffset:30;opacity:1}46%,84%{stroke-dashoffset:0;opacity:1}94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:30;opacity:0}}
/* MAPPA */
.iso-route{stroke-dasharray:100;stroke-dashoffset:100;animation:isoRoute 8s cubic-bezier(.5,0,.3,1) infinite}
@keyframes isoRoute{0%,8%{stroke-dashoffset:100;opacity:1}55%,86%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
.iso-pin{transform-box:fill-box;transform-origin:50% 100%;animation:isoPin 8s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes isoPin{0%,50%{transform:scale(0)}60%,86%{transform:scale(1)}95%,100%{transform:scale(0)}}
/* esagoni che salgono */
.iso-spk path{animation:isoSpk 10s ease-in-out infinite;animation-delay:var(--sd);opacity:0}
.iso.is-open .iso-spk path{opacity:.7}
@keyframes isoSpk{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.iso:not(.is-live) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
.iso *{animation:none!important;transition:none!important}
.iso .iso-pop,.iso .iso-shw{opacity:1;transform:none}
.iso .iso-spk path{opacity:.7}
.iso-tick,.iso-route{stroke-dashoffset:0}
.iso-qrow{fill:#e7e9d2}.iso-qdot{fill:#56622a}
}
/* =====================================================================
RIFINITURA "PREMIUM": serif editoriale per i titoli, grana carta, ombre morbide
===================================================================== */
:root{
/* UNICA variabile per il font dei titoli: Rubik (scelto dall'utente), pesi 700–900 */
--font-title:"Rubik",ui-sans-serif,system-ui,sans-serif;
--font-title-weight:800;
}
.skoob-bg{background:
url("data:image/svg+xml;utf8,"),
var(--pg-bg)}
.skoob-bg svg{opacity:.4}
/* titoli: font display bold arrotondato, interlinea e tracking stretti */
.s1__title,.slide__title,.s3__claim,.kind__t,.ok__t{font-family:var(--font-title);font-weight:var(--font-title-weight);font-variation-settings:normal;letter-spacing:-.025em}
.kind__t{font-weight:700;letter-spacing:-.01em}
.s3__claim{font-weight:900}
.s1__title{font-size:clamp(40px,min(5.2vw,8.2vh),82px);line-height:.98;max-width:11ch;margin:0 0 24px}
.slide__title{font-size:clamp(34px,min(4.3vw,7vh),62px);line-height:1;margin-bottom:18px}
.s3__claim{font-size:clamp(34px,5vw,66px);line-height:.95}
.s1__kicker{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--pg-ink2);margin-bottom:18px}
.s1__kicker::before{width:28px;height:1px;background:var(--pg-ink2)}
.s1__lead,.slide__lead{font-size:clamp(16px,1.35vw,18.5px);line-height:1.7;color:var(--pg-ink2);max-width:31em}
.skoob-btn{border-radius:999px;letter-spacing:.005em;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1),background .25s}
.skoob-btn--send{border-color:var(--pg-ink);box-shadow:inset 0 1px 0 rgba(255,240,215,.14),0 16px 30px -18px rgba(31,26,20,.65)}
.skoob-btn--send:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,240,215,.14),0 22px 40px -20px rgba(31,26,20,.7)}
.skoob-btn--send:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,240,215,.14),0 8px 16px -10px rgba(31,26,20,.6)}
.skoob-btn--send svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.s1__go:hover svg{transform:translateY(2px)}
.s1__more{font-weight:600;text-decoration-thickness:1px;transition:text-decoration-color .25s,color .25s}
/* segnali di fiducia */
.trust{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 34px;list-style:none;margin:6px 0 0;padding:18px 0 0;border-top:1px solid color-mix(in srgb,var(--pg-ink) 14%,transparent)}
.trust li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--pg-ink2)}
.trust svg{flex:none;color:var(--pg-accent-d)}
/* slide 2: il momento del codice */
.s2c__grid{align-items:center}
.s2c__form{border:1px solid color-mix(in srgb,var(--pg-ink) 16%,transparent);border-radius:22px;box-shadow:0 2px 4px rgba(60,42,18,.04),0 40px 70px -44px rgba(60,42,18,.45);padding:clamp(22px,3.2vw,40px);position:relative;overflow:hidden}
.s2c__form::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,transparent,var(--pg-accent),transparent);opacity:0;transition:opacity .4s}
.s2c__form.is-ready::before{opacity:.9}
.skoob-code__label{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--pg-ink2);margin-bottom:14px}
.skoob-code__boxes{gap:10px}
.skoob-code__box{border:1px solid color-mix(in srgb,var(--pg-ink) 30%,transparent);border-radius:12px;background:#fdfbf7;font-family:var(--font-title);font-weight:700;font-size:30px;transition:border-color .25s,background .25s,box-shadow .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.skoob-code__box:hover{border-color:color-mix(in srgb,var(--pg-ink) 55%,transparent)}
.skoob-code__box:focus{border-color:var(--pg-ink);background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--pg-accent) 16%,transparent),0 10px 20px -14px rgba(31,26,20,.5)}
.skoob-code__box.is-filled{background:#fff;border-color:var(--pg-ink);animation:boxIn .42s cubic-bezier(.2,.9,.25,1.2)}
@keyframes boxIn{from{transform:translateY(3px) scale(.94)}to{transform:none}}
.skoob-code__meter{height:2px;margin:14px 2px 0;border-radius:2px;background:color-mix(in srgb,var(--pg-ink) 10%,transparent);overflow:hidden}
.skoob-code__meter i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--pg-accent);border-radius:2px;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.skoob-code__status{min-height:22px;margin:10px 0 0;font-size:13.5px;color:var(--pg-accent-d);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.s2c__form.is-ready .skoob-code__status{opacity:1;transform:none}
.s2c__form .skoob-btn--send{margin-top:10px}
.s2c__form.is-ready .skoob-btn--send{box-shadow:inset 0 1px 0 rgba(255,240,215,.14),0 0 0 4px color-mix(in srgb,var(--pg-accent) 18%,transparent),0 18px 34px -18px rgba(31,26,20,.7)}
.reassure{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px;max-width:30em}
.reassure li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;font-size:14.5px;color:var(--pg-ink2)}
.reassure li strong{display:block;color:var(--pg-ink);font-weight:650;font-size:15px}
.reassure__i{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--pg-ink) 16%,transparent);background:#fdfbf7;color:var(--pg-accent-d)}
/* successo: la scatola si apre */
.ok{text-align:center;padding:6px 0 4px;animation:okIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes okIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ok svg{width:150px;height:auto;margin:0 auto 6px;overflow:visible}
.ok__rays line{stroke:var(--pg-accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:30;stroke-dashoffset:30;animation:okRay 1.2s .7s cubic-bezier(.2,.8,.2,1) forwards}
.ok__rays line:nth-child(2){animation-delay:.8s}.ok__rays line:nth-child(3){animation-delay:.9s}.ok__rays line:nth-child(4){animation-delay:.85s}.ok__rays line:nth-child(5){animation-delay:.95s}
@keyframes okRay{to{stroke-dashoffset:0}}
.ok__glow{transform-box:fill-box;transform-origin:center;opacity:0;animation:okGlow 1.6s .5s ease-out forwards}
@keyframes okGlow{0%{opacity:0;transform:scale(.3)}40%{opacity:.9}100%{opacity:.5;transform:scale(1)}}
.ok__t{font-size:36px;line-height:1;margin:4px 0 8px}
.ok__d{margin:0 0 16px;color:var(--pg-ink2);font-size:15px}
.ok__bar{height:2px;border-radius:2px;background:color-mix(in srgb,var(--pg-ink) 10%,transparent);overflow:hidden;margin:0 auto 16px;max-width:240px}
.ok__bar i{display:block;height:100%;width:0;background:var(--pg-accent);animation:okBar 3.2s .4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes okBar{to{width:100%}}
@media (prefers-reduced-motion:reduce){.ok,.ok *{animation:none!important}.ok__rays line{stroke-dashoffset:0}.ok__glow{opacity:.5}.ok__bar i{width:100%}.skoob-code__box.is-filled{animation:none}}
@media(max-width:719px){
.s1__visual svg.iso{max-width:250px}
.s1__title{font-size:40px;margin-bottom:14px}
.trust{margin-top:20px;padding-top:14px;gap:8px 16px}
.trust li{font-size:12.5px}
.s1__grid{gap:14px}
.reassure{margin-top:20px;gap:10px}
.s2c__form{border-radius:18px;padding:20px}
/* slide 1 e 2 devono stare in 375x812 */
.s1__kicker{display:none}
.s1__title{font-size:38px}
.s1__cta{gap:10px 16px}
.s1__cta .skoob-btn--send{padding:12px 18px;font-size:15px}
.s1__more{font-size:14px}
.s1__visual svg.iso{max-width:212px}
.slide__title{font-size:32px}
.reassure li{grid-template-columns:30px 1fr;font-size:13px}
.reassure__i{width:30px;height:30px}
.reassure li > span:last-child > span{display:none}
.reassure li strong{font-size:14px;font-weight:600}
.s2c__form .skoob-code__boxes{gap:7px}
}
/* =====================================================================
OGNI SLIDE STA NEL VIEWPORT: altezza fissa 100svh, niente scroll interno.
Dimensioni in clamp() su larghezza E altezza + media query sull'altezza.
===================================================================== */
.slide{height:100vh;height:100svh;min-height:0;overflow:hidden;padding:clamp(124px,16vh,148px) 0 clamp(14px,4vh,44px)}
.s1{padding-top:clamp(96px,15vh,140px);padding-bottom:clamp(18px,6vh,64px)}
.s3{padding-bottom:0;justify-content:flex-start}
.s3 .slide__in{flex:0 1 auto;margin-block:auto;margin-inline:auto} /* centrato tra la fascia del logo e il footer */
.s3__foot{margin-top:clamp(12px,2.4vh,28px);padding:clamp(14px,3vh,30px) 0 clamp(12px,2.4vh,22px)}
.s3__foot-in{gap:12px}
.s3__claim{font-size:clamp(28px,min(4.4vw,7vh),60px)}
.s3__meta{margin-top:clamp(10px,2vh,18px);padding-top:clamp(8px,1.6vh,14px)}
.s3__foot-right span{display:none}
.s3__steps{margin-bottom:clamp(14px,3vh,36px)}
.s3__steps li{padding:clamp(8px,1.8vh,16px) 0}
.s3__help{margin-bottom:0}
.help{padding:clamp(9px,1.6vh,13px) 14px}
.slide__lead{margin-bottom:clamp(14px,3vh,30px)}
.s2__grid .kind__art{aspect-ratio:auto;height:clamp(84px,min(17vw,24vh),230px)}
.s1__visual svg.iso{max-height:calc(100svh - 290px)}
@media(max-height:820px) and (min-width:720px){
.s1__lead,.slide__lead{font-size:16px;line-height:1.6}
.trust{margin-top:0;padding-top:12px}
.reassure{margin-top:18px;gap:10px}
.kind__body{padding:12px 16px 14px}
}
@media(max-height:740px) and (min-width:720px){
.s3__steps li{padding:8px 0}
.s3 .slide__lead{margin-bottom:12px}
.s3__foot{padding:12px 0 10px}
.s3__meta{margin-top:8px;padding-top:8px}
.s1__title{font-size:clamp(40px,min(5vw,8vh),70px)}
.slide__title{font-size:clamp(32px,min(4vw,6.6vh),54px)}
.s3__steps span{font-size:13.5px}
.help small{display:none}
.s3__claim{font-size:clamp(28px,6vh,48px)}
}
/* telefoni: tutto in un colpo d'occhio */
@media(max-width:719px){
.slide{padding:clamp(94px,12.5vh,108px) 0 clamp(10px,2.4vh,22px)}
.s1{padding-top:clamp(80px,12vh,100px)}
.s1__grid{gap:clamp(8px,2vh,18px)}
.s1__title{font-size:clamp(30px,min(10vw,5.4vh),40px);margin-bottom:clamp(8px,1.6vh,14px)}
.s1__lead{font-size:clamp(14px,2.2vh,15.5px);line-height:1.5;margin-bottom:clamp(10px,2vh,18px)}
.s1__visual svg.iso{max-width:min(240px,62vw);max-height:calc(100svh - 470px);min-height:110px}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding-top:clamp(8px,1.4vh,12px)}
.trust li{font-size:11.5px;gap:6px}
.trust li:last-child{grid-column:1/-1}
.trust svg{width:14px;height:14px}
.slide__title{font-size:clamp(26px,min(8.4vw,4.6vh),34px);margin-bottom:clamp(6px,1.4vh,14px)}
.slide__lead{font-size:clamp(13.5px,2.1vh,15px);line-height:1.5;margin-bottom:clamp(8px,2vh,18px)}
.s2c__grid{gap:clamp(10px,2vh,20px)}
.reassure{margin-top:clamp(6px,1.6vh,16px);gap:clamp(4px,1vh,10px)}
.reassure li{grid-template-columns:26px 1fr;gap:10px}
.reassure__i{width:26px;height:26px}
.reassure__i svg{width:14px;height:14px}
.s2c__form{padding:clamp(14px,2.4vh,20px)}
.skoob-code__label{margin-bottom:8px;font-size:14px}
.skoob-code__box{height:clamp(44px,7vh,56px)!important;font-size:clamp(20px,3.4vh,24px)!important}
.skoob-code__meter{margin-top:10px}
.skoob-code__status{min-height:0;margin-top:4px;font-size:12.5px}
.s2c__form .skoob-btn--send{padding:clamp(10px,1.8vh,14px) 18px;margin-top:8px}
.s2c__form .skoob-recover{margin-top:6px;font-size:12.5px}
.s2__grid{gap:8px}
.s2__grid .kind__art{height:clamp(56px,11vh,100px)}
.kind__body{padding:8px 10px 10px}
.kind__t{font-size:16px}
.kind__d{font-size:12px;line-height:1.35}
.s3__steps{gap:0}
.s3__steps li{grid-template-columns:34px 1fr;gap:8px;padding:clamp(6px,1.2vh,10px) 0}
.s3__steps li::before{font-size:20px}
.s3__steps strong{font-size:14.5px}
.s3__steps span{font-size:12.5px;margin-top:1px}
.s3__help{grid-template-columns:1fr 1fr;gap:6px}
.help{padding:8px 10px;font-size:13px;gap:8px}
.help small{display:none}
.help__i{width:28px;height:28px}
.help__i svg{width:15px;height:15px}
.s3__foot{padding:clamp(10px,2vh,16px) 0 clamp(8px,1.6vh,14px)}
.s3__foot-in{grid-template-columns:1fr auto;align-items:center;gap:8px}
.s3__claim{font-size:clamp(20px,6vw,26px);line-height:1}
.s3__claim br{display:none}
.s3__foot .skoob-langsq button{width:24px;height:24px;font-size:9.5px}
.s3__foot .skoob-langsq{gap:2px}
.s3__meta{margin-top:8px;padding-top:8px;gap:4px 10px;font-size:11px}
.skoob-legal{gap:2px 10px}
.skoob-legal a,.skoob-legal button{font-size:11px}
.s1__next{display:none}
}
@media(max-width:719px) and (max-height:700px){
.s1{padding-top:86px}
.s1__visual svg.iso{max-height:calc(100svh - 530px);min-height:120px}
.s1__title{font-size:30px}
.s1__lead{font-size:13.5px}
.reassure li > span:last-child{font-size:12.5px}
.s3__claim{font-size:20px}
}
/* keyword in evidenza: pennarello sabbia che si stende quando la slide entra */
:root{--hl:#e3cf9e}
.hl{color:inherit;padding:0 .08em;margin:0 -.04em;border-radius:.12em .3em .18em .28em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
background:linear-gradient(100deg,transparent 0 .2%,var(--hl) .6% 99%,transparent 99.6%) no-repeat 0 78%/0% 46%;
transition:background-size 1.2s cubic-bezier(.6,0,.2,1) .55s}
.slide.is-active .hl,html:not(.js-deck) .hl{background-size:100% 46%}
.s1__lead strong,.slide__lead strong{color:var(--pg-ink);font-weight:650}
@media (prefers-reduced-motion:reduce){.hl{transition:none;background-size:100% 46%}}
/* ---------- PULSANTE AIUTO fisso ---------- */
.help-fab{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2.4vh,26px);z-index:30;width:54px;height:54px;border-radius:50%;border:1px solid var(--pg-ink);background:var(--pg-ink);color:#f1e4c9;display:grid;place-items:center;cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,240,215,.14),0 16px 30px -14px rgba(31,26,20,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.help-fab:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,240,215,.14),0 22px 38px -16px rgba(31,26,20,.65)}
.help-fab:focus-visible{outline:2.5px solid var(--pg-accent);outline-offset:4px}
.help-fab::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--pg-accent);opacity:0;pointer-events:none}
.help-fab.is-hint::after{animation:fabPulse 2.4s cubic-bezier(.2,.7,.2,1) 2}
@keyframes fabPulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.skoob-cookie:not([hidden]) ~ .help-fab{bottom:calc(clamp(14px,2.4vh,26px) + 0px)}
/* spazio riservato: il pulsante non copre mai i contenuti */
@media(min-width:720px){.s3__meta{padding-right:70px}}
@media(max-width:719px){
.help-fab{width:46px;height:46px;right:12px;bottom:12px}
.help-fab svg{width:20px;height:20px}
.slide{padding-bottom:66px}
.s3{padding-bottom:0}
.s3__foot{padding-bottom:66px}
}
@media (prefers-reduced-motion:reduce){.help-fab.is-hint::after{animation:none}}
@media(max-width:719px){.s1__kicker.eyebrow{display:none}.trust li:last-child{grid-column:auto}}
@media(max-width:719px) and (max-height:700px){.s3__steps span{display:none}}
/* modale assistenza */
.skoob-help .skoob-field select{appearance:auto}
.skoob-file input{padding:9px 10px;font-size:14px;background:#fdfbf7}
.help-ok{text-align:center;padding:10px 0 4px}
.help-ok__i{width:56px;height:56px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:var(--pg-tint);color:var(--pg-accent-d)}
.help-ok__t{font-family:var(--font-title);font-weight:800;font-size:26px;color:var(--pg-ink)!important;margin:0 0 6px!important}
.help-ok .skoob-btn{margin-top:6px}
/* occhiello: etichetta preziosa (maiuscoletto, tracking ampio, filo sottile, esagono del logo) — stesso trattamento per ogni slide */
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:7px 14px 7px 11px;border:1px solid color-mix(in srgb,var(--pg-ink) 22%,transparent);border-radius:999px;background:color-mix(in srgb,#fff 55%,transparent);
font-size:11.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--pg-ink);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 18px -14px rgba(60,42,18,.45)}
.eyebrow::before{content:none!important}
.eyebrow__hex{flex:none}
.eyebrow__hex path{fill:var(--pg-accent);stroke:var(--pg-ink);stroke-width:1;stroke-linejoin:round}
/* ---------- FOOTER SLIDE 4: profilo a duna al posto dello stacco dritto, nessuna riga ---------- */
.s3__foot{--dune-h:clamp(26px,5vh,54px);position:relative;background:linear-gradient(180deg,#e9dfcf,var(--sand-deep) 60%) no-repeat 0 calc(var(--dune-h) - 1px)/100% 100%;
padding-top:calc(var(--dune-h) + clamp(6px,1.6vh,16px))!important}
.s3__foot::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--dune-h);pointer-events:none;
background:url("data:image/svg+xml;utf8,") no-repeat 0 0/100% 100%;
filter:drop-shadow(0 -10px 14px rgba(120,92,48,.10))}
.s3__foot::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--dune-h);pointer-events:none;opacity:.7;
background:url("data:image/svg+xml;utf8,") no-repeat 0 0/100% 100%}
.s3__meta{border-top:0!important;padding-top:0!important;margin-top:clamp(10px,2.2vh,22px)!important;color:color-mix(in srgb,var(--pg-ink2) 85%,var(--sand-deep))}
.skoob-legal a,.skoob-legal button{text-decoration:none;color:var(--pg-ink2);font-size:12.5px;letter-spacing:.01em;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s}
.skoob-legal a:hover,.skoob-legal button:hover,.skoob-legal a:focus-visible,.skoob-legal button:focus-visible{text-decoration:underline;color:var(--pg-ink)}
@media(max-width:719px){.s3__foot{--dune-h:22px;padding-top:calc(22px + 8px)!important}.skoob-legal a,.skoob-legal button{font-size:11px}}
.help-lead{margin-top:0}
.help-faq{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:0 0 16px;border-radius:12px;background:var(--pg-tint);color:var(--pg-ink2);font-size:14px;line-height:1.5}
.help-faq svg{flex:none;margin-top:2px;color:var(--pg-accent-d)}
.skoob-help .skoob-field em{font-style:normal;font-weight:500;color:var(--pg-ink2)}
.help-note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0!important;font-size:12.5px;line-height:1.5}
.help-note svg{flex:none;margin-top:2px}
.help-legal{margin-top:14px;font-size:12px;color:var(--pg-ink2)}
.help-legal summary{cursor:pointer;font-weight:600}
.help-legal p{font-size:12px!important;margin:8px 0 0!important}
.help-ok{display:block}
.help-ok > div{color:var(--pg-ink2);margin:0 0 14px;line-height:1.6}
/* ---- adattamenti per i nuovi testi (occhielli su tutte le slide) ---- */
@media(max-height:880px) and (min-width:720px){
.eyebrow{margin-bottom:14px}
.s3__steps li{padding:9px 0}
.s3 .slide__lead{margin-bottom:14px}
.s3__steps{margin-bottom:18px}
.s3__foot{padding-bottom:14px}
.s3__meta{margin-top:10px!important}
}
@media(max-height:800px) and (min-width:720px){
.help small{display:none}
.s3__claim{font-size:clamp(28px,5.6vh,44px)}
}
@media(max-width:719px){
.eyebrow{font-size:10px;letter-spacing:.14em;padding:5px 10px 5px 8px;margin-bottom:8px;gap:7px}
.eyebrow__hex{width:10px;height:12px}
.s3 .eyebrow{display:none}
.s3__foot{padding-bottom:14px}
.s3__meta{padding-right:58px}
.s3__steps span{display:none}
}
@media(max-width:719px) and (max-height:700px){
.s3 .slide__lead{display:none}
.s2c .eyebrow,.s2 .eyebrow{margin-bottom:6px}
.s2c .reassure{gap:2px;margin-top:6px}
.s2c .slide__lead{margin-bottom:6px}
.s2c__grid{gap:8px}
}
/* =====================================================================
SLIDE 4 · i 3 passi, grandi e illustrati, collegati da una linea spezzata
===================================================================== */
.steps{--ill-h:clamp(110px,25vh,230px);position:relative;margin-top:clamp(8px,2vh,20px)}
.steps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);position:relative;z-index:1}
.step{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px)}
.step__art{height:var(--ill-h);display:flex;align-items:center;justify-content:center}
.step__ill{height:100%;width:auto;max-width:100%;overflow:visible}
.step__txt{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;align-items:end}
.step__n{grid-row:1 / span 2;align-self:start;font-family:var(--font-title);font-weight:900;font-size:clamp(44px,8vh,80px);line-height:.82;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px var(--pg-ink)}
.step__txt strong{font-family:var(--font-title);font-weight:700;font-size:clamp(18px,2.4vh,22px);line-height:1.12;letter-spacing:-.01em}
.step__txt span:not(.step__n){font-size:clamp(13.5px,1.8vh,15px);line-height:1.45;color:var(--pg-ink2);align-self:start}
.steps__path{position:absolute;left:0;right:0;top:calc(var(--ill-h) / 2 - 20px);width:100%;height:40px;z-index:0;overflow:visible}
.steps__path path{fill:none;stroke:var(--pg-accent);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:.7}
.slide.is-active .steps__path path,html:not(.js-deck) .steps__path path{animation:pathDraw 2.4s .7s cubic-bezier(.6,0,.2,1) forwards}
@keyframes pathDraw{to{stroke-dashoffset:0}}
.step__tag{animation:tagPulse 3.2s ease-in-out infinite}
@keyframes tagPulse{0%,100%{opacity:.75}50%{opacity:1}}
.step__boxes rect{animation:stepBox 4.5s ease infinite}
.step__boxes rect:nth-child(2){animation-delay:.25s}.step__boxes rect:nth-child(3){animation-delay:.5s}.step__boxes rect:nth-child(4){animation-delay:.75s}.step__boxes rect:nth-child(5){animation-delay:1s}
@keyframes stepBox{0%,8%{fill:#fdfbf7}18%,80%{fill:#e7e9d2}92%,100%{fill:#fdfbf7}}
.step__btn{animation:stepBtn 4.5s ease infinite}
@keyframes stepBtn{0%,40%{fill:#1f1a14}50%,70%{fill:#56622a}80%,100%{fill:#1f1a14}}
.step__float > g{animation:isoFlt 5s ease-in-out infinite;animation-delay:var(--fd)}
.slide:not(.is-active) .step *,.slide:not(.is-active) .rcard *{animation-play-state:paused!important}
/* =====================================================================
SLIDE 5 · aiuto e risorse: card grandi e illustrate
===================================================================== */
.rcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(6px,2vh,22px)}
.rcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;
padding:clamp(14px,2.4vh,26px) clamp(14px,1.6vw,22px);border-radius:20px;border:1px solid color-mix(in srgb,var(--pg-ink) 14%,transparent);
background:linear-gradient(180deg,#fff,#fdfaf4);color:var(--pg-ink);
box-shadow:0 1px 2px rgba(60,42,18,.05),0 26px 46px -36px rgba(60,42,18,.45);
transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1),border-color .3s}
.rcard:hover,.rcard:focus-visible{transform:translateY(-5px);border-color:color-mix(in srgb,var(--pg-ink) 30%,transparent);box-shadow:0 2px 4px rgba(60,42,18,.05),0 36px 60px -34px rgba(60,42,18,.55)}
.rcard__art{display:block;width:clamp(64px,11vh,104px);margin:0 0 clamp(2px,1vh,10px) -6px;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.rcard__art svg{display:block;width:100%;height:auto;overflow:visible}
.rcard:hover .rcard__art{transform:translateY(-4px) rotate(-2deg)}
.rc__fly{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.rcard:hover .rc__fly{transform:translate(3px,-4px)}
.rcard__t{font-family:var(--font-title);font-weight:800;font-size:clamp(17px,2.4vh,23px);line-height:1.1;letter-spacing:-.015em}
.rcard__d{font-size:clamp(13px,1.8vh,14.5px);line-height:1.45;color:var(--pg-ink2);flex:1}
.rcard__cta{display:inline-flex;align-items:center;gap:7px;margin-top:clamp(4px,1vh,10px);font-weight:650;font-size:14px;color:var(--pg-accent-d)}
.rcard__cta svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rcard:hover .rcard__cta svg{transform:translateX(4px)}
.rcard--dark{background:linear-gradient(160deg,#2c251c,#17120d);border-color:#17120d;color:#f1e4c9;box-shadow:0 2px 4px rgba(0,0,0,.1),0 30px 50px -30px rgba(31,26,20,.75)}
.rcard--dark .rcard__d{color:#cfc2a8}
.rcard--dark .rcard__cta{color:#c6d58a}
.rcard--dark:hover{border-color:#000}
.s5 .slide__title{margin-bottom:clamp(8px,2vh,22px)}
@media(max-height:800px) and (min-width:720px){
.rcard__d{font-size:13px}
.s5 .s3__claim{font-size:clamp(26px,5vh,40px)}
}
@media(max-height:740px) and (min-width:720px){
.steps{--ill-h:clamp(90px,19vh,150px)}
.step__n{font-size:48px}
}
/* telefoni */
@media(max-width:719px){
.steps{--ill-h:clamp(60px,9vh,84px);margin-top:4px}
.steps__path{display:none}
.steps__list{grid-template-columns:1fr;gap:clamp(8px,1.8vh,14px)}
.steps__list::before{content:"";position:absolute;left:clamp(42px,13vw,56px);top:30px;bottom:30px;border-left:1.5px dashed color-mix(in srgb,var(--pg-accent) 55%,transparent);z-index:-1}
.step{flex-direction:row;align-items:center;gap:12px}
.step__art{flex:none;width:clamp(84px,26vw,112px)}
.step__n{font-size:32px;-webkit-text-stroke-width:1.2px}
.step__txt{column-gap:10px}
.step__txt strong{font-size:16px}
.step__txt span:not(.step__n){font-size:12.5px;display:block}
.rcards{grid-template-columns:1fr 1fr;gap:8px}
.rcard{padding:12px;border-radius:16px;gap:3px}
.rcard__art{width:46px;margin-bottom:0}
.rcard__t{font-size:15px}
.rcard__d{font-size:12px}
.rcard__cta{font-size:12.5px;margin-top:2px}
}
@media(max-width:719px) and (max-height:760px){
.rcard__d{display:none}
.s4 .slide__lead{font-size:13.5px}
}
/* passi: celle illustrazione ad altezza fissa allineate in basso, testo sempre sotto, collegamenti solo tra le illustrazioni */
.step{position:relative}
.step__art{position:relative;align-items:flex-end;justify-content:center;z-index:1}
.step__ill{position:relative;z-index:1;display:block;height:100%;width:auto;max-width:100%;overflow:hidden}
.step__txt{position:relative;z-index:2;background:transparent}
.step__link{position:absolute;z-index:0;height:20px;top:calc(var(--ill-h) * .55 - 10px);
left:calc(50% + min(50%, var(--ill-h) * .6923) + 12px);
width:calc(100% - 2 * min(50%, var(--ill-h) * .6923) + clamp(18px,3vw,44px) - 24px)}
.step__link svg{display:block;width:100%;height:100%;overflow:visible}
.step__link path{fill:none;stroke:var(--pg-accent);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:.75}
.slide.is-active .step__link path,html:not(.js-deck) .step__link path{animation:pathDraw 1.4s cubic-bezier(.6,0,.2,1) forwards;animation-delay:.9s}
.slide.is-active .step:nth-child(2) .step__link path{animation-delay:1.6s}
@media(max-width:719px){.step__link{display:none}}
@media (prefers-reduced-motion:reduce){.step__link path{stroke-dashoffset:0;animation:none!important}}
/* icone card slide 5: set coerente (griglia 24px, tratto 1.5px, duotone oliva tenue) in badge esagonale arrotondato */
.rcard__art{width:auto;margin:0 0 clamp(4px,1.2vh,12px) 0}
.rbadge{position:relative;display:grid;place-items:center;width:clamp(56px,9vh,72px);height:clamp(56px,9vh,72px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rbadge__hex{position:absolute;inset:0;width:100%;height:100%}
.rbadge__hex path{fill:#e7dcc8;stroke:#e7dcc8;stroke-width:7;stroke-linejoin:round}
.rbadge__ico{position:relative;width:50%;height:50%;color:#2a231b}
.rbadge__ico .duo{fill:#a9b56a;fill-opacity:.32;stroke:none}
.rcard:hover .rbadge,.rcard:focus-visible .rbadge{transform:translateY(-3px) rotate(6deg)}
.rcard:hover .rcard__art{transform:none}
.rcard--dark .rbadge__hex path{fill:#efe7d8;stroke:#efe7d8}
.rcard--dark .rbadge__ico{color:#1f1a14}
.rcard--dark .rbadge__ico .duo{fill:#8f9d4f;fill-opacity:.35}
@media(max-width:719px){.rbadge{width:44px;height:44px}.rcard__art{margin-bottom:2px}}
@media (prefers-reduced-motion:reduce){.rbadge{transition:none}.rcard:hover .rbadge{transform:none}}
/* ---------------------------------------------------------------------
Aggiunte per il sito reale (non nel prototipo)
--------------------------------------------------------------------- */
/* lingua scelta applicata prima del disegno (vedi script in testa) */
html.pgn-i18n-wait body{visibility:hidden}
/* elementi del tema non usati dalla home a slide */
#skoob-totop{display:none!important}
/* il pulsante aiuto resta sopra il badge cookie (che sta a sinistra) e sotto le finestre */
.pp-cookie-badge{z-index:25!important}
/* messaggio d'errore codice dal server */
.skoob-msg--err:empty{display:none}
/* FAQ reali (pagenus_faq_data) */
#faq-intro{margin-bottom:6px}
.skoob-faq .a p{margin:0 0 8px}
/* stati delle finestre con esito (recupero, rimozione, autori) */
.skoob-modal [data-state="err"],.skoob-modal [data-state="rate"]{margin:0 0 14px}
.skoob-help .pg-legal p{font-size:12px;margin:8px 0 0;color:var(--pg-ink2)}
.skoob-help .pg-legal a{color:var(--pg-accent-d)}
/* niente scroll orizzontale da elementi del motore */
body.pgn-home-deck{overflow-x:hidden}
/* il badge cookie (pagenus-privacy) è visibile: la barra legale lascia spazio ai due pulsanti tondi */
@media(max-width:719px){.pgn-home-deck .s3__meta.legalbar{padding-left:46px!important;padding-right:46px!important}}
/* l'attributo hidden vince sempre (es. .help-ok{display:block} del prototipo) */
.pgn-home-deck [hidden]{display:none!important}
/* finestre sempre centrate, anche con reset di altri fogli */
dialog.skoob-modal{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 24px);overflow:auto}
dialog.skoob-modal:not([open]){display:none}
/* barra legale del footer (prototipo home.html aggiornato) */
.legalbar{display:grid;gap:14px;align-items:center;justify-items:center;text-align:center}
@media(min-width:960px){.legalbar{grid-template-columns:1fr auto 1fr;justify-items:stretch;text-align:left;gap:24px}}
.legalbar__copy{margin:0;line-height:1.35}
.legalbar__copy strong{display:block;font-weight:600;font-size:12.5px;color:var(--pg-ink);letter-spacing:.01em}
.legalbar__copy small{display:block;font-size:11px;color:var(--pg-ink2);opacity:.85;margin-top:2px}
.legalbar__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 0;list-style:none;margin:0;padding:0}
.legalbar__links li{display:inline-flex;align-items:baseline;font-size:12px}
.legalbar__links li+li::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:color-mix(in srgb,var(--pg-ink) 35%,transparent);margin:0 12px;transform:translateY(-3px)}
.legalbar__links a,.legalbar__links button{background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;font-size:12px;color:var(--pg-ink2);text-decoration:none;letter-spacing:.01em;transition:color .2s}
.legalbar__links a:hover,.legalbar__links button:hover,.legalbar__links a:focus-visible,.legalbar__links button:focus-visible{color:var(--pg-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.legalbar__rd{justify-self:center}
@media(min-width:960px){.legalbar__rd{justify-self:end}}
.legalbar__rd button{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,#9a5a3c 38%,transparent);background:color-mix(in srgb,#fff 45%,transparent);color:#8a4f34;font:inherit;font-size:12px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.legalbar__rd button:hover{background:#f6ebe2;border-color:#9a5a3c;color:#73402a}
.s3__meta.legalbar{display:grid;justify-content:normal}
@media(max-width:959px){.s3__meta.legalbar{gap:8px}}
@media(max-width:719px){.legalbar__links li+li::before{margin:0 8px}.legalbar__links a,.legalbar__links button{font-size:11px}.legalbar__copy strong{font-size:11px}.legalbar__rd button{padding:5px 11px;font-size:11px}}
@media(min-width:960px){.legalbar{grid-template-columns:auto 1fr auto}.legalbar__copy strong{white-space:nowrap}}
@media(max-width:959px){.legalbar__links{gap:6px 16px}.legalbar__links li+li::before{content:none}}
/* barra legale compatta sui telefoni: la slide 5 resta nello schermo */
@media(max-width:719px){.s3__meta.legalbar{gap:5px;margin-top:6px!important}.legalbar__links{gap:2px 10px}.legalbar__rd button{padding:4px 10px}}
@media(max-width:719px) and (max-height:700px){.s3__foot{padding-top:calc(22px + 4px)!important}.legalbar__copy strong{font-size:10.5px}.legalbar__links a,.legalbar__links button{font-size:10.5px}.s5 .rcards{gap:6px}.rcard{padding:10px}}
/* =====================================================================
Tema scuro "caffè/sabbia" e selettore tema (prototipo home.html aggiornato)
===================================================================== */
.themesw{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pg-ink) 16%,transparent);background:color-mix(in srgb,var(--pg-surface) 55%,transparent);color:var(--pg-ink2)}
.themesw button{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:50%;padding:0;background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s}
.themesw button:hover{color:var(--pg-ink)}
.themesw button svg{width:13px;height:13px}
.themesw button[aria-pressed="true"]{background:var(--pg-ink);color:var(--pg-bg)}
.skoob-top__end{display:flex;align-items:center;margin-top:6px}
.skoob-top .skoob-top__end .skoob-langsq{margin-top:0}
.skoob-top .themesw{pointer-events:auto}
.themesw-sep{--sep:clamp(26px,2.8vw,36px);position:relative;margin-left:var(--sep)}
.themesw-sep::before{content:"";position:absolute;left:calc(var(--sep) / -2 - 1px);top:50%;height:18px;margin-top:-9px;width:1px;background:color-mix(in srgb,var(--pg-ink) 18%,transparent)}
html[data-theme="dark"]{color-scheme:dark;
--pg-accent:#b9c77e; --pg-accent-d:#c9d68f; --pg-tint:#2f3322;
--pg-ink:#f1e6d3; --pg-ink2:#cdbfa8; --pg-muted:#a8987f;
--pg-bg:#1c1712; --pg-surface:#27201a; --pg-line:#3d3329; --pg-star:#e0a54a;
--sand-deep:#211b16; --dune:#4a3e30; --hl:#5a4a2c;
--raised:#2f2720; --field:#211b16}
html[data-theme="dark"] .skoob-bg{background:url("data:image/svg+xml;utf8,"),radial-gradient(90% 70% at 78% 30%,#2a2118,transparent 70%),var(--pg-bg)}
html[data-theme="dark"] .skoob-bg svg{opacity:.55}
html[data-theme="dark"] .skoob-logo img{filter:invert(1) sepia(.22) brightness(.96)}
html[data-theme="dark"] .skoob-langsq button{background:var(--raised);border-color:color-mix(in srgb,var(--pg-ink) 55%,transparent)}
html[data-theme="dark"] .skoob-langsq button[aria-pressed="true"]{background:linear-gradient(180deg,#f6ecdb 0 50%,#e9dcc4 50%);color:#1c1712;border-color:#f1e6d3;box-shadow:none}
html[data-theme="dark"] .eyebrow{background:color-mix(in srgb,var(--raised) 70%,transparent);border-color:color-mix(in srgb,var(--pg-ink) 20%,transparent);box-shadow:0 8px 18px -14px rgba(0,0,0,.6)}
html[data-theme="dark"] .eyebrow__hex path{stroke:var(--pg-bg)}
html[data-theme="dark"] .step__n{-webkit-text-stroke-color:var(--pg-ink)}
html[data-theme="dark"] .skoob-btn--send{color:#1c1712;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 30px -18px rgba(0,0,0,.8)}
html[data-theme="dark"] .skoob-btn--send:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 22px 40px -20px rgba(0,0,0,.85)}
html[data-theme="dark"] .s2c__form.is-ready .skoob-btn--send{box-shadow:0 0 0 4px color-mix(in srgb,var(--pg-accent) 22%,transparent),0 18px 34px -18px rgba(0,0,0,.85)}
html[data-theme="dark"] .skoob-cookie__btns .skoob-btn--dark{color:#1c1712}
html[data-theme="dark"] .s2c__form{border-color:color-mix(in srgb,var(--pg-ink) 14%,transparent);box-shadow:0 2px 4px rgba(0,0,0,.25),0 40px 70px -40px rgba(0,0,0,.8)}
html[data-theme="dark"] .skoob-code__box{background:var(--field);border-color:color-mix(in srgb,var(--pg-ink) 30%,transparent);color:var(--pg-ink)}
html[data-theme="dark"] .skoob-code__box:focus,html[data-theme="dark"] .skoob-code__box.is-filled{background:var(--raised);border-color:var(--pg-ink)}
html[data-theme="dark"] .reassure__i{background:var(--raised);border-color:color-mix(in srgb,var(--pg-ink) 16%,transparent)}
html[data-theme="dark"] .skoob-msg--err{background:#3a201a;border-color:#7a3a2a;color:#f3b9a6}
html[data-theme="dark"] .kind{border-color:color-mix(in srgb,var(--pg-ink) 30%,transparent);box-shadow:0 26px 40px -30px rgba(0,0,0,.8)}
html[data-theme="dark"] .kind__art{background:#2a221b;border-bottom-color:color-mix(in srgb,var(--pg-ink) 30%,transparent)}
html[data-theme="dark"] .rcard{background:linear-gradient(180deg,#2f2720,#27201a);border-color:color-mix(in srgb,var(--pg-ink) 14%,transparent);box-shadow:0 1px 2px rgba(0,0,0,.3),0 26px 46px -32px rgba(0,0,0,.85)}
html[data-theme="dark"] .rcard:hover,html[data-theme="dark"] .rcard:focus-visible{border-color:color-mix(in srgb,var(--pg-ink) 32%,transparent)}
html[data-theme="dark"] .rbadge__hex path{fill:#3a3027;stroke:#3a3027}
html[data-theme="dark"] .rbadge__ico{color:#f1e6d3}
html[data-theme="dark"] .rbadge__ico .duo{fill:#b9c77e;fill-opacity:.28}
html[data-theme="dark"] .rcard--dark{background:linear-gradient(160deg,#f3e9d7,#e3d4ba);border-color:#e3d4ba;color:#1c1712}
html[data-theme="dark"] .rcard--dark .rcard__d{color:#4a4034}
html[data-theme="dark"] .rcard--dark .rcard__cta{color:#3f4b1f}
html[data-theme="dark"] .rcard--dark .rbadge__hex path{fill:#1f1a14;stroke:#1f1a14}
html[data-theme="dark"] .rcard--dark .rbadge__ico{color:#f1e6d3}
html[data-theme="dark"] .help-fab{background:#f1e6d3;border-color:#f1e6d3;color:#1c1712;box-shadow:0 16px 30px -14px rgba(0,0,0,.85)}
html[data-theme="dark"] .s3__foot{background:linear-gradient(180deg,#26201a,#211b16 60%) no-repeat 0 calc(var(--dune-h) - 1px)/100% 100%}
html[data-theme="dark"] .s3__foot::before{background-image:url("data:image/svg+xml;utf8,");filter:drop-shadow(0 -10px 14px rgba(0,0,0,.3))}
html[data-theme="dark"] .s3__foot::after{opacity:.25}
html[data-theme="dark"] .legalbar__rd button{background:transparent;border-color:color-mix(in srgb,#e3a083 45%,transparent);color:#e8ad92}
html[data-theme="dark"] .legalbar__rd button:hover{background:#3a2620;border-color:#e3a083;color:#f3c2ab}
html[data-theme="dark"] dialog.skoob-modal{border-color:color-mix(in srgb,var(--pg-ink) 25%,transparent);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
html[data-theme="dark"] dialog.skoob-modal::backdrop{background:rgba(8,6,4,.7)}
html[data-theme="dark"] .skoob-field input,html[data-theme="dark"] .skoob-field select,html[data-theme="dark"] .skoob-field textarea,html[data-theme="dark"] .skoob-file input{background:var(--field)}
html[data-theme="dark"] .skoob-cookie,html[data-theme="dark"] .skoob-loader__card{border-color:color-mix(in srgb,var(--pg-ink) 25%,transparent);box-shadow:0 24px 60px -24px rgba(0,0,0,.9)}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) :is([fill="#fff"],[fill="#fdfbf7"],[fill="#fbf8f2"]):not(text){fill:#3a3027}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#1f1a14"]{fill:#f1e6d3}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#2a231b"]{fill:#120e0a}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#3a3126"]{fill:#0d0a07}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#efe7d8"]{fill:#241d17}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#e0d3bf"]{fill:#4f4234}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#d6c4a6"]{fill:#4a3e31}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#e5dbcc"]{fill:#2f2720}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#e7e9d2"]{fill:#3a4126}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#56622a"]{fill:#b9c77e}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#b9c77e"]{fill:#56622a}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#f1e8d8"]{fill:#6a5642}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [fill="#d4c09d"]{fill:#4a3b2c}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) text[fill="#fff"]{fill:#1c1712}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) :is([stroke="#2a231b"],[stroke="#1f1a14"]){stroke:#e9dcc4}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) :is([stroke="#c9b99c"],[stroke="#cdb994"],[stroke="#d6c4a6"]){stroke:#6e604d}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [stroke="#4a4034"]{stroke:#b5a68c}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [stroke="#56622a"]{stroke:#b9c77e}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [stroke="#b9c77e"]{stroke:#56622a}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) [stroke="#efe7d8"]{stroke:#56622a}
html[data-theme="dark"] :is(.iso,.kind__art svg,.step__ill,.ok svg) .iso-sheet__shade{fill:#000}
html[data-theme="dark"] #iso-glow stop:nth-child(1){stop-color:#5a4426;stop-opacity:.7}
html[data-theme="dark"] #iso-glow stop:nth-child(2){stop-color:#3a2d1c;stop-opacity:.45}
html[data-theme="dark"] #iso-glow stop:nth-child(3){stop-color:#1c1712}
html[data-theme="dark"] #iso-shd stop{stop-color:#000}
html[data-theme="dark"] #iso-shd stop:first-child{stop-opacity:.5}
html[data-theme="dark"] #iso-in stop:nth-child(1){stop-color:#0f0c09}
html[data-theme="dark"] #iso-in stop:nth-child(2){stop-color:#050403}
html[data-theme="dark"] #iso-lf stop:nth-child(1){stop-color:#6e5a43}
html[data-theme="dark"] #iso-lf stop:nth-child(2){stop-color:#584734}
html[data-theme="dark"] #iso-rf stop:nth-child(1){stop-color:#45382a}
html[data-theme="dark"] #iso-rf stop:nth-child(2){stop-color:#382d21}
html[data-theme="dark"] #iso-lid stop:nth-child(1){stop-color:#7d6850}
html[data-theme="dark"] #iso-lid stop:nth-child(2){stop-color:#6a5843}
html[data-theme="dark"] #iso-soft feDropShadow{flood-color:#000;flood-opacity:.5}
html[data-theme="dark"] .ok__glow{fill:#7a5a26}
html[data-theme="dark"] .iso-qrow{animation-name:isoQrowD}
@keyframes isoQrowD{0%,30%{fill:#3a3027}40%,84%{fill:#3a4126}94%,100%{fill:#3a3027}}
html[data-theme="dark"] .iso-qdot{animation-name:isoQdotD}
@keyframes isoQdotD{0%,28%{fill:#3a3027}34%,84%{fill:#b9c77e}94%,100%{fill:#3a3027}}
html[data-theme="dark"] .step__boxes rect{animation-name:stepBoxD}
@keyframes stepBoxD{0%,8%{fill:#2a221b}18%,80%{fill:#3a4126}92%,100%{fill:#2a221b}}
@media (prefers-reduced-motion:reduce){html[data-theme="dark"] .iso-qrow{fill:#3a4126}html[data-theme="dark"] .iso-qdot{fill:#b9c77e}}
/* elementi del motore sulla home in versione scura */
html[data-theme="dark"] .pp-cookie__card{background:#27201a!important;border-color:rgba(241,230,211,.25)!important}
html[data-theme="dark"] .pp-cookie__title{color:#f1e6d3!important}
html[data-theme="dark"] .pp-cookie__txt,html[data-theme="dark"] .pp-cookie__row{color:#cdbfa8!important}
html[data-theme="dark"] .pp-btn--ghost{background:#2f2720!important;color:#f1e6d3!important;border-color:rgba(241,230,211,.4)!important}
html[data-theme="dark"] .pp-btn--accent{background:#f1e6d3!important;color:#1c1712!important}
html[data-theme="dark"] body{background:var(--pg-bg)}
/* JS attivo: la posizione la governa home.js (una slide per gesto); lo snap CSS resta solo come fallback senza JS */
html.js-step{scroll-snap-type:none!important;scroll-behavior:auto!important}
/* =====================================================================
SLIDE 2 · il codice come biglietto di carta (matrice perforata, pagine sfalsate)
===================================================================== */
.tk{--pad:clamp(22px,3vw,38px);--stub:58px;--notch:11px;
--paper:#fffdf8;--paper2:#fbf6ec;--field:#f2eadc;--field2:#faf5ec;--perf:rgba(31,26,20,.32);--sheet1:#f5eddf;--sheet2:#e9dcc6;--edge:rgba(31,26,20,.12);
position:relative;isolation:isolate;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;
filter:drop-shadow(0 34px 34px rgba(60,42,18,.20)) drop-shadow(0 3px 3px rgba(60,42,18,.08))}
.tk::before{content:none!important}
.tk__pages{position:absolute;inset:0;z-index:-1;pointer-events:none}
.tk__pages::before,.tk__pages::after{content:"";position:absolute;inset:0;border-radius:20px;border:1px solid var(--edge)}
.tk__pages::before{background:var(--sheet2);transform:translate(14px,12px) rotate(2.4deg)}
.tk__pages::after{background:var(--sheet1);transform:translate(-8px,8px) rotate(-1.6deg)}
.tk__paper{position:relative;border-radius:20px;padding:0 var(--pad) var(--pad);
background:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg,var(--paper2) 0 var(--stub),var(--paper) var(--stub));
box-shadow:inset 0 0 0 1px var(--edge);
-webkit-mask:radial-gradient(circle at 0 var(--stub),#0000 var(--notch),#000 calc(var(--notch) + .5px)),radial-gradient(circle at 100% var(--stub),#0000 var(--notch),#000 calc(var(--notch) + .5px));
-webkit-mask-composite:source-in;mask-composite:intersect}
/* matrice: etichetta stampata + linea perforata */
.tk .tk__stub{display:flex;align-items:center;gap:10px;height:var(--stub);margin:0 calc(var(--pad) * -1) clamp(18px,2.6vh,26px);padding:0 calc(var(--pad) + 34px) 0 var(--pad);
font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--pg-ink2);
background:radial-gradient(circle,var(--perf) 1.15px,transparent 1.6px) 0 100%/9px 4px repeat-x}
.tk__hex path{fill:var(--pg-accent);stroke:var(--pg-ink);stroke-width:1;stroke-linejoin:round}
/* caselle incassate nella carta, luce interna morbida */
.tk .skoob-code__boxes{gap:clamp(8px,1vw,12px)}
.tk .skoob-code__box{border:1px solid color-mix(in srgb,var(--pg-ink) 13%,transparent);border-radius:12px;
background:linear-gradient(180deg,var(--field),var(--field2));
box-shadow:inset 0 2px 5px rgba(60,42,18,.16),inset 0 -1px 0 rgba(255,255,255,.85),0 1px 0 rgba(255,255,255,.9);
font-family:var(--font-title);font-weight:700;color:var(--pg-ink);text-shadow:0 0 .6px rgba(31,26,20,.55)}
.tk .skoob-code__box:hover{border-color:color-mix(in srgb,var(--pg-ink) 26%,transparent)}
.tk .skoob-code__box:focus{background:linear-gradient(180deg,var(--field2),var(--paper));border-color:var(--pg-accent);
box-shadow:inset 0 2px 5px rgba(60,42,18,.10),0 0 0 4px color-mix(in srgb,var(--pg-accent) 16%,transparent)}
.tk .skoob-code__box.is-filled{background:linear-gradient(180deg,var(--field2),var(--paper));border-color:color-mix(in srgb,var(--pg-ink) 22%,transparent);animation:inkIn .55s cubic-bezier(.2,.7,.2,1)}
@keyframes inkIn{0%{color:transparent;text-shadow:0 0 9px rgba(31,26,20,.75)}55%{color:color-mix(in srgb,var(--pg-ink) 70%,transparent);text-shadow:0 0 2px rgba(31,26,20,.5)}100%{color:var(--pg-ink);text-shadow:0 0 .6px rgba(31,26,20,.55)}}
.tk.is-ready .skoob-code__box{border-color:color-mix(in srgb,var(--pg-accent) 55%,transparent)}
.tk .skoob-code__meter{margin-left:0;margin-right:0}
.tk .skoob-recover{margin-top:12px}
@media(max-width:719px){
.tk{--stub:44px;--notch:9px;--pad:18px}
.tk .tk__stub{font-size:10px;letter-spacing:.16em;margin-bottom:12px}
.tk__pages::before{transform:translate(8px,8px) rotate(1.8deg)}
.tk__pages::after{transform:translate(-5px,6px) rotate(-1.2deg)}
}
@media(max-width:719px) and (max-height:700px){.tk{--stub:38px}.tk .tk__stub{margin-bottom:8px}}
@media (prefers-reduced-motion:reduce){.tk .skoob-code__box.is-filled{animation:none}}
html[data-theme="dark"] .tk{--paper:#2c241d;--paper2:#322920;--field:#1b1611;--field2:#221c16;--perf:rgba(241,230,211,.35);--sheet1:#251f19;--sheet2:#201a15;--edge:rgba(241,230,211,.10);
filter:drop-shadow(0 34px 34px rgba(0,0,0,.55)) drop-shadow(0 3px 3px rgba(0,0,0,.3))}
html[data-theme="dark"] .tk .skoob-code__box{box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,240,215,.05),0 1px 0 rgba(255,240,215,.06);text-shadow:0 0 .6px rgba(241,230,211,.5)}
html[data-theme="dark"] .tk .skoob-code__box.is-filled,html[data-theme="dark"] .tk .skoob-code__box:focus{background:linear-gradient(180deg,#241d17,#2a221b)}
html[data-theme="dark"] .tk .skoob-code__box.is-filled{animation-name:inkInD}
@keyframes inkInD{0%{color:transparent;text-shadow:0 0 9px rgba(241,230,211,.7)}100%{color:var(--pg-ink);text-shadow:0 0 .6px rgba(241,230,211,.5)}}
/* slide 2: il biglietto si avvicina al testo e si stacca dal bordo destro/indicatore (solo desktop) */
@media(min-width:960px){.s2c__grid{padding-right:clamp(40px,4.4vw,80px);gap:clamp(44px,4.4vw,64px)}}
/* variante 0 scelta: biglietto più grande (540px), senza segnalibro */
@media(min-width:960px){.s2c__grid{grid-template-columns:1fr 540px}}
.tk{--stub:70px;--notch:13px;--pad:clamp(26px,3.6vw,46px)}
.tk .tk__stub{font-size:12.5px;margin-bottom:clamp(22px,3vh,30px);padding-right:var(--pad)}
.tk .tk__hex{width:14px;height:16px}
.tk .skoob-code__boxes{gap:clamp(10px,1.2vw,14px)}
.tk .skoob-code__box{height:82px!important;font-size:38px!important;border-radius:14px!important}
.tk .skoob-code__meter{margin-top:18px}
.tk .skoob-btn--send{margin-top:20px;padding:19px 28px!important;font-size:17.5px!important}
.tk .skoob-btn--send svg{width:20px;height:20px}
.tk .skoob-recover{font-size:15px;margin-top:14px}
@media(max-width:719px){
.tk{--stub:50px;--notch:10px;--pad:20px}
.tk .tk__stub{font-size:10.5px;margin-bottom:12px}
.tk .skoob-code__box{height:clamp(52px,8.4vh,64px)!important;font-size:clamp(24px,4vh,28px)!important}
.tk .skoob-btn--send{margin-top:14px;padding:16px 20px!important;font-size:16px!important}
}
@media(max-width:719px) and (max-height:760px){
.tk{--stub:38px;--pad:16px}
.tk .tk__stub{margin-bottom:8px}
.tk .skoob-code__meter{margin-top:10px}
.tk .skoob-code__status{margin:4px 0 0;min-height:0}
.tk .skoob-btn--send{margin-top:8px;padding:13px 18px!important;font-size:15.5px!important}
.tk .skoob-recover{margin-top:8px;font-size:14px}
}
/* home a slide con JS (html.deck-lock, solo se tutte le slide entrano nello schermo): la pagina non scorre in modo
nativo, il passo lo fa home.js. Sul touch le slide accettano solo pan orizzontale e zoom: niente scroll con inerzia. */
html.deck-lock{overflow:hidden;overscroll-behavior:none}
html.deck-lock body{overscroll-behavior:none}
html.deck-lock .slide{touch-action:pan-x pinch-zoom}
.skoob-modal__body{overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
/* =====================================================================
INVITO A SCRIVERE IL CODICE (riusabile: home slide 2 e gate)
Cursore che lampeggia nella prima casella e onda leggera sulle caselle fino al primo focus (.sk-touched).
L'intestazione-titolo con l'esagono-freccia (.sk-code-badge) è più sotto, nel blocco "BIGLIETTO".
Requisiti: caselle in griglia a 5 colonne con gap = --bx-gap.
===================================================================== */
.skoob-code__boxes{position:relative}
.tk .skoob-code{position:relative;container-type:inline-size}
.tk .skoob-code__boxes{--bx-gap:clamp(10px,1.2vw,14px);gap:var(--bx-gap)}
.tk .tk__stub{margin-bottom:var(--stub-mb)!important;color:var(--pg-ink)}
.sk-code-caret{position:absolute;top:30%;bottom:30%;width:2px;border-radius:1px;left:calc((100% - 4 * var(--bx-gap,10px)) / 10 - 1px);
background:var(--pg-accent);pointer-events:none;animation:skCaret 1.1s steps(1) infinite}
@keyframes skCaret{50%{opacity:0}}
.skoob-code__boxes:focus-within .sk-code-caret,.skoob-code__boxes:has(.is-filled) .sk-code-caret{display:none}
.tk:not(.sk-touched):not(:focus-within) .skoob-code__box:not(.is-filled){outline:2px solid transparent;outline-offset:2px;animation:skBoxWave 3.2s ease-in-out 1.8s infinite}
.tk .skoob-code__box:nth-child(2){animation-delay:1.95s}.tk .skoob-code__box:nth-child(3){animation-delay:2.1s}
.tk .skoob-code__box:nth-child(4){animation-delay:2.25s}.tk .skoob-code__box:nth-child(5){animation-delay:2.4s}
@keyframes skBoxWave{0%,30%,100%{outline-color:transparent}15%{outline-color:color-mix(in srgb,var(--pg-accent) 38%,transparent)}}
.slide:not(.is-active) .sk-code-badge svg,.slide:not(.is-active) .sk-code-caret,.slide:not(.is-active) .skoob-code__box{animation-play-state:paused!important}
/* riga sotto le caselle → pulsante: niente vuoto; "Tutto pronto" si appoggia a destra sotto la riga */
.tk .skoob-code__meter{margin-top:16px}
.tk .skoob-code__status{position:absolute;right:0;min-height:0!important;margin:5px 0 0!important;line-height:16px;font-size:12.5px}
.tk .skoob-btn--send{margin-top:24px}
@media (prefers-reduced-motion:reduce){
.sk-code-caret{opacity:1!important}
}
/* =====================================================================
SMARTPHONE E TABLET IN VERTICALE · impaginazione armonica (2026-10-02)
Scala 4·8·12·16·24·32·40·48·64. Ogni slide = 100svh senza scroll interno, con tre fasce:
testata (logo, --top) · contenuto · pulsanti fissi cookie/aiuto (--bot). A destra la colonna degli
esagoni (--rail). Le illustrazioni riempiono lo spazio che resta (flex), con un tetto.
===================================================================== */
@media (max-width:1023px) and (orientation:portrait){
.pgn-home-deck{--side:16px;--rail:28px;--top:88px;--bot:80px;--tkm:24px}
}
@media (max-width:1023px) and (orientation:portrait) and (min-width:391px){.pgn-home-deck{--side:20px}}
@media (max-width:1023px) and (orientation:portrait) and (min-width:600px){.pgn-home-deck{--side:24px;--rail:40px;--top:112px;--bot:96px;--tkm:72px}}
@media (max-width:1023px) and (orientation:portrait) and (max-height:700px){.pgn-home-deck{--top:84px;--bot:76px}}
@media (max-width:1023px) and (orientation:portrait){
.deck-nav{right:4px;gap:6px}
.pgn-home-deck .slide{padding:var(--top) 0 var(--bot)!important;justify-content:center}
.pgn-home-deck .slide>.slide__in{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:0;
width:100%;max-width:640px;margin:0 auto;padding:0 var(--rail) 0 var(--side)!important}
/* occhiello, titoli, testo */
.pgn-home-deck .slide .eyebrow{display:inline-flex;align-self:flex-start;flex:none;margin:0 0 16px;padding:6px 12px 6px 9px;font-size:10.5px;letter-spacing:.14em;gap:8px}
.pgn-home-deck .slide .eyebrow__hex{width:10px;height:12px}
.pgn-home-deck .s1__title{font-size:clamp(28px,8.8vw,34px);line-height:1.04;max-width:none;margin:0 0 12px;letter-spacing:-.022em}
.pgn-home-deck .slide__title{font-size:clamp(23px,6.8vw,26px);line-height:1.12;margin:0 0 12px;letter-spacing:-.018em}
.pgn-home-deck .s1__lead,.pgn-home-deck .slide__lead{font-size:15px;line-height:1.55;margin:0 0 24px;max-width:36em}
.pgn-home-deck .slide__lead{flex:none}
/* SLIDE 1 · testo, scatola che riempie lo spazio, segnali di fiducia in fondo */
.pgn-home-deck .s1__grid{justify-content:flex-start}
.pgn-home-deck .s1__text{flex:none}
.pgn-home-deck .s1__cta{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.pgn-home-deck .s1__cta .skoob-btn--send{width:100%;min-height:48px;padding:13px 20px;font-size:16px}
.pgn-home-deck .s1__more{align-self:center;min-height:44px;padding:0 8px;font-size:14.5px}
.pgn-home-deck .s1__visual{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 0}
.pgn-home-deck .s1__visual svg.iso{width:100%;height:100%;max-width:340px;max-height:340px;min-height:0}
.pgn-home-deck .trust{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:0;padding:12px 0 0}
.pgn-home-deck .trust li{font-size:12.5px;gap:6px}
.pgn-home-deck .trust li:last-child{grid-column:auto}
/* SLIDE 2 · biglietto del codice, centrato nello schermo (margini uguali) */
.pgn-home-deck .s2c__grid{gap:0}
.pgn-home-deck .s2c__text{flex:none}
.pgn-home-deck .s2c .slide__lead{margin-bottom:16px}
.pgn-home-deck .reassure{margin:0 0 8px;gap:8px}
.pgn-home-deck .reassure li{grid-template-columns:28px 1fr;gap:12px;font-size:14px}
.pgn-home-deck .reassure__i{width:28px;height:28px}
.pgn-home-deck .reassure li strong{font-size:14px;font-weight:600}
.pgn-home-deck .tk{flex:none;margin:16px 0 0 calc(var(--tkm) - var(--side));width:calc(100% + var(--side) + var(--rail) - 2 * var(--tkm));
--stub:44px;--notch:10px;--pad:20px}
.pgn-home-deck .tk{--stub-mb:24px}
.pgn-home-deck .tk .tk__stub{font-size:10.5px;letter-spacing:.12em;line-height:1.3}
.pgn-home-deck .tk .skoob-code__boxes{--bx-gap:8px}
.pgn-home-deck .tk .skoob-code__box{height:56px!important;font-size:26px!important;border-radius:12px!important}
.pgn-home-deck .tk .skoob-code__meter{margin-top:12px}
.pgn-home-deck .tk .skoob-code__status{margin-top:3px!important;font-size:12px}
.pgn-home-deck .tk .skoob-btn--send{margin-top:20px;min-height:48px;padding:13px 20px!important;font-size:16px!important}
.pgn-home-deck .tk .skoob-recover{display:flex;justify-content:center;width:100%;min-height:44px;margin:4px 0 0;font-size:14px}
.pgn-home-deck .tk__paper{padding-bottom:8px}
/* SLIDE 3 · cosa trovi dentro: 2x2, le illustrazioni crescono con lo schermo */
.pgn-home-deck .s2__grid{flex:1 1 auto;min-height:0;max-height:560px;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
.pgn-home-deck .kind{min-height:0;border-radius:16px}
.pgn-home-deck .s2__grid .kind__art{flex:1 1 auto;min-height:44px;height:auto;aspect-ratio:auto}
.pgn-home-deck .kind__art svg{width:84%;height:76%}
.pgn-home-deck .kind__body{flex:none;padding:12px 12px 16px}
.pgn-home-deck .kind__t{font-size:16px;line-height:1.15;margin:0 0 4px}
.pgn-home-deck .kind__d{font-size:13px;line-height:1.4}
/* SLIDE 4 · i tre passi: illustrazione a sinistra, testo leggibile a destra */
.pgn-home-deck .steps{flex:1 1 auto;min-height:0;max-height:440px;margin:0;display:flex}
.pgn-home-deck .steps__list{flex:1 1 auto;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
.pgn-home-deck .steps__list::before{left:16%;top:16%;bottom:16%}
.pgn-home-deck .step{flex-direction:row;align-items:center;gap:16px;min-height:0}
.pgn-home-deck .step__art{flex:none;width:32%;max-width:150px;height:100%;max-height:112px;align-items:center}
.pgn-home-deck .step__ill{height:100%;width:100%}
.pgn-home-deck .step__txt{column-gap:12px;row-gap:4px;align-items:start}
.pgn-home-deck .step__n{font-size:32px;-webkit-text-stroke-width:1.2px}
.pgn-home-deck .step__txt strong{font-size:17px;line-height:1.2;overflow-wrap:anywhere}
.pgn-home-deck .step__txt span:not(.step__n){display:block;font-size:14px;line-height:1.45}
/* SLIDE 5 · aiuto: card 2x2 ben distanziate, footer con duna in fondo */
.pgn-home-deck .s5{padding-bottom:0!important}
.pgn-home-deck .s5>.slide__in{margin:0 auto}
.pgn-home-deck .s5 .slide__title{margin-bottom:16px}
.pgn-home-deck .rcards{grid-template-columns:1fr 1fr;gap:12px;margin:0}
.pgn-home-deck .rcard{padding:16px;border-radius:16px;gap:4px;min-height:0}
.pgn-home-deck .rcard__art{margin:0 0 8px}
.pgn-home-deck .rbadge{width:44px;height:44px}
.pgn-home-deck .rcard__t{font-size:15.5px;line-height:1.2;overflow-wrap:anywhere}
.pgn-home-deck .rcard__d{display:none;font-size:13px;line-height:1.4}
.pgn-home-deck .rcard__cta{margin-top:auto;padding-top:8px;font-size:13.5px}
.pgn-home-deck .s3__foot{flex:none;margin-top:24px;padding:calc(var(--dune-h) + 8px) 0 20px!important;text-align:center}
.pgn-home-deck .s3__foot .skoob-wrap{padding:0 var(--side)}
.pgn-home-deck .s3__foot-in{display:block}
.pgn-home-deck .s3__claim{font-size:22px;line-height:1.05}
.pgn-home-deck .s3__meta.legalbar{margin-top:8px!important;gap:8px;padding-left:52px!important;padding-right:52px!important}
}
/* telefoni bassi (375x667, 360x640): si toglie il superfluo, mai il codice o le azioni */
@media (max-width:599px) and (orientation:portrait) and (max-height:760px){
.pgn-home-deck .reassure{display:none}
.pgn-home-deck .rcard__d{display:none}
.pgn-home-deck .s5 .eyebrow{display:none}
.pgn-home-deck .s2 .slide__lead{margin-bottom:16px}
}
@media (max-width:599px) and (orientation:portrait) and (max-height:700px){
.pgn-home-deck .s1__more{display:none}
.pgn-home-deck .s1__lead{margin-bottom:16px}
.pgn-home-deck .slide .eyebrow{margin-bottom:12px}
.pgn-home-deck .s2c .slide__lead,.pgn-home-deck .s2 .slide__lead{font-size:14.5px;line-height:1.5}
.pgn-home-deck .tk{--stub:40px}
.pgn-home-deck .tk .skoob-code__box{height:50px!important;font-size:24px!important}
.pgn-home-deck .s3__foot{margin-top:16px}
.pgn-home-deck .step__txt span:not(.step__n){font-size:13.5px}
}
/* slide 5: descrizioni delle card e occhiello solo dove c'è davvero spazio */
@media (max-width:1023px) and (orientation:portrait) and (min-height:880px){.pgn-home-deck .rcard__d{display:block}}
@media (max-width:599px) and (orientation:portrait) and (max-height:879px){.pgn-home-deck .s5 .eyebrow{display:none}}
@media (max-width:599px) and (orientation:portrait) and (max-height:700px){
.pgn-home-deck .s2 .slide__lead{display:none}
.pgn-home-deck .s5 .slide__title{margin-bottom:12px}
.pgn-home-deck .rcards{gap:8px}
.pgn-home-deck .rcard{padding:12px 14px}
.pgn-home-deck .rbadge{width:40px;height:40px}
.pgn-home-deck .rcard__art{margin-bottom:4px}
.pgn-home-deck .rcard__cta{font-size:13px;padding-top:4px}
}
/* tablet in verticale: stessa struttura, misure più generose */
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){
.pgn-home-deck .slide .eyebrow{font-size:11.5px;margin-bottom:24px}
.pgn-home-deck .s1__title{font-size:48px;margin-bottom:16px}
.pgn-home-deck .slide__title{font-size:36px;margin-bottom:16px}
.pgn-home-deck .s1__lead,.pgn-home-deck .slide__lead{font-size:17px;line-height:1.6;margin-bottom:32px}
.pgn-home-deck .s1__cta{flex-direction:row;align-items:center;gap:24px}
.pgn-home-deck .s1__cta .skoob-btn--send{width:auto;padding:15px 28px}
.pgn-home-deck .s1__visual svg.iso{max-width:420px;max-height:420px}
.pgn-home-deck .trust{gap:12px 32px}
.pgn-home-deck .trust li{font-size:13.5px}
.pgn-home-deck .reassure{gap:12px}
.pgn-home-deck .reassure li{grid-template-columns:36px 1fr;font-size:14.5px}
.pgn-home-deck .reassure__i{width:36px;height:36px}
.pgn-home-deck .reassure li > span:last-child > span{display:block}
.pgn-home-deck .tk{margin-top:32px;--stub:56px;--pad:28px}
.pgn-home-deck .tk .skoob-code__boxes{--bx-gap:12px}
.pgn-home-deck .tk .skoob-code__box{height:68px!important;font-size:32px!important}
.pgn-home-deck .s2__grid{max-height:640px;gap:16px}
.pgn-home-deck .kind__body{padding:16px 20px 20px}
.pgn-home-deck .kind__t{font-size:20px}
.pgn-home-deck .kind__d{font-size:14.5px}
.pgn-home-deck .steps{max-height:600px}
.pgn-home-deck .step__art{max-width:200px;max-height:150px}
.pgn-home-deck .step__n{font-size:44px}
.pgn-home-deck .step__txt strong{font-size:21px}
.pgn-home-deck .step__txt span:not(.step__n){font-size:15.5px}
.pgn-home-deck .rcards{gap:16px}
.pgn-home-deck .rcard{padding:20px}
.pgn-home-deck .rbadge{width:56px;height:56px}
.pgn-home-deck .rcard__t{font-size:19px}
.pgn-home-deck .rcard__d{font-size:14.5px}
.pgn-home-deck .s3__claim{font-size:34px}
}
/* =====================================================================
TELEFONO IN ORIZZONTALE (altezza ≤ 500): il contenuto sta a destra del logo e sotto le bandierine,
a sinistra della colonna esagoni/aiuto; colonne affiancate, solo l'essenziale.
===================================================================== */
@media (orientation:landscape) and (max-height:500px){
.pgn-home-deck{--top:60px;--lft:104px;--rgt:76px;--bot:16px}
.pgn-home-deck .slide{padding:var(--top) 0 var(--bot)!important;justify-content:center}
.pgn-home-deck .slide>.slide__in{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:none;margin:0;padding:0 var(--rgt) 0 var(--lft)!important}
.pgn-home-deck .slide .eyebrow{display:none}
.pgn-home-deck .s1__title{font-size:28px;line-height:1.04;max-width:none;margin:0 0 8px}
.pgn-home-deck .slide__title{font-size:22px;line-height:1.12;margin:0 0 8px}
.pgn-home-deck .s1__lead,.pgn-home-deck .slide__lead{font-size:14px;line-height:1.5;margin:0 0 16px;max-width:40em}
.pgn-home-deck .s2 .slide__lead,.pgn-home-deck .s4 .slide__lead{display:none}
/* slide 1 */
.pgn-home-deck .slide>.s1__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:24px}
.pgn-home-deck .s1__cta{gap:8px 24px}
.pgn-home-deck .s1__cta .skoob-btn--send{min-height:44px;padding:11px 20px;font-size:15px}
.pgn-home-deck .s1__more{font-size:14px;min-height:44px}
.pgn-home-deck .s1__visual svg.iso{width:100%;max-width:240px;max-height:calc(100svh - 96px);min-height:0}
.pgn-home-deck .trust{display:none}
/* slide 2 */
.pgn-home-deck .slide>.s2c__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;gap:24px}
.pgn-home-deck .reassure{display:none}
.pgn-home-deck .s2c .slide__lead{margin:0}
.pgn-home-deck .tk{--stub:36px;--notch:8px;--pad:16px;margin:0;width:auto}
.pgn-home-deck .tk{--stub-mb:16px}
.pgn-home-deck .tk .tk__stub{font-size:9.5px;letter-spacing:.08em;line-height:1.3}
.pgn-home-deck .tk .skoob-code__boxes{--bx-gap:6px}
.pgn-home-deck .tk .skoob-code__box{height:44px!important;font-size:21px!important;border-radius:10px!important}
.pgn-home-deck .tk .skoob-code__meter{margin-top:8px}
.pgn-home-deck .tk .skoob-code__status{margin-top:2px!important;font-size:11.5px}
.pgn-home-deck .tk .skoob-btn--send{margin-top:18px;min-height:44px;padding:10px 16px!important;font-size:15px!important}
.pgn-home-deck .tk .skoob-recover{display:flex;justify-content:center;width:100%;min-height:36px;margin:0;font-size:12.5px;white-space:nowrap}
.pgn-home-deck .tk__paper{padding-bottom:4px}
/* slide 3 */
.pgn-home-deck .s2__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pgn-home-deck .s2__grid .kind__art{height:clamp(56px,24svh,96px);aspect-ratio:auto}
.pgn-home-deck .kind__body{padding:8px 12px 12px}
.pgn-home-deck .kind__t{font-size:15px}
.pgn-home-deck .kind__d{font-size:12.5px;line-height:1.4}
/* slide 4 */
.pgn-home-deck .steps{--ill-h:clamp(64px,24svh,100px);margin:8px 0 0}
.pgn-home-deck .steps__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pgn-home-deck .steps__list::before{content:none}
.pgn-home-deck .step{flex-direction:column;align-items:stretch;gap:8px}
.pgn-home-deck .step__art{width:auto;height:var(--ill-h);align-items:flex-end}
.pgn-home-deck .step__link{display:block}
.pgn-home-deck .step__n{font-size:30px}
.pgn-home-deck .step__txt strong{font-size:15px}
.pgn-home-deck .step__txt span:not(.step__n){display:block;font-size:12.5px}
/* slide 5 */
.pgn-home-deck .s5{padding-bottom:0!important}
.pgn-home-deck .s5 .slide__title{margin-bottom:12px}
.pgn-home-deck .rcards{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.pgn-home-deck .rcard{padding:12px;border-radius:14px;gap:2px}
.pgn-home-deck .rbadge{width:36px;height:36px}
.pgn-home-deck .rcard__art{margin:0 0 4px}
.pgn-home-deck .rcard__t{font-size:14px;line-height:1.2}
.pgn-home-deck .rcard__d{display:none}
.pgn-home-deck .rcard__cta{font-size:12.5px;margin-top:auto;padding-top:4px}
.pgn-home-deck .s3__foot{flex:none;--dune-h:18px;margin-top:12px;padding:calc(18px + 4px) 0 12px!important;text-align:center}
.pgn-home-deck .s3__foot-in{display:none}
.pgn-home-deck .s3__meta.legalbar{margin-top:0!important;gap:4px;padding-left:64px!important;padding-right:64px!important}
}
/* footer della slide 5: link e "Rimuovi i miei dati" con area di tocco da 44px; l'ultima riga sta tra i due
pulsanti tondi (cookie a sinistra, aiuto a destra: 48px a 16px dal bordo, componenti.css) */
@media (max-width:1023px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
.pgn-home-deck .s3__meta.legalbar{padding-left:0!important;padding-right:0!important;gap:0}
.pgn-home-deck .legalbar__links{gap:0 2px}
.pgn-home-deck .legalbar__links li{font-size:12px}
.pgn-home-deck .legalbar__links a,.pgn-home-deck .legalbar__links button{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:12px}
.pgn-home-deck .legalbar__rd button{min-height:44px;padding:0 16px;font-size:12px}
.pgn-home-deck .s3__foot{padding-bottom:16px!important}
}
@media (max-width:599px) and (orientation:portrait) and (max-height:760px){.pgn-home-deck .s3__claim{display:none}}
@media (orientation:landscape) and (max-height:500px){
.pgn-home-deck .legalbar__copy{line-height:1.2}
.pgn-home-deck .s3__foot{padding-bottom:16px!important}
}
/* =====================================================================
QA finale (M7, B1) · 2026-10-02
M7: gli esagoni di navigazione non toccano mai i contenuti. Telefoni in verticale: nascosti (si scorre a gesti,
la posizione resta nell'hash) e margini laterali simmetrici. Tablet e desktop stretti: area di tocco 44px e una
corsia libera a destra del contenuto (slide 2: il biglietto e le sue pagine sfalsate restano fuori dagli esagoni).
B1: nessun testo sotto gli 11px (etichette maiuscole) / 12px (copyright).
===================================================================== */
@media (max-width:599px) and (orientation:portrait){
.deck-nav{display:none}
.pgn-home-deck{--rail:var(--side)}
}
.deck-nav button{min-width:44px;min-height:44px;padding:0 4px;justify-content:flex-start}
.deck-nav{gap:0}
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){.deck-nav{right:4px}.pgn-home-deck{--rail:56px}}
@media (orientation:landscape) and (max-height:500px){.deck-nav{right:8px}}
@media (min-width:720px) and (max-width:1279px) and (min-height:501px){
.pgn-home-deck .slide>.slide__in{padding-right:96px}
}
@media (min-width:960px) and (max-width:1279px) and (min-height:501px){
.pgn-home-deck .slide>.s2c__grid{grid-template-columns:minmax(0,1fr) 460px;padding-right:104px;gap:48px}
}
/* barra legale della slide 5 fuori dai due pulsanti tondi (cookie a sinistra, aiuto a destra) */
@media (min-width:720px) and (max-width:1279px) and (min-height:501px){
.pgn-home-deck .s3__meta.legalbar{padding-left:56px!important;padding-right:72px!important}
}
/* B1 */
@media (max-width:1023px) and (orientation:portrait){
.pgn-home-deck .slide .eyebrow{font-size:11px}
.pgn-home-deck .tk .tk__stub{font-size:11px;letter-spacing:.1em}
.pgn-home-deck .legalbar__copy strong{font-size:12px}
.pgn-home-deck .legalbar__copy small{font-size:12px}
}
@media (orientation:landscape) and (max-height:500px){
.pgn-home-deck .tk .tk__stub{font-size:11px;letter-spacing:.06em}
.pgn-home-deck .slide>.s2c__grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
.pgn-home-deck .tk .skoob-code__status{font-size:12px}
.pgn-home-deck .legalbar__copy strong{font-size:12px}
}
/* =====================================================================
BIGLIETTO · intestazione-titolo + esagono oliva con freccia (.sk-code-badge), 2026-10-02
Sostituisce la freccia a mano. L'intestazione è un titolo vero (Rubik, maiuscole normali); davanti c'è un
esagono oliva con freccia bianca, centrato sulla prima casella (padding calcolato con 100cqw del form), che
rimbalza piano ogni 2,5s finché non si tocca il biglietto. Alla prima cifra la freccia sparisce e l'esagono
torna piccolo (marcatore). Riusabile nel gate: serve un form .skoob-code con container-type:inline-size.
===================================================================== */
.tk{--bw:40px;--bh:44px;--stub:96px;--stub-mb:24px}
.tk .skoob-code .tk__stub,.pgn-home-deck .tk .skoob-code .tk__stub{
gap:14px;align-items:center;height:var(--stub);
padding-left:calc(var(--pad) + (100cqw - 4 * var(--bx-gap,10px)) / 10 - var(--bw) / 2);padding-right:var(--pad);
font-family:var(--font-title);font-weight:750;font-size:24px;line-height:1.14;letter-spacing:-.012em;text-transform:none;
color:var(--pg-ink);text-wrap:balance}
.tk .skoob-code .tk__stub .tk__hex{display:none}
.tk__stub-t{min-width:0;overflow-wrap:anywhere}
.sk-code-badge{flex:none;display:grid;place-items:center;width:var(--bw);height:var(--bh)}
.sk-code-badge svg{display:block;width:100%;height:100%;overflow:visible;
filter:drop-shadow(0 6px 8px rgba(63,75,31,.28));
transition:transform .45s cubic-bezier(.2,.7,.2,1);
animation:skBadgeIn .55s .35s cubic-bezier(.2,.9,.3,1.3) both,skBadgeBob 2.5s ease-in-out 1.4s infinite}
.sk-code-badge__hex{fill:#56622a;stroke:#56622a;stroke-width:3;stroke-linejoin:round}
.sk-code-badge__arrow{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s ease}
@keyframes skBadgeIn{from{opacity:0;transform:translateY(-6px) scale(.7)}to{opacity:1;transform:none}}
@keyframes skBadgeBob{0%,44%,100%{transform:none}18%{transform:translateY(5px)}30%{transform:translateY(-1px)}}
.tk.sk-touched .sk-code-badge svg,.tk:focus-within .sk-code-badge svg{animation:skBadgeIn .01s both}
.tk:has(.skoob-code__box.is-filled) .sk-code-badge svg{animation:none;transform:scale(.42)}
.tk:has(.skoob-code__box.is-filled) .sk-code-badge__arrow{opacity:0}
html[data-theme="dark"] .sk-code-badge svg{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
html[data-theme="dark"] .sk-code-badge__hex{fill:#56622a;stroke:#56622a}
@media (prefers-reduced-motion:reduce){.sk-code-badge svg{animation:none!important;opacity:1}}
@media (max-width:599px){
.tk,.pgn-home-deck .tk{--bw:36px;--bh:40px;--stub:84px;--stub-mb:20px}
.tk .skoob-code .tk__stub,.pgn-home-deck .tk .skoob-code .tk__stub{font-size:20px;gap:12px}
}
@media (min-width:391px) and (max-width:599px){.tk .skoob-code .tk__stub,.pgn-home-deck .tk .skoob-code .tk__stub{font-size:21px}}
@media (max-width:599px) and (max-height:700px){.tk,.pgn-home-deck .tk{--stub:76px}}
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){.tk,.pgn-home-deck .tk{--stub:92px;--stub-mb:24px}}
@media (orientation:landscape) and (max-height:500px){
.tk,.pgn-home-deck .tk{--bw:32px;--bh:35px;--stub:62px;--stub-mb:14px}
.tk .skoob-code .tk__stub,.pgn-home-deck .tk .skoob-code .tk__stub{font-size:17px;gap:10px}
}
@media (orientation:landscape) and (max-height:500px){
.pgn-home-deck .slide>.s2c__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.pgn-home-deck .s2c .slide__title{font-size:21px}
}
@media (min-width:1024px){.tk{--stub:88px}}
/* =====================================================================
SLIDE 2 · "IL SIGILLO" (variante C di design/slide2-varianti.html, scelta dall'utente), 2026-10-02
Grande carta sabbia con curve di duna; cinque ghiere come una serratura a combinazione (le caselle reali
.skoob-code__box dentro .sg-dial); lucchetto oliva che diventa oro e si apre quando il codice è completo
(#riscatta.is-ready, messo da home.js); "click" a ogni cifra (.is-filled, rimesso da home.js a ogni battuta).
L'invito a scrivere è il cursore nella prima casella. Mai indicazioni sul formato.
===================================================================== */
.pgn-home-deck .slide>.slide__in.sg{display:flex;flex-direction:column;align-items:center;justify-content:center}
.sg-card{--bx-gap:16px;--dial-h:clamp(80px,12vh,112px);--dial-fs:clamp(32px,4.8vh,44px);
position:relative;width:min(1120px,100%);box-sizing:border-box;text-align:center;overflow:hidden;border-radius:30px;
padding:clamp(24px,4.4vh,44px) clamp(24px,4.6vw,56px) clamp(18px,3vh,28px);
background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,#fff 45%,var(--sand-deep)),var(--sand-deep) 60%);
border:1px solid color-mix(in srgb,var(--pg-ink) 8%,transparent);box-shadow:0 2px 4px rgba(60,42,18,.05),0 50px 80px -60px rgba(60,42,18,.6)}
html[data-theme="dark"] .sg-card{background:radial-gradient(120% 90% at 50% 0%,#2c241d,#1f1914 60%);border-color:rgba(241,230,211,.08);box-shadow:0 50px 80px -50px rgba(0,0,0,.9)}
.sg-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--dune);opacity:.55}
.sg-glow{position:absolute;left:50%;top:58%;width:900px;max-width:140%;height:360px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity 1s ease;
background:radial-gradient(closest-side,rgba(255,236,190,.9),transparent)}
html[data-theme="dark"] .sg-glow{background:radial-gradient(closest-side,rgba(201,165,90,.32),transparent)}
.sg-card.is-ready .sg-glow{opacity:1}
.sg-head,.sg-body,.sg-reasons{position:relative}
.pgn-home-deck .sg-card .eyebrow.sg-kick{display:inline-flex;align-self:center;margin:0 0 clamp(10px,1.8vh,16px)}
.pgn-home-deck .sg-card .sg-title{margin:0;font-size:clamp(28px,min(3.4vw,6vh),46px);line-height:1.06;letter-spacing:-.025em;max-width:none}
.pgn-home-deck .sg-card .sg-lead{margin:clamp(6px,1.2vh,12px) auto 0;max-width:36em;font-size:15.5px;line-height:1.55}
/* serratura */
.sg-lock{display:flex;align-items:center;justify-content:center;gap:28px;margin:clamp(22px,4vh,36px) auto 0}
.sg-card .skoob-code__boxes.sg-dials{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--bx-gap);width:min(560px,100%);flex:0 1 560px}
.sg-dial{position:relative;display:block;min-width:0}
.sg-dial::before,.sg-dial::after{content:"";position:absolute;left:18%;right:18%;height:7px;pointer-events:none;
background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--pg-ink) 30%,transparent) 0 1.5px,transparent 1.5px 7px);transition:background .3s}
.sg-dial::before{top:-13px}.sg-dial::after{bottom:-13px}
.sg-dial:has(.is-filled)::before,.sg-dial:has(.is-filled)::after{background:repeating-linear-gradient(90deg,var(--pg-accent) 0 1.5px,transparent 1.5px 7px)}
.sg-card .skoob-code__box{display:block;width:100%;box-sizing:border-box;height:var(--dial-h)!important;font-size:var(--dial-fs)!important;border-radius:18px!important;
font-family:var(--font-title);font-weight:700;color:var(--pg-ink);text-align:center;text-transform:uppercase;caret-color:var(--pg-accent);outline:0;
border:1px solid color-mix(in srgb,var(--pg-ink) 16%,transparent)!important;
background:linear-gradient(180deg,#d9cbb3 0%,#fbf7f0 22%,#fffdf9 50%,#fbf7f0 78%,#d9cbb3 100%)!important;
box-shadow:inset 0 10px 12px -8px rgba(60,42,18,.35),inset 0 -10px 12px -8px rgba(60,42,18,.35),0 2px 0 rgba(255,255,255,.8),0 14px 22px -14px rgba(60,42,18,.45)!important;
transition:border-color .25s,box-shadow .25s;animation:none}
html[data-theme="dark"] .sg-card .skoob-code__box{background:linear-gradient(180deg,#0f0c09 0%,#2a221b 22%,#30271f 50%,#2a221b 78%,#0f0c09 100%)!important;border-color:rgba(241,230,211,.14)!important;
box-shadow:inset 0 10px 12px -8px rgba(0,0,0,.7),inset 0 -10px 12px -8px rgba(0,0,0,.7),0 14px 22px -14px rgba(0,0,0,.8)!important;color:var(--pg-ink)}
.sg-card .skoob-code__box:focus{border-color:var(--pg-accent)!important;box-shadow:inset 0 10px 12px -8px rgba(60,42,18,.3),inset 0 -10px 12px -8px rgba(60,42,18,.3),0 0 0 5px color-mix(in srgb,var(--pg-accent) 18%,transparent)!important}
html[data-theme="dark"] .sg-card .skoob-code__box:focus{box-shadow:inset 0 10px 12px -8px rgba(0,0,0,.6),inset 0 -10px 12px -8px rgba(0,0,0,.6),0 0 0 5px color-mix(in srgb,var(--pg-accent) 22%,transparent)!important}
.sg-card .skoob-code__box.is-filled{animation:sgClick .38s cubic-bezier(.2,.9,.3,1.4)}
@keyframes sgClick{0%{transform:translateY(-6px) perspective(300px) rotateX(35deg)}60%{transform:translateY(1px)}100%{transform:none}}
.sg-card .sk-code-caret{top:32%;bottom:32%;width:2.5px}
.sg-padlock{flex:none;width:64px;height:84px;color:var(--pg-ink);overflow:visible}
.sg-padlock .sh{transition:transform .8s cubic-bezier(.3,1.5,.5,1);transform-box:view-box;transform-origin:46px 38px}
.sg-padlock .bd{fill:var(--pg-accent-d);transition:fill .5s ease}
html[data-theme="dark"] .sg-padlock .bd{fill:#8f9d4f}
.sg-padlock .kh{fill:#fff}
.sg-card.is-ready .sg-padlock .sh{transform:translateY(-9px) rotate(-24deg)}
.sg-card.is-ready .sg-padlock .bd{fill:#b08a3e}
/* azioni */
.sg-card .skoob-code__meter{display:none}
.sg-card .skoob-code__status{min-height:20px;margin:14px 0 0;font-size:13.5px;line-height:20px;color:var(--pg-accent-d);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.sg-card.is-ready .skoob-code__status{opacity:1;transform:none}
.sg-card .skoob-msg--err{max-width:480px;margin:10px auto 0;text-align:left}
.sg-card .skoob-btn--send{display:flex;width:min(380px,100%);min-height:56px;margin:clamp(10px,1.8vh,16px) auto 0;padding:15px 24px}
.sg-card .skoob-recover{display:inline-flex;justify-content:center;min-height:44px;margin:4px 0 0;font-size:14.5px}
.sg-reasons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;list-style:none;margin:clamp(12px,2.4vh,24px) 0 0;padding:clamp(12px,2vh,20px) 0 0;
border-top:1px solid color-mix(in srgb,var(--pg-ink) 10%,transparent);font-size:14px;color:var(--pg-ink2)}
.sg-reasons li{display:flex;align-items:center;gap:8px}
.sg-ri{display:grid;color:var(--pg-accent-d)}
@media (prefers-reduced-motion:reduce){
.sg-card .skoob-code__box.is-filled{animation:none}
.sg-padlock .sh,.sg-padlock .bd,.sg-glow{transition:none}
}
/* desktop: la slide parte sotto il logo grande (componenti.css, padding-top 196px); in basso spazio per i pulsanti tondi */
@media (min-width:1024px){
.pgn-home-deck .s2c{padding-bottom:72px!important}
}
@media (min-width:1024px) and (max-height:820px){
.sg-card{--dial-h:clamp(72px,11vh,92px);--dial-fs:34px}
.pgn-home-deck .sg-card .sg-lead{font-size:15px}
.sg-card .skoob-btn--send{min-height:50px;padding:12px 24px}
.sg-reasons{font-size:13.5px}
}
@media (min-width:1024px) and (max-height:700px){
.pgn-home-deck .sg-card .eyebrow.sg-kick{display:none}
.sg-reasons{display:none}
}
/* tablet in verticale e telefoni (come la maquette c-390) */
@media (max-width:1023px) and (orientation:portrait){
.pgn-home-deck .s2c>.slide__in.sg{padding:0 var(--side)!important}
.sg-card{--dial-h:76px;--dial-fs:30px;--bx-gap:8px;border-radius:24px;padding:26px 16px 16px}
.pgn-home-deck .sg-card .sg-title{font-size:clamp(26px,7.4vw,30px)}
.pgn-home-deck .sg-card .sg-lead{font-size:15px}
.sg-lock{flex-direction:column;gap:18px;margin-top:22px}
.sg-padlock{width:44px;height:58px;order:-1}
.sg-card .skoob-code__boxes.sg-dials{flex:none;width:100%}
.sg-card .skoob-code__box{border-radius:14px!important}
.sg-dial::before,.sg-dial::after{height:5px}.sg-dial::before{top:-10px}.sg-dial::after{bottom:-10px}
.sg-card .skoob-code__status{margin-top:12px;font-size:13px}
.sg-card .skoob-btn--send{width:100%;min-height:50px;margin-top:8px;padding:13px 20px}
.sg-reasons{gap:6px 14px;font-size:12.5px;margin-top:12px;padding-top:12px}
}
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){
.sg-card{--dial-h:100px;--dial-fs:40px;--bx-gap:14px;padding:40px 40px 24px;border-radius:30px}
.pgn-home-deck .sg-card .sg-title{font-size:38px}
.pgn-home-deck .sg-card .sg-lead{font-size:16.5px}
.sg-card .skoob-code__boxes.sg-dials{width:min(520px,100%)}
.sg-padlock{width:56px;height:74px}
.sg-card .skoob-btn--send{width:min(380px,100%)}
.sg-reasons{font-size:14px;gap:10px 28px;margin-top:24px;padding-top:20px}
}
@media (max-width:599px) and (orientation:portrait) and (max-height:760px){
.sg-card{--dial-h:66px;--dial-fs:27px;padding-top:20px}
.sg-lock{gap:14px;margin-top:18px}
.sg-padlock{width:38px;height:50px}
.sg-reasons{display:none}
}
@media (max-width:599px) and (orientation:portrait) and (max-height:700px){
.pgn-home-deck .sg-card .eyebrow.sg-kick{display:none}
.sg-card{--dial-h:60px;--dial-fs:25px}
.pgn-home-deck .sg-card .sg-lead{font-size:14.5px;margin-top:6px}
}
/* telefono in orizzontale: testo a sinistra, serratura e azioni a destra */
@media (orientation:landscape) and (max-height:500px){
.sg-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:0 24px;text-align:left;
--dial-h:52px;--dial-fs:22px;--bx-gap:6px;border-radius:20px;padding:16px 20px}
.sg-head{grid-column:1}
.sg-body{grid-column:2}
.pgn-home-deck .sg-card .sg-title{font-size:22px}
.pgn-home-deck .sg-card .sg-lead{font-size:13.5px;margin:8px 0 0}
.sg-lock{gap:12px;margin-top:4px}
.sg-padlock{width:32px;height:42px}
.sg-card .skoob-code__box{border-radius:10px!important}
.sg-dial::before,.sg-dial::after{height:4px;left:24%;right:24%}.sg-dial::before{top:-8px}.sg-dial::after{bottom:-8px}
.sg-card .skoob-code__status{min-height:16px;margin-top:8px;font-size:12px;line-height:16px}
.sg-card .skoob-btn--send{width:100%;min-height:44px;margin-top:4px;padding:10px 16px;font-size:15px}
.sg-card .skoob-recover{min-height:36px;font-size:12.5px;width:100%}
.sg-reasons{display:none}
}
@media (orientation:landscape) and (max-height:500px){.pgn-home-deck .sg-card .eyebrow.sg-kick{display:none}}
/* "Tutto pronto" sotto le tacche delle ghiere, mai sopra */
.sg-card .skoob-code__status{margin-top:24px}
@media (max-width:1023px) and (orientation:portrait){.sg-card .skoob-code__status{margin-top:18px}}
@media (orientation:landscape) and (max-height:500px){.sg-card .skoob-code__status{margin-top:12px}}
/* slide 5 senza la frase "Unlock your next chapter" e senza l'onda bianca (richiesta utente, 2026-10-02) */
/* slide 5: via la frase e l'onda bianca in cima al footer; il footer resta color sabbia con una sfumatura morbida */
.s3__foot .s3__foot-in,.s3__claim{display:none!important}
.pgn-home-deck .s3__foot::before,.pgn-home-deck .s3__foot::after{content:none!important}
.pgn-home-deck .s3__foot{background:linear-gradient(180deg,color-mix(in srgb,var(--sand-deep) 0%,transparent),var(--sand-deep) calc(var(--dune-h) + 8px)) no-repeat 0 0/100% 100%!important}
html[data-theme="dark"] .pgn-home-deck .s3__foot{background:linear-gradient(180deg,rgba(33,27,22,0),#211b16 calc(var(--dune-h) + 8px)) no-repeat 0 0/100% 100%!important}
/* =====================================================================
CENTRO ASSISTENZA a tutto schermo (#m-aiuto, helpcenter.js), 2026-10-02
Desktop: elenco delle voci a sinistra, contenuto della voce a destra (scorre da solo). Telefono: una colonna,
prima l'elenco, poi la voce con "Indietro". Carta sabbia, oliva, Rubik/Archivo; chiaro e scuro.
===================================================================== */
dialog.hc{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--pg-ink);overflow:hidden}
dialog.hc:not([open]){display:none}
dialog.hc::backdrop{background:rgba(31,26,20,.45);backdrop-filter:blur(3px)}
html[data-theme="dark"] dialog.hc::backdrop{background:rgba(8,6,4,.7)}
.hc__in{position:absolute;inset:16px;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;
background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,#fff 45%,var(--sand-deep)),var(--sand-deep) 65%);
border:1px solid color-mix(in srgb,var(--pg-ink) 10%,transparent);box-shadow:0 40px 90px -40px rgba(31,26,20,.6);
animation:hcIn .45s cubic-bezier(.2,.8,.2,1)}
html[data-theme="dark"] .hc__in{background:radial-gradient(120% 70% at 50% 0%,#2c241d,#1f1914 65%);border-color:rgba(241,230,211,.1);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
@keyframes hcIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (min-width:1200px){.hc__in{inset:24px max(24px,calc((100vw - 1240px) / 2))}}
.hc__top{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:28px 32px 20px;border-bottom:1px solid color-mix(in srgb,var(--pg-ink) 10%,transparent)}
.hc .hc__kick{margin:0 0 10px}
.hc__title{margin:0;font-family:var(--font-title);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.08;letter-spacing:-.022em}
.hc__x{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--pg-ink) 18%,transparent);background:var(--pg-surface);color:var(--pg-ink);cursor:pointer;transition:background .2s,transform .2s}
.hc__x:hover{background:var(--pg-tint);transform:rotate(90deg)}
.hc__grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr)}
.hc__nav{overflow:auto;overscroll-behavior:contain;padding:20px 16px 24px 24px;border-right:1px solid color-mix(in srgb,var(--pg-ink) 10%,transparent)}
.hc__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hc__item{width:100%;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 14px;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--pg-ink);text-align:left;cursor:pointer;font:inherit;transition:background .2s,border-color .2s}
.hc__item:hover{background:color-mix(in srgb,var(--pg-surface) 60%,transparent)}
.hc__item[aria-current="true"]{background:var(--pg-surface);border-color:color-mix(in srgb,var(--pg-ink) 12%,transparent);box-shadow:0 14px 30px -24px rgba(60,42,18,.6)}
html[data-theme="dark"] .hc__item[aria-current="true"]{background:#2f2720}
.hc__ic.rbadge{flex:none;width:44px;height:44px}
.hc__it{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hc__it strong{font-family:var(--font-title);font-weight:700;font-size:15.5px;line-height:1.2;overflow-wrap:anywhere}
.hc__it small{font-size:13px;line-height:1.35;color:var(--pg-ink2)}
.hc__chev{flex:none;color:var(--pg-ink2);opacity:.6}
.hc__item[aria-current="true"] .hc__chev{color:var(--pg-accent-d);opacity:1}
.hc__main{position:relative;overflow:auto;overscroll-behavior:contain;padding:28px clamp(24px,4vw,56px) 40px;outline:0}
.hc__back{display:none}
.hc__h{margin:0 0 14px;font-family:var(--font-title);font-weight:800;font-size:24px;line-height:1.15;letter-spacing:-.015em}
.hc__slot{max-width:680px}
.hc__slot[hidden]{display:none!important}
.hc .skoob-modal__body{padding:0;max-height:none;overflow:visible}
.hc .skoob-modal__body > p:first-child,.hc .help-lead{margin-top:0}
.hc .skoob-field input,.hc .skoob-field select,.hc .skoob-field textarea{min-height:44px;background:var(--pg-surface)}
html[data-theme="dark"] .hc .skoob-field input,html[data-theme="dark"] .hc .skoob-field select,html[data-theme="dark"] .hc .skoob-field textarea{background:var(--field,#211b16)}
.hc .skoob-btn--send{min-height:50px}
.hc-pc__links{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;margin:24px 0 0;padding:16px 0 0;border-top:1px solid color-mix(in srgb,var(--pg-ink) 10%,transparent)}
.hc-pc__links a,.hc-pc__links button{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--pg-ink);text-decoration:underline;text-decoration-color:var(--dune);text-underline-offset:4px;cursor:pointer}
.hc-pc__form .skoob-btn--send{width:100%}
html.hc-open .help-fab,html.hc-open .pp-cookie-badge{visibility:hidden}
@media (max-width:767px){
.hc__in{inset:0;border-radius:0;border:0}
.hc__top{padding:16px 16px 14px;align-items:center}
.hc .hc__kick{display:none}
.hc__title{font-size:22px}
.hc__x{width:44px;height:44px}
.hc__grid{grid-template-columns:1fr}
.hc__nav{border-right:0;padding:16px 16px 32px}
.hc__item{background:var(--pg-surface);border-color:color-mix(in srgb,var(--pg-ink) 10%,transparent)}
html[data-theme="dark"] .hc__item{background:#2a221b}
.hc__item[aria-current="true"]{box-shadow:none}
.hc:not(.is-menu) .hc__nav{display:none}
.hc.is-menu .hc__main{display:none}
.hc__main{padding:12px 16px 40px}
.hc__back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 4px;padding:0;background:none;border:0;font:600 14.5px var(--font);color:var(--pg-accent-d);cursor:pointer}
.hc__h{font-size:21px}
.hc .skoob-grid2{grid-template-columns:1fr}
}
@media (orientation:landscape) and (max-height:500px){
.hc__in{inset:0;border-radius:0}
.hc__top{padding:10px 20px}
.hc .hc__kick{display:none}
.hc__title{font-size:20px}
.hc__item{min-height:48px;padding:8px 10px}
.hc__it small{display:none}
.hc__ic.rbadge{width:32px;height:32px}
}
@media (orientation:landscape) and (max-height:500px) and (min-width:768px){.hc__grid{grid-template-columns:240px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.hc__in{animation:none}.hc__x:hover{transform:none}}
/* FAQ nel centro assistenza: il corpo porta anche .skoob-faq, che nel tema/funnel è il velo grigio a tutto schermo
(skoob.css, funnel.css !important). Qui dentro torna un contenitore normale, come fa componenti.css per la finestra. */
html body dialog.hc .skoob-modal__body.skoob-faq{position:static!important;inset:auto!important;z-index:auto!important;display:block!important;background:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:none!important;padding:0!important;overflow:visible!important;justify-content:normal;align-items:normal;color:var(--pg-ink)}
.hc .skoob-faq #faq-intro{color:var(--pg-ink2);margin:0 0 8px}
.hc .skoob-faq details{border-bottom:1px solid color-mix(in srgb,var(--pg-ink) 12%,transparent)}
.hc .skoob-faq summary{color:var(--pg-ink);min-height:48px;align-items:center}
.hc .skoob-faq .a{color:var(--pg-ink2)}
/* centro assistenza: la colonna del contenuto (form, FAQ…) è una carta bianca; l'elenco a sinistra resta sabbia.
Scuro: superficie scura del tema. Campi ben visibili sul bianco (fondo sabbia chiarissimo + bordo). */
.hc__main{background:var(--pg-surface);margin:16px 16px 16px 0;border-radius:22px;border:1px solid color-mix(in srgb,var(--pg-ink) 9%,transparent);
box-shadow:0 1px 2px rgba(60,42,18,.05),0 24px 50px -36px rgba(60,42,18,.45)}
html[data-theme="dark"] .hc__main{background:var(--pg-surface);border-color:rgba(241,230,211,.1);box-shadow:0 24px 50px -36px rgba(0,0,0,.8)}
.hc__nav{border-right:0}
.hc .skoob-field input,.hc .skoob-field select,.hc .skoob-field textarea{background:#fbf8f2;border:1.5px solid var(--pg-line)}
.hc .skoob-field input:focus,.hc .skoob-field select:focus,.hc .skoob-field textarea:focus{background:#fff;border-color:var(--pg-accent)}
html[data-theme="dark"] .hc .skoob-field input,html[data-theme="dark"] .hc .skoob-field select,html[data-theme="dark"] .hc .skoob-field textarea{background:#1f1914;border-color:#4a3e31}
.hc .help-faq{background:var(--pg-tint)}
.hc .skoob-chips label{background:#fbf8f2}
html[data-theme="dark"] .hc .skoob-chips label{background:#1f1914}
@media (max-width:767px){
.hc__main{margin:0;border-radius:20px 20px 0 0;border-bottom:0}
.hc:not(.is-menu) .hc__grid{padding-top:8px}
}
@media (orientation:landscape) and (max-height:500px){.hc__main{margin:8px 8px 8px 0;border-radius:16px}}
@media (orientation:landscape) and (max-height:500px) and (max-width:767px){.hc__main{margin:0}}