/* Padrone di Casa — site.css
   Direzione «The name as a monument» (taste-skill, seed 1878333031), scelta dal committente il 22/10/2026 fra tre
   anteprime: il nome scritto sul citofono diventa il monumento, la pulsantiera del citofono diventa l'indice.
   Palette «Bone, green, chocolate» del foglio con il verde sostituito, su richiesta del committente, dal rosso del
   cortile di viale Monza nella foto della home: #7b2f21 è il muro IN OMBRA (bianco sopra 9,3:1). Non usare il rosso
   in luce #a34533: cade nella famiglia «terracotta» che l'inspector della skill boccia. Il rosso è la risposta (il
   risultato dei calcolatori) e l'azione (i bottoni): niente altro. Il campo cioccolato pieno porta le guide e il piè
   di pagina. Tipo unico: Chivo (900 maiuscolo per i titoli monumentali, 400/700 per il testo).
   Regole della casa: angoli squadrati, nessuna ombra a riposo, nessuna linea sottile, nessuna etichetta maiuscola
   spaziata, gradienti solo come velo neutro sotto il testo sulle foto. Vincolante: design/DESIGN.md. */

[hidden] { display: none !important; }
:root {
  --bg: #e5e1d8;          /* osso: il fondo */
  --surface: #dad5ca;     /* un passo sotto il fondo: campanelli, moduli, riquadri */
  --ink: #2a1d17;         /* cioccolato: ogni parola, il campo pieno */
  --muted: #655548;       /* testo secondario: 5,5:1 su --bg, 4,9:1 su --surface (il #6b5b51 del foglio dava 4,4 sul grigio) */
  --accent: #7b2f21;      /* il rosso del cortile in ombra: risultato e azione */
  --accent-ink: #ffffff;
  --field: var(--ink);    /* campo pieno: guide della home, piè di pagina, «Attenzione» */
  --field-ink: var(--bg);
  --field-soft: rgb(229 225 216 / 0.8);
  --ink-rgb: 42 29 23;

  --font: 'Chivo', 'Chivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  /* cinque misure, più i monumenti in cqw (nome, parola gigante, verbi, nome nel piè di pagina) */
  --fs-s: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);     /* note, date, crediti */
  --fs-b: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);      /* testo, moduli, menu, bottoni */
  --fs-l: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);        /* attacchi, titoli di elenco, h2 del testo */
  --fs-h1: clamp(1.75rem, 1.1rem + 2.9vw, 3.75rem);          /* il titolo della pagina (i titoli delle guide sono lunghi) */
  --fs-xl: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);            /* titoli di sezione in maiuscolo, la cifra del risultato */

  --margin: clamp(1.25rem, 2.2vw, 2rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.25rem);
  --gap: clamp(5rem, 3rem + 8vw, 12rem);
  --measure: 68ch;
  --wide: 1440px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-b)/1.5 var(--font); letter-spacing: -0.01em; font-kerning: normal; font-variant-numeric: lining-nums; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
p, ul, ol, dl, dd, h1, h2, h3, table { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; text-decoration-color: currentColor; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
strong, b { font-weight: 700; }
small, .small { font-size: var(--fs-s); }
h1, h2, h3 { font-weight: 900; letter-spacing: -0.03em; line-height: 0.98; text-wrap: balance; hyphens: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--margin); top: -60px; background: var(--ink); color: var(--bg); padding: 10px 16px; z-index: 100; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.tnum, .tbl, .slip { font-variant-numeric: tabular-nums lining-nums; }

/* titolo di sezione monumentale (maiuscolo nero) */
.h2, .page-head--giant h1 { font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.04em; text-wrap: balance; hyphens: none; }

/* ---------- bottoni e link ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.375rem; border: 0; border-radius: 0;
  background: var(--accent); color: var(--accent-ink); font: 700 var(--fs-b)/1 var(--font); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.btn:active { transform: scale(0.97); }
.btn--paper { background: var(--bg); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--small { min-height: 2.75rem; padding: 0 1rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink); color: var(--bg); }
  .btn--paper:hover, .btn--ink:hover { background: var(--accent); color: var(--accent-ink); }
}
.more { font-weight: 700; }
.linklike { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; cursor: pointer; }
/* il bottone tondo del citofono */
.push { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 400; font-size: var(--fs-b); line-height: 1;
  transition: transform 320ms var(--ease-out), background-color var(--t-hover) ease; }

/* ---------- home: titolo di film sul bordo basso ---------- */
.hero { position: relative; height: 100svh; min-height: 34rem; color: var(--bg); background: #6e3d2c; overflow: hidden; isolation: isolate; }
.hero__pics, .hero__pics img { position: absolute; inset: 0; }
.hero__pics img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; }
.hero__pics img.is-on { opacity: 1; }
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero::before { top: 0; height: 9rem; background: linear-gradient(to bottom, rgb(var(--ink-rgb) / 0.5), rgb(var(--ink-rgb) / 0)); } /* taste-skill-ignore: velo neutro sotto il testo della foto */
.hero::after { bottom: 0; height: 100%; background: linear-gradient(to top, rgb(var(--ink-rgb) / 0.66) 0%, rgb(var(--ink-rgb) / 0.58) 50%, rgb(var(--ink-rgb) / 0.46) 72%, rgb(var(--ink-rgb) / 0.12) 100%); } /* taste-skill-ignore: velo neutro sotto il nome sulla foto */

.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem var(--margin); }
.topbar__mark { font-weight: 700; font-size: var(--fs-b); text-decoration: none; margin-right: auto; }
.topbar__links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.topbar__links a { font-weight: 700; font-size: var(--fs-s); text-decoration-color: transparent; }
.topbar__menu, .topbar__action { display: none; }
@media (hover: hover) and (pointer: fine) { .topbar a:hover { text-decoration-color: currentColor; } }

