/* ZOKKU site stylesheet.
   Type: Cabinet Grotesk 400/500 for everything, Geist Mono for values that are numbers.
   Shape rule: colour fields and sections are square and full-bleed; buttons, chips and inputs use 8px;
   image frames and tiles use 12px; app icons use the kit icon radius (23 % of the side). Dark mode: only the house surfaces change (paper becomes night);
   product chapters keep their own colours in both modes. */

@font-face{font-family:"Cabinet Grotesk";src:url("../fonts/CabinetGrotesk-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("../fonts/CabinetGrotesk-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

:root{
  --zk-carta:#F6F6F5; --zk-inchiostro:#0A0A0A; --zk-grafite:#4A4A46; --zk-salvia:#D1DDD3; --zk-bosco:#2E4A33; --zk-notte:#121212;
  /* house roles (switch in dark mode) */
  --bg:var(--zk-carta); --fg:var(--zk-inchiostro); --fg-2:var(--zk-grafite); --tile:#EAEAE6; --tile-2:#E0E0DB;
  --house:var(--zk-salvia); --house-fg:var(--zk-inchiostro); --house-2:var(--zk-bosco);
  --font:"Cabinet Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --s-display:clamp(52px,8.6vw,136px); --s-head:clamp(32px,3.6vw,52px); --s-lead:clamp(20px,1.7vw,26px); --s-body:18px; --s-small:15px;
  --margine:clamp(16px,2.4vw,36px); --gap:clamp(12px,1.6vw,24px);
  --s-xs:14px;
  --r-s:8px; --r-m:12px; --r-icona:23%;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.76,0,.24,1); --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms; --t-hover:180ms; --t-ui:240ms;
  --testata-bg:var(--bg); --testata-ink:var(--fg);
  /* logo colours on house surfaces */
  --lg-ink:var(--fg); --lg-acc:currentColor;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121212; --fg:#F6F6F5; --fg-2:#BDBDB6; --tile:#1D1D1C; --tile-2:#262624; --house:#1E2A21; --house-fg:#E6EEE7; --house-2:#B9CDBD; color-scheme:dark}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--s-body)/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip;font-kerning:normal}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.02}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:2px}
.mono{font-family:var(--mono);font-size:.86em;letter-spacing:0;font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:absolute;left:12px;top:-60px;z-index:40;background:var(--fg);color:var(--bg);padding:12px 16px;font-weight:500;text-decoration:none;border-radius:var(--r-s)}
.salta:focus{top:12px}
.griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--margine);max-width:1680px;margin-inline:auto}
.wrap{padding-inline:var(--margine);max-width:1680px;margin-inline:auto}

/* Placeholders: decisions still open. Dashed outline so they cannot be missed; see the report for the list. */
.ph{outline:1.5px dashed currentColor;outline-offset:3px;border-radius:2px;padding-inline:2px}

/* ---------- Buttons: one filled type, the inverse of the field it sits on ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-s);background:var(--btn-bg,var(--fg));color:var(--btn-fg,var(--bg));font-weight:500;font-size:17px;white-space:nowrap;text-decoration:none;transition:transform var(--t-press) var(--ease-out),opacity var(--t-hover) ease}
.btn:active{transform:scale(.97)}
.btn-soon{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;cursor:not-allowed;gap:8px}
.btn-soon:active{transform:none}
.btn-soon .stato{font-weight:400}
.lnk{display:inline-flex;align-items:center;min-height:48px;font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.24em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.btn:not(.btn-soon):hover{opacity:.86}.lnk:hover{text-decoration-color:currentColor}}
.azioni{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.prezzo{font-size:var(--s-small)}

/* ---------- Header: takes field and ink of the chapter below it ---------- */
.testata{position:sticky;top:0;z-index:30;height:68px;background:var(--testata-bg);color:var(--testata-ink);transition:background-color 300ms ease,color 300ms ease;--btn-bg:var(--testata-ink);--btn-fg:var(--testata-bg)}
.testata .griglia{height:100%;align-items:center}
.marchio{grid-column:1 / span 3;display:inline-flex;align-items:center;min-height:44px;width:max-content;text-decoration:none}
.marchio svg{height:26px;width:auto}
.testata nav{grid-column:4 / span 6;display:flex;gap:clamp(14px,2vw,32px);justify-content:center;align-items:center}
.testata nav > a{font-size:16px;font-weight:500;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:2px;transition:text-decoration-color var(--t-hover) ease;cursor:pointer}
.testata nav > a[aria-current="page"]{text-decoration-color:currentColor}
@media (hover:hover) and (pointer:fine){.testata nav > a:hover{text-decoration-color:currentColor}}
.testata .azione{grid-column:10 / span 3;justify-self:end}
details > summary{list-style:none}
details > summary::-webkit-details-marker{display:none}
.pannello{position:absolute;left:50%;top:56px;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));background:var(--bg);color:var(--fg);border-radius:var(--r-m);padding:22px 24px 18px;box-shadow:0 24px 60px -24px rgba(10,10,10,.38),0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent);display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;--lg-ink:var(--fg)}
.pannello h2{font-size:14px;font-weight:500;color:var(--fg-2);letter-spacing:0;padding:0 10px 6px}
.pannello ul{display:grid;gap:2px}
.voce-plugin{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:var(--r-s);text-decoration:none;min-height:44px}
.voce-plugin svg{height:26px;width:auto;flex:none}
.voce-plugin span{font-size:14px;color:var(--fg-2);margin-left:auto;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.voce-plugin:hover{background:var(--tile)}}
.voce-plugin[aria-current="page"]{background:var(--tile)}
.menu-mobile{display:none;position:relative}
.menu-mobile summary{min-height:44px;display:inline-flex;align-items:center;font-weight:500;cursor:pointer;padding-inline:4px}
.menu-mobile .pannello{left:auto;right:calc(-1 * var(--margine) + 8px);transform:none;grid-template-columns:1fr;max-height:calc(100svh - 84px);overflow:auto}
.menu-mobile .pannello .extra{display:flex;gap:6px 20px;flex-wrap:wrap;padding:8px 10px 0;border-top:1px solid var(--tile-2);margin-top:6px}
@media (prefers-reduced-motion:no-preference){.menu-mobile[open] .pannello{animation:foglio-m 150ms var(--ease-out)}}
@keyframes foglio-m{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:1023px){
  .testata nav{display:none}
  .testata .griglia{display:flex;align-items:center;gap:12px}
  .marchio{margin-right:auto}
  .menu-mobile{display:block;order:3}
  .testata .azione{padding:0 16px;min-height:44px}
}
@media (max-width:380px){.marchio svg{height:22px}.testata .azione{padding:0 12px}}

