/* Hallmark · shape: custom (the Tavola quotata: product hero, the evening, one quiet line, a horizontal walk through one request in seven working steps, offer, drawings, the cartiglio as close) · genre: modern-minimal · theme: custom · idea: "la tua richiesta, dall'arrivo alla firma, da sinistra a destra" · vibe: "officina di notte, schermi accesi, metallo freddo" · redesign: full
 * paper: oklch(15.5% 0.008 240) · accent: oklch(54% 0.165 257) · display: Instrument Sans · body: Instrument Sans · hero: two product screens in perspective over the shop video, the head below the line · nav: edge bar, mark, four anchors, phone and action as buttons · footer: the page's own cartiglio · signature: one request walking left to right through seven working steps, the price drawn as a dimension that your signature closes
 * axes: dark/grotesk-sans/chromatic-blue · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E5 S5 R4 V5 · weakest: R, seven panels ask a lot of one scroll; each one has a single job, a «Tu» line and a dossier that carries its result to the next */
/* Hallmark · waive 47b · two frames, our built program and the drawing FL-2041, both real content · the reference (Uptool) sells with two monitors, program beside drawing, and Cartiglio's whole job is reading one into the other */
/* Hallmark · waive 84 · the program on the screens and in the seven steps is built in HTML · Cartiglio's interface does not run yet (Daniele, from 13/11), there is nothing to capture */
/* Hallmark · waive 64 · mono on figures and readouts · the numbers are measurements and the drawing speaks in quotes; labels stay sentence case and untracked */
/* Hallmark · waive 39b · the 36 and 40px controls are .ui-btn and .doc-prezzo, only inside the product screens, app UI at 32 to 40px · the page controls (nav, CTA, form) stand at 48, the screens show the program as it will be */
/* Hallmark · waive 80 · the drawn view in the closing title block is .cf-disegno, a dimensioned technical drawing of the FL-2041 flange with its projection symbol · a cartiglio closes a technical drawing, and the drawing is the subject the product reads, not decoration */
/* Hallmark · dismissed 59 · the counter reads the seven step panels as sections; they are one horizontal section, the way a drawing has views */
/* Hallmark · argument for Instrument Sans as the whole page · it is the Compass brand face, Cartiglio is a Compass product and its app uses the same face (progetto §7) */
/* Rolando, 25/10: the copy speaks to the one owner deciding; no ASCII art anywhere; «come funziona» walks left to right, pinned, until the request is sent. Entrances: rules draw, boxes rise, prose never moves; all under .js and prefers-reduced-motion: no-preference, so the page is whole without them */
@import url("base.css");

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/instrument-sans-600.woff2) format("woff2"); }

:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.1875rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem;
  --text-display: clamp(2.625rem, 5.4vw + 0.4rem, 6.25rem); --text-display-s: clamp(2.5rem, 3.6vw + 1rem, 4.25rem);
  --text-section: clamp(2.125rem, 2.4vw + 1.25rem, 3.75rem); --text-title: clamp(1.25rem, 0.6vw + 1rem, 1.5rem); --text-lead: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --text-passo: clamp(1.75rem, 1.5vw + 1.1rem, 2.75rem);
  --text-ui: 0.8125rem; --text-app: 0.75rem; --text-mini: 0.6875rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-linea: 1200ms; --dur-entra: 900ms;
  --container: 1360px; --gutter: 64px; --gap-columns: 40px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --nav-h: 72px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --radius-card: 4px; --radius-input: 2px; --radius-pill: 999px; --radius-ui: 10px; --radius-ui-s: 6px; --rule-hair: 1px; --shadow-card: none;

  --color-paper: oklch(15.5% 0.008 240);
  --color-paper-2: oklch(19% 0.01 238);
  --color-paper-3: oklch(24% 0.011 236);
  --color-ink: oklch(96% 0.004 150);
  --color-ink-2: oklch(77% 0.01 230);
  --color-muted: oklch(63% 0.012 230);
  --color-rule: oklch(30% 0.01 236);
  --color-accent: oklch(54% 0.165 257);
  --color-accent-2: oklch(47% 0.165 257);
  --color-accent-ink: oklch(98% 0.006 257);
  --color-focus: oklch(80% 0.12 252);
  --color-firma: oklch(76% 0.11 252);
  --color-spia: oklch(72% 0.14 158);
  --color-error: oklch(72% 0.15 31);
  --color-evid: oklch(30% 0.06 255);
  --color-velo: oklch(15.5% 0.008 240 / 0.88);
  --color-velo-2: oklch(15.5% 0.008 240 / 0.3);
  --color-ombra: oklch(10% 0.01 240 / 0.45);
  --color-ombra-chiara: oklch(20% 0.02 255 / 0.12);
  --color-luce: oklch(100% 0 0 / 0.06);
  --color-griglia: oklch(32% 0.012 236 / 0.4);
  --color-btn-luce: oklch(100% 0 0 / 0.22); --color-btn-alone: oklch(54% 0.165 257 / 0.55); --color-alone: oklch(54% 0.165 257 / 0.28);
  --seg-1: oklch(42% 0.016 252); --seg-2: oklch(62% 0.014 250); --seg-3: oklch(28% 0.02 262); --seg-4: oklch(80% 0.01 250);

  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display-weight: 600;
  --tracking-display: -0.03em;
}

@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }

/* il programma: carta, inchiostro, verde «letto», blu del titolare */
[data-theme="carta"] {
  --color-paper: oklch(98.6% 0.002 240);
  --color-paper-2: oklch(96.2% 0.004 240);
  --color-paper-3: oklch(92.4% 0.006 240);
  --color-ink: oklch(20% 0.013 264);
  --color-ink-2: oklch(40% 0.016 252);
  --color-muted: oklch(50% 0.016 255);
  --color-rule: oklch(89% 0.006 240);
  --color-accent: oklch(46% 0.15 257);
  --color-accent-2: oklch(40% 0.15 257);
  --color-accent-ink: oklch(98% 0.006 257);
  --color-focus: oklch(46% 0.15 255);
  --color-firma: oklch(46% 0.15 257);
  --color-spia: oklch(50% 0.12 160);
  --color-error: oklch(50% 0.17 28);
  --color-evid: oklch(92% 0.045 255);
  --color-luce: oklch(100% 0 0 / 0.9);
  --color-ombra: oklch(18% 0.02 255 / 0.28);
  color: var(--color-ink);
  background: var(--color-paper);
}

/* ---------- comuni ---------- */
html { scroll-padding-top: calc(var(--nav-h) + var(--space-md)); scroll-behavior: smooth; }
body { font-size: var(--text-md); line-height: 1.5; letter-spacing: -0.005em; }
body::before { content: ""; position: fixed; inset: 0; z-index: var(--z-raised); max-width: var(--container); margin-inline: auto; border-inline: 1px solid var(--color-rule); pointer-events: none; }
h1, h2, h3, h4 { color: var(--color-ink); }
.cifre { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lead { color: var(--color-ink-2); }
a { color: var(--color-ink); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.ico { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico--mini { width: 12px; height: 12px; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-input); font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn-testo { display: inline-block; translate: var(--tx, 0px) var(--ty, 0px); }
.btn-freccia { width: 16px; height: 16px; translate: var(--tx, 0px) var(--ty, 0px); transition: transform var(--dur-short) var(--ease-out); }
.btn:hover .btn-freccia { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--blu { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 var(--color-btn-luce), 0 12px 28px -14px var(--color-btn-alone); }
.btn--blu:hover:not(:disabled) { background: var(--color-accent-2); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 var(--color-btn-luce), 0 16px 34px -14px var(--color-btn-alone); }
.btn--vuoto { border-color: var(--color-ink-2); background: transparent; color: var(--color-ink); }
.btn--vuoto:hover { border-color: var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); }
.btn--piccolo { min-height: 44px; padding: 0 var(--space-md); }

/* i bottoni dentro le schermate del programma */
.ui-btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-ui-s); background: var(--color-paper); color: var(--color-ink); font: 600 var(--text-ui)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.ui-btn:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ui-btn--blu { border-color: transparent; background: var(--color-accent); color: var(--color-accent-ink); }
.ui-btn--scuro { border-color: var(--color-rule); background: transparent; color: var(--color-ink); }
.ui-btn--scuro:hover { background: var(--color-paper-3); }

/* i tre stati, più il quarto: deciso da te */
.st { width: 14px; height: 14px; flex-shrink: 0; overflow: visible; }
.st-pieno { fill: var(--color-spia); }
.st-tuo { fill: var(--color-accent); }
.st-spunta { fill: none; stroke: var(--color-paper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-bordo { fill: none; stroke: var(--color-ink-2); stroke-width: 1.5; }
.st-tratto { stroke-dasharray: 2.2 1.8; }
.st-meta { fill: var(--color-ink-2); }

.pillola { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-mini); font-weight: 600; color: var(--color-ink-2); white-space: nowrap; }
.pillola--pronta { border-color: var(--color-accent); color: var(--color-accent); }
.pillola--fatta { background: var(--color-paper-2); }
.pillola--ok { border-color: var(--color-spia); color: var(--color-spia); }
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-mini); font-weight: 600; letter-spacing: 0.02em; }

/* una scheda del programma: carta, bordo sottile, luce sul labbro, ombra */
.ui { position: relative; border: 1px solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper); box-shadow: inset 0 1px 0 var(--color-luce), 0 1px 2px var(--color-ombra-chiara), 0 22px 44px var(--color-ombra); color: var(--color-ink); font-size: var(--text-ui); }
.ui-testa { display: flex; align-items: center; gap: var(--space-xs); min-height: 42px; padding: 0 var(--space-md); border-bottom: 1px solid var(--color-rule); font-weight: 600; }
.ui-testa .ico { color: var(--color-ink-2); }
.ui-testa > svg:not(.ico) { width: 16px; height: 16px; }
.ui-testa-dx { margin-left: auto; font-weight: 400; color: var(--color-muted); }

