/* 01-tokens.css */
/* ============================================================
   Gettoni. Vedi DESIGN.md: il linguaggio viene dal riferimento del
   cliente, il colore dai due filmati e dal marchio Bikerverse.
   Ogni rapporto di contrasto citato qui viene da tools/tavolozza.py.
   ============================================================ */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fragment-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- l'asfalto: dalle ombre del piano sequenza ------------------- */
  --asfalto: #14100E;      /* pagina scura, piede, menu */
  --asfalto-2: #1F1916;    /* campi e schede nello scuro: crema 15,2:1 */
  --asfalto-3: #2C2420;    /* filetti nello scuro, decorativi */
  --asfalto-rgb: 20, 16, 14;

  /* --- la carta: dal cielo chiaro dell'apertura -------------------- */
  --carta: #F3EFE9;        /* pagina chiara: inchiostro 16,5:1 */
  --carta-2: #E9E3DB;      /* scheda nella carta: inchiostro 14,8:1 */
  --bianco: #FFFFFF;

  --inchiostro: #14100E;
  --tenue: #675E57;        /* seconda voce sulla carta: 5,5:1 */
  --spento: #8E867D;       /* le voci non attive dell'elenco grande: 3,1:1, la soglia del testo grande.
                              Il riferimento le tiene al 30% (1,8:1), ma qui sono bottoni che si
                              leggono e si premono: il cammino del contrasto le ha segnate, e sono salite. */
  --crema: #F3EFE9;
  --crema-2: #ADA39A;      /* seconda voce sull'asfalto: 7,6:1 */

  /* --- il rosso del marchio ---------------------------------------
     --rosso e' SOLO per i fondi (bianco sopra: 5,0:1). Come parola
     sull'asfalto legge 3,8:1: per le parole ci sono le due varianti. */
  --rosso: #E1000F;
  --rosso-hover: #C4000D;
  --rosso-buio: #FF6B5E;   /* parola sull'asfalto: 6,8:1 */
  --rosso-carta: #B8000C;  /* parola sulla carta: 6,0:1 */

  /* --- l'ambra: il sole del filmato --------------------------------
     Solo segni: il tracciato, le coordinate, le tacche. 9,5:1. */
  --ambra: #F2A93B;

  --linea-carta: #DAD3CA;  /* filetti sulla carta, decorativi */
  --linea-ui: #8B8179;     /* bordo dei campi sulla carta: 3,3:1 */
  --linea-ui-b: #7D736B;   /* bordo dei campi sull'asfalto: 4,1:1 */

  /* --- i colori correnti: li rovescia [data-tone] ------------------- */
  --bg: var(--carta);
  --fg: var(--inchiostro);
  --fg-2: var(--tenue);
  --rule: var(--linea-carta);
  --rule-strong: var(--inchiostro);
  --accent-text: var(--rosso-carta);
  --field: var(--bianco);
  --field-line: var(--linea-ui);
  --card: var(--carta-2);

  /* --- carattere ---------------------------------------------------- */
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* La scala e' quella del riferimento a 1728 di larghezza: 69 il
     titolo d'apertura, 56 l'elenco e le frasi, 44 i titoli di
     sezione, 104 la chiamata finale. */
  --t-hero: clamp(2.5rem, 1rem + 3.1vw, 4.6rem);
  --t-list: clamp(2rem, .9rem + 2.4vw, 3.6rem);
  --t-h2: clamp(1.8rem, .9rem + 1.7vw, 2.9rem);
  --t-h3: clamp(1.3rem, 1.05rem + .55vw, 1.7rem);
  --t-mega: clamp(3rem, 1rem + 5.1vw, 7rem);
  --t-lede: clamp(1.1rem, 1rem + .3vw, 1.3rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-mono: .75rem;

  /* --- spazio -------------------------------------------------------- */
  --gutter: clamp(1.25rem, 3.35vw, 3.75rem);
  --inset: clamp(0rem, 7.8vw, 8.4rem);      /* il rientro del contenitore stretto: 192 a 1728 */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;
  --section: clamp(4.5rem, 3rem + 6vw, 9.5rem);

  /* --- forme ----------------------------------------------------------
     6 le immagini, 12 i pannelli grandi, 4 campi e bottone di testata,
     pastiglia piena tutto cio' che si preme. */
  --r-img: 6px;
  --r-panel: 12px;
  --r-field: 4px;
  --r-pill: 999px;

  --header-h: 5rem;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* Il tono di una sezione. Tutto il resto del foglio parla in
   --bg / --fg, quindi una sezione cambia veste con un attributo. */
[data-tone="buio"] {
  --bg: var(--asfalto);
  --fg: var(--crema);
  --fg-2: var(--crema-2);
  --rule: var(--asfalto-3);
  --rule-strong: var(--crema);
  --accent-text: var(--rosso-buio);
  --field: var(--asfalto-2);
  --field-line: var(--linea-ui-b);
  --card: var(--asfalto-2);
}
[data-tone="carta"] {
  --bg: var(--carta);
  --fg: var(--inchiostro);
  --fg-2: var(--tenue);
  --rule: var(--linea-carta);
  --rule-strong: var(--inchiostro);
  --accent-text: var(--rosso-carta);
  --field: var(--bianco);
  --field-line: var(--linea-ui);
  --card: var(--carta-2);
}

/* 02-base.css */
/* ============================================================
   Base: azzeramento, testo, bottoni, contenitori, entrate.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
  background: var(--asfalto);
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--crema);
  background: var(--asfalto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.menu-open, html.menu-open body { overflow: hidden; }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
picture { width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd, address { margin: 0; font-style: normal; }
address { font-style: normal; }

/* I titoli del riferimento: peso normale, crenatura stretta,
   interlinea 1. Niente grassetto: la gerarchia la fa il corpo. */
h1, h2, h3 {
  font-weight: 400;
  letter-spacing: -0.03em;
  word-spacing: .04em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); line-height: 1.04; }
h3 { font-size: var(--t-h3); letter-spacing: -0.025em; line-height: 1.12; }
b, strong { font-weight: 500; }
p { text-wrap: pretty; }

.lede { font-size: var(--t-lede); line-height: 1.4; color: var(--fg); max-width: 38em; }
.prose { display: grid; gap: 1em; color: var(--fg-2); max-width: 36em; }
.prose b, .prose strong { color: var(--fg); }
.prose a { color: var(--fg); }

/* L'occhiello: monospaziato maiuscolo, piccolo e grigio. Nessun
   segno davanti: ne' filetto ne' pallino. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.todo { background: var(--ambra); color: var(--inchiostro); padding: 0 .3em; border-radius: 2px; }

.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-link {
  position: fixed; left: var(--s4); top: var(--s4); z-index: 200;
  padding: .7em 1.1em; border-radius: var(--r-pill);
  background: var(--crema); color: var(--inchiostro); text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 2px solid var(--ambra); outline-offset: 3px; border-radius: 2px; }
[data-tone="carta"] :focus-visible { outline-color: var(--rosso-carta); }

/* --- contenitori --------------------------------------------------- */
.wrap { width: 100%; padding-inline: var(--gutter); margin-inline: auto; }
.wrap--narrow { padding-inline: calc(var(--gutter) + var(--inset)); }

.section {
  position: relative;
  padding-block: var(--section);
  background: var(--bg);
  color: var(--fg);
}
.section--tight { padding-block: calc(var(--section) * .55); }

/* --- il bottone -------------------------------------------------------
   Pastiglia alta 50, etichetta a peso 500, in coda il cerchio a filo
   con la freccia. Al passaggio il cerchio si riempie e la freccia
   scorre di un passo: e' l'unico movimento del bottone. */
.btn {
  --b-bg: var(--crema); --b-fg: var(--inchiostro); --b-line: transparent;
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 3.125rem;
  padding: .55rem .65rem .55rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--b-line);
  background: var(--b-bg); color: var(--b-fg);
  font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-dot {
  display: grid; place-items: center; flex: none;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn-dot svg { width: .72rem; height: .72rem; transition: transform .3s var(--ease); }
.btn:hover .btn-dot svg, .btn:focus-visible .btn-dot svg { transform: translateX(2px); }
.btn-ico { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; flex: none; }
.btn-ico svg { width: 100%; height: 100%; }
.btn--plain { padding-inline: 1.15rem; }

.btn--carta { --b-bg: var(--crema); --b-fg: var(--inchiostro); }
.btn--carta:hover { --b-bg: var(--bianco); }
.btn--carta:hover .btn-dot { background: var(--inchiostro); color: var(--crema); border-color: var(--inchiostro); }

.btn--rosso { --b-bg: var(--rosso); --b-fg: var(--bianco); }
.btn--rosso:hover { --b-bg: var(--rosso-hover); }
.btn--rosso:hover .btn-dot { background: var(--bianco); color: var(--rosso-hover); border-color: var(--bianco); }

.btn--ink { --b-bg: var(--inchiostro); --b-fg: var(--crema); }
[data-tone="buio"] .btn--ink { --b-bg: var(--asfalto-2); --b-line: var(--asfalto-3); }
.btn--ink:hover .btn-dot { background: var(--crema); color: var(--inchiostro); border-color: var(--crema); }

.btn--line { --b-bg: transparent; --b-fg: var(--fg); --b-line: var(--fg); }
.btn--line:hover { --b-bg: var(--fg); --b-fg: var(--bg); }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--s6); }
.actions--center { justify-content: center; }

