/* CartoNoir — Configuratore /crea-guida. Stili specifici; l'identità (colori, font, bottoni,
   card, ombre) viene da /brand.css. CSP-safe: nessun media remoto, solo CSS/SVG. */

body.ed { background: var(--paper); }

/* ---------- Sotto-barra: ritorno, breadcrumb, autosave ---------- */
.cg-subbar { border-bottom: 1px solid var(--line); background: var(--paper-raise); }
.cg-subbar-in { display: flex; align-items: center; gap: 18px; padding: 11px 0; }
.cg-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--ink); }
.cg-back svg { width: 18px; height: 18px; }
/* La cascata `body.ed a:not(.ed-btn){color:inherit}` di brand.css ha specificità
   (0,2,2) e batteva queste regole: gli hover erano dichiarati e non cambiavano
   nulla (audit v2 §20). Qui la specificità sale a (0,3,1) o più, così il colore
   arriva davvero anche se la cascata di brand.css resta. */
body.ed .cg-back:hover { color: var(--brand-oro-testo); }
.cg-breadcrumb { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: .84rem; color: var(--ink-soft); }
body.ed .cg-breadcrumb a:hover { color: var(--brand-oro-testo); }
.cg-breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }
/* «Home» e' un bersaglio, non solo una parola: misurato 36x22px, due pixel
   sotto il minimo AA di 24 (WCAG 2.5.8). Due pixel di `padding` verticale li
   restituiscono senza spostare niente — la barra ha `align-items: center` e il
   testo resta dov'era. Non si tocca l'altezza della riga: sarebbe un redesign
   per due pixel. */
.cg-breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
/* --ink-faint su avorio misurava 3,04:1 (audit v2 §14 voce 5): sotto la soglia. */
.cg-autosave { margin-left: auto; font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; }
.cg-autosave::before { content: ''; width: 7px; height: 7px; border-radius: 0; background: var(--ok); }

/* ---------- Barra 6 fasi ---------- */
.cg-steps { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper-raise) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.cg-steps-mobile { display: none; }
.cg-steps-list { list-style: none; margin: 0; padding: 12px 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cg-steps-list a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); font-family: var(--sans); color: var(--ink-soft); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.cg-steps-list b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 0; border: 1.5px solid var(--line-strong); font-size: .82rem; font-weight: 700; flex: none; transition: all var(--dur-1) var(--ease); }
.cg-steps-list span { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ed .cg-steps-list a:hover { background: color-mix(in srgb, var(--brand-oro) 8%, transparent); color: var(--ink); }
body.ed .cg-steps-list a.is-active { color: var(--navy); }
.cg-steps-list a.is-active b { background: var(--navy); color: var(--brand-avorio); border-color: var(--navy); }

/* ---------- Intro emozionale ---------- */
.cg-intro { padding: clamp(40px,6vw,84px) 0 clamp(28px,4vw,52px); }
.cg-intro-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,72px); align-items: center; }
.cg-intro-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.cg-intro-points li { display: flex; align-items: center; gap: 11px; font-family: var(--sans); font-size: 1rem; color: var(--ink-soft); }
.cg-intro-points svg { width: 20px; height: 20px; color: var(--brand-oro-testo); flex: none; }

/* ---------- Mockup libro (CSS) ----------
   I quattro `--s-*` sono la palette dello STILE CLIENTE: crea-guida.js li riscrive
   inline sul mockup del rail (#cg-preview-book) a ogni scelta. I valori qui sotto
   sono solo la prima pittura, e ora sono di marca: nessun colore fuori sistema
   scritto a mano nel foglio (audit v2 §1). */
.cg-book { position: relative; width: min(300px, 74%); aspect-ratio: 3 / 4; margin: 0 auto; --s-ink: var(--brand-noir); --s-paper: var(--brand-avorio); --s-accent: var(--brand-oro); --s-accent2: var(--brand-blu-notte); }
.cg-book-cover { position: absolute; inset: 0; border-radius: 6px 12px 12px 6px; background: var(--s-paper); box-shadow: var(--shadow-lg), inset 10px 0 18px -12px color-mix(in srgb, var(--brand-noir) 35%, transparent); border-left: 6px solid color-mix(in srgb, var(--s-ink) 70%, var(--brand-noir)); padding: 20px 20px 20px 26px; display: flex; flex-direction: column; overflow: hidden; transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
/* NB: questo artwork (alone oro + barretta) è replicato nel libro HERO 3D
   (.cg-b3-cover-front::before/::after più sotto): se cambia qui, va aggiornato anche lì. */
.cg-book-cover::before { content: ''; position: absolute; left: 0; right: 0; top: 38%; height: 42%; background: radial-gradient(120% 80% at 70% 20%, var(--s-accent) 0%, transparent 60%), linear-gradient(160deg, var(--s-accent2) 0%, transparent 70%); opacity: .9; }
.cg-book-cover::after { content: ''; position: absolute; left: 26px; bottom: 20px; width: 34px; height: 3px; background: var(--s-accent); }
.cg-book-kicker { position: relative; z-index: 2; font-family: var(--sans); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--s-ink) 72%, transparent); }
.cg-book-title { position: relative; z-index: 2; margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.05; color: var(--s-ink); }
.cg-book-sub { position: relative; z-index: 2; margin-top: auto; font-family: var(--sans); font-size: .74rem; color: color-mix(in srgb, var(--s-ink) 66%, transparent); }
.cg-book-tagline { position: relative; z-index: 2; margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: .82rem; color: color-mix(in srgb, var(--s-accent2) 90%, var(--s-ink)); }
.cg-book--mini .cg-book-tagline { display: none; }
.cg-book-mark { position: absolute; z-index: 3; top: 0; right: 20px; width: 16px; height: 46px; background: var(--s-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.cg-book-pages { position: absolute; top: 3%; right: -6px; width: 10px; height: 94%; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(to right, var(--brand-avorio-2), var(--brand-avorio-2) 1px, var(--paper-3) 2px, var(--brand-avorio-2) 3px); box-shadow: var(--shadow-sm); }
.cg-book[data-dark="true"] .cg-book-kicker { color: color-mix(in srgb, var(--s-ink) 85%, transparent); }

/* ---------- Libro HERO 3D "Volume Noir" (intro): scena cinematografica ----------
   Ciclo unico di 16s, tutte le animazioni condividono la durata e restano
   sincronizzate. Sequenza: entrata di tre quarti (dorso visibile), la
   copertina prende fiato e si spalanca con overshoot, il corpo arretra di
   scala per inquadrare la doppia pagina, le farfalle escono, due fogli a
   doppia faccia girano davvero (si vede il verso passare), sosta su ogni
   pagina, poi chiusura a cascata e ritorno alla posa iniziale.
   Vincoli: solo transform e opacity animati; stato base sempre visibile
   (libro chiuso); geometria del volume: metà spessore 14px, risma da
   z -12px a z +9px, fogli a z 10.5 / 11.5 (chiusi) e 16 / 17 (girati,
   sopra il risguardo della copertina aperta a z ~15.5). */

.cg-intro-visual { perspective: 1500px; perspective-origin: 50% 38%; }

/* Il libro NON deve coprire il titolo (audit v2 §7: al fotogramma peggiore copriva
   il 16% del .ed-h1 a 1440 e il 19% a 768). La causa non è la coreografia ma
   l'ingombro: a copertina spalancata la scena si estende verso sinistra di quasi
   una larghezza di libro, e la colonna non la conteneva. Rimedio SUL CONTENITORE,
   senza toccare un solo keyframe: il volume è più stretto e ancorato al bordo
   destro della sua colonna, così anche il fotogramma più invadente resta dentro. */
.cg-book--hero { width: min(268px, 62%); margin-left: auto; margin-right: 0; overflow: visible; transform-style: preserve-3d; }

/* ---------- Il "Volume Noir" è di MARCA, non dello stile del cliente ----------
   È l'oggetto che dà il nome al marchio e fino a ieri era un volume chiaro con
   quattro colori fuori palette (audit v2 §1-§5). Ora: corpo noir, copertina blu
   notte, pagine avorio, oro ridotto a filetti, tagli e segni — mai un secondo
   fondo oro nella schermata (regola del committente). crea-guida.js ha smesso di
   ridipingerlo con la palette dello stile scelto: quel compito resta del mockup
   del rail (#cg-preview-book), che è davvero l'anteprima della guida del cliente. */
.cg-book--hero {
  --s-ink: var(--brand-noir);
  --s-paper: var(--brand-blu-notte);
  --s-accent: var(--brand-oro);
  --s-accent2: var(--brand-blu-2);
}
.cg-book--hero .cg-book-kicker { color: var(--brand-oro); }
.cg-book--hero .cg-book-title { color: var(--brand-avorio); }
.cg-book--hero .cg-book-sub { color: color-mix(in srgb, var(--brand-avorio) 72%, transparent); }
.cg-book--hero .cg-book-tagline { color: color-mix(in srgb, var(--brand-avorio) 66%, transparent); }
/* L'alone d'artwork resta la stessa forma, ma velato: l'oro qui è una firma, non
   una superficie (tavola 28, regola 5). */
.cg-book--hero .cg-b3-cover-front::before { opacity: .42; }

/* Corpo unico: posa, fluttuare e "movimento di camera" (scala) */
.cg-b3-body {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* Stato base VISIBILE anche ad animazioni ferme: volume chiuso di tre quarti */
  transform: translateX(0) translateY(0) scale(1) rotateX(-7deg) rotateY(18deg);
  animation: cg-b3-pose 16s cubic-bezier(.45,.15,.25,1) infinite;
  will-change: transform;
}

/* Quarta di copertina: leggermente più grande della risma, come un cartonato */
.cg-b3-backboard {
  position: absolute; inset: -1.8% -2.5% -1.8% 0;
  border-radius: 4px 10px 10px 4px;
  transform: translateZ(-14px);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--brand-avorio) 7%, transparent), transparent 42%),
    color-mix(in srgb, var(--s-ink) 78%, var(--brand-noir));
  box-shadow: 0 26px 60px -18px color-mix(in srgb, var(--brand-blu-notte) 45%, transparent); /* statica: viaggia rasterizzata col corpo */
}

/* Dorso: faccia laterale vera (rotazione a 90 gradi), filetti e titolo oro */
.cg-b3-spine {
  position: absolute; top: -1.8%; bottom: -1.8%; left: 0; width: 28px;
  transform-origin: left center;
  transform: translateZ(-14px) rotateY(-90deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* I filetti erano rgba(201,162,75,.85) = #C9A24B: l'oro sbagliato di poco
     (distanza 27 da --brand-oro), invisibile alla vecchia guardia perché scritto
     in rgba() — audit v2 §2. */
  --filetto-oro: color-mix(in srgb, var(--brand-oro) 85%, transparent);
  background:
    linear-gradient(to bottom,
      transparent 8%, var(--filetto-oro) 8%, var(--filetto-oro) calc(8% + 2px), transparent calc(8% + 2px),
      transparent 90%, var(--filetto-oro) 90%, var(--filetto-oro) calc(90% + 2px), transparent calc(90% + 2px)),
    linear-gradient(to right,
      color-mix(in srgb, var(--s-ink) 86%, var(--brand-noir)),
      color-mix(in srgb, var(--s-ink) 58%, var(--brand-noir)) 50%,
      color-mix(in srgb, var(--s-ink) 88%, var(--brand-noir)));
  display: flex; align-items: center; justify-content: center;
}
.cg-b3-spine span {
  writing-mode: vertical-rl;
  font-family: var(--sans); font-size: .5rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent-soft);
}