/* il controllo a segmenti: radio veri, uno solo acceso */
.segmento { position: relative; display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper-2); }
.segmento input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmento label { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-ui-s); color: var(--color-ink-2); font-size: var(--text-ui); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.segmento label:hover { background: var(--color-paper-3); color: var(--color-ink); }
.segmento label:active { transform: translateY(1px); }
.segmento input:checked + label { background: var(--color-paper); color: var(--color-ink); box-shadow: 0 1px 2px var(--color-ombra-chiara), inset 0 0 0 1px var(--color-rule); }
.segmento--tuo input:checked + label { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
.segmento input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.segmento input:disabled + label { opacity: 0.5; cursor: not-allowed; }
.segmento--piccolo label { min-height: 30px; padding: 0 var(--space-xs); font-size: var(--text-app); }

/* i cursori: range vero, pista piena fino al valore (--fill lo scrive lo script) */
.cursore { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); row-gap: var(--space-2xs); align-items: baseline; }
.cursore label { font-size: var(--text-ui); color: var(--color-ink-2); }
.cursore output { font-size: var(--text-lg); color: var(--color-ink); }
.cursore-in { --fill: 50%; grid-column: 1 / -1; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cursore-in::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-accent) var(--fill), var(--color-paper-3) var(--fill)); }
.cursore-in::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); }
.cursore-in::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background: var(--color-accent); }
.cursore-in::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: calc(-1 * var(--space-xs)); border: 2px solid var(--color-accent); border-radius: 50%; background: var(--color-paper); box-shadow: 0 1px 3px var(--color-ombra-chiara), 0 0 0 4px var(--color-evid); transition: transform var(--dur-micro) var(--ease-out); -webkit-appearance: none; appearance: none; }
.cursore-in::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--color-accent); border-radius: 50%; background: var(--color-paper); box-shadow: 0 1px 3px var(--color-ombra-chiara), 0 0 0 4px var(--color-evid); transition: transform var(--dur-micro) var(--ease-out); }
.cursore-in:hover::-webkit-slider-thumb { transform: scale(1.1); }
.cursore-in:active::-webkit-slider-thumb { transform: scale(0.94); cursor: grabbing; }
.cursore-in:hover::-moz-range-thumb { transform: scale(1.1); }
.cursore-in:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-ui-s); }
.cursore-in:disabled { opacity: 0.5; cursor: not-allowed; }
.estremi { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: var(--text-mini); color: var(--color-muted); }

/* ---------- barra ---------- */
.barra { position: sticky; top: 0; z-index: var(--z-sticky-nav); height: var(--nav-h); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.barra-riga { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: 100%; }
.marchio { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; font: 600 1.3125rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); text-decoration: none; }
.marchio svg { width: 26px; height: 26px; }
.m-foglio { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.m-cartiglio { fill: currentColor; }
.marchio:focus-visible, .menu a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.menu ul { display: flex; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-input); font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.menu a:hover { color: var(--color-ink); background: var(--color-paper-3); }
.menu a[aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }


/* ---------- A · testata: quattro piani. --h è lo scorrimento della testata (0-1), --mx e --my il puntatore (-0,5 / 0,5) ---------- */
.testata { --h: 0; --mx: 0; --my: 0; position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: calc(100svh - var(--nav-h)); border-bottom: 1px solid var(--color-rule); overflow: clip; }
.testata-sfondo { position: absolute; inset: 0; z-index: -1; background: var(--color-paper); overflow: clip; }
.testata-video { width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(0.6); transform: translate3d(calc(var(--mx) * -14px), calc(var(--h) * 90px), 0) scale(calc(1.06 + var(--h) * 0.05)); }
.testata-sfondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-velo-2) 0%, var(--color-velo) 72%, var(--color-paper) 100%); }
.scena { position: relative; display: grid; place-items: end center; padding: var(--space-xl) var(--space-xl) 0; perspective: 1700px; overflow: clip; border-bottom: 1px solid var(--color-rule); }
.schermi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg); width: min(1300px, 100%); margin: 0 0 calc(-1 * var(--space-4xl)); transform-style: preserve-3d; transform: rotateX(calc(9deg - var(--my) * 4deg)) rotateY(calc(-7deg + var(--mx) * 5deg)) rotateZ(0.6deg); transform-origin: 50% 100%; }
.schermo { padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: inset 0 1px 0 var(--color-luce), 0 30px 60px var(--color-ombra); }
.schermo > * { border-radius: var(--space-3xs); }
.schermo--app { transform: translate3d(0, calc(var(--h) * -40px), calc(var(--h) * 80px)); }
.schermo--disegno { align-self: end; transform: translate3d(calc(var(--h) * 36px), calc(var(--h) * 28px), calc(var(--h) * -100px)); }
.js .schermi { opacity: 0.4; translate: 0 24px; }
.js .schermi.is-acceso { opacity: 1; translate: 0 0; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); }

/* la schermata del programma */
.app { display: grid; grid-template-columns: 148px minmax(0, 1fr); min-height: 470px; background: var(--color-paper); font-size: var(--text-app); line-height: 1.35; overflow: hidden; }
.app-lato { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); padding: var(--space-sm) var(--space-xs); background: var(--color-paper-2); border-right: 1px solid var(--color-rule); }
.app-marchio { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); font-size: var(--text-ui); font-weight: 600; }
.app-marchio svg { width: 18px; height: 18px; }
.app-nav { display: grid; align-content: start; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; }
.app-nav li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); min-height: 30px; padding: 0 var(--space-xs); border-radius: var(--radius-ui-s); color: var(--color-ink-2); }
.app-nav .ico { width: 15px; height: 15px; }
.app-nav li.is-qui { background: var(--color-paper); color: var(--color-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-rule), 0 1px 1px var(--color-ombra-chiara); }
.app-nav b { min-width: 18px; padding: 0 var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-mini); font-weight: 500; text-align: center; }
.app-officina { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-xs) 0; border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }
.app-officina .avatar { width: 22px; height: 22px; font-size: 9px; }
.app-corpo { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.app-testa { display: flex; align-items: center; gap: var(--space-sm); min-height: 42px; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.app-percorso { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-muted); white-space: nowrap; }
.app-percorso b { color: var(--color-ink); font-weight: 500; }
.app-cerca { display: flex; flex: 1; align-items: center; gap: var(--space-xs); min-width: 0; min-height: 26px; padding: 0 var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-ui-s); background: var(--color-paper-2); color: var(--color-muted); white-space: nowrap; overflow: hidden; }
.app-cerca .ico { width: 13px; height: 13px; }
.app-campanella { position: relative; display: inline-grid; color: var(--color-ink-2); }
.app-campanella i { position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border: 1.5px solid var(--color-paper); border-radius: 50%; background: var(--color-accent); }
.app-vista { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 0; }
.app-lista { min-width: 0; border-right: 1px solid var(--color-rule); }
.app-schede, .dett-schede { display: flex; gap: var(--space-sm); padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-muted); white-space: nowrap; }
.app-schede span, .dett-schede span { padding: var(--space-xs) 0; }
.app-schede .is-qui, .dett-schede .is-qui { color: var(--color-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-ink); }
.app-schede b { font-weight: 400; color: var(--color-muted); }
.app-voci { margin: 0; padding: 0; list-style: none; }
.app-voce { display: grid; justify-items: start; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.app-voce.is-scelta { background: var(--color-paper-2); box-shadow: inset 2px 0 0 var(--color-accent); }
.voce-riga { display: flex; justify-content: space-between; gap: var(--space-xs); width: 100%; color: var(--color-muted); }
.voce-riga b { color: var(--color-ink); font-weight: 600; }
.voce-cliente { max-width: 100%; color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-dettaglio { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; }
.dett-testa { padding: var(--space-sm) var(--space-sm) var(--space-xs); }
.dett-titolo { font-size: var(--text-sm); font-weight: 600; }
.dett-sotto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xs); color: var(--color-ink-2); }
.urgente { padding: 0 var(--space-xs); border: 1px solid var(--color-error); border-radius: var(--radius-pill); color: var(--color-error); font-size: var(--text-mini); font-weight: 600; }
.app-letti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: var(--space-xs); padding: var(--space-sm); }
.app-campo { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: var(--space-xs); row-gap: var(--space-3xs); align-items: center; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-ui-s); background: var(--color-paper); transition: opacity var(--dur-long) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.app-campo .st { width: 13px; height: 13px; }
.app-campo .campo-nome { color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-campo i { font-style: normal; font-size: var(--text-mini); color: var(--color-muted); }
.app-campo b { grid-column: 2 / -1; font-weight: 500; font-size: var(--text-ui); color: var(--color-ink); }
.app-campo[data-stato="dubbio"] { border-style: dashed; border-color: var(--color-ink-2); }
.app-campo[data-stato="vuoto"] b { color: var(--color-muted); }
.app-campo.is-evid { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-evid); }
.js .app-campo { opacity: 0.25; }
.js .app-campo.is-on { opacity: 1; }
.dett-barra { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-top: 1px solid var(--color-rule); background: var(--color-paper-2); }
.dett-conto { color: var(--color-ink-2); }
.dett-prezzo { margin-left: auto; white-space: nowrap; color: var(--color-ink-2); }
.dett-prezzo b { font-size: var(--text-ui); font-weight: 600; color: var(--color-ink); }
.dett-barra .ui-btn { min-height: 28px; font-size: var(--text-app); }

/* la schermata del disegno */
.viewer { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--color-paper); font-size: var(--text-app); overflow: hidden; }
.viewer-barra { display: flex; align-items: center; gap: var(--space-sm); min-height: 36px; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.viewer-file { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; font-weight: 600; white-space: nowrap; }
.viewer-file .ico { color: var(--color-error); }
.viewer-livelli { display: flex; gap: var(--space-2xs); margin-left: auto; }
.viewer-livelli span { padding: 0 var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-muted); }
.viewer-livelli .is-on { background: var(--color-paper); color: var(--color-ink); }
.viewer-zoom { display: flex; align-items: center; gap: var(--space-2xs); color: var(--color-ink-2); }
.viewer-zoom .ico { width: 12px; height: 12px; }
.viewer > .cad, .viewer-tela { background-color: var(--color-paper); background-image: radial-gradient(var(--color-rule) 0.8px, transparent 0.8px); background-size: 14px 14px; }
.viewer > .cad { padding: var(--space-xs); }
.viewer-piede { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-sm); border-top: 1px solid var(--color-rule); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-mini); }
.viewer-conto { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-left: auto; color: var(--color-ink-2); }
.viewer-conto .st { width: 11px; height: 11px; }