/* ---------- Home: the payoff on paper, the eleven icons on sage ---------- */
.apertura{background:var(--bg);color:var(--fg);padding-block:clamp(40px,6vw,88px) clamp(40px,5vw,72px)}
.apertura .griglia{row-gap:28px;align-items:end}
.ap-titolo{grid-column:1 / span 8;font-size:var(--s-display);line-height:.98;letter-spacing:-.035em;padding-bottom:.04em}
.ap-lato{grid-column:9 / span 4;display:grid;gap:22px;justify-items:start;padding-bottom:.5em}
.ap-lato p{font-size:var(--s-lead);line-height:1.3;font-weight:500;max-width:24ch}
@media (max-width:700px){.ap-titolo,.ap-lato{grid-column:1 / -1}.ap-lato{padding-bottom:0}}

.scaffale{background:var(--house);color:var(--house-fg);padding-block:clamp(32px,4vw,56px) clamp(44px,5vw,72px);--btn-bg:var(--house-fg);--btn-fg:var(--house)}
.scaffale-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px}
.scaffale-testa h2{font-size:var(--s-head)}

/* App icons: a square tile in the chapter colour, the glyph in its ink (on glass, ink and accent), the name below.
   Tile and label are one link; the hit area is never under 44 px. */
.app-gruppi{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(24px,3.4vw,56px);row-gap:28px;margin-top:clamp(20px,2.4vw,32px)}
.app-gruppo-nome{font-size:var(--s-small);font-weight:500;letter-spacing:0;line-height:1.3;display:flex;gap:8px;align-items:baseline;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.app-gruppo-nome .mono{color:var(--house-2)}
.app-griglia{display:grid;grid-template-columns:repeat(var(--colonne),minmax(0,1fr));gap:20px clamp(12px,1.6vw,24px)}
.app-effects .app-griglia{--colonne:6}
.app-instruments .app-griglia{--colonne:5}
.app{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:start;gap:6px;text-decoration:none;color:inherit;border-radius:var(--r-m);padding:4px 2px 6px;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent}
.app-tessera{display:grid;place-items:center;width:100%;max-width:112px;aspect-ratio:1;border-radius:var(--r-icona);background:var(--campo);color:var(--inchiostro);--lg-ink:var(--inchiostro);--lg-acc:var(--glifo,var(--inchiostro));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--inchiostro) 14%,transparent)}
.app-tessera svg{width:60%;height:auto;overflow:visible}
.app-nome{font-size:var(--s-small);font-weight:500;line-height:1.2;margin-top:4px;color:color-mix(in srgb,var(--house-fg) 76%,var(--house))}
.app-ruolo{font-size:var(--s-xs);line-height:1.25;color:var(--house-2);text-align:center;text-wrap:balance}
.app:focus-visible{outline-offset:2px}
/* Hover and keyboard focus: the tile lifts, the glyph beats once, a halo in the chapter colour (the accent on
   glass) comes up behind it and the name takes full contrast. Only transform and opacity move. With reduced
   motion the halo and the name still change, nothing moves. A tap on a phone presses the tile. */