/* Risma: tagli dorati con righe di pagina (facce laterali reali) */
.cg-b3-edge { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cg-b3-edge-fore {
  top: .8%; bottom: .8%; right: 1px; width: 21px;
  transform-origin: right center;
  transform: translateZ(-12px) rotateY(90deg);
  border-radius: 0 3px 3px 0;
  /* Taglio dorato della risma: i quattro ori erano #A9853F #E2C485 #CAA658 #9C7C39,
     nessuno di marca. Ora sono i quattro derivati dichiarati. */
  background:
    repeating-linear-gradient(to right, color-mix(in srgb, var(--brand-avorio) 26%, transparent) 0 1px, color-mix(in srgb, var(--brand-oro-testo) 26%, transparent) 1px 2px),
    linear-gradient(to right, var(--brand-oro-deep), var(--brand-oro-soft) 45%, var(--brand-oro) 75%, var(--brand-oro-testo));
}
.cg-b3-edge-top {
  top: .8%; left: 0; right: 1px; height: 21px;
  transform-origin: 50% 0;
  transform: translateZ(-12px) rotateX(90deg);
  background:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--brand-avorio) 26%, transparent) 0 1px, color-mix(in srgb, var(--brand-oro-testo) 26%, transparent) 1px 2px),
    linear-gradient(to bottom, var(--brand-oro-deep), var(--brand-oro-soft) 55%, var(--brand-oro-testo));
}

/* Pagine: tipografia condivisa */
.cg-leaf-eyebrow { font-family: var(--sans); font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brand-oro-testo); }
.cg-leaf-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.02rem, 2vw, 1.3rem); line-height: 1.12; color: var(--ink); margin: 0; }
.cg-leaf-text { font-family: var(--sans); font-size: .72rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.cg-leaf-rule { width: 40px; height: 3px; background: var(--accent); border-radius: 0; }
.cg-leaf-quote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.06rem, 2.1vw, 1.4rem); line-height: 1.25; color: var(--paper); margin: 0; }
.cg-leaf-quote em { color: var(--accent-soft); font-style: italic; }

/* Ultima pagina stampata (fronte della risma) */
.cg-b3-lastpage {
  position: absolute; inset: .8% 1px .8% 0;
  transform: translateZ(9px);
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-noir) 14%, transparent), transparent 16%), var(--paper-raise);
  padding: 24px 20px 22px 28px;
  display: flex; flex-direction: column; justify-content: center; gap: 11px;
  overflow: hidden;
}
.cg-b3-lastpage::after { /* la luce si apre quando il foglio 2 la rivela */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--brand-noir) 6%, transparent), color-mix(in srgb, var(--brand-noir) 50%, transparent) 70%, color-mix(in srgb, var(--brand-noir) 65%, transparent));
  animation: cg-b3-reveal-last 16s linear infinite;
}

/* Fogli a doppia faccia: girano attorno alla cucitura e ATTERRANO SOPRA la
   copertina aperta (il translateZ cresce durante il giro: la pagina scavalca). */
.cg-b3-sheet {
  position: absolute; inset: .8% 4px .8% 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  will-change: transform;
}
.cg-b3-sheet-1 { transform: translateZ(11.5px); animation: cg-b3-turn-1 16s cubic-bezier(.5,.06,.22,1) infinite; }
.cg-b3-sheet-2 { transform: translateZ(10.5px); animation: cg-b3-turn-2 16s cubic-bezier(.5,.06,.22,1) infinite; }

.cg-b3-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 0 3px 3px 0;
  padding: 24px 20px 22px 28px;
  display: flex; flex-direction: column; justify-content: center; gap: 11px;
  overflow: hidden;
}
/* Le carte: tre avori di sistema al posto dei sei di prima (audit v2 §4). */
.cg-b3-recto { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-noir) 13%, transparent), transparent 15%), var(--brand-avorio); }
.cg-b3-recto-dark {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-noir) 35%, transparent), transparent 22%), linear-gradient(160deg, var(--brand-blu-notte), var(--brand-noir));
  align-items: center; text-align: center;
}
.cg-b3-verso { /* il retro: pre-ruotato di 180, si vede passare durante il giro */
  transform: rotateY(180deg);
  background: linear-gradient(270deg, color-mix(in srgb, var(--brand-noir) 13%, transparent), transparent 18%), var(--paper-raise);
  align-items: center; justify-content: center;
}
.cg-b3-orn { /* piccola bussola oro sul verso: dettaglio da edizione pregiata.
     Il cerchio è la FORMA del segno (come le icone del set), non un angolo
     smussato: resta tondo anche col regime "angoli vivi". */
  width: 52px; height: 52px; position: relative;
  border: 1px solid color-mix(in srgb, var(--brand-oro) 60%, transparent); border-radius: 50%;
}
.cg-b3-orn::before { content: ''; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--brand-oro) 35%, transparent); border-radius: 50%; }
.cg-b3-orn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); }

/* Lama di luce che rasenta la pagina un attimo prima che si alzi: vende la
   flessione della carta (innesto dal candidato fisico-realistico). */
.cg-b3-blade {
  position: absolute; top: -12%; bottom: -12%; left: 0; width: 34%;
  pointer-events: none; opacity: 0;
  transform: translateX(-60%) skewX(-12deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-oro-soft) 55%, transparent) 50%, transparent);
}
.cg-b3-sheet-1 .cg-b3-blade { animation: cg-b3-blade-1 16s linear infinite; }
.cg-b3-sheet-2 .cg-b3-blade { animation: cg-b3-blade-2 16s linear infinite; }

/* Luce e ombra coerenti col giro: solo opacity animata su gradienti fissi */
.cg-b3-sheet .cg-b3-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--brand-noir) 5%, transparent), color-mix(in srgb, var(--brand-noir) 45%, transparent) 60%, color-mix(in srgb, var(--brand-noir) 60%, transparent));
}
.cg-b3-sheet .cg-b3-verso::after { background: linear-gradient(260deg, color-mix(in srgb, var(--brand-noir) 5%, transparent), color-mix(in srgb, var(--brand-noir) 50%, transparent) 70%); }
.cg-b3-sheet-1 .cg-b3-recto::after { animation: cg-b3-shade-1r 16s linear infinite; }
.cg-b3-sheet-1 .cg-b3-verso::after { animation: cg-b3-shade-1v 16s linear infinite; }
.cg-b3-sheet-2 .cg-b3-recto::after { animation: cg-b3-shade-2r 16s linear infinite; }
.cg-b3-sheet-2 .cg-b3-verso::after { animation: cg-b3-shade-2v 16s linear infinite; }

/* Copertina: gruppo 3D con spessore vero (faccia esterna, risguardo, taglio) */
.cg-b3-cover {
  position: absolute; top: -1.8%; bottom: -1.8%; left: 0; right: -2.5%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translateZ(14px); /* stato base: chiusa sopra la risma */
  animation: cg-b3-cover 16s cubic-bezier(.5,.05,.2,1) infinite;
  will-change: transform;
}
.cg-b3-cover-front {
  position: absolute; inset: 0;
  transform: translateZ(1.5px);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 4px 10px 10px 4px;
  background: var(--s-paper);
  border-left: 5px solid color-mix(in srgb, var(--s-ink) 70%, var(--brand-noir));
  box-shadow: inset 12px 0 20px -14px color-mix(in srgb, var(--brand-noir) 40%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--brand-avorio) 7%, transparent);
  padding: 20px 20px 20px 26px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* NB: stesso artwork brand del mockup base (.cg-book-cover::before/::after più
   sopra in questo file): se si cambia l'artwork lì, va aggiornato anche qui. */
.cg-b3-cover-front::before {
  content: ''; position: absolute; left: 0; right: 0; top: 38%; height: 42%;
  background: radial-gradient(120% 80% at 70% 20%, var(--s-accent) 0%, transparent 60%),
              linear-gradient(160deg, var(--s-accent2) 0%, transparent 70%);
  opacity: .9;
}
.cg-b3-cover-front::after { content: ''; position: absolute; left: 26px; bottom: 20px; width: 34px; height: 3px; background: var(--s-accent); }
.cg-b3-cover-back { /* risguardo firmato: si vede quando la copertina è aperta */
  position: absolute; inset: 0;
  transform: translateZ(-1.5px) rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(120deg, var(--brand-avorio), var(--brand-avorio-2));
  box-shadow: inset 14px 0 24px -16px color-mix(in srgb, var(--brand-noir) 35%, transparent);
}
/* Cornice del risguardo: è un segno (tavola 14), quindi angoli vivi. */
.cg-b3-cover-back::before { content: ''; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--brand-oro) 45%, transparent); border-radius: 0; }
.cg-b3-cover-back::after { /* rivelazione del risguardo all'apertura */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(260deg, color-mix(in srgb, var(--brand-noir) 6%, transparent), color-mix(in srgb, var(--brand-noir) 50%, transparent) 70%);
  animation: cg-b3-shade-cb 16s linear infinite;
}
.cg-b3-endmark { /* monogramma di risguardo (innesto dal candidato interattivo) */
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.6rem; letter-spacing: .06em;
  color: var(--brand-oro-deep);
}
.cg-b3-cover-edge { /* taglio della copertina: 3px di cartone */
  position: absolute; top: 0; bottom: 0; right: 0; width: 3px;
  transform-origin: right center;
  transform: translateZ(-1.5px) rotateY(90deg);
  background: color-mix(in srgb, var(--s-ink) 62%, var(--brand-noir));
}

/* Ombra a terra: piano dietro il libro, respira con la posa */
.cg-b3-ground {
  position: absolute; left: -26%; right: -8%; bottom: -12%; height: 30px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--brand-blu-notte) 38%, transparent), transparent 70%);
  transform: translateZ(-70px) scale(1);
  animation: cg-b3-ground 16s cubic-bezier(.45,.15,.25,1) infinite;
}

/* ---------- Coreografia (tutte a 16s, frame 0% = frame 100%) ---------- */