/* il disegno: linee a peso, quote, note, cartiglio; gli strati si spengono con --vedi-* */
.cad { display: block; width: 100%; height: auto; overflow: visible; }
.cad-cornice { fill: none; stroke: var(--color-ink); stroke-width: 1.3; }
.cad-cornice-int { fill: none; stroke: var(--color-ink-2); stroke-width: 0.5; }
.cad-zone { fill: none; stroke: var(--color-ink-2); stroke-width: 0.6; }
.cad-zone-lettere text { font: 400 6.5px var(--font-body); fill: var(--color-muted); text-anchor: middle; }
.cad-tratto circle { fill: none; stroke: var(--color-ink); stroke-width: 1.6; }
.cad-sezione { fill: url(#tratteggio); stroke: var(--color-ink); stroke-width: 1.6; }
.cad-tratteggio { stroke: var(--color-ink-2); stroke-width: 0.7; }
.cad-asse { fill: none; stroke: var(--color-muted); stroke-width: 0.55; stroke-dasharray: 12 2.5 1.5 2.5; }
.cad-taglio { fill: none; stroke: var(--color-ink); stroke-width: 1.8; }
.cad-sottile { fill: none; stroke: var(--color-ink-2); stroke-width: 0.6; }
.cad-freccia { fill: none; stroke: var(--color-ink-2); stroke-width: 1; }
.cad-freccia-piena { fill: var(--color-ink); }
.cad-titoletto text { font: 600 9px var(--font-body); fill: var(--color-ink); }
.cad-quote text { font-family: var(--font-outlier); font-size: 8.5px; fill: var(--color-ink); }
.cad-quote--cartiglio text { font-size: 10.5px; }
.cad-quote--piccola text { font-size: 6.8px; }
.cad-etichette text { font-family: var(--font-body); font-size: 6.6px; fill: var(--color-muted); }
.cad-mano text { font-family: var(--font-body); font-size: 15px; fill: var(--color-ink-2); }
.cad-mano-segno { fill: none; stroke: var(--color-ink-2); stroke-width: 0.9; stroke-linecap: round; }
.cad-note text { font-family: var(--font-body); font-size: 7.2px; fill: var(--color-ink-2); }
.cad-strato-quote { opacity: var(--vedi-quote, 1); transition: opacity var(--dur-long) var(--ease-out); }
.cad-strato-note { opacity: var(--vedi-note, 1); transition: opacity var(--dur-long) var(--ease-out); }
.bx-strato { opacity: var(--vedi-riquadri, 1); transition: opacity var(--dur-long) var(--ease-out); }

/* i riquadri sui campi letti */
.bx rect:first-child { fill: none; stroke-width: 2; transition: opacity var(--dur-long) var(--ease-out), stroke-width var(--dur-short) var(--ease-out); }
.bx[data-stato="letto"] > rect:first-child { stroke: var(--color-spia); fill: color-mix(in oklab, var(--color-spia) 10%, transparent); }
.bx[data-stato="dubbio"] > rect:first-child { stroke: var(--color-ink); stroke-dasharray: 5 3; fill: color-mix(in oklab, var(--color-ink) 5%, transparent); }
.bx[data-stato="vuoto"] > rect:first-child { stroke: var(--color-muted); stroke-dasharray: 2 3; }
.bx[data-stato="tuo"] > rect:first-child { stroke: var(--color-accent); fill: color-mix(in oklab, var(--color-accent) 10%, transparent); }
.bx-punto { font: 600 13px var(--font-body); fill: var(--color-muted); }
.bx-tag rect { fill: var(--color-ink); stroke: none; }
.bx-tag text { font: 600 8.5px var(--font-body); fill: var(--color-paper); }
.bx.is-evid > rect:first-child { stroke-width: 3.4; }
.bx.is-evid .bx-tag rect { fill: var(--color-accent); }
.js .bx[data-bx] { opacity: 0; }
.js .bx[data-bx].is-on { opacity: 1; transition: opacity var(--dur-long) var(--ease-out); }

/* piano vicino: il calibro, fuori quadro in basso; è il più veloce e copre l'angolo del programma, mai il titolo */
.calibro { position: absolute; left: -150px; bottom: -118px; z-index: var(--z-base); width: min(600px, 44%); height: auto; overflow: visible; filter: drop-shadow(0 24px 28px var(--color-ombra)); transform: translate3d(calc(var(--mx) * 18px), calc(var(--h) * -170px), 0) rotate(-8deg); transform-origin: 30% 80%; pointer-events: none; }
.cal-corpo path, .cal-corpo rect, .cal-cursore path, .cal-cursore rect, .cal-cursore circle { fill: var(--color-paper-3); stroke: var(--color-ink-2); stroke-width: 1.4; }
.cal-cursore .cal-nonio { fill: var(--color-paper-2); }
.cal-rotella { stroke-dasharray: 2 2.4; }
.cal-tacca { stroke: var(--color-ink-2); stroke-width: 1; }
.cal-luce { stroke: var(--color-ink); stroke-width: 1; opacity: 0.5; }
.cal-cursore { transform: translateX(calc(var(--h) * 70px)); }

.testata-testo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: end; padding-block: var(--space-xl) var(--space-2xl); }
.testata h1 { grid-row: span 2; font-size: var(--text-display); line-height: 0.96; max-width: 13ch; }
.testata .lead { max-width: 32ch; }
.azioni { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }

/* ---------- B · la tua sera ---------- */
.problema { padding-block: var(--section-gap); background: var(--color-paper-2); }
.problema-griglia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.problema h2 { max-width: 14ch; font-size: var(--text-section); }
.problema-testo p { margin-top: var(--space-lg); max-width: 46ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.sera { margin: 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper); }
.sera-titolo { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.sera-lista { margin: 0; padding: 0; list-style: none; }
.sera-voce { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); min-height: 54px; border-bottom: 1px solid var(--color-rule); }
.sera-voce:last-child { border-bottom: 0; }
.sera-voce .ico { width: 18px; height: 18px; color: var(--color-muted); }
.sera-cosa { position: relative; font-size: var(--text-md); color: var(--color-ink); }
.sera-cosa::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 1.5px; background: var(--color-ink-2); transform-origin: 0 50%; transform: scaleX(0); }
.sera-chi { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.sera-voce--sua .sera-cosa { color: var(--color-muted); }
.sera-voce--sua .sera-cosa::after { transform: scaleX(1); }
.sera-voce--meta .sera-cosa::after { transform: scaleX(1); background: repeating-linear-gradient(90deg, var(--color-ink-2) 0 6px, transparent 6px 10px); }
.sera-voce--tua { box-shadow: inset 2px 0 0 var(--color-firma); padding-left: var(--space-sm); }
.sera-voce--tua .ico, .sera-voce--tua .sera-chi { color: var(--color-firma); }
.sera-voce--tua .sera-chi { font-weight: 600; }

/* ---------- i dati: «Oggi» dipinge i problemi, «Con Cartiglio» i vantaggi e le garanzie; ogni numero ha la fonte ---------- */
.dati { padding-block: var(--section-gap); background: var(--color-paper); }
.dati-griglia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--gap-columns) + var(--space-lg)); align-items: start; }
.dati-foto { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); margin: 0; }
.dati-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-card); filter: saturate(0.82); }
.dati-testo h2 { max-width: 16ch; font-size: var(--text-section); }
.dati-testo > p { margin-top: var(--space-md); max-width: 50ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.dati-blocco { display: flex; max-width: none; align-items: center; gap: var(--space-sm); margin: var(--space-2xl) 0 0; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-ink-2); font-size: var(--text-title); }
.dati-blocco::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-ink-2); }
.dati-blocco--con { border-color: var(--color-firma); color: var(--color-firma); }
.dati-blocco--con::before { background: var(--color-firma); }
.dati-numeri { margin: 0; }
.dato { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.dato-testa { display: grid; gap: var(--space-xs); }
.dato-n { font: 600 clamp(2.75rem, 3vw + 1.2rem, 4.25rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; color: var(--color-ink); }
.dato--con .dato-n { color: var(--color-firma); }
.dato-cosa { margin: 0; max-width: 46ch; color: var(--color-ink-2); }
.dato-fonte { margin: 0; max-width: 52ch; font-size: var(--text-xs); line-height: 1.5; color: var(--color-muted); }
.dato-fonte a { color: var(--color-ink-2); text-underline-offset: 3px; }
.dato-fonte a:hover { color: var(--color-ink); }
.dato-fonte a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dato-vis { min-width: 0; }
.vis-barre { display: grid; gap: var(--space-sm); }
.vis-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "et n" "barra barra"; align-items: baseline; gap: var(--space-2xs) var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.vis-riga .vis-et { grid-area: et; }
.vis-riga b { grid-area: n; }
.vis-riga .vis-barra { grid-area: barra; }
.vis-riga b { color: var(--color-ink-2); font: 600 var(--text-sm)/1 var(--font-display); white-space: nowrap; }
.vis-barra { position: relative; height: 12px; border-radius: var(--space-3xs); background: var(--color-paper-3); overflow: hidden; }
.vis-barra i { position: absolute; inset: 0; background: var(--color-ink-2); transform-origin: 0 50%; transform: scaleX(var(--w, 1)); }
.vis-barra i.forte { background: var(--color-ink); }
.dato--con .vis-barra i.forte { background: var(--color-firma); }
.w-64 { --w: 0.64; }
.w-47 { --w: 0.47; }
.w-455 { --w: 0.91; }
.w-403 { --w: 0.806; }
.w-cart { --w: 0.0426; }
.w-88 { --w: 0.44; }
.w-164 { --w: 0.82; }
.vis-barra i.w-prev { --w: 1; background: linear-gradient(90deg, var(--color-ink-2) 59.52%, transparent 59.52%), repeating-linear-gradient(45deg, var(--color-ink-2) 0 2px, transparent 2px 5px); }
.vis-persone { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); }
.vis-persone .p { width: 48px; height: 48px; fill: none; stroke: var(--color-ink); stroke-width: 1.6; }
.vis-persone .p--manca { stroke: var(--color-muted); stroke-dasharray: 3 3; }
.vis-mesi-riga { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3xs); }
.vis-mesi-riga i { height: 14px; border-radius: var(--space-3xs); background: var(--color-paper-3); }
.vis-mesi-riga i.pieno { background: var(--color-ink-2); }
.vis-mesi-riga i.quinto { background: linear-gradient(90deg, var(--color-ink-2) 20%, var(--color-paper-3) 20%); }
.vis-mesi .vis-et { display: flex; justify-content: space-between; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.vis-garanzie { display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-md); border: 1px solid var(--color-firma); border-radius: var(--radius-ui); list-style: none; }
.vis-garanzie li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); }
.vis-garanzie .ico { margin-top: var(--space-3xs); color: var(--color-firma); }

/* il silenzio: una riga, a sinistra, e spazio intorno */
.silenzio { padding-block: var(--space-4xl); background: var(--color-paper); }
.silenzio-riga { max-width: 21ch; font: var(--display-weight) var(--text-section)/1.04 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }

/* ---------- C · la corsa: come funziona, da sinistra a destra ----------
   Senza script e col movimento ridotto è una fila di sette schede che scorre di lato con il dito o la rotella.
   Con lo script (.orizzontale) il palco si ferma e lo scorrimento verticale porta la fila da destra a sinistra. */