/* --- la didascalia in pastiglia ---------------------------------------- */
.chip {
  display: inline-block;
  padding: .5em 1.05em;
  border-radius: var(--r-pill);
  background: rgba(var(--asfalto-rgb), .72);
  color: var(--crema);
  font-size: .94rem; line-height: 1.3;
}

/* --- elenco a spunte ------------------------------------------------------ */
.ticks { display: grid; gap: .7em; margin-top: var(--s5); }
.ticks li { position: relative; padding-left: 1.7em; color: var(--fg); }
.ticks li::before {
  content: ''; position: absolute; left: .1em; top: .42em;
  width: .7em; height: .38em;
  border-left: 1.5px solid var(--accent-text); border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg);
}

/* --- il titolo con il filetto ---------------------------------------------- */
.ruled-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6) var(--gutter);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-strong);
  margin-bottom: var(--s8);
}
.ruled-head h2 { max-width: 13em; }
.ruled-cols { columns: 2; column-gap: var(--s5); color: var(--fg); font-size: var(--t-body); }
.ruled-cols p { break-inside: avoid; margin-bottom: 1em; }
.ruled-cols--one { columns: 1; max-width: 30em; justify-self: end; }
@media (max-width: 900px) {
  .ruled-head { grid-template-columns: 1fr; margin-bottom: var(--s7); }
  .ruled-cols { columns: 1; }
  .ruled-cols--one { justify-self: start; }
}

/* --- entrata in scena ---------------------------------------------------------
   Dietro .js: senza JavaScript niente parte da zero, quindi niente
   resta invisibile. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* le immagini che scorrono piu' piano del testo */
[data-parallax] img, [data-parallax-soft] img { transform: translate3d(0, calc(var(--shift, 0) * 1px), 0) scale(1.14); will-change: transform; }
[data-parallax-soft] img { transform: translate3d(0, calc(var(--shift, 0) * 1px), 0) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  [data-parallax] img, [data-parallax-soft] img { transform: none; }
}

.root-langs { display: flex; gap: var(--s5); margin-top: var(--s6); font-size: var(--t-lede); }

/* 03-layout.css */
/* ============================================================
   Testata, menu, piede, pannello di scaricamento.
   ============================================================ */

/* ------------------------------------------------------------
   La testata del riferimento: NESSUNA BARRA. Testo appoggiato sul
   contenuto, il marchio al centro, il bottone rettangolare a destra.

   Senza JavaScript e' `absolute`: sta in cima, sopra un'apertura che
   in ogni pagina e' scura. Con JavaScript diventa `fixed` e app.js le
   scrive addosso il tono della sezione che le passa sotto.
   ------------------------------------------------------------ */
.site-header {
  position: absolute; z-index: 60; inset: 0 0 auto 0;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 1.1rem 0 clamp(1.1rem, 1.85vw, 2rem);
  color: var(--fg);
  pointer-events: none;
}
.js .site-header { position: fixed; }
/* ogni gruppo porta il proprio tono (app.js), quindi il colore sta sul
   gruppo e non sulla riga */
.site-header > * { pointer-events: auto; color: var(--fg); transition: color .3s var(--ease); }

.hd-left { display: flex; align-items: center; gap: var(--s5); }
.hd-right { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1rem, 1.7vw, 1.8rem); }
.hd-nav { display: flex; gap: clamp(1rem, 1.7vw, 1.8rem); }

.hd-link, .hd-app summary, .hd-lang, .menu-toggle {
  font-size: .97rem; font-weight: 400; letter-spacing: -0.01em;
  text-decoration: none; color: inherit;
  padding: .5rem 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .3rem) / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.hd-link:hover, .hd-link[aria-current="page"], .hd-app summary:hover, .hd-lang:hover { background-size: 100% 1px; }
.hd-lang { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .04em; }

.site-brand { display: block; color: inherit; padding: .6rem .4rem; }
.site-brand .wordmark { width: clamp(7.4rem, 8.5vw, 9.2rem); height: auto; }

/* il bottone di testata: rettangolo a raggio 4, il piu' nel cerchio */
.hd-cta {
  display: inline-flex; align-items: center; gap: .7rem;
  height: 2.7rem; padding: 0 .55rem 0 1.1rem;
  border-radius: var(--r-field);
  background: var(--rosso); color: var(--bianco);
  font-size: 1rem; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease);
}
.hd-cta i { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid currentColor; transition: transform .4s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.hd-cta i svg { width: .72rem; height: .72rem; }
.hd-cta:hover { background: var(--rosso-hover); }
.hd-cta:hover i { transform: rotate(90deg); background: var(--bianco); color: var(--rosso-hover); border-color: var(--bianco); }

/* la voce di sinistra: apre i pilastri */
.hd-app { position: relative; }
.hd-app summary { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.hd-app summary::-webkit-details-marker { display: none; }
.hd-app summary i { display: grid; place-items: center; width: 1rem; height: 1rem; transition: transform .35s var(--ease); }
.hd-app summary i svg { width: .62rem; height: .62rem; }
.hd-app[open] summary i { transform: rotate(45deg); }
.hd-pop {
  position: absolute; left: -1rem; top: calc(100% + .6rem);
  width: min(24rem, calc(100vw - 2rem));
  padding: 1.1rem 1rem .6rem;
  border-radius: var(--r-panel);
  background: var(--asfalto-2); color: var(--crema);
  border: 1px solid var(--asfalto-3);
}
.hd-pop .eyebrow { color: var(--crema-2); padding: 0 .5rem .6rem; }
.hd-pop a {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; align-items: baseline;
  padding: .7rem .5rem; border-top: 1px solid var(--asfalto-3);
  text-decoration: none; border-radius: 4px;
  transition: background-color .2s var(--ease);
}
.hd-pop a:hover, .hd-pop a[aria-current="page"] { background: var(--asfalto-3); }
.hd-pop a b { font-weight: 400; font-size: 1.05rem; letter-spacing: -0.015em; }
.hd-pop a span { font-size: var(--t-small); color: var(--crema-2); }

.menu-toggle { display: none; }

@media (max-width: 1020px) {
  .hd-nav, .hd-app, .hd-lang { display: none; }
  .menu-toggle { display: inline-block; }
  .site-header { padding-inline: var(--gutter) .7rem; }
}
@media (max-width: 520px) {
  :root { --header-h: 4.2rem; }
  .hd-cta { height: 2.4rem; padding-left: .8rem; gap: .45rem; font-size: .92rem; }
  .hd-cta i { width: 1.5rem; height: 1.5rem; }
  .site-brand .wordmark { width: 6.6rem; }
}

/* ------------------------------------------------------------
   Il menu a tutto schermo. Nell'HTML si apre con :target, quindi
   funziona senza JavaScript.
   ------------------------------------------------------------ */
.site-menu {
  position: fixed; inset: 0; z-index: 120;
  background: var(--asfalto); color: var(--crema);
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
  overflow-y: auto; overscroll-behavior: contain;
}
.site-menu:target, .site-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.menu-inner { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s6); padding: 1.3rem var(--gutter) var(--s6); }
.menu-close { justify-self: start; font-size: .97rem; text-decoration: none; padding: .5rem 0; }
.menu-list { align-self: center; display: grid; gap: .1rem; }
.menu-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s4);
  padding: .55rem 0; border-top: 1px solid var(--asfalto-3);
  text-decoration: none;
}
.menu-list a span { font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.1; }
.menu-list a small { font-size: var(--t-small); color: var(--crema-2); text-align: right; max-width: 14em; }
.menu-list a[aria-current="page"] span { color: var(--rosso-buio); }
.menu-foot { display: grid; gap: var(--s5); }
.menu-foot .actions { margin-top: 0; }
.menu-langs { display: flex; gap: var(--s5); font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: .04em; }
.menu-langs a { text-decoration: none; color: var(--crema-2); }
.menu-langs a[aria-current="true"] { color: var(--crema); }
@media (max-width: 520px) { .menu-list a small { display: none; } }

/* ------------------------------------------------------------
   Il piede del riferimento: scuro, la frase a sinistra con la
   pastiglia a contorno, colonne con testa in monospaziato,
   l'iscrizione, la riga legale sopra un filetto.
   ------------------------------------------------------------ */
.site-footer { background: var(--asfalto); color: var(--crema); padding-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.ft-grid {
  display: grid;
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 2.4fr) minmax(0, 2.4fr);
  grid-template-areas: "claim menu social" "claim news news";
  gap: var(--s8) var(--gutter);
  padding-bottom: var(--s8);
}
.ft-claim { grid-area: claim; }
.ft-claim h2 { max-width: 9em; }
.ft-claim .btn { margin-top: var(--s5); }
.ft-segno { display: block; width: 3.1rem; margin-bottom: var(--s5); }
.ft-col:nth-of-type(2) { grid-area: menu; }
.ft-col--social { grid-area: social; }
.ft-news { grid-area: news; max-width: 36rem; }

