/* Font files bundled with the client-owned kit under its OFL license. */
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/SchibstedGrotesk.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:100 900}
@font-face{font-family:Newsreader;src:url("../fonts/Newsreader.woff2") format("woff2");font-display:swap;font-weight:100 900;font-style:normal}
@font-face{font-family:Newsreader;src:url("../fonts/Newsreader-Italic.woff2") format("woff2");font-display:swap;font-weight:100 900;font-style:italic}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");font-display:swap;font-weight:500}

html,body{margin:0}
body{background:var(--surface-sunk);color:var(--ink);font-family:var(--font-sans)}
.x-logo{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:0;color:inherit}
.x-logo svg{display:block}
.x-logo__desc{font-family:var(--font-mono);font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap}
.fz{display:block;width:100%;height:100%}
.fz-sky{fill:var(--notte)}
.fz-block{fill:color-mix(in srgb,var(--carta) 7%,var(--notte))}
.fz-edge,.fz-sill{fill:color-mix(in srgb,var(--carta) 16%,var(--notte))}
.fz-win{fill:color-mix(in srgb,var(--carta) 12%,var(--notte))}
.fz-lit{fill:var(--luce)}
.fz-br{fill:var(--carta)}
.board{display:flex;flex-wrap:wrap;gap:var(--space-5);padding:var(--space-5);align-items:flex-start}
.fig{display:flex;flex-direction:column;gap:var(--space-2);margin:0}
.cap{font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.cap b{color:var(--ink);font-weight:500}
.lg-art{box-shadow:var(--shadow-sheet)}
.muted{color:var(--ink-muted)}
.kick{color:var(--luce-ink);margin:0}
mark.hl{background:var(--luce);color:var(--on-luce);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.br{position:relative}
.br::before,.br::after{content:"";position:absolute;width:var(--bl,40px);height:var(--bl,40px);border:0 solid currentColor;pointer-events:none}
.br::before{top:calc(var(--bo,18px) * -1);left:calc(var(--bo,18px) * -1);border-width:var(--bw,6px) 0 0 var(--bw,6px)}
.br::after{bottom:calc(var(--bo,18px) * -1);right:calc(var(--bo,18px) * -1);border-width:0 var(--bw,6px) var(--bw,6px) 0}
.spec{max-width:320px;font:400 14px/21px var(--font-sans);color:var(--ink-muted)}
.spec h4{margin:0 0 8px;font:600 16px/22px var(--font-sans);color:var(--ink)}
.spec ol,.spec ul{margin:0;padding-left:18px}
.spec li+li{margin-top:6px}
.spec code{font-family:var(--font-mono);font-size:13px;color:var(--ink)}

.hh{container:hh / inline-size;background:var(--surface);color:var(--ink);font-family:var(--font-sans);box-sizing:border-box;min-height:100%;display:flex;flex-direction:column}
.hh *{box-sizing:border-box}
.hh-stage{margin:0;border-width:0 0 2px 0}
.hh-grid{flex:1;display:grid;grid-template-columns:1fr}
.hh-copy{display:flex;flex-direction:column;padding:16px 20px 28px;min-width:0}
.hh-nav{display:flex;align-items:center;gap:8px;min-height:48px}
.hh-nav .sp{flex:1}
.hh-links{display:none;gap:4px}
.hh-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:500 15px/20px var(--font-sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.hh-links a:hover{text-decoration:underline;text-underline-offset:4px}
.hh-menu{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-12px;background:none;border:0;color:var(--ink)}
.hh-main{display:flex;flex-direction:column;gap:18px;padding-top:24px}
.hh-kick{font:500 12px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--luce-ink);margin:0}
.hh h1{margin:0;font:500 clamp(36px,5.4cqi,78px)/1.02 var(--font-serif);letter-spacing:-.02em;text-wrap:balance}
.hh h1 em{font-style:italic;font-weight:400}
.hh-sub{margin:0;font:400 17px/26px var(--font-sans);color:var(--ink-muted);max-width:560px}
.hh-sub b{color:var(--ink);font-weight:600}
.hh-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hh-ctas .lg-btn{flex:1 1 auto}
.hh-phase{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted);display:flex;gap:8px;align-items:flex-start}
.hh-phase::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:999px;background:var(--line-strong)}
.hh-steps{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none;font:500 13px/18px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.hh-steps b{color:var(--luce-ink);font-weight:500;margin-right:6px}
.hh-disc{margin-top:24px}
.hh-visual{position:relative;background:var(--notte);color:var(--ink);padding:16px 16px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.hh-fz{height:220px;position:relative;overflow:hidden}
.hh-fz .fz{position:absolute;inset:0}
.hh-fz--d{display:none}
.hh-cap{margin:0;font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.ms{container:ms / inline-size;background:var(--surface-raised);color:var(--ink);padding:16px 18px 12px;box-shadow:var(--shadow-sheet)}
.ms-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.ms-h span:last-child{color:var(--ink-muted)}
.ms-row{display:grid;grid-template-columns:96px 1fr auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.ms-l{font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.ms-v{font:400 15px/20px var(--font-mono)}
@container ms (max-width: 400px){.ms-row{grid-template-columns:1fr auto}.ms-v{grid-column:1 / -1;grid-row:2}}
@container hh (min-width: 600px){.hh-copy{padding:24px 40px 40px}.hh-ctas .lg-btn{flex:0 0 auto}.hh-fz{height:300px}.hh-visual{padding:24px 40px 28px}}
/* La nav in linea sta nella sola colonna testo (larghezza - 560px): sotto ~1300px i link finirebbero sotto il pannello visivo. */
@container hh (min-width: 1320px){.hh-links{display:flex}.hh-menu{display:none}}
@container hh (min-width: 960px){
 .hh-grid{grid-template-columns:minmax(0,1fr) 560px}
 .hh-copy{padding:32px 64px 44px 72px}
 .hh-main{margin:auto 0;padding-top:32px;gap:26px}
 .hh-steps{padding-right:40px} /* la scheda .ms sporge di 96px nella colonna testo (padding 64px) */
 .hh-kick{font-size:13px}
 .hh-sub{font-size:19px;line-height:30px}
 .hh-visual{padding:0;display:block}
 .hh-fz{position:absolute;inset:0;height:auto}
 .hh-fz--m{display:none}.hh-fz--d{display:block}
 .ms{position:absolute;left:-96px;bottom:72px;width:500px}
 .hh-cap{position:absolute;left:32px;bottom:28px}
}


/* LUGHE informational view staged within the existing Cloudflare Pages app. */
html{scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans)}
.skip{position:absolute;top:-100px;left:12px;z-index:999;padding:12px;background:var(--action);color:var(--on-action)}
.skip:focus{top:8px}
.preview-ribbon{background:var(--notte);color:var(--carta);padding:9px 16px;font:500 12px/18px var(--font-mono);text-align:center;letter-spacing:.04em}
.hh{min-height:min(860px,100svh)}.hh-nav{position:relative;z-index:20}
.hh-links.is-open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--surface-raised);box-shadow:var(--shadow-sheet);border:1px solid var(--line);padding:8px;z-index:30}
.hh-links.is-open a{width:100%}
.hh-links a:focus-visible,.hh-menu:focus-visible,.lg-btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.content{max-width:1160px;margin:0 auto;padding:96px 32px}
.section-alt{background:var(--surface-sunk)}
.section-dark{background:var(--notte);color:var(--carta)}
.content .eyebrow{font:500 13px/20px var(--font-mono);color:var(--luce-ink);text-transform:uppercase;letter-spacing:.09em}
.content h2{font:500 clamp(34px,5vw,56px)/1.1 var(--font-serif);margin:8px 0 18px;letter-spacing:-.02em}
.content p{font-size:18px;line-height:1.65;max-width:750px}
.content .intro{color:var(--ink-muted)}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:38px}
.info-card{background:var(--surface-raised);border:1px solid var(--line);padding:26px;min-width:0}
.info-card b.step{font:500 13px/1 var(--font-mono);color:var(--luce-ink)}
.info-card h3{font:500 25px/1.15 var(--font-serif);margin:24px 0 10px}
.info-card p{font:400 16px/1.55 var(--font-sans);margin:0;color:var(--ink-muted)}
.example-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start}
.example-info{background:var(--surface-raised);padding:28px;border:1px solid var(--line)}
.datapoints{padding:0;margin:20px 0;list-style:none}
.datapoints li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.datapoints span{font:500 12px/18px var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted)}
.datapoints strong{text-align:right;font:500 16px/22px var(--font-sans)}
.note{font:400 14px/1.55 var(--font-sans)!important;color:var(--ink-muted);max-width:760px!important}
.tag{font:500 11px/1.4 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;display:inline-block;padding:8px 10px;background:var(--luce-soft);color:var(--luce-ink)}
.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.status-item{padding:22px;border:1px solid var(--line);background:var(--surface-raised)}
.status-item h3{margin:20px 0 12px;font:500 23px/1.2 var(--font-serif)}
.status-item p{font:400 16px/1.5 var(--font-sans);margin:0;color:var(--ink-muted)}
.editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.78fr);gap:36px;align-items:center}
.editorial img{display:block;width:100%;height:auto;max-height:680px;object-fit:contain;box-shadow:var(--shadow-sheet)}
.faq{border-top:1px solid var(--line);max-width:850px;margin-top:32px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font:600 18px/1.45 var(--font-sans);cursor:pointer;min-height:44px}
.faq p{margin:12px 0 0;font-size:16px;max-width:800px;color:var(--ink-muted)}
.footer{background:var(--notte);color:var(--carta);padding:46px 32px}
.footer .wrap{max-width:1160px;margin:auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer p{font:400 14px/1.6 var(--font-sans);max-width:540px;color:#d3d6db}
.footer a{color:var(--carta)}
@media(max-width:1319px){.hh-links:not(.is-open){display:none}}
@media(min-width:1320px){.hh-links.is-open{position:static;display:flex;flex-direction:row;border:0;box-shadow:none;padding:0;background:none}}
@media(max-width:760px){.content{padding:65px 20px}.info-grid,.status-grid,.example-layout,.editorial{grid-template-columns:1fr}.editorial{gap:22px}.content p{font-size:16px}.footer{padding:40px 20px}.hh{min-height:auto}.hh-links.is-open{top:calc(100% + 8px)}}
@media(max-width:420px){.datapoints li{align-items:flex-start;flex-direction:column;gap:6px}.datapoints strong{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* CSP-safe replacements for original inline declarations */
.x-logo--compact{gap:6px}
.logo-light-dot{fill:var(--luce)}
.example-status-grid{display:grid;grid-template-columns:1fr;margin:0;gap:12px}