.corsa { position: relative; background: var(--color-paper); }
.corsa-palco { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.orizzontale .corsa-palco { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: clip; }
.corsa-testa { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: var(--gap-columns); width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-md) var(--gutter) var(--space-xs); }
.corsa-titolo { max-width: 26ch; font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.01em; }
.corsa-nota { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.corsa-passi { --avanzamento: 0; position: relative; isolation: isolate; }
.corsa-passi ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.corsa-passi a { display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-3xs) var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); text-decoration: none; text-align: center; transition: color var(--dur-short) var(--ease-out); }
.corsa-passi a:hover { color: var(--color-ink); }
.corsa-passi a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-ui-s); }
.passo-n { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--color-rule); border-radius: 50%; background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-xs); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.corsa-passi a.is-fatto .passo-n { border-color: var(--color-ink-2); color: var(--color-ink); }
.corsa-passi a[aria-current="step"] { color: var(--color-ink); }
.corsa-passi a[aria-current="step"] .passo-n { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.corsa-binario { position: absolute; top: 18px; left: calc(100% / 14); right: calc(100% / 14); z-index: -1; height: 1px; background: var(--color-rule); }
.corsa-binario i { display: block; height: 100%; background: var(--color-ink-2); transform-origin: 0 50%; transform: scaleX(var(--avanzamento)); }
.corsa-vista { position: relative; min-width: 0; min-height: 0; overflow: clip; }
.orizzontale .corsa-vista { overflow: clip; }
.corsa-foglio { position: absolute; top: 0; bottom: 0; left: 0; width: 320vw; pointer-events: none; background-image: linear-gradient(var(--color-griglia) 1px, transparent 1px), linear-gradient(90deg, var(--color-griglia) 1px, transparent 1px); background-size: 48px 48px; }
.corsa-pista { position: relative; display: flex; height: 100%; }
html:not(.orizzontale) .corsa-pista { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
html:not(.orizzontale) .passo { flex: 0 0 100%; scroll-snap-align: start; }
.orizzontale .corsa-pista { width: max-content; will-change: transform; }
.orizzontale .passo { flex: 0 0 var(--larga, 100vw); }
.passo { --x: 0; --ax: 0; --v: 1; display: grid; align-items: center; min-width: 0; padding-block: var(--space-md); opacity: var(--v); }
.passo-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: center; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.passo-testo { transform: translate3d(calc(var(--x) * -40px), 0, 0); }
.passo-demo { min-width: 0; transform: translate3d(calc(var(--x) * 110px), 0, 0) scale(calc(1 - var(--ax, 0) * 0.06)); transform-origin: 50% 60%; }
.passo-testo h3 { max-width: 13ch; font-size: var(--text-passo); line-height: 1.02; letter-spacing: var(--tracking-display); }
.passo-testo > p { margin-top: var(--space-md); max-width: 38ch; font-size: var(--text-md); color: var(--color-ink-2); }
.passo-testo > .passo-da { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.passo-da .ico { color: var(--color-accent); }
.passo-da span:last-child { color: var(--color-ink); font-weight: 600; }
.passo-testo > .passo-prova { display: flex; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink); }
.passo-prova .ico { margin-top: var(--space-3xs); color: var(--color-accent); }

/* il corriere: nel passaggio porta il risultato di un passo dentro il successivo (lo muove corsa.js) */
.corriere { position: absolute; top: 0; left: 0; z-index: var(--z-raised); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-md); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-xs)/1 var(--font-outlier); white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 0 0 4px var(--color-alone), 0 18px 36px var(--color-ombra); will-change: transform, opacity; }
.corriere .ico { color: var(--color-accent); }
.corriere .st { width: 14px; height: 14px; }
html:not(.orizzontale) .corriere { display: none; }
.binario-corriere { position: absolute; inset: 0; z-index: var(--z-raised); width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; }
.bc-traccia { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: 0.45; }
.bc-fatto { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bc-anello { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0; }
html:not(.orizzontale) .binario-corriere { display: none; }

/* il dossier: quello che la richiesta si porta dietro da un passo all'altro */
.dossier { position: relative; z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-md); width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-sm) var(--gutter) var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); }
.dossier-titolo { color: var(--color-muted); white-space: nowrap; }
.dossier-lista { display: flex; gap: var(--space-xs); min-width: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.dossier-lista li { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 30px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); white-space: nowrap; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.dossier-lista b { color: var(--color-ink); font-weight: 500; }
.dossier-lista .ico { width: 14px; height: 14px; color: var(--color-muted); }
.dossier-lista .st { width: 12px; height: 12px; }
.dossier-lista li.is-mosso { border-color: var(--color-firma); }
.js.orizzontale .dossier-lista li:not(.is-raggiunto) { opacity: 0; transform: translateY(8px); }

/* le parole evidenziate e le loro destinazioni: si accendono insieme */
mark { background: transparent; color: inherit; border-radius: 3px; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.posta mark.is-preso, html:not(.js) .posta mark { background: var(--color-evid); box-shadow: inset 0 -2px 0 var(--color-accent); }
mark.is-evid, .posta mark.is-evid { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
[data-ent-voce].is-evid { background: var(--color-evid); }

/* 1 · arriva: la mail, e cosa ne prende Cartiglio */
.demo-arriva { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.posta-corpo { display: grid; gap: var(--space-sm); padding: var(--space-md); }
.posta-da { display: flex; align-items: center; gap: var(--space-sm); }
.posta-chi { display: grid; line-height: 1.3; }
.posta-chi span { color: var(--color-muted); font-size: var(--text-app); }
.posta-oggetto { font-size: var(--text-md); font-weight: 600; }
.posta-testo { color: var(--color-ink-2); line-height: 1.6; }
.allegato { display: inline-flex; align-items: center; gap: var(--space-xs); justify-self: start; min-height: 40px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-ui-s); background: var(--color-paper-2); transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.allegato .ico { color: var(--color-error); }
.allegato-peso { color: var(--color-muted); font-size: var(--text-app); }
.allegato.is-preso, html:not(.js) .allegato { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-evid); }
.allegato.is-evid { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent); }
.presi-lista { margin: 0; padding: var(--space-xs) var(--space-md); }
.presi-lista > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) var(--space-2xs); border-bottom: 1px solid var(--color-rule); border-radius: var(--radius-ui-s); transition: background-color var(--dur-short) var(--ease-out), opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.presi-lista > div:last-child { border-bottom: 0; }
.presi-lista dt { color: var(--color-muted); }
.presi-lista dd { margin: 0; color: var(--color-ink); font-weight: 600; border-radius: var(--space-3xs); transition: color var(--dur-long) var(--ease-out), background-color var(--dur-long) var(--ease-out); }
.js .presi-lista > div:not(.is-preso) dd { color: transparent; background: var(--color-paper-3); }
.js .presi-lista > div.is-preso { background: transparent; }
.avanza { height: 3px; margin: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.avanza i { display: block; height: 100%; background: var(--color-accent); transform-origin: 0 50%; }
.presi-nota { padding: var(--space-sm) var(--space-md) var(--space-md); color: var(--color-muted); font-size: var(--text-app); }

/* 2 · legge: il disegno con la scansione, e la lista dei campi */
.demo-legge { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.viewer--grande { border-radius: var(--radius-ui); }
.viewer--grande .viewer-barra { min-height: 44px; flex-wrap: nowrap; }
.viewer--grande .viewer-file { font-size: var(--text-mini); }
.viewer--grande .viewer-barra .ui-btn { min-height: 36px; padding: 0 var(--space-xs); font-size: var(--text-mini); }
.viewer-tela { padding: var(--space-sm); }
.viewer-tela .cad { max-height: min(46svh, 420px); margin-inline: auto; }
.livelli { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0 0 0 auto; padding: 0; border: 0; }
.livelli label { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 28px; padding: 0 var(--space-xs); font-size: var(--text-mini); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.livelli label:hover { background: var(--color-paper); }
.livelli input { width: 13px; height: 13px; margin: 0; accent-color: var(--color-accent); }
.livelli input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.scansione rect { fill: var(--color-accent); opacity: 0; }
.campi { display: grid; align-content: start; }
.filtri { margin: var(--space-sm) var(--space-sm) var(--space-2xs); }
.campi-lista { margin: 0; padding: var(--space-xs); list-style: none; }
.campo { display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-areas: "st nome" "st valore"; column-gap: var(--space-xs); row-gap: 1px; align-items: center; padding: var(--space-xs); border-radius: var(--radius-ui-s); cursor: default; transition: background-color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.campo .st { grid-area: st; }
.campo .campo-nome { grid-area: nome; color: var(--color-ink-2); font-size: var(--text-app); }
.campo b { grid-area: valore; font-weight: 500; }
.campo i { grid-column: 2; font-style: normal; font-size: var(--text-mini); color: var(--color-muted); }
.campo:hover, .campo.is-evid { background: var(--color-evid); }
.campo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
[data-filtro="dubbio"] .campo:not([data-stato="dubbio"]), [data-filtro="vuoto"] .campo:not([data-stato="vuoto"]) { opacity: 0.3; }
[data-filtro="dubbio"] .bx:not([data-stato="dubbio"]), [data-filtro="vuoto"] .bx:not([data-stato="vuoto"]) { opacity: 0.15; }

/* 3 · ti chiede: le due lenti e le due domande */
.demo-chiede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--space-lg); align-items: start; }
.lenti { display: grid; gap: var(--space-md); }
.lente { margin: 0; padding: var(--space-xs); overflow: hidden; }
.lente .cad { overflow: hidden; border-radius: var(--radius-ui-s); background-color: var(--color-paper); background-image: radial-gradient(var(--color-rule) 0.8px, transparent 0.8px); background-size: 10px 10px; }
.lente figcaption { padding: var(--space-xs) var(--space-2xs) var(--space-2xs); color: var(--color-muted); font-size: var(--text-app); }
.domande { display: grid; gap: var(--space-md); }
.domanda { display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-md); }
.domanda-q { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.domanda-q .st { margin-top: var(--space-3xs); }
.domanda .segmento { justify-self: start; max-width: 100%; }
.domanda-effetto { color: var(--color-ink-2); font-size: var(--text-app); }
.domanda.is-decisa { border-color: var(--color-accent); }

/* 4 · i tuoi costi: il listino e la pila del prezzo */
.demo-costi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-lg); align-items: start; }
.listino-corpo { display: grid; gap: var(--space-lg); padding: var(--space-md); }
.fissi { margin: 0; border-top: 1px solid var(--color-rule); }
.fissi > div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.fissi dt { color: var(--color-ink-2); }
.fissi dd { margin: 0; }
.pila { position: relative; height: 34px; margin: var(--space-md); border-radius: var(--radius-ui-s); background: var(--color-paper-2); overflow: hidden; }
.seg { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-origin: 0 50%; transform: translateX(var(--da, 0%)) scaleX(var(--w, 0)); transition: transform 700ms var(--ease-out); }
.seg--materiale, .chiave--materiale { background: var(--seg-1); }
.seg--attrezzaggio, .chiave--attrezzaggio { background: var(--seg-2); }
.seg--ciclo, .chiave--ciclo { background: var(--seg-3); }
.seg--bonifica, .chiave--bonifica { background: var(--seg-4); }
.seg--ricarico, .chiave--ricarico { background: var(--color-accent); }
.chiave { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-xs); border-radius: 2px; vertical-align: 1px; }
.distinta { width: calc(100% - 2 * var(--space-md)); margin: 0 var(--space-md) var(--space-md); border-collapse: collapse; font-size: var(--text-ui); }
.distinta th, .distinta td { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; vertical-align: baseline; }
.distinta th { padding-right: var(--space-sm); color: var(--color-ink-2); }
.distinta th .cifre { margin-left: var(--space-2xs); color: var(--color-ink); }
.distinta td { text-align: right; color: var(--color-ink); white-space: nowrap; }
.distinta tfoot th { color: var(--color-ink); font-weight: 600; }
.distinta tr.totale th, .distinta tr.totale td { border-top: 1px solid var(--color-ink-2); }
.distinta tr.totale td { font-size: var(--text-lg); font-weight: 500; }
.distinta tfoot tr:last-child th, .distinta tfoot tr:last-child td { border-bottom: 0; }
.intervallo { display: block; font-weight: 400; font-size: var(--text-app); color: var(--color-muted); }
.riga-stato { margin-left: var(--space-2xs); padding: 0 var(--space-xs); border: 1px dashed var(--color-ink-2); border-radius: var(--radius-pill); font-size: var(--text-mini); color: var(--color-ink-2); }
.riga-stato.is-tuo { border-style: solid; border-color: var(--color-accent); color: var(--color-accent); }
.is-mosso { color: var(--color-accent); transition: color var(--dur-short) var(--ease-out); }