@keyframes cg-b3-pose {
  0%   { transform: translateX(-2%) translateY(0)    scale(1.02) rotateX(-7deg)   rotateY(26deg);  animation-timing-function: cubic-bezier(.55,.1,.3,1); }
  7%   { transform: translateX(6%)  translateY(-4px) scale(.97)  rotateX(-8deg)   rotateY(4deg);   animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  14%  { transform: translateX(25%) translateY(0)    scale(.85)  rotateX(-8deg)   rotateY(-10deg); animation-timing-function: ease-in-out; }
  30%  { transform: translateX(25%) translateY(-8px) scale(.85)  rotateX(-6deg)   rotateY(-6deg);  animation-timing-function: ease-in-out; }
  46%  { transform: translateX(25%) translateY(-2px) scale(.85)  rotateX(-9deg)   rotateY(-12deg); animation-timing-function: ease-in-out; }
  62%  { transform: translateX(25%) translateY(-9px) scale(.85)  rotateX(-6deg)   rotateY(-7deg);  animation-timing-function: ease-in-out; }
  78%  { transform: translateX(25%) translateY(-3px) scale(.85)  rotateX(-8.5deg) rotateY(-11deg); animation-timing-function: ease-in-out; }
  88%  { transform: translateX(22%) translateY(-5px) scale(.88)  rotateX(-8deg)   rotateY(-9deg);  animation-timing-function: cubic-bezier(.5,.05,.3,1); }
  95%  { transform: translateX(6%)  translateY(-2px) scale(.99)  rotateX(-7deg)   rotateY(14deg);  animation-timing-function: cubic-bezier(.4,.1,.3,1); }
  100% { transform: translateX(-2%) translateY(0)    scale(1.02) rotateX(-7deg)   rotateY(26deg); }
}

/* Copertina: fiato (crack a -12), spalancata con overshoot, chiusura col botto */
@keyframes cg-b3-cover {
  0%, 5.5%  { transform: translateZ(14px) rotateY(0deg);      animation-timing-function: cubic-bezier(.6,0,.75,.65); }
  7%        { transform: translateZ(14px) rotateY(-12deg);    animation-timing-function: cubic-bezier(.4,0,.6,1); }
  8.4%      { transform: translateZ(14px) rotateY(-5deg);     animation-timing-function: cubic-bezier(.55,.03,.25,1); }
  13%       { transform: translateZ(14px) rotateY(-183deg);   animation-timing-function: cubic-bezier(.3,.6,.35,1); }
  15.4%     { transform: translateZ(14px) rotateY(-176.5deg); animation-timing-function: ease-in-out; }
  17%, 92%  { transform: translateZ(14px) rotateY(-179.5deg); animation-timing-function: cubic-bezier(.65,-.02,.8,.55); }
  96%       { transform: translateZ(14px) rotateY(-3deg);     animation-timing-function: cubic-bezier(.2,.7,.4,1); }
  97.3%     { transform: translateZ(14px) rotateY(-8deg);     animation-timing-function: cubic-bezier(.5,.1,.4,1); }
  98.6%, 100% { transform: translateZ(14px) rotateY(0deg); }
}

/* Foglio 1 (citazione): giro con flutter di assestamento, rientro a cascata.
   Atterraggio a z16: sopra il risguardo della copertina aperta (z ~15.5). */
@keyframes cg-b3-turn-1 {
  0%, 30%   { transform: translateZ(11.5px) rotateY(0deg);      animation-timing-function: cubic-bezier(.55,.05,.35,1); }
  34.5%     { transform: translateZ(13.5px) rotateY(-118deg);   animation-timing-function: cubic-bezier(.25,.5,.3,1); }
  37.5%     { transform: translateZ(16px)   rotateY(-172deg);   animation-timing-function: ease-in-out; }
  39.5%     { transform: translateZ(16px)   rotateY(-178.5deg); animation-timing-function: ease-out; }
  41%, 89%  { transform: translateZ(16px)   rotateY(-177deg);   animation-timing-function: cubic-bezier(.6,0,.7,.5); }
  92.5%, 100% { transform: translateZ(11.5px) rotateY(0deg); }
}

/* Foglio 2 (per sempre): stessa grammatica, tempi propri. Atterra a z17 (sopra il foglio 1). */
@keyframes cg-b3-turn-2 {
  0%, 56%   { transform: translateZ(10.5px) rotateY(0deg);      animation-timing-function: cubic-bezier(.55,.05,.35,1); }
  60.5%     { transform: translateZ(13px)   rotateY(-115deg);   animation-timing-function: cubic-bezier(.25,.5,.3,1); }
  63.5%     { transform: translateZ(17px)   rotateY(-169deg);   animation-timing-function: ease-in-out; }
  65.5%     { transform: translateZ(17px)   rotateY(-177.5deg); animation-timing-function: ease-out; }
  67%, 86%  { transform: translateZ(17px)   rotateY(-175deg);   animation-timing-function: cubic-bezier(.6,0,.7,.5); }
  89.5%, 100% { transform: translateZ(10.5px) rotateY(0deg); }
}

/* Ombre di scena: le pagine coperte stanno in penombra, la luce entra quando
   vengono rivelate, e rasenta il foglio un attimo prima che si alzi. */
@keyframes cg-b3-shade-1r { 0%, 7% { opacity: .5; } 15% { opacity: 0; } 30% { opacity: 0; } 33% { opacity: .4; } 36%, 94% { opacity: 0; } 98%, 100% { opacity: .5; } }
@keyframes cg-b3-shade-1v { 0%, 33% { opacity: .55; } 41% { opacity: 0; } 88% { opacity: 0; } 90.5% { opacity: .35; } 94%, 100% { opacity: .55; } }
@keyframes cg-b3-shade-2r { 0%, 32% { opacity: .5; } 40% { opacity: 0; } 56% { opacity: 0; } 59% { opacity: .4; } 62%, 93% { opacity: 0; } 98%, 100% { opacity: .5; } }
@keyframes cg-b3-shade-2v { 0%, 59.5% { opacity: .55; } 67% { opacity: 0; } 85% { opacity: 0; } 87.5% { opacity: .35; } 91%, 100% { opacity: .55; } }
@keyframes cg-b3-reveal-last { 0%, 58% { opacity: .5; } 66% { opacity: 0; } 84% { opacity: 0; } 88%, 100% { opacity: .5; } }
@keyframes cg-b3-shade-cb { 0%, 8% { opacity: .5; } 17% { opacity: 0; } 91% { opacity: 0; } 96%, 100% { opacity: .5; } }

/* Lame di luce: finestre allineate ai giri dei fogli (0% = 100%, loop pulito) */
@keyframes cg-b3-blade-1 {
  0%, 29.5% { opacity: 0;  transform: translateX(-60%) skewX(-12deg); }
  33.5%     { opacity: .8; transform: translateX(180%) skewX(-12deg); }
  38%, 99.6% { opacity: 0; transform: translateX(340%) skewX(-12deg); }
  100%      { opacity: 0;  transform: translateX(-60%) skewX(-12deg); }
}
@keyframes cg-b3-blade-2 {
  0%, 55.5% { opacity: 0;  transform: translateX(-60%) skewX(-12deg); }
  59.5%     { opacity: .8; transform: translateX(180%) skewX(-12deg); }
  64%, 99.6% { opacity: 0; transform: translateX(340%) skewX(-12deg); }
  100%      { opacity: 0;  transform: translateX(-60%) skewX(-12deg); }
}

/* Ombra a terra: si allarga e si alleggerisce quando il libro sale */
@keyframes cg-b3-ground {
  0%   { transform: translateZ(-70px) scale(1);        opacity: .9;  }
  14%  { transform: translateZ(-70px) scale(1.12,.96); opacity: .75; }
  30%  { transform: translateZ(-70px) scale(1.06,.9);  opacity: .6;  }
  46%  { transform: translateZ(-70px) scale(1.12,.96); opacity: .75; }
  62%  { transform: translateZ(-70px) scale(1.05,.9);  opacity: .58; }
  78%  { transform: translateZ(-70px) scale(1.11,.95); opacity: .72; }
  95%  { transform: translateZ(-70px) scale(1.02,1);   opacity: .85; }
  100% { transform: translateZ(-70px) scale(1);        opacity: .9;  }
}

/* ---------- Farfalle dorate: escono nell'istante dell'apertura ----------
   Stanno DENTRO .cg-b3-body: seguono il movimento di camera e nascono
   davvero dalla gola del libro. */
.cg-butterflies { position: absolute; inset: 0; transform: translateZ(70px); pointer-events: none; }
.cg-bfly {
  position: absolute; width: 20px; color: var(--accent);
  opacity: 0; /* decorative: vivono solo nell'attimo dell'apertura; il libro resta il soggetto */
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--brand-noir) 22%, transparent)); /* statico, rasterizzato una volta */
}
.cg-bfly svg { width: 100%; height: auto; fill: currentColor; display: block; transform-origin: center; animation: cg-b3-flap .34s ease-in-out infinite alternate; }
.cg-bfly.b1 { left: 42%; top: 52%; animation: cg-b3-fly-1 16s var(--ease) infinite; }
.cg-bfly.b2 { left: 46%; top: 56%; width: 15px; color: var(--accent-soft); animation: cg-b3-fly-2 16s var(--ease) infinite; }
.cg-bfly.b2 svg, .cg-bfly.b4 svg { animation-duration: .28s; }
.cg-bfly.b3 { left: 38%; top: 58%; width: 24px; animation: cg-b3-fly-3 16s var(--ease) infinite; }
.cg-bfly.b4 { left: 50%; top: 50%; width: 13px; color: var(--accent-soft); animation: cg-b3-fly-4 16s var(--ease) infinite; }
.cg-bfly.b5 { left: 44%; top: 60%; width: 18px; animation: cg-b3-fly-5 16s var(--ease) infinite; }
@keyframes cg-b3-flap { from { transform: scaleX(1); } to { transform: scaleX(.62); } }
@keyframes cg-b3-fly-1 { 0%, 14.5% { opacity: 0; transform: translate(0,0) rotate(0); } 17.5% { opacity: 1; } 26% { transform: translate(-64px,-110px) rotate(-16deg); } 30% { opacity: 1; } 34%, 100% { opacity: 0; transform: translate(-104px,-190px) rotate(-24deg); } }
@keyframes cg-b3-fly-2 { 0%, 16% { opacity: 0; transform: translate(0,0) rotate(0); } 19% { opacity: 1; } 28% { transform: translate(66px,-96px) rotate(14deg); } 32% { opacity: 1; } 36%, 100% { opacity: 0; transform: translate(118px,-168px) rotate(22deg); } }
@keyframes cg-b3-fly-3 { 0%, 17.5% { opacity: 0; transform: translate(0,0) rotate(0); } 20.5% { opacity: 1; } 29% { transform: translate(-16px,-140px) rotate(-8deg); } 33.5% { opacity: 1; } 37.5%, 100% { opacity: 0; transform: translate(-36px,-225px) rotate(-12deg); } }
@keyframes cg-b3-fly-4 { 0%, 19% { opacity: 0; transform: translate(0,0) rotate(0); } 22% { opacity: 1; } 30% { transform: translate(88px,-64px) rotate(18deg); } 34% { opacity: 1; } 38.5%, 100% { opacity: 0; transform: translate(140px,-115px) rotate(26deg); } }
@keyframes cg-b3-fly-5 { 0%, 15.5% { opacity: 0; transform: translate(0,0) rotate(0); } 18.5% { opacity: 1; } 27% { transform: translate(26px,-125px) rotate(10deg); } 31% { opacity: 1; } 35%, 100% { opacity: 0; transform: translate(46px,-205px) rotate(16deg); } }

/* Pausa fuori schermo (classe messa dal JS): niente lavoro inutile */
.cg-book--hero.cg-b3-offstage,
.cg-book--hero.cg-b3-offstage *,
.cg-book--hero.cg-b3-offstage *::before,
.cg-book--hero.cg-b3-offstage *::after { animation-play-state: paused; }

