/* 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,video{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
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. The legal pages keep the dashed outline (text still to be written);
   price, release date and the like say "To be announced" with the status chip below. */
.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)}
/* The ring takes the button's fill: currentColor would be the field colour and vanish into it. */
.btn:focus-visible{outline-color:var(--btn-bg,var(--fg))}
/* Status chip (Coming soon, To be announced): a label, not a control, so it never looks pressable. */
.presto{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 10px;border-radius:var(--r-s);font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap;background:color-mix(in srgb,currentColor 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
.presto::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.annuncio{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--s-small);font-weight:500}
.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:hover{opacity:.86}.lnk:hover{text-decoration-color:currentColor}}
.azioni{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}

/* ---------- 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{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);color:var(--fg);padding-block:clamp(40px,6vw,88px) clamp(40px,5vw,72px)}
/* Behind the title: the featured plugins' windows (js/home.js). The layer is never more than 22 % opaque, so the
   text always sits on at least 78 % of the page colour: contrast stays above 4.5:1 in light and dark mode. The mask
   keeps it fainter still behind the title, on the left. */
.ap-sfondo{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(105deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.55) 40%,#000 75%);mask-image:linear-gradient(105deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.55) 40%,#000 75%)}
.ap-strato{position:absolute;inset:0;opacity:0;transition:opacity 1600ms ease}
.ap-strato > img,.ap-strato > video{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 35%;transform:scale(1.08)}
.ap-strato.attivo{opacity:.22}
.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}
/* Featured plugins: a quiet word under the role, in the same green. */
.app-evidenza{font-size:var(--s-xs);line-height:1.25;font-weight:500;color:var(--house-2)}
.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,.app[aria-expanded="true"]::before{opacity:.6}
.app:focus-visible .app-nome,.app[aria-expanded="true"] .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,.app[aria-expanded="true"] .app-tessera{transform:translateY(-3px) scale(1.06)}
  .app:focus-visible::before,.app[aria-expanded="true"]::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:1}
  .app-griglia{gap:4px}
  .app{grid-template-columns:56px minmax(0,1fr) auto;grid-template-rows:auto auto;justify-items:start;align-content:center;column-gap:14px;row-gap:2px;padding:6px 4px;text-align:left}
  .app-tessera{grid-row:1 / span 2;align-self:center}
  .app-nome{grid-column:2;align-self:end;margin-top:0;font-size:var(--s-body)}
  .app-ruolo{grid-column:2;align-self:start;text-align:left}
  .app-evidenza{grid-column:3;grid-row:1 / span 2;align-self:center}
  .app::before{left:32px;top:6px;width:56px}
}

/* Home preview panel (js/home.js): always open under the grid, rotating through the plugins. Fixed height; the two
   sheets crossfade, so switching never moves the page. */