.ft-col .eyebrow { margin-bottom: var(--s5); }
.ft-col ul { display: grid; gap: .62rem; }
.ft-col a { text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; gap: .6rem; }
.ft-col a:hover { text-decoration: underline; }
.ft-col a i { width: 1.15rem; height: 1.15rem; display: grid; place-items: center; }
.ft-col a i svg { width: 100%; height: 100%; }

.ft-news h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); margin-bottom: var(--s4); }
.ft-news-row { display: flex; gap: .6rem; }
.ft-news-row input {
  flex: 1; min-width: 0; height: 3.125rem; padding: 0 1rem;
  border-radius: var(--r-field); border: 1px solid var(--asfalto-3);
  background: var(--asfalto-2); color: var(--crema); font-size: .95rem;
}
.ft-news-row input::placeholder { color: var(--crema-2); opacity: 1; }
.ft-news-row input:focus-visible { outline-offset: 0; border-color: var(--ambra); }
.ft-news-row input[aria-invalid="true"] { border-color: var(--rosso-buio); }
.ft-news-note { margin-top: .7rem; font-size: var(--t-small); color: var(--crema-2); }
.ft-news-note a { color: var(--crema); }
.ft-news-ok { margin-top: .7rem; color: var(--crema); }

.ft-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s6);
  padding-block: var(--s5) var(--s6);
  font-size: var(--t-small); color: var(--crema-2);
  position: relative;
}
.ft-legal::before { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--asfalto-3); }
.ft-legal ul { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.ft-legal a { color: var(--crema); text-decoration: none; }
.ft-legal a:hover { text-decoration: underline; }

@media (max-width: 1020px) {
  .ft-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "claim claim" "menu social" "news news"; gap: var(--s7) var(--gutter); }
}

/* ------------------------------------------------------------
   Il pannello di scaricamento: codice QR e due negozi. Sta in basso
   a destra, entra dal basso. Sul telefono non esiste.
   ------------------------------------------------------------ */
.dock {
  position: fixed; z-index: 90; right: 1.1rem; bottom: 1.1rem;
  width: min(29rem, calc(100vw - 2.2rem));
  display: grid; grid-template-columns: 8.4rem 1fr; gap: 1.1rem; align-items: center;
  padding: 1rem 1.1rem 1rem 1rem;
  border-radius: var(--r-panel);
  background: var(--asfalto-2); color: var(--crema);
  border: 1px solid var(--asfalto-3);
  transform: translateY(calc(100% + 2rem)); opacity: 0;
  transition: transform .6s var(--ease), opacity .4s var(--ease);
}
.dock.is-open { transform: none; opacity: 1; }
.dock-qr { border-radius: var(--r-img); overflow: hidden; background: #fff; }
.dock-qr svg { width: 100%; height: auto; }
.dock-text h2 { font-size: 1.35rem; letter-spacing: -0.03em; margin: .35rem 0 .4rem; }
.dock-text > p:not(.eyebrow) { font-size: var(--t-small); color: var(--crema-2); }
.dock .actions { margin-top: .8rem; gap: .4rem; }
.dock .btn { min-height: 2.4rem; padding: .3rem .4rem .3rem .8rem; font-size: .86rem; gap: .5rem; }
.dock .btn-dot { width: 1.45rem; height: 1.45rem; }
.dock .btn-ico { width: .95rem; height: .95rem; }
.dock-close {
  position: absolute; right: .6rem; top: .6rem;
  display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  color: var(--crema-2);
}
.dock-close svg { width: .7rem; height: .7rem; transform: rotate(45deg); }
.dock-close:hover { color: var(--crema); background: var(--asfalto-3); }
@media (max-width: 760px) { .dock { display: none !important; } }

/* 04-scrolly.css */
/* ============================================================
   I due filmati.

   DUE FILMATI, DUE MESTIERI. L'apertura riproduce e basta: un <video>
   muto in ciclo, da 4 a 11 MB a seconda dello schermo. Il piano
   sequenza si scrubba con lo scroll: 959 JPEG su canvas.

   TUTTI E DUE A PIENO CAMPO, 100svh, con la testata appoggiata sopra.
   Non e' una scelta di questo progetto: e' il formato.

   LE VELATURE SONO D'ASFALTO e sono misurate, non ereditate
   (tools/contrasto.py, che legge le forme da questo file):

   - IN ALTO, su tutti e due: una lavata corta sotto la testata. Il
     cielo dei due filmati e' chiaro e la testata e' testo crema da 15
     pixel senza barra: senza lavata leggerebbe 1,5:1, e con la prima
     lavata (0,62 in cima) stava ancora a 3,1:1. A 0,82 passa.
   - APERTURA, in basso: una fascia larga. L'apertura dura il tempo di
     leggere un titolo, e tre inquadrature su cinque hanno il fondo
     chiaro proprio in basso a sinistra (la roccia vista dall'alto, il
     piazzale all'ora blu).
   - PIANO SEQUENZA, in basso a sinistra: NON una fascia. Una lavata
     locale che parte dall'angolo, con la densita' scritta capitolo per
     capitolo (--d): dove il filmato e' gia' asfalto in ombra resta
     quasi spenta, e sale solo sul telefono e sul volo, dove sotto le
     parole passa terra illuminata.
   ============================================================ */

/* ------------------------------------------------------------
   L'apertura.
   ------------------------------------------------------------ */
.videohero {
  position: relative;
  height: 100svh; min-height: 34rem;
  overflow: hidden;
  background: var(--asfalto); color: var(--crema);
  isolation: isolate;
}
.videohero video, .videohero .vh-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.videohero .vh-poster { position: absolute; inset: 0; z-index: 0; }
.videohero > video { z-index: 1; }

.vh-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--asfalto-rgb), .82) 0, rgba(var(--asfalto-rgb), .74) 4rem, rgba(var(--asfalto-rgb), .32) 8rem, rgba(var(--asfalto-rgb), 0) 13rem),
    linear-gradient(to top, rgba(var(--asfalto-rgb), .78) 0%, rgba(var(--asfalto-rgb), .7) 30%, rgba(var(--asfalto-rgb), .34) 50%, rgba(var(--asfalto-rgb), 0) 68%);
}

.vh-inner {
  position: absolute; z-index: 3; inset: auto 0 0 0;
  padding: 0 var(--gutter) clamp(1.6rem, 3.35vw, 3.6rem);
}
.vh-text { max-width: 60rem; }
.vh-text .eyebrow { color: var(--crema); margin-bottom: .9rem; }
.vh-text h1 { max-width: 11.5em; }
.vh-lede { margin-top: 1rem; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); color: var(--crema); max-width: 44em; }
.vh-text .actions { margin-top: 1.5rem; }

.vh-scroll {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(1.2rem, 2.4vw, 2.4rem); transform: translateX(-50%);
  display: grid; justify-items: center; gap: .35rem;
  font-size: .86rem; color: var(--crema); text-decoration: none;
}
.vh-scroll i { width: .8rem; height: .8rem; animation: nudge 2.4s var(--ease-io) infinite; }
.vh-scroll svg { width: 100%; height: 100%; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 80% { transform: translateY(4px); } }

/* Sul telefono il blocco di testo e' alto mezzo schermo (l'occhiello
   sta al 47% dell'altezza), quindi la fascia sale con lui: misurata a
   3,9:1 con la fascia del desktop, qui passa. */
@media (max-width: 640px) {
  .vh-veil {
    background:
      linear-gradient(to bottom, rgba(var(--asfalto-rgb), .82) 0, rgba(var(--asfalto-rgb), .74) 4rem, rgba(var(--asfalto-rgb), .32) 8rem, rgba(var(--asfalto-rgb), 0) 13rem),
      linear-gradient(to top, rgba(var(--asfalto-rgb), .84) 0%, rgba(var(--asfalto-rgb), .8) 40%, rgba(var(--asfalto-rgb), .62) 56%, rgba(var(--asfalto-rgb), 0) 78%);
  }
}
@media (max-width: 900px) {
  .vh-inner { padding-bottom: 4.6rem; }
  .vh-text h1 { max-width: 9.5em; }
}
/* Sotto i 520 l'apertura tiene UN bottone: il secondo costa
   cinquantasei pixel su uno schermo dove il blocco e' gia' alto, e
   porta a una sezione che sta due dita piu' sotto. */
@media (max-width: 520px) {
  .vh-text .actions .btn--carta { display: none; }
}

/* ------------------------------------------------------------
   Il piano sequenza.

   L'altezza della sezione E' la velocita' dello scrub: 959
   fotogrammi su `altezza - 100svh`. A 1000vh su uno schermo da 900
   fanno 8,4 px per fotogramma. Il telefono ne vuole di piu', non di
   meno: una scorsa col dito copre molta piu' distanza di una tacca di
   rotellina.
   ------------------------------------------------------------ */
.scrolly { position: relative; height: 1000vh; background: var(--asfalto); color: var(--crema); }
@media (max-width: 900px) { .scrolly { height: 1250vh; } }