.app::before{content:"";position:absolute;z-index:-1;left:50%;top:4px;width:min(calc(100% - 4px),112px);aspect-ratio:1;border-radius:var(--r-icona);background:var(--alone,var(--campo));filter:blur(14px);opacity:0;transform:translateX(-50%) scale(.9);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out);pointer-events:none}
.app:focus-visible::before{opacity:.6}
.app:focus-visible .app-nome{color:var(--house-fg)}
@media (hover:hover) and (pointer:fine){.app:hover::before{opacity:.6}.app:hover .app-nome{color:var(--house-fg)}}
@media (prefers-reduced-motion:no-preference){
  .app-tessera,.app-tessera svg{transition:transform 220ms var(--ease-out)}
  .app:focus-visible .app-tessera{transform:translateY(-3px) scale(1.06)}
  .app:focus-visible::before{transform:translateX(-50%) translateY(-2px) scale(1.14)}
  .app:focus-visible .app-tessera svg{animation:battito 460ms var(--ease-soft) 40ms 1}
  @media (hover:hover) and (pointer:fine){
    .app:hover .app-tessera{transform:translateY(-3px) scale(1.06)}
    .app:hover::before{transform:translateX(-50%) translateY(-2px) scale(1.14)}
    .app:hover .app-tessera svg{animation:battito 460ms var(--ease-soft) 40ms 1}
  }
  .app:active .app-tessera{transform:scale(.96);transition-duration:150ms}
}
@keyframes battito{0%{transform:scale(1)}32%{transform:scale(1.16)}62%{transform:scale(.96)}100%{transform:scale(1)}}
@media (max-width:1100px){.app-gruppi{grid-template-columns:minmax(0,1fr)}.app-instruments .app-griglia{--colonne:6}}
@media (max-width:600px){
  .app-effects .app-griglia,.app-instruments .app-griglia{--colonne:4}
  .app-griglia{gap:16px 12px}
  .app-ruolo{display:none}
  .app-nome{font-size:var(--s-xs)}
}

/* Home, below the icons: three short blocks, one large and two stacked. */
.chi{background:var(--bg);color:var(--fg);padding-block:clamp(64px,8vw,120px)}
.chi .griglia{row-gap:40px}
.chi h2{font-size:var(--s-lead);line-height:1.2;letter-spacing:-.01em}
.chi p{margin-top:10px;color:var(--fg-2);max-width:44ch}
.chi .lnk{margin-top:6px}
.chi-uno{grid-column:1 / span 6;grid-row:1 / span 2}
.chi-uno h2{font-size:var(--s-head);line-height:1.05;letter-spacing:-.02em;max-width:14ch}
.chi-uno p{margin-top:18px;font-size:var(--s-lead);line-height:1.35;max-width:34ch}
.chi-due,.chi-tre{grid-column:8 / span 5;border-top:1px solid var(--tile-2);padding-top:20px}
@media (max-width:900px){.chi-uno,.chi-due,.chi-tre{grid-column:1 / -1;grid-row:auto}}

/* ---------- Plugins page: title and icon menu on sage, then a compact bar under the header ---------- */
html[data-page="products"]{scroll-padding-top:128px}
@media (prefers-reduced-motion:no-preference){html[data-page="products"]{scroll-behavior:smooth}}
.p-apertura{background:var(--house);color:var(--house-fg);padding-block:clamp(36px,5vw,72px) clamp(44px,5vw,72px)}
.pa-testa h1{font-size:var(--s-head);letter-spacing:-.025em}
.pa-testa p{margin-top:12px;font-size:var(--s-lead);line-height:1.35;max-width:46ch}
.p-apertura noscript p{margin-top:24px}

.barra-app{position:fixed;top:68px;left:0;right:0;z-index:29;background:var(--bg);color:var(--fg);box-shadow:0 1px 0 color-mix(in srgb,var(--fg) 12%,transparent);transform:translateY(-100%);visibility:hidden;transition:transform var(--t-ui) var(--ease-out),visibility 0s linear var(--t-ui)}
.barra-app.on{transform:none;visibility:visible;transition:transform var(--t-ui) var(--ease-out),visibility 0s}
.barra-dentro{display:flex;align-items:center;gap:16px;max-width:1680px;margin-inline:auto;padding-inline:var(--margine);height:60px}
.barra-ora{flex:0 0 auto;width:clamp(150px,16vw,240px);font-size:var(--s-small);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-scorri,.fila-scorri{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px}
.barra-app .barra-ora + .barra-scorri{margin-right:clamp(150px,16vw,240px)}
@media (max-width:1100px){.barra-ora{display:none}.barra-app .barra-ora + .barra-scorri{margin-right:0}}
.app-mini{padding:4px;width:44px;height:44px;place-items:center;gap:0}
.app-mini .app-tessera{width:36px}
.app-mini[aria-current] .app-tessera{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fg)}
.app-sep{flex:none;width:1px;height:28px;margin-inline:8px;background:color-mix(in srgb,var(--fg) 22%,transparent)}
.app-mini::before{width:36px;filter:blur(9px)}