.hero__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 var(--margin) 1.4rem; }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.25rem, 3vw, 2.75rem); }
.hero__lead { font-size: var(--fs-l); line-height: 1.3; max-width: 31ch; }
.hero__act { display: grid; justify-items: end; gap: 0.75rem; text-align: right; }

.name { container-type: inline-size; font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.8; hyphens: none; }
.name__line { display: block; overflow: clip; overflow-clip-margin: 0.04em; }
.name__line > span { display: block; white-space: nowrap; margin-left: -0.046em; letter-spacing: -0.05em; }
.name__l1 { font-size: calc(100cqw / 4.33); }
.name__l2 { font-size: calc(100cqw / 3.755); }

/* ---------- home: griglia comune ---------- */
.calc, .index, .stats, .work, .about, .home-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); }
.p-home main { padding-bottom: var(--gap); }

/* il conto: aggiornamento ISTAT */
.calc { padding-top: clamp(4.5rem, 3rem + 6vw, 9rem); row-gap: 2.5rem; align-items: start; }
.calc__intro { grid-column: 1 / 7; grid-row: 1; }
.calc__lead { margin-top: 1.5rem; max-width: 46ch; }
.calc__form { grid-column: 1 / 7; grid-row: 2; display: grid; gap: 2rem; }
.calc__result { grid-column: 8 / 13; grid-row: 1 / 3; align-self: start; position: sticky; top: var(--margin); background: var(--accent); color: var(--accent-ink); padding: clamp(1.5rem, 3vw, 2.75rem); display: grid; gap: 1.5rem; margin-top: 0.4rem; }
.calc__label { max-width: 34ch; }
.calc__figure { font-size: var(--fs-xl); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__figure output { display: block; }
.calc__lines { display: grid; gap: 0.5rem; }
.calc__lines div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.calc__lines dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__note a { font-weight: 700; }

/* moduli (home e calcolatori) */
.field { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; display: grid; gap: 0.6rem; }
.calc__form .field { margin: 0; }
.field label, .field legend { font-weight: 700; padding: 0; }
.field legend { margin-bottom: 0.6rem; }
.hint, .field__hint { color: var(--muted); max-width: 52ch; margin: 0; }
.money, .field__money { display: flex; align-items: center; background: var(--surface); max-width: 20rem; }
.money input, .field__money input { flex: 1; min-width: 0; height: 4rem; border: 0; background: transparent; color: var(--ink); font: 700 var(--fs-l)/1 var(--font); padding: 0 1rem; font-variant-numeric: tabular-nums; }
.money input:focus-visible, .field__money input:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.money span, .field__money span { padding-right: 1rem; font: 700 var(--fs-l)/1 var(--font); }
.field input[type=text], .field input[type=email], .field input[type=date], .field input[type=number], .field select, .field textarea {
  width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); font: 400 var(--fs-b) var(--font); }
.field select { appearance: none; padding-right: 2.75rem; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232a1d17' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat right 1rem center; }
.field textarea { min-height: 11rem; resize: vertical; }
.field__money input { background: transparent !important; }
/* scelte a tessere: i radio del sito diventano tasti (con :has; senza, restano radio leggibili) */
.choice { display: grid; gap: 0.375rem; }
.choice--two { grid-template-columns: repeat(2, minmax(0, 11rem)); }
.choice--months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice label { position: relative; display: block; cursor: pointer; font-weight: 400; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 3.25rem; padding: 0.5rem 0.875rem; background: var(--surface); font-variant-numeric: tabular-nums;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.choice b { font-weight: 700; }
.choice--months span { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; min-height: 3.75rem; }
.choice input:checked + span { background: var(--ink); color: var(--bg); }
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice label:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .choice input:not(:checked) + span:hover { outline: 2px solid var(--ink); outline-offset: -2px; } }
.field--choice { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.field--choice legend, .field--choice .field__hint { flex: 0 0 100%; }
.field--choice label { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.5rem 1rem; background: var(--surface); font-weight: 400; cursor: pointer; }
.field--choice input { width: 1.125rem; height: 1.125rem; accent-color: var(--ink); margin: 0; }
.field--choice label:has(input:checked) { background: var(--ink); color: var(--bg); }
.field--choice label:has(input:checked) input { accent-color: var(--bg); }
.field--choice label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* sezioni: la parola gigante e la pulsantiera */
.index { padding-top: var(--gap); align-items: start; }
.index__col { grid-column: 1 / 6; container-type: inline-size; }
.giant { font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.8; margin-bottom: 1.25rem; }
.giant span { display: block; white-space: nowrap; font-size: calc(100cqw / 3.826); margin-left: -0.015em; letter-spacing: -0.05em; }
.bells { display: grid; gap: 6px; }
.bell { background: var(--surface); }
.bell summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0.25rem 0.75rem 0.25rem 1.125rem; font-weight: 700; }
.bell summary::-webkit-details-marker { display: none; }
.bell__count { font-weight: 400; font-variant-numeric: tabular-nums; }
.bell[open] .push { transform: rotate(45deg); }
.bell summary:active .push { transform: scale(0.9); }
.bell[open] summary:active .push { transform: rotate(45deg) scale(0.9); }
@media (hover: hover) and (pointer: fine) { .bell summary:hover .push { background: var(--accent); } }
.bell__panel { padding: 0.5rem 1.125rem 1.5rem; display: grid; gap: 1.1rem; }
.bell__panel ul { display: grid; gap: 0.875rem; list-style: none; margin: 0; padding: 0; }
.bell__panel li { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline; }
.bell__panel li span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bell__panel a { text-decoration-color: rgb(var(--ink-rgb) / 0.35); }
@media (hover: hover) and (pointer: fine) { .bell__panel a:hover { text-decoration-color: currentColor; } }
.bell__all { font-weight: 700; }
.index__pic { grid-column: 7 / 13; position: sticky; top: var(--margin); }
[data-shutter] { position: relative; overflow: clip; }
.index__pic img { width: 100%; height: min(calc(100svh - 6rem), 56rem); object-fit: cover; object-position: 50% 40%; background: var(--surface); }
.index__pic figcaption { margin-top: 0.75rem; color: var(--muted); font-size: var(--fs-s); }

/* i numeri dell'anno */
.stats { padding-top: var(--gap); align-items: start; }
.stats__body { grid-column: 2 / 8; }
.stats__h { font-size: var(--fs-l); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 3.5rem calc(8.25rem + 1.5rem); }
.stats__list { display: grid; gap: 1.75rem; }
.stats__list div { display: grid; grid-template-columns: 8.25rem 1fr; column-gap: 1.5rem; align-items: baseline; }
.stats__list dt { text-align: right; font-size: var(--fs-l); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.02em; }
.stats__list dd { max-width: 44ch; }
.stats__pic { grid-column: 9 / 12; margin-top: 8.5rem; }
.stats__pic img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 60%; background: var(--surface); }