/* ---------- Mobile: stessa scena, coreografia più contenuta ---------- */
@media (max-width: 720px) {
  /* Era min(230px, 66%), poi min(208px, 60%). Con 208px il volume, campionato
     ogni 125ms per il ciclo intero, sconfinava a SINISTRA di 101px a t=14,875s
     (non i 63px del rapporto C2: quel numero veniva da 11 fotogrammi scelti, e
     l'istante peggiore non era fra questi). La campata del volume su un ciclo
     era 477px in un viewport di 390: nessuna posizione lo conteneva.
     Rimedio in due mosse, nessuna delle quali è un keyframe — `cg-b3-pose-m`
     resta identica carattere per carattere:
       1. il volume stringe a 175px, così la campata scende a 393px;
       2. la scena si sposta a destra di un quarto della propria larghezza,
          perché la coreografia è asimmetrica (spalanca verso sinistra) e il
          contenitore centrato la lasciava metà fuori.
     `translateX(25%)` è un quarto della larghezza del libro, quindi segue la
     misura da sola a ogni larghezza. Provata a 320·390·480·719px: fuori a
     sinistra 0·3·0·0px, a destra 5·1·0·0px, mai scroll orizzontale.
     Scartate: la prospettiva più lunga (2400px porta 101→86px e appiattisce
     visibilmente il volume, 342→314px di altezza) e lo spostamento senza
     restringimento (53px a sinistra ma 30px a destra: sposta il problema). */
  .cg-book--hero { width: min(175px, 50%); transform: translateX(25%); }
  .cg-intro-visual { perspective: 1100px; }
  .cg-b3-body { animation-name: cg-b3-pose-m; }
  .cg-bfly.b2, .cg-bfly.b4 { display: none; } /* meno elementi in volo */
  /* dieta di layer su touch (innesto dal candidato fisico): meno facce composite */
  .cg-b3-edge-top, .cg-b3-cover-edge { display: none; }
  .cg-b3-spine { width: 22px; }
  .cg-b3-edge-fore { width: 16px; }
}
@keyframes cg-b3-pose-m {
  0%   { transform: translateX(0)    translateY(0)    scale(1)   rotateX(-6deg)   rotateY(18deg); animation-timing-function: cubic-bezier(.55,.1,.3,1); }
  7%   { transform: translateX(10%)  translateY(-3px) scale(.94) rotateX(-6deg)   rotateY(2deg);  animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  14%  { transform: translateX(44%)  translateY(0)    scale(.78) rotateX(-6deg)   rotateY(-6deg); animation-timing-function: ease-in-out; }
  30%  { transform: translateX(44%)  translateY(-6px) scale(.78) rotateX(-5deg)   rotateY(-4deg); animation-timing-function: ease-in-out; }
  46%  { transform: translateX(44%)  translateY(-1px) scale(.78) rotateX(-7deg)   rotateY(-8deg); animation-timing-function: ease-in-out; }
  62%  { transform: translateX(44%)  translateY(-6px) scale(.78) rotateX(-5deg)   rotateY(-5deg); animation-timing-function: ease-in-out; }
  78%  { transform: translateX(44%)  translateY(-2px) scale(.78) rotateX(-6.5deg) rotateY(-7deg); animation-timing-function: ease-in-out; }
  88%  { transform: translateX(38%)  translateY(-4px) scale(.82) rotateX(-6deg)   rotateY(-5deg); animation-timing-function: cubic-bezier(.5,.05,.3,1); }
  95%  { transform: translateX(8%)   translateY(-1px) scale(.96) rotateX(-6deg)   rotateY(12deg); animation-timing-function: cubic-bezier(.4,.1,.3,1); }
  100% { transform: translateX(0)    translateY(0)    scale(1)   rotateX(-6deg)   rotateY(18deg); }
}

/* ---------- Reduced motion: libro aperto, fermo, sull'ultima pagina ---------- */
@media (prefers-reduced-motion: reduce) {
  .cg-b3-body, .cg-b3-cover, .cg-b3-sheet, .cg-b3-ground,
  .cg-b3-sheet .cg-b3-face::after, .cg-b3-lastpage::after, .cg-b3-cover-back::after,
  .cg-b3-blade, .cg-bfly, .cg-bfly svg { animation: none; }
  .cg-b3-body { transform: translateX(12%) translateY(0) scale(.88) rotateX(-5deg) rotateY(-8deg); }
  .cg-b3-cover { transform: translateZ(14px) rotateY(-179.5deg); }
  .cg-b3-sheet-1 { transform: translateZ(16px) rotateY(-177deg); }
  .cg-b3-sheet-2 { transform: translateZ(17px) rotateY(-175deg); }
  .cg-b3-blade { opacity: 0; }
  .cg-bfly { opacity: 0; }
}
/* A posa ferma su schermo stretto il volume spalancato sconfinava a sinistra:
   il testo restava scoperto ma mezza copertina finiva tagliata dal bordo. È un
   `transform` STATICO — qui l'animazione non c'è — quindi si può correggere
   senza sfiorare la coreografia. */
@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .cg-b3-body { transform: translateX(40%) translateY(0) scale(.76) rotateX(-5deg) rotateY(-8deg); }
}

/* ---------- Layout flow + rail ---------- */
.cg-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(28px,4vw,60px); align-items: start; padding-bottom: 90px; }
/* grid-template-columns esplicito: senza, la colonna implicita va a max-content
   e sfonda in orizzontale su mobile (etichette tagliate). minmax(0,1fr) vincola
   la colonna al contenitore e lascia che i figli si restringano. */
.cg-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px,6vw,88px); min-width: 0; }
.cg-section { scroll-margin-top: 92px; }
.cg-section-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.cg-section-n { font-family: var(--serif); font-size: 1.5rem; color: var(--brand-oro-testo); line-height: 1; padding-top: 4px; }
.cg-section-head .ed-h2 { margin-bottom: 6px; }
/* Specificità: batte `body.ed h1..h4 { margin:0 }` di brand.css (altrimenti i sottotitoli
   restano attaccati sopra e sotto). Respiro ampio per separare bene i blocchi di domande. */
.cg-section .cg-subhead { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 56px 0 22px; color: var(--ink); }
.cg-section .cg-subhead:first-of-type { margin-top: 40px; }
.cg-section .cg-subhead small { font-weight: 400; }

.cg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.cg-check { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--sans); font-size: .95rem; color: var(--ink); cursor: pointer; }
.cg-check input { width: 18px; height: 18px; accent-color: var(--navy); }
/* ---------- Stato d'errore del CAMPO (tavola 23) ----------
   Il messaggio era già a norma (#A3402E esatto, 5,36:1, role="alert"); il campo
   no: dopo "Inserisci un'email valida" `#cg-email` aveva aria-invalid nullo e il
   bordo identico allo stato di riposo (audit v2 §29). Ora il campo si dichiara
   non valido all'assistente vocale e lo si vede a colpo d'occhio. */
.ed-input[aria-invalid="true"], .ed-select[aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
/* Solo il controllo diretto del campo: la spunta del consenso vive dentro lo
   stesso .ed-field dell'email, e con un `:has()` largo tingeva di rosso
   l'etichetta "La tua email" per un errore che non era suo. */
.ed-field:has(> .ed-input[aria-invalid="true"], > .ed-select[aria-invalid="true"]) > .ed-label { color: var(--error); }
.cg-consent.is-invalid { color: var(--error); font-weight: 600; }

/* ---------- La tappa di Tab che non aveva alcun segno (audit v2 §18) ----------
   Il rapporto la dava per due tappe su 60 «senza segno», dentro #cg-start e
   #cg-end. Misurato tappa per tappa: ogni campo data consuma QUATTRO fermate.
   Sulle prime tre (giorno, mese, anno) il fuoco è sull'ospite, `:focus-visible`
   aggancia e l'anello di brand.css si vede. Sulla quarta — il pulsante-calendario
   dentro lo shadow DOM del browser — `document.activeElement` continua a
   riportare l'input, ma l'input NON aggancia più né `:focus` né `:focus-visible`
   (misurati entrambi `false`): il fuoco reale è dentro il suo albero d'ombra.
   L'unica pseudo-classe che resta vera è `:focus-within`.
   `::-webkit-calendar-picker-indicator:focus` è raggiungibile da CSS ma non
   aggancia nulla in quello stato: provato, nessun cambiamento — quindi non è
   quella la strada.
   `:focus-within:not(:focus)` descrive ESATTAMENTE quella quarta fermata e
   nient'altro: sulle prime tre `:focus` è vero e la regola non si applica (il
   segno lo dà già `:focus-visible`, senza doppioni). Col mouse non cambia
   niente: cliccando il campo l'anello compariva già prima, perché per un campo
   di testo Chrome considera il fuoco «visibile» anche da puntatore — misurato
   identico prima e dopo. Anello copiato da `brand.css`, non reinventato. */
body.ed .ed-input[type="date"]:focus-within:not(:focus) {
  outline: 2px solid var(--brand-oro-testo);
  outline-offset: 2px;
  border-radius: 0;
}

/* ---------- Arial calcolato su 53 elementi (audit v2 §31) ----------
   Erano i <button> contenitori (.cg-type, .cg-pill, .cg-level, .cg-image-opt),
   le caselle di spunta e gli <svg>: nessuno contiene testo diretto, quindi
   nessun glifo Arial si vedeva — ma bastava aggiungere un nodo di testo dentro
   uno di quei bottoni perché la pagina scrivesse in Arial. I controlli di modulo
   non ereditano il font dal documento: va dichiarato. Qui vale per questa
   pagina; la stessa riga in `brand.css` chiuderebbe il buco ovunque, ed è di C1. */
.cg-flow button, .cg-flow input, .cg-flow select, .cg-flow textarea,
.cg-wiz-panel button, .cg-wiz-panel input, .cg-wiz-panel select, .cg-wiz-panel textarea,
.cg-mobilebar, .cg-rail button, .cg-rail input { font-family: var(--sans); }

.cg-date-feedback { min-height: 20px; margin-top: 10px; font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); }
.cg-date-feedback.is-error { color: var(--error); font-weight: 600; }
.cg-date-feedback.is-ok { color: var(--ok); }

/* Riga «vieni dalla Bussola»: spiega cosa è già compilato e cosa manca ancora.
   La regola [hidden] è ESPLICITA e non è una ridondanza: la regola del browser
   vale (0,1,0) e qualunque `display:` messo sulla classe la scavalcherebbe,
   facendo comparire a tutti una riga che parla di un percorso mai fatto. */
.cg-bussola-nota {
  margin-top: 12px; padding: 12px 14px;
  border-left: 3px solid var(--navy);
  background: var(--paper-raise);
  font-family: var(--sans); font-size: .9rem; line-height: 1.55; color: var(--ink-soft);
}
.cg-bussola-nota[hidden] { display: none; }