/* Back to top: small, bottom right, only once the bar is showing. */
.su{position:fixed;right:var(--margine);bottom:20px;z-index:28;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-s);background:var(--fg);color:var(--bg);font-size:var(--s-small);font-weight:500;text-decoration:none;box-shadow:0 10px 30px -12px color-mix(in srgb,var(--zk-inchiostro) 60%,transparent);opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease-out),visibility 0s linear var(--t-ui)}
.su-freccia{margin-right:8px}
@media (max-width:760px){.su-freccia{margin-right:0}}
.su.on{opacity:1;transform:none;visibility:visible;transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease-out),visibility 0s}

/* Product pages: the same row of icons on paper above the head; the current one is ringed. */
.fila-app{background:var(--bg);color:var(--fg)}
.fila-dentro{display:flex;align-items:center;gap:16px;max-width:1680px;margin-inline:auto;padding-inline:var(--margine);min-height:64px}
.fila-tutti{flex:none;font-size:var(--s-small)}
.fila-scorri{justify-content:flex-end}

/* Phones: the rows scroll sideways and the icon at the centre snaps into place. */
@media (max-width:760px){
  .barra-dentro{padding-inline:0}
  .barra-scorri,.fila-scorri{justify-content:flex-start;align-self:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:calc(50% - 22px)}
  .barra-scorri::-webkit-scrollbar,.fila-scorri::-webkit-scrollbar{display:none}
  .barra-scorri li,.fila-scorri li{scroll-snap-align:center;flex:none;display:flex;align-items:center}
  .barra-scorri .app-sep,.fila-scorri .app-sep{scroll-snap-align:none;align-self:center}
  .fila-dentro{padding-inline:0;gap:0;min-height:60px}
  .fila-tutti{padding-inline:var(--margine) 12px;align-self:stretch;box-shadow:1px 0 0 color-mix(in srgb,var(--fg) 12%,transparent)}
  .su{bottom:16px;right:16px;width:44px;padding:0;justify-content:center}
  .su .su-testo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- Group band (Effects / Instruments) ---------- */
.gruppo{background:var(--bg);color:var(--fg);padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,64px)}
.gruppo h2{grid-column:1 / span 7;font-size:var(--s-head)}
.gruppo p{grid-column:1 / span 6;margin-top:14px;font-size:var(--s-lead);line-height:1.35;color:var(--fg-2);max-width:40ch}
.gruppo .nota-vecchi{grid-column:1 / span 6;margin-top:10px;font-size:14px;line-height:1.4;color:var(--fg-2)}
@media (max-width:900px){.gruppo h2,.gruppo p,.gruppo .nota-vecchi{grid-column:1 / -1;grid-row:auto}}