.scrolly-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* Griglia e non posizionamento assoluto: apertura e didascalie
     stanno nella stessa cella e si sovrappongono da sole. `end`
     ancora il testo al bordo BASSO, dove il filmato e' asfalto. */
  display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr;
  align-items: end;
}
.scrolly-canvas, .scrolly-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
/* <picture> e' un blocco ad altezza automatica: senza dargli il 100%
   l'immagine dentro prende la propria altezza naturale (16:9) e sotto
   resta una fascia vuota su ogni palco piu' alto di 16:9. */
.scrolly-poster picture { display: block; width: 100%; height: 100%; }
.scrolly-poster img { width: 100%; height: 100%; object-fit: cover; }
[data-painted="true"] .scrolly-poster { opacity: 0; }

/* La lavata locale. La forma e' fissa, la densita' e' --d: i
   gradienti non si interpolano, l'opacita' si'. */
.scrolly-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--asfalto-rgb), .82) 0, rgba(var(--asfalto-rgb), .74) 4rem, rgba(var(--asfalto-rgb), .32) 8rem, rgba(var(--asfalto-rgb), 0) 13rem);
}
.scrolly-veil::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 74% at 0% 100%,
    rgba(var(--asfalto-rgb), 1) 0%, rgba(var(--asfalto-rgb), .92) 34%, rgba(var(--asfalto-rgb), .5) 62%, rgba(var(--asfalto-rgb), 0) 100%);
  opacity: var(--d, .6);
  transition: opacity .5s var(--ease);
}
/* la densita' per capitolo: scritta da tools/contrasto.py, non a occhio */
.scrolly-stage { --d: .62; }
.scrolly-stage:has(.scrolly-phase:nth-of-type(1).is-active) { --d: 0.46; }
.scrolly-stage:has(.scrolly-phase:nth-of-type(2).is-active) { --d: 0.76; }
.scrolly-stage:has(.scrolly-phase:nth-of-type(3).is-active) { --d: 0.35; }
.scrolly-stage:has(.scrolly-phase:nth-of-type(4).is-active) { --d: 0.40; }
.scrolly-stage:has(.scrolly-phase:nth-of-type(5).is-active) { --d: 0.35; }
.scrolly-stage:has(.scrolly-phase:nth-of-type(6).is-active) { --d: 0.54; }

.scrolly-lead, .scrolly-captions {
  grid-area: 1 / 1; position: relative; z-index: 3;
  width: 100%;
  padding: 0 var(--gutter) clamp(1.8rem, 3.35vw, 3.6rem) calc(var(--gutter) + clamp(2.4rem, 4.2vw, 4.6rem));
}
.scrolly-captions { display: grid; align-items: end; }
.scrolly-phase { grid-area: 1 / 1; opacity: 0; }

/* la didascalia: l'occhiello in monospaziato, il titolo al corpo dei
   titoli di sezione, una riga di testo. E' il blocco di testo
   dell'apertura del riferimento, rifatto sei volte. */
.cap { max-width: min(36rem, 48vw); }
.cap .eyebrow, .cap-kicker {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--crema); margin-bottom: .9rem;
}
.cap-kicker span { color: var(--ambra); margin-right: .9em; }
.cap h2, .cap h3 { font-size: var(--t-h2); letter-spacing: -0.03em; line-height: 1.04; }
.cap-text { margin-top: .9rem; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); color: var(--crema); max-width: 30em; }

/* Le parole entrano a fuoco: e' il gesto delle frasi grandi del
   riferimento. Il motore scrive opacita' e translateY sulla fase,
   quindi il mio effetto vive sul filtro del contenuto. */
.scrolly[data-mode="scrub"] .scrolly-phase .cap { filter: blur(10px); transition: filter .7s var(--ease); }
.scrolly[data-mode="scrub"] .scrolly-phase.is-active .cap { filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .scrolly[data-mode="scrub"] .scrolly-phase .cap { filter: none; } }

/* ------------------------------------------------------------
   IL RIGHELLO.

   Il motore scrive la LARGHEZZA di `.scrolly-progress i` da 0 a 100%.
   La striscia e' ruotata di un quarto di giro attorno al proprio
   angolo in alto a sinistra: la sua lunghezza diventa un'altezza e le
   tacche, che nella striscia sono righe verticali, diventano
   orizzontali. Quelle passate sono d'ambra e un terzo piu' lunghe.
   ------------------------------------------------------------ */
.scrolly-progress {
  --len: 46svh; --tick: 1.15rem;
  position: absolute; z-index: 4;
  left: calc(var(--gutter) * .55 + var(--tick)); top: calc(50% - var(--len) / 2);
  width: var(--len); height: var(--tick);
  transform-origin: 0 0; transform: rotate(90deg);
  background: repeating-linear-gradient(to right, rgba(243, 239, 233, .55) 0 1px, transparent 1px 10px);
  opacity: 0;
}
.scrolly-progress i {
  position: absolute; left: 0; bottom: 0; height: 140%; width: 0;
  background: repeating-linear-gradient(to right, var(--ambra) 0 2px, transparent 2px 10px);
}
.scrolly-counter {
  position: absolute; z-index: 4;
  left: calc(var(--gutter) * .55); top: calc(50% - 23svh - 2.6rem);
  padding: .18rem .6rem; border-radius: var(--r-pill);
  border: 1px solid var(--ambra); color: var(--ambra); background: rgba(var(--asfalto-rgb), .6);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  opacity: 0;
}
.scrolly-counter b { font-weight: 400; }
[data-mode="static"] .scrolly-progress, [data-mode="static"] .scrolly-counter { display: none; }

@media (max-width: 760px) {
  .scrolly-progress { --len: 34svh; --tick: .8rem; left: calc(.5rem + var(--tick)); top: 17svh; }
  .scrolly-counter { left: .5rem; top: calc(17svh - 2.2rem); }
  .scrolly-lead, .scrolly-captions { padding: 0 var(--gutter) 2rem var(--gutter); }
  .cap { max-width: 100%; }
  /* Sul telefono la didascalia va a tutta larghezza, quindi esce
     dall'ellisse d'angolo: la lavata diventa una fascia dal basso,
     corta, alla stessa densita' per capitolo. */
  .scrolly-veil::after {
    background: linear-gradient(to top, rgba(var(--asfalto-rgb), 1) 0%, rgba(var(--asfalto-rgb), .94) 30%, rgba(var(--asfalto-rgb), .5) 46%, rgba(var(--asfalto-rgb), 0) 60%);
  }
}

/* ------------------------------------------------------------
   Il ripiego senza JavaScript.

   `data-mode="static"` e' quello che parte nell'HTML; il motore
   promuove. Senza script la sezione e' una colonna editoriale: sei
   capitoli, ognuno col proprio fermo immagine, che stanno GIA' nel
   markup. L'attributo sta sulla sezione stessa, non su un antenato.
   ------------------------------------------------------------ */
.scrolly[data-mode="static"] { height: auto; }
[data-mode="static"] .scrolly-stage { position: static; height: auto; overflow: visible; display: block; align-items: normal; }
[data-mode="static"] .scrolly-canvas, [data-mode="static"] .scrolly-veil { display: none; }
[data-mode="static"] .scrolly-poster { position: relative; height: 70svh; }
[data-mode="static"] .scrolly-lead, [data-mode="static"] .scrolly-captions {
  padding: var(--s8) calc(var(--gutter) + var(--inset)) 0; display: block;
}
[data-mode="static"] .scrolly-captions { padding-bottom: var(--s8); }
[data-mode="static"] .scrolly-phase { opacity: 1; padding-top: var(--s8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gutter); align-items: center; }
[data-mode="static"] .cap { max-width: none; }
[data-mode="static"] .scrolly-still img { width: 100%; height: auto; border-radius: var(--r-img); }
[data-mode="scrub"] .scrolly-still { display: none; }
@media (max-width: 760px) { [data-mode="static"] .scrolly-phase { grid-template-columns: 1fr; gap: var(--s5); } }

/* 05-blocks.css */
/* ============================================================
   I blocchi.
   ============================================================ */

/* ------------------------------------------------------------
   IL TELEFONO. Cornice, fotocamera e riflesso sono CSS: lo schermo
   e' l'unica immagine. Proporzioni misurate sul PNG del cliente
   (cornice 1168 x 2500, schermo 1073 x 2400): lo schermo sta al 4,1%
   dai lati, all'1,7% dall'alto e al 2,3% dal basso.

   Ruota in 3D sotto il puntatore (--rx, --ry da app.js), di pochi
   gradi, e un riflesso gli scorre sopra dalla parte opposta.
   ------------------------------------------------------------ */