/* scadenze: un verbo alla volta */
.verbs { margin-top: var(--gap); }
.verb { position: relative; height: 100svh; min-height: 36rem; overflow: clip; background: var(--surface); display: flex; flex-direction: column; }
.verb__track { position: relative; flex: 1; min-height: 0; }
.verb__img, .verb__img picture, .verb__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.verb__img img, .verb__img.ai-fig picture img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--pos, 50% 50%); }
.verb__img.ai-fig { margin: 0; max-width: none; }
.verb__hold { --vsize: min(17vw, 18.75rem, calc((100vw - 2 * var(--margin) - 1.5rem) / 5.06)); position: sticky; top: calc(50% - var(--vsize) * 0.4); z-index: 1; padding-inline: var(--margin); text-align: center; }
.verb__word { font-size: var(--vsize); font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.8; color: var(--ink); white-space: nowrap; }
.verb__note { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 3rem; flex-wrap: wrap; padding: 1.5rem var(--margin) 1.75rem; background: rgb(var(--ink-rgb) / 0.74); color: var(--bg); }
.verb__note p { max-width: 58ch; }
.verb__note a { font-weight: 700; white-space: nowrap; }

/* guide: sparse sul campo cioccolato */
.work { margin-top: 0; padding-top: var(--gap); padding-bottom: var(--gap); align-items: start; background: var(--field); color: var(--field-ink); --cover: var(--ink); }
.work ::selection { background: var(--bg); color: var(--ink); }
.work a { color: var(--field-ink); }
.work__h { grid-column: 1 / 13; grid-row: 1; margin-bottom: 4rem; }
.piece { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; min-width: 0; }
.piece__pic { display: block; overflow: clip; background: var(--ink); transition: opacity var(--t-hover) ease; }
.piece__pic .ai-fig, .piece__pic picture { height: 100%; }
/* l'helper di fleet-images fissa height:auto e aspect-ratio della foto: qui la cornice comanda */
.piece__pic .ai-fig picture img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.piece__pic .ai-fig { margin: 0; }
@media (hover: hover) and (pointer: fine) { .piece__pic:hover { opacity: 0.88; } }
.piece__cat { color: var(--field-soft); font-size: var(--fs-s); font-weight: 700; }
.piece__title { font-weight: 700; max-width: 52ch; margin-top: 0.25rem; }
.piece__title a { text-decoration-color: rgb(229 225 216 / 0.45); }
@media (hover: hover) and (pointer: fine) { .piece__title a:hover { text-decoration-color: currentColor; } }
.piece > p:last-child { max-width: 52ch; }
.piece--a { grid-column: 1 / 7; }
.piece--a .piece__pic { aspect-ratio: 3 / 2; }
.piece--b { grid-column: 9 / 13; margin-top: -9rem; }
.piece--b .piece__pic { aspect-ratio: 4 / 5; }
.piece--c { grid-column: 3 / 10; margin-top: 22vh; }
.piece--c .piece__pic { aspect-ratio: 16 / 9; }
.work > .piece--a:nth-of-type(n+2) { margin-top: 22vh; }
.work > :nth-child(2) { grid-row: 2; }
.work > :nth-child(3) { grid-row: 3; }
.work > :nth-child(4) { grid-row: 3; grid-column: 2 / 6; align-self: center; margin-top: 0; }
.work > :nth-child(5) { grid-row: 4; }
.work > :nth-child(6) { grid-row: 5; }
.work > :nth-child(7) { grid-row: 6; }
.work > :nth-child(8) { grid-row: 7; }
.work__more { grid-column: 1 / 13; grid-row: 8; margin-top: 5rem; }
.work__remark { font-size: var(--fs-l); line-height: 1.3; max-width: 22ch; }