/* ---------- Chapters: one full field per plugin ---------- */
.capitolo{min-height:88svh;padding-block:clamp(56px,7vw,96px);background:var(--campo);color:var(--inchiostro);--btn-bg:var(--inchiostro);--btn-fg:var(--campo);--lg-ink:var(--inchiostro);--lg-acc:var(--inchiostro);max-width:none;padding-inline:max(var(--margine),calc((100vw - 1680px) / 2 + var(--margine)))}
.capitolo.vetro{--lg-acc:var(--glifo)}
.capitolo .riga-nome{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap}
.capitolo h2{line-height:0}
.capitolo h2 a{display:inline-block;text-decoration:none;border-radius:var(--r-s)}
.capitolo h2 svg{height:clamp(64px,9vw,140px);width:auto;margin-left:-.06em}
.capitolo .fatto{font-size:var(--s-lead);font-weight:500;padding-bottom:.4em}
.capitolo .foto{grid-column:1 / span 7;margin-top:44px;align-self:start;overflow:hidden;border-radius:var(--r-m)}
.capitolo .foto img{width:100%}
.capitolo .testo{grid-column:9 / span 4;margin-top:44px;align-self:start}
.capitolo .tag{font-size:var(--s-lead);line-height:1.25;font-weight:500;letter-spacing:-.01em;max-width:24ch}
.capitolo ul{margin-top:26px;display:grid;gap:12px}
.capitolo li{max-width:42ch;padding-left:20px;position:relative}
.capitolo li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:2px;background:currentColor}
.capitolo .azioni{margin-top:30px}
.var-b .testo{grid-column:1 / span 4;grid-row:2}
.var-b .foto{grid-column:6 / span 7;grid-row:2}
.var-c .foto{grid-column:2 / span 10}
.var-c .testo{grid-column:2 / span 10;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:start}
.var-c .testo ul{margin-top:0}
.var-c .testo .azioni{grid-column:2}
.vecchi{grid-column:1 / -1;margin-top:14px;font-size:14px;opacity:.86}
@media (max-width:900px){
  .var-b .testo,.var-b .foto{grid-row:auto}
  .var-c .testo{display:block}
  .var-c .testo ul{margin-top:26px}
  .capitolo{min-height:0}
  .capitolo .foto,.capitolo .testo{grid-column:1 / -1;margin-top:28px}
  .capitolo .riga-nome{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---------- Why: fixed output on the left, controls in the text ---------- */
.perche{background:var(--bg);color:var(--fg)}
.perche .griglia{align-items:start;padding-left:0}
.pe-titolo{grid-column:8 / span 5;grid-row:1;padding-top:88px;font-size:var(--s-head)}
.uscita{grid-column:1 / span 6;grid-row:1 / span 2;position:sticky;top:68px;height:calc(100svh - 68px);background:var(--u-campo,#12263A);color:var(--u-ink,#F4F7F9);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:32px;transition:background-color 300ms ease,color 300ms ease}
.cornice{width:min(100%,640px);aspect-ratio:var(--ar,1000/640);overflow:hidden;background:#141414;border-radius:var(--r-m)}
.cornice img{width:100%;height:100%;object-fit:cover;object-position:0 0;transform-origin:0 0;transition:transform var(--t-ui) var(--ease-out),opacity 200ms ease}
.leggenda{width:min(100%,640px);font-size:var(--s-small);font-weight:500;line-height:1.5;min-height:3em}
.colonna{grid-column:8 / span 5;grid-row:2;padding-bottom:18vh}
.blocco{min-height:46vh;padding-top:72px}
.blocco.primo{padding-top:36px}
.blocco h3{font-size:var(--s-lead);line-height:1.2;letter-spacing:-.01em}
.blocco p{margin-top:12px;max-width:44ch;color:var(--fg-2)}
.scelte{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px}
.scelte button{min-height:44px;padding:0 14px;border-radius:var(--r-s);background:var(--tile);font-weight:500;font-size:var(--s-small);transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.scelte button[aria-pressed="true"],.scelte button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.scelte button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.scelte button:hover:not([aria-pressed="true"]):not([aria-selected="true"]){background:var(--tile-2)}}
.cursore{margin-top:22px;display:flex;align-items:center;gap:16px}
.cursore input{flex:1;max-width:320px;accent-color:var(--fg);height:44px}
.cursore output{font-family:var(--mono);font-size:15px;min-width:6ch}
@media (max-width:900px){
  .perche .griglia{padding-left:var(--margine)}
  .pe-titolo{grid-column:1 / -1;grid-row:1;padding-top:64px;padding-bottom:20px}
  .uscita{grid-column:1 / -1;grid-row:2;top:68px;height:40svh;z-index:5;margin-inline:calc(-1 * var(--margine));padding:14px var(--margine)}
  .cornice{width:auto;height:calc(100% - 3.6em);max-width:100%}
  .leggenda{width:100%;min-height:0;font-size:14px}
  .colonna{grid-column:1 / -1;grid-row:3;padding-top:4px;padding-bottom:64px}
  .blocco{min-height:0;padding-top:44px}
}

/* ---------- Install: three tiles that grow ---------- */
.installa{background:var(--zk-notte);color:#F6F6F5;padding-block:clamp(88px,10vw,128px) clamp(72px,8vw,104px);--btn-bg:#F6F6F5;--btn-fg:var(--zk-notte)}
.crescono{align-items:end;row-gap:0}
.crescono h2{grid-column:1 / span 7;grid-row:1;align-self:start;font-size:var(--s-head)}
.passo{grid-row:1;align-self:end}
.riquadro{display:flex;align-items:center;justify-content:center;padding:6%;border-radius:var(--r-m)}
.riquadro img{max-height:100%;width:auto;max-width:100%;border-radius:4px}
.p-a{grid-column:1 / span 3}.p-a .riquadro{height:30vh;background:var(--zk-carta)}
.p-b{grid-column:4 / span 4}.p-b .riquadro{height:44vh;background:var(--zk-salvia)}
.p-c{grid-column:8 / span 5}.p-c .riquadro{height:60vh;background:#2A2A28}
.didascalia{grid-row:2;padding-top:20px}
.didascalia h3{font-size:var(--s-lead);line-height:1.2}
.didascalia p{margin-top:6px;max-width:38ch;color:#CFCFCA}
.d-a{grid-column:1 / span 3}.d-b{grid-column:4 / span 4}.d-c{grid-column:8 / span 5}
.inst-azioni{grid-column:1 / -1;grid-row:3;margin-top:56px}
@media (max-width:900px){
  .crescono h2{grid-column:1 / -1;grid-row:auto;margin-bottom:28px}
  .passo,.didascalia{grid-column:1 / -1!important;grid-row:auto}
  .p-a .riquadro{height:40vw}.p-b .riquadro{height:52vw}.p-c .riquadro{height:64vw}
  .didascalia{padding:14px 0 30px}
  .inst-azioni{grid-column:1 / -1;grid-row:auto}
}

/* ---------- Footer: the action as a line of the title ---------- */
.piede{background:var(--house);color:var(--house-fg);min-height:78svh;display:flex;flex-direction:column;padding-block:44px 28px;--btn-bg:var(--house-fg);--btn-fg:var(--house)}
.piede > .griglia{width:100%}
.piede .alto{align-items:start;row-gap:28px}
.piede .note{grid-column:1 / span 5;font-size:var(--s-small);line-height:1.6}
.piede .note svg{height:30px;width:auto;margin-bottom:14px}
.piede .link-piede{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px;font-size:var(--s-small)}
.piede .link-piede h2{font-size:14px;font-weight:500;letter-spacing:0;opacity:.8;margin-bottom:6px}
.piede .link-piede a{display:inline-flex;min-height:36px;align-items:center;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.22em}
@media (hover:hover) and (pointer:fine){.piede .link-piede a:hover{text-decoration-color:currentColor}}
.piede .basso{margin-top:auto;padding-top:64px}
.piede .grande{grid-column:1 / -1;font-size:var(--s-display);font-weight:500;letter-spacing:-.035em;line-height:1;display:inline-block;width:max-content;max-width:100%;padding-bottom:.06em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.05em;text-underline-offset:.1em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.piede .grande:hover{text-decoration-color:currentColor}}
.piede .meta{grid-column:1 / -1;margin-top:26px;display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;font-size:14px}
@media (max-width:900px){.piede .note,.piede .link-piede{grid-column:1 / -1}}
@media (max-width:560px){.piede .link-piede{grid-template-columns:1fr 1fr}.piede .link-piede > div:last-child{grid-column:1 / -1}.piede .meta{flex-direction:column}}

/* ---------- Product page ---------- */
.p-testa{background:var(--campo);color:var(--inchiostro);--btn-bg:var(--inchiostro);--btn-fg:var(--campo);--lg-ink:var(--inchiostro);--lg-acc:var(--inchiostro);padding-block:clamp(36px,5vw,64px) clamp(48px,6vw,80px)}
.p-testa.vetro{--lg-acc:var(--glifo)}
.p-testa .griglia{align-items:center;row-gap:32px}
.p-testa .sx{grid-column:1 / span 5}
.p-testa h1{line-height:0}
.p-testa h1 svg{height:clamp(60px,7vw,112px);width:auto;margin-left:-.06em}
.p-testa .ruolo{margin-top:18px;font-size:var(--s-small);font-weight:500}
.p-testa .tag{margin-top:14px;font-size:clamp(24px,2.3vw,34px);line-height:1.15;font-weight:500;letter-spacing:-.015em;max-width:20ch}
.p-testa .azioni{margin-top:30px}
.p-testa .prezzo{margin-top:16px}
.p-testa .dx{grid-column:6 / span 7}
.p-testa .dx img{width:100%;border-radius:var(--r-m)}
.p-testa .vecchi{margin-top:10px}
@media (max-width:900px){.p-testa .sx,.p-testa .dx{grid-column:1 / -1}}

.p-sezione{padding-block:clamp(72px,9vw,128px) 0}
.p-sezione h2{font-size:var(--s-head)}
.sommario{grid-column:1 / span 7;font-size:clamp(22px,2vw,30px);line-height:1.3;font-weight:500;letter-spacing:-.01em;max-width:34ch}
.dati{grid-column:9 / span 4;display:grid;gap:18px;align-self:start}
.dati div{display:grid;gap:2px}
.dati dt{font-size:14px;color:var(--fg-2)}
.dati dd{font-size:16px;font-weight:500}
@media (max-width:900px){.sommario,.dati{grid-column:1 / -1}.dati{margin-top:36px;grid-template-columns:1fr 1fr;gap:18px 24px}}
@media (max-width:480px){.dati{grid-template-columns:1fr}}

/* How it works: real crops of the interface (2x files, shown at most at their 1x size).
   seg-full: image across the page, title and text in a row below. seg-wide: image 8 columns, text 4 (inv swaps
   the sides). seg-half: two side by side; subgrid rows keep the two tiles the same height. */
.segmenti{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(44px,5vw,80px);margin-top:44px}
.seg{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;row-gap:20px;align-items:center}
.seg .tavola{border-radius:var(--r-m);background:var(--tile);display:flex;align-items:center;justify-content:center;padding:clamp(16px,2.6vw,40px);min-width:0}
.seg .tavola img{width:100%;height:auto;border-radius:6px}
.seg h3{font-size:var(--s-lead);line-height:1.2;display:flex;align-items:baseline;gap:12px}
.seg-n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:2.6em;height:1.75em;padding:0 .5em;border-radius:6px;background:var(--campo);color:var(--inchiostro);font-size:14px;font-weight:500;transform:translateY(-2px)}
.seg p{margin-top:10px;color:var(--fg-2);max-width:46ch;text-wrap:pretty}
.seg-full .tavola{grid-column:1 / -1}
.seg-full .seg-testo{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline}
.seg-full .seg-testo h3{grid-column:1 / span 4}
.seg-full .seg-testo p{grid-column:5 / span 7;margin-top:0;max-width:60ch}
.seg-wide .tavola{grid-column:1 / span 8;grid-row:1}
.seg-wide .seg-testo{grid-column:9 / span 4;grid-row:1}
.seg-wide.inv .tavola{grid-column:5 / span 8}
.seg-wide.inv .seg-testo{grid-column:1 / span 4}
.seg-half{grid-column:span 6;grid-row:span 2;grid-template-rows:subgrid;align-items:stretch}
.seg-half .tavola{grid-column:1 / -1}
.seg-half .seg-testo{grid-column:1 / -1;align-self:start}
@media (max-width:900px){
  .segmenti{row-gap:48px;margin-top:32px}
  .seg,.seg-half{grid-column:1 / -1;grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .seg-full .seg-testo{display:block}
  .seg-full .seg-testo p{margin-top:10px}
  .seg .tavola{padding:14px}
  .seg.striscia .tavola{padding:12px 8px}
  .preset-griglia li{min-height:0}
}

/* Specs: three blocks of label and value, no rules between the lines. */
.spec-blocchi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:12px;margin-top:36px;align-items:start}
.spec-blocco{background:var(--tile);border-radius:var(--r-m);padding:24px 24px 26px}
.spec-blocco h3{font-size:var(--s-lead);line-height:1.2;padding-bottom:4px}
.spec-blocco dl{display:grid;gap:16px;margin-top:16px}
.spec-blocco dt{font-size:14px;font-weight:500;color:var(--fg-2)}
.spec-blocco dd{margin-top:3px;font-size:16px;line-height:1.45;overflow-wrap:anywhere;text-wrap:pretty}
.nota-spec{margin-top:18px;max-width:80ch;font-size:14px;line-height:1.5;color:var(--fg-2)}

.misure{background:var(--campo);color:var(--inchiostro);margin-top:clamp(72px,9vw,128px);padding-block:clamp(64px,8vw,104px)}
.misure .scelte button{background:color-mix(in srgb,var(--inchiostro) 12%,transparent);color:var(--inchiostro)}
.misure .scelte button[aria-selected="true"]{background:var(--inchiostro);color:var(--campo)}
@media (hover:hover) and (pointer:fine){.misure .scelte button:hover:not([aria-selected="true"]){background:color-mix(in srgb,var(--inchiostro) 20%,transparent)}}
.misure .intesta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px 32px}
.misure p.riga{margin-top:12px;max-width:52ch}
.misure .vista{margin-top:36px}
.misure .vista img{border-radius:var(--r-m);width:100%;max-width:var(--vw,1000px);transition:max-width 420ms var(--ease-out),opacity 200ms ease}
.misure .vista p{margin-top:14px;font-size:var(--s-small)}

.preset-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px;margin-top:36px}
.preset-griglia li{background:var(--tile);border-radius:var(--r-m);padding:18px 20px 20px;display:grid;gap:6px;align-content:start;min-height:120px}
.preset-griglia b{font-weight:500;font-size:18px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.preset-griglia .mono{color:var(--fg-2)}
.preset-griglia i{font-style:normal;color:var(--fg-2);font-size:var(--s-small)}
.preset-pillole{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;max-width:980px}
.preset-pillole li{background:var(--tile);border-radius:var(--r-s);padding:10px 16px;display:flex;gap:10px;align-items:baseline;min-height:44px}
.preset-pillole b{font-weight:500}
.preset-pillole i{font-style:normal;color:var(--fg-2);font-size:var(--s-small)}
@media (max-width:900px){.preset-griglia li{min-height:0}}
.p-sezione .riga{margin-top:12px;max-width:60ch;color:var(--fg-2);font-size:var(--s-lead);line-height:1.35}

.banda{background:var(--campo);color:var(--inchiostro);--btn-bg:var(--inchiostro);--btn-fg:var(--campo);--lg-ink:var(--inchiostro);--lg-acc:var(--inchiostro);margin-top:clamp(72px,9vw,128px);padding-block:clamp(64px,8vw,112px)}
.banda.vetro{--lg-acc:var(--glifo)}
.banda h2{font-size:var(--s-head);max-width:18ch}
.banda .azioni{margin-top:30px}
.banda .prezzo{margin-top:16px}
.prossimo{margin-top:56px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:var(--s-small)}
.prossimo a{display:inline-flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;font-weight:500}
.prossimo svg{height:30px;width:auto}

/* ---------- Service pages ---------- */
.s-testa{padding-block:clamp(56px,8vw,112px) clamp(40px,5vw,64px)}
.s-testa h1{font-size:var(--s-display);letter-spacing:-.035em;line-height:.98}
.s-testa p{margin-top:22px;font-size:var(--s-lead);line-height:1.35;max-width:46ch;color:var(--fg-2)}
.s-testa .azioni{margin-top:28px}
.hub{background:var(--house);color:var(--house-fg);--btn-bg:var(--house-fg);--btn-fg:var(--house);padding-block:clamp(64px,8vw,112px)}
.hub .griglia{row-gap:36px}
.hub .icona{grid-column:1 / span 4;color:var(--house-fg)}
.hub .icona svg{width:min(100%,280px);height:auto}
.hub .corpo{grid-column:6 / span 7}
.hub h2{font-size:var(--s-head)}
.hub .corpo > p{margin-top:16px;font-size:var(--s-lead);line-height:1.35;max-width:40ch}
.hub ul.punti{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}
.hub ul.punti li b{display:block;font-weight:500}
.hub ul.punti li span{display:block;margin-top:4px;font-size:var(--s-small);line-height:1.45}
.hub .azioni{margin-top:34px}
.hub .corpo > p.hub-ver{margin-top:12px;font-size:var(--s-small);line-height:1.45}
@media (max-width:900px){.hub .icona,.hub .corpo{grid-column:1 / -1}.hub .icona svg{width:140px}}
@media (max-width:560px){.hub ul.punti{grid-template-columns:1fr}}

.installer{padding-block:clamp(72px,9vw,120px) 0}
.installer h2{font-size:var(--s-head)}
.installer > .wrap > p{margin-top:12px;color:var(--fg-2);max-width:56ch;font-size:var(--s-lead);line-height:1.35}
.installer h3{margin-top:44px;font-size:var(--s-lead)}
.tessere{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:10px;--lg-ink:var(--fg)}
.tessera{background:var(--tile);border-radius:var(--r-m);padding:18px 18px 16px 20px;display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center}
.tessera a.nome{text-decoration:none;display:inline-flex;min-height:44px;align-items:center;border-radius:var(--r-s)}
.tessera svg{height:30px;width:auto}
.tessera .info{grid-column:1 / -1;font-size:14px;color:var(--fg-2);display:flex;gap:4px 14px;flex-wrap:wrap}
.tessera .btn{min-height:40px;padding:0 14px;font-size:15px}

.requisiti{padding-block:clamp(72px,9vw,120px)}
.requisiti .griglia{row-gap:32px}
.requisiti h2{grid-column:1 / span 4;font-size:var(--s-head)}
.requisiti dl{grid-column:6 / span 7;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px 28px}
.requisiti dt{font-weight:500}
.requisiti dd{color:var(--fg-2)}
.requisiti code{font-family:var(--mono);font-size:.86em;background:var(--tile);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
@media (max-width:900px){.requisiti h2,.requisiti dl{grid-column:1 / -1}}
@media (max-width:560px){.requisiti dl{grid-template-columns:1fr;gap:4px}.requisiti dd{margin-bottom:14px}}

.faq{padding-bottom:clamp(72px,9vw,128px)}
.faq .griglia{row-gap:0}
.faq-gruppo{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:clamp(40px,5vw,64px)}
.faq-gruppo h2{grid-column:1 / span 3;font-size:var(--s-lead);padding-top:14px}
.faq-gruppo .domande{grid-column:5 / span 8}
.faq details{border-radius:var(--r-m);background:var(--tile);margin-bottom:8px}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:60px;padding:14px 20px;font-weight:500;font-size:var(--s-body);cursor:pointer;border-radius:var(--r-m)}
.faq summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-ui) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .risposta{padding:0 20px 20px;color:var(--fg-2);max-width:64ch;display:grid;gap:10px}
.faq .risposta a{color:var(--fg)}
@media (max-width:900px){.faq-gruppo h2,.faq-gruppo .domande{grid-column:1 / -1}.faq-gruppo h2{padding-bottom:12px}}

.legale{padding-bottom:clamp(72px,9vw,128px)}
.legale section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:clamp(40px,5vw,64px)}
.legale h2{grid-column:1 / span 3;font-size:var(--s-lead)}
.legale .corpo{grid-column:5 / span 7;display:grid;gap:14px;max-width:68ch}
.legale .corpo p,.legale .corpo li{color:var(--fg-2)}
.legale .corpo ul{display:grid;gap:8px;padding-left:20px;list-style:disc}
.legale .corpo b{color:var(--fg);font-weight:500}
@media (max-width:900px){.legale h2,.legale .corpo{grid-column:1 / -1}.legale h2{margin-bottom:12px}}

/* 404: the payoff idea on two fields, paper above and sage below. */
.nf-su{background:var(--bg);color:var(--fg);padding-block:clamp(72px,10vw,140px) clamp(40px,5vw,64px)}
.nf-su h1{font-size:var(--s-display);letter-spacing:-.035em;line-height:.98;max-width:11ch}
.nf-su p{margin-top:22px;font-size:var(--s-lead);line-height:1.35;color:var(--fg-2);max-width:40ch}
.nf-giu{background:var(--house);color:var(--house-fg);--btn-bg:var(--house-fg);--btn-fg:var(--house);padding-block:clamp(40px,5vw,64px) clamp(72px,9vw,120px)}
.nf-giu p{font-size:var(--s-lead);line-height:1.35;font-weight:500;max-width:40ch}
.nf-giu .azioni{margin-top:24px}

/* Plain footer for service pages reuses .piede. */

/* ---------- Motion: moderate, each move tied to a reason ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .ap-titolo{opacity:0;transform:translateY(22px);animation:sali 900ms var(--ease-out) 80ms forwards}
  .js .ap-lato{opacity:0;transform:translateY(16px);animation:sali 800ms var(--ease-out) 320ms forwards}
  .js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .capitolo .foto{clip-path:inset(0 100% 0 0 round 12px);transition:clip-path 1100ms var(--ease-in-out)}
  .js .capitolo .foto.is-in{clip-path:inset(0 0 0 0 round 12px)}
  .js .capitolo .foto img{transform:scale(1.06);transition:transform 1500ms var(--ease-soft)}
  .js .capitolo .foto.is-in img{transform:none}
}
@keyframes sali{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}