/* GENERATO da landing/build-worker.mjs: i token vengono da index.html, il resto da landing/pagine/stile.css. Non si modifica qui. */
:root{
    color-scheme:light dark;
    --ink:#0a0e1a;
    --ink-soft:#333d52;
    --muted:#4c5568;
    --surface:#fdfdff;
    --bg:#f3f4f8;
    --bg-tint:#e9edf7;
    --border:#d7dceb;
    --control:#8a93ab;
    --navy:#1e3a8a;
    --navy-deep:#0c1a4a;
    --amber:#f59e0b;
    --link:var(--navy);
    --on-navy:#fbfcff;
    --on-navy-soft:rgba(255,255,255,.8);
    --line-on-navy:rgba(255,255,255,.2);
    --tint-on-navy:rgba(255,255,255,.07);
    --on-amber:#241503;
    --shot-bg:#0b0d12;
    --shot-line:rgba(12,26,74,.16);
    --demo-shop:#1f6f4a;
    --r-s:12px;
    --r-m:20px;
    --r-l:26px;
    --r-pill:999px;
    --shadow-soft:0 28px 64px -28px rgba(12,26,74,.45);
    --shadow-card:0 12px 32px -16px rgba(12,26,74,.2);
    --shadow-nav:0 12px 30px -18px rgba(12,26,74,.45);
    --shadow-stage:0 30px 60px -30px rgba(0,0,0,.75);
    --glow-amber:0 10px 24px -10px rgba(245,158,11,.6);
    --sheen:rgba(255,255,255,.65);
    --spot:rgba(245,158,11,.24);
    --spot-light:rgba(255,255,255,.2);
    --off-fill:#ecd9b0;
    --off-ink:#6f5a2c;
    --font-display:'Playfair Display', Georgia, serif;
    --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --container:1180px;
    /* Con un iPhone in orizzontale la tacca copre i lati dello schermo: il
       margine non scende mai sotto la zona sicura (dove non c'e', vale zero). */
    --gutter:max(clamp(1rem, 4vw, 1.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --nav-h:64px;
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-in-out:cubic-bezier(.65,0,.35,1);
  }

  @media (prefers-color-scheme: dark){
    :root{
      --ink:#f5f6fa;
      --ink-soft:#d3d9ea;
      --muted:#a4aec4;
      --surface:#121b30;
      --bg:#0b1220;
      --bg-tint:#101a34;
      --border:#2a3a5c;
      --control:#6c7ba0;
      --link:var(--amber);
      --off-fill:#4a3d22;
      --off-ink:#c9b88f;
      --shot-line:rgba(255,255,255,.2);
      --shadow-soft:0 28px 70px -28px rgba(0,0,0,.75);
      --shadow-card:0 12px 32px -16px rgba(0,0,0,.5);
      --shadow-nav:0 12px 30px -18px rgba(0,0,0,.8);
      --glow-amber:0 8px 20px -12px rgba(245,158,11,.35);
    }
  }

/* Stile delle pagine interne del sito pubblico (tutto tranne la home, che ha il suo CSS dentro index.html).
 *
 * I TOKEN (colori, raggi, font, tema scuro) NON stanno qui: il build li copia da index.html in cima al file pubblicato
 * (`dist/stile.css`), cosi' la marca ha una sola fonte. Qui ci sono i componenti, scritti dal telefono in su (320 px)
 * con media query in rem, solo min-width.
 *
 * Il linguaggio e' quello della home, che il titolare ha approvato: titoli che salgono da una maschera, due schermate vere
 * che si inclinano verso il cursore e si staccano mentre si scorre, una luce ambra che segue il mouse, il nastro che scorre
 * con la pagina, riquadri asimmetrici con uno navy e uno ambra, fogli navy che si allargano entrando, il racconto con la
 * schermata ferma e il testo che scorre, numeri che contano, bottoni che seguono il cursore. Alternanza netta di chiaro e
 * scuro. Tutto il movimento sta dentro `prefers-reduced-motion: no-preference` e nessun contenuto resta nascosto se lo
 * script non parte.
 */

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

:root{
  /* una scala di spazi */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;
  /* misure di testo */
  --t-small:.875rem;
  --t-body:1rem;
  --t-lead:clamp(1.125rem, .9rem + .75vw, 1.375rem);
  --t-h3:clamp(1.35rem, 1.05rem + 1vw, 1.8rem);
  --t-h2:clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-h1:clamp(2.375rem, 1.5rem + 3.9vw, 4.25rem);
  --gap-sezione:clamp(4.5rem, 3rem + 6vw, 8rem);
  --curva:2.25rem;
}

body{
  position:relative; margin:0; overflow-x:clip;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.6; font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
a:active{ opacity:.7; }
p{ margin:0; }
p, li, figcaption{ text-wrap:pretty; }
h1,h2,h3{
  margin:0; font-family:var(--font-display); font-weight:900; font-style:normal; letter-spacing:-.01em; font-variant-numeric:lining-nums;
  color:var(--ink); overflow-wrap:anywhere; min-width:0; text-wrap:balance;
}
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
:focus-visible{ outline:2px solid var(--link); outline-offset:3px; border-radius:6px; }
.sheet :focus-visible, .story :focus-visible, .nots :focus-visible, .cta-band :focus-visible, .gesto :focus-visible{ outline-color:var(--amber); }
.ambra :focus-visible{ outline-color:var(--on-amber); }
a, button, label, summary{ touch-action:manipulation; }
section[id]{ scroll-margin-top:calc(var(--nav-h) + 8px); }
/* Una riga che sale da dietro la sua linea di base: i titoli entrano cosi'. */
.mask{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.2em; }
.mask > span{ display:block; }

.skip{ position:fixed; left:var(--gutter); top:12px; z-index:70; display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:var(--r-pill); background:var(--amber); color:var(--on-amber); font-weight:600; text-decoration:none; transform:translateY(-200%); }
.skip:focus-visible{ transform:none; outline-color:var(--ink); }

/* ---------- Avanzamento: un filo ambra in cima che si allunga con la pagina (lo muove il browser, legato allo scroll) ---------- */
.top-sentinel{ position:absolute; top:0; left:0; width:1px; height:10px; pointer-events:none; }
.progress{ display:none; }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .progress{ display:block; position:fixed; inset:0 0 auto 0; height:3px; z-index:60; background:var(--amber); transform:scaleX(0); transform-origin:left; pointer-events:none; animation:grow linear both; animation-timeline:scroll(root); }
  }
}
@keyframes grow{ to{ transform:scaleX(1); } }

/* ---------- Bottoni: pillola piena (marca). Il principale segue un poco il cursore e ha il riflesso. ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 28px; border-radius:var(--r-pill); border:0;
  font:600 var(--t-body)/1.2 var(--font-body); text-decoration:none; cursor:pointer; white-space:nowrap;
  transform:translate(var(--bx, 0px), var(--by, 0px)) scale(var(--press, 1));
  transition:transform .45s var(--ease-out), background-color .2s;
}
.btn:active{ --press:.97; transition-duration:.1s; }
.btn.is-pulled{ transition-duration:.12s; }
.btn-primary{ position:relative; overflow:hidden; background:var(--amber); color:var(--on-amber); box-shadow:var(--glow-amber); }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, var(--sheen), transparent);
  transform:skewX(-20deg); transition:transform .6s var(--ease-out);
}
.btn-ghost{ background:var(--bg-tint); color:var(--ink); }
.sheet .btn-ghost, .story .btn-ghost, .cta-band .btn-ghost{ background:var(--tint-on-navy); color:var(--on-navy); }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover::after{ transform:skewX(-20deg) translateX(460%); }
  .btn-ghost:hover{ background:var(--border); }
  .sheet .btn-ghost:hover, .story .btn-ghost:hover, .cta-band .btn-ghost:hover{ background:var(--line-on-navy); }
}
.azioni{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
@media (max-width:29.99rem){ .azioni .btn{ flex:1 1 100%; } .testa .azioni .btn{ flex:1 1 auto; padding-inline:14px; } }

/* ---------- Testata: in cima trasparente, scorrendo diventa una pillola che galleggia ---------- */
header.nav{ position:sticky; top:0; z-index:40; }
.nav-row{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:12px; height:var(--nav-h); }
.nav-row::before{
  content:""; position:absolute; z-index:-1; inset:7px 6px; border-radius:var(--r-pill);
  background:var(--surface); background:color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--border); box-shadow:var(--shadow-nav);
  opacity:0; transform:scale(.985); transition:opacity .35s var(--ease-out), transform .5s var(--ease-out);
}
header.nav.is-scrolled .nav-row::before, html:not(.js) .nav-row::before{ opacity:1; transform:none; }
.brand{ display:flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; flex:none; padding-left:6px; }
.brand-mark{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none; box-shadow:var(--shadow-card); }
.brand-mark svg{ display:block; width:100%; height:100%; }
.brand-word{ font-family:var(--font-display); font-weight:900; font-size:22px; color:var(--ink); }
.brand-word .dot{ color:var(--amber); }
.nav-links{ display:none; align-items:center; gap:24px; }
.nav-links a{ position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:var(--t-body); font-weight:500; color:var(--ink-soft); text-decoration:none; white-space:nowrap; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
.nav-links a[aria-current="page"]{ color:var(--link); font-weight:600; }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:16px; flex:none; padding-right:6px; }
.nav-login{ display:none; align-items:center; min-height:44px; font-size:var(--t-body); font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap; }
/* Sotto i 480 px marca, bottone e menu non ci stanno insieme (misurato): il bottone e «Accedi» stanno nel menu. */
.nav .btn{ display:none; min-height:44px; padding:10px 18px; font-size:var(--t-small); }
@media (min-width:30rem){ .nav .btn{ display:inline-flex; } }
/* Su telefono il bottone entra nella pillola quando si e' scesi oltre la prima schermata (li' sotto non c'e' piu' il bottone
   della testata): etichetta corta e, sotto i 400 px, il marchio senza la scritta, perche' ci stiano insieme. */
.nav .d-tuo{ display:none; }
@media (max-width:29.99rem){
  header.nav.is-scrolled .btn{ display:inline-flex; padding:8px 14px; }
  header.nav.is-scrolled .nav-cta{ gap:8px; }
}
@media (max-width:24.99rem){ header.nav.is-scrolled .brand-word{ display:none; } }
@media (min-width:30rem){ .nav .d-tuo{ display:inline; } }

/* Il menu su telefono e' un <details>: si apre da tastiera e senza JavaScript. */
.menu{ position:relative; }
.menu > summary{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; cursor:pointer; list-style:none; color:var(--ink); }
.menu > summary::-webkit-details-marker{ display:none; }
.menu[open] > summary{ background:var(--bg-tint); }
.menu > summary svg{ width:22px; height:22px; }
.menu-lista{
  position:absolute; right:0; top:calc(100% + 8px); width:min(86vw, 320px); padding:8px; border-radius:var(--r-m);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-soft); display:grid; gap:2px;
  max-height:calc(100vh - var(--nav-h) - 16px); max-height:calc(100dvh - var(--nav-h) - 16px); overflow-y:auto; overscroll-behavior:contain;
}
.menu-lista a{ display:flex; align-items:center; min-height:48px; padding:0 16px; border-radius:var(--r-s); font-weight:500; text-decoration:none; color:var(--ink); }
.menu-lista a[aria-current="page"]{ background:var(--bg-tint); font-weight:700; }
.menu-lista .menu-sep{ display:block; height:8px; }
@media (prefers-reduced-motion: no-preference){
  .menu[open] .menu-lista{ animation:menuIn .25s var(--ease-out) both; transform-origin:top right; }
}
@keyframes menuIn{ from{ opacity:0; transform:scale(.97) translateY(-6px); } }
@media (min-width:56rem){
  :root{ --nav-h:68px; }
  .nav .btn{ padding:12px 24px; font-size:var(--t-body); }
}
/* I link e «Accedi» entrano a 64rem: a 56-63rem «Prezzo» e «Accedi» distavano 12 px e si leggevano come una voce sola. */
@media (min-width:64rem){
  .nav-links{ display:flex; gap:32px; }
  .nav-login{ display:inline-flex; }
  .menu{ display:none; }
  .nav-cta{ gap:24px; }
}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ transform:scaleX(1); }
  .nav-login:hover{ color:var(--link); }
  .menu-lista a:hover{ background:var(--bg-tint); }
}