.anteprima{--ant-h:clamp(326px,27vw,368px);margin-top:clamp(20px,2.4vw,32px);height:var(--ant-h);background:var(--bg);color:var(--fg);border-radius:var(--r-m);--btn-bg:var(--fg);--btn-fg:var(--bg);--lg-ink:var(--fg);box-shadow:0 22px 50px -30px rgba(10,10,10,.45);opacity:0;transition:opacity 200ms var(--ease-out),transform 280ms var(--ease-out)}
.anteprima.aperto{opacity:1}
.anteprima{position:relative}
.ant-pausa{position:absolute;z-index:2;top:12px;right:12px;min-height:44px;min-width:44px;padding:0 14px;border-radius:var(--r-s);font-size:14px;font-weight:500;color:var(--fg-2);background:var(--bg);box-shadow:inset 0 0 0 1px var(--tile-2)}
@media (hover:hover) and (pointer:fine){.ant-pausa:hover{color:var(--fg)}}
.ant-pausa:focus-visible{outline-color:var(--fg)}
.ant-fogli{display:grid;height:100%}
.ant-foglio{grid-area:1 / 1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:clamp(16px,2.4vw,40px);padding:12px;opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 0s linear 220ms}
.ant-foglio.attivo{opacity:1;visibility:visible;transition:opacity 220ms ease 40ms,visibility 0s}
.ant-quadro{min-height:0;border-radius:8px;background:var(--campo);display:flex;align-items:center;justify-content:center;padding:clamp(14px,2vw,28px);overflow:hidden}
.ant-quadro img,.ant-quadro video{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:6px}
.ant-testo{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(4px,1vw,14px) clamp(4px,1vw,16px) 4px 0}
.ant-testo > *{flex-shrink:0}
.ant-nome{line-height:0}
.ant-nome svg{height:clamp(34px,3vw,46px);width:auto;margin-left:-.04em}
.ant-ruolo{margin-top:10px;font-size:var(--s-lead);line-height:1.2;font-weight:500;letter-spacing:-.01em}
.ant-tag{margin-top:10px;color:var(--fg-2);max-width:40ch;display:none;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ant-dati{margin-top:auto;padding-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 32px;width:100%}
.ant-dati dt{font-size:14px;font-weight:500;color:var(--fg-2)}
.ant-dati dd{margin-top:2px;font-size:16px;line-height:1.4}
.ant-chiave{grid-column:1 / -1}
.ant-chiave dd{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-width:52ch}
.ant-vai{margin-top:18px;gap:12px}
.ant-vai:focus-visible{outline-color:var(--fg)}
@media (prefers-reduced-motion:no-preference){
  .anteprima{transform:translateY(10px)}
  .anteprima.aperto{transform:none}
}
/* The tagline only where the panel is tall enough for it (wide screens). */
@media (min-width:1280px){.anteprima{--ant-h:392px}.ant-tag{display:-webkit-box}}
@media (max-width:640px){
  .anteprima{--ant-h:494px}
  .ant-foglio{grid-template-columns:minmax(0,1fr);grid-template-rows:196px minmax(0,1fr);gap:14px;padding:10px}
  .ant-quadro{padding:12px}
  .ant-testo{padding:0 6px 4px}
  .ant-nome svg{height:30px}
  .ant-ruolo{margin-top:6px;font-size:18px}
  .ant-tag{display:none}
  .ant-dati{padding-top:12px;gap:10px 24px}
  .ant-dati dd{font-size:15px}
  .ant-vai{margin-top:14px;align-self:stretch}
  .ant-pausa{top:216px;right:10px}
}

/* 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}
/* Filled by js/products.js; empty, it holds a screen so #perche does not paint in the first view and jump. */
#catalogo:empty{min-height:100svh}

.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;flex-wrap:wrap}
  .fila-scorri{flex:1 0 100%;min-height:56px}
  .fila-tutti{flex:1 0 100%;padding-inline:var(--margine);min-height:44px;box-shadow:0 1px 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}