/* 5 · il prezzo: la quota con la sua tolleranza. --p (0-1) la disegna mentre il passo entra; senza script vale 1 */
.demo-prezzo { --p: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-lg); align-items: center; }
.quota-figura { margin: 0; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper); }
.quota-svg { display: block; width: 100%; height: auto; max-height: min(52svh, 520px); margin-inline: auto; overflow: visible; }
.q-asse { fill: none; stroke: var(--color-muted); stroke-width: 0.8; stroke-dasharray: 12 2.5 1.5 2.5; opacity: clamp(0, var(--p) / 0.2, 1); }
.q-pezzo { fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--p) / 0.32, 1)); }
.q-richiamo { fill: none; stroke: var(--color-ink-2); stroke-width: 0.9; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 0.28) / 0.18, 1)); }
.q-quota { fill: none; stroke: var(--color-ink); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 0.42) / 0.18, 1)); }
.q-frecce { fill: var(--color-ink); opacity: clamp(0, (var(--p) - 0.56) / 0.06, 1); }
.q-scritta { opacity: clamp(0, (var(--p) - 0.6) / 0.12, 1); transform: translateY(calc((1 - clamp(0, (var(--p) - 0.6) / 0.12, 1)) * 10px)); }
.q-valore { font: 500 40px var(--font-outlier); fill: var(--color-ink); transition: fill var(--dur-long) var(--ease-out); }
.q-tolleranza { font: 400 15px var(--font-outlier); fill: var(--color-ink-2); transition: opacity var(--dur-long) var(--ease-out); }
.q-tol { transform-box: view-box; transform-origin: 372px 396px; transform: scaleX(clamp(0, (var(--p) - 0.72) / 0.14, 1)); }
.q-tol-chiude { transform-box: view-box; transform-origin: 372px 396px; transition: transform 700ms var(--ease-in-out); }
.q-tol-banda { fill: var(--color-firma); fill-opacity: 0.22; stroke: var(--color-firma); stroke-width: 1; }
.q-firma { font: 400 13px var(--font-outlier); fill: var(--color-muted); opacity: clamp(0, (var(--p) - 0.8) / 0.1, 1); transition: fill var(--dur-long) var(--ease-out); }
.is-firmata .q-tol-chiude { transform: scaleX(0); }
.is-firmata .q-valore, .is-firmata .q-firma { fill: var(--color-firma); }
.is-firmata .q-tolleranza { opacity: 0; }
.tempo-corpo { display: grid; gap: var(--space-md); padding: var(--space-md); }
.estremi-prezzo { margin: 0; border-top: 1px solid var(--color-rule); }
.estremi-prezzo > div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.estremi-prezzo dt { color: var(--color-ink-2); }
.estremi-prezzo dd { margin: 0; }
.estremi-lotto dd { font-weight: 600; }
.tempo-nota { color: var(--color-muted); font-size: var(--text-app); }

/* 6 · correggi: la bozza come un foglio, e il registro delle modifiche */
.demo-correggi { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.doc { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-ui-s); box-shadow: 0 1px 2px var(--color-ombra-chiara), 0 22px 44px var(--color-ombra); font-size: var(--text-ui); }
.doc-testa { display: grid; gap: var(--space-2xs); padding-bottom: var(--space-sm); border-bottom: 1.5px solid var(--color-ink); }
.doc-officina { display: grid; gap: var(--space-3xs); }
.doc-et { color: var(--color-muted); font-size: var(--text-app); }
.doc-officina input { min-height: 38px; padding: 0 var(--space-xs); border: 1px dashed var(--color-ink-2); border-radius: var(--radius-ui-s); background: var(--color-paper-2); color: var(--color-ink); font: 600 var(--text-lg)/1 var(--font-display); transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.doc-officina input:hover { background: var(--color-paper-3); }
.doc-officina input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-style: solid; }
.doc-titolo { font-size: var(--text-md); font-weight: 600; }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); color: var(--color-muted); }
.doc-righe { width: 100%; border-collapse: collapse; }
.doc-righe th, .doc-righe td { padding: var(--space-xs) var(--space-2xs); border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; vertical-align: middle; }
.doc-righe thead th { color: var(--color-muted); font-size: var(--text-app); }
.doc-righe td { text-align: right; white-space: nowrap; }
.doc-desc { display: block; font-weight: 600; }
.doc-sotto { display: block; color: var(--color-muted); font-size: var(--text-app); }
.doc-prezzo { width: 6.5rem; min-height: 40px; padding: 0 var(--space-xs); border: 1px solid var(--color-accent); border-radius: var(--radius-ui-s); background: var(--color-evid); color: var(--color-ink); font-size: var(--text-sm); text-align: right; transition: border-color var(--dur-short) var(--ease-out); }
.doc-prezzo:hover { border-color: var(--color-accent-2); }
.doc-prezzo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.doc-prezzo[aria-invalid="true"] { border-color: var(--color-error); }
.doc-aiuto { color: var(--color-ink-2); font-size: var(--text-app); }
.doc-aiuto.is-errore { color: var(--color-error); }
.doc-aiuto .cifre { font-family: inherit; font-weight: 600; color: var(--color-ink); }
.doc-segnalati { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.doc-segnalati li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-height: 36px; padding: var(--space-2xs) var(--space-xs); border: 1px dashed var(--color-ink-2); border-radius: var(--radius-ui-s); color: var(--color-ink-2); }
.doc-segnalati li[hidden] { display: none; }
.doc-risolvi { display: inline-flex; gap: var(--space-2xs); margin-left: auto; }
.doc-risolvi .ui-btn { min-height: 36px; font-size: var(--text-app); }
.doc-nota { display: grid; gap: var(--space-3xs); }
.doc-nota textarea { min-height: 52px; padding: var(--space-xs); border: 1px solid var(--color-muted); border-radius: var(--radius-ui-s); background: var(--color-paper-2); color: var(--color-ink); font: inherit; resize: none; transition: border-color var(--dur-short) var(--ease-out); }
.doc-nota textarea:hover { border-color: var(--color-ink-2); }
.doc-nota textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.modifiche-lista { display: grid; gap: var(--space-2xs); margin: 0; padding: var(--space-sm) var(--space-md) var(--space-md); list-style: none; }
.modifiche-lista li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-xs); align-items: start; color: var(--color-ink); }
.modifiche-lista li .st { margin-top: var(--space-3xs); }
.modifiche-lista .modifiche-vuota { display: block; color: var(--color-muted); }

/* 7 · firmi: la risposta dalla tua casella */
.demo-firma { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.composer { transition: transform 700ms var(--ease-in), opacity 700ms var(--ease-in); }
.composer-campi { margin: 0; padding: 0 var(--space-md); }
.composer-campi > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.composer-campi dt { color: var(--color-muted); }
.composer-campi dd { margin: 0; }
.composer-corpo { display: grid; gap: var(--space-xs); padding: var(--space-md); color: var(--color-ink); line-height: 1.6; }
.composer-allegato { display: flex; align-items: center; gap: var(--space-xs); margin: 0 var(--space-md); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-ui-s); background: var(--color-paper-2); }
.composer-allegato .ico { color: var(--color-error); }
.timbro { margin-left: auto; padding: 0 var(--space-xs); border: 1.5px dashed var(--color-ink-2); border-radius: var(--radius-ui-s); color: var(--color-ink-2); font-size: var(--text-app); font-weight: 600; transform: rotate(-2deg); transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 400ms var(--ease-out); }
.is-firmata .timbro { border-style: solid; border-color: var(--color-accent); color: var(--color-accent); transform: rotate(-4deg) scale(1.06); }
.composer-azioni { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-md) var(--space-md) var(--space-xs); }
.composer-azioni .btn { min-height: 44px; padding: 0 var(--space-md); }
.composer-azioni .ico { width: 15px; height: 15px; }
.composer .esito { min-height: 1lh; padding: 0 var(--space-md) var(--space-md); color: var(--color-ink-2); font-size: var(--text-app); }
.fine { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper-2); }
.fine-mosse { font-size: var(--text-lg); color: var(--color-ink); }
.fine-titolo { font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; }
.fine-lista { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.fine-lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); }
.fine-lista .ico { margin-top: var(--space-2xs); color: var(--color-firma); }
.fine-azioni { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fine-azioni .ui-btn { min-height: 48px; padding: 0 var(--space-md); font-size: var(--text-sm); }

/* ---------- D · officine fondatrici ---------- */
.fondatrici { padding-block: var(--section-gap); }
.fond-griglia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.fond-testo h2 { font-size: var(--text-section); max-width: 15ch; }
.fond-testo > p { margin-top: var(--space-md); max-width: 46ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.patto { margin: var(--space-xl) 0 var(--space-md); border-bottom: 1px solid var(--color-rule); }
.patto > div { position: relative; display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); }
.patto > div::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--color-rule); transform-origin: 0 50%; }
.patto dt { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.patto dd { margin: 0; font-size: var(--text-lg); }
.fond-testo > .patto-nota { margin: 0 0 var(--space-xl); max-width: 46ch; font-size: var(--text-sm); color: var(--color-muted); }
.posti-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-ink-2); }
.posti-lista li { display: grid; place-items: center; align-content: center; gap: var(--space-xs); min-height: 200px; border-left: 1px solid var(--color-ink-2); font-size: var(--text-xs); color: var(--color-muted); }
.posti-lista li:first-child { border-left: 0; }
.posti-lista .cifre { font-size: var(--text-3xl); color: var(--color-ink); }
.posto-stato { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.posti-conta { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-ink-2); }