/* ---------- Briciole ---------- */
.briciole{ padding-top:8px; }
.briciole ol{ display:flex; flex-wrap:wrap; gap:4px 8px; margin:0; padding:0; list-style:none; font-size:var(--t-small); color:var(--muted); }
.briciole li{ display:flex; align-items:center; gap:8px; }
.briciole li:not(:last-child)::after{ content:"\203a"; color:var(--control); }
.briciole a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-6px; color:var(--muted); text-decoration:none; }
.briciole [aria-current]{ color:var(--ink-soft); font-weight:600; }
@media (hover:hover) and (pointer:fine){ .briciole a:hover{ color:var(--link); text-decoration:underline; } }

/* ---------- Testata di pagina ----------
   Il titolo e' la cosa piu' grande: sale da una maschera, riga per riga, e l'enfasi si disegna sotto le parole. Il blocco-risposta
   dice cosa e' la pagina (e' quello che un motore o un assistente puo' citare), il bottone e' uno. Due modi: con le schermate
   dell'app a destra, oppure titolo a sinistra e testo a destra (con, sotto il titolo, un riquadro che mostra la cosa). Con un
   mouse vero una luce ambra segue il cursore sulla testata e gli oggetti si inclinano verso di lui. */
.testa{ position:relative; isolation:isolate; padding:var(--s-4) 0 var(--gap-sezione); }
.testa::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px circle at var(--hx, 70%) var(--hy, 30%), var(--spot), transparent 70%);
  opacity:0; transition:opacity .5s var(--ease-out);
  /* la luce sfuma verso l'alto: col puntatore vicino al bordo della sezione non resta un taglio netto (QA del 26/10) */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 140px); mask-image:linear-gradient(to bottom, transparent, #000 140px);
}
.testa.is-lit::before{ opacity:1; }
.testa h1{ margin-top:var(--s-6); font-size:var(--t-h1); line-height:1.04; letter-spacing:-.02em; }
.hl{ position:relative; white-space:nowrap; }
.hl::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:-.12em; height:.32em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C 58 3, 118 18, 176 9 S 262 5, 296 12' fill='none' stroke='%23f59e0b' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin:left center;
}
.risposta{ margin-top:var(--s-5); max-width:46ch; font-size:var(--t-lead); line-height:1.55; color:var(--ink-soft); }
.risposta strong{ color:var(--ink); }
/* Su telefono la risposta e' un po' piu' piccola: il bottone e la schermata devono entrare piu' in alto. */
@media (max-width:47.99rem){ .risposta{ font-size:1.0625rem; line-height:1.5; } .risposta .piu{ display:none; } }
/* La coda della risposta (`.piu`) sta nel testo ma su telefono non si mostra: il bottone e la schermata devono entrare nella prima schermata. */
.testa .azioni{ margin-top:var(--s-6); }
.prezzo{ margin-top:var(--s-4); max-width:46ch; font-size:var(--t-small); line-height:1.5; color:var(--ink-soft); }
.prezzo strong{ color:var(--ink); }
.firma{ margin-top:var(--s-4); font-size:var(--t-small); color:var(--muted); }
.testa-griglia{ display:grid; gap:var(--s-7); }
.testa-griglia > div{ min-width:0; }
/* Testata di solo testo: come quella con le schermate del telefono. Su telefono una colonna sola (titolo, risposta, bottone e, in
   fondo, il riquadro o le finestre dell'app); da 56rem due colonne, a sinistra il testo e a destra cio' che mostra la cosa. */
.testa-testo > .wrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-7); }
.testa-sx, .testa-dx{ min-width:0; }
.testa-dx .frammento{ margin-top:var(--s-2); }
@media (min-width:56rem){
  .testa{ padding-top:var(--s-5); }
  .testa-griglia{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--s-8); align-items:center; }
  .testa-testo > .wrap{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--s-8); align-items:center; }
  .testa-testo h1{ margin-top:var(--s-7); }
}

/* Le schermate sono vere: l'app di un negozio di prova, come la vede chi prenota. Due, una davanti e una dietro: con un mouse
   vero si inclinano verso il cursore, scorrendo si staccano e ruotano di poco. Niente telefono disegnato intorno. */
.shot{ display:block; object-fit:cover; object-position:top; background:var(--shot-bg); border:1px solid var(--shot-line); border-radius:var(--r-l); box-shadow:var(--shadow-soft); }
.shots{ position:relative; width:100%; max-width:400px; height:460px; margin:var(--s-6) auto var(--s-7); perspective:1200px; }
.shots-tilt{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition:transform .7s var(--ease-out); }
.shot-wrap{ position:absolute; }
.shot-wrap .shot{ height:100%; width:auto; aspect-ratio:640/1385; }
.shot-wrap.front{ left:1%; top:0; height:95%; z-index:2; }
.shot-wrap.back{ right:1%; top:9%; height:84%; z-index:1; }
.shot-wrap.back .shot{ filter:brightness(.92); }
.shots figcaption{ position:absolute; left:0; right:0; bottom:-36px; text-align:center; font-size:var(--t-small); color:var(--muted); }
@media (min-width:56rem){
  .shots{ max-width:none; margin:0 0 var(--s-6); height:clamp(440px, min(78svh, 58vw), 700px); }
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .shot-wrap.back, .win-wrap.back{ animation:driftBack linear both; animation-timeline:scroll(root); animation-range:0px 720px; }
    .shot-wrap.front, .win-wrap.front{ animation:driftFront linear both; animation-timeline:scroll(root); animation-range:0px 720px; }
  }
}

/* Le finestre dell'app (il pannello del titolare, con dati di fantasia): due, una davanti e una dietro, come le schermate del
   telefono. Stesso gesto, stessa inclinazione verso il cursore. */
.win{ display:block; width:100%; height:auto; background:var(--shot-bg); border:1px solid var(--shot-line); border-radius:var(--r-m); box-shadow:var(--shadow-soft); }
.finestre{ position:relative; width:100%; max-width:38rem; aspect-ratio:1 / 1.02; margin:var(--s-6) auto var(--s-8); perspective:1200px; }
.win-wrap{ position:absolute; }
.win-wrap.front{ left:0; bottom:0; width:90%; z-index:2; }
.win-wrap.back{ right:0; top:0; width:76%; z-index:1; }
.win-wrap.back .win{ filter:brightness(.93); aspect-ratio:1.375 / 1; object-fit:cover; object-position:top left; }
.finestre figcaption{ position:absolute; left:0; right:0; bottom:-2.6rem; text-align:center; font-size:var(--t-small); color:var(--muted); }

/* Una finestra dell'app dentro una sezione: un riquadro che si inclina un poco verso il cursore. Quelle alte e strette (un foglio
   aperto sopra la pagina) stanno in una colonna stretta. */
.finestra{ position:relative; margin:0; min-width:0; transform:perspective(1400px) rotateX(calc(var(--ry, 0deg) * .5)) rotateY(calc(var(--rx, 0deg) * .5)); transition:transform .6s var(--ease-out); }
.finestra.is-hot{ transition-duration:.2s; }
.finestra img{ display:block; width:100%; height:auto; background:var(--shot-bg); border:1px solid var(--shot-line); border-radius:var(--r-m); box-shadow:var(--shadow-soft); }
.finestra figcaption{ margin-top:var(--s-3); max-width:62ch; font-size:var(--t-small); line-height:1.5; color:var(--muted); }
.finestra figcaption strong{ color:var(--ink-soft); }
.finestra.stretta{ max-width:25rem; margin-inline:auto; }
.sheet .finestra figcaption, .story .finestra figcaption{ color:var(--on-navy-soft); }
.sheet .finestra figcaption strong{ color:var(--on-navy); }
.sheet .finestra img{ border-color:var(--line-on-navy); box-shadow:var(--shadow-stage); }

/* L'indice delle domande, per argomento. */
.indice{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5); }
.indice a{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-4); border-radius:var(--r-pill); background:var(--bg-tint); color:var(--ink); font-size:var(--t-small); font-weight:600; text-decoration:none; transition:background .25s var(--ease-out), color .25s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .indice a:hover{ background:var(--navy); color:var(--on-navy); } }