@media (max-width:900px){.gruppo h2,.gruppo p{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,.capitolo .foto video{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}
@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 and play: the three steps drive a small working copy of ZOKKU Hub (js/install-play.js).
   Inside the window the Hub keeps its own design (39-hub-demo/v12-combo): light window, dark panel, pill buttons and chips. ---------- */
.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)}
.ip{row-gap:44px;align-items:start}
.ip-testo{grid-column:1 / span 4;grid-row:1}
.ip-demo{grid-column:5 / span 8;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:0}
.ip h2{font-size:var(--s-head)}
.ip-intro{margin-top:16px;max-width:34ch;color:#CFCFCA}
.ip-passi{margin-top:36px;display:grid}
.ip-passi li{padding-bottom:20px}
.ip-passi h3{position:relative;padding-top:16px;border-top:1px solid rgba(246,246,245,.18);font-size:var(--s-lead);line-height:1.2}
.ip-passi p{margin-top:6px;max-width:36ch;color:#CFCFCA;font-size:16px}
.ip-passo{display:block;width:100%;min-height:44px;text-align:left;font-weight:500;line-height:inherit;transition:color var(--t-hover) ease}
.ip-tempo{position:absolute;left:0;right:0;top:-1px;height:2px;background:#F6F6F5;transform:scaleX(0);transform-origin:left;pointer-events:none}
.ip-pronto li:not([data-on]) .ip-passo,.ip-pronto li:not([data-on]) p{color:#8E8E88}
@media (hover:hover) and (pointer:fine){.ip-pronto li:not([data-on]) .ip-passo:hover{color:#F6F6F5}}
.inst-azioni{grid-column:1 / span 4;grid-row:2;align-self:end}
.ip-pausa{min-height:44px;min-width:44px;padding:0 16px;border-radius:var(--r-s);font-size:15px;font-weight:500;color:#CFCFCA;box-shadow:inset 0 0 0 1px rgba(246,246,245,.24);transition:color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.ip-pausa:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ip-pausa:hover{color:#F6F6F5}}

.hub-fin{--h-bg:#F6F6F5;--h-bg2:#EDEDEB;--h-line:#DADAD6;--h-t:#0A0A0A;--h-t2:#4A4A46;--h-glass:#161616;--h-gline:#2C2C2C;--h-gt:#F2F2F0;--h-gt2:#ADADA8;
  --h-ease:cubic-bezier(.23,1,.32,1);width:100%;background:var(--h-bg);color:var(--h-t);border-radius:10px;overflow:hidden;font-size:14px;line-height:1.4;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 28px 70px -24px rgba(0,0,0,.9)}
.hub-fin ::selection{background:var(--zk-salvia);color:var(--zk-inchiostro)}
.hub-fin :focus-visible{outline:2px solid var(--zk-bosco);outline-offset:2px;border-radius:8px}
.hub-fin .hf-pannello :focus-visible{outline-color:#BFD6C4}
.hf-barra{height:32px;display:flex;align-items:center;gap:8px;padding-left:12px;font-size:12px;color:var(--h-t2);user-select:none}
.hf-barra svg{width:14px;height:14px;flex:none}
.hf-anteprima{margin-right:auto;padding:2px 8px;border-radius:999px;font-weight:500;color:var(--zk-bosco);background:var(--zk-salvia)}
.hf-barra i{width:40px;height:100%;position:relative;flex:none}
.hf-barra i::before,.hf-barra i::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.hf-barra i:nth-of-type(1)::before{width:10px;height:1px;transform:translate(-50%,0)}
.hf-barra i:nth-of-type(2)::before{width:9px;height:9px;background:none;border:1px solid currentColor;transform:translate(-50%,-50%)}
.hf-barra i:nth-of-type(3)::before,.hf-barra i:nth-of-type(3)::after{width:12px;height:1px;transform:translate(-50%,0) rotate(45deg)}
.hf-barra i:nth-of-type(3)::after{transform:translate(-50%,0) rotate(-45deg)}
.hf-testa{display:flex;align-items:center;gap:16px;padding:4px 16px 12px}
.hf-marchio{display:inline-flex;align-items:center;gap:6px;color:var(--h-t);font-size:14px}
.hf-marchio svg{height:20px;width:auto}
.hf-marchio span{color:var(--h-t2);margin-top:2px}
.hf-schede{margin-left:auto;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--h-bg2);box-shadow:inset 0 0 0 1px var(--h-line);font-size:13px;color:var(--h-t2)}
.hf-schede > *{padding:5px 12px;border-radius:999px;font-weight:500}
.hf-schede b{background:var(--h-t);color:#fff}
.hf-corpo{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.2fr);gap:12px;height:440px;padding:0 12px 12px}
.hf-lista{min-width:0;display:flex;flex-direction:column;gap:8px}
.hf-tit{font-size:17px;font-weight:500;padding:0 4px}
.hf-righe{display:flex;flex-direction:column;gap:4px}
.hf-riga{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:56px;padding:8px 10px;border-radius:10px;text-align:left;transition:background-color 160ms ease,box-shadow 160ms ease,transform 140ms var(--h-ease)}
.hf-riga[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 1px var(--h-line),0 1px 2px rgba(20,20,18,.06)}
.hf-riga[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:1px;background:var(--acc)}
@media (hover:hover) and (pointer:fine){.hf-riga:hover:not([aria-pressed="true"]){background:#EFEFED}}
.hf-riga:active{transform:scale(.985)}
.hf-gl{display:block;width:32px;height:32px}
.hf-gl svg{width:100%;height:100%;overflow:visible}
.hf-nm{display:flex;flex-direction:column;font-size:15px;font-weight:500;line-height:1.2;min-width:0}
.hf-nm small{font-size:13px;font-weight:400;color:var(--h-t2)}
.hf-chip{display:inline-flex;align-items:center;justify-self:end;white-space:nowrap;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.2;color:var(--h-t2);box-shadow:inset 0 0 0 1px var(--h-line)}
.hf-chip[data-s="busy"]{color:var(--h-t);background:var(--h-bg2)}
.hf-chip[data-s="ok"]{color:var(--zk-bosco);background:var(--zk-salvia);box-shadow:none}
.hf-pannello{min-width:0;display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:14px;background:var(--h-glass);color:var(--h-gt);overflow:hidden}
.hf-p-top{display:flex;align-items:center;gap:12px}
.hf-p-top .hf-gl{width:40px;height:40px;flex:none}
.hf-p-nomi{min-width:0;flex:1}
.hf-p-nome{font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.05}
.hf-p-ruolo{font-size:13px;color:var(--h-gt2)}
.hf-p-linea{max-width:44ch;font-size:15px;line-height:1.4;color:var(--h-gt)}
.hf-pannello .hf-chip{color:var(--h-gt2);box-shadow:inset 0 0 0 1px var(--h-gline)}
.hf-pannello .hf-chip[data-s="busy"]{color:var(--h-gt);background:#262626}
.hf-pannello .hf-chip[data-s="ok"]{color:#BFD6C4;background:#22362A}
.hf-formati{margin:0;padding:0;border:0;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.hf-formati legend{float:left;width:100%;margin-bottom:6px;padding:0;font-size:12px;color:var(--h-gt2)}
.hf-formati label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--h-gline);font-size:13px;cursor:pointer}
.hf-formati label:has(:checked){box-shadow:inset 0 0 0 1px #5A5A55}
.hf-formati input{width:16px;height:16px;margin:0;accent-color:var(--h-gt);cursor:inherit}
.hf-formati .hf-off{color:#8C8C87;cursor:not-allowed}
.hf-licenza{font-size:13px;color:var(--h-gt2)}
.hf-azione{min-height:44px;display:flex;align-items:center}
.hf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--h-gt);color:var(--h-t);font-size:15px;font-weight:500;white-space:nowrap;transition:transform 140ms var(--h-ease),opacity 160ms ease}
.hf-btn:active{transform:scale(.97)}
.hf-btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){.hf-btn:not(:disabled):hover{opacity:.88}}
.hf-prog{flex:1;display:flex;align-items:center;gap:12px}
.hf-prog[hidden]{display:none}
.hf-traccia{flex:1;height:5px;border-radius:3px;background:rgba(242,242,240,.12);overflow:hidden}
.hf-traccia i{display:block;height:100%;background:var(--acc-d,var(--h-gt));transform:scaleX(0);transform-origin:left}
.hf-pct{min-width:4ch;text-align:right;font-size:12px;color:var(--h-gt2)}
.hf-cartelle{display:grid;gap:6px;font-size:12px;color:var(--h-gt2)}
.hf-cartelle li{display:flex;align-items:center;gap:8px}
.hf-cartelle li::before{content:"";flex:none;width:8px;height:4px;margin:-3px 2px 0;border:solid #BFD6C4;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.hf-cartelle span{color:var(--h-gt)}
.hf-scena{position:absolute;inset:0 12px 12px;display:grid;place-items:center;border-radius:14px;background:#0D0D0D;overflow:hidden;
  opacity:0;visibility:hidden;clip-path:inset(0 0 0 42% round 14px);transition:clip-path 520ms var(--h-ease),opacity 180ms ease,visibility 0s linear 520ms}
.hub-fin[data-phase="open"] .hf-scena{opacity:1;visibility:visible;clip-path:inset(0 0 0 0 round 14px);transition:clip-path 560ms var(--h-ease),opacity 140ms ease,visibility 0s}
.hf-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hf-nota{display:none}
.hf-piede{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px 0 14px;border-top:1px solid var(--h-line);font-size:12px;color:var(--h-t2)}
.hf-stato{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-indietro{flex:none;min-height:44px;padding:0 10px;font-size:13px;font-weight:500;color:var(--h-t);text-decoration:underline;text-underline-offset:.24em;text-decoration-color:rgba(10,10,10,.35)}
@media (prefers-reduced-motion:no-preference){
  .hf-azione > :not([hidden]),.hf-cartelle:not([hidden]){animation:hf-in 240ms var(--h-ease)}
}
@keyframes hf-in{from{opacity:0;transform:translateY(4px)}}

@media (max-width:1100px){
  .ip-testo,.ip-demo,.inst-azioni{grid-column:1 / -1;grid-row:auto}
  .ip-passi{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
  .ip-intro{max-width:52ch}
}
@media (max-width:600px){
  .ip{row-gap:28px}
  .ip-pronto li{display:contents}
  .ip-pronto h3{grid-row:1;font-size:17px}
  .ip-pronto p{grid-area:2 / 1 / 3 / -1;margin-top:10px;max-width:none}
  .ip-pronto li:not([data-on]) p{visibility:hidden}
  .hf-schede{display:none}
  .hf-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px;height:430px;padding:0 10px 10px}
  .hf-tit,.hf-riga .hf-nm,.hf-riga .hf-chip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hf-righe{flex-direction:row;gap:6px}
  .hf-riga{flex:1;grid-template-columns:1fr;justify-items:center;min-height:52px;padding:0}
  .hf-riga[aria-pressed="true"]::before{left:14px;right:14px;top:auto;bottom:0;width:auto;height:2px}
  .hf-pannello{padding:14px;gap:12px}
  .hf-p-nome{font-size:22px}
  .hf-scena{inset:0 10px 10px;clip-path:inset(18% 0 0 0 round 14px);display:flex;flex-direction:column;justify-content:center;gap:18px}
  .hf-loop{position:static;height:auto}
  .hf-nota{display:block;padding:0 16px;font-size:15px;line-height:1.4;color:#ADADA8}
  .hf-nota b{font-weight:500;color:#F2F2F0}
}

/* ---------- 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 ---------- */
/* The page is drawn by js/product.js: until then <main> holds a full screen, so the footer never paints in the first view. */
html[data-page="product"] main{min-height:100svh}
.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 .annuncio{margin-top:16px}
.p-testa .dx{grid-column:6 / span 7}
.p-testa .dx img,.p-testa .dx video{width:100%;border-radius:var(--r-m)}
@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,.seg .tavola video{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}
/* The tile is its own layer (.spec-fondo) so it can enter before its text without fading the text with it. */
.spec-blocco{position:relative;isolation:isolate;border-radius:var(--r-m);padding:24px 24px 26px}
.spec-fondo{position:absolute;inset:0;z-index:-1;background:var(--tile);border-radius:inherit}
.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)}
.nota-spec > span{display:block}

.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,.misure .vista video{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 .annuncio{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. */

/* Reveal order without style attributes. */
.ri1{--i:1}.ri2{--i:2}.ri3{--i:3}

/* ---------- Home: the Hub band, on night like the Hub's own panel ---------- */
.hub-casa{background:var(--zk-notte);color:#F6F6F5;padding-block:clamp(64px,8vw,112px);--btn-bg:#F6F6F5;--btn-fg:var(--zk-notte)}
.hub-casa .griglia{align-items:center;row-gap:32px}
.hub-casa-testo{grid-column:1 / span 4}
.hub-casa h2{font-size:var(--s-head)}
.hub-casa p{margin-top:16px;font-size:var(--s-lead);line-height:1.35;color:#CFCFCA;max-width:30ch}
.hub-casa .btn{margin-top:28px}
.hub-casa-foto{grid-column:6 / span 7}
.hub-casa-foto img{width:100%;border-radius:var(--r-m);box-shadow:0 0 0 1px rgba(246,246,245,.12)}
@media (max-width:900px){.hub-casa-testo,.hub-casa-foto{grid-column:1 / -1}}

/* ---------- Hub page ---------- */
.hub-testa .azioni{margin-top:28px}
.s-testa p.hub-sistema,.s-testa p.nota-mail{margin-top:18px;font-size:var(--s-small);line-height:1.5;max-width:60ch}
.hub-vetrina{background:var(--house);color:var(--house-fg);padding-block:clamp(32px,4vw,64px)}
.hub-vetrina img{width:100%;border-radius:var(--r-m);box-shadow:0 30px 60px -36px rgba(10,10,10,.5)}
.hub-vetrina figcaption{margin-top:14px;font-size:var(--s-small)}
.hub-cosa{background:var(--bg);color:var(--fg);padding-block:clamp(72px,9vw,128px)}
.hub-cosa h2{font-size:var(--s-head)}
.hub-voce{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:24px;align-items:center;margin-top:clamp(48px,6vw,96px)}
.hub-testo{grid-column:1 / span 4}
.hub-quadro{grid-column:6 / span 7}
.hub-voce.inv .hub-testo{grid-column:9 / span 4;grid-row:1}
.hub-voce.inv .hub-quadro{grid-column:1 / span 7;grid-row:1}
.hub-quadro img{width:100%;border-radius:var(--r-m);box-shadow:0 0 0 1px var(--tile-2),0 24px 50px -32px rgba(10,10,10,.4)}
.hub-cosa h3,.hub-tessera h3{font-size:var(--s-lead);line-height:1.2;letter-spacing:-.01em}
.hub-testo p,.hub-tessera p{margin-top:12px;color:var(--fg-2);max-width:44ch;text-wrap:pretty}
.hub-coppia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:12px;margin-top:clamp(48px,6vw,96px)}
.hub-tessera{background:var(--tile);border-radius:var(--r-m);padding:28px 28px 30px}
.hub .wrap > h2{font-size:var(--s-head)}
.hub ul.hub-calma{margin-top:30px;grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-poi{background:var(--zk-notte);color:#F6F6F5;padding-block:clamp(72px,9vw,120px)}
.hub-poi h2{grid-column:1 / span 5;font-size:var(--s-head)}
.hub-poi ul{grid-column:7 / span 6;display:grid;gap:0;align-self:start}
.hub-poi li{font-size:var(--s-lead);line-height:1.3;font-weight:500;padding:16px 0;border-top:1px solid rgba(246,246,245,.18)}
.hub-poi .hub-nota{grid-column:7 / span 6;margin-top:14px;font-size:var(--s-small);color:#CFCFCA}
@media (max-width:900px){
  .hub-testo,.hub-quadro,.hub-voce.inv .hub-testo,.hub-voce.inv .hub-quadro{grid-column:1 / -1;grid-row:auto}
  .hub ul.hub-calma{grid-template-columns:1fr}
  .hub-poi h2,.hub-poi ul,.hub-poi .hub-nota{grid-column:1 / -1}
  .hub-poi ul{margin-top:24px}
}

/* ---------- 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,.js .capitolo .foto video{transform:scale(1.06);transition:transform 1500ms var(--ease-soft)}
  .js .capitolo .foto.is-in img,.js .capitolo .foto.is-in video{transform:none}
  /* Cascades (How it works, Specs): parts of one block enter in data-c order, 75 ms apart. The hidden state
     needs .cascata-pronta, which only the script adds; the transition is set on .is-in so nothing moves before. */
  .cascata-pronta [data-c]{opacity:0;transform:translateY(18px)}
  .cascata-pronta .tavola[data-c]{transform:translateY(28px) scale(.985)}
  .cascata-pronta.is-in [data-c]{opacity:1;transform:none;transition:opacity 520ms var(--ease-out),transform 760ms var(--ease-out);transition-delay:calc(var(--o,0ms) + var(--k,0) * 75ms)}
  .cascata-pronta.is-in .spec-fondo{transition-duration:420ms,640ms}
}
[data-c="1"]{--k:1}[data-c="2"]{--k:2}[data-c="3"]{--k:3}[data-c="4"]{--k:4}[data-c="5"]{--k:5}[data-c="6"]{--k:6}[data-c="7"]{--k:7}[data-c="8"]{--k:8}[data-c="9"]{--k:9}
@media (min-width:1050px){.spec-blocco.b1{--o:90ms}.spec-blocco.b2{--o:180ms}}
@keyframes sali{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}

/* ---------- Play on a loop that did not start by itself (js/site.js): iPhone in Low Power Mode, reduced motion,
   Save-Data. A dark chip centred on the poster; once a loop started by hand plays it moves to the corner and pauses
   it. The frame that holds it becomes the positioning box only if it had none. ---------- */
:where(:has(> .loop-play)){position:relative}
.loop-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 16px 0 14px;border-radius:var(--r-s);background:rgba(10,10,10,.8);color:#F6F6F5;font-size:15px;font-weight:500;line-height:1;box-shadow:0 10px 24px -12px rgba(0,0,0,.55);-webkit-tap-highlight-color:transparent;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.loop-play:active{transform:translate(-50%,-50%) scale(.96)}
.loop-play[data-on]{left:10px;top:auto;bottom:10px;transform:none;background:rgba(10,10,10,.62)}
.loop-play[data-on]:active{transform:scale(.96)}
.loop-play:focus-visible{outline:3px solid #F6F6F5;outline-offset:2px;box-shadow:0 0 0 7px rgba(10,10,10,.8)}
@media (hover:hover) and (pointer:fine){.loop-play:hover{background:rgba(10,10,10,.92)}}

/* ACC (23 Oct 2026): the account link, small, on the right of the header before the CTA (phones: in the Menu) */
.testata .destra{grid-column:10 / span 3;justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
.testata .conto{font-size:15px;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}
.testata .conto[aria-current="page"]{text-decoration-color:currentColor}
@media (hover:hover) and (pointer:fine){.testata .conto:hover{text-decoration-color:currentColor}}
@media (max-width:1023px){.testata .destra{display:contents}.testata .conto{display:none}}