@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bric.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/fig.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/arch.woff2) format("woff2");font-weight:400 900;font-stretch:62% 100%;font-display:swap}
@font-face{font-family:"Gloock";src:url(../fonts/gloock.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(../fonts/bigs.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hank.woff2) format("woff2");font-weight:400 600;font-display:swap}

/* Metriche calibrate sull'uso principale: Bricolage 800, Big Shoulders 900 maiuscolo, gli altri 400; ratio di larghezza misurata nel browser contro Arial 400 su 270 caratteri di copy, verticali da hhea (Arial 1854/434 su 2048) */
@font-face{font-family:"Bricolage Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:97.4%;ascent-override:95.49%;descent-override:27.72%;line-gap-override:0%}
@font-face{font-family:"Figtree Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:98.88%;ascent-override:96.08%;descent-override:25.28%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:98.09%;ascent-override:89.51%;descent-override:21.41%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:70.76%;ascent-override:139.06%;descent-override:30.1%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:99.09%;ascent-override:100.92%;descent-override:30.58%;line-gap-override:0%}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;min-height:100vh;overflow-x:clip;background:var(--bg);color:var(--txt);font:400 18px/1.5 var(--ff-b),system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus,currentColor);outline-offset:3px}
button,input{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Tokens per variante. Valori oklch presi dai sorgenti Bf approvati (canvas v10). */
html:has([data-v="lullonote"]),[data-v="lullonote"]{
  --bg:oklch(0.95 0.03 230);--txt:oklch(0.22 0.045 280);--txt-2:oklch(0.42 0.04 280);
  --acc:oklch(0.82 0.12 65);--on-acc:oklch(0.22 0.045 280);
  --field:oklch(0.99 0.008 230);--line:oklch(0.22 0.045 280 / 0.22);--focus:oklch(0.22 0.045 280);
  --err:oklch(0.45 0.18 25);--r:16px;
  --banner:oklch(0.3 0.05 280);--banner-txt:oklch(0.95 0.02 85);
  --grain-blend:multiply;--grain-o:0.06;
  --ff-d:"Bricolage Grotesque","Bricolage Fallback";--ff-b:"Figtree","Figtree Fallback";
  --p-screen:oklch(0.21 0.045 280);--p-surf:oklch(0.27 0.05 280);--p-txt:oklch(0.95 0.02 85);
  --p-acc:oklch(0.82 0.12 65);--p-on-acc:oklch(0.2 0.04 280);--p-frame:oklch(0.14 0.03 280);
  --p-ring:oklch(0.34 0.03 280);--p-shadow:oklch(0.22 0.045 280 / 0.28);
  --p-ff-d:"Bricolage Grotesque","Bricolage Fallback";--p-ff-b:"Figtree","Figtree Fallback"
}
html:has([data-v="envelopejar"]),[data-v="envelopejar"]{
  --bg:oklch(0.16 0.01 60);--txt:oklch(0.95 0.012 85);--txt-2:oklch(0.78 0.012 85);
  --acc:oklch(0.55 0.19 28);--on-acc:oklch(0.98 0.005 85);
  --field:oklch(0.21 0.01 60);--line:oklch(0.95 0.012 85 / 0.28);--focus:oklch(0.95 0.012 85);
  --err:oklch(0.78 0.14 28);--r:6px;
  --banner:oklch(0.25 0.012 60);--banner-txt:oklch(0.95 0.012 85);
  --grain-blend:screen;--grain-o:0.06;
  --ff-d:"Archivo","Archivo Fallback";--ff-b:"Archivo","Archivo Fallback";
  --p-screen:oklch(0.96 0.015 85);--p-surf:oklch(0.99 0.008 85);--p-txt:oklch(0.2 0.02 60);
  --p-acc:oklch(0.55 0.19 28);--p-on-acc:oklch(0.96 0.015 85);--p-frame:oklch(0.07 0.005 60);
  --p-ring:oklch(0.3 0.01 60);--p-shadow:oklch(0 0 0 / 0.6);
  --p-ff-d:"Archivo","Archivo Fallback";--p-ff-b:"Archivo","Archivo Fallback"
}
html:has([data-v="cullroll"]),[data-v="cullroll"]{
  --bg:oklch(0.16 0.01 25);--txt:oklch(0.94 0.012 80);--txt-2:oklch(0.76 0.012 80);
  --acc:oklch(0.88 0.16 95);--on-acc:oklch(0.16 0.01 25);
  --field:oklch(0.21 0.01 25);--line:oklch(0.94 0.012 80 / 0.28);--focus:oklch(0.88 0.16 95);
  --err:oklch(0.78 0.14 25);--r:4px;
  --banner:oklch(0.25 0.012 25);--banner-txt:oklch(0.94 0.012 80);
  --grain-blend:screen;--grain-o:0.06;
  --ff-d:"Big Shoulders Display","Big Shoulders Fallback";--ff-b:"Hanken Grotesk","Hanken Fallback";
  --p-screen:oklch(0.14 0.015 25);--p-surf:oklch(0.22 0.02 25);--p-txt:oklch(0.94 0.012 80);
  --p-acc:oklch(0.88 0.16 95);--p-on-acc:oklch(0.16 0.03 25);--p-frame:oklch(0.07 0.005 25);
  --p-ring:oklch(0.34 0.01 25);--p-shadow:oklch(0 0 0 / 0.6);
  --p-ff-d:"Big Shoulders Display","Big Shoulders Fallback";--p-ff-b:"Hanken Grotesk","Hanken Fallback"
}
[data-v]{--ink:var(--txt);position:relative;isolation:isolate;background:var(--bg);color:var(--txt);font-family:var(--ff-b),system-ui,sans-serif}
[data-v]::before{content:"";position:absolute;inset:0;z-index:50;pointer-events:none;opacity:var(--grain-o);mix-blend-mode:var(--grain-blend);background-size:220px 220px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Griglia 12 colonne: margini 64 e gap 24 a 1440, margini 16 sotto i 768 */
:root{--m:16px}
@media (min-width:768px){:root{--m:32px}}
@media (min-width:1200px){:root{--m:64px}}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-inline:var(--m)}

/* Scala tipografica. Titoli: 88/112/108 a 1440, 44/56/52 a 390, interpolati fra i due. */
.h1{font-family:var(--ff-d),system-ui,sans-serif;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
  .js .h1:not(.is-split){visibility:hidden;animation:fail-vis 0.01s linear 0.9s forwards}
}
@keyframes fail-vis{to{visibility:visible}}
[data-v="lullonote"] .h1{font-size:clamp(44px,calc(44px + (100vw - 390px) * 0.0419),88px);line-height:0.95;letter-spacing:-0.035em;font-weight:800}
[data-v="lullonote"] .h1 .lite{font-weight:200}
.h1 .nw{white-space:nowrap}
[data-v="envelopejar"] .h1{font-size:clamp(40px,min(calc(40px + (100vw - 320px) * 0.1143),calc(48px + (100vw - 390px) * 0.0419)),92px);line-height:0.92;letter-spacing:-0.01em;font-weight:900;font-variation-settings:"wdth" 62}
[data-v="envelopejar"] .h1 .price{font-family:"Gloock",serif;font-weight:400;font-variation-settings:normal;letter-spacing:0;color:var(--acc)}
[data-v="cullroll"] .h1{font-size:clamp(52px,calc(52px + (100vw - 390px) * 0.0533),108px);line-height:0.9;letter-spacing:0.005em;font-weight:900;text-transform:uppercase}
.t-lead{font-size:20px;line-height:28px;max-width:52ch}
.t-body{font-size:18px;line-height:27px;max-width:62ch}
.t-small{font-size:15px;line-height:20px}
.t-label{font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--txt-2)}
.t-spec{font-size:14px;line-height:20px;color:var(--txt-2);font-variant-numeric:tabular-nums}

/* Nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;height:56px;padding-inline:var(--m);background:var(--bg)}
@media (min-width:768px){.nav{height:72px}}
.js .nav{background:transparent}
.js .nav.is-stuck{background:var(--bg)}
.nav__name{display:block;color:var(--ink);line-height:0;padding-block:12px}
.nav__name svg{height:20px;width:auto}
@media (min-width:768px){.nav__name{padding-block:11px}.nav__name svg{height:22px}}
.nav__cta{font-size:16px;line-height:24px;font-weight:600;text-decoration:underline;text-underline-offset:4px;padding-block:10px}
.js .nav__cta{opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0s linear 0.2s}
.js .nav__cta.is-on{opacity:1;visibility:visible;transition:opacity 0.2s ease}
@media (hover:hover){.nav__cta:hover{text-decoration-thickness:2px}}

/* Hero */
.hero{overflow-x:clip;align-items:center;padding-block:24px 56px}
.hero__copy{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero__phone{grid-column:1 / -1;display:flex;justify-content:center;margin-top:32px}
@media (min-width:1024px){
  .hero{padding-block:48px;min-height:calc(100vh - 72px)}
  .hero__copy{grid-column:1 / 8}
  .hero__phone{grid-column:8 / 13;margin-top:0}
}

.price-line{display:none;margin-top:24px;font-size:20px;line-height:28px;color:var(--txt-2)}
.price-line b{font-weight:600;color:var(--txt)}
@media (min-width:768px){.price-line{display:block}}
/* Form */
.form{width:100%;max-width:600px;margin-top:16px}
@media (min-width:768px){.form{margin-top:32px}}
.form__row{display:flex;flex-direction:column;gap:8px}
@media (min-width:768px){.form__row{flex-direction:row}}
.field{flex:1 1 auto;min-width:0;width:100%;height:56px;padding:0 16px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--field);color:var(--txt);font-size:17px;line-height:1.2;-webkit-appearance:none;appearance:none;transition:border-color 0.16s ease}
@media (min-width:768px){.field{height:64px;padding:0 20px;font-size:18px}}
.field::placeholder{color:var(--txt-2);opacity:1}
.field:focus-visible,.field.is-focus{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.field[aria-invalid="true"]{border-color:var(--err)}
.btn{flex:none;width:100%;height:56px;padding:0 16px;border:0;border-radius:var(--r);background:var(--acc);color:var(--on-acc);font-size:17px;font-weight:600;line-height:1.2;cursor:pointer;transition:transform 0.16s ease-out,filter 0.16s ease}
@media (min-width:768px){.btn{width:315px;height:64px;font-size:18px}}
.btn__label{display:block;transition:opacity 0.2s ease,filter 0.2s ease}
.btn:active:not(:disabled){transform:scale(0.97)}
.btn:focus-visible,.btn.is-focus{outline:3px solid var(--focus);outline-offset:3px}
@media (hover:hover){.btn:hover:not(:disabled){filter:brightness(1.07)}}
.btn:disabled{cursor:default}
.btn:disabled .btn__label,.btn.is-sending .btn__label{opacity:0.72}
.form__msg{font-size:15px;line-height:20px;color:var(--err)}
.form__msg:not(:empty){margin-top:10px}
.form__msg .suggest{padding:0;border:0;background:none;color:var(--txt);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.form__msg .suggest:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.form__hint{color:var(--txt-2)}
.form__err{display:none;margin-top:10px;font-size:15px;line-height:20px;color:var(--err)}
.form__err:target{display:block}
.js .form__err:target{display:none}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.micro{margin-top:12px;font-size:15px;line-height:20px;color:var(--txt-2)}
.micro .m-wide{display:none}
@media (min-width:768px){.micro .m-wide{display:inline}.micro .m-narrow{display:none}}

@media (prefers-reduced-motion:no-preference){
  .js .phone[data-scene]:not([data-s3]){opacity:0;animation:fail-show 0.01s linear 2.5s forwards}
  .js .phone[data-scene]:not([data-s3]).is-on{animation:none}
}
@keyframes fail-show{to{opacity:1}}
@media (max-width:381.98px){:root{--m:12px}}
/* Banner cookie */
.banner{position:fixed;z-index:200;left:var(--m);bottom:0;width:calc(100% - var(--m) * 2);max-width:480px;height:96px;padding:12px;border-radius:16px 16px 0 0;background:var(--banner);color:var(--banner-txt);box-shadow:0 -1px 0 oklch(1 0 0 / 0.12);display:flex;flex-direction:column;gap:8px;font-family:var(--ff-b),system-ui,sans-serif}
@media (min-width:768px){.banner{bottom:24px;border-radius:16px}}
@media (min-width:1024px){.banner{left:auto;right:var(--m)}}
@media (min-width:1024px) and (max-width:1279.98px){.banner{max-width:400px}}
.banner p{font-size:14px;line-height:20px;white-space:nowrap}
.banner a:focus-visible{outline-color:var(--banner-txt)}
.banner a{display:inline-block;padding-block:12px;margin-block:-12px;text-decoration:underline;text-underline-offset:3px}
.banner__btns{display:flex;gap:8px}
.banner__btns button{font-family:inherit;flex:1 1 0;height:44px;border-radius:12px;border:1.5px solid color-mix(in oklch,var(--banner-txt) 55%,transparent);background:transparent;color:var(--banner-txt);font-size:15px;font-weight:600;cursor:pointer;transition:transform 0.16s ease-out,background-color 0.16s ease}
.banner__btns button:active{transform:scale(0.97)}
.banner__btns button:focus-visible{outline:3px solid var(--banner-txt);outline-offset:2px}
@media (hover:hover){.banner__btns button:hover{background:color-mix(in oklch,var(--banner-txt) 12%,transparent)}}
.banner[data-bv=lullonote]{--ff-b:Figtree,"Figtree Fallback";--banner:oklch(0.3 0.05 280);--banner-txt:oklch(0.95 0.02 85)}
.banner[data-bv=envelopejar]{--ff-b:Archivo,"Archivo Fallback";--banner:oklch(0.25 0.012 60);--banner-txt:oklch(0.95 0.012 85)}
.banner[data-bv=cullroll]{--ff-b:"Hanken Grotesk","Hanken Fallback";--banner:oklch(0.25 0.012 25);--banner-txt:oklch(0.94 0.012 80)}
html.banner-open{scroll-padding-bottom:104px}
html.banner-open:has(.footer :focus-visible){padding-bottom:104px}
@media (min-width:768px){html.banner-open{scroll-padding-bottom:128px}html.banner-open:has(.footer :focus-visible){padding-bottom:128px}}
.banner--static{position:static;max-width:358px;width:100%;border-radius:16px}

/* Footer */
.footer{padding-block:40px 48px;row-gap:12px;font-size:14px;line-height:22px;color:var(--txt-2)}
.footer p,.footer nav{grid-column:1 / -1}
@media (min-width:1024px){.footer p{grid-column:1 / 9}.footer nav{grid-column:9 / 13;text-align:right}}
.footer a{text-underline-offset:3px;padding-block:11px;margin-block:-11px;display:inline-block}
html.banner-open .footer{padding-bottom:120px}
@media (min-width:768px){html.banner-open .footer{padding-bottom:48px}}

/* Telefono */
html:not(.js) .phone-box,html.no-gsap .phone-box{display:none}
.js .phone-box:not(.is-built){visibility:hidden}
.phone{--pf:12px;--sw:min(326px,calc(100vw - 40px));position:relative;flex:none;width:calc(var(--sw) + var(--pf) * 2);height:calc(var(--sw) * 2.1679 + var(--pf) * 2);padding:var(--pf);border-radius:calc(44px + var(--pf));background:var(--p-frame);box-shadow:0 0 0 1px var(--p-ring),0 40px 80px var(--p-shadow)}
@media (max-width:381.98px){.phone{--pf:8px}}
.phone-box{position:relative;flex:none}
.pause{position:absolute;right:0;top:100%;margin-top:4px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--line);border-radius:50%;background:transparent;color:var(--txt-2);cursor:pointer;transition:transform 0.16s ease-out,background-color 0.16s ease}
.pause[hidden]{display:none}
.pause__i{width:20px;height:20px}
.pause__i--play,.pause.is-held .pause__i--pause{display:none}
.pause.is-held .pause__i--play{display:block}
@media (min-width:1024px){.pause{left:100%;right:auto;top:0;margin:0 0 0 12px}.hero{--ph-shift:clamp(0px,calc(235px - 20.8333vw),22px)}.phone-box{margin-right:calc(var(--ph-shift) * 2)}}
.pause:active{transform:scale(0.97)}
@media (hover:hover){.pause:hover{background:color-mix(in oklch,var(--txt-2) 12%,transparent)}}
@media (prefers-reduced-motion:reduce){.pause{display:none}}
.screen{position:relative;width:var(--sw);height:calc(var(--sw) * 2.1679);border-radius:44px;overflow:hidden;background:var(--p-screen)}
.native,.over{position:absolute;left:0;top:0;width:393px;height:852px;transform:scale(0.829517);transform-origin:0 0;color:var(--p-txt);font-family:var(--p-ff-b),sans-serif;font-size:18px;line-height:1.25}
.over{left:var(--pf);top:var(--pf);pointer-events:none;z-index:3}
.island{position:absolute;left:141px;top:14px;width:111px;height:32px;border-radius:16px;background:var(--p-frame);z-index:2}
.dyn{position:absolute;inset:0}
.ring{position:absolute;border:2px solid var(--p-acc);border-radius:50%;opacity:0;pointer-events:none;z-index:4}

.dg{position:relative;display:inline-block;width:var(--dw,0.6em);height:1.2em;overflow:hidden;vertical-align:top;text-align:center}
.dga{display:block}
.dgb{position:absolute;left:0;right:0;top:0}

/* Scene del telefono, porting di lab/probe-loop/css/scene.css allineato alle tavole Bf */
.n-top{position:absolute;left:20px;right:20px;top:56px;display:flex;justify-content:space-between;align-items:center;font-weight:600}
.n-chip{background:var(--p-surf);border-radius:999px;padding:4px 14px;font-weight:600;white-space:nowrap}
.n-chip .dg{--dw:0.6em}
.n-last{position:absolute;left:20px;top:96px;white-space:nowrap;line-height:1.2}
.n-lb{font-size:18px;opacity:0.7}
.n-ago{font:800 34px/1.2 "Bricolage Grotesque","Bricolage Fallback",sans-serif;letter-spacing:-0.02em}
.n-list{position:absolute;left:20px;top:150px;width:353px;height:540px;overflow:hidden}
.n-in{position:absolute;left:0;top:0;width:100%}
.n-row{display:flex;gap:14px;align-items:center;height:80px;margin-bottom:8px;padding:0 14px;border-radius:16px;background:var(--p-surf)}
.n-new{position:absolute;top:-88px;left:0;right:0;background:oklch(0.33 0.04 40)}
.n-row b{display:block;font-size:20px;font-weight:600;line-height:1.2}
.n-row span{display:block;opacity:0.7}
.n-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none}
.n-ic svg{width:28px;height:28px}
.k-f{background:var(--p-acc);color:var(--p-on-acc)}
.k-s{background:oklch(0.62 0.11 280);color:oklch(0.97 0.01 280)}
.k-d{background:oklch(0.72 0.09 195);color:oklch(0.2 0.04 200)}
.n-btns{position:absolute;left:20px;top:700px;width:353px;height:104px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.n-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:22px;background:var(--p-surf);font-size:20px;font-weight:600}
.n-b svg{width:36px;height:36px}
.n-feed{background:var(--p-acc);color:var(--p-on-acc)}

.b-mo{position:absolute;left:20px;top:56px;font-weight:600;line-height:1.2}
.b-big{position:absolute;left:20px;top:90px;font:900 40px/1.2 "Archivo","Archivo Fallback",sans-serif;font-stretch:62%;white-space:nowrap;--dw:0.46em;transform-origin:0 50%}
.b-day{position:absolute;left:20px;top:136px;font-weight:600;--dw:0.58em;line-height:1.2}
.b-env{position:absolute;left:20px;width:353px;height:78px;padding:12px 16px;border-radius:16px;background:var(--p-surf);box-shadow:0 2px 0 oklch(0.78 0.03 75);overflow:hidden}
.b-l{position:relative;display:flex;justify-content:space-between;align-items:baseline}
.b-l b{font-weight:600;font-size:20px}
.b-am{font:400 22px/1.2 "Gloock",serif;--dw:0.6em}
.b-trk{position:relative;margin-top:12px;height:8px;border-radius:4px;background:oklch(0.89 0.012 85);overflow:hidden}
.b-fill{display:block;height:100%;width:100%;background:var(--p-txt);transform-origin:0 50%}
.b-stamp{position:absolute;inset:0;background:var(--p-acc);opacity:0}
.b-add{position:absolute;left:20px;top:724px;width:353px;height:72px;border-radius:36px;background:var(--p-txt);color:var(--p-screen);display:flex;gap:10px;align-items:center;justify-content:center;font-weight:600;font-size:20px}
.b-add svg{width:28px;height:28px}
.rcpt{position:absolute;left:20px;top:330px;width:170px;padding:12px 14px;background:oklch(0.99 0.008 85);color:oklch(0.2 0.02 60);box-shadow:0 2px 0 oklch(0.2 0.02 60 / 0.4);border-radius:6px;opacity:0;font-family:"Archivo","Archivo Fallback",sans-serif}
.rcpt b{display:block;font-weight:600;font-size:18px}
.rcpt span{display:block;font:400 24px/1.2 "Gloock",serif;color:oklch(0.55 0.19 28)}

.f-top{position:absolute;left:20px;right:20px;top:56px;display:flex;justify-content:space-between;font-weight:600;line-height:1.2}
.f-ix{color:oklch(0.72 0.01 60)}
.f-ctr{position:absolute;left:20px;top:96px;font:900 44px/1.2 "Big Shoulders Display","Big Shoulders Fallback",sans-serif;text-transform:uppercase;letter-spacing:0.02em;color:var(--p-acc);white-space:nowrap;height:53px;--dw:0.47em}
.f-l{position:absolute;left:0;top:0}
.f-deck{position:absolute;left:20px;top:170px;width:353px;height:530px}
.f-card{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:var(--p-surf);box-shadow:0 2px 0 oklch(0 0 0 / 0.4)}
.f-sz{position:absolute;bottom:16px;padding:4px 12px;border-radius:14px;background:oklch(0.12 0.02 25 / 0.7);color:oklch(0.94 0.012 80);font-weight:600;font-size:20px}
.f-card img{display:block;width:100%;height:100%;object-fit:cover}
.f-sz{right:16px}
.f-mk{position:absolute;top:12px;left:144px;width:64px;height:64px;fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.f-mk path{stroke-dasharray:1;stroke-dashoffset:1}
.f-btn{position:absolute;top:724px;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.f-btn svg{width:32px;height:32px;flex:none}
.f-del{left:100px;background:oklch(0.88 0.16 95);color:oklch(0.16 0.01 25)}
.f-keep{left:221px;background:oklch(0.27 0.012 25);color:oklch(0.94 0.012 80)}
.k-x{stroke:var(--p-acc)}
.k-o{stroke:oklch(0.97 0.01 80)}

.phone:not([data-scene=cullroll]) .dyn,.phone:not([data-scene=cullroll]) .dyn *,.phone:not([data-scene=cullroll]) .over *{will-change:transform}
.phone .dyn .dg .dga,.phone .dyn .dg .dgb{will-change:auto}

.cookie-reset{min-height:44px;padding:0 20px;border:1.5px solid currentColor;border-radius:12px;background:none;font-weight:600;cursor:pointer}
.cookie-reset:focus-visible{outline:3px solid currentColor;outline-offset:2px}
/* Pagina di prova del sistema */
.block{padding-bottom:0}
.states{padding-block:24px 8px;row-gap:40px;align-items:start}
.states__forms{grid-column:1 / -1;display:flex;flex-direction:column;gap:28px}
.states__type{grid-column:1 / -1;display:flex;flex-direction:column;gap:20px}
@media (min-width:1024px){.states__forms{grid-column:1 / 8}.states__type{grid-column:8 / 13}}
.state .t-label{margin-bottom:8px}
.state .form{margin-top:0}
.state .form__msg{min-height:20px}
.specimen{display:flex;flex-direction:column;gap:4px}
.rule{height:1px;border:0;margin:0;background:var(--line)}
.sysnav{padding-block:16px;font-size:14px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:clip}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms !important}}