/* Una sezione col suo testo da una parte e una finestra dell'app dall'altra; con `.inverso` i lati si scambiano. */
.spot > .wrap{ display:grid; gap:var(--s-7); }
.spot-testo{ min-width:0; }
.spot > .wrap > .griglia, .spot > .wrap > .duo-figure{ grid-column:1 / -1; margin-top:var(--s-3); }
.spot-testo > * + *{ margin-top:var(--s-4); }
.spot-testo .lead{ margin-top:var(--s-4); }
.spot-testo p{ max-width:56ch; }
.duo-figure, .mosaico{ display:grid; gap:var(--s-5); margin-top:var(--s-6); }
/* Le app di più negozi una accanto all'altra: telefoni, quattro per riga da schermo largo. */
.telefoni{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-5) var(--s-4); margin-top:var(--s-6); }
.telefoni .finestra img{ aspect-ratio:640 / 1385; object-fit:cover; object-position:top; }
@media (min-width:48rem){ .telefoni{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-5); } }
.block > .wrap > .telefoni{ grid-column:1 / -1; }
.mosaico .finestra img{ aspect-ratio:4 / 3; object-fit:cover; object-position:top left; }
.fr-nota-figure{ margin-top:var(--s-4); font-size:var(--t-small); color:var(--muted); }
.fr-nota-figure.corpo{ max-width:62ch; font-size:var(--t-body); line-height:1.6; color:var(--ink-soft); }
.fr-nota-figure.corpo strong{ color:var(--ink); }
.fr-nota-figure.corpo a{ color:var(--link); font-weight:600; text-underline-offset:3px; }
@media (min-width:40rem){
  .mosaico{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-5) var(--s-6); }
}
@media (min-width:56rem){
  .spot > .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--s-8); align-items:center; }
  .spot > .wrap > .spot-testo{ grid-column:1; grid-row:1; }
  .spot > .wrap > .finestra{ grid-column:2; grid-row:1; }
  .spot.inverso > .wrap{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .spot.inverso > .wrap > .spot-testo{ grid-column:2; }
  .spot.inverso > .wrap > .finestra{ grid-column:1; }
  /* una finestra alta e stretta (un foglio, un telefono) sta in una colonna stretta: il testo prende l'altra */
  .spot:has(> .wrap > .finestra.stretta) > .wrap{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .spot.inverso:has(> .wrap > .finestra.stretta) > .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .duo-figure{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start; gap:var(--s-6); }
  .mosaico.tre{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@keyframes driftBack{ to{ transform:translateY(-76px) rotate(4deg); } }
@keyframes driftFront{ to{ transform:translateY(-24px) rotate(-2deg); } }

/* ---------- Riquadri che mostrano la cosa (testate senza schermate) ----------
   Piccole finestre sul prodotto, con dati di fantasia dichiarati. Entrano una riga dopo l'altra, le barre crescono, i segni si
   spuntano. Sono illustrazioni: nascoste ai lettori di schermo (il testo che dicono sta gia' nella pagina). */
.frammento{
  position:relative; width:100%; max-width:30rem; padding:var(--s-5); border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-soft);
  transform:perspective(1200px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition:transform .7s var(--ease-out);
}
.frammento.scuro{ background:linear-gradient(160deg, var(--navy), var(--navy-deep)); border-color:transparent; color:var(--on-navy); }
.fr-testa{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); }
.fr-titolo{ font-weight:700; line-height:1.25; }
.fr-meta{ font-size:var(--t-small); color:var(--muted); }
.scuro .fr-meta{ color:var(--on-navy-soft); }
.fr-nota{ margin-top:var(--s-4); font-size:var(--t-small); color:var(--muted); }
.scuro .fr-nota{ color:var(--on-navy-soft); }
.fr-righe{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2); }
.fr-riga{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--s-3); padding:var(--s-3); border-radius:var(--r-s); background:var(--bg-tint); }
.fr-riga strong{ display:block; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-riga div > span{ display:block; font-size:var(--t-small); color:var(--muted); }
.fr-av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--on-navy); font-family:var(--font-display); font-weight:900; }
.fr-av.a{ background:var(--amber); color:var(--on-amber); }
.fr-av.v{ background:var(--demo-shop); }
.fr-tag{ padding:3px 10px; border-radius:var(--r-pill); background:var(--amber); color:var(--on-amber); font-size:.8125rem; font-weight:700; white-space:nowrap; }
.fr-barre{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); }
.fr-barre li{ display:grid; grid-template-columns:4.5rem minmax(0,1fr) 2rem; align-items:center; gap:var(--s-3); font-size:var(--t-small); }
.fr-barre i{ display:block; height:12px; border-radius:var(--r-pill); background:var(--navy); transform-origin:left; transform:scaleX(var(--v, .5)); }
.fr-barre li:nth-child(2) i{ background:var(--amber); }
.fr-barre li:nth-child(3) i{ background:var(--demo-shop); }
.fr-barre b{ text-align:right; font-variant-numeric:tabular-nums; }
.fr-chip{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 14px; border-radius:var(--r-pill); background:var(--bg-tint); font-size:var(--t-small); font-weight:600; }
.fr-chip.ok::before{ content:""; width:.55em; height:.95em; margin-top:-.2em; border:solid var(--demo-shop); border-width:0 2px 2px 0; transform:rotate(45deg); }
.fr-chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.fr-bolla{ position:relative; max-width:92%; padding:var(--s-3) var(--s-4); border-radius:var(--r-m) var(--r-m) var(--r-m) 4px; background:var(--bg-tint); line-height:1.45; }
.fr-bolla.mia{ margin-left:auto; border-radius:var(--r-m) var(--r-m) 4px var(--r-m); background:var(--navy); color:var(--on-navy); }
.fr-bolla + .fr-meta, .fr-meta + .fr-bolla{ margin-top:var(--s-2); }
.fr-chip.fr-tag{ background:var(--amber); color:var(--on-amber); }
.scuro .fr-chip{ background:var(--tint-on-navy); color:var(--on-navy); }
.scuro .fr-chip.fr-tag{ background:var(--amber); color:var(--on-amber); }
.frammento.nudo{ padding:0; background:none; border:0; box-shadow:none; }
.f-chat{ display:grid; gap:var(--s-2); }
.f-wa{ display:grid; gap:var(--s-1); }
.f-versus{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-3); }
.fv-col{ display:grid; align-content:start; gap:var(--s-3); padding:var(--s-4); border-radius:var(--r-m); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.fv-col.scuro{ background:linear-gradient(160deg, var(--navy), var(--navy-deep)); border-color:transparent; color:var(--on-navy); }
.fv-col .fr-titolo{ font-family:var(--font-display); font-weight:900; font-size:var(--t-h3); line-height:1.1; }
.fr-scorta{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2) var(--s-3); align-items:center; padding:var(--s-3); border-radius:var(--r-s); background:var(--bg-tint); }
.fr-scorta .fr-livello, .fr-scorta .fr-meta{ grid-column:1 / -1; }
.fr-scorta .fr-livello{ position:relative; height:10px; border-radius:var(--r-pill); background:var(--border); }
.fr-scorta .fr-livello i{ display:block; height:100%; border-radius:inherit; background:var(--navy); transform-origin:left; transform:scaleX(var(--v, .5)); }
.fr-scorta .fr-livello::after{ content:""; position:absolute; left:var(--soglia, 30%); top:-4px; bottom:-4px; width:2px; background:var(--ink); border-radius:2px; }
.fr-scorta.basso .fr-livello i{ background:var(--amber); }
.fr-fan{ position:relative; width:100%; max-width:30rem; height:21rem; }
.fr-fan span{
  position:absolute; left:0; right:0; top:calc(var(--i) * 3.6rem); padding:var(--s-4) var(--s-5); border-radius:var(--r-m);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card);
  font-family:var(--font-display); font-weight:900; font-size:var(--t-lead); line-height:1.2; color:var(--ink);
  transform:rotate(calc((var(--i) - 1.5) * 2.4deg)); transform-origin:50% 100%;
}
.fr-fan span:nth-child(2){ background:linear-gradient(160deg, var(--navy), var(--navy-deep)); border-color:transparent; color:var(--on-navy); }
.fr-fan span:nth-child(3){ background:var(--amber); border-color:transparent; color:var(--on-amber); }
.fr-citazione{ font-family:var(--font-display); font-weight:900; font-size:var(--t-h2); line-height:1.12; }
.fr-citazione em{ font-style:normal; color:var(--amber); }
/* Il prezzo */
.f-prezzo{ padding:var(--s-6); }
.fp-gratis{ font-family:var(--font-display); font-weight:900; font-size:clamp(2.75rem, 5vw, 4rem); line-height:1; color:var(--on-navy); }
.fp-per{ margin-top:var(--s-2); font-size:var(--t-lead); color:var(--on-navy-soft); }
.fp-lista{ list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; gap:var(--s-2); }
.fp-lista li{ position:relative; padding-left:1.7rem; color:var(--on-navy); }
.fp-lista li::before{ content:""; position:absolute; left:.2rem; top:.4em; width:.5em; height:.9em; border:solid var(--amber); border-width:0 2px 2px 0; transform:rotate(45deg); }
.fp-dopo{ margin-top:var(--s-5); font-size:var(--t-small); color:var(--on-navy-soft); }

/* ---------- Il nastro ----------
   Una riga sola di cose di questa pagina, a caratteri grandi. Non gira in ciclo: si sposta insieme allo scroll e si ferma
   quando ti fermi. Dove il browser non lo permette (o col movimento ridotto) diventa un elenco fermo. */
.ticker{ overflow:clip; padding:28px 0; background:var(--bg); color:var(--ink); }
.ticker-track{ list-style:none; margin:0; padding:0 var(--gutter); display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; font-family:var(--font-display); font-weight:900; font-size:clamp(1.1rem, 3.4vw, 1.5rem); line-height:1.25; }
.ticker-track li{ display:flex; align-items:center; gap:28px; white-space:nowrap; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ticker{ padding:36px 0; }
    .ticker-track{ flex-wrap:nowrap; justify-content:flex-start; width:max-content; padding:0; gap:0; font-size:clamp(1.2rem, 4.6vw, 3.4rem); animation:tick linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    .ticker-track li{ gap:.9em; padding-right:.9em; }
    .ticker-track li::after{ content:""; width:.22em; height:.22em; flex:none; background:var(--amber); transform:rotate(45deg); }
  }
}
@keyframes tick{ from{ transform:translateX(12vw); } to{ transform:translateX(calc(-100% + 88vw)); } }

/* ---------- Sezioni ----------
   Titolo a sinistra (5/12), testo a destra (7/12): le stesse due linee per tutta la pagina. */
.block{ padding:var(--gap-sezione) 0; }
.block.tinta{ position:relative; isolation:isolate; background:var(--bg-tint); }
.block > .wrap{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:var(--s-8); row-gap:var(--s-5); align-content:start; }
.block h2{ font-size:var(--t-h2); line-height:1.12; max-width:18ch; }
.riga .corpo .finestra{ margin-top:var(--s-4); max-width:34rem; }
.riga .corpo .finestra.stretta{ max-width:15rem; margin-inline:0; }
.block .lead{ max-width:52ch; font-size:var(--t-lead); line-height:1.55; color:var(--ink-soft); }
.block > .wrap > :is(.griglia, .passi, .fatti, .tabella, .testo.con-righe, .numeri){ margin-top:var(--s-4); }
.block > .wrap > .finestra.lato{ margin-top:var(--s-2); }
@media (min-width:56rem){
  .block > .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .block > .wrap > .finestra.lato{ grid-column:1; align-self:start; margin-inline:0; }
  .block > .wrap > :is(.mosaico, .duo-figure, .telefoni, .fr-nota-figure){ grid-column:1 / -1; }
  .block > .wrap:has(> .finestra.lato) > .faq-list{ grid-row:1 / span 4; }
  .block h2{ grid-column:1; grid-row:1; }
  .block .lead{ grid-column:2; grid-row:1; }
  .block .testo:not(.con-righe), .block .faq-list{ grid-column:2; }
  .block > .wrap > :is(.griglia, .passi, .fatti, .tabella, .testo.con-righe, .numeri){ grid-column:1 / -1; margin-top:var(--s-6); }
}

/* Testo corrido: righe corte, interlinea larga, un'idea per paragrafo. */
.testo{ max-width:68ch; }
.testo > * + *{ margin-top:var(--s-4); }
.testo > p:first-child{ font-size:var(--t-lead); line-height:1.55; }
.testo ul, .testo ol{ margin:0; padding-left:1.25rem; }
.testo li + li{ margin-top:var(--s-2); }
.testo strong{ color:var(--ink); }
.testo a, .lead a, .faq-answer a, .fatti dd a, .scheda p a, .risposta a, .riga .corpo a{ color:var(--link); font-weight:600; text-underline-offset:3px; }
.testo p, .testo li{ color:var(--ink-soft); }
.testo > p:first-child{ color:var(--ink); }

/* Riquadri: asimmetrici (largo e stretto, poi stretto e largo), uno navy e uno ambra. Con un mouse vero si inclinano verso il
   cursore e una luce li segue. Non sono comandi: il cursore resta quello normale. */
.griglia{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.scheda{
  position:relative; isolation:isolate; overflow:hidden; min-height:184px; padding:28px 24px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s-2);
  border-radius:var(--r-m); background:var(--surface); border:1px solid var(--border);
  transform:perspective(1400px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition:transform .6s var(--ease-out);
}
.scheda::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); opacity:0; transition:opacity .4s var(--ease-out); }
.scheda.is-hot{ transition-duration:.2s; }
.scheda.is-hot::after{ opacity:1; }
.scheda h3{ font-size:var(--t-h3); line-height:1.12; }
.scheda p{ max-width:46ch; color:var(--ink-soft); }
.scheda.is-navy{ background:linear-gradient(160deg, var(--navy), var(--navy-deep)); border-color:transparent; }
.scheda.is-navy h3{ color:var(--on-navy); }
.scheda.is-navy p{ color:var(--on-navy-soft); }
.scheda.is-navy a{ color:var(--amber); }
.scheda.is-amber{ background:var(--amber); border-color:transparent; }
.scheda.is-amber h3, .scheda.is-amber p{ color:var(--on-amber); }
.scheda.is-navy::after, .scheda.is-amber::after{ background:radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--spot-light), transparent 70%); }
/* La copertina di una scheda (le guide): un pezzo di schermata in testa al riquadro, a filo dei bordi. */
.scheda .copertina{ display:block; width:calc(100% + 48px); height:auto; max-width:none; margin:-28px -24px var(--s-4); aspect-ratio:16 / 9; object-fit:cover; object-position:top left; background:var(--shot-bg); }
@media (min-width:40rem){ .scheda .copertina{ width:calc(100% + 64px); margin:-32px -32px var(--s-4); } }
.scheda a.piu{ display:inline-flex; align-items:center; min-height:44px; margin-top:var(--s-2); font-weight:600; color:var(--link); text-underline-offset:3px; }
/* Il link «piu'» sulla scheda navy deve restare ambra: la regola sopra, a pari specificita' e piu' in basso, lo faceva navy su navy. */
.scheda.is-navy a.piu{ color:var(--amber); }
.scheda.is-navy :focus-visible{ outline-color:var(--amber); }
.scheda.is-amber :focus-visible{ outline-color:var(--on-amber); }
@media (min-width:40rem){
  .griglia{ grid-template-columns:repeat(20, minmax(0, 1fr)); gap:20px; }
  .griglia > .scheda{ grid-column:span 10; min-height:232px; padding:32px; }
  .griglia > .scheda:nth-child(4n+1), .griglia > .scheda:nth-child(4n){ grid-column:span 12; }
  .griglia > .scheda:nth-child(4n+2), .griglia > .scheda:nth-child(4n+3){ grid-column:span 8; }
  .griglia > .scheda:last-child:nth-child(4n+1), .griglia > .scheda:last-child:nth-child(4n+3){ grid-column:1 / -1; }
}
@media (hover:hover) and (pointer:fine){ .scheda a:hover{ text-decoration-thickness:2px; } }