/* come lavoriamo */
.about { padding-top: var(--gap); row-gap: 7.5rem; align-items: start; }
.about__facts { grid-column: 1 / 4; grid-row: 1; display: grid; gap: 1.25rem; padding-top: 0.6rem; }
.about__facts dt { color: var(--muted); font-size: var(--fs-s); }
.about__facts dd { font-weight: 700; }
.about__text { grid-column: 5 / 12; grid-row: 1; }
.about__para { font-size: var(--fs-l); line-height: 1.38; margin-top: 2rem; max-width: 52ch; }
.about__word { grid-column: 1 / 4; grid-row: 2; font-weight: 700; }
.about__lists { grid-column: 5 / 12; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; row-gap: 2.5rem; }
.about__listname { font-weight: 700; margin-bottom: 0.75rem; }
.about__lists ul { display: grid; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.about__lists a { text-decoration-color: rgb(var(--ink-rgb) / 0.35); }

/* domande della home */
.home-faq { padding-top: var(--gap); }
.home-faq__h { grid-column: 1 / 13; max-width: 14ch; }
.home-faq__list { grid-column: 5 / 13; margin-top: 5rem; display: grid; gap: 0.75rem; }
.q { --qx: min(1.5rem, var(--margin)); margin-inline: calc(-1 * var(--qx)); transition: background-color var(--t-hover) ease; }
.q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; padding: 1.25rem var(--qx); font-size: var(--fs-l); line-height: 1.25; }
.q summary::-webkit-details-marker { display: none; }
.q__mark { width: 0.75rem; height: 0.75rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 320ms var(--ease-out); }
.q[open] { background: var(--surface); }
.q[open] .q__mark { transform: translateY(25%) rotate(-135deg); }
.q__a { padding: 0 var(--qx) 1.75rem; display: grid; gap: 0.75rem; }
.q__a p { max-width: 52ch; }
.q__a a { font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .q:not([open]) summary:hover { background: var(--surface); } }

/* ---------- pagine interne: intestazione ---------- */
.site-header { position: relative; z-index: 20; background: var(--bg); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.125rem var(--margin); max-width: var(--wide); margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.mark { width: 2.25rem; height: 2.25rem; flex: none; }
.brand__name { white-space: nowrap; font-weight: 900; text-transform: uppercase; font-size: var(--fs-l); letter-spacing: -0.04em; line-height: 1; }
.nav { display: flex; align-items: center; gap: 0.75rem; }
.nav__toggle { display: none; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0; color: var(--ink); font: 700 var(--fs-b)/1 var(--font); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.nav__toggle svg { display: none; }
.nav__menu { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav__link { font-weight: 700; font-size: var(--fs-s); padding: 0.6rem 0; white-space: nowrap; text-decoration-color: transparent; }
.nav__link[aria-current] { text-decoration-color: currentColor; text-decoration-thickness: 0.14em; }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { text-decoration-color: currentColor; } }
.nav__search form { display: flex; align-items: center; background: var(--surface); }
.nav__search input { width: 10rem; border: 0; background: transparent; padding: 0.6rem 0.75rem; font: 400 var(--fs-s) var(--font); color: var(--ink); min-height: 2.75rem; }
.nav__search input::placeholder { color: var(--muted); opacity: 1; }
.nav__search button { background: none; border: 0; padding: 0 0.75rem; color: var(--ink); cursor: pointer; min-height: 2.75rem; }
.nav__search svg { width: 1.125rem; height: 1.125rem; }
svg.ic, .nav svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1240px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu { display: none; position: absolute; left: var(--margin); right: var(--margin); top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--ink); padding: 0.5rem 1.25rem 1.25rem; }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { color: var(--bg); }
  .nav__link { display: block; padding: 0.8rem 0; font-size: var(--fs-l); }
  .nav__search { margin: 0.75rem 0; }
  .nav__search form { background: var(--bg); }
  .nav__search input { width: 100%; flex: 1; font-size: var(--fs-b); }
  .nav__menu .btn { margin-top: 0.5rem; color: var(--accent-ink); }
}

.page-head { padding: clamp(2rem, 6vw, 5.5rem) var(--margin) clamp(2rem, 4vw, 3.5rem); max-width: var(--wide); margin: 0 auto; }
.page-head h1 { font-size: var(--fs-h1); max-width: 26ch; line-height: 0.95; letter-spacing: -0.035em; margin: 0 0 1.5rem; }
.page-head--giant h1 { max-width: 16ch; }
.page-head__lead { font-size: var(--fs-l); line-height: 1.35; max-width: 46ch; }
.crumbs { font-size: var(--fs-s); margin: 0 0 1.5rem; color: var(--muted); }
.crumbs a { color: var(--ink); text-decoration-color: transparent; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration-color: currentColor; } }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--margin); }