.phone { --rx: 0deg; --ry: 0deg; --gx: 30%; --gy: 0%; width: 100%; perspective: 1400px; }
.phone-body {
  position: relative; aspect-ratio: 1168 / 2500;
  border-radius: 13.5% / 6.3%;
  background: linear-gradient(145deg, #4a4643 0%, #211d1b 28%, #15110f 60%, #35302d 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 2.2rem 4rem -1.4rem rgba(0, 0, 0, .55);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
  will-change: transform;
}
.phone-screen {
  position: absolute; inset: 1.7% 4.1% 2.3% 4.1%;
  border-radius: 10.4% / 4.7%;
  overflow: hidden; background: #0b0908;
}
.phone-shot, .phone-shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone-shot img { object-fit: cover; }
.phone-shot { opacity: 0; transform: scale(1.04); filter: blur(8px); transition: opacity .55s var(--ease), transform .7s var(--ease), filter .55s var(--ease); }
.phone-shot.is-on { opacity: 1; transform: none; filter: none; }
.phone-cam { position: absolute; left: 50%; top: 3%; width: 3.4%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #0b0908; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .06); }
.phone-glare {
  position: absolute; inset: 1.7% 4.1% 2.3% 4.1%; border-radius: 10.4% / 4.7%; pointer-events: none;
  background: radial-gradient(60% 40% at var(--gx) var(--gy), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .phone-body { transform: none; } }

/* ------------------------------------------------------------
   L'ELENCO GRANDE. Su carta: la colonna dei titoli a 56, quello
   attivo inchiostro, gli altri spenti. A destra il pannello resta
   fermo (sticky) mentre l'elenco scorre.
   ------------------------------------------------------------ */
.featurelist { padding-block: clamp(3rem, 2rem + 3vw, 5rem) 0; }
.fl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--gutter); align-items: start; }
/* La colonna e' piu' alta dello schermo DI PROPOSITO: e' lei a dare al
   pannello la corsa in cui restare fermo. La voce attiva e' quella che
   attraversa la mezzeria, quindi l'ultima deve poterci arrivare prima
   che il pannello si sganci: da qui il mezzo schermo in fondo. */
.fl-col { padding-block: calc(var(--header-h) + clamp(1rem, 5svh, 3rem)) 46svh; }
.fl-col .eyebrow { margin-bottom: var(--s7); }
.fl-list { display: grid; gap: clamp(3rem, 19svh, 12rem); }
.fl-title {
  display: block; width: 100%;
  font-size: var(--t-list); letter-spacing: -0.03em; line-height: 1.04; color: var(--inchiostro);
  transition: color .45s var(--ease);
}
.fl-text { max-width: 27em; margin-top: .8rem; color: var(--tenue); font-size: 1.05rem; }
/* lo stato spento esiste solo con JavaScript: senza, tutte le voci
   sono accese e leggibili */
.js .fl-item:not(.is-active) .fl-title { color: var(--spento); }
.js .fl-item .fl-text { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease); }
.js .fl-item .fl-text > * { overflow: hidden; }
.js .fl-item.is-active .fl-text { grid-template-rows: 1fr; opacity: 1; margin-top: .8rem; }
.js .fl-item:not(.is-active) .fl-title:hover { color: var(--tenue); }
.fl-col .actions { margin-top: clamp(3rem, 12svh, 7rem); }