/* Righe: il titolo a sinistra, il testo a destra, aperte da un tratto ambra che si disegna quando arrivano in vista. */
.testo.con-righe{ display:grid; gap:0; max-width:none; }
.riga, .fatti > div, .passi li{ position:relative; display:grid; gap:var(--s-2) var(--s-8); padding:var(--s-5) 0; }
.riga::before, .fatti > div::before, .passi li::before{ content:""; position:absolute; left:0; top:0; width:72px; height:2px; background:var(--amber); transform-origin:left; }
.riga h3, .passi h3{ font-size:var(--t-h3); line-height:1.15; }
.riga .corpo, .passi p{ color:var(--ink-soft); max-width:62ch; }
.riga .corpo > * + *{ margin-top:var(--s-3); }
.riga .corpo ul, .riga .corpo ol{ margin:0; padding-left:1.25rem; }
.riga .num{ font-family:var(--font-display); font-weight:900; font-size:clamp(3rem, 7vw, 5rem); line-height:.9; color:var(--amber); font-variant-numeric:lining-nums; }
.n-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.fatti{ margin:0; display:grid; gap:0; }
.fatti dt{ font-family:var(--font-display); font-weight:900; font-size:var(--t-lead); line-height:1.25; color:var(--ink); }
.fatti dd{ margin:0; color:var(--ink-soft); max-width:62ch; }
@media (min-width:56rem){
  .riga, .fatti > div, .passi li{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:baseline; padding:var(--s-6) 0; }
  /* con il numero grande sopra il titolo: il titolo resta nella sua colonna (meta' e meta'), a due righe al massimo */
  .riga.con-num{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); }
  .riga.con-num > .num{ grid-column:1; grid-row:1; align-self:end; }
  .riga.con-num > h3{ grid-column:1; grid-row:2; }
  .riga.con-num > .corpo{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}
.passi{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:passo; }
.passi li{ counter-increment:passo; }
.passi h3::before{ content:counter(passo); display:block; margin-bottom:var(--s-2); font-size:clamp(2.6rem, 6vw, 4rem); line-height:.9; color:var(--amber); }
@media (prefers-reduced-motion: no-preference){
  .js .riga::before, .js .fatti > div::before, .js .passi li::before{ transform:scaleX(0); transition:transform 1.1s var(--ease-in-out) .25s; }
  .js .riga.visto::before, .js .fatti > div.visto::before, .js .passi li.visto::before{ transform:none; }
}
@media (hover:hover) and (pointer:fine){
  .riga, .fatti > div, .passi li{ transition:background-color .3s var(--ease-out); }
}

/* Numeri: una fascia ambra, a tutta larghezza. Contano da zero una volta, quando entrano in vista. */
.ambra{ position:relative; isolation:isolate; background:var(--amber); color:var(--on-amber); }
.ambra h2{ color:var(--on-amber); }
.numeri{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-6) var(--s-5); }
.numeri b{ display:block; font-family:var(--font-display); font-weight:900; font-size:clamp(3rem, 8vw, 5.75rem); line-height:1; letter-spacing:-.02em; color:var(--on-amber); font-variant-numeric:lining-nums tabular-nums; }
.numeri b small{ font-size:.42em; letter-spacing:0; margin-left:.12em; }
.numeri li > span{ display:block; margin-top:var(--s-2); max-width:24ch; font-weight:600; line-height:1.35; color:var(--on-amber); }
@media (min-width:56rem){ .numeri{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-6) var(--s-6); } .numeri.tre{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* Tabelle (confronti onesti, limiti): sono vere tabelle. Su telefono ogni riga diventa una scheda con l'etichetta della colonna
   sopra la cella (`data-label`, messo dal build; i ruoli ARIA pure: con `display:block` alcuni lettori di schermo perdono la tabella). */
.tabella{ overflow-x:auto; background:var(--surface); border-radius:var(--r-m); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.tabella table{ width:100%; min-width:520px; border-collapse:collapse; font-size:var(--t-body); }
.tabella caption{ text-align:left; padding:var(--s-4) var(--s-5); font-weight:700; color:var(--ink); }
.tabella th, .tabella td{ padding:var(--s-3) var(--s-5); text-align:left; vertical-align:top; border-top:1px solid var(--border); }
.tabella th{ font-weight:700; color:var(--ink); background:var(--bg-tint); }
.tabella thead th{ font-family:var(--font-display); font-weight:900; font-size:var(--t-lead); }
.tabella td{ color:var(--ink-soft); }
.tabella tbody tr{ transition:background-color .25s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .tabella tbody tr:hover td{ background:var(--bg-tint); } }
@media (max-width:39.99rem){
  .tabella{ overflow:visible; background:none; border:0; box-shadow:none; border-radius:0; }
  .tabella table, .tabella tbody, .tabella tr, .tabella th, .tabella td, .tabella caption{ display:block; min-width:0; }
  .tabella thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .tabella caption{ padding:0 0 var(--s-1); }
  .tabella tr{ margin-top:var(--s-3); border-radius:var(--r-m); background:var(--surface); border:1px solid var(--border); overflow:hidden; }
  .tabella tbody th{ border-top:0; }
  .tabella td{ padding-block:var(--s-3); }
  .tabella td::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:var(--t-small); font-weight:700; color:var(--muted); }
}

/* ---------- Fogli navy ----------
   Le fasce navy entrano come un foglio con gli angoli alti arrotondati, che si allarga fino ai bordi mentre sale. Il fondo sta
   su uno pseudo-elemento: si scala lui, non il contenuto. Il foglio si appoggia sulla sezione di sopra, qualunque colore abbia. */
.sheet{ position:relative; isolation:isolate; margin-top:calc(var(--curva) * -1); background:var(--navy); clip-path:inset(0 0 0 0 round var(--curva) var(--curva) 0 0); }
.sheet::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 50% at var(--gx, 85%) 0%, rgba(30,58,138,.9) 0%, transparent 70%), radial-gradient(circle at 1px 1px, var(--punto-chiaro) 1.1px, transparent 1.6px) 0 0 / 24px 24px;
}
.nots, .cta-band, .gesto{ background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%); }
.story{ background:var(--navy-deep); }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sheet{ animation:sheetIn linear both; animation-timeline:view(); animation-range:entry 0% entry 70%; }
  }
}
@keyframes sheetIn{
  from{ clip-path:inset(0 3% 0 3% round var(--curva) var(--curva) 0 0); }
  to{ clip-path:inset(0 0 0 0 round var(--curva) var(--curva) 0 0); }
}

.nots{ color:var(--on-navy); padding:var(--gap-sezione) 0; }
.nots h2{ color:var(--on-navy); font-size:var(--t-h2); line-height:1.12; max-width:18ch; }
.nots ul{ margin:0; padding:0; list-style:none; display:grid; gap:var(--s-4); max-width:62ch; }
.nots li{ padding-left:30px; position:relative; color:var(--on-navy-soft); font-size:var(--t-lead); line-height:1.5; }
.nots li::before{ content:""; position:absolute; left:2px; top:.7em; width:.4em; height:.4em; background:var(--amber); transform:rotate(45deg); }
.nots p{ margin-top:var(--s-5); max-width:62ch; color:var(--on-navy-soft); }
.nots a{ color:var(--amber); font-weight:600; text-underline-offset:3px; }
.nots > .wrap{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s-5); column-gap:var(--s-8); align-content:start; }
@media (min-width:56rem){
  .nots > .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .nots h2{ grid-column:1; grid-row:1 / span 2; }
  .nots ul, .nots p{ grid-column:2; }
  .nots p{ margin-top:0; }
}

/* ---------- Il racconto: la schermata resta ferma e cambia a ogni passo, il testo scorre ----------
   E' il movimento principale: spiega il prodotto. Su telefono le schermate stanno nella meta' alta dello schermo e il testo
   passa sotto; su schermo largo stanno a sinistra. */
.story{ color:var(--on-navy); padding:64px 0 56px; }
.story h2{ position:relative; z-index:3; color:var(--on-navy); font-size:var(--t-h2); line-height:1.12; max-width:20ch; }
.story-grid{ margin-top:24px; }
.story-stage{
  position:sticky; top:var(--nav-h); z-index:2;
  height:46vh; height:46svh; min-height:250px;
  margin-inline:calc(var(--gutter) * -1);
  padding:8px 0 28px;
  background:var(--navy-deep);
  display:grid; place-items:center;
}
.story-stage::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:var(--nav-h); background:linear-gradient(to bottom, transparent, var(--navy-deep) 70%); }
.story-stage::after{ content:""; position:absolute; left:0; right:0; top:100%; height:32px; background:linear-gradient(var(--navy-deep), transparent); pointer-events:none; }
@media (max-height:520px){ .story-stage{ min-height:0; } }
.stage-window{ position:relative; height:100%; width:min(250px, 66%); border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line-on-navy); background:var(--shot-bg); box-shadow:var(--shadow-stage); }
.reel{ display:flex; flex-direction:column; height:100%; transform:translateY(calc(var(--n, 0) * -100%)); transition:transform .6s var(--ease-out); }
.reel img{ flex:none; width:100%; height:100%; object-fit:cover; object-position:top; }
html:not(.js) .story-stage{ position:static; }
html:not(.js) .stage-window{ overflow-x:auto; scroll-snap-type:x mandatory; }
html:not(.js) .reel{ flex-direction:row; transform:none; }
html:not(.js) .reel img{ scroll-snap-align:start; }
html:not(.js) .stage-progress, html:not(.js) .story-stage::after{ display:none; }
.stage-progress{ position:absolute; left:0; right:0; bottom:9px; display:flex; justify-content:center; gap:8px; }
.stage-progress i{ width:26px; height:3px; border-radius:3px; background:var(--line-on-navy); transition:background .4s var(--ease-out); }
.stage-progress i.is-on{ background:var(--amber); }
.story-col{ position:relative; }
.rail{ display:none; }
.steps{ list-style:none; margin:0; padding:0; }
.step{ min-height:32vh; min-height:32svh; padding-top:24px; transition:opacity .5s var(--ease-out); }
.step h3{ color:var(--on-navy); font-size:clamp(1.5rem, 5.2vw, 2.4rem); line-height:1.15; }
.step p{ margin-top:12px; max-width:45ch; font-size:var(--t-lead); line-height:1.5; color:var(--on-navy-soft); }
.step a, .story-end a{ color:var(--amber); font-weight:600; text-underline-offset:3px; }
.story-end{ max-width:45ch; padding:8px 0 24px; font-size:var(--t-lead); line-height:1.55; color:var(--on-navy-soft); }
.story-end strong{ color:var(--on-navy); }
@media (min-width:48rem){
  /* I passi non attivi si attenuano solo dove ogni passo ha lo schermo per se', e solo se c'e' lo script che li riaccende. */
  html.js .step{ opacity:.6; }
  html.js .step.is-active{ opacity:1; }
  .story{ padding:112px 0 104px; }
  .story::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(70% 50% at var(--gx, 85%) 0%, var(--navy) 0%, transparent 70%), radial-gradient(circle at 1px 1px, var(--punto-chiaro) 1.1px, transparent 1.6px) 0 0 / 24px 24px; }
  .story-grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(32px, 6vw, 96px); margin-top:0; }
  .story-stage{ top:calc(var(--nav-h) + 20px); height:calc(100vh - var(--nav-h) - 40px); height:calc(100svh - var(--nav-h) - 40px); min-height:0; margin-inline:0; padding:0; background:none; }
  .story-stage::before, .story-stage::after{ display:none; }
  .stage-window{ height:min(100%, 620px); width:auto; aspect-ratio:640/1385; }
  .stage-progress{ display:none; }
  .story-col{ padding-left:40px; }
  .rail{ display:block; position:absolute; left:0; top:12vh; bottom:12vh; width:2px; border-radius:2px; background:var(--line-on-navy); overflow:hidden; }
  .rail span{ position:absolute; inset:0; background:var(--amber); transform-origin:top; transform:scaleY(var(--p, .25)); transition:transform .8s var(--ease-out); }
  .step{ min-height:76vh; min-height:76svh; padding-top:0; display:flex; flex-direction:column; justify-content:center; }
  .story-end{ padding-bottom:12vh; }
}