/* ---------- guida: testo a sinistra, scheda e indice a destra ---------- */
.article-grid { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 23rem); justify-content: space-between; gap: clamp(2rem, 5vw, 6rem); max-width: var(--wide); margin: 0 auto; padding: 0 var(--margin) var(--gap); }
.article-grid--flat { padding: 0; }
.article-meta { font-size: var(--fs-s); color: var(--muted); margin: 0 0 1.75rem; }
.article-meta a { color: var(--ink); font-weight: 700; }
.article-hero { margin: 0 0 2.25rem; }
.article-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* l'helper di fleet-images arrotonda di 10px le immagini: qui gli angoli sono squadrati (design/DESIGN.md) */
.ai-fig img, .ai-fig picture { border-radius: 0 !important; background: var(--surface) !important; }
.ai-fig { margin: 0; }
.aside { min-width: 0; }
.aside__sticky { position: sticky; top: 1.5rem; display: grid; gap: 2rem; }
.aside h2 { font-size: var(--fs-l); letter-spacing: -0.02em; margin: 0 0 1rem; }

.takeaways { background: var(--surface); padding: 1.5rem 1.75rem; margin: 0 0 2.5rem; }
.takeaways > p { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; font-size: var(--fs-l); line-height: 1; margin: 0 0 1rem; }
.takeaways ul { margin: 0; padding-left: 1.2em; display: grid; gap: 0.5rem; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-l); line-height: 1.1; letter-spacing: -0.025em; margin-top: 2.25em; scroll-margin-top: 1.5rem; }
.prose h3 { font-size: var(--fs-b); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-top: 1.75em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose p, .prose li { line-height: 1.62; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--ink); font-weight: 700; }
.prose a { font-weight: 700; text-decoration-color: rgb(var(--ink-rgb) / 0.4); }
@media (hover: hover) and (pointer: fine) { .prose a:hover { text-decoration-color: currentColor; } }
.prose blockquote { margin-inline: 0; padding: 1.25rem 1.5rem; background: var(--surface); }
.prose blockquote > * + * { margin-top: 0.6em; }
.prose blockquote p { margin: 0; }
.box--attenzione { background: var(--field) !important; color: var(--field-ink); }
.box--attenzione a { color: var(--field-ink); }
.toc__title { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; font-size: var(--fs-l); line-height: 1; margin: 0 0 0.875rem; }
.toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 0.45rem; }
.toc li::marker { font-weight: 700; font-variant-numeric: tabular-nums; }
.toc a { text-decoration-color: transparent; font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { text-decoration-color: currentColor; } }
.prose .toc { background: var(--surface); padding: 1.25rem 1.5rem; }
.prose .toc li + li { margin-top: 0; }
.fonte { font-style: normal; }
.faq { margin-top: 3rem; }
.faq h2 { margin-bottom: 1.25rem; }
.faq details { background: var(--surface); }
.faq details + details { margin-top: 6px; }
.faq summary { position: relative; list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0.75rem 0.75rem 0.75rem 1.125rem; font-weight: 700; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 400; transition: transform 320ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p, .faq details > div { margin: 0; padding: 0 1.125rem 1.25rem; max-width: 62ch; }
.sources { margin-top: 3rem; }
.sources ol { padding-left: 1.4em; display: grid; gap: 0.5rem; font-size: var(--fs-s); }
.sources li + li { margin-top: 0; }
.sources a { font-weight: 400; }
.updated { font-size: var(--fs-s); color: var(--muted); margin-top: 2rem; }
.related { margin-top: 4rem; }
.related h2 { font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.86; margin: 0 0 1.5rem; }

/* tabelle (hanno le loro linee: ammesse) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose .table-wrap { margin-top: 1.5em; }
.tbl, .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-b); background: var(--surface); font-variant-numeric: tabular-nums; }
.tbl caption, .prose table caption { caption-side: top; text-align: left; font-weight: 700; padding: 0 0 0.75rem; }
.tbl th, .tbl td, .prose th, .prose td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 3px solid var(--bg); }
.tbl thead th, .prose thead th { background: var(--ink); color: var(--bg); font-weight: 700; }
.tbl tfoot td { font-size: var(--fs-s); color: var(--muted); border-bottom: 0; padding-top: 0.75rem; }
mark.param-missing { overflow-wrap: anywhere; white-space: normal; background: var(--accent); color: var(--accent-ink); padding: 0 4px; }

/* la scheda della guida e i riquadri (ex «ricevuta»: oggi pannelli pieni, senza bordo seghettato) */
.slip { background: var(--surface); padding: 1.5rem 1.5rem 1.75rem; }
.slip__title { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; font-size: var(--fs-l); line-height: 1; margin: 0 0 1.25rem; }
.slip__note { font-size: var(--fs-s); color: var(--muted); margin: 1rem 0 0; }
.slip__group { font-weight: 700; margin: 1.5rem 0 0.5rem; }
.slip__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; margin: 0; padding: 0.55rem 0; line-height: 1.35; }
.slip__row + .slip__row { border-top: 3px solid var(--bg); }
.slip__row > i { display: none; }
.slip__row > span:last-child { text-align: right; font-weight: 700; }
.aside .slip__row { grid-template-columns: 1fr; gap: 0.15rem; }
.aside .slip__row > span:last-child { text-align: left; }
.slip__total { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.25rem -1.5rem -1.75rem; padding: 1rem 1.5rem; min-height: 3.5rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.slip__total a { color: inherit; }
.aside .slip__total { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.aside .slip__total span { font-weight: 400; font-size: var(--fs-s); }
.slip__result { font-size: var(--fs-l); line-height: 1.3; margin: 1rem 0; }
.slip__result:empty { display: none; }

/* riquadri di rimando (calcolatore, guida): una placca del citofono */
.callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1.25rem; padding: 1.125rem 1rem 1.125rem 1.25rem; background: var(--surface); text-decoration: none; }
.prose .callout { margin-top: 1.75em; }
.callout__kind { grid-column: 1; font-size: var(--fs-s); color: var(--muted); font-weight: 700; }
.callout__title { grid-column: 1; font-weight: 700; font-size: var(--fs-l); line-height: 1.15; letter-spacing: -0.02em; }
.callout__text { grid-column: 1; font-size: var(--fs-b); font-weight: 400; color: var(--ink); }
.callout::after { content: "→"; grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 400; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .callout:hover::after { background: var(--accent); } .callout:hover .callout__title { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; } }
.callout:active::after { transform: scale(0.9); }

/* elenchi di guide: le placche una sotto l'altra */
.index-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 6px; }
.prose .index-list { padding: 0; }
.prose .index-list li + li { margin-top: 0; }
.index-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 1.25rem; padding: 1rem 1rem 1rem 1.25rem; background: var(--surface); text-decoration: none; font-weight: 400; }
.index-list a::after { content: "→"; grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ink); color: var(--bg); transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .index-list a:hover::after { background: var(--accent); } .index-list a:hover .index-list__title { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; } }
.index-list__title { grid-column: 1; font-weight: 700; font-size: var(--fs-l); line-height: 1.2; letter-spacing: -0.02em; }
.index-list__meta { grid-column: 1; font-size: var(--fs-s); color: var(--muted); }
.index-list__desc { grid-column: 1; font-size: var(--fs-b); max-width: 62ch; }