.fl-stage { position: sticky; top: 0; height: 100svh; padding-block: calc(var(--header-h) - .6rem) 1.6rem; }
.fl-panel {
  position: relative; height: 100%;
  border-radius: var(--r-panel); overflow: hidden;
  background:
    radial-gradient(90% 70% at 70% 8%, rgba(242, 169, 59, .34), rgba(242, 169, 59, 0) 60%),
    radial-gradient(80% 60% at 10% 100%, rgba(225, 0, 15, .22), rgba(225, 0, 15, 0) 62%),
    var(--asfalto);
  display: grid; place-items: center;
}
.fl-panel .phone { width: min(44%, calc((100svh - var(--header-h) - 9.5rem) * .4672)); transform: translateY(-1.2rem); }
.fl-chips { position: absolute; right: 1.2rem; bottom: 1.2rem; left: 1.2rem; display: grid; justify-items: end; }
.fl-chip { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); text-align: right; }
.fl-chip.is-on { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .featurelist { padding-top: 0; }
  .fl-grid { grid-template-columns: 1fr; gap: 0; }
  .fl-stage { order: -1; height: 58svh; min-height: 24rem; padding-block: var(--header-h) .6rem; z-index: 2; background: var(--carta); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .fl-panel .phone { width: min(38%, calc((58svh - var(--header-h) - 6rem) * .4672)); transform: translateY(-1rem); }
  .fl-chip { font-size: .82rem; }
  .fl-col { padding-block: var(--s7) 30svh; }
  .fl-list { gap: clamp(2.6rem, 16svh, 7rem); }
}

/* ------------------------------------------------------------
   Fotografia a pieno campo con la frase.
   ------------------------------------------------------------ */
.statement { position: relative; min-height: 100svh; overflow: hidden; background: var(--asfalto); color: var(--crema); display: grid; isolation: isolate; }
.st-media, .st-media picture, .st-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-media img { object-fit: cover; }
.st-veil { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(to bottom, rgba(var(--asfalto-rgb), .82) 0, rgba(var(--asfalto-rgb), .74) 4rem, rgba(var(--asfalto-rgb), .32) 8rem, rgba(var(--asfalto-rgb), 0) 13rem),
  linear-gradient(100deg, rgba(var(--asfalto-rgb), .74) 0%, rgba(var(--asfalto-rgb), .5) 38%, rgba(var(--asfalto-rgb), 0) 66%),
  linear-gradient(to top, rgba(var(--asfalto-rgb), .7) 0%, rgba(var(--asfalto-rgb), 0) 34%); }
.st-inner { position: relative; z-index: 2; display: grid; grid-template-rows: 1fr auto; padding-block: calc(var(--header-h) + 3rem) clamp(2rem, 3.35vw, 3.6rem); }
.st-inner h2 { align-self: center; font-size: var(--t-list); letter-spacing: -0.035em; max-width: 12.5em; }
.st-foot { display: flex; align-items: end; justify-content: space-between; gap: var(--gutter); }
.st-foot p { max-width: 27em; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
@media (max-width: 700px) { .st-foot { flex-direction: column; align-items: flex-start; } }

/* ------------------------------------------------------------
   IL TRACCIATO.
   ------------------------------------------------------------ */
.tracciato { overflow: clip; padding-bottom: calc(var(--section) + 5rem); }
.tr-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.tr-line path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.tr-line-bg { stroke: var(--asfalto-3); stroke-width: 1; }
.tr-line-fg { stroke: var(--ambra); stroke-width: 1.5; }
/* il tratto si disegna con lo scroll: --p va da 0 a 1 (app.js). Senza
   JavaScript il tracciato e' gia' intero. */
.js .tr-line-fg { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.tracciato .wrap { position: relative; z-index: 1; }

.tr-head { max-width: 46rem; margin-bottom: var(--s9); }
.tr-head .eyebrow { margin-bottom: var(--s5); }
.tr-head h2 { font-size: var(--t-list); letter-spacing: -0.035em; }
.tr-head .lede { margin-top: var(--s5); color: var(--crema-2); }

.tr-items { display: grid; gap: clamp(5rem, 16svh, 11rem); }
.tr-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.tr-media { grid-column: 2 / span 5; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: var(--asfalto-2); }
.tr-media picture, .tr-media img { width: 100%; height: 100%; }
.tr-media img { object-fit: cover; }
.tr-text { grid-column: 8 / span 4; }
.tr-item--flip .tr-media { grid-column: 7 / span 5; order: 2; }
.tr-item--flip .tr-text { grid-column: 2 / span 4; order: 1; }
.tr-text h3 { font-size: var(--t-h2); letter-spacing: -0.03em; line-height: 1.04; }
.tr-text p { margin-top: var(--s4); color: var(--crema); max-width: 25em; }
.tr-text .btn { margin-top: var(--s5); }
/* la scheda deve coprire la linea che le passa dietro */
.tr-text { position: relative; }
.tr-text::before { content: ''; position: absolute; inset: -1.2rem -1.4rem; background: var(--asfalto); z-index: -1; border-radius: var(--r-panel); }

.tr-mark { position: absolute; z-index: 1; display: flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .68rem; line-height: 1.25; color: var(--crema-2); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; transform: translate(-.3rem, -50%); }
.tr-mark i { width: .62rem; height: .62rem; border-radius: 50%; border: 1px solid var(--ambra); background: var(--asfalto); flex: none; }
.tr-mark.is-on { opacity: 1; }
.tr-mark.is-on i { background: var(--ambra); }

/* il quadrante: tappe, chilometri, ore del percorso che si disegna */
.tr-readout {
  position: sticky; bottom: 1.1rem; z-index: 3;
  margin: var(--s8) auto 0 var(--gutter); width: max-content; max-width: calc(100% - var(--gutter) * 2);
  display: flex; align-items: center; gap: 1.4rem;
  padding: .65rem 1.1rem; border-radius: var(--r-pill);
  background: var(--asfalto-2); border: 1px solid var(--asfalto-3);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .02em; color: var(--crema-2);
}
.tr-readout-name { color: var(--crema); text-transform: uppercase; letter-spacing: .04em; }
.tr-readout dl { display: flex; gap: 1.4rem; }
.tr-readout dl > div { display: flex; gap: .5rem; align-items: baseline; }
.tr-readout dt { text-transform: uppercase; }
.tr-readout dd { color: var(--ambra); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.tr-readout dd b { font-weight: 400; }
.tr-readout dd span { color: var(--crema-2); }

@media (max-width: 900px) {
  .tr-item, .tr-item--flip { grid-template-columns: 1fr; gap: var(--s5); }
  .tr-media, .tr-item--flip .tr-media { grid-column: 1; order: 1; }
  .tr-text, .tr-item--flip .tr-text { grid-column: 1; order: 2; }
  .tr-mark { display: none; }
  /* sul telefono la linea passerebbe sopra il titolo: il titolo prende
     il fondo della sezione e la linea gli scorre dietro */
  .tr-head { background: var(--asfalto); padding-block: .4rem 1rem; margin-bottom: var(--s8); }
  .tr-readout { margin-left: var(--gutter); gap: .8rem; padding: .55rem .9rem; font-size: .66rem; }
  .tr-readout-name { display: none; }
  .tr-readout dl { gap: .9rem; }
}

/* ------------------------------------------------------------
   La striscia di fotografie.
   ------------------------------------------------------------ */
.strip { background: var(--asfalto); padding-block: 0 var(--section); overflow: hidden; }
.strip-row { display: flex; gap: clamp(.6rem, 1vw, 1rem); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; transform: translate3d(calc(var(--shift, 0) * 1px), 0, 0); will-change: transform; }
.strip-row::-webkit-scrollbar { display: none; }
.js .strip-row { overflow: visible; }
.strip-fig { flex: none; width: clamp(15rem, 31vw, 34rem); aspect-ratio: 3 / 2; border-radius: var(--r-img); overflow: hidden; background: var(--asfalto-2); }
.strip-fig--tall { width: clamp(10rem, 20.6vw, 22.6rem); aspect-ratio: 1 / 1; }
.strip-fig picture, .strip-fig img { width: 100%; height: 100%; }
.strip-fig img { object-fit: cover; }

/* ------------------------------------------------------------
   Titolo con il filetto e immagine.
   ------------------------------------------------------------ */
.ruled-fig { aspect-ratio: 16 / 8.2; border-radius: var(--r-img); overflow: hidden; background: var(--card); }
.ruled-fig picture, .ruled-fig img { width: 100%; height: 100%; }
.ruled-fig img { object-fit: cover; }
.ruled-cap { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); margin-top: var(--s4); color: var(--fg); font-size: .97rem; }

/* ------------------------------------------------------------
   La griglia a icone: celle separate da filetti, icona in alto a
   sinistra, due righe in basso a sinistra.
   ------------------------------------------------------------ */
.icongrid { padding-bottom: 0; }
.ig-head { text-align: center; display: grid; justify-items: center; gap: var(--s5); margin-bottom: var(--s9); }
.ig-head h2 { font-size: var(--t-mega); letter-spacing: -0.04em; line-height: .98; max-width: 9em; }
.ig-head .lede { max-width: 33em; text-align: center; font-size: 1rem; }
.ig-grid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); border-block: 1px solid var(--rule); }
.ig-cell { display: grid; grid-template-rows: 1fr auto; min-height: clamp(13rem, 20vw, 21rem); padding: clamp(1.2rem, 1.9vw, 2.1rem); border-left: 1px solid var(--rule); transition: background-color .4s var(--ease); }
.ig-cell:first-child { border-left: 0; }
.ig-cell:hover { background: var(--card); }
.ig-ico { width: 1.7rem; height: 1.7rem; color: var(--fg-2); transition: color .4s var(--ease), transform .5s var(--ease); }
.ig-cell:hover .ig-ico { color: var(--ambra); transform: translateY(-3px); }
.ig-cell p { display: grid; gap: .15rem; font-size: .94rem; }
.ig-cell b { font-weight: 400; color: var(--fg); }
.ig-cell span { color: var(--fg-2); }
@media (max-width: 1020px) {
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-cell { min-height: 11rem; border-top: 1px solid var(--rule); }
  .ig-cell:nth-child(odd) { border-left: 0; }
  .ig-cell:nth-child(-n+2) { border-top: 0; }
}

/* ------------------------------------------------------------
   La chiamata finale.
   ------------------------------------------------------------ */
.download { position: relative; overflow: hidden; background: var(--asfalto); color: var(--crema); isolation: isolate; padding-top: calc(var(--header-h) + clamp(3rem, 9svh, 7rem)); }
.dl-media, .dl-media picture, .dl-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dl-media img { object-fit: cover; }
.dl-veil { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(to bottom, rgba(var(--asfalto-rgb), .78) 0%, rgba(var(--asfalto-rgb), .7) 45%, rgba(var(--asfalto-rgb), .5) 70%, rgba(var(--asfalto-rgb), .82) 100%); }
.dl-inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.dl-segno { width: 3.6rem; margin-bottom: var(--s6); }
.dl-inner h2 { font-size: var(--t-mega); letter-spacing: -0.04em; line-height: .98; max-width: 8.5em; }
.dl-body { display: grid; gap: 1.1em; max-width: 35rem; margin-top: clamp(2.5rem, 9svh, 6rem); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.dl-price { margin-top: var(--s6); font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); font-weight: 600; letter-spacing: -0.015em; }
.dl-inner .actions { justify-content: center; margin-top: var(--s5); }
.dl-note { margin-top: var(--s5); font-size: var(--t-small); color: var(--crema); max-width: 34em; }
/* Il telefono sale dal piede e resta tagliato a tre quarti: il margine
   negativo e' una frazione della SUA larghezza, non di quella della
   sezione (le percentuali di margine guardano il contenitore). */
.dl-phone { --pw: min(19rem, 58vw); position: relative; z-index: 2; width: var(--pw); margin: clamp(3rem, 8svh, 6rem) auto 0; margin-bottom: calc(var(--pw) * -.62); transform: translate3d(0, calc((1 - var(--rise, 1)) * 38%), 0); }

/* ------------------------------------------------------------
   Apertura di pagina interna.
   ------------------------------------------------------------ */
.pagehero { background: var(--asfalto); color: var(--crema); padding: calc(var(--header-h) + clamp(2.5rem, 7svh, 5.5rem)) 0 clamp(3rem, 8svh, 6rem); overflow: clip; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gutter); align-items: end; }
.ph-text .eyebrow { margin-bottom: var(--s5); }
.ph-text h1 { max-width: 10.5em; }
.ph-text .lede { margin-top: var(--s5); color: var(--crema); max-width: 30em; }
.ph-fig { aspect-ratio: 4 / 3.1; border-radius: var(--r-panel); overflow: hidden; background: var(--asfalto-2); }
.ph-fig picture, .ph-fig img { width: 100%; height: 100%; }
.ph-fig img { object-fit: cover; }
.ph-phone {
  border-radius: var(--r-panel); padding: clamp(1.6rem, 3vw, 3rem) 0 0; overflow: hidden; max-height: 36rem;
  background:
    radial-gradient(90% 70% at 72% 6%, rgba(242, 169, 59, .32), rgba(242, 169, 59, 0) 60%),
    radial-gradient(80% 60% at 8% 100%, rgba(225, 0, 15, .2), rgba(225, 0, 15, 0) 62%),
    var(--asfalto-2);
  display: grid; justify-items: center;
}
.ph-phone .phone { width: min(17.5rem, 52%); }
.pagehero--plain .ph-grid { grid-template-columns: minmax(0, 1fr); }
.pagehero--plain .ph-text h1 { max-width: 13em; }
@media (max-width: 900px) {
  .ph-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .ph-phone { max-height: 26rem; }
}

/* ------------------------------------------------------------
   La frase che entra parola per parola, da sfocata a nitida.
   --p lo scrive app.js (0..1 lungo il passaggio della sezione); ogni
   parola ha il proprio indice --i e il blocco sa quante sono (--n).
   Senza JavaScript: nitida e intera.
   ------------------------------------------------------------ */
.words { min-height: 100svh; display: grid; align-items: center; padding-block: clamp(6rem, 18svh, 12rem); overflow: clip; }
.words-inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.words .eyebrow { margin-bottom: var(--s6); }
.words-text { font-size: var(--t-list); letter-spacing: -0.035em; line-height: 1.08; max-width: 14.5em; font-weight: 400; }
.js .words-text .w {
  --k: clamp(0, calc(var(--p, 0) * (var(--n) + 4) - var(--i)), 1);
  display: inline-block;
  opacity: calc(.13 + .87 * var(--k));
  filter: blur(calc((1 - var(--k)) * 7px));
  will-change: opacity, filter;
}
.w--segno { vertical-align: -.08em; }
.segno--inline { display: inline-block; width: .95em; height: auto; }
.words-fig { position: absolute; z-index: 0; width: clamp(8rem, 17vw, 19rem); aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: var(--card); }
.words-fig picture, .words-fig img { width: 100%; height: 100%; }
.words-fig img { object-fit: cover; }
.words-fig--left { left: var(--gutter); bottom: 9%; }
.words-fig--right { right: var(--gutter); top: 11%; aspect-ratio: 3 / 4; width: clamp(7rem, 11.5vw, 13rem); }
@media (max-width: 900px) { .words-fig { position: static; margin: var(--s7) var(--gutter) 0; width: auto; aspect-ratio: 16 / 10; } .words-fig--right { display: none; } }
@media (prefers-reduced-motion: reduce) { .js .words-text .w { opacity: 1; filter: none; } }