/* ---------- Domande: testo da leggere, non una fisarmonica. La domanda in grassetto, la risposta sotto. ---------- */
.faq-list{ display:grid; gap:0; max-width:68ch; }
.faq-item{ position:relative; display:grid; gap:var(--s-2); padding:var(--s-5) 0; }
.faq-item::before{ content:""; position:absolute; left:0; top:0; width:72px; height:2px; background:var(--amber); transform-origin:left; }
.faq-q{ font-family:var(--font-body); font-weight:700; font-size:var(--t-lead); letter-spacing:0; line-height:1.35; color:var(--ink); text-wrap:pretty; }
.faq-answer{ color:var(--ink-soft); line-height:1.65; max-width:64ch; }
.faq-answer > * + *{ margin-top:var(--s-3); }
@media (prefers-reduced-motion: no-preference){
  .js .faq-item::before{ transform:scaleX(0); transition:transform 1.1s var(--ease-in-out) .25s; }
  .js .faq-item.visto::before{ transform:none; }
}

/* ---------- Pagine collegate: tre riquadri che si inclinano, con la freccia che scorre ---------- */
.correlate{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:var(--s-4); }
.correlate a{
  position:relative; isolation:isolate; overflow:hidden; display:grid; gap:var(--s-2); align-content:end; min-height:168px; padding:var(--s-5);
  border-radius:var(--r-m); background:var(--surface); border:1px solid var(--border); text-decoration:none; color:var(--ink);
  transform:perspective(1400px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition:transform .6s var(--ease-out), border-color .25s var(--ease-out);
}
.correlate a::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); opacity:0; transition:opacity .4s var(--ease-out); }
.correlate a.is-hot{ transition-duration:.2s; }
.correlate a.is-hot::after{ opacity:1; }
.correlate strong{ font-family:var(--font-display); font-weight:900; font-size:var(--t-h3); line-height:1.15; }
.correlate strong::after{ content:"\00A0\2192"; font-family:var(--font-body); font-weight:600; color:var(--link); position:relative; left:0; transition:left .3s var(--ease-out); }
.correlate span{ color:var(--ink-soft); max-width:46ch; }
@media (min-width:48rem){ .correlate{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } .block > .wrap > .correlate{ grid-column:1 / -1; margin-top:var(--s-5); } }
@media (hover:hover) and (pointer:fine){ .correlate a:hover strong::after{ left:6px; } .correlate a:hover{ border-color:var(--link); } }
#altro-titolo{ font-size:var(--t-h3); }

/* ---------- Fascia finale: una frase, un bottone. Si accende dove passa il cursore. ---------- */
.cta-band{ color:var(--on-navy); padding:var(--gap-sezione) 0; overflow:clip; }
.cta-band > .sheet-luce{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); opacity:0; transition:opacity .4s var(--ease-out); }
.cta-band.is-lit > .sheet-luce{ opacity:1; }
.cta-band > .wrap{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s-5); column-gap:var(--s-8); align-content:start; }
.cta-band h2{ color:var(--on-navy); font-size:var(--t-h2); line-height:1.12; max-width:16ch; }
.cta-band .note{ max-width:50ch; color:var(--on-navy-soft); font-size:var(--t-body); }
.cta-band .azioni{ margin-top:var(--s-2); }
@media (min-width:56rem){
  .cta-band > .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .cta-band h2{ grid-column:1; grid-row:1 / span 3; }
  .cta-band .note, .cta-band .azioni{ grid-column:2; }
}

/* ---------- Piede ---------- */
footer{ padding:var(--s-7) 0 var(--s-6); }
.piede-griglia{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-4) var(--s-5); }
.piede-marca{ grid-column:1 / -1; }
.piede-marca .brand-word{ font-size:24px; }
.piede-tag{ margin-top:var(--s-2); max-width:34ch; color:var(--ink-soft); font-size:var(--t-body); }
.piede-titolo{ font-family:var(--font-body); font-weight:700; font-size:var(--t-body); color:var(--ink); }
.piede-col ul{ margin:var(--s-2) 0 0; padding:0; list-style:none; }
.piede-col a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--ink-soft); }
.piede-fine{ margin-top:var(--s-6); padding-top:var(--s-5); display:flex; flex-wrap:wrap; gap:4px 20px; font-size:var(--t-small); color:var(--muted); }
.piede-fine a{ display:inline-flex; align-items:center; min-height:44px; color:var(--muted); }
@media (hover:hover) and (pointer:fine){ .piede-col a:hover, .piede-fine a:hover{ color:var(--link); text-decoration:underline; } }
@media (min-width:40rem){ .piede-griglia{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:64rem){ .piede-griglia{ grid-template-columns:1.2fr repeat(3, 1fr); gap:var(--s-7); } .piede-marca{ grid-column:auto; } }

/* ---------- Prova tu ----------
   Non e' una schermata finta: e' una prenotazione che funziona davvero,
   semplificata e dichiarata come dimostrazione. Da una parte quello che vede
   il cliente, dall'altra la tua agenda: alla conferma l'appuntamento ci entra
   al suo posto, e si vede succedere. */
.try{ background:var(--bg-tint); }
/* Senza script i pulsanti della prova non farebbero niente: meglio non
   mostrarla che mostrarla rotta. */
html:not(.js) .try{ display:none; }
.try-head{ text-align:center; }
.try-head h2{ font-size:clamp(2rem, 4.4vw, 3.2rem); }
.try-head .lead{ margin-inline:auto; }
.try-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:20px; max-width:430px; margin:36px auto 0; }
.card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-l); box-shadow:var(--shadow-soft); overflow:hidden; }
.demo-top, .agenda-top{ display:flex; align-items:center; gap:12px; padding:16px 20px 12px; }
/* Il verde e' del negozio di prova, non di Laika: e' il punto del prodotto,
   i colori li sceglie il negozio. */
.demo-avatar{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--demo-shop); color:var(--on-navy); font-family:var(--font-display); font-weight:900; font-size:1.1rem; }
.card-name strong{ display:block; font-size:1rem; line-height:1.2; }
.card-name span{ display:block; font-size:.82rem; color:var(--muted); }
.demo-progress{ height:3px; background:var(--bg-tint); }
.demo-progress span{ display:block; height:100%; background:var(--link); transform-origin:left; transform:scaleX(var(--p, .34)); transition:transform .6s var(--ease-out); }
.demo-panels{ display:grid; }
.demo-panel{ grid-area:1 / 1; min-width:0; padding:20px 20px 8px; opacity:0; visibility:hidden; transform:translateX(30px); transition:opacity .3s var(--ease-out), transform .5s var(--ease-out), visibility 0s linear .3s; }
.demo-panel.is-prev{ transform:translateX(-30px); }
.demo-panel.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.demo-panel h3{ font-size:1.4rem; line-height:1.15; }
/* Il titolo del pannello riceve il fuoco solo per dire dove si e' arrivati:
   non e' un comando, quindi niente contorno. */
.demo-panel h3:focus{ outline:none; }
.demo-panel .hint{ margin-top:4px; font-size:.88rem; color:var(--muted); }
/* Le scelte sono pulsanti radio veri, nascosti dentro l'etichetta: si
   scelgono col dito, col mouse e con le frecce della tastiera, e chi usa un
   lettore di schermo sente "uno di tre". */
.opt{
  position:relative;
  width:100%; min-height:56px; margin-top:12px; padding:12px;
  display:flex; align-items:center; gap:12px;
  color:var(--ink);
  border:1px solid var(--control); border-radius:var(--r-s);
  cursor:pointer;
  transition:border-color .2s var(--ease-out), background .2s var(--ease-out), transform .12s var(--ease-out);
}
.opt input, .chip input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.opt:active{ transform:scale(.985); }
.opt .tick{ width:20px; height:20px; flex:none; border-radius:50%; border:2px solid var(--control); display:grid; place-items:center; transition:border-color .2s var(--ease-out), background .2s var(--ease-out); }
.opt .tick::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--surface); transform:scale(0); transition:transform .25s var(--ease-out); }
.opt .name{ font-weight:600; line-height:1.25; }
.opt .meta{ display:block; font-size:.8rem; font-weight:400; color:var(--muted); }
.opt .price{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.opt:has(input:checked){ border-color:var(--link); background:var(--bg-tint); box-shadow:inset 0 0 0 1px var(--link); }
.opt:has(input:checked) .tick{ border-color:var(--link); background:var(--link); }
.opt:has(input:checked) .tick::after{ transform:scale(1); }
.opt:has(input:focus-visible), .chip:has(input:focus-visible){ outline:2px solid var(--link); outline-offset:3px; }
/* Le stesse regole senza :has(), per i browser che non lo conoscono (la
   classe la mette lo script a ogni scelta). Stanno a parte perche' un elenco
   di selettori con dentro :has() verrebbe scartato per intero. */
.opt.is-checked{ border-color:var(--link); background:var(--bg-tint); box-shadow:inset 0 0 0 1px var(--link); }
.opt.is-checked .tick{ border-color:var(--link); background:var(--link); }
.opt.is-checked .tick::after{ transform:scale(1); }
@supports not selector(:has(a)){
  .opt:focus-within, .chip:focus-within{ outline:2px solid var(--link); outline-offset:3px; }
}
.chips{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px; }
.chip{ position:relative; display:grid; place-items:center; min-height:48px; border-radius:var(--r-s); border:1px solid var(--control); color:var(--ink); font:600 .95rem/1 var(--font-body); font-variant-numeric:tabular-nums; cursor:pointer; transition:border-color .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out), transform .12s var(--ease-out); }
.chip:active{ transform:scale(.97); }
.chip:has(input:checked){ background:var(--navy); border-color:var(--navy); color:var(--on-navy); }
.chip.is-checked{ background:var(--navy); border-color:var(--navy); color:var(--on-navy); }
@media (prefers-color-scheme: dark){
  .chip:has(input:checked){ background:var(--amber); border-color:var(--amber); color:var(--on-amber); }
  .chip.is-checked{ background:var(--amber); border-color:var(--amber); color:var(--on-amber); }
}
@media (hover: hover) and (pointer: fine){
  .opt:hover, .chip:hover{ border-color:var(--link); }
  .demo-again:hover{ color:var(--ink); }
}
.done{ display:flex; align-items:flex-start; gap:12px; }
.done-badge{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--demo-shop); transform:scale(.4); opacity:0; transition:transform .5s var(--ease-out) .15s, opacity .3s var(--ease-out) .15s; }
.done-badge::after{ content:""; width:9px; height:17px; margin-top:-3px; border:solid var(--on-navy); border-width:0 3px 3px 0; transform:rotate(45deg); }
.is-on .done-badge{ transform:none; opacity:1; }
.done p{ margin-top:2px; color:var(--ink-soft); }
/* Il posto per due righe c'e' da subito: alla conferma il riquadro non deve
   allungarsi sotto il dito. */
.done-what{ min-height:3.1em; }
.done-next{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); font-size:.92rem; color:var(--ink-soft); }
.demo-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px; padding:8px 8px 8px 16px; border-radius:var(--r-m); background:var(--bg-tint); }
.demo-sum{ min-width:0; }
.demo-sum strong{ display:block; font-variant-numeric:tabular-nums; }
.demo-sum span{ display:block; font-size:.8rem; color:var(--muted); white-space:nowrap; }
.demo-next{ min-width:116px; }
/* "Spento" si dice con aria-disabled, non con disabled: un bottone davvero
   disabilitato perde il fuoco, e chi naviga da tastiera si ritrovava in cima
   alla pagina dopo aver premuto Avanti. */
.demo-next[aria-disabled="true"]{ background:var(--off-fill); color:var(--off-ink); cursor:not-allowed; box-shadow:none; }
.demo-next[aria-disabled="true"]::after{ display:none; }
.demo-go.is-wait{ pointer-events:none; }
/* A prenotazione fatta il bottone ambra non dice "Ricomincia": dice la cosa
   che a quel punto ha senso fare. Ricominciare resta, in piccolo. */
/* Stanno nella stessa barra: il riquadro non si allunga quando compaiono.
   Nel codice il bottone ambra viene prima (e' il primo che trova il Tab), a
   schermo sta a destra. */
.demo-bar.is-done{ flex-direction:row-reverse; padding:8px 8px 8px 12px; }
.demo-bar.is-done .btn{ padding-inline:16px; }
.demo-again{ min-width:44px; min-height:44px; padding:0; background:none; border:0; font:500 .9rem/1 var(--font-body); color:var(--ink-soft); text-decoration:underline; text-underline-offset:4px; white-space:nowrap; cursor:pointer; }

/* L'agenda del negozio. Le righe stanno a posizioni calcolate: quando entra
   l'appuntamento nuovo le altre scivolano al loro posto, senza che il
   riquadro cambi altezza. */
.agenda{ --row:56px; }
.agenda-meta{ margin-left:auto; text-align:right; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.agenda-meta b{ display:block; font-size:1rem; color:var(--ink); }
.agenda-rows{ position:relative; height:calc(var(--row) * 4); margin:4px 20px 0; padding:0; list-style:none; }
.agenda-row, .agenda-slot{ position:absolute; left:0; right:0; top:0; height:calc(var(--row) - 8px); transform:translateY(calc(var(--i) * var(--row))); }
.agenda-row{ display:grid; grid-template-columns:48px minmax(0, 1fr) auto; align-items:center; gap:8px; padding:0 12px; border-radius:var(--r-s); background:var(--bg-tint); border-left:3px solid var(--link); font-weight:600; font-size:.92rem; transition:transform .8s var(--ease-out), opacity .4s var(--ease-out); }
.agenda-row .t{ font-size:.8rem; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; }
.agenda-row .s{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agenda-row .w{ font-size:.8rem; font-weight:500; color:var(--muted); white-space:nowrap; }
.agenda-row.is-new{ border-left-color:var(--amber); opacity:0; }
.agenda-row.is-new .w{ padding:4px 8px; border-radius:var(--r-pill); background:var(--amber); color:var(--on-amber); font-weight:600; }
.agenda.has-new .agenda-row.is-new{ opacity:1; }
.agenda-slot{ display:grid; place-items:center; padding:0 12px; border:1px dashed var(--control); border-radius:var(--r-s); font-size:.85rem; color:var(--muted); text-align:center; transition:opacity .3s var(--ease-out); }
.agenda.has-new .agenda-slot{ opacity:0; }
.agenda-wa{ margin:4px 20px 20px; font-size:.86rem; line-height:1.45; color:var(--ink-soft); opacity:0; transition:opacity .5s var(--ease-out) .5s; }
.agenda.has-new .agenda-wa{ opacity:1; }
/* Un anello ambra, una volta, nel momento in cui l'appuntamento arriva. */
.agenda::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--amber); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
  .agenda.has-new::after{ animation:ring 1.1s var(--ease-out) .1s both; }
}
@keyframes ring{ from{ opacity:.9; transform:scale(.985); } to{ opacity:0; } }
.demo-note{ margin:20px auto 0; max-width:52ch; text-align:center; font-size:.82rem; color:var(--muted); }
@media (min-width:48rem){
  .try-grid{ grid-template-columns:repeat(2, minmax(0, 400px)); justify-content:center; align-items:start; gap:28px; max-width:none; }
}
@media (min-width:64rem){ .try-grid{ gap:48px; } }


/* Nella pagina interna il titolo e l'attacco della prova stanno al centro, come in home, e il campo e' di tono. */
.block.try > .wrap{ display:block; }
.try-head h2{ font-size:var(--t-h2); margin-inline:auto; max-width:none; }
.try-head .lead{ margin-inline:auto; }
.agenda-row.is-new{ transition:transform .8s var(--ease-out), opacity .4s var(--ease-out); }
.opt .meta, .demo-sum span, .agenda-row .t, .agenda-row .w{ font-size:.8125rem; }

/* ---------- Rifiniture ----------
   Dal registro di shadcn, portate a CSS (il sito e' HTML statico, senza React): dal registro Magic UI il «dot-pattern» (una trama
   di punti che sfuma), il «border-beam» (un filo di luce che gira sul bordo), la «magic-card» (il bordo che si accende dove passa
   il cursore) e lo «shimmer-button» (un riflesso che gira attorno al bottone); un'aurora lenta nei fogli navy. Nessuna regge il
   significato di una pagina: con «riduci movimento» restano la trama e i riquadri fermi. */
@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@property --gx{ syntax:"<percentage>"; inherits:false; initial-value:85%; }
:root{ --punto:rgba(12,26,74,.17); --punto-chiaro:rgba(255,255,255,.09); --punto-ambra:rgba(36,21,3,.17); }
@media (prefers-color-scheme: dark){ :root{ --punto:rgba(255,255,255,.12); } }

/* la trama di punti: sotto la testata, nei campi di tono e nella fascia ambra; sfuma verso i bordi */
.testa::after, .block.tinta::before, .ambra::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, var(--punto) 1.1px, transparent 1.6px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 80% at 72% 30%, #000 0%, transparent 74%);
  mask-image:radial-gradient(70% 80% at 72% 30%, #000 0%, transparent 74%);
}
.ambra::before{ background-image:radial-gradient(circle at 1px 1px, var(--punto-ambra) 1.1px, transparent 1.6px); }

/* un filo di luce ambra gira sul bordo dei riquadri della testata */
@media (prefers-reduced-motion: no-preference){
  .frammento:not(.nudo)::before{
    content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
    background:conic-gradient(from var(--ang), transparent 0 62%, var(--amber) 84%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
    animation:ruota 7s linear infinite;
  }
  /* un riflesso gira attorno al bottone finale */
  .cta-band .btn-primary{
    border:2px solid transparent;
    background:linear-gradient(var(--amber), var(--amber)) padding-box, conic-gradient(from var(--ang), transparent 0 58%, rgba(255,255,255,.95) 80%, transparent 100%) border-box;
    animation:ruota 4.5s linear infinite;
  }
  /* la luce navy dei fogli si sposta piano */
  .sheet::after{ animation:aurora 18s ease-in-out infinite alternate; }
}
@keyframes ruota{ to{ --ang:360deg; } }
@keyframes aurora{ from{ --gx:68%; } to{ --gx:98%; } }

/* I titoli stanno in due righe a ogni larghezza (misurato a 320, 360, 390, 768, 1024, 1366, 1440 e 1908 px): la misura scende con
   lo spazio della colonna, che da 56rem e' il 7/12 (testata) o il 5/12 (titoli di sezione) della pagina. */
@media (max-width:25rem){
  .testa h1{ font-size:min(var(--t-h1), calc((100vw - 2rem) / 10.4)); }
}
@media (min-width:56rem){
  .testa h1{ font-size:min(var(--t-h1), calc((100vw - 7rem) * .058)); }
  .block h2, .nots h2, .cta-band h2, .gesto h2{ font-size:min(var(--t-h2), calc((min(100vw, 1180px) - 7rem) * .0395)); }
}

/* il bordo dei riquadri chiari si accende dove passa il cursore (magic-card) */
.scheda:not(.is-navy):not(.is-amber).is-hot, .correlate a.is-hot{
  border-color:transparent;
  background:linear-gradient(var(--surface) 0 0) padding-box, radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--amber), var(--border) 100%) border-box;
}

/* ---------- Il gesto ----------
   Uno per pagina: la cosa che quel mestiere fa e gli altri no, disegnata in grande e, dove serve, da provare con un dito.
   E' un'illustrazione con dati di fantasia dichiarati (non una schermata del prodotto): il testo che dice la stessa cosa sta
   accanto, quindi niente va perso a chi non la vede. Senza script resta lo stato finale; con «riduci movimento» non si muove
   niente da solo. */
.gesto{ color:var(--on-navy); padding:var(--gap-sezione) 0; }
.gesto > .wrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-7); align-items:center; }
.gesto h2{ color:var(--on-navy); font-size:var(--t-h2); line-height:1.12; max-width:16ch; }
.gesto-testo{ min-width:0; }
.gesto-testo > * + *{ margin-top:var(--s-4); }
.gesto-testo .lead{ max-width:44ch; font-size:var(--t-lead); line-height:1.55; color:var(--on-navy); }
.gesto-testo p{ max-width:50ch; color:var(--on-navy-soft); }
.gesto-testo p.lead{ color:var(--on-navy); }
.gesto-testo strong{ color:var(--on-navy); }
.gesto-testo a{ color:var(--amber); font-weight:600; text-underline-offset:3px; }
.gesto-tasto{ margin-top:var(--s-5); }
.gesto > .wrap > .finestra{ grid-column:1 / -1; width:100%; max-width:64rem; margin-inline:auto; }
@media (min-width:56rem){
  .gesto > .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--s-8); }
}

/* La scena: una scheda chiara-su-navy con dentro il disegno. */
.scena{ --colore:#b4396e; position:relative; margin:0; min-width:0; padding:var(--s-5); border-radius:var(--r-l); background:rgba(255,255,255,.06); border:1px solid var(--line-on-navy); box-shadow:var(--shadow-stage); color:var(--on-navy); }
.scena-testa{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-5); }
.scena-titolo{ font-weight:700; line-height:1.25; }
.scena-nota{ display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:var(--r-pill); background:var(--tint-on-navy); border:1px solid var(--line-on-navy); font-size:.8125rem; font-weight:600; color:var(--on-navy-soft); white-space:nowrap; }
.scena figcaption{ margin-top:var(--s-4); font-size:var(--t-small); line-height:1.5; color:var(--on-navy-soft); }
.scena figcaption strong{ color:var(--on-navy); }
.scena-vede{ margin-top:var(--s-4); font-size:var(--t-small); color:var(--on-navy-soft); }
.scena-vede strong{ display:inline-block; margin-left:.35em; padding:.2rem .7rem; border-radius:var(--r-pill); background:var(--tint-on-navy); border:1px solid var(--line-on-navy); color:var(--on-navy); }

/* I blocchi di tempo: un colore per il lavoro, righe oblique per la posa, ambra per l'altro cliente. */
.blocco{ position:absolute; display:grid; align-content:center; padding:0 .5rem; border-radius:9px; overflow:hidden; font-size:.8125rem; line-height:1.2; white-space:nowrap; transition:opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.blocco b{ font-weight:700; }
.blocco i{ font-style:normal; font-size:.8125rem; opacity:.92; }
.blocco.lavoro{ background:var(--colore); color:#fff; }
.blocco.posa{ color:#fff; border:1.5px solid rgba(255,255,255,.5); background:repeating-linear-gradient(135deg, rgba(180,57,110,.58) 0 7px, rgba(180,57,110,.22) 7px 14px); }
.blocco.altro{ background:var(--amber); color:var(--on-amber); box-shadow:var(--glow-amber); }
.blocco.libera{ border:1.5px dashed rgba(255,255,255,.45); color:var(--on-navy-soft); opacity:0; }
.js .scena[data-stato="senza"] .blocco.altro{ opacity:0; transform:translateY(8px) scale(.94); }
.js .scena[data-stato="senza"] .blocco.libera{ opacity:1; }

/* Gesto «la posa»: due corsie sullo stesso asse del tempo. */
.traccia{ position:relative; display:grid; gap:var(--s-2); padding-top:1.7rem; }
.traccia::before{ content:""; position:absolute; top:1.5rem; bottom:0; left:calc(var(--pda) / var(--tot) * 100%); width:calc(var(--pdur) / var(--tot) * 100%); border-inline:1.5px solid rgba(255,255,255,.2); border-radius:6px; background:linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.02)); pointer-events:none; }
.asse{ position:absolute; inset:0 0 auto 0; height:1.3rem; font-size:.8125rem; line-height:1.3rem; color:var(--on-navy-soft); font-variant-numeric:tabular-nums; }
.asse span{ position:absolute; left:calc(var(--t) / var(--tot) * 100%); transform:translateX(-50%); white-space:nowrap; }
.asse span:first-child{ transform:none; }
.asse span:last-child{ transform:translateX(-100%); }
.corsia-nome{ position:relative; margin-top:var(--s-2); font-size:.8125rem; font-weight:600; color:var(--on-navy-soft); }
.corsia{ position:relative; height:3.4rem; border-radius:var(--r-s); background:rgba(255,255,255,.05); }
.corsia .blocco{ top:4px; bottom:4px; left:calc(var(--da) / var(--tot) * 100%); width:calc(var(--dur) / var(--tot) * 100% - 2px); }

/* Gesto «la durata»: il giorno di un collaboratore in verticale, e un cursore per la durata. */
.durata{ display:grid; gap:var(--s-5); }
.durata-comandi{ display:grid; gap:var(--s-3); align-content:start; }
html:not(.js) .durata-riga, html:not(.js) .durata-comandi input, html:not(.js) .durata-preset, html:not(.js) .gesto-tasto{ display:none; }
.durata-riga{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-1); }
.durata-riga label{ font-weight:600; }
.durata-valore{ white-space:nowrap; font-family:var(--font-display); font-weight:900; font-size:var(--t-h3); line-height:1; color:var(--amber); font-variant-numeric:lining-nums tabular-nums; }
.scena input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; background:transparent; cursor:pointer; touch-action:pan-y; }
.scena input[type="range"]::-webkit-slider-runnable-track{ height:8px; border-radius:var(--r-pill); background:linear-gradient(to right, var(--amber) 0 var(--riempi, 25%), rgba(255,255,255,.42) var(--riempi, 25%) 100%); }
.scena input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; margin-top:-10px; border-radius:50%; background:var(--amber); border:3px solid var(--navy-deep); box-shadow:0 0 0 2px var(--amber), var(--glow-amber); }
.scena input[type="range"]::-moz-range-track{ height:8px; border-radius:999px; background:rgba(255,255,255,.42); }
.scena input[type="range"]::-moz-range-progress{ height:8px; border-radius:999px; background:var(--amber); }
.scena input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--amber); border:3px solid var(--navy-deep); box-shadow:0 0 0 2px var(--amber); }
.scena input[type="range"]:focus-visible{ outline:2px solid var(--amber); outline-offset:4px; }
.durata-preset{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.durata-preset button{ min-height:44px; padding:0 var(--s-4); border-radius:var(--r-pill); border:1px solid var(--line-on-navy); background:var(--tint-on-navy); color:var(--on-navy); font:600 var(--t-small)/1.2 var(--font-body); cursor:pointer; transition:background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out); }
.durata-preset button[aria-pressed="true"]{ background:var(--amber); border-color:var(--amber); color:var(--on-amber); }
.durata-esito{ font-size:var(--t-small); line-height:1.5; color:var(--on-navy-soft); }
.giorno{ --alto:280px; display:grid; grid-template-columns:1.6rem minmax(0,1fr) 12px; gap:0 var(--s-2); align-items:start; }
.giorno-ore{ position:relative; height:var(--alto); font-size:.8125rem; color:var(--on-navy-soft); font-variant-numeric:tabular-nums; }
.giorno-ore span{ position:absolute; right:0; top:calc(var(--h) / 10 * 100%); transform:translateY(-50%); }
.giorno-colonna{ position:relative; height:var(--alto); border-radius:var(--r-s); overflow:hidden; background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--alto) / 10 - 1px), rgba(255,255,255,.13) calc(var(--alto) / 10 - 1px) calc(var(--alto) / 10)), rgba(255,255,255,.05); }
.giorno .blocco{ top:0; left:4px; right:4px; height:calc(var(--min) / 600 * 100%); min-height:3px; align-content:start; padding:3px .6rem; background:var(--colore); color:#fff; border-radius:8px; transition:height .14s linear; }
.giorno .blocco.corto b, .giorno .blocco.corto i{ display:none; }
.giorno .blocco.medio i{ display:none; }
.giorno-orari{ position:relative; height:var(--alto); border-radius:var(--r-pill); overflow:hidden; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.22) 0 2px, transparent 2px calc(var(--alto) / 40)); }
.giorno-orari::after{ content:""; position:absolute; left:0; right:0; top:0; height:calc((600 - var(--min)) / 600 * var(--alto) + 2px); background:repeating-linear-gradient(to bottom, var(--amber) 0 2px, transparent 2px calc(var(--alto) / 40)); }
@media (min-width:40rem){
  .durata{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center; column-gap:var(--s-6); }
  .giorno{ --alto:340px; }
}

/* Gesto «in due»: l'interruttore dell'app («Porti qualcuno con te?») e due biglietti, uno per persona. */
.interruttore{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); width:100%; min-height:56px; padding:var(--s-3) var(--s-4); border-radius:var(--r-m); border:1px solid var(--line-on-navy); background:var(--tint-on-navy); color:var(--on-navy); font:600 var(--t-body)/1.25 var(--font-body); text-align:left; cursor:pointer; }
.interruttore small{ display:block; margin-top:2px; font-weight:400; font-size:var(--t-small); color:var(--on-navy-soft); }
.interruttore i{ position:relative; flex:none; width:52px; height:30px; border-radius:var(--r-pill); background:rgba(255,255,255,.42); transition:background .25s var(--ease-out); }
.interruttore i::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .3s var(--ease-out); }
.interruttore[aria-checked="true"] i{ background:var(--amber); }
.interruttore[aria-checked="true"] i::after{ transform:translateX(22px); background:var(--on-amber); }
.biglietti{ display:grid; gap:var(--s-3); margin-top:var(--s-4); }
.biglietto{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--s-3); align-items:center; padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5); border-radius:var(--r-m); background:#fdfdff; color:#0a0e1a; box-shadow:var(--shadow-card); transition:opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.biglietto::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:5px; border-radius:0 4px 4px 0; background:var(--amber); }
.bi-chi, .bi-cosa, .bi-meta{ grid-column:1; }
.bi-chi{ font-size:.8125rem; font-weight:700; color:#4c5568; }
.bi-cosa{ font-family:var(--font-display); font-weight:900; font-size:var(--t-lead); line-height:1.15; color:#0a0e1a; }
.bi-meta{ font-size:var(--t-small); color:#333d52; font-variant-numeric:tabular-nums; }
.bi-ora{ grid-column:2; grid-row:1 / span 3; align-self:center; padding:.35rem .85rem; border-radius:var(--r-pill); background:var(--amber); color:var(--on-amber); font-weight:700; font-variant-numeric:tabular-nums; }
.biglietti-posto{ display:grid; }
.biglietti-posto > *{ grid-area:1 / 1; }
.biglietto.vuoto{ display:grid; place-items:center; min-height:6rem; background:rgba(255,255,255,.07); color:var(--on-navy-soft); box-shadow:none; opacity:0; text-align:center; }
.biglietto.vuoto::before{ display:none; }
.js .scena[data-stato="senza"] .biglietto.due{ opacity:0; transform:translateY(12px) scale(.96); }
.js .scena[data-stato="senza"] .biglietto.vuoto{ opacity:1; }
html:not(.js) .interruttore{ display:none; }
@media (min-width:40rem){ .biglietti{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; } }

/* «Per essere chiari» chiaro: lo stesso elenco, su un campo di tono invece che su un foglio navy (dove il foglio navy e' gia' il gesto). */
.nots.chiaro{ background:transparent; color:var(--ink); padding-top:var(--s-8); }
.nots.chiaro h2{ color:var(--ink); }
.nots.chiaro li, .nots.chiaro p{ color:var(--ink-soft); }
.nots.chiaro a{ color:var(--link); }
.nots.chiaro :focus-visible{ outline-color:var(--link); }

/* ---------- Movimento ----------
   L'entrata della testata e' solo CSS: non dipende da nessuno script, quindi il titolo non puo' restare nascosto. Le entrate
   allo scroll nascondono una parte solo se c'e' lo script che la mostra (`.js`), e dopo 4 secondi si vede tutto lo stesso.
   Ogni cosa entra a modo suo: i titoli salgono da una maschera, i riquadri crescono, le righe si disegnano, i numeri contano.
   Le entrate usano `translate`, `scale` e `opacity` (non `transform`), cosi' convivono con l'inclinazione del riquadro. */
@media (prefers-reduced-motion: no-preference){
  .enter{ animation:enter .8s var(--ease-out) both; animation-delay:calc(var(--d, 0) * 90ms); }
  .frammento.enter{ animation-name:enterT; }
  .testa h1 .mask > span{ animation:maskUp 1s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 120ms + 60ms); }
  .hl::after{ animation:sottolinea .9s var(--ease-in-out) 1.05s both; }
  .shot-wrap .shot, .win-wrap .win{ animation:shotIn 1.1s var(--ease-out) both; }
  .shot-wrap.front .shot, .win-wrap.front .win{ animation-delay:.3s; }
  .shot-wrap.back .shot, .win-wrap.back .win{ animation-delay:.48s; }
  .shots figcaption, .finestre figcaption{ animation:fadeIn .8s var(--ease-out) .9s both; }
  .frammento .fr-riga, .frammento .fr-bolla, .frammento .fr-meta, .frammento .fr-chip, .frammento .fr-scorta, .frammento .fp-lista li, .frammento .fr-barre li, .frammento.fr-fan span, .fv-col{
    animation:frIn .7s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 110ms + 450ms);
  }
  .frammento .fr-barre i, .frammento .fr-livello i{ animation:cresce 1.1s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 120ms + 700ms); }
  .frammento .fr-chip.ok::before{ animation:pop .5s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 110ms + 700ms); }

  /* entrate allo scroll */
  .js :is(.block .lead, .scheda, .riga, .fatti > div, .passi li, .faq-item, .tabella, .correlate a, .nots li, .nots p, .cta-band .note, .cta-band .azioni, .numeri li, .story-end, .piede-marca, .piede-col){
    transition:opacity .8s var(--ease-out), translate .8s var(--ease-out), scale .8s var(--ease-out);
    transition-delay:calc(var(--d, 0) * 90ms);
  }
  .js :is(.scheda, .correlate a, .finestra){ transition:opacity .8s var(--ease-out), translate .8s var(--ease-out), scale .8s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), 0s; }
  .js :is(.block .lead, .riga, .fatti > div, .passi li, .faq-item, .tabella, .nots li, .nots p, .cta-band .note, .cta-band .azioni, .story-end, .piede-marca, .piede-col):not(.visto){
    opacity:0; translate:0 1.5rem; animation:rivela 0s linear 4s forwards;
  }
  .js :is(.scheda, .correlate a, .finestra):not(.visto){ opacity:0; translate:0 2rem; scale:.96; animation:rivela 0s linear 4s forwards; }
  .js .numeri li:not(.visto){ opacity:0; translate:0 1.2rem; animation:rivela 0s linear 4s forwards; }
  .js .try .card{ transition:opacity .8s var(--ease-out), translate .8s var(--ease-out); transition-delay:calc(var(--d, 0) * 90ms); }
  .js .try .card:not(.visto){ opacity:0; translate:0 2rem; animation:rivela 0s linear 4s forwards; }
  .js .scena{ transition:opacity .8s var(--ease-out), translate .8s var(--ease-out); }
  .js .scena:not(.visto){ opacity:0; translate:0 2rem; animation:rivela 0s linear 4s forwards; }
  /* i titoli di sezione: una maschera, come quelli della testata */
  .js .rv-mask .mask > span{ transform:translateY(112%); transition:transform 1s var(--ease-out); transition-delay:calc(var(--i, 0) * 120ms + 60ms); animation:rivelaMaschera 0s linear 4s forwards; }
  .js .rv-mask.visto .mask > span{ transform:none; }
  /* i fogli e le fasce */
  .js .nots li{ transition-delay:calc(var(--d, 0) * 90ms); }
}
@keyframes enter{ from{ opacity:0; transform:translateY(24px); } }
@keyframes enterT{ from{ opacity:0; translate:0 24px; } }
@keyframes maskUp{ from{ transform:translateY(112%); } }
@keyframes sottolinea{ from{ transform:scaleX(0); } }
@keyframes shotIn{ from{ opacity:0; transform:translateY(56px) scale(.96); } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes frIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
@keyframes cresce{ from{ transform:scaleX(0); } }
@keyframes pop{ from{ opacity:0; transform:rotate(45deg) scale(.2); } }
@keyframes rivela{ to{ opacity:1; translate:none; scale:none; } }
@keyframes rivelaMaschera{ to{ transform:none; } }

/* Da una pagina all'altra il browser dissolve invece di scattare (dove lo sa fare); la testata resta ferma. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  header.nav{ view-transition-name:testata-sito; }
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.3s; }
}

/* Movimento ridotto: le entrate e tutto cio' che e' legato allo scroll stanno gia' dentro `no-preference`. Qui si spengono
   gli spostamenti che restano nei cambi di stato: resta una dissolvenza breve. */
@media (prefers-reduced-motion: reduce){
  .shots-tilt, .frammento, .scheda, .correlate a, .finestra, .btn, .testa::before, .reel, .rail span, .nav-row::before, .nav-links a::after, .btn-primary::after, .blocco, .biglietto, .durata-preset button, .interruttore i, .interruttore i::after{ transition:none; }
  .step{ transition-duration:.15s; }
}

/* --------------------------------------------------------------------------------------------------------------------
   Pagina Prezzo: la cassa che stampa il conto (scelta da Salvatore il 26/10/2026 fra tre proposte).
   A sinistra la data di fine prova su un foglietto di calendario; a destra si sceglie quanti collaboratori attivi (da 1
   a 6, o 7+) e la cassa stampa il conto del mese. Il prezzo della pagina si dice qui, una volta. Senza script resta il
   conto d'esempio di un collaboratore, fermo, e i tasti non si vedono. Il rotolo e' carta: ha colori suoi.
   -------------------------------------------------------------------------------------------------------------------- */
.scadenza{ display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-5); }
.foglio{ flex:none; width:64px; border-radius:var(--r-s); background:var(--surface); box-shadow:var(--shadow-card); overflow:hidden; text-align:center; transform-origin:50% 0; }
.foglio .f-mese{ display:block; padding:3px 0 2px; background:var(--amber); color:var(--on-amber); font:700 .8125rem/1.2 var(--font-body); letter-spacing:.06em; text-transform:uppercase; }
.foglio .f-giorno{ display:block; padding:2px 0 6px; font:900 1.875rem/1.1 var(--font-display); color:var(--ink); font-variant-numeric:lining-nums; }
.scadenza p{ margin:0; max-width:32ch; font-size:1.0625rem; line-height:1.45; color:var(--ink-soft); }
.scadenza p strong{ color:var(--ink); }
/* il titolo qui e' corto (la riga piu' lunga misura ~7,3 em): su telefono puo' essere piu' grande della regola generale */
@media (max-width:25rem){ .con-conto h1{ font-size:min(var(--t-h1), calc((100vw - 2rem) / 7.8)); } }