/* sezione: guide e calcolatori a confronto */
.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(2rem, 5vw, 6rem); max-width: var(--wide); margin: 0 auto; padding: 0 var(--margin) var(--gap); align-items: start; }
.cat-grid > section > h2, .cat-tools h2 { font-size: var(--fs-l); letter-spacing: -0.02em; margin: 0 0 1rem; }
.cat-tools { display: grid; gap: 6px; align-content: start; position: sticky; top: 1.5rem; }
.cat-intro { margin-top: 4rem; }

/* calcolatori */
.tool-grid { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); max-width: var(--wide); margin: 0 auto; padding: 0 var(--margin) 4rem; align-items: start; }
.tool-grid .slip--form { background: none; padding: 0; }
.p-tool .tool-grid .slip--form .slip__title { display: none; }
.tool-out { position: sticky; top: 1.5rem; }
.tool-out .slip { background: var(--accent); color: var(--accent-ink); padding: clamp(1.5rem, 3vw, 2.75rem); }
.tool-out .slip a { color: inherit; }
.tool-out .slip__title { margin-bottom: 1.5rem; }
.tool-out .slip__row + .slip__row { border-top-color: rgb(255 255 255 / 0.18); }
.tool-out .slip__note { color: rgb(255 255 255 / 0.85); }
.tool-out .slip__total { background: var(--ink); color: var(--bg); margin: 1.5rem calc(-1 * clamp(1.5rem, 3vw, 2.75rem)) calc(-1 * clamp(1.5rem, 3vw, 2.75rem)); padding: 1rem clamp(1.5rem, 3vw, 2.75rem); }
.result-big { font-weight: 900; font-size: var(--fs-xl); line-height: 0.9; letter-spacing: -0.04em; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.tool-text { max-width: var(--wide); margin: 0 auto; padding: 0 var(--margin) var(--gap); }
.tools-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: var(--wide); margin: 0 auto; padding: 0 var(--margin) var(--gap); }
.tools-list .callout { min-height: 9rem; padding: 1.5rem 1.25rem 1.5rem 1.5rem; }

/* pagina semplice e contatti */
.page-body { max-width: var(--wide); margin: 0 auto; padding: 0 var(--margin) var(--gap); }
.search-form { max-width: 30rem; margin-top: 1rem; }
.notice { background: var(--surface); padding: 1.125rem 1.375rem; margin: 0 0 1.5rem; }
.notice--ok { background: var(--accent); color: var(--accent-ink); }
.hp { position: absolute; left: -9999px; }
.pager { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 2rem; }
.pager a { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.25rem; background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; }
.privacy-choices p + p { margin-top: 1rem; }
.faq-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* ---------- piè di pagina: colonne sopra, il nome sotto ---------- */
.foot { display: grid; grid-template-rows: auto auto auto auto; padding: clamp(2.5rem, 6vw, 5rem) var(--margin) 1.25rem; background: var(--field); color: var(--field-ink); }
.p-home .foot { min-height: 100svh; grid-template-rows: auto 1fr auto auto; }
.foot a { color: var(--field-ink); text-decoration-color: rgb(229 225 216 / 0.4); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { text-decoration-color: currentColor; } }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.foot__cols ul { display: grid; gap: 0.35rem; color: var(--field-soft); list-style: none; margin: 0; padding: 0; }
.foot__first { font-weight: 700; margin-bottom: 0.6rem; }
.foot__credits { align-self: end; max-width: 64ch; font-size: var(--fs-s); color: var(--field-soft); padding: 3rem 0 2rem; }
.foot__what { align-self: end; max-width: 60ch; color: var(--field-soft); padding: 3rem 0 2rem; }
.foot__mark { container-type: inline-size; font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.8; }
.foot__one { display: block; white-space: nowrap; font-size: calc(100cqw / 8.245); margin-left: -0.046em; letter-spacing: -0.05em; }
.foot__two { display: none; }
.foot__legal { margin-top: 1.25rem; font-size: var(--fs-s); display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--field-soft); }
.foot__legal .linklike { color: var(--field-soft); }