/* ------------------------------------------------------------
   La parola del marchio fa da maschera al film.
   ------------------------------------------------------------ */
.wordmarkzoom { position: relative; background: var(--asfalto); color: var(--crema); }
.js .wordmarkzoom { height: 330vh; }
.wmz-stage { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.js .wmz-stage { position: sticky; top: 0; }
.wmz-fallback { width: min(60vw, 46rem); }
.wmz-clip { display: none; }
.js .wmz-fallback { display: none; }
/* NIENTE will-change qui: con will-change il browser disegna la
   maschera una volta alla scala di partenza e poi stira la bitmap, e a
   meta' corsa i bordi delle lettere escono sfocati. Senza, li ridisegna
   a ogni scala. */
.js .wmz-clip { display: block; position: absolute; left: 0; top: 0; width: 412.16px; height: 183.56px; transform-origin: 0 0; }
.wmz-video { position: absolute; left: 0; top: 0; width: 100vw; height: 100svh; transform-origin: 0 0; }
.wmz-video video { width: 100%; height: 100%; object-fit: cover; }
.wmz-cap { position: absolute; left: 50%; bottom: clamp(1.6rem, 3vw, 3rem); transform: translateX(-50%); font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--crema-2); white-space: nowrap; transition: opacity .4s var(--ease); }
.wordmarkzoom.is-deep .wmz-cap { opacity: 0; }

/* ------------------------------------------------------------
   Immagine o telefono, e testo.
   ------------------------------------------------------------ */
.sp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.sp-media { grid-column: 1 / span 6; }
.sp-text { grid-column: 8 / span 5; }
.split--flip .sp-media { grid-column: 7 / span 6; order: 2; }
.split--flip .sp-text { grid-column: 1 / span 5; order: 1; }
.sp-fig { aspect-ratio: 4 / 3.3; border-radius: var(--r-panel); overflow: hidden; background: var(--card); }
.sp-fig picture, .sp-fig img { width: 100%; height: 100%; }
.sp-fig img { object-fit: cover; }
.sp-phone {
  border-radius: var(--r-panel); padding: clamp(2rem, 4vw, 4rem) 0; display: grid; justify-items: center;
  background:
    radial-gradient(90% 70% at 72% 6%, rgba(242, 169, 59, .32), rgba(242, 169, 59, 0) 60%),
    radial-gradient(80% 60% at 8% 100%, rgba(225, 0, 15, .2), rgba(225, 0, 15, 0) 62%),
    var(--asfalto);
}
.sp-phone .phone { width: min(16.5rem, 54%); }
.sp-text .eyebrow { margin-bottom: var(--s5); }
.sp-text h2 { margin-bottom: var(--s5); }
@media (max-width: 900px) {
  .sp-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .sp-media, .sp-text, .split--flip .sp-media, .split--flip .sp-text { grid-column: 1; order: initial; }
}

/* ------------------------------------------------------------
   Righe, passi, numeri.
   ------------------------------------------------------------ */
.row-list { border-bottom: 1px solid var(--rule); }
.row-item { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: var(--s5) var(--gutter); align-items: baseline; padding-block: var(--s5); border-top: 1px solid var(--rule); }
.row-n, .step-n { font-family: var(--mono); font-size: var(--t-mono); color: var(--fg-2); letter-spacing: .04em; }
.row-item p { color: var(--fg-2); max-width: 33em; }
.row-meta { font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent-text); white-space: nowrap; }
@media (max-width: 900px) { .row-item { grid-template-columns: 2.4rem minmax(0, 1fr); } .row-item p, .row-meta { grid-column: 2; } }

.step-list { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-block: 1px solid var(--rule); }
.step-list li { display: grid; align-content: start; gap: var(--s3); padding: clamp(1.2rem, 1.9vw, 2.1rem); min-height: 15rem; border-left: 1px solid var(--rule); }
.step-list li:first-child { border-left: 0; }
.step-list h3 { margin-top: auto; padding-top: var(--s8); }
.step-list p { color: var(--fg-2); font-size: .97rem; }
@media (max-width: 1020px) { .step-list { grid-template-columns: 1fr 1fr; } .step-list li { border-top: 1px solid var(--rule); min-height: 0; } .step-list li:nth-child(odd) { border-left: 0; } .step-list li:nth-child(-n+2) { border-top: 0; } .step-list h3 { padding-top: var(--s6); } }
@media (max-width: 560px) { .step-list { grid-template-columns: 1fr; } .step-list li { border-left: 0; } .step-list li:nth-child(2) { border-top: 1px solid var(--rule); } }

.stat-row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--gutter); }
.stat-row > div { display: grid; gap: .4rem; align-content: start; padding-top: var(--s4); border-top: 1px solid var(--rule); }
.stat-row dt { order: 2; color: var(--fg); font-size: .97rem; }
.stat-row dd { order: 1; font-size: var(--t-list); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-row p { order: 3; color: var(--fg-2); font-size: var(--t-small); }
.stat-note { margin-top: var(--s6); font-size: var(--t-small); color: var(--fg-2); }
@media (max-width: 900px) { .stat-row { grid-template-columns: 1fr 1fr; row-gap: var(--s7); } }

/* ------------------------------------------------------------
   I piani. Il selettore a segmenti ha lo stato scelto INVERTITO:
   fondo pieno opposto alla barra e testo che cambia colore.
   ------------------------------------------------------------ */
.seg { display: inline-flex; padding: .25rem; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--rule); margin-bottom: var(--s7); }
.seg-btn { padding: .55rem 1.1rem; border-radius: var(--r-pill); font-size: .95rem; color: var(--fg-2); transition: background-color .25s var(--ease), color .25s var(--ease); }
.seg-btn em { font-style: normal; font-family: var(--mono); font-size: .68rem; letter-spacing: .03em; text-transform: uppercase; margin-left: .45rem; color: var(--accent-text); }
.seg-btn:hover { color: var(--fg); }
.seg-btn.is-on { background: var(--fg); color: var(--bg); }
.seg-btn.is-on em { color: var(--bg); }
.seg--chips { flex-wrap: wrap; border-radius: 1.7rem; }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.plan { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s6); padding: clamp(1.5rem, 2.4vw, 2.6rem); border-radius: var(--r-panel); background: var(--card); }
.plan--premium { background:
  radial-gradient(90% 60% at 85% 0%, rgba(242, 169, 59, .2), rgba(242, 169, 59, 0) 60%),
  radial-gradient(80% 60% at 0% 100%, rgba(225, 0, 15, .2), rgba(225, 0, 15, 0) 60%), var(--card); }
.plan h3 { font-size: var(--t-h2); letter-spacing: -0.035em; margin-top: var(--s3); }
.plan-price { margin-top: var(--s5); color: var(--fg-2); display: grid; gap: .3rem; }
.plan-price b { font-size: var(--t-list); font-weight: 400; letter-spacing: -0.04em; color: var(--fg); margin-right: .2em; font-variant-numeric: tabular-nums; }
.plan-price em { font-style: normal; display: block; font-size: var(--t-small); }
.plan-lede { margin-top: var(--s4); color: var(--fg); max-width: 26em; }
.plan .ticks { margin-top: 0; align-content: start; }
.plan .btn { justify-self: start; }
.js [data-billing-scope="monthly"] [data-when="yearly"], .js [data-billing-scope="yearly"] [data-when="monthly"] { display: none; }
.plan-note { margin-top: var(--s5); font-size: var(--t-small); color: var(--fg-2); max-width: 46em; }
@media (max-width: 800px) { .plan-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Tabella.
   ------------------------------------------------------------ */
.table-scroll { position: relative; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; min-width: 34rem; }
.tbl th, .tbl td { padding: 1rem .75rem 1rem 0; text-align: left; border-top: 1px solid var(--rule); font-weight: 400; vertical-align: top; }
.tbl thead th { border-top: 0; font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.tbl .num { width: 9.5rem; color: var(--fg); }
.tbl .yes, .tbl .no { display: inline-block; width: .95rem; height: .95rem; border-radius: 50%; vertical-align: -.1em; }
.tbl .yes { background: var(--accent-text); }
.tbl .no { border: 1px solid var(--linea-ui); }
.table-note { margin-top: var(--s5); font-size: var(--t-small); color: var(--fg-2); max-width: 46em; }

/* ------------------------------------------------------------
   Domande.
   ------------------------------------------------------------ */
.qa-list { border-bottom: 1px solid var(--rule); }
.qa { border-top: 1px solid var(--rule); }
.qa summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s5); padding-block: 1.25rem; cursor: pointer; list-style: none; font-size: var(--t-h3); letter-spacing: -0.025em; line-height: 1.15; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--fg); transition: transform .4s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.qa summary i svg { width: .75rem; height: .75rem; }
.qa summary:hover i { background: var(--fg); color: var(--bg); }
.qa[open] summary i { transform: rotate(45deg); }
.qa-body { display: grid; gap: .8em; padding: 0 3.6rem 1.6rem 0; color: var(--fg-2); max-width: 46em; }
.qa-body a { color: var(--fg); }
.qa[hidden] { display: none; }