/* ==========================================================================
   LE PASTIGLIE DI SCELTA — perché il loro filetto è --line-strong e non --line
   (03/08/2026, lotto «confini dei comandi»)

   Il fatto. A riposo le nove famiglie di pastiglie (.cg-type · .cg-pill ·
   .cg-chip · .cg-level · .cg-image-opt · .cg-style-card · .cg-custom-chip ·
   .cg-module · .recap-row) erano vestite da `var(--line)` (alfa .14) e
   misuravano 1,227:1 contro la pagina, 1,352:1 contro il proprio riempimento —
   32 comandi su 106 nel censimento del 03/08, il gruppo più numeroso dopo i CTA
   pieni. Sono la principale interazione della pagina che vende: finché non ne
   scegli una, non si vede dove finisce una scelta e dove comincia l'altra.

   Una premessa che i numeri hanno SMENTITO, e va detto perché non torni. Si era
   scritto che «anche lo stato selezionato si distingue solo per colore del
   bordo»: falso. Il selezionato sta a 14,733:1 sulla pagina e a 12,006:1 contro
   il riposo, e tutte e nove le famiglie portano un secondo segnale — un anello
   `box-shadow: 0 0 0 2px var(--navy) inset`, oppure il fondo navy pieno.
   1.4.11 qui mordeva UNA volta sola, sul riposo. Lo stato selezionato non è
   stato toccato, e non va toccato.

   PERCHÉ NON SI È ALZATO IL TOKEN --line, che sarebbe stata la mossa ovvia.
   È la stessa trappola che il 30/07 ha reso la correzione di --line-strong una
   patch in DUE file: un token nato per i confini era finito a fare da FONDO.
   Cercata prima di muovere qualcosa, `--line` risulta usato come SFONDO in sei
   punti — `.cg-wiz-bar` qui sotto (la barra di avanzamento del wizard),
   `.bz-avanzamento` di dove-andare.html, e quattro griglie di brand-tavola.html
   che ci disegnano i propri interstizi. Portarlo da .14 a .46 avrebbe scurito
   due barre di avanzamento e quattro fondi, per giunta lasciando ingrossati i
   136 ornamenti che quel token veste. Quindi il token NON si muove: si sposta
   il PUNTATORE delle nove regole dei comandi su `--line-strong`, che il
   committente ha già deciso il 30/07 (rgba(13,14,16,.46) = 3,091:1) e che su
   questa stessa pagina veste già ogni `.ed-input`. Era anzi incoerente che i
   campi del modulo fossero definiti e le pastiglie no.

   Misurato dopo, sul foglio vero: 1,352:1 → 3,149:1 contro il riempimento
   (--paper-raise) e 3,091:1 contro l'avorio della pagina.

   E LA RIGA CHE VIENE INSIEME, perché la correzione ne ha aperta un'altra.
   Alzando il riposo, il filetto di :hover — che era oro di marca al 50-60%,
   cioè 1,437-1,553:1 — sarebbe diventato PIÙ DEBOLE del riposo: passare il
   mouse avrebbe spento il contorno invece di accenderlo. Gli hover passano
   quindi a `--accent-deep` (#A8873F, 3,169:1 su --paper-raise), che è oro di
   marca pieno e sta appena sopra il riposo. Nessun colore nuovo: la palette lo
   vieta, e questo è un token già in tavola.
   ⚠ CHI RIPORTA UNA DI QUESTE NOVE RIGHE A `var(--line)` GUARDI ANCHE GLI
     HOVER: sono due gruppi di righe, non uno.
   Sorvegliato da test/r-filetto-comandi.test.js, regole C e D (àncora:
   button.cg-type su /crea-guida).
   ========================================================================== */

/* ---------- Card tipo viaggio ---------- */
.cg-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.cg-type { text-align: left; background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 16px; cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); display: flex; flex-direction: column; gap: 8px; }
.cg-type svg { width: 26px; height: 26px; color: var(--brand-oro-testo); stroke-width: 1.7; }
.cg-type b { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: var(--ink); }
.cg-type small { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
.cg-type:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-deep); }
.cg-type.is-selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; background: var(--paper-raise); }
.cg-type.is-selected svg { color: var(--navy); }

/* ---------- Galleria stili (raggruppata: inclusi / premium / su misura) ---------- */
.cg-styles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.cg-styles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 18px; min-width: 0; }
.cg-style-card { min-width: 0; }
.cg-styles-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--serif); font-weight: 500; font-size: 1.08rem; color: var(--ink); margin-bottom: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.cg-styles-group-title span { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-oro-testo); }
/* Foto reale della copertina: copre il mockup CSS quando l'asset esiste; altrimenti resta il mock. */
.cg-style-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
/* Quando la foto reale è presente, nascondi il mockup (testo incluso) per non farlo trasparire.
   Se la foto va in errore, il JS rimuove l'<img> e il mockup riappare da solo. */
.cg-style-cover:has(.cg-style-photo) .cg-style-mock { display: none; }
.cg-style-card { position: relative; background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); display: flex; flex-direction: column; }
.cg-style-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent-deep); }
.cg-style-card.is-selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy), var(--shadow-lg); }
.cg-style-cover { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.cg-style-mock { position: absolute; inset: 0; background: var(--s-paper); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; transition: transform var(--dur-2) var(--ease); }
.cg-style-mock::before { content: ''; position: absolute; right: -10%; top: -10%; width: 70%; height: 80%; background: radial-gradient(circle at 60% 40%, var(--s-accent) 0%, transparent 62%), linear-gradient(150deg, var(--s-accent2), transparent 72%); opacity: .92; }
.cg-style-mock::after { content: ''; position: absolute; left: 16px; bottom: 46px; width: 30px; height: 3px; background: var(--s-accent); }
.cg-style-mock b { position: relative; z-index: 2; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--s-ink); }
.cg-style-mock small { position: relative; z-index: 2; font-family: var(--sans); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--s-ink) 66%, transparent); margin-bottom: 2px; }
.cg-style-card:hover .cg-style-mock { transform: scale(1.05); }
/* anteprima pagina interna che appare in hover */
.cg-style-inner { position: absolute; inset: 0; z-index: 3; background: var(--s-paper); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cg-style-inner i { display: block; height: 6px; border-radius: 0; background: color-mix(in srgb, var(--s-ink) 20%, transparent); }
.cg-style-inner i.h { height: 9px; width: 60%; background: var(--s-accent); }
.cg-style-inner i.s { width: 90%; } .cg-style-inner i.m { width: 75%; } .cg-style-inner i.l { width: 82%; }
/* Interno reale della guida (doppia pagina): copre le barre-segnaposto quando presente. */
.cg-style-interior { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cg-style-inner:has(.cg-style-interior) { padding: 0; }
.cg-style-inner:has(.cg-style-interior) i { display: none; }
.cg-style-card:hover .cg-style-inner { opacity: 1; transform: translateY(0); }
.cg-style-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cg-style-body h4 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; color: var(--ink); }
.cg-style-body p { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); line-height: 1.45; flex: 1; }
.cg-style-swatches { display: flex; gap: 5px; margin-top: 4px; }
.cg-style-swatches span { width: 15px; height: 15px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand-noir) 12%, transparent); }
.cg-style-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cg-style-price { font-family: var(--sans); font-weight: 700; font-size: .86rem; color: var(--brand-oro-testo); }
.cg-style-price.included { color: var(--ok); }
.cg-style-choose { font-family: var(--sans); font-weight: 600; font-size: .82rem; color: var(--brand-avorio); background: var(--navy); border: none; border-radius: var(--r-pill); padding: 8px 15px; cursor: pointer; transition: background var(--dur-1) var(--ease); }
.cg-style-choose:hover { background: var(--navy-2); }
.cg-style-card.is-selected .cg-style-choose { background: var(--ok); }
.cg-style-badge { position: absolute; top: 10px; left: 10px; z-index: 4; font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--navy); color: var(--brand-avorio); padding: 4px 9px; border-radius: var(--r-pill); opacity: 0; transform: scale(.8); transition: all var(--dur-1) var(--ease); }
.cg-style-card.is-selected .cg-style-badge { opacity: 1; transform: scale(1); }

/* ---------- Stile su misura: compositore "mix di due stili" ---------- */
/* Il tratteggio non è nel repertorio dei segni (audit v2 §27): la cornice del
   brandbook è il DOPPIO FILETTO, che `border-style: double` disegna davvero. */
.cg-custom { border: 4px double color-mix(in srgb, var(--brand-oro) 55%, transparent); border-radius: var(--r-md); padding: clamp(18px,2.4vw,26px); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); }
.cg-custom.is-selected { border-style: solid; border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; }
.cg-custom-tag { font-family: var(--sans); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--brand-oro-testo); }
.cg-custom-head h4 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--ink); margin: 6px 0 4px; }
.cg-custom-head p { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); line-height: 1.5; max-width: 62ch; }
.cg-custom-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
@media (max-width: 620px) { .cg-custom-pickers { grid-template-columns: 1fr; } }
.cg-custom-picker > label { display: block; font-family: var(--sans); font-weight: 600; font-size: .82rem; color: var(--ink); margin-bottom: 9px; }
.cg-custom-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-custom-chip { font-family: var(--sans); font-size: .84rem; color: var(--ink); background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: 0; padding: 7px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.cg-custom-chip::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--sw, var(--accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-noir) 12%, transparent) inset; }
.cg-custom-chip:hover { border-color: var(--accent-deep); }
.cg-custom-chip.is-on { border-color: var(--navy); background: var(--navy); color: var(--brand-avorio); }
.cg-custom-result { margin-top: 6px; }
.cg-custom-info { text-align: center; max-width: 54ch; margin: 4px auto 0; }
.cg-custom-mixname { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }

/* ---------- Compositore su misura: due copertine REALI + fusione sigillata (non svelata) ---------- */
.cg-fuse { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 54px); min-height: 340px; padding: 16px 0 6px; --seal-accent: var(--accent); --seal-accent2: var(--accent-deep); }
.cg-fuse-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; transition: transform .95s var(--ease), opacity .75s var(--ease); }
.cg-fuse-label { font-family: var(--sans); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-oro-testo); font-weight: 700; }
/* Slot = la copertina reale dello stile scelto (la stessa della griglia sopra); interno all'hover */
.cg-fuse-card { width: clamp(150px, 24vw, 208px); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); background: var(--paper-raise); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.cg-fuse-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cg-fuse-card .cg-style-cover { aspect-ratio: 3 / 4; }
.cg-fuse-card:hover .cg-style-mock { transform: scale(1.05); }
.cg-fuse-card:hover .cg-style-inner { opacity: 1; transform: translateY(0); }
.cg-fuse-card.is-empty { border: 1.5px dashed var(--line-strong); box-shadow: none; background: transparent; }
.cg-fuse-empty { aspect-ratio: 3 / 4; display: grid; place-items: center; text-align: center; padding: 14px; }
.cg-fuse-empty span { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }
.cg-fuse-op { font-family: var(--serif); font-weight: 300; font-size: 2.2rem; color: var(--brand-oro-testo); opacity: .55; transition: opacity .5s var(--ease), transform .6s var(--ease); }

/* Libro fuso SIGILLATO: non svela l'immagine, resta "in creazione" finché non si conferma l'acquisto */
.cg-fuse-sealed { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none; z-index: 3; }
.cg-seal-book { position: relative; width: clamp(150px, 24vw, 208px); aspect-ratio: 3 / 4; border-radius: 6px 12px 12px 6px; border-left: 6px solid var(--brand-blu-2); background: linear-gradient(160deg, var(--brand-blu-notte) 0%, var(--brand-noir) 72%); box-shadow: var(--shadow-lg), 0 0 34px -6px color-mix(in srgb, var(--seal-accent) 55%, transparent); overflow: hidden; display: grid; place-items: center; }
.cg-seal-aura { position: absolute; inset: -30%; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--seal-accent) 60%, transparent) 0%, transparent 55%); opacity: .7; }
.cg-seal-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 36%, color-mix(in srgb, var(--brand-oro-soft) 50%, transparent) 50%, transparent 64%); transform: translateX(-130%); }
.cg-seal-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; text-align: center; }
.cg-seal-mark { font-size: 1.5rem; color: var(--seal-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--seal-accent) 70%, transparent); }
.cg-seal-title { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--paper); }
.cg-seal-sub { font-family: var(--sans); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--seal-accent) 82%, var(--paper)); max-width: 22ch; }