/* ---------- consenso: una placca grigia (si stacca dalle foto, dal fondo osso e dal campo cioccolato), le due scelte
   con lo stesso peso. Copre il nome della home finché il visitatore non sceglie: è l'unica eccezione dichiarata alla
   regola «niente sopra i titoli» (inspector: covered-text sul solo banner, vedi design/DESIGN.md). ---------- */
.cmp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; pointer-events: none; }
.cmp__box { pointer-events: auto; max-height: 100svh; overflow: auto; background: var(--surface); color: var(--ink); padding: 1rem var(--margin);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; }
.cmp__box > p { grid-column: 1; max-width: 90ch; }
.cmp__box > .cmp__actions { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; }
.cmp__title { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; font-size: var(--fs-b); line-height: 1; margin: 0 0 0.4rem; }
.cmp__text { margin: 0; }
.cmp__actions { display: flex; flex-wrap: wrap; gap: 0.625rem 1rem; align-items: center; }
.cmp__box .btn { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .cmp__box .btn:hover { background: var(--accent); color: var(--accent-ink); } }
.cmp-modal { position: fixed; inset: 0; z-index: 70; background: rgb(var(--ink-rgb) / 0.6); display: grid; place-items: center; padding: var(--margin); }
.cmp-modal__box { position: relative; max-width: 36rem; width: 100%; max-height: 90svh; overflow: auto; background: var(--bg); padding: 1.75rem; }
.cmp-modal__box h2 { font-size: var(--fs-l); text-transform: uppercase; letter-spacing: -0.03em; margin: 0 2.5rem 1rem 0; }
.cmp-modal__box > p { margin-bottom: 1rem; }
.cmp-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ink); border: 0; color: var(--bg); cursor: pointer; }
.cmp-modal__close svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.4; }
.cmp-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.875rem 1rem; background: var(--surface); }
.cmp-row + .cmp-row { margin-top: 6px; }
.cmp-modal .cmp__actions { margin-top: 1.25rem; }
.cmp-row small { font-size: var(--fs-s); }
.cmp-badge { flex: none; font-size: var(--fs-s); font-weight: 700; }
.switch { width: 1.375rem; height: 1.375rem; accent-color: var(--ink); flex: none; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .topbar__mark { margin-right: 0; }
  .topbar__menu { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font: 700 var(--fs-b)/1 var(--font); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
  .topbar__action { display: inline-flex; margin-left: auto; min-height: 2.75rem; padding: 0 1rem; }
  .topbar__links { display: none; position: absolute; top: 100%; left: var(--margin); right: var(--margin); flex-direction: column; gap: 0; background: var(--ink); padding: 0.5rem 1.25rem; }
  .topbar__links.is-open { display: flex; }
  .topbar__links a { display: block; padding: 0.8rem 0; font-size: var(--fs-l); }
  .hero__act { display: none; }
  .foot__one { display: none; }
  .foot__two { display: block; }
  .foot__two span { display: block; white-space: nowrap; margin-left: -0.046em; letter-spacing: -0.05em; }
  .foot__two span:first-child { font-size: calc(100cqw / 4.33); }
  .foot__two span:last-child { font-size: calc(100cqw / 3.755); }
  .calc__intro, .calc__form { grid-column: 1 / 13; }
  .calc__result { grid-column: 1 / 13; grid-row: 3; position: static; }
  .index__col { grid-column: 1 / 8; }
  .index__pic { grid-column: 8 / 13; }
  .stats__body { grid-column: 1 / 9; }
  .stats__pic { grid-column: 9 / 13; }
  .about__text, .about__lists { grid-column: 4 / 13; }
  .home-faq__list { grid-column: 3 / 13; }
  .about__lists { column-gap: 2rem; }
  .article-grid, .cat-grid, .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .aside__sticky, .tool-out, .cat-tools { position: static; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tablet: le guide su due colonne regolari (la dispersione a 12 colonne lascia vuoti a questa larghezza) */
@media (min-width: 761px) and (max-width: 1080px) {
  .work { row-gap: 4.5rem; }
  .work > * { grid-row: auto !important; margin-top: 0 !important; }
  .work > .piece { grid-column: span 6 !important; }
  .work > .work__remark { grid-column: 1 / 13 !important; max-width: 30ch; }
  .piece--b .piece__pic, .piece--c .piece__pic { aspect-ratio: 3 / 2; }
}

/* ---------- telefono: una composizione sua ---------- */
@media (max-width: 760px) {
  .topbar__mark { display: none; }
  .topbar { gap: 1rem; padding-block: 1rem; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 2.25rem; }
  .hero__lead { max-width: 30ch; }

  .calc { row-gap: 2rem; }
  .choice--months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money, .field__money { max-width: none; }
  .calc__result { margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }

  .index__col, .index__pic { grid-column: 1 / 13; }
  .index__pic { position: static; margin-top: 2.5rem; width: 82%; justify-self: end; }
  .index__pic img { height: auto; aspect-ratio: 4 / 5; }
  .bell summary { min-height: 3.375rem; gap: 0.75rem; padding-left: 1rem; }
  .bell__panel { padding-inline: 1rem; }
  .bell__panel li { grid-template-columns: 1fr; gap: 0.15rem; }

  .stats__body { grid-column: 1 / 13; }
  .stats__h { margin-left: calc(5.5rem + 1rem); margin-bottom: 2.5rem; }
  .stats__list div { grid-template-columns: 5.5rem 1fr; column-gap: 1rem; }
  .stats__pic { grid-column: 1 / 13; width: 56%; justify-self: end; margin-top: 3.5rem; }

  .verb__img img { object-position: var(--pos-phone, 50% 50%); }
  .verb__note { padding: 1.25rem var(--margin) 1.5rem; }

  .work__h { margin-bottom: 2.5rem; }
  .work > * { grid-column: 1 / 13 !important; grid-row: auto !important; margin-top: 0 !important; }
  .work > * + * { margin-top: 4.5rem !important; }
  .piece--b { width: 68%; justify-self: end; }
  .piece--c { width: 82%; justify-self: start; }
  .work__remark { max-width: none; }

  .about { row-gap: 3rem; }
  .about__text { grid-column: 1 / 13; grid-row: 1; }
  .about__para { margin-top: 1.5rem; }
  .about__facts { grid-column: 1 / 13; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; padding-top: 0; }
  .about__word { grid-column: 1 / 13; grid-row: 3; margin-bottom: -2rem; }
  .about__lists { grid-column: 1 / 13; grid-row: 4; grid-template-columns: 1fr; }

  .home-faq__list { grid-column: 1 / 13; margin-top: 2.5rem; gap: 0.25rem; }
  .q { margin-inline: calc(-1 * var(--margin)); }
  .q summary { font-size: var(--fs-b); padding: 1rem var(--margin); }
  .q__a { padding: 0 var(--margin) 1.5rem; }

  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__cols > :nth-child(4) { grid-column: 1 / -1; }

  .brand__name { font-size: var(--fs-b); }
  .mark { width: 2rem; height: 2rem; }
  .tools-list { grid-template-columns: minmax(0, 1fr); }
  .slip { padding: 1.25rem 1.125rem 1.5rem; }
  .slip__total { margin: 1.25rem -1.125rem -1.5rem; padding: 1rem 1.125rem; }
  .tool-out .slip { margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .tool-out .slip__total { margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .slip__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .slip__row > span:last-child { text-align: left; }
  .cmp__box { display: block; padding: 1rem var(--margin) 1.125rem; }
  .cmp__box > .cmp__actions { justify-content: flex-start; }
  .cmp__text { margin-bottom: 0.875rem; }
  .cmp__box .btn { min-height: 2.75rem; padding: 0 1rem; }
}

/* ---------- movimento: solo transform e opacity; la pagina ridotta è la pagina finita ---------- */
.hero__pics img { transition: opacity 1600ms ease; }
@media (prefers-reduced-motion: no-preference) {
  .hero__pics img { animation: settle-drift 26s linear infinite alternate; }
  .hero__pics img:nth-child(2) { animation-delay: -7s; }
  .hero__pics img:nth-child(3) { animation-delay: -14s; }
  .hero__pics img:nth-child(4) { animation-delay: -21s; }

  .js .name [data-line] { transform: translateY(105%); animation: load-line 900ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i) * 110ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: load-rise 560ms var(--ease-out) forwards; animation-delay: var(--d); }

  .js .armed[data-reveal], .js .armed [data-reveal] { opacity: 0; transform: translateY(24px); }
  .js .is-in[data-reveal], .js .is-in [data-reveal] { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(min(var(--i, 0), 4) * 75ms); }
  .js .giant.armed { opacity: 1; transform: none; }
  .js .giant { overflow: clip; overflow-clip-margin: 0.04em; }
  .js .giant.armed span { transform: translateY(105%); }
  .js .giant.is-in span { transition: transform 1000ms var(--ease-expo); }

  .js [data-shutter]::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--cover, var(--bg)); transform: scaleY(0); transform-origin: 50% 0%; pointer-events: none; }
  .js [data-shutter].armed::after { transform: none; }
  .js [data-shutter].is-in::after { transition: transform 1150ms var(--ease-in-out); }
  .js [data-shutter].armed img { transform: scale(1.1); }
  .js [data-shutter].is-in img { transition: transform 1500ms var(--ease-soft); }

  .js .verb.armed .verb__word { opacity: 0; transform: translateY(0.25em); }
  .js .verb.is-in .verb__word { transition: opacity 600ms var(--ease-out), transform 1000ms var(--ease-expo); }
  .js .verb.armed .verb__note { opacity: 0; transform: translateY(20px); }
  .js .verb.is-in .verb__note { transition: opacity 600ms var(--ease-out) 150ms, transform 800ms var(--ease-out) 150ms; }

  .calc__figure output.is-new { animation: figure-in 420ms var(--ease-out); }

  @supports (animation-timeline: view()) {
    .piece__pic img, .verb__img img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes settle-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes load-line { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }
@keyframes figure-in { from { opacity: 0.35; transform: translateY(0.12em); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.08) translateY(-3%); } to { transform: scale(1.08) translateY(3%); } }

/* ---------- stampa ---------- */
@media print {
  .site-header, .foot, .cmp, .cmp-modal, .aside, .nav, .topbar, .hero__pics { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .article-grid { display: block; padding: 0; }
  a { color: #000; }
}