/* ------------------------------------------------------------
   Testimonianze.
   ------------------------------------------------------------ */
.rev-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.rev { display: grid; grid-template-rows: 1fr auto; gap: var(--s6); padding: clamp(1.4rem, 2vw, 2.2rem); border-radius: var(--r-panel); background: var(--card); }
.rev blockquote p { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); letter-spacing: -0.02em; line-height: 1.3; }
.rev figcaption { display: grid; gap: .1rem; font-size: .94rem; }
.rev figcaption b { font-weight: 500; }
.rev figcaption span { color: var(--fg-2); }
.rev-note { margin-top: var(--s5); font-size: var(--t-small); color: var(--fg-2); }
@media (max-width: 900px) { .rev-row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   L'Italia e le sue strade.
   ------------------------------------------------------------ */
.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: center; }
/* I paesi attorno sfumano nel fondo: la carta non ha un bordo, e
   senza maschera i vicini del nord finirebbero sopra il titolo. */
.mp-map { -webkit-mask-image: radial-gradient(ellipse 74% 66% at 50% 52%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 74% 66% at 50% 52%, #000 58%, transparent 100%); }
.mp-map svg { width: 100%; height: auto; max-height: min(86svh, 46rem); margin-inline: auto; }
.mp-vicini { fill: var(--asfalto-2); stroke: var(--asfalto); stroke-width: 1.5; }
.mp-italia { fill: var(--asfalto-3); stroke: #4A403A; stroke-width: 1; }
.mp-dot { cursor: pointer; outline: none; }
.mp-core { fill: var(--ambra); transition: r .3s var(--ease); }
.mp-halo { fill: var(--ambra); opacity: 0; transition: opacity .3s var(--ease); }
.mp-dot.is-on .mp-halo, .mp-dot:hover .mp-halo, .mp-dot:focus-visible .mp-halo { opacity: .28; }
.mp-dot.is-on .mp-core, .mp-dot:hover .mp-core { r: 8; }
.mp-list { display: grid; border-bottom: 1px solid var(--rule); }
.mp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: baseline; padding-block: .78rem; border-top: 1px solid var(--rule); cursor: default; transition: color .25s var(--ease); color: var(--fg-2); }
.mp-list li b { font-weight: 400; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--fg); }
.mp-list li span { font-family: var(--mono); font-size: .7rem; letter-spacing: .02em; text-align: right; }
.mp-list li.is-on span, .mp-list li:hover span { color: var(--ambra); }
.mp-note { margin-top: var(--s6); font-size: var(--t-small); color: var(--fg-2); max-width: 46em; }
@media (max-width: 900px) { .mp-grid { grid-template-columns: 1fr; } .mp-list li { grid-template-columns: 1fr; gap: .1rem; } .mp-list li span { text-align: left; } }

/* ------------------------------------------------------------
   Collegamenti agli altri pilastri.
   ------------------------------------------------------------ */
.pl-list { border-bottom: 1px solid var(--rule); }
.pl-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: var(--gutter); align-items: center; padding-block: 1.3rem; border-top: 1px solid var(--rule); text-decoration: none; transition: padding-left .4s var(--ease); }
.pl-list a b { font-weight: 400; font-size: var(--t-h2); letter-spacing: -0.035em; line-height: 1.05; }
.pl-list a span { color: var(--fg-2); }
.pl-list a:hover { padding-left: .8rem; }
.pl-list a:hover .btn-dot { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (max-width: 800px) { .pl-list a { grid-template-columns: minmax(0, 1fr) auto; } .pl-list a span { grid-column: 1; grid-row: 2; } .pl-list a .btn-dot { grid-row: 1 / span 2; grid-column: 2; } }

/* ------------------------------------------------------------
   I due negozi e il codice.
   ------------------------------------------------------------ */
.stores { padding-top: calc(var(--header-h) + clamp(2.5rem, 8svh, 6rem)); min-height: 100svh; display: grid; align-items: center; }
.st2-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--gutter); align-items: center; }
.st2-text .eyebrow { margin-bottom: var(--s5); }
.st2-text .lede { margin-top: var(--s5); }
.st2-note { margin-top: var(--s5); font-size: var(--t-small); color: var(--fg-2); max-width: 34em; }
.st2-qr { justify-self: end; width: min(100%, 21rem); padding: 1.1rem; border-radius: var(--r-panel); background: var(--asfalto-2); border: 1px solid var(--asfalto-3); }
.st2-qr svg { width: 100%; height: auto; border-radius: var(--r-img); }
.st2-qr figcaption { margin-top: .9rem; font-size: var(--t-small); color: var(--fg-2); }
@media (max-width: 800px) { .st2-grid { grid-template-columns: 1fr; } .st2-qr { display: none; } }

/* ------------------------------------------------------------
   Testo, fascia.
   ------------------------------------------------------------ */
.tb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gutter); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.textblock { padding-block: var(--s7); }
.textblock:first-of-type { padding-top: var(--section); }
.tb-grid h2 { font-size: var(--t-h3); letter-spacing: -0.025em; }
.tb-grid .prose { max-width: 44em; }
@media (max-width: 800px) { .tb-grid { grid-template-columns: 1fr; gap: var(--s4); } }

.bn-grid { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s6) var(--gutter); padding-top: var(--s5); border-top: 1px solid var(--rule-strong); }
.bn-grid .eyebrow { margin-bottom: var(--s4); }
.bn-grid h2 { max-width: 14em; }
.bn-grid .lede { margin-top: var(--s4); color: var(--fg-2); }
.bn-grid .actions { margin-top: 0; }

/* 06-forms.css */
/* ============================================================
   Moduli e pagina dei contatti.

   I campi sono quelli del piede del riferimento: rettangoli a raggio
   4, un bordo che passa il 3:1, l'etichetta sopra e sempre visibile.
   ============================================================ */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--gutter); padding-top: var(--s5); border-top: 1px solid var(--rule-strong); }
.ct-side .eyebrow { margin-bottom: var(--s5); }
.ct-side .lede { margin-top: var(--s5); color: var(--fg-2); }
.ct-lines { margin-top: var(--s7); border-bottom: 1px solid var(--rule); }
.ct-lines li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .2rem var(--s4); padding-block: .9rem; border-top: 1px solid var(--rule); }
.ct-lines span { font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2); padding-top: .25em; }
.ct-lines a { font-size: 1.1rem; letter-spacing: -0.02em; text-decoration: none; }
.ct-lines a:hover { text-decoration: underline; }
.ct-lines small { grid-column: 2; font-size: var(--t-small); color: var(--fg-2); }
.ct-side address { margin-top: var(--s6); color: var(--fg-2); font-size: .97rem; line-height: 1.5; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; gap: var(--s7); } }

.form { display: grid; gap: var(--s5); padding: clamp(1.4rem, 2.4vw, 2.6rem); border-radius: var(--r-panel); background: var(--card); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); }
.fld { display: grid; gap: .4rem; }
.fld--wide { grid-column: 1 / -1; }
.fld label { font-size: var(--t-small); color: var(--fg); }
.fld label em { font-style: normal; color: var(--accent-text); }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 3.125rem; padding: .7rem .9rem;
  border-radius: var(--r-field); border: 1px solid var(--field-line);
  background: var(--field); color: var(--fg); font-size: 1rem;
  transition: border-color .2s var(--ease);
}
.fld textarea { resize: vertical; min-height: 8rem; line-height: 1.45; }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.2rem) 1.35rem, calc(100% - .85rem) 1.35rem; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.4rem; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--fg); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline-offset: 1px; border-color: var(--fg); }
.fld[data-invalid="true"] input, .fld[data-invalid="true"] select, .fld[data-invalid="true"] textarea { border-color: var(--accent-text); }
.fld-err { min-height: 1.1em; font-size: var(--t-small); color: var(--accent-text); }
.hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.consents { display: grid; gap: .7rem; }
.chk { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .7rem; align-items: start; font-size: var(--t-small); color: var(--fg-2); cursor: pointer; }
.chk a { color: var(--fg); }
.chk input { appearance: none; width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; border-radius: 3px; border: 1px solid var(--field-line); background: var(--field); display: grid; place-items: center; cursor: pointer; }
.chk input::after { content: ''; width: .6rem; height: .32rem; border-left: 1.5px solid var(--bg); border-bottom: 1.5px solid var(--bg); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .2s var(--ease); }
.chk input:checked { background: var(--fg); border-color: var(--fg); }
.chk input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.chk input[aria-invalid="true"] { border-color: var(--accent-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-text) 25%, transparent); }
.form .actions { margin-top: 0; }
.form-ok { font-size: var(--t-lede); color: var(--fg); padding: var(--s5) 0; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }