/* ==========================================================================
   Valens · style.css
   Ordine: caratteri, token, base, componenti, sezioni, responsive.
   Colori e caratteri si cambiano SOLO nei token qui sotto.
   ========================================================================== */

/* --- Caratteri, ospitati in locale (licenza OFL in assets/fonts) --------- */
/* Bodoni Moda con la grandezza ottica (asse opsz) fermata a 24 dal 25/10: nei titoli grandi le linee sottili
   erano sottilissime, a rischio leggibilità (Andrea). Sopra i 24 pixel il carattere resta disegnato come a 24:
   stesso Bodoni, filetti più robusti. File ricavati dagli originali con fontTools (instancer, opsz 6-24). */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/bodoni-moda-latin-opsz24-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/bodoni-moda-latin-opsz24-italic.woff2') format('woff2');
}
/* JetBrains Mono, solo maiuscole, cifre e pochi simboli: serve ad "AI" nel marchio
   e ai caratteri casuali con cui si decifra. 2,7 KB */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-brand-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
}

/* --- Token ---------------------------------------------------------------- */
:root {
  --ground: #EFEFEC;
  --paper: #FFFFFF;
  --ink: #161616;
  --muted: #575754;
  --line: #D5D5D0;
  /* Colore segnale. Alternative provate nella bozza: #FF5A1F (arancio), #2F6BFF (blu) */
  --signal: #12A150;
  /* Colore del marchio: il pallino accanto a "Human & AI Agency". Alternative provate: #8E2C2B (carminio), #2B3F8C (oltremare) */
  --mark: #B08A3E;

  /* Tasti fisici: stesse tinte di .key-light e .key-dark, usate dalla barra di navigazione */
  --key-top: #FFFFFF;
  --key-bottom: #EBEBE7;
  --key-edge: #CBCBC6;
  --key-depth: #B8B8B2;
  --key-ink: #161616;
  --key-dark-top: #2C2C2C;
  --key-dark-bottom: #141414;
  --key-dark-depth: #000000;
  --key-dark-ink: #FFFFFF;

  --serif: 'Bodoni Moda', Didot, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --press: cubic-bezier(.3, 1.6, .6, 1);
  --radius: 12px;
  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(64px, 8vw, 112px);
  /* Spazio della barra di navigazione fissa in alto: 14 pixel dal bordo, 44 di barra, 12 di respiro.
     Lo usano la pagina (spazio sopra la testata) e tutto quello che resta attaccato in alto scorrendo. */
  --nav-top: 14px;
  --nav-space: 70px;
}

/* Tema scuro: secondario, si attiva solo con <html data-theme="dark"> */
[data-theme="dark"] {
  --ground: #121212;
  --paper: #1B1B1B;
  --ink: #F1F1EE;
  --muted: #A9A9A5;
  --line: #2F2F2F;
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
section[id], div[id] { scroll-margin-top: calc(var(--nav-space) + 24px); }

.page { overflow-x: clip; min-height: 100vh; padding-top: var(--nav-space); }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }

.serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -.01em;
}
.label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.small { font-size: 16px; }
.big { font-size: 20px; }
.max-420 { max-width: 420px; }
.max-460 { max-width: 460px; }
p { margin: 0; }

.h1 { margin: 0; font-size: clamp(46px, 5.6vw, 84px); line-height: 1.02; }
.h2 { margin: 0; font-size: clamp(40px, 4.8vw, 68px); line-height: 1; }
.h2-sm { margin: 0; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.05; }
.h3 { margin: 0; font-size: 28px; line-height: 1.1; }

.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-22 { display: flex; flex-direction: column; gap: 22px; }
.stack-26 { display: flex; flex-direction: column; gap: 26px; }
.stack-40 { display: flex; flex-direction: column; gap: 40px; }
.stack-44 { display: flex; flex-direction: column; gap: 44px; }

.section { padding-block: var(--section); }
.section--paper { background: var(--paper); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px;
}

/* --- Tasti: devono sembrare premibili, e rispondere quando li premi ------ */
.key {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 0; border-radius: var(--radius);
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--press), box-shadow .16s;
}
.key-dark {
  color: #FFFFFF;
  background: linear-gradient(180deg, #2C2C2C 0%, #141414 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 #000, 0 6px 0 -1px #000, 0 12px 20px -8px rgba(0,0,0,.5);
}
.key-dark:hover { color: #FFFFFF; transform: translateY(-1px); }
.key-dark:active {
  transform: translateY(5px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 #000, 0 1px 0 0 #000, 0 3px 6px -3px rgba(0,0,0,.45);
}
.key-light {
  color: #161616;
  background: linear-gradient(180deg, #FFFFFF 0%, #EBEBE7 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px #CBCBC6, 0 6px 0 -1px #B8B8B2, 0 12px 20px -8px rgba(0,0,0,.25);
}
.key-light:hover { color: #161616; transform: translateY(-1px); }
.key-light:active {
  transform: translateY(5px);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px #CBCBC6, 0 1px 0 0 #B8B8B2, 0 3px 6px -3px rgba(0,0,0,.2);
}
.key-square { width: 52px; padding: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Piccoli elementi ----------------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40;
  background: var(--signal);
  transform: scaleX(0); transform-origin: 0 50%;
}
.led {
  display: inline-block; flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent), 0 0 10px var(--signal);
}
.led-sm { width: 7px; height: 7px; }

.spec { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px; }
.spec th, .spec td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.spec th {
  width: 38%; padding-top: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.spec td { text-align: right; font-weight: 500; }

.rise { animation: rise .55s var(--spring); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Testata -------------------------------------------------------------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }
.logo { font-size: 34px; font-weight: 600; font-style: italic; text-decoration: none; }
/* Marchio: Valens in corsivo, sotto "Human & AI Agency" in corsivo specchiato (inclinato al contrario) */
.brand { display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--ink); }
.brand-tag { display: inline-flex; align-items: center; gap: 12px; padding-left: 4px; white-space: nowrap; }
.brand-words { white-space: nowrap; }
.brand-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark) 20%, transparent);
}
.brand-slant {
  display: inline-block;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 14px; letter-spacing: .03em;
  color: var(--muted);
  transform: skewX(22deg); transform-origin: 50% 100%;
}
/* "AI" dritto, in carattere da programmazione, con un cursore da terminale:
   l'umano pende, la macchina no. All'arrivo "AI" si decifra (vedi main.js),
   il cursore lampeggia. Con "riduci movimento" restano fermi. */
.brand-ai {
  display: inline-block;
  min-width: 2.3ch;
  margin-left: -.12em;
  font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: .08em;
  color: var(--ink);
}
.brand-caret {
  display: inline-block;
  width: .58em; height: 1.05em; margin: 0 .4em 0 .06em;
  vertical-align: -.16em;
  font-size: 13px;
  background: var(--mark);
  animation: caret 1.1s step-end infinite;
}
@keyframes caret { 50% { opacity: 0; } }
/* Da computer marchio e scritta stanno sulla stessa riga */
@media (min-width: 761px) {
  .brand { flex-direction: row; align-items: center; gap: 18px; }
}
.status { display: flex; align-items: center; gap: 10px; color: var(--muted); }

/* --- Apertura ------------------------------------------------------------- */
.hero-section { padding-block: clamp(24px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 30px; }
.hero-sub { max-width: 540px; font-size: 20px; color: var(--muted); }
.hero-device { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.demo-figure { margin: 0; }

/* Telefono */
.phone {
  position: relative; display: block;
  width: 300px; height: 610px; padding: 12px; border-radius: 46px;
  background: linear-gradient(145deg, #2B2B2B, #0C0C0C 60%);
  box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 2px 1px rgba(255,255,255,.12), 0 40px 60px -30px rgba(0,0,0,.55), 0 12px 24px -12px rgba(0,0,0,.35);
}
.screen {
  position: relative; display: block;
  width: 100%; height: 100%; border-radius: 35px; overflow: hidden;
  background: #FFFFFF; color: #111111;
}
.notch {
  position: absolute; top: 10px; left: 50%; z-index: 6; display: block;
  width: 84px; height: 24px; margin-left: -42px; border-radius: 14px;
  background: #0C0C0C;
}

/* Schermata al risparmio: volutamente brutta */
.mock-bad { position: absolute; inset: 0; background: #FAFAFA; font-family: Arial, Helvetica, sans-serif; }
.load { position: absolute; top: 0; left: 0; z-index: 7; height: 3px; background: #E0A100; animation: slowload 6s linear infinite; }
@keyframes slowload { 0% { width: 0; } 80% { width: 82%; } 100% { width: 88%; } }
.mb-top { display: flex; align-items: center; justify-content: space-between; padding: 44px 14px 10px; border-bottom: 1px solid #E6E6E6; }
.mb-logo { font-size: 10px; font-weight: 700; color: #FFFFFF; background: #7A7A7A; padding: 5px 8px; }
.mb-burger { display: flex; flex-direction: column; gap: 3px; }
.mb-burger span { display: block; width: 18px; height: 2px; background: #888888; }
.mb-photo { margin: 10px 12px; height: 120px; background: #DEDEDE; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #6F6F6F; }
.mb-text { margin: 0 12px; font-size: 9px; line-height: 1.35; color: #767676; }
.mb-buttons { display: flex; flex-direction: column; gap: 6px; margin: 10px 12px; }
.fake-btn { display: block; padding: 9px 10px; font-size: 10px; font-weight: 700; color: #FFFFFF; text-align: center; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; }
.fb-red { background: #C0392B; }
.fb-blue { background: #2E86C1; }
.fb-green { background: #27AE60; }
.fb-orange { background: #E67E22; }
.fb-grey { background: #555555; }
.mb-popup {
  position: absolute; top: 120px; left: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: #FFFFFF; border: 1px solid #D0D0D0; box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.mb-close { align-self: flex-end; font-size: 10px; color: #B0B0B0; }
.mb-popup-title { font-size: 13px; font-weight: 700; }
.mb-input { height: 24px; border: 1px solid #D0D0D0; }
.mb-cookie {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 18px;
  background: #2B2B2B; color: #E6E6E6; font-size: 9px;
}

/* Schermata fatta bene */
.mock-good { position: absolute; inset: 0; display: flex; flex-direction: column; background: #FFFFFF; font-family: var(--sans); }
.mg-top { display: flex; align-items: center; justify-content: space-between; padding: 46px 18px 12px; }
.mg-brand { font-family: var(--serif); font-style: italic; font-size: 17px; font-weight: 600; }
.mg-link { font-size: 12px; font-weight: 600; }
.mg-photo { margin: 4px 14px; height: 170px; border-radius: 14px; background: #ECECE8; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #5C5A55; }
.mg-body { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.mg-title { font-family: var(--serif); font-size: 28px; line-height: 1.05; font-weight: 500; }
.mg-text { font-size: 13px; color: #4A4A4A; }
.mg-cta {
  display: block; padding: 13px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #2C2C2C, #141414); color: #FFFFFF;
  font-weight: 600; font-size: 14px; box-shadow: 0 4px 0 -1px #000000;
}

/* Interruttore */
.switch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.switch {
  position: relative; flex: 0 0 auto;
  width: 150px; height: 68px; padding: 0; border: 0; border-radius: 34px; cursor: pointer;
  background: linear-gradient(180deg, #D9D9D5, #F2F2EF);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.28), inset 0 -1px 0 #FFFFFF, 0 1px 0 #FFFFFF;
  -webkit-tap-highlight-color: transparent;
  transition: background .35s;
}
.switch[aria-checked="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 78%, #000), var(--signal));
  box-shadow: inset 0 3px 8px rgba(0,0,0,.35), 0 0 18px -2px var(--signal);
}
.knob {
  position: absolute; top: 6px; left: 6px;
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F0F0EC 38%, #C9C9C4 100%);
  box-shadow: 0 1px 0 #FFFFFF inset, 0 6px 10px -2px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.25);
  transition: transform .55s var(--spring);
}
.switch[aria-checked="true"] .knob { transform: translateX(82px); }
.switch:active .knob { box-shadow: 0 1px 0 #FFFFFF inset, 0 2px 4px -1px rgba(0,0,0,.4); }
.sw-label {
  min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--muted);
  transition: color .2s;
}
.sw-label.is-active { color: var(--ink); }
.demo-caption { max-width: 340px; text-align: center; font-size: 15px; color: var(--muted); }

/* --- Servizi: fisarmonica ------------------------------------------------- */
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.svc-item { border-bottom: 1px solid var(--line); }
.svc-h { margin: 0; font: inherit; }
.svc-row {
  width: 100%;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 52px; gap: 20px; align-items: center;
  padding: 26px 14px; border: 0; border-radius: 14px;
  background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s, box-shadow .25s, transform .25s var(--spring);
}
.svc-row:hover { background: var(--paper); box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); transform: translateY(-2px); }
.section--paper .svc-row:hover { background: var(--ground); }
.svc-row:active { transform: translateY(1px); }
a.svc-row { text-decoration: none; }
a.svc-row .chev { transition: transform .35s var(--spring); }
a.svc-row:hover .chev { transform: translateX(4px); }
.svc-title { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; }
.svc-subs { font-size: 15px; color: var(--muted); text-align: right; }
.chev {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #FFFFFF, #EBEBE7);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px #CBCBC6, 0 4px 0 -1px #B8B8B2;
  color: #161616;
  transition: transform .45s var(--spring);
}
.svc-row[aria-expanded="true"] .chev { transform: rotate(45deg); }
.svc-panel { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 0 14px 30px; }
.gets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.gets li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.img-slot {
  min-height: 180px; padding: 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--ground); color: var(--muted); font-size: 14px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.08);
}

/* --- Lavori: carosello di telefoni --------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split--top { align-items: start; }
/* Domande e risposte: in chiaro, una sotto l'altra (le leggono Google e le AI) */
.faq { display: flex; flex-direction: column; }
.faq-item { padding-block: 18px; border-bottom: 1px solid var(--line); }
.faq-item:first-child { padding-top: 0; }
.faq-q { margin: 0 0 8px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.faq-a { margin: 0; color: var(--muted); }
/* Fascia scura, come una sala: per i video (Social). Colori dei tasti scuri, uguali nei due temi. */
.section--dark { background: var(--key-dark-bottom); color: var(--key-dark-ink); }
.on-dark-muted { color: color-mix(in srgb, var(--key-dark-ink) 66%, transparent); }
/* Social, i video: in ogni riga un video orizzontale e uno verticale alla stessa altezza.
   Ognuno cresce in proporzione al suo formato (--grow = larghezza diviso altezza): le altezze tornano uguali */
.reel { display: flex; flex-direction: column; gap: 28px; }
.reel-row { display: flex; gap: 16px; align-items: flex-start; }
.clip { flex: var(--grow) 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); border-radius: 16px; background: var(--key-dark-top); box-shadow: 0 0 0 1px color-mix(in srgb, var(--key-dark-ink) 12%, transparent), 0 24px 50px -30px rgba(0, 0, 0, .8); }
.clip figcaption { display: grid; gap: 4px; font-size: 15px; }
.clip-who { font-weight: 600; }
.clip-what { color: color-mix(in srgb, var(--key-dark-ink) 66%, transparent); }
@media (max-width: 760px) {
  .reel-row { flex-direction: column; gap: 28px; }
  .clip { flex: none; width: 100%; }
  .clip--tall { width: min(100%, 300px); }
}
/* Social, apertura: testo a sinistra, il telefono del capitolo 06 a destra */
.so-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(24px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.so-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.so-hero-keys { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .so-hero { grid-template-columns: minmax(0, 1fr); } }
/* Social, cosa faccio: sei riquadri, l'icona su un tasto */
.do-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.do-tile { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.do-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; color: var(--key-ink); background: linear-gradient(180deg, var(--key-top), var(--key-bottom)); box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 3px 0 -1px var(--key-depth), 0 10px 16px -10px rgba(0, 0, 0, .4); }
.do-icon svg { width: 24px; height: 24px; }
.do-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.do-tag { padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.do-p { margin: 0; color: var(--muted); }
@media (max-width: 900px) { .do-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .do-grid { grid-template-columns: minmax(0, 1fr); } .do-tile { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; padding: 18px; } .do-icon { margin: 0; } .do-h { flex: 1; } .do-p { flex-basis: 100%; } }
/* Social, quanto costa: due cartellini con la cifra grande (il mese è il tasto scuro), poi le voci a parte */
.prices { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.price { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.price-n { margin: 0; font-family: var(--serif); font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -.01em; }
.price-from { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--muted); vertical-align: middle; }
.price-what { margin: 0; color: var(--muted); }
/* il simbolo dell'euro nel carattere del testo: nel Bodoni le stanghette sono così sottili che si legge una C */
.price-cur { margin-left: .12em; font-family: var(--sans); font-size: .62em; font-weight: 500; }
.price--main { color: var(--key-dark-ink); background: linear-gradient(160deg, var(--key-dark-top), var(--key-dark-bottom)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--key-dark-ink) 20%, transparent), 0 30px 60px -36px rgba(0, 0, 0, .6); }
.price--main .label, .price--main .price-from { color: color-mix(in srgb, var(--key-dark-ink) 70%, transparent); }
.price-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.price-list li { display: flex; align-items: baseline; gap: 10px; }
.price-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); transform: translateY(-2px); }
.extras { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
@media (max-width: 760px) { .prices { grid-template-columns: minmax(0, 1fr); } .price-list { grid-template-columns: minmax(0, 1fr); } }
/* Social: un mese d'esempio (calendario) accanto ai quattro passi. Disegno fermo, niente animazioni. */
.month { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.cal { margin: 0; padding: clamp(16px, 2.4vw, 28px); border-radius: 24px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, .45); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-wd { padding-bottom: 4px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.cal-day { display: flex; align-items: center; justify-content: center; gap: 3px; aspect-ratio: 1; border-radius: 10px; background: var(--ground); }
.cal-chip { display: grid; place-items: center; width: clamp(22px, 2.6vw, 30px); height: clamp(22px, 2.6vw, 30px); border-radius: 8px; }
.cal-chip svg { width: 62%; height: 62%; }
.cal-chip--post { background: var(--paper); box-shadow: 0 0 0 1px var(--key-edge); color: var(--ink); }
.cal-chip--post svg { fill: none; stroke: currentColor; stroke-width: 2; }
.cal-chip--video { border-radius: 50%; background: var(--key-dark-bottom); }
.cal-chip--video svg { fill: var(--key-dark-ink); }
.cal-chip--plan, .cal-chip--num { background: var(--signal); color: var(--paper); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: 15px; color: var(--muted); }
.cal-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.cal-legend .cal-chip { width: 22px; height: 22px; }
.steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.step:first-child { padding-top: 4px; }
.step-h { margin: 0 0 4px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.step-p { margin: 0; color: var(--muted); }
@media (max-width: 900px) { .month { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 400px) { .cal-grid { gap: 4px; } .cal-day { border-radius: 8px; gap: 2px; } .cal-chip { width: 20px; height: 20px; border-radius: 6px; } .cal-chip--video { border-radius: 50%; } }
.case-title { margin: 0 0 8px; font-size: 30px; line-height: 1.1; }
.case-nav { display: flex; align-items: center; gap: 14px; }
.cases { position: relative; height: 660px; overflow: hidden; touch-action: pan-y; }
.case-phone {
  position: absolute; left: 50%; top: 20px;
  width: 300px; height: 610px; margin-left: -150px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .8s cubic-bezier(.34, 1.3, .64, 1), opacity .5s;
}
.case-phone .phone { pointer-events: none; }
.case-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; background: linear-gradient(180deg, #F6F6F3, #E6E6E2); font-family: var(--sans);
}
.case-screen-title { font-family: var(--serif); font-size: 22px; line-height: 1.1; text-align: center; }
.case-screen-note { font-size: 12px; color: #5C5A55; text-align: center; }

/* --- Come lavoro ---------------------------------------------------------- */
.method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.method li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ink); }
.method p { color: var(--muted); font-size: 16px; }

/* --- Chi: collage che si apre quando entra nello schermo ------------------ */
.collage { position: relative; height: 560px; }
.shot {
  position: absolute; padding: 10px; border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 40px -22px rgba(0,0,0,.45), 0 0 0 1px var(--line);
  transition: transform .7s var(--spring);
}
.shot span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 100%; padding: 10px; border-radius: 6px;
  background: var(--ground); color: var(--muted); font-size: 13px;
}
.s1 { left: 4%;  top: 6%;  width: 46%; height: 52%; transform: rotate(-5deg); }
.s2 { left: 46%; top: 0;   width: 44%; height: 38%; transform: rotate(3deg); }
.s3 { left: 52%; top: 40%; width: 40%; height: 40%; transform: rotate(4deg); }
.s4 { left: 14%; top: 60%; width: 36%; height: 34%; transform: rotate(-2deg); }
.s5 { left: 34%; top: 30%; width: 30%; height: 30%; transform: rotate(-1deg); }
.shot-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: var(--ground) center / cover no-repeat; }
/* Finché la foto non è pronta, nel riquadro c'è la sua copia da 16 pixel, sfocata dall'ingrandimento: il riquadro
   non resta mai vuoto, nemmeno durante il passaggio tra pagine. Quando la foto arriva, le passa sopra. Circa 1 KB in tutto.
   Se cambi una foto, rifai anche la sua copia: WebP da 16 x 16 pixel, in base64. */
.shot-img[src$="chi-ritratto.webp"] { background-image: url("data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAABQAgCdASoQABAAAsBMJaQAD4s5kxON+VgXAgAA/vo45XrEfXAr2+I43aDHSTcgzIXGXu8/ETkt13348FB/ZlBmP99Wz7CqJnuKwLuoS5fD9nSwByfMhdwa5yD/3MdPv4XNT86cFrC2bsV5ZjuFA2Hc50LGMfFa9XlF3G8JxuB+pxUG+9o7F6l163z6rj7blh8AAA=="); }
.shot-img[src$="chi-packaging.webp"] { background-image: url("data:image/webp;base64,UklGRogAAABXRUJQVlA4IHwAAABQAgCdASoQABAAAsBMJaQAEQV8cEHAKxL4EjAA/vjf8f+P378U4RbOv6BRBjv+rm+Gg8iBee7o7oYh61EIXd3SWyEzXx/iwMSu8/11z/HPGwRBYuiea6noudHyNipKY0rWxg/IMpRUavKoF1QLkQRK4Ne8t9UtxivdjEAA"); }
.shot-img[src$="chi-set.webp"] { background-image: url("data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAAAwAgCdASoQABAAAsBMJaQAD4xuLW1zPitagAD++ht48HdGIN9G745Ew4BVQq9DOjsbLgbzhp084LeMivbTh1covPXhICk/AGiC6PxMQA9/fCPP735MPxCo035O2reGY6rhMoHTAAA="); }
.shot-img[src$="chi-ecommerce.webp"] { background-image: url("data:image/webp;base64,UklGRoQAAABXRUJQVlA4IHgAAAAwAgCdASoQABAAAsBMJaQAD5IQgTvZ+h2fYAD+92m+unjT9Q7PyfwAMY/wbvuFz3n2vcS7NdJDtGJsOs9AGugxq8u8F1lD3NTq5MsWzgimT3xMPClhcCU6Ylq0OAQuJ6a8Mrih+GxNvo8FXGTlq5aVvizV9ObqAAA="); }
.shot-img[src$="chi-prototipo.webp"] { background-image: url("data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAADwAQCdASoQABAAAsBMJaQAD4eRe++ZQAAA/vZiPD1agKh4r/MJkvf4uWJ8PBNutLTwLI5Qgd32c+o4LSdVNeKbEAr4yKUKLMwr6ePukeBX4v/GbfeEsVtrEPPqKIw/dWID2fmEipjGhRMXzOACvCSYzxttx+yObJyrvlgIxAAAAA=="); }
.collage.is-open .s1 { transform: rotate(-9deg) translate(-16px, -10px); }
.collage.is-open .s3 { transform: rotate(7deg) translate(18px, -8px); }
.collage.is-open .s5 { transform: rotate(-4deg) translate(10px, 14px); }

/* --- Velocità ------------------------------------------------------------- */
.speed-form { display: flex; flex-direction: column; gap: 10px; }
.field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.field {
  flex: 1 1 300px; min-width: 0; height: 54px; padding: 0 18px;
  border: 0; border-radius: var(--radius);
  font-family: var(--sans); font-size: 16px;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.14), 0 0 0 1px var(--line);
}
.section--paper .field { background: var(--ground); }

/* --- Contatti e piede ----------------------------------------------------- */
.contact { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding-block: clamp(72px, 9vw, 140px); }
.h-contact { margin: 0; font-size: clamp(52px, 8vw, 120px); line-height: .98; }
.site-footer { border-top: 1px solid var(--line); }
.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 24px; font-size: 14px; color: var(--muted);
}
.footer-row a { color: var(--muted); }
.footer-logo { font-size: 22px; font-style: italic; font-weight: 600; color: var(--ink); }
/* Nel piede il marchio è intero come in testata (25/10): Valens più «Human & AI Agency», con «AI» che si riscrive */
.footer-brand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ink); }
.footer-brand .brand-tag { font-size: 14px; }

/* --- Navigazione in alto: PillNav di React Bits, riscritta senza librerie --------
   Impostazioni scelte da Andrea il 25/10: logo e barra staccati (layout "split"), voci a pillola,
   riempimento al passaggio ("fill"), puntino sulla pagina in cui sei, vetro smerigliato, misura "md".
   Al passaggio del mouse, o con il focus da tastiera, un cerchio scuro riempie la pillola dal basso e la
   scritta rotola verso l'alto: lo fa tutto il CSS, con transizioni su transform. Niente JavaScript a ogni
   fotogramma, quindi niente scatti nel passaggio tra pagine (il dock di prima ne aveva in Safari).
   Da telefono, quando le voci non ci stanno, la barra diventa un tasto menu.
   In alto e fissa dal 25/10 alle 13:48 (Andrea: «in basso non si vede»): resta visibile scorrendo; la testata
   scorre via con la pagina e sta sotto la barra (spazio --nav-space, in cima ai token).
   Colori: il tema chiaro del componente, rifatto con i token del sito; il puntino è il verde segnale. */
.pill-nav {
  --pn-h: 44px;       /* altezza di logo, barra e tasto menu: anche la zona da toccare */
  --pn-pad: 4px;
  --pn-inner: 36px;   /* altezza della pillola visibile */
  --pn-x: 16px;
  --pn-font: 14px;
  --pn-gap: 8px;
  --pn-mark: 22px;
  --pn-roll: calc(var(--pn-inner) / 2 + .7em);
  --pn-ease: cubic-bezier(.22, 1, .36, 1);
  --pn-surface: color-mix(in srgb, var(--paper) 74%, transparent);
  --pn-blur: blur(20px) saturate(1.6);
  --pn-shadow: 0 22px 44px -22px rgba(0, 0, 0, .3), 0 6px 16px -10px rgba(0, 0, 0, .16);
  --pn-edge: color-mix(in srgb, var(--ink) 7%, transparent);
  --pn-rim: color-mix(in srgb, var(--paper) 95%, transparent);
  --pn-strong: var(--ink);
  --pn-pill: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
  --pn-pill-ink: var(--key-dark-ink);
  --pn-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -6px rgba(0, 0, 0, .45);
  --pn-tile: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  --pn-tile-rim: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 var(--key-top), 0 4px 10px -5px rgba(0, 0, 0, .25);
  --pn-dot: var(--signal);
  --pn-ring: var(--ink);
  --pn-row-hover: color-mix(in srgb, var(--ink) 5%, transparent);
  position: fixed; left: 50%; top: var(--nav-top); z-index: 35;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--pn-gap);
  font-size: var(--pn-font); line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.pn-glass {
  position: relative;
  background: var(--pn-surface);
  -webkit-backdrop-filter: var(--pn-blur); backdrop-filter: var(--pn-blur);
  box-shadow: var(--pn-shadow);
}
/* il bordo sottile e la luce in alto, sopra il vetro */
.pn-glass::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--pn-edge), inset 0 1px 0 var(--pn-rim);
}

.pn-logo { z-index: 2; flex: none; display: inline-grid; place-items: center; width: var(--pn-h); height: var(--pn-h); border-radius: 50%; }
.pn-logo-link { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; color: var(--signal); outline: none; }
.pn-logo-link:focus-visible { outline: 2px solid var(--pn-ring); outline-offset: 2px; }
.pn-mark { width: var(--pn-mark); height: var(--pn-mark); fill: currentColor; }

.pn-bar { z-index: 1; display: flex; align-items: center; min-width: 0; height: var(--pn-h); padding: 0 var(--pn-pad); border-radius: 999px; }
.pn-list { display: flex; gap: 3px; height: 100%; margin: 0; padding: 0; list-style: none; }
.pn-slot { display: flex; }
/* Il link è alto quanto la barra (44 pixel, la zona da toccare); la pillola che si vede è alta 36 */
.pn-item { display: flex; align-items: center; height: 100%; color: var(--pn-strong); text-decoration: none; border-radius: 999px; outline: none; }
.pn-pill {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--pn-inner); padding: 0 var(--pn-x); border-radius: 999px;
  background: var(--pn-tile); box-shadow: var(--pn-tile-rim);
  font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
}
.pn-item:focus-visible .pn-pill { outline: 2px solid var(--pn-ring); outline-offset: 2px; }
.pn-face { display: inline-flex; align-items: center; transition: transform 360ms var(--pn-ease); }
.pn-face--alt { position: absolute; inset: 0; justify-content: center; color: var(--pn-pill-ink); transform: translateY(var(--pn-roll)); }
/* Il cerchio che riempie: parte dal centro del bordo basso; il lato (--pn-fill) lo misura main.js, blocco 6 */
.pn-fill {
  position: absolute; left: 50%; top: 100%; z-index: -1; pointer-events: none;
  width: var(--pn-fill, 200%); height: var(--pn-fill, 200%);
  margin: calc(var(--pn-fill, 200%) / -2) 0 0 calc(var(--pn-fill, 200%) / -2);
  border-radius: 50%; background: var(--pn-pill);
  transform: scale(0); transition: transform 360ms cubic-bezier(.4, 0, .2, 1);
}
/* Riempimento: col mouse al passaggio (da telefono no, resterebbe acceso dopo il tocco), con la tastiera al focus */
@media (hover: hover) {
  .pn-item:hover .pn-fill { transform: scale(1); transition-duration: 550ms; transition-timing-function: var(--pn-ease); }
  .pn-item:hover .pn-face { transform: translateY(calc(var(--pn-roll) * -1)); transition-duration: 500ms; }
  .pn-item:hover .pn-face--alt { transform: none; }
}
.pn-item:focus-visible .pn-fill { transform: scale(1); transition-duration: 550ms; transition-timing-function: var(--pn-ease); }
.pn-item:focus-visible .pn-face { transform: translateY(calc(var(--pn-roll) * -1)); transition-duration: 500ms; }
.pn-item:focus-visible .pn-face--alt { transform: none; }
/* La pagina in cui ti trovi: puntino verde sotto la parola, sopra il riempimento.
   aria-current="page" sulla pagina stessa; "true" servirebbe per una pagina figlia che accende la madre */
.pn-item[aria-current] .pn-pill::after {
  content: ""; position: absolute; left: 50%; bottom: calc((var(--pn-inner) - var(--pn-font)) / 4 - 2px);
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--pn-dot);
}

/* Tasto menu e menu: solo da telefono (vedi la regola più sotto) */
.pn-toggle, .pn-panel { display: none; }
.pn-toggle {
  z-index: 3; flex: none; place-items: center; width: var(--pn-h); height: var(--pn-h);
  padding: 0; border: 0; border-radius: 50%; color: var(--pn-strong); cursor: pointer; outline: none;
}
.pn-toggle:focus-visible { outline: 2px solid var(--pn-ring); outline-offset: 2px; }
.pn-burger { position: relative; width: 16px; height: 10px; }
.pn-burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: top 450ms var(--pn-ease), rotate 450ms var(--pn-ease);
}
.pn-burger span:first-child { top: 1.5px; }
.pn-burger span:last-child { top: 7px; }
.pill-nav[data-open] .pn-burger span:first-child { top: 4.25px; rotate: 45deg; }
.pill-nav[data-open] .pn-burger span:last-child { top: 4.25px; rotate: -45deg; }
/* Il menu si apre verso il basso, dal tasto, e copre la larghezza della barra */
.pn-panel { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: calc(var(--pn-h) + 10px) 6px 6px; border-radius: 24px; }
.pn-menu { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pn-row {
  display: flex; align-items: center; height: calc(var(--pn-h) + 2px); padding: 0 16px; border-radius: 18px;
  font-size: calc(var(--pn-font) + 1px); font-weight: 500; color: var(--pn-strong); text-decoration: none;
  outline: none; transition: background-color .2s;
}
.pn-row:hover { background: var(--pn-row-hover); }
.pn-row[aria-current] { background: var(--pn-pill); box-shadow: var(--pn-pill-shadow); color: var(--pn-pill-ink); }
.pn-row:focus-visible { outline: 2px solid var(--pn-ring); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .pn-face, .pn-fill, .pn-burger span, .pn-row { transition: none; }
}
/* Quando le voci non ci stanno (collapse "auto" di PillNav): con otto voci la barra intera è larga 666 pixel
   (misurata il 25/10, dopo l'aggiunta di Social), più 16 pixel di margine per lato. Sotto i 700 pixel: logo a sinistra,
   tasto menu a destra. Se aggiungi o togli una voce, rimisura e cambia questo numero. */
@media (max-width: 699px) {
  .pill-nav { left: 16px; right: 16px; transform: none; display: flex; justify-content: space-between; pointer-events: none; }
  .pill-nav > * { pointer-events: auto; }   /* lo spazio vuoto tra logo e tasto lascia toccare la pagina sotto */
  .pn-bar { display: none; }
  .pn-toggle { display: inline-grid; }
  .pn-panel:not([hidden]) { display: block; }
}

/* Invito a Parliamone: il fumetto che compare una volta, dopo la terza pagina vista.
   Lo crea il JavaScript (blocco 6); il testo sta nella barra, in data-invite.
   --tip è la distanza del centro di Parliamone (o del tasto menu) dal bordo destro della barra. */
.pn-invite {
  position: absolute; right: 0; top: calc(100% + 12px);
  display: flex; align-items: center;
  border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 16px 32px -18px rgba(0,0,0,.45);
  white-space: nowrap;
}
.pn-invite::after {
  content: ""; position: absolute; bottom: 100%; right: calc(var(--tip, 36px) - 7px);
  width: 14px; height: 14px; margin-bottom: -7px;
  background: var(--paper); border-radius: 3px 0 0 0;
  box-shadow: -1px -1px 0 var(--line);
  transform: rotate(45deg);
}
.pn-invite a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 16px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-radius: 16px 0 0 16px;
}
.pn-invite a::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--signal);
}
.pn-invite a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pn-invite button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 0 16px 16px 0; background: none; color: var(--muted); cursor: pointer;
}
.pn-invite button:hover { color: var(--ink); }
.pn-invite :focus-visible { outline-offset: -3px; }

/* --- Home: tasto per aprire la pagina di ogni sezione ---------------------- */
.key-more svg { transition: transform .35s var(--spring); }
.key-more:hover svg { transform: translateX(3px); }

/* --- Pagine interne: testa e aiuti comuni --------------------------------- */
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-block: clamp(24px, 4vw, 56px) clamp(36px, 5vw, 64px); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Servizi: indice a pillole --------------------------------------------------
   Sta sotto il titolo. Quando scorri oltre (il suo posto passa sotto la barra in alto) main.js gli mette
   is-docked e l'indice scende in fondo allo schermo, al centro, come il dock di prima (25/10): in alto resta
   solo la barra di navigazione. Il posto vuoto tiene la sua altezza, così la pagina non salta.
   Entra dal basso in 0,4 secondi; tornando su riprende il suo posto. */
.chapter-index-slot { min-height: 72px; }
.chapter-index {
  padding-block: 10px;
  box-shadow: 0 1px 0 var(--line);
}
.chapter-index.is-docked {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: max-content; max-width: calc(100vw - 24px);
  padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 22px 44px -22px rgba(0, 0, 0, .3), 0 6px 16px -10px rgba(0, 0, 0, .16);
  transform: translateX(-50%);
  animation: chapter-dock .4s var(--spring) both;
}
.chapter-index.is-docked { padding: 0 4px; }
.chapter-index.is-docked .chapter-index-row { max-width: none; padding: 4px 0; gap: 3px; }
/* In basso le pillole si vedono alte 36 pixel, come le voci della barra in alto; la zona da toccare resta di 44
   (il ::before allarga il link sopra e sotto). Prima erano alte 44 dentro una barra stretta e restavano tagliate. */
.chapter-index.is-docked .pill { position: relative; min-height: 36px; padding: 0 12px; gap: 6px; font-size: 13px; box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 2px 0 -1px var(--key-depth); }
.chapter-index.is-docked .pill::before { content: ""; position: absolute; inset: -4px 0; }
.chapter-index.is-docked .pill-n { font-size: 10px; }
@keyframes chapter-dock { from { opacity: 0; transform: translate(-50%, 130%); } to { opacity: 1; transform: translateX(-50%); } }
.chapter-index-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-block: 2px 6px; }
.chapter-index-row::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 14px; text-decoration: none;
  color: var(--key-ink);
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 3px 0 -1px var(--key-depth);
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--press), box-shadow .16s, background .25s, color .25s;
}
.pill:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 1px 0 0 var(--key-depth); }
.pill-n { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.pill[aria-current] {
  color: var(--key-dark-ink);
  background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 -1px var(--key-dark-depth);
}
.pill[aria-current] .pill-n { color: color-mix(in srgb, var(--key-dark-ink) 72%, transparent); }

/* --- Servizi: capitoli a due metà, design e tecnica --------------------------- */
.chapter { padding-block: var(--section); scroll-margin-top: calc(var(--nav-space) + 24px); }
.chapter--paper { background: var(--paper); }
.chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 64px; align-items: start; }
.chapter-head {
  order: -1; grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 18px; border-bottom: 1px solid var(--ink);
}
.chapter--flip .half--design { order: 2; }
.half { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.half-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.object {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 32px 16px; border-radius: 22px;
  background: var(--paper);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.06), 0 0 0 1px var(--line);
}
.chapter--paper .object { background: var(--ground); }
.object-caption { max-width: 320px; margin: 0; text-align: center; font-size: 15px; color: var(--muted); }
/* Didascalie che cambiano con l'interruttore (Servizi, Design): main.js mette tutte le versioni nella stessa
   casella e mostra solo quella scelta. La casella è alta e larga quanto la più lunga, così il riquadro non si
   muove; le parole si distribuiscono in righe di lunghezza simile e la versione corta sta al centro. */
.cap-fit { display: grid; text-wrap: balance; }
.cap-fit > span { grid-area: 1 / 1; align-self: center; }
.cap-ghost { visibility: hidden; }
.spec--sheet th { width: 36%; }
.spec--sheet td { text-align: left; }

/* Interruttore a segmenti: stesso tatto dei tasti */
.seg {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px;
  background: var(--ground);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.18), 0 1px 0 var(--key-top);
}
.seg button {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--muted);
  -webkit-tap-highlight-color: transparent;
  transition: background .25s, color .25s, box-shadow .25s, transform .16s var(--press);
}
.seg button[aria-pressed="true"] {
  color: var(--key-ink);
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 3px 0 -1px var(--key-depth);
}
.seg button:active { transform: translateY(1px); }

/* Telefono più piccolo, per gli oggetti dei capitoli */
.phone--sm { width: 260px; height: 528px; padding: 10px; border-radius: 42px; }
.phone--sm .screen { border-radius: 33px; }
.phone--sm .notch { top: 9px; width: 74px; height: 22px; margin-left: -37px; }

/* Siti: negozio di esempio, un tasto che risponde subito */
.shop { display: flex; flex-direction: column; font-family: var(--sans); color: var(--key-ink); }
.shop-top { display: flex; align-items: center; justify-content: space-between; padding: 42px 18px 10px; }
.shop-brand { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 16px; }
.shop-cart { position: relative; display: flex; }
.shop-badge {
  position: absolute; top: -7px; right: -9px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--signal); color: var(--key-dark-ink);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.shop-badge.bump { animation: bump .45s var(--spring); }
@keyframes bump { from { transform: scale(.4); } to { transform: scale(1); } }
.shop-photo {
  margin: 4px 12px; height: 196px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground); color: var(--muted); font-size: 12px;
}
.shop-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 0; }
.shop-title { font-family: var(--serif); font-size: 26px; line-height: 1.05; }
.shop-price { font-size: 15px; font-weight: 600; color: color-mix(in srgb, var(--key-ink) 70%, var(--key-top)); }
.shop-add {
  min-height: 46px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--key-dark-ink);
  background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 0 -1px var(--key-dark-depth);
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--press), box-shadow .14s;
}
.shop-add:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 0 var(--key-dark-depth); }
.shop-toast { min-height: 18px; font-size: 13px; font-weight: 600; text-align: center; }

/* Farsi trovare: lo stesso cliente che cerca, su Google o in una risposta AI */
.search-card {
  display: flex; flex-direction: column; gap: 16px;
  width: min(320px, 100%); padding: 16px; border-radius: 18px;
  color: var(--key-ink);
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 4px 0 -1px var(--key-depth), 0 18px 30px -20px rgba(0,0,0,.45);
  font-family: var(--sans);
}
.search-bar {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--key-top); box-shadow: inset 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px var(--key-edge);
  font-size: 13px; color: color-mix(in srgb, var(--key-ink) 70%, var(--key-top));
}
.search-panes { display: grid; }
.search-pane {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 8px;
  transition: opacity .35s, transform .5s var(--spring);
}
.sr-url { font-size: 12px; color: color-mix(in srgb, var(--key-ink) 62%, var(--key-top)); }
.sr-title { font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.sr-snippet { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--key-ink) 75%, var(--key-top)); }
.sr-ghost { height: 9px; width: 92%; margin-top: 6px; border-radius: 5px; background: var(--key-edge); opacity: .55; }
.sr-ghost--short { width: 60%; margin-top: 0; }
.ai-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ai-text { font-size: 15px; line-height: 1.5; }
.ai-source {
  align-self: flex-start; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--key-dark-ink); background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
}
.search[data-state="google"] .search-pane--ai,
.search[data-state="ai"] .search-pane--google { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* CRM: schede dei contatti che si aprono a cascata, una fase sotto l'altra */
.fan {
  position: relative; width: min(290px, 100%); height: 280px;
  padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fan-card {
  position: absolute; left: 22px; right: 22px; top: 80px;
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border-radius: 14px; text-align: left;
  color: var(--key-ink);
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 16px 28px -18px rgba(0,0,0,.5);
  transform-origin: 50% 170%;
  transition: transform .65s var(--spring);
}
.fan-card .label { color: color-mix(in srgb, var(--key-ink) 70%, var(--key-top)); }
.fan-name { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.fan-note { font-size: 13px; color: color-mix(in srgb, var(--key-ink) 70%, var(--key-top)); }
.fc1 { transform: translateY(14px) rotate(-2deg); }
.fc2 { transform: translateY(7px) rotate(1.5deg); }
.fc3 { transform: none; }
.fan:hover .fc1 { transform: translateY(10px) rotate(-5deg); }
.fan:hover .fc3 { transform: rotate(3deg); }
.fan[aria-pressed="true"] .fc1 { transform: translate(-12px, -66px) rotate(-4deg); }
.fan[aria-pressed="true"] .fc2 { transform: translate(0, 0) rotate(.5deg); }
.fan[aria-pressed="true"] .fc3 { transform: translate(12px, 66px) rotate(4deg); }

/* Dati: un cruscotto vero, con la lancetta */
.gauge-dial {
  position: relative; width: 240px; height: 140px;
  border-radius: 120px 120px 18px 18px;
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 4px 0 -1px var(--key-depth), 0 14px 24px -14px rgba(0,0,0,.4);
  color: var(--key-ink);
}
.gauge-ticks { position: absolute; left: 20px; top: 12px; width: 200px; height: 120px; }
.gauge-needle {
  position: absolute; left: 50%; bottom: 18px;
  width: 4px; height: 66px; margin-left: -2px; border-radius: 2px;
  background: var(--key-ink);
  transform-origin: 50% 100%; transform: rotate(-58deg);
  transition: transform .9s var(--spring);
}
.gauge[data-state="tutti"] .gauge-needle { transform: rotate(52deg); background: var(--signal); }
.gauge-hub {
  position: absolute; left: 50%; bottom: 9px;
  width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--key-top), var(--key-edge));
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.gauge-leds { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.gled { display: inline-flex; align-items: center; gap: 7px; transition: color .3s; }
.gled-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  transition: background .3s, box-shadow .3s;
}
.gauge[data-state="online"] .gled[data-src="online"],
.gauge[data-state="tutti"] .gled { color: var(--ink); }
.gauge[data-state="online"] .gled[data-src="online"] .gled-dot,
.gauge[data-state="tutti"] .gled-dot {
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent), 0 0 8px var(--signal);
}

/* App: dal prototipo tratteggiato all'app vera */
.proto-screen { display: flex; flex-direction: column; gap: 12px; padding: 44px 16px 16px; font-family: var(--sans); color: var(--key-ink); }
.proto-screen > * {
  border: 1.5px dashed transparent;
  transition: background .5s, border-color .5s, box-shadow .5s, color .5s, transform .55s var(--spring);
}
.proto-bar { height: 10px; width: 40%; border-radius: 5px; }
.proto-title { font-size: 22px; line-height: 1.1; font-weight: 600; }
.proto-card { height: 150px; border-radius: 14px; }
.proto-card--sm { height: 78px; }
.proto-row { display: flex; gap: 8px; }
.proto-chip { flex: 1; height: 34px; border-radius: 10px; border: 1.5px dashed transparent; transition: background .5s, border-color .5s; }
.proto-btn { margin-top: auto; padding: 14px; border-radius: 12px; text-align: center; font-weight: 600; font-size: 14px; }
.proto[data-state="prototipo"] .proto-bar,
.proto[data-state="prototipo"] .proto-card,
.proto[data-state="prototipo"] .proto-chip,
.proto[data-state="prototipo"] .proto-btn { border-color: var(--key-edge); }
.proto[data-state="prototipo"] .proto-title,
.proto[data-state="prototipo"] .proto-btn { color: color-mix(in srgb, var(--key-ink) 55%, var(--key-top)); }
.proto[data-state="app"] .proto-bar { background: var(--key-ink); }
.proto[data-state="app"] .proto-title { font-family: var(--serif); font-weight: 500; }
.proto[data-state="app"] .proto-card { background: linear-gradient(140deg, var(--ground), var(--key-edge)); box-shadow: 0 12px 22px -14px rgba(0,0,0,.4); }

/* Social: lo stesso telefono in tre stati (interruttore a segmenti, blocco 7 di main.js):
   un post, un video verticale, la sponsorizzata (lo stesso post con l'etichetta e il tasto). Testi come barre. */
.so-screen { display: grid; padding-top: 44px; background: var(--paper); color: var(--key-ink); font-family: var(--sans); }
.so-pane { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 0; transition: opacity .35s, transform .45s var(--spring); }
.social[data-state="video"] .so-pane--post,
.social:not([data-state="video"]) .so-pane--reel { opacity: 0; transform: translateY(10px); pointer-events: none; }
.so-head { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
.so-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, var(--signal), var(--mark)); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line); }
.so-names { display: grid; gap: 4px; }
.so-names .dw-bar { width: 84px; height: 8px; }
.so-tag { height: 0; overflow: hidden; opacity: 0; font-size: 10px; font-weight: 600; line-height: 12px; color: var(--muted); transition: height .3s, opacity .3s; }
.social[data-state="ads"] .so-tag { height: 12px; opacity: 1; }
.so-media { display: grid; place-items: center; aspect-ratio: 1; background: linear-gradient(160deg, var(--ground), var(--key-edge)); }
.so-media svg { width: 46%; fill: var(--key-ink); }
.so-cta { display: flex; align-items: center; justify-content: space-between; height: 0; overflow: hidden; padding: 0 14px; background: var(--key-dark-bottom); color: var(--key-dark-ink); font-size: 13px; font-weight: 600; transition: height .3s var(--spring); }
.so-cta svg { width: 16px; height: 16px; }
.social[data-state="ads"] .so-cta { height: 38px; }
.so-actions { display: flex; gap: 14px; padding: 10px 14px 8px; }
.so-actions svg { width: 20px; height: 20px; }
.so-text { display: grid; gap: 6px; padding: 0 14px; }
.so-text .dw-bar { height: 8px; }
.so-pane--reel { position: relative; margin-top: -44px; background: linear-gradient(170deg, var(--key-dark-top), var(--key-dark-bottom)); color: var(--key-dark-ink); }
.so-play { position: absolute; left: 50%; top: 42%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: color-mix(in srgb, var(--key-dark-ink) 22%, transparent); }
.so-play svg { width: 26px; height: 26px; margin-left: 3px; fill: var(--key-dark-ink); }
.so-side { position: absolute; right: 12px; bottom: 96px; display: grid; gap: 16px; }
.so-side i { display: block; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--key-dark-ink) 28%, transparent); }
.so-reel-text { position: absolute; left: 14px; right: 56px; bottom: 30px; display: grid; gap: 7px; }
.so-reel-text .dw-bar { height: 8px; background: color-mix(in srgb, var(--key-dark-ink) 45%, transparent); }
.so-reel-name { display: flex; align-items: center; gap: 8px; }
.so-reel-name .so-avatar { width: 24px; height: 24px; box-shadow: none; }
.so-reel-name .dw-bar { width: 70px; background: var(--key-dark-ink); }
.so-progress { position: absolute; left: 0; right: 0; bottom: 14px; height: 3px; background: color-mix(in srgb, var(--key-dark-ink) 25%, transparent); }
.so-progress::before { content: ""; position: absolute; inset: 0 60% 0 0; background: var(--key-dark-ink); }
@media (prefers-reduced-motion: reduce) { .so-pane, .so-tag, .so-cta { transition: none; } }
.proto[data-state="app"] .proto-chip { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.proto[data-state="app"] .proto-chip:first-child { background: var(--signal); box-shadow: none; }
.proto[data-state="app"] .proto-btn {
  color: var(--key-dark-ink);
  background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
  box-shadow: 0 4px 0 -1px var(--key-dark-depth);
}
/* L'app si "monta" un pezzo alla volta */
.proto[data-state="app"] .proto-screen > :nth-child(2) { transition-delay: .05s; }
.proto[data-state="app"] .proto-screen > :nth-child(3) { transition-delay: .1s; }
.proto[data-state="app"] .proto-screen > :nth-child(4) { transition-delay: .15s; }
.proto[data-state="app"] .proto-screen > :nth-child(5) { transition-delay: .2s; }
.proto[data-state="app"] .proto-screen > :nth-child(6) { transition-delay: .25s; }

/* --- Lavori: fascicoli con prima e dopo ------------------------------------ */
.case-open { margin-top: 16px; }

/* Finestra del browser che contiene il prima e il dopo */
.browser {
  width: min(400px, 100%); border-radius: 14px; overflow: hidden;
  background: var(--key-top);
  box-shadow: 0 0 0 1px var(--key-edge), 0 4px 0 -1px var(--key-depth), 0 20px 34px -22px rgba(0,0,0,.5);
  font-family: var(--sans); color: var(--key-ink);
}
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--key-bottom); box-shadow: inset 0 -1px 0 var(--key-edge); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--key-edge); }
.browser-url {
  flex: 1; margin-left: 8px; padding: 0 10px; height: 22px; border-radius: 6px;
  font-size: 11px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--key-ink) 65%, var(--key-top));
  background: var(--key-top); box-shadow: inset 0 0 0 1px var(--key-edge);
}
.browser-view { position: relative; height: 250px; overflow: hidden; }
.ba-layer { position: absolute; inset: 0; padding: 14px; transition: opacity .4s, transform .55s var(--spring); }
.ba[data-state="prima"] .ba-dopo,
.ba[data-state="dopo"] .ba-prima { opacity: 0; transform: scale(.97); pointer-events: none; }

/* Caso 01: negozio vecchio e negozio nuovo */
.shop-old { display: flex; flex-direction: column; gap: 8px; background: #FAFAFA; font-family: Arial, Helvetica, sans-serif; }
.so-top { display: flex; align-items: center; justify-content: space-between; }
.so-menu { display: flex; gap: 5px; }
.so-menu i { width: 22px; height: 6px; background: #888888; }
.so-banner { padding: 6px; font-size: 9px; }
.so-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; }
.so-grid i { background: #DEDEDE; }
.so-buttons { display: flex; gap: 5px; }
.so-buttons .fake-btn { flex: 1; padding: 6px 2px; font-size: 8px; }
.shop-new { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; background: var(--key-top); }
.sn-photo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 12px; background: var(--ground); color: var(--muted); font-size: 11px;
}
.sn-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.sn-title { font-family: var(--serif); font-size: 22px; line-height: 1.05; }
.sn-text { font-size: 12px; color: color-mix(in srgb, var(--key-ink) 70%, var(--key-top)); }
.sn-cta {
  padding: 10px; border-radius: 10px; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--key-dark-ink); background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
  box-shadow: 0 3px 0 -1px var(--key-dark-depth);
}

/* Caso 02: dal foglio di calcolo all'app */
.sheet-old { padding: 0; background: var(--key-top); }
.sheet-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--key-bottom) 0 26px, transparent 26px),
    linear-gradient(90deg, var(--key-bottom) 0 34px, transparent 34px),
    repeating-linear-gradient(0deg, var(--key-edge) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--key-edge) 0 1px, transparent 1px 64px);
}
.app-new { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 0; background: var(--key-top); }
.an-side { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; background: var(--key-dark-bottom); }
.an-side i { height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--key-dark-ink) 18%, transparent); }
.an-side i:first-child { background: var(--signal); }
.an-main { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 14px 0; }
.an-title { font-family: var(--serif); font-size: 20px; }
.an-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.an-cards i { height: 64px; border-radius: 10px; background: linear-gradient(140deg, var(--ground), var(--key-edge)); box-shadow: 0 8px 14px -10px rgba(0,0,0,.4); }
.an-list { display: flex; flex-direction: column; gap: 8px; }
.an-list i { height: 26px; border-radius: 8px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }

/* Caso 03: dai foglietti sparsi alla pipeline */
.notes-old { background: var(--ground); }
/* Caso App, il prima: il dispositivo fisico (disco, dodici pioli, un elastico) e un quaderno */
.device-old { display: flex; align-items: center; justify-content: center; background: var(--ground); }
.dv { display: flex; align-items: center; gap: 22px; }
.dv-disc { width: 150px; height: 150px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); }
.dv-base { fill: var(--key-dark-bottom); }
.dv-ring { fill: none; stroke: color-mix(in srgb, var(--paper) 18%, transparent); stroke-width: 1; }
.dv-peg { fill: var(--muted); }
.dv-peg--on { fill: var(--paper); }
.dv-band { fill: color-mix(in srgb, var(--signal) 18%, transparent); stroke: var(--signal); stroke-width: 3; stroke-linejoin: round; }
.dv-hub { fill: var(--key-dark-top); stroke: var(--muted); stroke-width: 1; }
.dv-book { position: relative; display: flex; flex-direction: column; gap: 9px; width: 96px; padding: 16px 12px; border-radius: 4px 10px 10px 4px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 8px 14px -8px rgba(0,0,0,.3); }
.dv-book i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.dv-book i.dv-short { width: 55%; }
.dv-book b { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 4px 0 0 4px; background: var(--mark); }
/* il dopo: la schermata dell'app, larga */
.app-new--dw { display: block; padding: 12px; background: #060A0D; }
.dw-app--wide { gap: 8px; }
.app-new--dw .dw-wheel { max-width: 150px; margin: 0; }
.app-new--dw .dw-piano { height: 56px; }
.app-new--dw .dw-tabs { margin-top: 0; }
@media (max-width: 520px) { .dv { gap: 14px; } .dv-disc { width: 110px; height: 110px; } .dv-book { width: 70px; } }
.note {
  position: absolute; padding: 10px 12px; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: var(--key-ink);
  background: var(--key-top); box-shadow: 0 8px 14px -8px rgba(0,0,0,.4), 0 0 0 1px var(--key-edge);
}
.n1 { left: 8%;  top: 10%; transform: rotate(-6deg); }
.n2 { left: 52%; top: 6%;  transform: rotate(4deg); }
.n3 { left: 18%; top: 48%; transform: rotate(3deg); }
.n4 { left: 50%; top: 44%; transform: rotate(-5deg); }
.n5 { left: 34%; top: 74%; transform: rotate(-2deg); }
.pipe-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: var(--key-top); }
.pipe-col { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; border-radius: 10px; background: var(--ground); }
.pipe-col b { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--key-ink) 70%, var(--key-top)); }
.pipe-col i { height: 34px; border-radius: 8px; background: linear-gradient(180deg, var(--key-top), var(--key-bottom)); box-shadow: 0 0 0 1px var(--key-edge), 0 2px 0 -1px var(--key-depth); }
.pipe-col:last-child i { box-shadow: 0 0 0 1px var(--key-edge), inset 3px 0 0 var(--signal); }

/* Numeri del caso: tre tasselli */
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.number {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; border-radius: 14px;
  color: var(--key-ink);
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 3px 0 -1px var(--key-depth);
}
.number-value { font-family: var(--serif); font-size: 32px; line-height: 1; }
.number-label { font-size: 12px; line-height: 1.3; color: color-mix(in srgb, var(--key-ink) 70%, var(--key-top)); }
.number--wide { grid-column: 1 / -1; }
.number--wide .number-value { font-size: 26px; }

/* --- Metodo: il percorso su un binario che si accende ------------------------ */
.track { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; }
.track::before {           /* il binario */
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
  background: var(--line);
}
.track-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 28px; padding-block: 28px; }
.track-step + .track-step { border-top: 1px solid var(--line); }
/* Le spie del binario sono indicatori, non tasti: incassate, senza spessore, non si premono */
.track-knob {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ground);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.14), 0 0 0 1px var(--line), 0 0 0 6px var(--paper);
  transition: box-shadow .5s;
}
.track-n { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--key-ink); }
.track-step.is-lit .track-knob {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.14), 0 0 0 1px var(--line), 0 0 0 6px color-mix(in srgb, var(--signal) 18%, var(--paper)), 0 0 18px -2px var(--signal);
}
.track-step.is-lit .track-knob::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 8px var(--signal);
}
.track-body { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.track-what { max-width: 620px; color: var(--muted); }
.track-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 6px 0 0; }
.track-facts div { padding-top: 10px; border-top: 1px solid var(--line); }
.track-facts dt { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.track-facts dd { margin: 4px 0 0; font-size: 16px; }

/* --- Metodo: il registro, un quaderno vero ---------------------------------- */
.ledger-book {
  position: relative; width: min(380px, 100%); padding: 30px 20px 18px 34px; border-radius: 6px 14px 14px 6px;
  color: var(--key-ink); font-family: var(--sans);
  background:
    linear-gradient(90deg, transparent 22px, var(--key-edge) 22px 23px, transparent 23px),
    repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--key-edge) 70%, transparent) 31px 32px),
    var(--key-top);
  box-shadow: inset 6px 0 10px -6px rgba(0,0,0,.25), 0 0 0 1px var(--key-edge), 0 4px 0 -1px var(--key-depth), 0 22px 34px -22px rgba(0,0,0,.5);
}
.ledger-clip {
  position: absolute; top: -10px; left: 50%; width: 86px; height: 20px; margin-left: -43px; border-radius: 6px;
  background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
  box-shadow: 0 3px 0 -1px var(--key-dark-depth), 0 6px 10px -6px rgba(0,0,0,.5);
}
.ledger-title { display: block; margin-bottom: 8px; font-family: var(--serif); font-style: italic; font-size: 18px; }
.ledger-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.entry {
  display: grid; grid-template-columns: 62px 78px minmax(0, 1fr); gap: 8px; align-items: baseline;
  padding: 7px 0; font-size: 13px; line-height: 1.35;
  transition: opacity .35s, transform .45s var(--spring);
}
.entry-day { color: color-mix(in srgb, var(--key-ink) 62%, var(--key-top)); font-size: 12px; }
.entry-kind {
  justify-self: start; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--key-edge);
}
.entry[data-kind="decisione"] .entry-kind { color: var(--key-dark-ink); background: var(--key-dark-bottom); box-shadow: none; }
.entry[data-kind="decisione"] .entry-text { font-weight: 600; }
.ledger[data-state="decisioni"] .entry:not([data-kind="decisione"]) { opacity: .18; transform: translateX(6px); }

/* --- Metodo: le regole (si leggono, non si premono: niente aspetto da tasto) -- */
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.rules li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ink); }
.rule-title { margin: 0; font-size: 24px; line-height: 1.15; }
.rules p { color: var(--muted); font-size: 16px; }

/* --- Parliamone: il tuo progetto in tre giri ---------------------------------
   Senza JavaScript: tre gruppi di frasi da spuntare. Con JavaScript (classe is-game):
   un mazzo di carte da smistare, poi la scheda e il contatto. */
.quiz-section { padding-bottom: var(--section); }
.quiz { display: flex; flex-direction: column; gap: 40px; max-width: 760px; }
.round { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 16px; }
.round legend { padding: 0; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--key-ink);
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 3px 0 -1px var(--key-depth);
  transition: transform .16s var(--press), background .2s, color .2s, box-shadow .2s;
}
.chip:active span { transform: translateY(2px); }
.chip input:checked + span {
  color: var(--key-dark-ink);
  background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 -1px var(--key-dark-depth);
}
.chip input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 3px; }

.quiz-final { display: flex; flex-direction: column; gap: 32px; }
/* Con il gioco, il modulo finale è un foglio come la scheda: è il passo principale */
.quiz.is-game .quiz-final {
  padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0,0,0,.45);
}
.quiz.is-game .round[data-round] { display: none; }
.quiz.is-game .quiz-final { display: none; }
.quiz.is-game.is-done .quiz-final { display: flex; }

/* Il gioco */
/* Niente overflow nascosto qui: la carta lanciata esce dallo schermo, non dal riquadro.
   Lo scorrimento orizzontale lo impedisce già .page */
.game {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: clamp(24px, 4vw, 40px) 16px; border-radius: 24px;
  background: var(--paper);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.06), 0 0 0 1px var(--line);
}
.game-top { display: flex; align-items: center; justify-content: space-between; width: min(420px, 100%); }
/* La strada dell'omino: la disegna il blocco 9 del JavaScript, qui solo i colori e i movimenti */
.road { width: min(420px, 100%); margin-top: -6px; aspect-ratio: 420 / 90; }   /* lo spazio c'è già prima del disegno: niente salti */
.road svg { display: block; width: 100%; height: auto; overflow: visible; }
.road-path { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.road-tile { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.road-tile.is-laid { opacity: 1; }
.road-top { fill: var(--key-top); stroke: var(--key-edge); stroke-width: .8; }
.road-depth { fill: var(--key-depth); }
.road-shine { fill: none; stroke: var(--paper); stroke-width: 1; stroke-linecap: round; opacity: .55; }
.road-tile.is-yes .road-top { fill: var(--signal); }
.road-tile.is-yes .road-depth { fill: color-mix(in srgb, var(--signal) 60%, var(--ink)); }
.road-tile.is-new { animation: road-drop .34s var(--spring); }
.road-tile.is-lifted { animation: road-lift .3s ease-in forwards; }
@keyframes road-drop { from { opacity: 0; transform: translate(-6px, -16px) rotate(-10deg); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes road-lift { to { opacity: 0; transform: translate(-6px, -16px) rotate(10deg); } }
.road-sign { opacity: .5; transition: opacity .3s; }
.road-sign line { stroke: var(--muted); stroke-width: 1.5; }
.road-sign rect { fill: var(--paper); stroke: var(--muted); stroke-width: 1.2; }
.road-sign text { fill: var(--muted); font-family: var(--sans); font-size: 8px; font-weight: 700; }
.road-sign.is-passed { opacity: 1; }
.road-sign.is-passed line, .road-sign.is-passed rect { stroke: var(--ink); }
.road-sign.is-passed text { fill: var(--ink); }
.road-plate { transform-box: fill-box; transform-origin: 50% 100%; }
.road-sign.is-new .road-plate { animation: road-wave .5s ease-out; }
@keyframes road-wave { 30% { transform: rotate(-12deg); } 65% { transform: rotate(7deg); } }
.road-goal rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; transition: stroke .3s; }
.road-goal path { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.road-goal { transform-box: fill-box; transform-origin: 50% 100%; }
.road-goal.is-reached rect { stroke: var(--signal); }
.road-goal.is-reached { animation: road-hop .45s var(--spring); }
@keyframes road-hop { 40% { transform: translateY(-5px) scale(1.06); } }
/* L'omino: cammina con le gambe che si alternano e il corpo che ondeggia; all'indietro si gira */
.om { transition: transform .38s ease-in-out; }
.om-body { transform-box: fill-box; transform-origin: 50% 100%; }
.om.is-back .om-body { transform: scaleX(-1); }
.om-leg { transform-box: fill-box; transform-origin: 50% 0; }
.om.is-walking .om-leg--l { animation: om-step .19s ease-in-out infinite alternate; }
.om.is-walking .om-leg--r { animation: om-step .19s ease-in-out infinite alternate-reverse; }
.om.is-walking .om-bob { animation: om-bob .19s ease-in-out infinite alternate; }
@keyframes om-step { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes om-bob { to { transform: translateY(-1.5px); } }
.om.is-empty .om-carry { opacity: 0; }
.om-tuta-a { stop-color: var(--key-dark-top); }
.om-tuta-b { stop-color: var(--key-dark-bottom); }
.om-shadow { fill: var(--ink); opacity: .12; }
.om-pant { fill: var(--key-dark-bottom); }
.om-shoe, .om-eye { fill: var(--ink); }
.om-pocket { fill: var(--signal); opacity: .9; }
.om-skin { fill: color-mix(in srgb, var(--mark) 22%, var(--paper)); stroke: color-mix(in srgb, var(--mark) 45%, var(--paper)); stroke-width: 1; }
.om-glint { fill: var(--paper); }
.om-cheek { fill: color-mix(in srgb, var(--mark) 55%, var(--paper)); }
.om-smile { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.om-helmet { fill: var(--signal); }
.om-brim { fill: color-mix(in srgb, var(--signal) 70%, var(--ink)); }
.om-gloss { fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.om-arm { fill: none; stroke: var(--key-dark-top); stroke-width: 4.2; stroke-linecap: round; }
.om-carry { fill: var(--key-top); stroke: var(--key-edge); stroke-width: .9; transition: opacity .2s; }
.game-question { margin: 0; text-align: center; }
.deck { position: relative; width: min(420px, 100%); height: 236px; margin: 10px 0 34px; touch-action: pan-y; }
/* Prima che il JavaScript dia le carte, il mazzo vuoto ha già la sagoma di una carta */
.deck:empty::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: 0 0 0 1px var(--key-edge), 0 6px 0 var(--key-depth);
}
/* La carta: opaca, con lo spessore di una carta vera (tre bordi sotto) e un'ombra che la stacca */
.deck-card {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 28px; border-radius: 20px; text-align: center;
  font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); line-height: 1.2;
  color: var(--key-ink);
  background: linear-gradient(180deg, var(--key-top) 0%, var(--key-bottom) 100%);
  box-shadow:
    inset 0 1px 0 var(--key-top),
    inset 0 -2px 0 color-mix(in srgb, var(--key-edge) 60%, transparent),
    0 0 0 1px var(--key-edge),
    0 2px 0 0 var(--key-bottom),
    0 3px 0 0 var(--key-edge),
    0 5px 0 0 var(--key-bottom),
    0 6px 0 0 var(--key-depth),
    0 24px 34px -22px rgba(0,0,0,.55);
  transform-origin: 50% 115%;
  user-select: none; -webkit-user-select: none;
  transition: transform .55s var(--spring), box-shadow .25s, opacity .25s;
}
/* Il mazzo: le carte sotto si vedono dal bordo, piene, non sbiadite */
.deck-card[data-depth="1"] { transform: translateY(14px) scale(.96); }
.deck-card[data-depth="2"] { transform: translateY(28px) scale(.92); }
.deck-card[data-depth="3"] { transform: translateY(42px) scale(.88); opacity: 0; }
.deck-card[data-depth="1"], .deck-card[data-depth="2"] {
  box-shadow: inset 0 1px 0 var(--key-top), 0 0 0 1px var(--key-edge), 0 4px 0 0 var(--key-depth), 0 14px 20px -16px rgba(0,0,0,.4);
}
.deck-card.is-top { cursor: grab; }
.deck-card.is-leaving { z-index: 5; pointer-events: none; }
/* Presa in mano: si solleva e l'ombra si allarga */
.deck-card.is-dragging {
  transition: none; cursor: grabbing;
  box-shadow:
    inset 0 1px 0 var(--key-top),
    0 0 0 1px var(--key-edge),
    0 2px 0 0 var(--key-bottom),
    0 3px 0 0 var(--key-edge),
    0 5px 0 0 var(--key-bottom),
    0 6px 0 0 var(--key-depth),
    0 40px 50px -26px rgba(0,0,0,.6);
}
.stamp {
  position: absolute; top: 16px; padding: 4px 10px; border-radius: 8px;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--key-ink); opacity: 0; pointer-events: none;
}
.stamp--yes { right: 16px; box-shadow: inset 0 0 0 2px var(--signal); transform: rotate(8deg); }
.stamp--no { left: 16px; box-shadow: inset 0 0 0 2px var(--key-edge); transform: rotate(-8deg); }
.game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(420px, 100%); }
.game-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 420px; text-align: center; }
.game-undo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.game-undo:disabled { color: var(--muted); opacity: .55; cursor: default; text-decoration: none; }

/* La scheda finale: il premio del gioco */
.result {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: clamp(24px, 4vw, 40px); border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0,0,0,.45);
}
.result-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-label { display: flex; flex-direction: column; gap: 6px; }
.field--area { height: auto; min-height: 96px; padding: 14px 18px; line-height: 1.5; resize: vertical; }
/* Dentro il questionario i campi stanno in colonna: niente base di 300px, che qui diventerebbe altezza */
.quiz .field { flex: 0 0 auto; }
.quiz-send { display: flex; flex-wrap: wrap; gap: 14px; }
.result-asks { display: flex; flex-direction: column; gap: 10px; }
.result-asks ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
/* Copiala e Scaricala: tasti piccoli accanto a Mandamela */
.quiz-send { align-items: center; }
.quiz-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
/* La tua AI: facoltativa, in tre passi */
.quiz-ai {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: clamp(22px, 3vw, 32px); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line);
}
.quiz-ai h3 { text-wrap: balance; }
.quiz-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; max-width: 56ch; }
/* Le AI più usate: tasti con il nome, copiano e aprono */
.ai-open { align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.ai-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-key { min-height: 48px; padding: 0 14px; gap: 8px; }
.ai-key svg { flex: 0 0 auto; color: var(--muted); }

/* La scheda che si riempie: il giro in corso ha il puntino verde; il resto arriva alla fine */
.result-sheet tr.is-now th { color: var(--ink); }
.result-sheet tr.is-now th::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--signal); vertical-align: 1px;
}
.quiz:not(.is-done) .result-done, .quiz:not(.is-done) .result-asks, .quiz:not(.is-done) .result-read { display: none; }

/* La prima lettura: un servizio per riga, con tre tacche di valore e il prezzo «da» */
.result-read { display: flex; flex-direction: column; gap: 12px; }
.result-read h3 { margin: 0; }
.read-list { list-style: none; margin: 0; padding: 0; }
.read-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 2px 0 10px; border-top: 1px solid var(--line);
}
.read-row:last-child { border-bottom: 1px solid var(--line); }
.read-name {
  display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
.read-name:hover { text-decoration-color: currentColor; }
.read-scale { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; gap: 4px; }
.read-scale i { width: 18px; height: 6px; border-radius: 3px; background: var(--line); }
.read-scale i.on { background: var(--ink); }
.read-row.is-top .read-scale i.on { background: var(--signal); }
.read-level { grid-column: 2; grid-row: 2; justify-self: end; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.read-row.is-top .read-level { color: var(--ink); }
.read-price { grid-column: 1; grid-row: 2; font-size: 14px; color: var(--muted); }
.read-why { margin: 0; font-size: 15px; }
.read-step { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--ground); font-size: 15px; }
@media (max-width: 1079px) {
  .quiz.is-game:not(.is-done) .result { display: none; }
}
/* Da computer, durante il gioco: il mazzo a sinistra, la scheda che si riempie a destra.
   A fine gioco la scheda prende tutta la larghezza (risposte e domande a sinistra, la prima lettura a destra)
   e sotto stanno affiancati il modulo per mandarla e, più piccolo, il riquadro della tua AI. */
@media (min-width: 1080px) {
  .quiz.is-game {
    max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px 48px; align-items: start;
  }
  .quiz.is-game .game { grid-column: 1; grid-row: 1; }
  .quiz.is-game:not(.is-done) .result { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-space) + 24px); }

  .quiz.is-game.is-done .result {
    grid-column: 1 / -1; grid-row: 1;
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px 48px; align-items: start;
  }
  .quiz.is-done .result > * { grid-column: 1 / -1; }
  .quiz.is-done .result > .result-sheet { grid-column: 1; grid-row: 3; }
  .quiz.is-done .result > .result-read { grid-column: 2; grid-row: 3 / span 2; }
  .quiz.is-done .result > .result-asks { grid-column: 1; grid-row: 4; }
  .quiz.is-done .result > [data-game-restart] { grid-column: 1; grid-row: 5; justify-self: start; }
  .quiz.is-game.is-done .quiz-final { grid-column: 1; grid-row: 2; align-self: stretch; }
  .quiz.is-game.is-done .quiz-ai { grid-column: 2; grid-row: 2; align-self: stretch; }
}

/* Progetto di prova */
.trial { padding-block: var(--section); }
/* Al centro della pagina quando c'è spazio (25/10, Andrea); da telefono è largo quanto lo schermo */
.trial-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  max-width: 760px; margin-inline: auto; padding: clamp(28px, 4vw, 48px); border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0,0,0,.45);
}

/* --- Privacy e cookie (25/10) ----------------------------------------------
   La pagina: una colonna di testo da leggere, larga quanto basta, al centro da computer. */
.legal { max-width: 820px; display: grid; gap: 18px; padding-bottom: var(--section); font-size: 17px; line-height: 1.6; }
.legal h2 { margin-top: 28px; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.legal a:not(.key) { color: var(--ink); text-underline-offset: 3px; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; overflow-wrap: anywhere; }
.legal-table { overflow-x: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); background: var(--paper); }
.legal-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table thead th { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal-table tbody th { font-weight: 600; }
.legal-table tr:last-child > * { border-bottom: 0; }
/* Da telefono ogni riga diventa una scheda, con il nome della colonna sopra ogni valore */
@media (max-width: 640px) {
  .legal-table table { min-width: 0; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .legal-table tr:last-child { border-bottom: 0; }
  .legal-table th, .legal-table td { display: block; padding: 6px 14px; border: 0; }
  .legal-table [data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
}

/* Il banner dei cookie: un foglio in basso a sinistra, sopra la pagina ma sotto i registri di Design.
   Niente animazione: compare e basta. Da telefono è largo quanto lo schermo, con 12 pixel di margine. */
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 50;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  display: grid; gap: 14px; padding: 22px 22px 20px; border-radius: 20px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .55);
}
.consent[hidden] { display: none; }
.consent-title { margin: 0; padding-right: 40px; font-size: 26px; line-height: 1.1; }
.consent-text { font-size: 15px; line-height: 1.5; color: var(--muted); }
.consent-text a { color: var(--ink); text-underline-offset: 3px; }
.consent-x {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.consent-x:hover { color: var(--ink); }
.consent-choices { display: grid; gap: 10px; }
.consent-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; min-height: 44px; font-size: 14px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.consent-row input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.consent-row b { display: block; color: var(--ink); }
.consent-keys { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 480px) {
  .consent { left: 12px; bottom: 12px; width: calc(100vw - 24px); padding: 20px 18px 18px; }
  .consent-keys .key { flex: 1 1 auto; }
}

/* --- Servizi, 00 Nuove sfide (25/10): il muro, il codice, il prodotto ------------------
   Tre quadri sovrapposti; l'interruttore a segmenti (blocco 7 di main.js) cambia data-state.
   Il quadro che esce svanisce in 0,35 secondi, quello che entra sale di 10 pixel con la molla dei tasti.
   Il prodotto è lo stesso disegno dell'app del caso in Lavori (con i suoi colori, vedi «app su misura»). */
.chapter-story { display: grid; gap: 14px; font-size: 17px; line-height: 1.6; }
.sf-stage { position: relative; width: min(300px, 100%); aspect-ratio: 5 / 6; }
.sf-pane { position: absolute; inset: 0; display: flex; transition: opacity .35s, transform .45s var(--spring); }
.sfide:not([data-state="muro"]) .sf-pane--muro,
.sfide:not([data-state="codice"]) .sf-pane--codice,
.sfide:not([data-state="prodotto"]) .sf-pane--app { opacity: 0; transform: translateY(10px); pointer-events: none; }
.sf-pane--muro { align-items: center; justify-content: center; }
.sf-sheet {
  position: absolute; width: 60%; aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; border-radius: 6px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 14px 22px -16px rgba(0, 0, 0, .45);
}
.sf-sheet:nth-child(1) { transform: translate(-16%, -5%) rotate(-8deg); }
.sf-sheet:nth-child(2) { transform: translate(14%, 3%) rotate(6deg); }
.sf-sheet:nth-child(3) { transform: rotate(-1deg); }
.sf-sheet b { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sf-sheet i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.sf-sheet i.sf-short { width: 55%; }
.sf-total { margin-top: auto; align-self: flex-end; width: 70%; height: 12px; border-radius: 3px; background: var(--ink); }
.sf-pane--codice {
  flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom));
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .55);
}
.sf-dots { display: flex; gap: 6px; margin-bottom: 8px; }
.sf-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--key-dark-ink) 25%, transparent); }
.sf-line { display: block; flex: 0 0 auto; height: 7px; width: var(--w); margin-left: var(--x, 0); border-radius: 4px; background: var(--c, color-mix(in srgb, var(--key-dark-ink) 35%, transparent)); }
.sf-pane--app { border-radius: 16px; overflow: hidden; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: reduce) { .sf-pane { transition: none; } }

/* Parliamone, fine gioco: mandala direttamente, per email o su WhatsApp (25/10) */
.quiz-direct { display: grid; gap: 10px; }
.quiz-direct[hidden] { display: none; }
.quiz-direct-keys { display: flex; flex-wrap: wrap; gap: 10px; }

/* Promo di lancio (25/10): una riga verde dentro il riquadro, finché vale */
.trial-promo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0;
  padding: 12px 16px; border-radius: 14px; font-size: 16px; line-height: 1.45; color: var(--ink);
  background: color-mix(in srgb, var(--signal) 9%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent);
}

/* --- Design: il registro ------------------------------------------------------
   Ogni animazione in ordine di nascita: ora, prompt, oggetto dal vivo, minuti.
   Solo i token comuni: la pagina ha gli stessi colori del resto del sito. */
.reg-head { display: grid; justify-items: start; gap: 22px; padding-block: clamp(24px, 4vw, 56px) clamp(32px, 4vw, 56px); }
.reg-sub { max-width: 60ch; margin: 0; font-size: 20px; color: var(--muted); }
.reg-how { max-width: 70ch; margin: 0; font-size: 15px; color: var(--muted); }

/* La giornata su una riga: una barra per richiesta, alta quanto le animazioni nate */
.reg-day { width: 100%; max-width: 980px; margin: 14px 0 0; display: grid; gap: 40px; }
.reg-ruler { position: relative; height: 150px; border-bottom: 1px solid var(--ink); }
.reg-hour { position: absolute; bottom: -28px; transform: translateX(-50%); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reg-hour::before { content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 8px; background: var(--ink); }
.reg-bar { position: absolute; bottom: 0; width: 10px; margin-left: -5px; height: calc(14px + var(--n, 1) * 13px); border-radius: 5px 5px 0 0; background: var(--signal); font-style: normal; }
.reg-bar--more { height: 14px; background: var(--muted); }
.reg-bar[data-l]::after {
  content: attr(data-l); position: absolute; left: 50%; bottom: calc(100% + 8px + var(--lv, 0) * 20px);
  transform: translateX(-50%); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink);
}
.reg-bar--start[data-l]::after { left: 0; transform: none; }
.reg-bar--end[data-l]::after { left: auto; right: 0; transform: none; }
.reg-legend { max-width: 70ch; font-size: 15px; color: var(--muted); }

/* Le schede: tutte della stessa misura */
.reg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 16px; }
.reg-card {
  height: 680px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) 236px auto; gap: 14px;
  padding: 22px; background: var(--paper); border-top: 3px solid var(--ink); border-radius: 0 0 16px 16px;
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .4); scroll-margin-top: calc(var(--nav-space) + 24px);
}
.reg-card > * { min-width: 0; }
.reg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reg-time { margin: 0; font-family: var(--serif); font-size: 46px; line-height: .95; font-variant-numeric: lining-nums tabular-nums; }
/* L'omino: l'ora della richiesta non è nei registri (Andrea non la ricorda, 25/10) */
.reg-time--na { font-size: 24px; line-height: 1.1; color: var(--muted); }
.reg-meta { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); text-align: right; }
.reg-title { margin: 0; display: grid; gap: 2px; font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.reg-title span { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.reg-words { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.reg-quote { margin: 0; font-size: 17px; line-height: 1.5; }
.reg-quote p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.reg-quote p::before, .reg-rounds blockquote p::before { content: "«"; }
.reg-quote p::after, .reg-rounds blockquote p::after { content: "»"; }
.reg-card code, .reg-sheet code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; font-style: normal; overflow-wrap: anywhere; }
/* Il pallino ottone del marchio segna dove l'idea è stata dell'AI */
.reg-by { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.reg-by::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); transform: translateY(-1px); }
.reg-open { width: 100%; }

/* Il palco: l'oggetto vero, ridotto dove serve */
.reg-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; padding: 12px; border-radius: 12px; background: var(--ground); }
.reg-zoom { zoom: var(--z, 1); }
.reg-hint { margin: 0; max-width: 30ch; font-size: 14px; text-align: center; color: var(--muted); }
.reg-try { min-height: 48px; }
.reg-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.reg-win { position: relative; width: min(240px, 100%); height: 132px; border-radius: 10px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.reg-win-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }
.reg-win-dots { position: absolute; top: 12px; left: 12px; display: flex; gap: 5px; }
.reg-win-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.reg-win-lines { position: absolute; inset: 34px 14px 12px; display: grid; gap: 9px; align-content: start; }
.reg-win-lines i { height: 8px; border-radius: 4px; background: var(--ground); }
.reg-win-lines i:nth-child(1) { width: 70%; height: 12px; background: var(--line); }
.reg-win-lines i:nth-child(3) { width: 85%; }
.reg-win-lines i:nth-child(5) { width: 60%; }

.reg-diff { display: flex; align-items: center; justify-content: center; gap: 14px; }
.reg-diff .demo-figure { zoom: .3; margin: 0; }
.reg-diff-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.reg-diff .switch-row { flex-direction: column; gap: 0; }
.reg-diff .demo-caption { max-width: 17ch; margin: 0; font-size: 13px; line-height: 1.35; text-align: center; color: var(--muted); }

.reg-stage .svc { width: 560px; margin: 0; }
.reg-stage .svc-subs { display: none; }
.reg-stage--road .road { width: min(360px, 100%); margin: 6px 0; }
.reg-stage--road .road-track { stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.reg-stage .fan { width: 290px; }
.reg-stage .svc-panel { padding-bottom: 8px; }

.reg-cart { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(240px, 100%); padding: 0 18px 16px; border-radius: 16px; background: var(--key-top); box-shadow: 0 0 0 1px var(--line); }
.reg-cart .shop-top { padding: 16px 0 4px; justify-content: flex-end; }

.reg-seg { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.reg-seg .object { margin: 0; }
.reg-seg .object-caption { display: none; }

.reg-track .track-body { font-size: 34px; font-weight: 600; padding-top: 0; justify-content: center; }
.reg-stage .collage { width: 640px; }
.reg-stage .cases { width: 760px; }

.reg-ai { display: inline-flex; align-items: center; font-family: var(--mono); font-weight: 600; font-size: 76px; line-height: 1; color: var(--ink); }
.reg-ai .brand-caret { font-size: inherit; width: .4em; height: .74em; margin: 0 0 0 .08em; vertical-align: baseline; }

/* Immagini ferme dove l'oggetto vive in un'altra pagina */
.reg-mdock { display: inline-flex; align-items: flex-end; gap: 4px; padding: 6px 8px; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(0, 0, 0, .35); }
.reg-mdock i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--key-ink); background: linear-gradient(var(--key-top), var(--key-bottom)); box-shadow: 0 0 0 1px var(--key-edge), 0 2px 0 var(--key-depth); }
.reg-mdock i svg { width: 14px; height: 14px; }
.reg-mdock i.near { width: 32px; height: 32px; }
.reg-mdock i.peak { width: 40px; height: 40px; }
.reg-mdock i.peak svg { width: 20px; height: 20px; }
.reg-mdock i.cta { color: var(--key-dark-ink); background: linear-gradient(var(--key-dark-top), var(--key-dark-bottom)); box-shadow: 0 2px 0 var(--key-dark-depth); }
.reg-mdock b { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }
.reg-pages { position: relative; width: 150px; height: 92px; }
.reg-pages i { position: absolute; width: 104px; height: 78px; border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.reg-pages i:first-child { left: 0; top: 0; opacity: .5; }
.reg-pages i:last-child { right: 0; bottom: 0; }
.reg-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; }
.reg-pills i { font-style: normal; padding: 6px 12px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); color: var(--muted); }
.reg-pills i.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.reg-deck { position: relative; width: 150px; height: 96px; }
.reg-deck i { position: absolute; inset: 0; border-radius: 12px; background: var(--key-top); box-shadow: 0 0 0 1px var(--line), 0 2px 0 var(--key-edge); }
.reg-deck i:nth-child(1) { transform: translateY(8px) rotate(-4deg); }
.reg-deck i:nth-child(2) { transform: translateY(4px) rotate(2deg); }
.reg-deck i:nth-child(3) { transform: translate(18px, -4px) rotate(10deg); }
/* La barra a pillole: copia ridotta della barra in alto, con le stesse classi (vedi «Navigazione in alto»).
   Qui sta nella scheda, non fissa in cima; resta intera anche sotto i 700 pixel, dove quella vera diventa
   il tasto menu; e non ha nomi per il passaggio tra pagine (due nomi uguali fermerebbero il passaggio). */
.pill-nav.reg-pn { position: relative; left: auto; right: auto; top: auto; z-index: auto; transform: none; pointer-events: auto; --pn-x: 12px; --pn-font: 13px; }
.reg-pn .pn-logo, .reg-pn .pn-bar { view-transition-name: none; }
.reg-pn .pn-bar { display: flex; }
/* L'invito: copia del fumetto di main.js (blocco 6), sotto la barra ridotta, con la punta sotto Parliamone.
   Il fumetto ricompare ogni 4 secondi; sale come quello vero (12 pixel). */
.reg-invite { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.reg-bubble {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px;
  border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(0, 0, 0, .35);
  font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink);
  animation: reg-bubble 4s var(--spring) infinite;
}
.reg-bubble::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.reg-bubble::after {
  content: ""; position: absolute; bottom: 100%; right: calc(var(--tip, 48px) - 5px); width: 10px; height: 10px; margin-bottom: -5px;
  background: var(--paper); border-radius: 2px 0 0 0; box-shadow: -1px -1px 0 var(--line); transform: rotate(45deg);
}
.reg-bubble svg { width: 12px; height: 12px; color: var(--muted); }
@keyframes reg-bubble {
  0%, 9% { opacity: 0; transform: translateY(12px); }
  22%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

/* Un giorno nuovo del registro: titolo e riga, poi la sua griglia */
.reg-head--next { gap: 10px; padding-block: clamp(48px, 6vw, 80px) 24px; }

/* Il registro di ogni scheda: si apre sopra la pagina (#d-...), anche senza JavaScript */
.reg-sheet {
  display: none; position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(16px, 4vw, 48px) 16px 48px; background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.reg-sheet:target { display: block; }
html:has(.reg-sheet:target) { overflow: hidden; }
/* La barra in alto starebbe sopra il registro (main fa da strato a sé per il passaggio tra pagine) e
   coprirebbe «Chiudi»: finché il registro è aperto la barra non c'è, e il tasto Tab resta nel registro */
html:has(.reg-sheet:target) .pill-nav:not(.reg-pn) { visibility: hidden; }
.reg-sheet-box { max-width: 760px; margin: 0 auto; padding: clamp(22px, 4vw, 40px); border-radius: 18px; background: var(--paper); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); display: grid; gap: 12px; }
.reg-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.reg-sheet h2 { margin: 0; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; }
.reg-sheet h2:focus { outline: none; }
.reg-sheet .label { margin: 0; }
.reg-h3 { margin: 18px 0 0; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.reg-rounds { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.reg-rounds li { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.reg-round-time { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.reg-rounds blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; }
.reg-rounds blockquote p { margin: 0; }
.reg-round-tail, .reg-round-note { margin: 0; font-size: 15px; color: var(--muted); }
.reg-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.reg-facts div { padding-top: 10px; border-top: 1px solid var(--line); }
.reg-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.reg-facts dd { margin: 4px 0 0; font-size: 16px; }

.reg-next { display: grid; justify-items: start; gap: 22px; padding-block: clamp(64px, 8vw, 112px) clamp(40px, 5vw, 64px); }

@media (max-width: 1080px) { .reg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .reg-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .reg-card { height: 680px; padding: 20px 18px; }
  .reg-hour--odd { display: none; }
  .reg-bar[data-l]::after { font-size: 12px; }
  .reg-bar--more[data-l]::after { display: none; }
  .reg-facts { grid-template-columns: minmax(0, 1fr); }
  .reg-rounds blockquote { font-size: 20px; }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) and (min-width: 761px) {
  .method, .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero, .split, .method { grid-template-columns: minmax(0, 1fr); }
  .hero-device { justify-self: center; }
  .svc-row { grid-template-columns: 36px minmax(0, 1fr) 48px; padding: 20px 6px; }
  .svc-subs { display: none; }
  .svc-panel { grid-template-columns: minmax(0, 1fr); padding: 0 6px 24px; }
  .svc-panel .sp { display: none; }
  .collage { height: 460px; }
  .status { font-size: 11px; letter-spacing: .08em; }
  .brand-slant { font-size: 13px; }
  .rules { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .track-step { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-block: 22px; }
  .track::before { left: 21px; }
  .track-knob { width: 44px; height: 44px; }
  .track-facts { grid-template-columns: minmax(0, 1fr); }
  .entry { grid-template-columns: 54px minmax(0, 1fr); }
  .entry-text { grid-column: 1 / -1; }
  .chapter-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .chapter--flip .half--design { order: 0; }
  .object { padding: 26px 12px; }
  .spec--sheet th { width: 40%; }
}
@media (max-width: 480px) {
  .status-more { display: none; }
}
@media (max-width: 360px) {
  .hero-device .phone { width: 280px; height: 570px; }
}

/* --- Disegni al posto delle foto ------------------------------------------
   Schermate e foto non ci sono ancora (nomi e immagini dei clienti solo con autorizzazione):
   al loro posto ci sono disegni in HTML, CSS e SVG, senza parole né numeri, con i colori del sito.
   Si vede che sono disegni. Quando arrivano le immagini vere, si toglie il disegno e si mette l'immagine. */
.dw { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; font-family: var(--sans); color: var(--ink); }
.dw-screen { padding: 48px 18px 20px; align-items: stretch; justify-content: flex-start; background: var(--paper); }
.dw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dw-bar { display: block; height: 10px; width: 100%; border-radius: 5px; background: var(--line); }
.dw-bar--brand { width: 72px; height: 12px; background: var(--ink); }
.dw-bar--title { height: 14px; width: 78%; background: color-mix(in srgb, var(--ink) 55%, var(--paper)); }
.dw-bar--short { width: 46%; }
.dw-bar--ink { background: var(--ink); }
.dw-bar--url { width: 58%; height: 8px; background: var(--signal); opacity: .7; }
.dw-center { align-self: center; }
.dw-cart { width: 22px; height: 22px; color: var(--ink); }
.dw-cart svg { width: 100%; height: 100%; }
.dw-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.dw-hero, .dw-cell, .dw-photo { display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--ground); box-shadow: inset 0 2px 6px rgba(0,0,0,.06); }
.dw-hero { height: 200px; }
/* e-commerce di moda: galleria a tutta larghezza, capo scuro, taglie, un tasto */
.dw-moda { gap: 0; padding: 0; }
.dw-screen:has(.dw-moda) { padding: 0; }
.dw-gallery { position: relative; display: flex; align-items: center; justify-content: center; height: 54%; background: var(--ground); }
.dw-gallery .dw-shape { width: 44%; }
.dw-gallery .dw-shape--dark { fill: var(--ink); }
.dw-zip { fill: none; stroke: var(--paper); stroke-width: 1.2; stroke-dasharray: 2 2; opacity: .7; }
.dw-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.dw-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dw-dots i.dw-on { background: var(--ink); }
.dw-info { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; }
.dw-info .dw-bar--brand { width: 54px; height: 8px; background: var(--muted); }
.dw-sizes { display: flex; gap: 8px; margin: 4px 0; }
.dw-size { flex: 1; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.dw-size--on { box-shadow: inset 0 0 0 2px var(--ink); }
.dw-size--off { color: var(--line); text-decoration: line-through; }
.dw-trust { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dw-trust .dw-bar { height: 7px; width: 60%; }
.dw-trust .dw-bar + .dw-bar { width: 44%; }
.dw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.dw-cell .dw-shape { width: 34px; }
.dw-shape { width: 72px; height: auto; fill: color-mix(in srgb, var(--ink) 22%, var(--ground)); }
.dw-shape-mark { fill: var(--mark); opacity: .8; }
.dw-photo .dw-shape { width: 26%; max-width: 72px; min-width: 30px; }
.dw-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--key-dark-ink); background: linear-gradient(180deg, var(--key-dark-top), var(--key-dark-bottom)); box-shadow: 0 3px 0 -1px var(--key-dark-depth); }
.dw-btn--sm { min-height: 36px; font-size: 13px; align-self: flex-start; }
.dw-btn--xs { min-height: 10px; width: 60%; border-radius: 5px; }
/* app su misura: com'è davvero, fondo scuro, tre anelli, il triangolo dell'accordo, la tastiera.
   I tre colori sono misurati dalle schermate dell'app (24/10): sono i suoi, non del sito, e
   vivono solo in questo disegno. */
.dw-app { --app-dark: #060A0D; --app-red: #E42962; --app-cyan: #47CCE1; gap: 12px; }
.dw-screen:has(.dw-app) { padding: 44px 14px 14px; background: var(--app-dark); }
.dw-pill { width: 54px; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--paper) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 14%, transparent); }
.dw-pill--on { box-shadow: inset 0 0 0 1px var(--app-cyan); }
.dw-app .dw-top { justify-content: center; gap: 8px; }
.dw-wheel { width: 100%; max-width: 262px; align-self: center; margin: 6px 0; }
.dw-ring circle { fill: none; stroke: color-mix(in srgb, var(--paper) 16%, transparent); stroke-width: .8; }
.dw-ticks line { stroke: color-mix(in srgb, var(--paper) 40%, transparent); stroke-width: 1; }
.dw-poly { fill: color-mix(in srgb, var(--app-red) 10%, transparent); stroke: var(--app-red); stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--app-red) 70%, transparent)); }
.dw-wheel .dw-on { fill: var(--app-red); }
.dw-tabs { display: flex; justify-content: center; gap: 6px; margin-top: auto; }
.dw-tab { width: 46px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--paper) 8%, transparent); }
.dw-tab--on { background: var(--app-cyan); }
.dw-piano { position: relative; display: block; height: 92px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--paper) 6%, transparent); padding: 6px; }
.dw-white { position: absolute; inset: 6px; display: flex; gap: 2px; }
.dw-white i { flex: 1; border-radius: 0 0 4px 4px; background: var(--paper); }
.dw-black { position: absolute; left: 6px; right: 6px; top: 6px; height: 52%; }
.dw-black i, .dw-press { position: absolute; top: 0; width: calc(10% - 2px); height: 100%; }
.dw-black i { left: calc(var(--k) * 10% - 3%); width: 6%; border-radius: 0 0 3px 3px; background: var(--app-dark); }
.dw-press { top: 6px; height: calc(100% - 12px); left: calc(6px + var(--k) * (100% - 12px) / 10); width: calc((100% - 12px) / 10 - 2px); border-radius: 0 0 4px 4px; }
.dw-press--red { background: var(--app-red); }
.dw-press--cyan { background: var(--app-cyan); }
/* CRM: elenco di contatti con lo stato a colori */
.dw-search { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.dw-list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.dw-row { display: flex; align-items: center; gap: 10px; }
.dw-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.dw-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dw-lines .dw-bar { height: 8px; }
.dw-chip { flex: 0 0 auto; width: 34px; height: 12px; border-radius: 6px; }
.dw-chip--new { background: var(--mark); }
.dw-chip--open { background: var(--signal); }
.dw-chip--done { background: var(--line); }
/* riquadri dei servizi nella home */
.img-slot--dw { padding: 20px; }
.img-slot--dw .dw { max-width: 300px; height: auto; }
.dw-site { gap: 8px; padding: 14px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.dw-browser { display: flex; gap: 5px; margin-bottom: 4px; }
.dw-browser i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dw-serp { gap: 10px; }
.dw-search--q { background: var(--paper); }
.dw-search--q .dw-bar { width: 40%; }
.dw-result { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.dw-pipe { flex-direction: row; gap: 10px; align-items: flex-start; }
.dw-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dw-card { height: 30px; border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.dw-card--tall { height: 44px; }
.img-slot--dw .dw-chart { flex-direction: row; align-items: flex-end; gap: 8px; height: 120px; }
.dw-chart i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--ink) 30%, var(--ground)); }
.dw-chart i.dw-on { background: var(--signal); }
.dw-proto { flex-direction: row; align-items: center; gap: 6px; }
.dw-mini { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); min-height: 86px; }
.dw-mini--on { box-shadow: 0 0 0 2px var(--signal); }
.dw-post { gap: 8px; padding: 12px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.dw-post-head { display: flex; align-items: center; gap: 8px; }
.dw-post-head i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(140deg, var(--signal), var(--mark)); }
.dw-post-media { display: block; height: 110px; border-radius: 6px; background: linear-gradient(160deg, var(--ground), var(--key-edge)); }
.dw-arrow { flex: 0 0 14px; height: 2px; background: var(--muted); position: relative; }
.dw-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--muted); border-right: 0; }
/* la foto di repertorio del sito al risparmio: l'icona classica dell'immagine mancante */
.dw-stock { width: 56px; height: auto; fill: none; stroke: #9A9A9A; stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 339px) { .dw-screen { padding: 40px 12px 14px; } .dw-hero { height: 150px; } }

/* --- Passaggio tra pagine ---------------------------------------------------
   Testata e barra di navigazione restano ferme, come in un'app; la pagina vecchia svanisce e la nuova
   entra. Il passaggio animato c'è nei browser recenti (Chrome, Edge, Safari 18). */
@view-transition { navigation: auto; }
/* Testata e barra hanno un nome loro: il browser le fotografa a parte e le tiene sopra il contenuto che
   entra (senza, il contenuto gli passava davanti). Si mostrano solo quelle della pagina nuova, subito e
   senza movimento: sono identiche a quelle di prima, quindi stanno ferme e cambia solo il puntino.
   E se la pagina vecchia era scesa, la testata non scivola giù dall'alto: è già al suo posto.
   Logo, barra e tasto menu hanno un nome ciascuno perché sono tre vetri separati: il vetro smerigliato
   (backdrop-filter) durante il passaggio lo disegna il browser sul gruppo, e il gruppo ha gli angoli
   tondi solo se glieli diamo noi (misurato il 25/10 sul dock di prima: senza, il vetro era un rettangolo). */
.site-header { view-transition-name: site-header; }
.pn-logo { view-transition-name: nav-logo; }
.pn-bar { view-transition-name: nav-bar; }
.pn-toggle { view-transition-name: nav-toggle; }
::view-transition-group(site-header), ::view-transition-group(nav-logo), ::view-transition-group(nav-bar), ::view-transition-group(nav-toggle) { animation: none; z-index: 1; }   /* sopra il contenuto che entra */
::view-transition-old(site-header), ::view-transition-old(nav-logo), ::view-transition-old(nav-bar), ::view-transition-old(nav-toggle) { display: none; }
::view-transition-group(nav-logo), ::view-transition-group(nav-bar), ::view-transition-group(nav-toggle) { border-radius: 999px; }
::view-transition-new(site-header), ::view-transition-new(nav-logo), ::view-transition-new(nav-bar), ::view-transition-new(nav-toggle) { animation: none; }
/* L'ingresso dal basso lo fa il passaggio stesso: il contenuto della pagina nuova (main) ha un nome suo,
   il browser lo fotografa a parte e lo anima insieme al resto, quindi parte sempre nello stesso istante
   in cui la pagina vecchia comincia a svanire. Prima l'ingresso era un'animazione della pagina: partiva
   quando la pagina nuova era pronta, a volte prima che il passaggio cominciasse, e le due pagine si
   sovrapponevano. La distanza tra i due cambiava da pagina a pagina e da volta a volta (misurato il 24/10).
   La pagina vecchia toglie il nome al suo main mentre se ne va (classe contenuto-fermo, dallo script
   nella testata): il suo contenuto resta nella foto della pagina e svanisce con lei, esattamente com'era
   a schermo. Con il nome il browser fotografava il main intero, più alto dello schermo, e se la pagina
   era scesa ne mostrava un altro pezzo. Per lo stesso motivo, tornando indietro col browser (la pagina
   riapre scesa dov'era) il contenuto non entra dal basso: compare e basta.
   La pagina vecchia svanisce in 0,14 secondi. Il contenuto nuovo parte dopo 0,06 secondi: compare in 0,26
   secondi e intanto sale di 48 pixel, in 0,65 secondi. Fino al 25/10 compariva lento quanto la salita e
   partiva dopo 0,1 secondi: lo schermo restava quasi vuoto per 0,17 secondi e il contenuto arrivava sbiadito
   (a metà dopo 0,28 secondi). Ora il quasi vuoto dura 0,05 secondi e il contenuto è a metà dopo 0,14.
   Partire ancora prima (0,04) toglie il vuoto ma mostra le due pagine sovrapposte: provato, scartato. */
main { view-transition-name: contenuto; }
.contenuto-fermo main { view-transition-name: none; }
::view-transition-group(contenuto) { animation: none; }
::view-transition-new(contenuto) { animation: page-in-sale .65s cubic-bezier(.25, .46, .45, .94) .06s both, page-in-appare .26s cubic-bezier(.25, .46, .45, .94) .06s both; }
/* Fusione normale, non quella del browser (plus-lighter): con la pagina nuova già piena e la vecchia
   che svanisce sopra, la fusione del browser somma le due e per un attimo è tutto bianco */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; animation: page-out .14s cubic-bezier(.3, 0, .2, 1) both; }
::view-transition-new(root) { animation: none; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(48px); } }
@keyframes page-in-sale { from { transform: translateY(48px); } }
@keyframes page-in-appare { from { opacity: 0; } }
/* Senza passaggio animato (Firefox, file aperto dal disco, primo arrivo sul sito) l'ingresso lo fa la
   pagina, sezione dopo sezione. Con il passaggio lo script nella testata mette la classe con-passaggio. */
html:not(.con-passaggio) main > * { animation: page-in .65s cubic-bezier(.25, .46, .45, .94) .1s both; }
/* L'indice di Servizi scende in basso con position: fixed: un'animazione che resta applicata (both) lo farebbe
   restare dentro il suo posto invece che in fondo allo schermo. Dopo l'ingresso l'animazione si toglie. */
html:not(.con-passaggio) main > .chapter-index-slot { animation-fill-mode: backwards; }
html:not(.con-passaggio) main > :nth-child(2) { animation-delay: .15s; }
html:not(.con-passaggio) main > :nth-child(3) { animation-delay: .2s; }
html:not(.con-passaggio) main > :nth-child(n + 4) { animation-delay: .25s; }
main > .reg-sheet { animation: none !important; }   /* i registri di Design si aprono subito */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Design: i progetti (dal 25/10)
   Ogni progetto: testo fermo da una parte, dall'altra lo schermo del computer con la
   pagina vera e il telefono appoggiato davanti. Scorrendo, la pagina scorre nello schermo
   (animazione legata allo scorrimento, solo dove il browser la conosce); i segmenti
   sotto accendono una schermata alla volta.
   ========================================================================== */
.pj-head { display: grid; justify-items: start; gap: 22px; padding-block: clamp(24px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.pj-index { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.pj { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); scroll-margin-top: var(--nav-space); }
.pj-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.pj--flip .pj-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pj--flip .pj-text { order: 2; }
.pj-text { position: sticky; top: calc(var(--nav-space) + 28px); display: grid; gap: 20px; align-content: start; }

/* Il numero grande, a filo come su una confezione */
.pj-num {
  margin: 0; font-family: var(--serif); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(96px, 11vw, 168px); line-height: .78; letter-spacing: -.02em;
  font-variant-numeric: lining-nums; color: var(--line);
}
@supports (-webkit-text-stroke: 1px black) {
  .pj-num { color: transparent; -webkit-text-stroke: 1.25px var(--ink); }
}
.pj-name { margin: 0; font-size: clamp(46px, 5.2vw, 76px); line-height: .96; }
.pj-where { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); }
.led--off { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 22%, transparent); }
.pj-lede { max-width: 46ch; font-size: 19px; }

.pj-nums { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.pj-nums li { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--ink); }
.pj-nums strong {
  font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 3.4vw, 46px); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.pj-nums span { font-size: 14px; line-height: 1.35; color: var(--muted); }

/* Lo schermo e il telefono */
.pj-right { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.pj-stage {
  position: relative; width: 100%; margin: 0;
  padding: 0 clamp(36px, 5vw, 72px) clamp(64px, 8vw, 110px) 0;
}
.pj-browser {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 44px 70px -42px rgba(0, 0, 0, .5), 0 16px 30px -20px rgba(0, 0, 0, .28);
}
.pj-bar {
  display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px;
  background: var(--ground); border-bottom: 1px solid var(--line);
}
.pj-dots { display: flex; gap: 6px; }
.pj-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pj-url { flex: 1; margin-right: 45px; text-align: center; font-size: 13px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pj-view { position: relative; aspect-ratio: 16 / 10; background: var(--ground); }
.pj-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0; transition: opacity .35s ease;
}
.pj-shot.is-on { opacity: 1; }

.pj-phone {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 150px; height: 310px; padding: 7px; border-radius: 30px;
  transform: rotate(-3deg); transform-origin: 50% 100%;
  transition: transform .55s var(--spring), opacity .3s ease;
}
.pj-phone .screen { border-radius: 23px; }
.pj-phone .notch { top: 6px; width: 46px; height: 13px; margin-left: -23px; border-radius: 8px; }
.pj-phone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Da vicino il telefono si fa da parte: la schermata scelta si vede tutta */
.pj-right:not([data-state="intera"]) .pj-phone { transform: translate(18px, 60px) rotate(6deg); opacity: 0; }

.pj-seg { flex-wrap: wrap; max-width: 100%; }
.pj-cap { max-width: 58ch; min-height: 3.2em; margin: 0; font-size: 15px; color: var(--muted); }

/* La pagina che scorre nello schermo mentre scorri tu */
@keyframes pj-scorri { from { object-position: 50% 0%; } to { object-position: 50% 100%; } }
@supports (animation-timeline: view()) {
  .pj-shot--scroll {
    animation: pj-scorri linear both;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;
  }
}

/* Il registro diventa l'ultimo progetto; la copia ridotta dello schermo nella sua scheda */
.reg-pj { width: min(320px, 100%); }
.reg-pj .pj-view { aspect-ratio: 16 / 9; }
.reg-head--pj { border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 104px); }
.reg-head--pj .pj-num { margin-bottom: 6px; }

@media (max-width: 1080px) {
  /* Una colonna: prima numero e nome, poi lo schermo, poi il testo */
  .pj-grid, .pj--flip .pj-grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .pj-text { display: contents; }
  .pj-text > * { order: 3; }
  .pj-num { order: 0; }
  .pj-name { order: 1; }
  .pj-where { order: 1; }
  .pj-right { order: 2; margin-block: 12px 8px; }
  .pj-text .spec { max-width: 560px; }
}
@media (max-width: 600px) {
  .pj-stage { padding: 0 26px 54px 0; }
  .pj-phone { width: 96px; height: 200px; padding: 5px; border-radius: 20px; }
  .pj-phone .screen { border-radius: 15px; }
  .pj-phone .notch { top: 4px; width: 30px; height: 8px; margin-left: -15px; }
  .pj-bar { height: 30px; }
  .pj-url { margin-right: 0; font-size: 12px; }
  .pj-seg button { padding: 0 12px; }
  .pj-nums strong { font-size: 32px; }
  .pj-lede { font-size: 18px; }
}
/* 04, il negozio di moda: disegni al posto delle schermate (il nome resta su richiesta) */
.pj-nums--3 li:last-child { grid-column: 1 / -1; }
.pj-draw { display: grid; }
.pj-draw--dopo { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--paper); color: var(--ink); font-family: var(--sans); }
.pj-draw-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.pj-draw-top .dw-bar--brand { width: 84px; }
.pj-draw-menu { display: flex; gap: 10px; }
.pj-draw-menu i { width: 34px; height: 6px; border-radius: 3px; background: var(--line); }
.pj-draw--dopo .dw-gallery { height: auto; margin: 18px 0 18px 22px; border-radius: 12px; }
.pj-draw--dopo .dw-gallery .dw-shape { width: 36%; }
.pj-draw-info { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px 84px 18px 26px; }
.pj-draw-info .dw-bar--title { height: 18px; }
.pj-draw.shop-old { align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; padding: 18px; }
.pj-draw.shop-old .mb-logo { font-size: 13px; padding: 7px 10px; }
.pj-draw.shop-old .so-menu i { width: 46px; height: 8px; }
.pj-draw.shop-old .so-banner { font-size: 14px; padding: 9px; }
.pj-draw.shop-old .so-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pj-draw.shop-old .so-buttons .fake-btn { font-size: 12px; padding: 10px 4px; }
/* Il telefono disegnato: la pagina del telefono di Lavori, rimpicciolita per stare nel telefono piccolo */
.pj-phone .pj-scale { display: block; width: 276px; height: 600px; transform: scale(.4928); transform-origin: 0 0; }
@media (max-width: 600px) {
  .pj-phone .pj-scale { transform: scale(.3116); }
  .pj-draw-top { padding: 8px 12px; }
  .pj-draw-menu i { width: 18px; height: 4px; }
  .pj-draw-top .dw-bar--brand { width: 46px; height: 8px; }
  .pj-draw--dopo .dw-gallery { margin: 10px 0 10px 12px; }
  .pj-draw-info { gap: 6px; padding: 10px 12px; }
  .pj-draw-info .dw-bar { height: 6px; }
  .pj-draw-info .dw-bar--title { height: 9px; }
  .pj-draw-info .dw-sizes { gap: 4px; margin: 0; }
  .pj-draw-info .dw-size { height: 20px; border-radius: 5px; font-size: 9px; }
  .pj-draw-info .dw-btn { min-height: 24px; padding: 0 6px; border-radius: 7px; font-size: 9px; }
  .pj-draw-info .dw-trust { display: none; }
  .pj-draw.shop-old { gap: 6px; padding: 10px; }
  .pj-draw.shop-old .mb-logo { font-size: 9px; padding: 4px 6px; }
  .pj-draw.shop-old .so-menu i { width: 16px; height: 5px; }
  .pj-draw.shop-old .so-banner { font-size: 9px; padding: 5px; }
  .pj-draw.shop-old .so-grid { gap: 4px; }
  .pj-draw.shop-old .so-buttons .fake-btn { font-size: 8px; padding: 5px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .pj-shot--scroll { animation: none !important; }
  .pj-phone, .pj-shot { transition: none !important; }
}

/* --- Design: il mazzo dei progetti (dal 25/10) ---
   Le schede stanno una sull'altra come fogli su un tavolo: ognuna un po' più in alto, più piccola
   e girata. La prima scivola via inclinandosi e torna in fondo al mazzo. */
.pj-head--deck { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; column-gap: clamp(32px, 5vw, 88px); }
.pj-head-text { display: grid; justify-items: start; gap: 22px; }
.pjd { display: grid; justify-items: center; gap: 26px; width: 100%; }
.pjd-stack { position: relative; width: min(400px, 100%); height: 540px; margin-top: 56px; }
.pjd-card {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: 10px;
  padding: 20px; background: var(--paper);
  border-top: 3px solid var(--ink); border-radius: 0 0 16px 16px;
  box-shadow: 0 0 0 1px var(--line), 0 30px 50px -34px rgba(0, 0, 0, .5);
  transform-origin: 50% 100%;
  transform: translate(calc(var(--i, 0) * var(--dx, 14px)), calc(var(--i, 0) * -17px)) rotate(var(--r, 0deg)) scale(calc(1 - var(--i, 0) * .04));
  transition: transform .55s var(--spring), opacity .3s ease;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.pjd-card[data-pos="far"] { opacity: 0; }
.pjd-card[data-pos="front"] { cursor: grab; }
.pjd-card.is-drag { cursor: grabbing; transition: none; }
.pjd-card.is-out {
  transform: translate(var(--out-x, -125%), 40px) rotate(var(--out-r, -14deg));
  transition: transform .34s cubic-bezier(.45, 0, .75, .4);
}
.pjd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pjd-num {
  font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: .8; letter-spacing: -.02em;
  font-variant-numeric: lining-nums; color: var(--line);
}
@supports (-webkit-text-stroke: 1px black) { .pjd-num { color: transparent; -webkit-text-stroke: 1px var(--ink); } }
.pjd-state { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pjd-pic { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.pjd-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; pointer-events: none; }
.pjd-name { margin: 4px 0 0; font-size: 34px; line-height: 1; }
.pjd-where { margin: 0; font-size: 14px; color: var(--muted); }
.pjd-nums { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-self: start; }
.pjd-nums span { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--ink); font-size: 13px; line-height: 1.3; color: var(--muted); }
.pjd-nums strong { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.pjd-go { width: 100%; }
.pjd-ctrl { display: flex; align-items: center; gap: 18px; }
.pjd-ctrl[hidden] { display: none !important; }
.pjd-count { margin: 0; min-width: 64px; text-align: center; font-family: var(--serif); font-size: 22px; font-variant-numeric: lining-nums tabular-nums; }
.pjd-ctrl svg { display: block; }
/* Prima che arrivi il JavaScript il mazzo è già impilato com'è dopo: stesse posizioni, stessa inclinazione
   (i valori di TILT in main.js). Fino al 25/10 le schede restavano in colonna finché lo script non girava:
   arrivando su Design si vedevano per un attimo tutte aperte, una sotto l'altra. */
.pjd:not(.is-ready) .pjd-card:nth-child(1) { z-index: 5; }
.pjd:not(.is-ready) .pjd-card:nth-child(2) { --i: 1; --r: 2.4deg; z-index: 4; }
.pjd:not(.is-ready) .pjd-card:nth-child(3) { --i: 2; --r: -1.8deg; z-index: 3; }
.pjd:not(.is-ready) .pjd-card:nth-child(4) { --i: 3; --r: 3.2deg; z-index: 2; }
.pjd:not(.is-ready) .pjd-card:nth-child(5) { --i: 4; --r: -2.6deg; z-index: 1; opacity: 0; }
/* Senza JavaScript del tutto: le schede in fila, una sotto l'altra, e niente frecce */
@media (scripting: none) {
  .pjd .pjd-stack { height: auto; margin-top: 0; display: grid; gap: 16px; }
  .pjd .pjd-card { position: relative; transform: none; opacity: 1; }
  .pjd .pjd-ctrl { display: none; }
  .pj-head--deck { align-items: start; }   /* il testo resta in alto, non a metà della colonna lunga */
}
@media (max-width: 1080px) {
  .pj-head--deck { grid-template-columns: minmax(0, 1fr); }
  .pjd-stack { width: min(380px, 100%); margin-top: 40px; }
}
@media (max-width: 600px) {
  .pjd-stack { width: calc(100% - 26px); justify-self: start; height: 500px; margin-top: 40px; }
  .pjd-card { --dx: 7px; }
  .pjd-card { padding: 16px; gap: 8px; }
  .pjd-num { font-size: 52px; }
  .pjd-name { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .pjd-card, .pjd-card.is-out { transition: none !important; }
}