/* ---------- E · dove stanno i tuoi disegni ---------- */
.riservo { position: relative; padding-block: var(--section-gap); background: var(--color-paper-2); overflow: clip; }
.riservo-fondo { position: absolute; right: calc(-1 * var(--space-3xl)); bottom: calc(-1 * var(--space-4xl)); width: min(1040px, 74%); aspect-ratio: 640 / 420; pointer-events: none; }
.riservo-disegno { position: absolute; inset: 0; opacity: 0.13; clip-path: inset(0 0 0 0); }
.riservo[data-fase="prima"] .riservo-disegno { opacity: 0.05; }
.riservo[data-fase="dopo"] .riservo-disegno { clip-path: inset(0 0 0 100%); }
.riservo-busta { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-ink-2); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.35; }
.riservo[data-fase="prima"] .riservo-busta { stroke-dashoffset: 0; }
.riservo-occhio { position: absolute; display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-xs); border: 1px solid var(--color-ink-2); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 600 var(--text-xs)/1.7 var(--font-outlier); }
.js .riservo:not([data-fase="durante"]) .riservo-occhio { opacity: 0; transform: translateY(8px); }
.riservo-occhio--1 { left: 12%; top: 60%; }
.riservo-occhio--2 { left: 44%; top: 68%; }
.riservo-occhio--3 { left: 74%; top: 62%; }
.riservo-corpo { position: relative; z-index: var(--z-base); display: grid; gap: var(--space-2xl); }
.riservo-testo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; }
.riservo h2 { font-size: var(--text-section); max-width: 12ch; }
.riservo-testo p { max-width: 46ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.riservo-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.fase { position: relative; display: grid; align-content: start; gap: var(--space-xs); min-width: 0; padding: var(--space-lg) var(--space-lg) var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-ui); background: color-mix(in oklab, var(--color-paper) 86%, transparent); backdrop-filter: blur(3px); color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.fase:hover { border-color: var(--color-ink-2); }
.fase:active { transform: translateY(1px); }
.fase:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.fase[aria-pressed="true"] { border-color: var(--color-ink-2); background: color-mix(in oklab, var(--color-paper-3) 92%, transparent); }
.fase-scena { display: block; width: 100%; height: auto; max-height: 140px; margin-bottom: var(--space-md); overflow: visible; }
.fase-quando { font: 500 var(--text-xs)/1.4 var(--font-outlier); color: var(--color-ink-2); }
.fase-cosa { max-width: 22ch; font-size: var(--text-title); font-weight: 600; line-height: 1.25; }
.fase-dettaglio { color: var(--color-ink-2); }
.fase-tempo { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-rule); }
.fase-tempo i { display: block; height: 100%; background: var(--color-ink-2); transform-origin: 0 50%; transform: scaleX(0); }
.fase[aria-pressed="true"] .fase-tempo i { transform: scaleX(1); }
.fase-scena path, .fase-scena rect, .fase-scena circle { fill: none; stroke: var(--color-ink-2); stroke-width: 1.4; }
.fase-scena text { fill: var(--color-ink); stroke: none; font: 600 10px var(--font-body); }
.sc-foglio, .sc-archivio { fill: var(--color-paper-2) !important; }
.sc-righe { stroke: var(--color-muted) !important; }
.fase-scena .sc-firma { stroke: var(--color-firma); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fase[aria-pressed="true"] .sc-firma { stroke-dashoffset: 0; }
.sc-timbro { transform: rotate(-6deg); transform-box: fill-box; transform-origin: center; }
.js .fase:not([aria-pressed="true"]) .sc-timbro { opacity: 0; transform: rotate(-6deg) scale(1.3); }
.sc-timbro rect { stroke: var(--color-firma) !important; }
.fase-scena .sc-timbro text { fill: var(--color-firma); font: 600 10px var(--font-outlier); }
.fase-scena .sc-filo { stroke: var(--color-firma); stroke-dasharray: 1; stroke-dashoffset: 1; }
.fase[aria-pressed="true"] .sc-filo { stroke-dashoffset: 0; }
.sc-chi circle { fill: var(--color-paper-3) !important; }
.fase-scena .sc-ue { fill: var(--color-ink-2); font: 500 9px var(--font-outlier); }
.sc-lucchetto rect, .sc-lucchetto path { stroke: var(--color-ink) !important; }
.sc-fuori { opacity: 0.3; }
.fase-scena .sc-pezzo path, .fase-scena .sc-pezzo circle { stroke: var(--color-ink); }
.sc-pezzo { clip-path: inset(0 0 0 0); }
.fase[aria-pressed="true"] .sc-pezzo { clip-path: inset(0 0 0 100%); }
.fase-scena .sc-gomma { fill: var(--color-firma); stroke: none; opacity: 0; }
.fase-scena .sc-fatto { fill: var(--color-firma); font: 600 11px var(--font-outlier); }
.js .fase:not([aria-pressed="true"]) .sc-fatto { opacity: 0; }

/* ---------- F · la chiusura: il cartiglio del foglio, con il modulo nella casella Approvato ---------- */
.chiusura { padding-block: var(--section-gap) var(--space-3xl); background: var(--color-paper); }
.chiusura-testa { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.chiusura-titolo { max-width: 12ch; font-size: var(--text-display-s); line-height: 1; }
.chiusura-lead { max-width: 46ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.cartiglio-finale { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; border: 1.5px solid var(--color-ink-2); background: var(--color-ink-2); }
.cf { --n: 0; display: grid; align-content: start; gap: var(--space-2xs); grid-column: span 2; min-width: 0; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); }
.cartiglio-finale > .cf:nth-child(3) { grid-column: span 1; }
.cf--denom { grid-column: span 5; }
.cf--chi { grid-column: span 4; }
.cf--controllato { grid-column: span 3; }
.cf--approvato { grid-column: span 5; grid-row: span 2; }
.cf--vista { grid-column: span 4; }
.cf--rev, .cf--materiale { grid-column: span 3; }
.cf--firma { grid-column: span 5; }
.cf--chi, .cf--controllato, .cf--approvato { gap: var(--space-sm); padding: var(--space-lg); }
.cf .et { font-size: var(--text-xs); color: var(--color-muted); }
.cf .v { font: 600 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); }
.cf--denom .v, .cf--chi .v, .cf--controllato .v { font-size: var(--text-xl); letter-spacing: -0.02em; }
.cf--approvato > .et, .cf--firma > .et { color: var(--color-firma); font-weight: 600; }
.chi-riga { display: flex; align-items: center; gap: var(--space-md); }
.chi-ruolo { color: var(--color-ink-2); font-size: var(--text-sm); }
.squadra { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.squadra li { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.squadra b { margin-right: var(--space-2xs); color: var(--color-ink); font-weight: 600; }
.cf-disegno { display: block; width: 100%; height: auto; max-height: 140px; }
.cf-disegno path, .cf-disegno circle { fill: none; stroke: var(--color-ink); stroke-width: 1.2; }
.cf-disegno .cf-asse path, .cf-disegno .cf-asse circle, .cf-disegno path.cf-asse { stroke: var(--color-muted); stroke-width: 0.6; stroke-dasharray: 10 2 1.5 2; }
.cf-revisioni { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.cf-revisioni th, .cf-revisioni td { padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; color: var(--color-ink-2); vertical-align: top; }
.cf-revisioni th { color: var(--color-ink); }
.cf-revisioni tr:last-child th, .cf-revisioni tr:last-child td { border-bottom: 0; }
.firma-portata { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.firma-portata.is-firmata { color: var(--color-firma); font-weight: 600; }
.chi-foto { width: 72px; height: 72px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-card); }
.chi-tel a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-xl); text-decoration: none; white-space: nowrap; }
.chi-tel .ico { width: 20px; height: 20px; color: var(--color-firma); }
.chi-tel .cifre { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.chi-tel a:hover { color: var(--color-firma); }
.chi-mail { font-size: var(--text-md); }
.cf--chi a:focus-visible, .modulo a:focus-visible, .piede a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.modulo { position: relative; display: grid; gap: var(--space-md); }
.modulo h3 { font-size: var(--text-title); max-width: 22ch; }
.campo-modulo { display: grid; gap: var(--space-2xs); }
.campo-modulo label { font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); }
.campo-modulo input { min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out); }
.campo-modulo input:hover { background: var(--color-paper-3); }
.campo-modulo input:focus-visible { outline-color: var(--color-focus); }
.campo-modulo input[aria-invalid="true"] { border-color: var(--color-error); }
.campo-modulo input:disabled { opacity: 0.55; cursor: not-allowed; }
.aiuto { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }
.campo-trappola { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.modulo-invio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.modulo-privacy { font-size: var(--text-sm); color: var(--color-ink-2); }
.modulo-esito { min-height: 1lh; font-size: var(--text-md); }
.modulo-esito.is-errore { color: var(--color-error); }

.piede { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.piede-righe { display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.piede-marchio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.piede-marchio img { width: 101px; height: 20px; }

/* ---------- la pagina «Come iniziare»: l’offerta, i conti, lo scambio, i cinque passi, il modulo ---------- */
.ci-testa { padding-block: var(--space-3xl) var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.ci-testa .posti-lista li { min-height: 320px; }
.ci-testa-griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.ci-testa h1 { max-width: 13ch; font-size: clamp(2.75rem, 4.2vw + 0.75rem, 5.25rem); line-height: 0.98; }
.ci-testa .lead { margin-top: var(--space-lg); max-width: 46ch; font-size: var(--text-lead); }
.ci-conti, .ci-scambio, .ci-passi, .ci-chiusura { padding-block: var(--section-gap); }
.ci-conti, .ci-passi { background: var(--color-paper-2); }
.ci-conti { padding-top: var(--space-3xl); }
.ci-conti h2, .ci-scambio h2, .ci-passi h2, .ci-chi h2 { max-width: 16ch; font-size: var(--text-section); }
.ci-conti-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-md); margin-top: var(--space-2xl); }
.ci-prezzo { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper); }
.ci-prezzo--tuo { border-color: var(--color-firma); }
.ci-prezzo-chi { font-weight: 600; color: var(--color-ink); }
.ci-prezzo--tuo .ci-prezzo-chi { color: var(--color-firma); }
.ci-prezzo dl { margin: var(--space-md) 0 0; }
.ci-prezzo dl > div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.ci-prezzo dt { color: var(--color-ink-2); }
.ci-prezzo dd { margin: 0; color: var(--color-ink); }
.ci-prezzo dl > .ci-prezzo-anno { border-bottom: 0; }
.ci-prezzo-anno dt { color: var(--color-ink); font-weight: 600; }
.ci-prezzo-anno dd { font-size: var(--text-xl); }
.ci-differenza { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); }
.ci-differenza-n { font: 600 clamp(2.75rem, 3vw + 1.2rem, 4.25rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; color: var(--color-firma); }
.ci-differenza > p:nth-child(2) { max-width: 30ch; font-size: var(--text-lead); color: var(--color-ink); }
.ci-nota { max-width: 46ch; font-size: var(--text-sm); color: var(--color-muted); }
.ci-scambio-griglia, .ci-chiusura-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.ci-lista { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.ci-lista li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); }
.ci-lista .ico { width: 20px; height: 20px; margin-top: var(--space-3xs); color: var(--color-firma); }
.ci-lista b { color: var(--color-ink); font-weight: 600; }
.ci-percorso { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.ci-percorso::before { content: ""; position: absolute; top: 20px; left: 20px; right: calc((100% - 4 * var(--space-lg)) / 5 - 20px); height: 1px; background: var(--color-ink-2); transform-origin: 0 50%; }
.ci-percorso li { position: relative; display: grid; align-content: start; gap: var(--space-xs); color: var(--color-ink-2); }
.ci-n { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-sm); border: 1px solid var(--color-ink-2); border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink); }
.ci-percorso b { color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.ci-chi { display: grid; gap: var(--space-md); }
.ci-chi-nome { font: 600 var(--text-xl)/1.2 var(--font-display); color: var(--color-ink); }
.ci-modulo { padding: var(--space-xl); border: 1.5px solid var(--color-ink-2); background: var(--color-paper-2); }

/* ---------- la privacy: un documento da leggere ---------- */
.documento { padding-block: var(--space-3xl) var(--section-gap); }
.documento-corpo { display: grid; gap: var(--space-md); max-width: calc(68ch + 2 * var(--gutter)); }
.documento h1 { max-width: 18ch; font-size: var(--text-display-s); line-height: 1; }
.documento h2 { margin-top: var(--space-lg); font-size: var(--text-title); }
.documento p { max-width: 60ch; color: var(--color-ink-2); }
.documento .lead { font-size: var(--text-lead); }
.documento a { text-underline-offset: 3px; }
.documento a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.documento-torna { margin-top: var(--space-xl); }

/* ---------- i fili dei fogli: ogni sezione ha la sua linea in alto, e una croce di registro dove incontra la cornice ---------- */
[data-sez] { position: relative; }
[data-sez]::before { content: ""; position: absolute; inset: 0 0 auto; z-index: var(--z-raised); height: 1px; background: var(--color-rule); transform-origin: 0 50%; pointer-events: none; }
[data-sez]::after { content: ""; position: absolute; top: -5px; left: 0; right: 0; z-index: var(--z-raised); max-width: calc(var(--container) + 10px); height: 11px; margin-inline: auto; pointer-events: none; background:
  linear-gradient(var(--color-ink-2), var(--color-ink-2)) 0 5px / 11px 1px, linear-gradient(var(--color-ink-2), var(--color-ink-2)) 5px 0 / 1px 11px,
  linear-gradient(var(--color-ink-2), var(--color-ink-2)) 100% 5px / 11px 1px, linear-gradient(var(--color-ink-2), var(--color-ink-2)) calc(100% - 5px) 0 / 1px 11px;
  background-repeat: no-repeat; }

/* ---------- il movimento: le linee si tirano, i riquadri salgono, il testo resta fermo. Solo con lo script, mai col movimento ridotto ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-sez]::before, .patto > div::before { transition: transform var(--dur-linea) var(--ease-in-out); }
  .patto > div:nth-child(2)::before { transition-delay: 140ms; }
  .patto > div:nth-child(3)::before { transition-delay: 280ms; }
  .js.entra [data-sez]:not(.is-visto)::before, .js.entra .patto:not(.is-visto) > div::before { transform: scaleX(0); }
  [data-sez]::after { transition: opacity 600ms var(--ease-out) 800ms; }
  .js.entra [data-sez]:not(.is-visto)::after { opacity: 0; }

  .posti-lista li, .cartiglio-finale .cf, .riservo-tre .fase, .sera-voce { transition: opacity var(--dur-entra) var(--ease-out), transform var(--dur-entra) var(--ease-out); }
  .posti-lista li:nth-child(2), .riservo-tre .fase:nth-child(2) { transition-delay: 120ms; }
  .posti-lista li:nth-child(3), .riservo-tre .fase:nth-child(3) { transition-delay: 240ms; }
  .posti-lista li:nth-child(4) { transition-delay: 360ms; }
  .posti-lista li:nth-child(5) { transition-delay: 480ms; }
  .cartiglio-finale .cf { transition-delay: calc(var(--n) * 45ms); }
  .js.entra .posti:not(.is-visto) li { opacity: 0; transform: translateY(24px); }
  .js.entra .cartiglio-finale:not(.is-visto) .cf { opacity: 0; transform: translateY(12px); }
  .js.entra .riservo-tre:not(.is-visto) .fase { opacity: 0; transform: translateY(16px); }
  .dati-foto img, .dato { transition: opacity var(--dur-entra) var(--ease-out), transform var(--dur-entra) var(--ease-out); }
  .dato:nth-child(2) { transition-delay: 120ms; }
  .dato:nth-child(3) { transition-delay: 240ms; }
  .vis-barra i { transition: transform 1200ms var(--ease-in-out) 300ms; }
  .vis-riga + .vis-riga .vis-barra i { transition-delay: 450ms; }
  .js.entra .dati-numeri:not(.is-visto) .vis-barra i { transform: scaleX(0); }
  .vis-mesi-riga i, .vis-persone .p { transition: background-color 300ms var(--ease-out), opacity 400ms var(--ease-out); }
  .js.entra .dati-numeri:not(.is-visto) .vis-mesi-riga i.pieno, .js.entra .dati-numeri:not(.is-visto) .vis-mesi-riga i.quinto { background: var(--color-paper-3); }
  .js.entra .dati-numeri:not(.is-visto) .vis-persone .p { opacity: 0; }
  .vis-persone .p:nth-child(2) { transition-delay: 200ms; }
  .vis-persone .p:nth-child(3) { transition-delay: 400ms; }
  .vis-mesi-riga i:nth-child(9) { transition-delay: 1290ms; }
  .vis-mesi-riga i:nth-child(8) { transition-delay: 1180ms; }
  .vis-mesi-riga i:nth-child(7) { transition-delay: 1070ms; }
  .vis-mesi-riga i:nth-child(6) { transition-delay: 960ms; }
  .vis-mesi-riga i:nth-child(5) { transition-delay: 850ms; }
  .vis-mesi-riga i:nth-child(4) { transition-delay: 740ms; }
  .vis-mesi-riga i:nth-child(3) { transition-delay: 630ms; }
  .vis-mesi-riga i:nth-child(2) { transition-delay: 520ms; }
  .vis-mesi-riga i:nth-child(1) { transition-delay: 410ms; }
  .js.entra .dati-foto:not(.is-visto) img { opacity: 0; transform: translateY(24px); }
  .js.entra .dati-numeri:not(.is-visto) .dato { opacity: 0; transform: translateY(16px); }
  .ci-prezzo, .ci-differenza, .ci-lista li, .ci-percorso li { transition: opacity var(--dur-entra) var(--ease-out), transform var(--dur-entra) var(--ease-out); }
  .ci-prezzo:nth-child(2), .ci-lista li:nth-child(2), .ci-percorso li:nth-child(2) { transition-delay: 120ms; }
  .ci-differenza, .ci-lista li:nth-child(3), .ci-percorso li:nth-child(3) { transition-delay: 240ms; }
  .ci-lista li:nth-child(4), .ci-percorso li:nth-child(4) { transition-delay: 360ms; }
  .ci-lista li:nth-child(5), .ci-percorso li:nth-child(5) { transition-delay: 480ms; }
  .ci-percorso::before { transition: transform var(--dur-linea) var(--ease-in-out); }
  .js.entra .ci-percorso:not(.is-visto)::before { transform: scaleX(0); }
  .js.entra .ci-conti-griglia:not(.is-visto) > *, .js.entra .ci-lista:not(.is-visto) li, .js.entra .ci-percorso:not(.is-visto) li { opacity: 0; transform: translateY(16px); }
  .riservo-disegno { transition: opacity 700ms var(--ease-out), clip-path 1400ms var(--ease-in-out); }
  .riservo-busta { transition: stroke-dashoffset 1300ms var(--ease-in-out); }
  .riservo-occhio { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .riservo[data-fase="durante"] .riservo-occhio--2 { transition-delay: 160ms; }
  .riservo[data-fase="durante"] .riservo-occhio--3 { transition-delay: 320ms; }
  .fase-tempo i { transition: transform 300ms var(--ease-out); }
  .riservo.is-gira .fase[aria-pressed="true"] .fase-tempo i { animation: riempi var(--giro, 4200ms) linear both; }
  .fase[aria-pressed="true"] .sc-firma { transition: stroke-dashoffset 1100ms var(--ease-in-out) 200ms; }
  .sc-timbro { transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); }
  .fase[aria-pressed="true"] .sc-timbro { transition-delay: 1250ms; }
  .fase[aria-pressed="true"] .sc-filo { transition: stroke-dashoffset 700ms var(--ease-in-out); }
  .fase[aria-pressed="true"] .sc-filo:nth-of-type(2) { transition-delay: 180ms; }
  .fase[aria-pressed="true"] .sc-filo:nth-of-type(3) { transition-delay: 360ms; }
  .fase[aria-pressed="true"] .sc-pezzo { transition: clip-path 1300ms var(--ease-in-out) 250ms; }
  .fase[aria-pressed="true"] .sc-gomma { animation: gomma 1500ms var(--ease-in-out) 200ms both; }
  .fase[aria-pressed="true"] .sc-fatto { transition: opacity 400ms var(--ease-out) 1500ms; }

  /* la sera: i passaggi che fa Cartiglio si barrano uno alla volta, i tuoi si accendono */
  .sera-cosa::after { transition: transform 700ms var(--ease-in-out); }
  .sera-voce:nth-child(2) .sera-cosa::after { transition-delay: 300ms; }
  .sera-voce:nth-child(3) .sera-cosa::after { transition-delay: 600ms; }
  .sera-voce:nth-child(4) .sera-cosa::after { transition-delay: 900ms; }
  .sera-chi { transition: opacity 500ms var(--ease-out); }
  .sera-voce:nth-child(1) .sera-chi { transition-delay: 500ms; }
  .sera-voce:nth-child(2) .sera-chi { transition-delay: 800ms; }
  .sera-voce:nth-child(3) .sera-chi { transition-delay: 1100ms; }
  .sera-voce:nth-child(4) .sera-chi { transition-delay: 1400ms; }
  .sera-voce:nth-child(5), .sera-voce:nth-child(5) .sera-chi { transition-delay: 1600ms; }
  .sera-voce:nth-child(6), .sera-voce:nth-child(6) .sera-chi { transition-delay: 1800ms; }
  .js.entra .sera:not(.is-visto) .sera-cosa::after { transform: scaleX(0); }
  .js.entra .sera:not(.is-visto) .sera-chi { opacity: 0; }
  .js.entra .sera:not(.is-visto) .sera-voce--tua { box-shadow: inset 0 0 0 transparent; }

  /* i passi: quello che entra si monta, quello che esce resta com'è */
  /* ogni parte del passo si monta mentre il passo arriva al centro, legata allo scorrimento: --ax è la distanza dal centro */
  .js.orizzontale .passo .anima { --r: clamp(0, var(--ax) * 1.7 + var(--i, 0) * 0.08 - 0.62, 1); opacity: calc(1 - var(--r)); translate: 0 calc(var(--r) * 18px); }
  .js .posta mark.is-preso, .js .allegato.is-preso { animation: preso 700ms var(--ease-out) both; }
  .js .presi.is-legge .avanza i { animation: riempi 2400ms var(--ease-in-out) both; }
  .js .presi-lista > div.is-preso { animation: riga-presa 900ms var(--ease-out) both; }
  .js .presi-lista > div:not(.is-preso) dd { animation: luccica 1400ms linear infinite; background-image: linear-gradient(90deg, var(--color-paper-3), var(--color-paper-2), var(--color-paper-3)); background-size: 200% 100%; }
  .js .viewer.is-scansione .scansione rect { animation: scansione 2600ms var(--ease-in-out) both; }
  .js .viewer.is-scansione .bx { animation: riquadro 500ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .js .campi.is-scansione .campo { animation: campo 450ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .js .domanda.is-pulsa { animation: pulsa 1600ms var(--ease-in-out) 2; }
  .js.orizzontale .passo:not(.is-attivo) .seg { transform: translateX(var(--da, 0%)) scaleX(0); }
  .js .demo-firma.is-partita .composer { transform: translate3d(36px, -18px, 0) scale(0.97); opacity: 0.55; }
}
@keyframes preso { 0% { background-color: transparent; box-shadow: inset 0 0 0 transparent; } 40% { background-color: var(--color-accent); } }
@keyframes riga-presa { 0% { background-color: var(--color-evid); transform: translateX(-10px); } 100% { background-color: transparent; transform: none; } }
@keyframes luccica { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes gomma { 0% { opacity: 1; transform: translateX(20px); } 90% { opacity: 1; transform: translateX(150px); } 100% { opacity: 0; transform: translateX(150px); } }
@keyframes riempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes scansione { 0% { transform: translateX(18px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(622px); opacity: 0; } }
@keyframes riquadro { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes campo { from { opacity: 0.2; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes pulsa { 0%, 100% { box-shadow: inset 0 1px 0 var(--color-luce), 0 22px 44px var(--color-ombra); } 50% { box-shadow: inset 0 1px 0 var(--color-luce), 0 0 0 4px var(--color-evid), 0 22px 44px var(--color-ombra); } }
.bx { transform-box: fill-box; transform-origin: 50% 50%; }

/* il filo di avanzamento: la cornice di sinistra si riempie mentre scendi */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60.0625rem) {
    body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-raised); max-width: var(--container); margin-inline: auto; border-left: 1px solid var(--color-ink-2); transform-origin: 50% 0; pointer-events: none; animation: filo linear both; animation-timeline: scroll(root); }
    @keyframes filo { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* ---------- schermi bassi: il palco si stringe ---------- */
@media (max-height: 820px) and (min-width: 60.0625rem) {
  .passo-testo > p { display: none; }
  .passo-testo > .passo-prova { margin-top: var(--space-md); }
  .viewer-tela .cad { max-height: 38svh; }
  .quota-svg { max-height: 44svh; }
  .presi-nota, .tempo-nota { display: none; }
  .doc { gap: var(--space-sm); padding: var(--space-md); }
  .campo { padding: var(--space-2xs) var(--space-xs); }
  .campo i, .filtri { display: none; }
  .composer-campi > div:nth-child(3), .fine-titolo { display: none; }
  .composer-corpo { padding: var(--space-sm) var(--space-md); gap: var(--space-2xs); }
  .composer-azioni { padding-top: var(--space-sm); }
  .fine { gap: var(--space-sm); padding: var(--space-md); }
  .fine-azioni .ui-btn, .fine-azioni .btn { min-height: 44px; }
}

/* ---------- tablet e telefono ---------- */
@media (max-width: 60rem) {
  body::before { display: none; }
  [data-sez]::after { display: none; }
  .barra-riga { gap: var(--space-md); }
  .testata { min-height: 0; }
  .scena { padding-top: var(--space-xl); }
  .schermi { grid-template-columns: minmax(0, 1fr); width: 100%; margin-bottom: calc(-1 * var(--space-2xl)); }
  .schermo--disegno { display: none; }
  .calibro { left: auto; right: -48px; bottom: -40px; width: 62%; transform: translate3d(0, calc(var(--h) * -70px), 0) rotate(-10deg); }
  .testata-testo { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); }
  .testata h1 { grid-row: auto; }
  .testata .lead { margin-top: var(--space-md); }
  .problema-griglia, .fond-griglia, .riservo-testo, .riservo-tre, .chiusura-testa, .dati-griglia, .ci-testa-griglia, .ci-conti-griglia, .ci-scambio-griglia, .ci-chiusura-griglia, .ci-percorso { grid-template-columns: minmax(0, 1fr); }
  .ci-percorso { gap: var(--space-lg); }
  .ci-percorso::before { top: 20px; bottom: 20px; left: 20px; right: auto; width: 1px; height: auto; }
  .ci-percorso li { padding-left: calc(var(--space-xl) + var(--space-md)); }
  .ci-n { position: absolute; left: 0; top: 0; margin: 0; }
  .ci-modulo { padding: var(--space-lg); }
  .ci-testa .posti-lista li { min-height: 160px; }
  .dati-foto { position: static; }
  .dati-foto img { aspect-ratio: 4 / 3; object-position: 50% 22%; }
  .dato { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .riservo-fondo { top: auto; bottom: var(--space-2xl); width: 120%; opacity: 0.7; }
  .cartiglio-finale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartiglio-finale > .cf, .cartiglio-finale > .cf:nth-child(3) { grid-column: span 1; }
  .cf--denom, .cf--chi, .cf--controllato, .cf--approvato, .cf--vista, .cf--rev, .cf--materiale, .cf--firma { grid-column: 1 / -1 !important; grid-row: auto; }
  /* la corsa: in colonna dentro ogni passo; resta a sinistra-destra */
  .corsa-testa { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-top: var(--space-sm); }
  .corsa-titolo { display: none; }
  .passo-nome { display: none; }
  .corsa-passi a[aria-current="step"] .passo-nome { display: block; white-space: nowrap; }
  .passo-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-content: start; }
  .passo { align-items: start; }
  .passo-testo h3 { max-width: none; font-size: clamp(1.5rem, 5.5vw, 2rem); }
  .passo-testo > p { display: none; }
  .passo-testo > .passo-da { margin-bottom: var(--space-xs); }
  .passo-testo > .passo-prova { margin-top: var(--space-sm); padding-top: var(--space-sm); }
  .demo-arriva, .demo-legge, .demo-chiede, .demo-costi, .demo-prezzo, .demo-correggi, .demo-firma { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .presi, .campi, .lenti, .composizione, .modifiche, .tempo-nota, .presi-nota { display: none; }
  .demo-firma .fine { display: none; }
  .demo-firma.is-partita .composer { display: none; }
  .demo-firma.is-partita .fine { display: grid; }
  .dossier-titolo, .corsa-nota { display: none; }
  .quota-svg { max-height: 34svh; }
  .estremi-prezzo > div:not(.estremi-lotto) { display: none; }
  .viewer-tela .cad { max-height: 32svh; }
}
@media (max-width: 40rem) {
  .menu a[aria-current="page"], .menu ul:not(:has([aria-current])) li:first-child { display: none; }
  .menu a { padding: 0 var(--space-sm); }
  .app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-lato, .app-lista, .app-cerca, .dett-schede, .dett-conto { display: none; }
  .app-vista { grid-template-columns: minmax(0, 1fr); }
  .app-letti { grid-template-columns: minmax(0, 1fr); }
  .posti-lista li { min-height: 120px; }
  .posto-stato { flex-direction: column; gap: var(--space-3xs); }
  .posti-lista .cifre { font-size: var(--text-2xl); }
  .cf--chi, .cf--controllato, .cf--approvato { padding: var(--space-md); }
  .patto > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .livelli, .viewer-barra .ui-btn { display: none; }
  .posta-corpo { padding: var(--space-sm); gap: var(--space-xs); }
  .posta-testo { line-height: 1.45; }
  .listino-corpo, .tempo-corpo { padding: var(--space-sm); gap: var(--space-sm); }
  .doc { padding: var(--space-md); gap: var(--space-sm); }
  .doc-segnalati, .doc-nota { display: none; }
  .quota-svg { max-height: 27svh; }
  .quota-figura { padding: var(--space-sm); }
  .composer-campi > div:nth-child(3) { display: none; }
  .composer-corpo { padding: var(--space-sm); gap: var(--space-2xs); }
  .sera { padding: var(--space-md); }
  .sera-voce { grid-template-columns: 18px minmax(0, 1fr); row-gap: 0; padding-block: var(--space-xs); }
  .sera-chi { grid-column: 2; }
  .dato { padding-block: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .schermi { opacity: 1; translate: 0 0; }
  .js .app-campo, .js .bx[data-bx] { opacity: 1; }
}