/* stato "fuso": le due copertine convergono e svaniscono, appare il sigillo che resta animato */
.cg-fuse[data-state="fused"] .cg-fuse-a { transform: translateX(clamp(52px, 14vw, 150px)) rotate(-7deg) scale(.78); opacity: 0; }
.cg-fuse[data-state="fused"] .cg-fuse-b { transform: translateX(clamp(-150px, -14vw, -52px)) rotate(7deg) scale(.78); opacity: 0; }
.cg-fuse[data-state="fused"] .cg-fuse-op { opacity: 0; transform: scale(0) rotate(90deg); }
.cg-fuse[data-state="fused"] .cg-fuse-sealed { animation: cg-seal-in 1s var(--ease) forwards, cg-seal-float 5.5s ease-in-out 1s infinite; }
.cg-fuse[data-state="fused"] .cg-seal-aura { animation: cg-seal-pulse 3s ease-in-out infinite; }
.cg-fuse[data-state="fused"] .cg-seal-shine { animation: cg-seal-shine 3.6s ease-in-out 1.2s infinite; }

/* Anteprima mix reale: la copertina fusa compare GIÀ alla scelta dei due stili (stato "ready"),
   non solo dopo la conferma. Le due card sorgente scivolano via, appare il libro con l'immagine. */
.cg-fuse[data-state="ready"] .cg-fuse-a { transform: translateX(clamp(52px, 14vw, 150px)) rotate(-7deg) scale(.78); opacity: 0; }
.cg-fuse[data-state="ready"] .cg-fuse-b { transform: translateX(clamp(-150px, -14vw, -52px)) rotate(7deg) scale(.78); opacity: 0; }
.cg-fuse[data-state="ready"] .cg-fuse-op { opacity: 0; transform: scale(0) rotate(90deg); }
.cg-fuse[data-state="ready"] .cg-fuse-sealed { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .6s var(--ease), transform .6s var(--ease); }
/* La copertina mix reale dentro il sigillo */
.cg-seal-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cg-fuse-sealed.has-cover .cg-seal-aura, .cg-fuse-sealed.has-cover .cg-seal-shine { opacity: 0; }
.cg-fuse-sealed.has-cover .cg-seal-mark { display: none; }
.cg-fuse-sealed.has-cover .cg-seal-core { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; gap: 3px; padding: 26px 12px 11px; background: linear-gradient(to top, color-mix(in srgb, var(--brand-blu-notte) 92%, transparent), color-mix(in srgb, var(--brand-blu-notte) 40%, transparent) 58%, transparent); }
.cg-fuse-sealed.has-cover .cg-seal-sub { color: color-mix(in srgb, var(--brand-avorio) 90%, transparent); }
@keyframes cg-seal-in { 0% { transform: translate(-50%,-50%) scale(.65) rotateY(40deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1) rotateY(0); opacity: 1; } }
@keyframes cg-seal-float { 0%,100% { transform: translate(-50%,-52%) scale(1) rotate(-1.4deg); } 50% { transform: translate(-50%,-48%) scale(1.02) rotate(1.4deg); } }
@keyframes cg-seal-pulse { 0%,100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes cg-seal-shine { 0% { transform: translateX(-130%); } 55%,100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
  .cg-fuse[data-state="fused"] .cg-fuse-sealed { animation: none; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .cg-fuse[data-state="fused"] .cg-seal-aura, .cg-fuse[data-state="fused"] .cg-seal-shine { animation: none; }
}
.cg-custom-note { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); line-height: 1.5; margin: 8px 0 14px; }
.cg-custom-apply { font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--brand-avorio); background: var(--navy); border: none; border-radius: var(--r-pill); padding: 11px 20px; cursor: pointer; transition: background var(--dur-1) var(--ease); }
.cg-custom-apply:hover:not(:disabled) { background: var(--navy-2); }
/* QUESTO VALORE NON È UN RESIDUO DIMENTICATO: è scritto per esteso apposta, e
   toglierlo per "riportarlo al token" rimette un difetto misurato.
   Storia, perché non si ripeta. `--line-strong` nasce come colore di CONFINE —
   filetti di pulsanti secondari e bordi dei campi — e qui era finito a fare da
   FONDO. Finché valeva .26 la cosa non si vedeva; il 30/07/2026 il committente
   ha deciso di alzarlo a .46 per portare il confine dei comandi sopra il 3:1 di
   WCAG 1.4.11 (la ragione sta nel commento del token, in public/brand.css).
   Un fondo che si scurisce va INCONTRO al testo grigio invece di allontanarsene:
   misurato su questo pulsante, testo --ink-faint (#8A8F98) contro il proprio
   fondo, 1,542:1 a .26 → 1,087:1 a .45 → 1,120:1 a .46. Un comando disabilitato
   è fuori da WCAG 1.4.3 e 1.4.11, ma non è fuori dalla decisione già scritta in
   public/brand.css: «DISABILITATO NON VUOL DIRE ILLEGGIBILE».
   Perciò il fondo resta al valore di prima, dichiarato qui: il pulsante non
   cambia di un pixel mentre tutti i confini del sito si alzano.
   ⚠ Il token e questa riga si guardano INSIEME: sono due posti, non uno.
   Sorvegliato da test/r-filetto-comandi.test.js, prova 3. */
.cg-custom-apply:disabled { background: rgba(13, 14, 16, .26); color: var(--ink-faint); cursor: not-allowed; }
.cg-custom.is-selected .cg-custom-apply { background: var(--ok); }

/* ---------- Sezioni "in arrivo" ---------- */
.cg-soon { opacity: .96; }
.cg-soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; }
.cg-soon-card { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 18px; background: transparent; }
.cg-soon-card b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.cg-soon-card p { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); margin-top: 5px; }
.cg-soon-note { margin-top: 14px; font-family: var(--sans); font-size: .82rem; color: var(--brand-oro-testo); font-style: italic; }

/* ---------- Riepilogo ---------- */
.cg-summary { display: grid; gap: 10px; }
.cg-summary-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 15px; background: var(--paper-raise); border: 1px solid var(--line); border-radius: var(--r-sm); font-family: var(--sans); font-size: .92rem; }
.cg-summary-row span:first-child { color: var(--ink-soft); }
.cg-summary-row span:last-child { color: var(--ink); font-weight: 600; text-align: right; }

/* ---------- Recap opt-out: cosa conterrà la guida (fase 6) ---------- */
.recap-panel { margin-top: 24px; }
.recap-panel h3 { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.recap-hint { font-family: var(--sans); font-size: .88rem; color: var(--ink-soft); margin-top: 4px; }
.recap-group { margin-top: 16px; }
.recap-group h4 { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.recap-row { display: flex; align-items: flex-start; gap: 12px; background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.recap-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); flex-shrink: 0; }
.recap-row input:disabled { opacity: .55; }
.recap-row span { font-family: var(--sans); font-size: .88rem; color: var(--ink); line-height: 1.5; }
.recap-row strong { font-weight: 600; }
.recap-row small { color: var(--ink-soft); }

/* ---------- Pannello laterale: anteprima + carrello ---------- */
/* L'aside deve estendersi a tutta l'altezza della riga, altrimenti collassa sul contenuto
   e `position: sticky` non ha spazio per agganciarsi (il rail scorrerebbe via). */
.cg-rail { align-self: stretch; }
.cg-rail-sticky { position: sticky; top: 84px; display: grid; gap: 18px; }
.cg-preview { background: linear-gradient(165deg, var(--brand-blu-notte), var(--brand-blu-2)); border-radius: var(--r-md); padding: 24px 20px; text-align: center; box-shadow: var(--shadow-md); }
.cg-preview-tag { font-family: var(--sans); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-soft); }
.cg-book--mini { width: min(180px, 66%); margin: 14px auto 12px; }
.cg-preview-style { font-family: var(--sans); font-size: .82rem; color: color-mix(in srgb, var(--brand-avorio) 82%, transparent); }
.cg-cart { background: var(--paper-raise); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm); }
.cg-cart h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin-bottom: 14px; color: var(--ink); }
.cg-cart-lines { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.cg-cart-lines li { display: flex; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: .88rem; color: var(--ink-soft); }
/* Un importo non si spezza MAI fra simbolo e cifra. Il rilievo storico dava la
   colpa a `.cg-cart-total strong`; la misura dell'audit v2 (§10) ha mostrato che
   a spezzarsi erano le righe del carrello: "€ 67" usciva 23×46px su due righe,
   "€" sopra e "67" sotto. Tutti e tre i luoghi del prezzo portano ora nowrap. */
.cg-cart-lines li b { color: var(--ink); font-weight: 600; white-space: nowrap; align-self: flex-start; }
.cg-cart-lines li .cg-remove { background: none; border: none; color: var(--brand-oro-testo); cursor: pointer; font-size: .8rem; text-decoration: underline; padding: 0; }
/* Raggruppamento "Incluso" / "Extra scelti": intestazioni come voci <li> a tutta larghezza,
   distinte dalle righe di prezzo (niente doppio bordo, tag maiuscolo per il totale extra). */
.cg-cart-lines li.cg-cart-group-title { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 1px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.cg-cart-lines li.cg-cart-group-title:first-child { margin-top: 0; }
.cg-cart-lines li.cg-cart-group-title:not(:first-child) { margin-top: 6px; }
.cg-cart-lines li.cg-cart-group-title span { color: var(--brand-oro-testo); font-weight: 700; }
/* Variante "Extra scelti": stesso stile di intestazione, bordo più marcato per segnalare
   che qui inizia la parte a pagamento (in contrasto con "Incluso nel prezzo" sopra). */
.cg-cart-lines li.cg-cart-group-title-extra { border-bottom-color: var(--line-strong); }
.cg-cart-lines li.cg-cart-freenote,
.cg-cart-lines li.cg-cart-empty-extra { display: block; font-size: .78rem; font-style: italic; }
/* Etichetta e totale si toccavano: 3px in un contenitore di 298px (audit v2 §12).
   Il `gap` garantisce il respiro; l'etichetta può restringersi e andare a capo,
   il totale no. */
.cg-cart-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--sans); }
.cg-cart-total span { color: var(--ink-soft); font-size: .9rem; min-width: 0; }
.cg-cart-total small { font-size: .72rem; }
/* Il totale era dichiarato 30,4px contro i 14,4px dell'etichetta, e leggeva lo
   stesso: Cormorant Garamond ha cifre OLDSTYLE, cioè con l'altezza del corpo a
   x-height e ascendenti/discendenti solo su alcune. Misurato glifo per glifo a
   30,4px (audit C): 0·1·2·3·4·5·7·9 salgono 12-13px, solo 6 (21px) e 8 (18px)
   svettano, e 3·4·5·7·9 scendono fino a 9px sotto la linea di base. Contro le
   maiuscole dell'etichetta Archivo (10px) il rapporto ottico era 1,3:1 dove
   quello dichiarato è 2,11:1 — e peggio: cambiava con le cifre che capitavano
   («111,60» leggeva tutto a x-height, «66,96» no). Un prezzo non può cambiare
   statura a seconda dell'importo. `lining-nums` porta tutte le cifre
   all'altezza delle maiuscole: il font lo supporta davvero (la stringa
   0-9 passa da 130,84px a 139,72px, quindi la feature `lnum` viene applicata).
   Scartate: solo un corpo maggiore (ingrandisce il disordine oldstyle senza
   togliere la variabilità) e Archivo per le cifre (il prezzo è uno dei luoghi
   in cui il brandbook vuole il serif). */
.cg-cart-total strong { font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 1.7rem; color: var(--ink); white-space: nowrap; flex: none; }
.cg-cart-cta { width: 100%; justify-content: center; margin-top: 16px; }
.cg-cart-note { margin-top: 10px; font-family: var(--sans); font-size: .74rem; color: var(--ink-soft); text-align: center; }
/* Prezzo di lancio (headline) + retail barrato (àncora) */
.cg-price-now { color: var(--brand-oro-testo); }
.cg-price-was { font-family: var(--sans); font-size: .82rem; font-weight: 500; color: var(--ink-soft); text-decoration: line-through; margin-left: 6px; }
.cg-req { color: var(--brand-oro-testo); }
.cg-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); line-height: 1.4; cursor: pointer; }
.cg-consent input { margin-top: 3px; flex: 0 0 auto; }
/* `body.ed a:not(.ed-btn){color:inherit}` (0,2,2) vinceva su `.cg-consent a`
   (0,1,1): il link all'informativa privacy era dichiarato oro e reso grigio,
   a riposo e in hover (audit v2 §20). Qui la specificità è (0,3,1). */
body.ed .cg-consent a { color: var(--brand-oro-testo); text-decoration: underline; }
body.ed .cg-consent a:hover { color: var(--ink); }
.cg-mobilebar-info .cg-price-was { font-size: .72rem; opacity: .7; color: var(--brand-avorio); }
.cg-bump { animation: cg-bump .4s var(--ease); }
@keyframes cg-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); color: var(--brand-oro-testo); } 100% { transform: scale(1); } }

/* ---------- Barra carrello mobile ---------- */
.cg-mobilebar { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; align-items: center; justify-content: space-between; gap: 14px; background: var(--navy); color: var(--brand-avorio); border: none; border-radius: var(--r-pill); padding: 13px 22px; box-shadow: var(--shadow-lg); cursor: pointer; }
.cg-mobilebar-info { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.cg-mobilebar-info small { font-size: .68rem; opacity: .75; }
/* Stesso prezzo, stessa cifra: la barra mobile porta lining-nums come il rail. */
.cg-mobilebar-info strong { font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 1.25rem; }
.cg-mobilebar-cta { font-family: var(--sans); font-weight: 600; font-size: .9rem; }
/* La barra ha `cursor: pointer` ma non rispondeva al passaggio del mouse
   (rilievo lasciato aperto dal cantiere C2, §"resta aperto" 3): un elemento che
   dichiara di essere cliccabile e non reagisce mente. Nessun colore nuovo. */
.cg-mobilebar:hover { background: var(--brand-noir); }
.cg-mobilebar:hover .cg-mobilebar-cta { color: var(--brand-oro); }
/* Nascosta mentre un campo è a fuoco: non copre il controllo attivo (QA mobile). */
.cg-mobilebar.is-hidden { display: none; }
/* Durante la guida iniziale la barra non deve coprire il contenuto. */
body.cg-wiz-collapsed .cg-mobilebar { display: none; }

/* ---------- Galleria "a mazzo": la card esplorata avanza, le altre arretrano ---------- */
.cg-styles-grid { perspective: 1400px; }
.cg-style-card { z-index: 1; }
/* Quando si esplora il mazzo, le card NON attive arretrano e si attenuano (si "separano"). */
@media (hover: hover) {
  .cg-styles-grid:hover .cg-style-card:not(:hover):not(.is-selected),
  .cg-styles-grid:focus-within .cg-style-card:not(:focus-within):not(.is-selected) {
    transform: scale(.955) translateY(2px);
    opacity: .58;
    filter: saturate(.92);
  }
  /* La card esplorata avanza in primo piano e si ingrandisce. */
  .cg-style-card:hover, .cg-style-card:focus-within {
    transform: translateY(-14px) scale(1.06);
    z-index: 40;
    box-shadow: var(--shadow-lg);
    opacity: 1;
  }
}
/* Overlay con nome + caratteristiche: appare esplorando e resta se selezionata. */
.cg-style-caption {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: 26px 16px 14px;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-noir) 90%, transparent) 0%, color-mix(in srgb, var(--brand-noir) 50%, transparent) 55%, transparent 100%);
  color: var(--brand-avorio); opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  pointer-events: none;
}
.cg-style-caption b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.cg-style-caption span { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.cg-style-caption em { font-style: normal; font-family: var(--sans); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--brand-avorio) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand-avorio) 30%, transparent); border-radius: 0; padding: 3px 9px; }
/* La didascalia (nome + caratteristiche) appare solo in esplorazione: la selezione
   è gia' comunicata da badge "Selezionato" e pulsante verde, senza scrim ridondante. */
.cg-style-card:hover .cg-style-caption,
.cg-style-card:focus-within .cg-style-caption { opacity: 1; transform: translateY(0); }
/* Accessibilità/touch: l'anteprima interna resta visibile anche sulla card selezionata. */
.cg-style-card:focus-within .cg-style-inner,
.cg-style-card.is-selected .cg-style-inner { opacity: 1; transform: translateY(0); }
/* Qui c'era `.cg-style-card:focus-visible { outline: 3px solid var(--navy) }`:
   una regola morta. `body.ed :focus-visible` di brand.css ha specificità (0,2,1)
   contro (0,2,0) e vinceva sempre — il navy non è mai apparso (audit v2 §19).
   La grammatica del focus è una sola e vive nel foglio di marca. */

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .cg-layout { grid-template-columns: 1fr; }
  .cg-rail { display: none; }
  .cg-mobilebar { display: flex; }
  /* La barra mobile è fissa in basso (~62px): lascia spazio in fondo al flusso
     e ai salti d'ancora/focus, così non copre gli ultimi campi né il footer. */
  .cg-flow { padding-bottom: 84px; }
  html { scroll-padding-bottom: 88px; }
}
@media (max-width: 820px) {
  .cg-intro-in { grid-template-columns: 1fr; }
  /* Colonna unica: il libro torna centrato (l'ancoraggio a destra serve solo
     accanto al testo) e lascia sotto di sé lo spazio che la copertina spalancata
     occupa in prospettiva, così non arriva più sull'occhiello e sul titolo. */
  .cg-intro-visual { order: -1; margin-bottom: clamp(16px, 4vw, 36px); }
  .cg-book--hero { margin-left: auto; margin-right: auto; }
  .cg-steps-list { display: none; }
  .cg-steps-mobile { display: block; padding: 12px 0; font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--navy); }
  .cg-grid2 { grid-template-columns: 1fr; }
  .cg-subbar-in { flex-wrap: wrap; }
  .cg-autosave { width: 100%; margin-left: 0; }
  .cg-styles-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .cg-styles-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-style-card:hover { transform: none; }
  .cg-style-card:hover .cg-style-mock { transform: none; }
  .cg-type:hover { transform: none; }
  .cg-bump { animation: none; }
  * { scroll-behavior: auto; }
  .cg-pill, .cg-level, .cg-image-opt, .cg-chip, .cg-module { transition: none; }
  /* Mazzo stili: nessuno spostamento/scala con reduced-motion (solo variazioni di stato). */
  .cg-style-card:hover, .cg-style-card:focus-within,
  .cg-styles-grid:hover .cg-style-card:not(:hover),
  .cg-styles-grid:focus-within .cg-style-card:not(:focus-within) { transform: none; opacity: 1; filter: none; }
  .cg-style-caption { transition: none; transform: none; }
}

/* ---------- Ritmo (pills) ---------- */
.cg-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; }
.cg-pill { text-align: left; background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); display: flex; flex-direction: column; gap: 4px; }
.cg-pill b { font-family: var(--serif); font-weight: 500; font-size: 1rem; color: var(--ink); }
.cg-pill small { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); }
.cg-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-deep); }
.cg-pill.is-selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; background: var(--paper-raise); }

/* ---------- Interessi (chips) ---------- */
.cg-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cg-chip { font-family: var(--sans); font-size: .9rem; color: var(--ink); background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: 0; padding: 8px 15px; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.cg-chip:hover { border-color: var(--accent-deep); }
.cg-chip.is-selected { border-color: var(--navy); background: var(--navy); color: var(--brand-avorio); }

/* ---------- Livello di dettaglio ---------- */
.cg-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; }
.cg-level { text-align: left; background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 16px; cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); display: flex; flex-direction: column; gap: 6px; }
.cg-level b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.cg-level small { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }
.cg-level:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-deep); }
.cg-level.is-selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; background: var(--paper-raise); }

/* ---------- Immagini per giornata ---------- */
.cg-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; }
.cg-image-opt { position: relative; text-align: left; background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 16px; cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); display: flex; flex-direction: column; gap: 5px; }
.cg-image-opt b { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: var(--ink); }
.cg-image-opt small { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.cg-image-price { font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--brand-oro-testo); margin-top: 2px; }
.cg-image-opt:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-deep); }
.cg-image-opt.is-selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; background: var(--paper-raise); }
/* Badge "Consigliata": in flusso sopra il titolo, così non copre mai il testo della card. */
/* Era bianco su --accent-deep: 3,39:1, sotto la soglia (audit v2 §14 voce 10).
   Ora è la coppia della tavola 04: noir su oro pieno, 8,4:1. */
.cg-badge-rec { align-self: flex-start; margin-bottom: 2px; font-family: var(--sans); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--brand-noir); background: var(--brand-oro); border-radius: 0; padding: 3px 9px; }

/* ---------- Moduli / approfondimenti ---------- */
.cg-modules { display: grid; gap: 10px; }
.cg-module { display: flex; align-items: center; gap: 12px; background: var(--paper-raise); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; }
.cg-module input { width: 18px; height: 18px; accent-color: var(--navy); }
.cg-module-b { flex: 1; display: flex; flex-direction: column; }
.cg-module-b b { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.cg-module-b small { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); }
.cg-module-price { font-family: var(--sans); font-weight: 600; color: var(--brand-oro-testo); white-space: nowrap; }
/* Il listino accanto al prezzo di lancio: barrato, in secondo piano, mai al suo
   posto — così la cifra in chiaro resta una sola, quella che si paga. */
.cg-module-price s { opacity: .55; font-weight: 400; font-size: .86em; margin-left: 6px; }
.cg-module.is-selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; }
.cg-modules-soon { background: var(--paper-raise); border: 1.5px dashed var(--line); border-radius: var(--r-md); padding: 18px; }
.cg-modules-soon p { font-family: var(--sans); font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.cg-module-soon-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cg-module-soon-chip { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); background: var(--paper-raise); border: 1px solid var(--line); border-radius: 0; padding: 5px 12px; opacity: .85; }