.frammento-conto{ display:grid; justify-items:center; min-width:0; }
@media (max-width:55.99rem){ .frammento-conto{ justify-items:start; } }
/* su telefono la fila dei tasti va a tutta larghezza: sette tasti alti 44 px che si dividono lo spazio */
.conto-quanti{ display:grid; justify-items:start; gap:var(--s-2); justify-self:stretch; margin-bottom:var(--s-5); }
html:not(.js) .conto-quanti{ display:none; }
.conto-quanti p{ margin:0; font-weight:600; color:var(--ink-soft); }
.conto-tasti{ display:flex; width:100%; padding:3px; border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--shadow-card); }
.conto-tasti button{ flex:1 1 0; min-width:0; height:44px; border:0; border-radius:var(--r-pill); background:none; color:var(--ink); font:900 1.05rem/1 var(--font-display); font-variant-numeric:lining-nums; cursor:pointer; transition:background-color .2s var(--ease-out), color .2s var(--ease-out), transform .15s var(--ease-out); }
.conto-tasti button.oltre{ flex-grow:1.25; font:700 .95rem/1 var(--font-body); }
.conto-tasti button:active{ transform:scale(.92); }
.conto-tasti button[aria-pressed="true"]{ background:var(--navy); color:var(--on-navy); }
@media (hover:hover) and (pointer:fine){ .conto-tasti button:not([aria-pressed="true"]):hover{ background:var(--bg-tint); } }
/* nel tema scuro il navy sul fondo scuro non si distingue (1,65:1): il tasto scelto diventa ambra, come i chip della prova */
@media (prefers-color-scheme: dark){ .conto-tasti button[aria-pressed="true"]{ background:var(--amber); color:var(--on-amber); } }
@media (min-width:26rem){
  .conto-tasti{ width:auto; gap:4px; padding:5px; }
  .conto-tasti button{ flex:none; width:44px; font-size:1.15rem; }
  .conto-tasti button.oltre{ width:auto; padding:0 .8rem; font-size:1rem; }
}
@media (min-width:56rem){ .conto-quanti{ justify-items:center; justify-self:center; } }
/* fra 896 e ~990 px la colonna di destra e' stretta per sette tasti da 44 */
@media (min-width:56rem) and (max-width:62rem){ .conto-tasti button{ width:40px; height:40px; } .conto-tasti button.oltre{ padding:0 .65rem; } }

/* la cassa e il rotolo si inclinano verso il cursore come gli oggetti delle altre testate (--tx/--ty li mette lo script
   del sito sull'aside con data-tilt); i tasti restano fermi */
.stampante{ display:grid; justify-items:center; width:min(400px, 100%); transform:perspective(1200px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition:transform .7s var(--ease-out); }
.cassa{ position:relative; z-index:2; width:100%; height:62px; border-radius:20px 20px 12px 12px; background:linear-gradient(160deg, var(--navy), var(--navy-deep)); box-shadow:0 18px 30px -18px rgba(4,9,30,.7), inset 0 0 0 1px var(--line-on-navy); }
.cassa::before{ content:""; position:absolute; left:26px; right:26px; bottom:14px; height:9px; border-radius:6px; background:#040a22; box-shadow:inset 0 2px 3px rgba(0,0,0,.6); }
.cassa-nome{ position:absolute; top:12px; left:24px; font:900 1rem/1 var(--font-display); color:var(--on-navy); }
.cassa-nome i{ color:var(--amber); font-style:normal; }
.cassa-spia{ position:absolute; top:14px; right:22px; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(245,158,11,.18); }
.rotolo{ position:relative; z-index:1; width:min(340px, 90%); margin-top:-19px; overflow:hidden; filter:drop-shadow(0 22px 22px rgba(12,26,74,.28)); }
.scontrino{
  --carta:#fffdf8; --carta-ink:#15171c; --carta-soft:#555b69; --carta-linea:#cfcbc2;
  padding:var(--s-6) 1.3rem 2.2rem; background:var(--carta); color:var(--carta-ink); font-variant-numeric:tabular-nums lining-nums;
  /* il bordo a denti in fondo, come uno scontrino strappato */
  -webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
/* nel tema scuro un foglio bianco pieno abbaglia: carta appena piu' calda e spenta, il grigio resta sopra 5,8:1 */
@media (prefers-color-scheme: dark){ .scontrino{ --carta:#f1ede4; } }
@media (max-width:25.99rem){ .scontrino{ padding-inline:1rem; } .rotolo{ width:min(340px, 94%); } }
.sc-testa{ text-align:center; }
.sc-testa b{ display:block; font:900 1.7rem/1 var(--font-display); }
.sc-testa span{ display:block; margin-top:.35rem; font-size:.875rem; color:var(--carta-soft); }
.sc-taglio{ margin:var(--s-4) 0; border-top:2px dashed var(--carta-linea); }
/* i due conti (1-6 e 7+) stanno nella stessa cella: lo scontrino non cambia altezza e la pagina sotto non salta */
.sc-stati{ display:grid; }
.sc-stato{ grid-area:1 / 1; }
.sc-stato.spento{ visibility:hidden; }
.sc-voce{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3); padding:.18rem 0; font-size:.9375rem; line-height:1.45; }
.sc-voce span:last-child{ font-weight:600; white-space:nowrap; }
.sc-piccola{ padding-top:0; font-size:.8125rem; color:var(--carta-soft); }
.sc-titoletto{ margin-top:var(--s-2); font-weight:700; }
.sc-totale{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; column-gap:var(--s-3); }
.sc-totale span{ font-weight:700; white-space:nowrap; }
.sc-totale b{ margin-left:auto; font:900 2.1rem/1 var(--font-display); white-space:nowrap; }
.sc-piede{ margin:0; text-align:center; font-size:.8125rem; line-height:1.5; color:var(--carta-soft); }
.sc-oltre{ margin:0 0 var(--s-3); text-align:center; font:900 2.1rem/1.1 var(--font-display); white-space:nowrap; }
.sc-oltre + .sc-piede{ font-size:.9375rem; }
.sc-mail{ display:flex; align-items:center; justify-content:center; min-height:44px; margin-bottom:var(--s-2); text-align:center; font-weight:700; font-size:1.02rem; color:var(--carta-ink); text-decoration:underline; text-decoration-color:var(--amber); text-decoration-thickness:3px; text-underline-offset:6px; overflow-wrap:anywhere; }
.sc-mail:hover{ text-decoration-thickness:5px; }
/* l'anello ambra sulla carta non si vede (2,15:1): sulla carta il fuoco e' navy, uguale nei due temi come la carta */
.sc-mail:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; border-radius:6px; }
.conto-annuncio{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@media (prefers-reduced-motion: no-preference){
  /* l'entrata segue la lettura: risposta, scadenza, foglietto, bottone, nota */
  .js .scadenza p{ animation:enter .8s var(--ease-out) .36s both; }
  .js .foglio{ animation:strappo .9s var(--ease-out) .4s both; }
  .con-conto .azioni.enter{ animation-delay:.45s; }
  .con-conto .prezzo.enter{ animation-delay:.54s; }
  .scontrino.stampa{ animation:stampa 1.15s steps(16, end) both; }
  .scontrino.stampa.primo{ animation-delay:.5s; }
  .scontrino.attesa{ animation-play-state:paused; }
  /* lo scontrino vecchio si strappa, non rientra nella cassa */
  .scontrino.via{ transition:transform .22s ease-in, opacity .22s ease-in; transform:translateY(5%) rotate(-2.5deg); transform-origin:50% 0; opacity:0; }
  .cassa-spia.lampeggia{ animation:spia 1.15s steps(2, end) 1; }
}
/* con il movimento ridotto il conto nuovo arriva con una dissolvenza breve: il cambio si vede, senza spostamenti */
@media (prefers-reduced-motion: reduce){
  .scontrino.stampa:not(.primo){ animation:sfuma .2s ease-out both; }
  .stampante{ transition:none; transform:none; }
}
@keyframes strappo{ 0%{ transform:perspective(300px) rotateX(-95deg); opacity:0; } 55%{ opacity:1; } 80%{ transform:perspective(300px) rotateX(12deg); } 100%{ transform:perspective(300px) rotateX(0); } }
@keyframes stampa{ from{ transform:translateY(-100%); } }
@keyframes spia{ 50%{ background:#fff; } }
@keyframes sfuma{ from{ opacity:.25; } }