/* ---------- Finalizza ordine ---------- */
.cg-finalize { margin-top: 24px; }
.cg-submit { font-size: 1.05rem; }
.cg-order-result { margin-top: 16px; font-family: var(--sans); font-size: .95rem; line-height: 1.5; }
.cg-order-result.is-ok { color: var(--ink); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: var(--r-md); padding: 16px; }
.cg-order-result.is-error { color: var(--error); font-weight: 600; }

/* ============================================================
   LOTTO ESPERIENZA GUIDATA + rifiniture (libro, rail, su misura)
   ============================================================ */

/* --- Fotografie "incollate" dentro le pagine del libro 3D --- */
.cg-b3-plate {
  display: block; width: 78%; aspect-ratio: 16 / 10; margin: 0 auto;
  border: 3px solid var(--paper-raise); border-radius: 3px; overflow: hidden;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--brand-noir) 28%, transparent);
  transform: rotate(-1.6deg);
  flex: none;
}
.cg-b3-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .cg-b3-plate { width: 72%; } }

/* --- Rail: il totale vive in alto, sempre visibile --- */
.cg-cart-total-top { border-top: 0; border-bottom: 1px solid var(--line); padding-top: 0; padding-bottom: 12px; margin-bottom: 12px; }
.cg-cart .cg-cart-total-top strong { font-size: 1.9rem; color: var(--brand-oro-testo); }
.cg-rail .cg-book--mini { width: min(140px, 52%); }
/* Su schermi bassi l'anteprima cede il posto al totale: niente scroll per vedere il prezzo */
@media (max-height: 760px) { .cg-rail .cg-preview { display: none; } }

/* --- Su misura: niente fuoriuscite su smartphone --- */
.cg-custom { min-width: 0; overflow: hidden; }
@media (max-width: 480px) {
  .cg-fuse { gap: 10px; min-height: 300px; }
  .cg-fuse-card { width: clamp(108px, 36vw, 150px); }
  .cg-fuse-op { font-size: 1.5rem; }
  .cg-fuse-sealed { transform-origin: center; }
  .cg-fuse[data-state="fused"] .cg-fuse-sealed { animation: none; opacity: 1; transform: translate(-50%,-50%) scale(.82); }
}

/* --- CTA dell'intro --- */
.cg-intro-cta { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* IL BERSAGLIO E' ALTO 24px, e non e' un dettaglio di stile: e' il bottone che
   RIVELA il modulo intero. La pagina nasce in modalita' guidata
   (`body.cg-wiz-collapsed`) e finche' nessuno preme qui gli otto campi hanno
   rettangolo 0x0 — misurato il 07/09/2026, quando sette schermate «valide» del
   percorso cliente inquadravano tutte la stessa illustrazione.
   Misurato il 08/09: 199x15px, cioe' 9px sotto il minimo AA di 24 (WCAG 2.5.8).
   `padding` verticale invece di `height`: il testo non si sposta di un pixel e
   il bersaglio cresce solo dove serve. */
.cg-wizard-skiplink { background: none; border: none; padding: 4.5px 0; cursor: pointer; font-family: var(--sans); font-size: .84rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.cg-wizard-skiplink:hover { color: var(--brand-oro-testo); }

/* --- Modalità guidata: le fasi restano nascoste finché il wizard non finisce ---
   Prima restava visibile #fase-6: chi arrivava trovava "06 Riepilogo" con dentro
   un riepilogo già compilato di scelte mai fatte, e la barra che annunciava
   "Fase 6 di 6" (audit v2 §30). Ora la modalità guidata nasconde tutte e sei le
   fasi; la pagina classica si rivela dal pulsante o dalla barra delle fasi, che
   restano le vie d'uscita.
   Nascondere le sole sezioni non bastava: restava in piedi l'intera griglia
   `.cg-layout`, cioè la colonna laterale col carrello e l'anteprima appesi sotto
   l'intro, più il suo `padding-bottom` — mezza schermata di vuoto e un totale di
   scelte mai fatte. Si spegne il contenitore, non il suo contenuto, così la
   pagina finisce dove finisce l'intro. */
body.cg-wiz-collapsed .cg-layout { display: none; }
body.cg-wiz-open { overflow: hidden; }

/* --- Overlay del wizard --- */
.cg-wiz { position: fixed; inset: 0; z-index: 120; display: none; }
.cg-wiz.is-on { display: block; }
.cg-wiz-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--brand-noir) 78%, transparent); }
.cg-wiz-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(780px, calc(100vw - 28px)); max-height: min(88dvh, 860px);
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-md);
  box-shadow: 0 60px 120px -40px color-mix(in srgb, var(--brand-noir) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--brand-oro) 25%, transparent);
  overflow: hidden;
}
@media (max-width: 640px) {
  .cg-wiz-panel { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; left: 0; top: 0; transform: none; }
}

/* Barra di avanzamento: riempimento oro + farfalla che accompagna */
.cg-wiz-head { padding: 16px 22px 12px; border-bottom: 1px solid var(--line); background: var(--paper-raise); }
/* QUESTA RIGA USA --line COME FONDO, NON COME FILETTO, ed è metà della ragione
   per cui il 03/08 le pastiglie di scelta sono state puntate su --line-strong
   invece di alzare --line: alzando il token, questa barra di avanzamento si
   sarebbe scurita insieme ai contorni. Il ragionamento per intero sta nel
   blocco «LE PASTIGLIE DI SCELTA» più in alto in questo stesso foglio; gli
   altri quattro fondi che dipendono da --line vivono in brand-tavola.html e in
   dove-andare.html. Le due cose si guardano INSIEME. */
.cg-wiz-bar { position: relative; height: 8px; border-radius: 0; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: visible; }
.cg-wiz-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 0; background: linear-gradient(90deg, var(--brand-oro-deep), var(--brand-oro-soft)); transform-origin: left center; transform: scaleX(0); transition: transform .8s var(--ease); }
.cg-wiz-bfly { position: absolute; top: -9px; left: 0; width: 22px; color: var(--accent-deep); transform: translateX(0); transition: transform .8s var(--ease); pointer-events: none; }
.cg-wiz-bfly svg { width: 100%; height: auto; fill: currentColor; animation: cg-b3-flap .34s ease-in-out infinite alternate; }
.cg-wiz-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 9px; }
.cg-wiz-label { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--brand-oro-testo); }
.cg-wiz-count { font-family: var(--sans); font-size: .74rem; color: var(--ink-soft); letter-spacing: .06em; }

/* Corpo: schermate frase + sezione ospitata */
.cg-wiz-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cg-wiz-phrase { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 46px 30px; }
.cg-wiz-phrase .cg-wiz-line { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.22; color: var(--ink); max-width: 21ch; }
.cg-wiz-phrase .cg-wiz-why { font-family: var(--sans); font-size: .95rem; line-height: 1.6; color: var(--ink-soft); max-width: 48ch; }
.cg-wiz-phrase .cg-wiz-rule { width: 54px; height: 3px; border-radius: 0; background: var(--accent); }
.cg-wiz-enc { font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--brand-oro-testo); }
/* --- Schermata-domanda: una domanda per volta, campi reali ospitati --- */
.cg-wiz-step-host { padding: 22px 30px 26px; }
.cg-wiz-q { margin-bottom: 18px; }
.cg-wiz-q-eyebrow { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-oro-testo); margin-bottom: 8px; min-height: 1em; }
.cg-wiz-q-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3.4vw, 1.95rem); line-height: 1.18; color: var(--ink); }
.cg-wiz-q-why { font-family: var(--sans); font-size: .93rem; line-height: 1.55; color: var(--ink-soft); margin-top: 9px; max-width: 62ch; }
.cg-wiz-q .cg-wiz-enc { margin-top: 10px; }

/* I nodi reali escono dalla .cg-grid2: qui hanno larghezza piena e respiro */
.cg-wiz-q-host { display: flex; flex-direction: column; gap: 14px; }
.cg-wiz-q-host > .ed-field { margin: 0; min-width: 0; width: 100%; }
.cg-wiz-q-host > label.cg-check { margin-top: 0; }
.cg-wiz-q-host > p.ed-muted { margin: 0; font-family: var(--sans); font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
.cg-wiz-q-host > .cg-date-feedback { margin-top: 0; }

/* Opzioni come bottoni generosi (le classi restano quelle reali della pagina) */
.cg-wiz-q-host .cg-type, .cg-wiz-q-host .cg-pill, .cg-wiz-q-host .cg-level, .cg-wiz-q-host .cg-image-opt { padding: 18px; }
.cg-wiz-q-host .cg-pills, .cg-wiz-q-host .cg-levels { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cg-wiz-q-host .cg-chip { padding: 10px 18px; font-size: .95rem; }
.cg-wiz-q-host .ed-input, .cg-wiz-q-host .ed-select { font-size: 1rem; }

/* Micro-conferma prima dell'auto-avanzamento: la scelta "risponde" */
.cg-wiz-step-host.cg-wiz-adv .is-selected { transform: scale(1.02); }

/* Etichette ridondanti mentre il campo è ospitato (la domanda le sostituisce) */
.cg-wiz-hidden { display: none !important; }

/* Attesa opzioni (LISTINO / moduli in arrivo), errore onesto, salto discreto */
.cg-wiz-q-wait { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ink-soft); margin-top: 10px; }
.cg-wiz-q-error { font-family: var(--sans); font-size: .92rem; font-weight: 600; color: var(--error); margin-top: 12px; }
.cg-wiz-q-foot { margin-top: 16px; }
.cg-wiz-stepskip { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--sans); font-size: .86rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.cg-wiz-stepskip:hover { color: var(--brand-oro-testo); }
@media (max-width: 640px) { .cg-wiz-step-host { padding: 16px 18px 22px; } }

/* Ingressi morbidi (solo transform/opacity) */
@media (prefers-reduced-motion: no-preference) {
  .cg-wiz-phrase > * { opacity: 0; transform: translateY(14px); animation: cg-wiz-in .8s var(--ease) forwards; }
  .cg-wiz-phrase > *:nth-child(2) { animation-delay: .12s; }
  .cg-wiz-phrase > *:nth-child(3) { animation-delay: .24s; }
  .cg-wiz-phrase > *:nth-child(4) { animation-delay: .36s; }
  .cg-wiz-q-host > * { opacity: 0; transform: translateY(12px); animation: cg-wiz-in .6s var(--ease) forwards; }
  .cg-wiz-q-host > *:nth-child(2) { animation-delay: .08s; }
  .cg-wiz-q-host > *:nth-child(3) { animation-delay: .16s; }
}
@keyframes cg-wiz-in { to { opacity: 1; transform: translateY(0); } }

/* Navigazione */
.cg-wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--paper-raise); }
.cg-wiz-nav .ed-btn { min-width: 130px; justify-content: center; }
.cg-wiz-back { background: none; border: 1.5px solid var(--line-strong); border-radius: 0; padding: 11px 20px; font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--ink-soft); cursor: pointer; }
.cg-wiz-back:disabled { opacity: .35; cursor: default; }
.cg-wiz-skip { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.cg-wiz-skip:hover { color: var(--brand-oro-testo); }
.cg-wiz-close { position: absolute; top: 10px; right: 12px; z-index: 2; background: none; border: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); padding: 8px; }
.cg-wiz-close:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .cg-wiz-fill, .cg-wiz-bfly { transition: none; }
  .cg-wiz-bfly svg { animation: none; }
}