/* Label optimisation tool — token, base, componenti, schermate.
   Nessun colore hardcoded fuori da :root: se serve un valore nuovo, diventa un token.
   Unica eccezione, dichiarata: gli rgba di --bg nei veli sopra il fondale, che
   esistono solo lì — un token a consumatore unico direbbe meno del gradiente
   che lo usa. */

/* Montserrat variabile, self-hosted: un solo file copre Regular/Medium/Bold.
   Pesare tre file statici non serviva, e ogni richiesta in più conta sui 3 s. */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:             #0a0a0a;  /* sfondo pagina, quasi nero */
  --surface:        #1c1c1c;  /* card */
  --surface-glass:  rgba(255, 255, 255, 0.04);  /* card dell'intro: nel Figma il fondale sfocato passa attraverso */
  --surface-tile:   #2f3237;  /* riquadri dei risparmi dentro le card */
  --surface-input:  #2a2e33;  /* campi del form */
  --accent:         #E64B00;  /* arancio Sidel: CTA, icone, freccia indietro, errori */
  --accent-hover:   #ff5a10;  /* CTA primaria sotto il puntatore */
  --accent-wash:    rgba(230, 75, 0, 0.16);  /* pastiglia dietro le icone arancio */
  --positive:       #4FE063;  /* verde dei risparmi */
  --text:           #ffffff;
  --text-muted:     #b9bfc6;  /* sottotitoli, label dei campi in sola lettura */
  --text-on-light:  #101010;  /* testo sopra badge bianchi e sopra lo scrim chiaro */
  --veil:           rgba(255, 255, 255, 0.08);  /* bordi sottili e fondi appena staccati */
  --veil-strong:    rgba(255, 255, 255, 0.18);  /* pista dello switch valuta */
  --border-soft:    rgba(255, 255, 255, 0.55);  /* bordo del bottone secondario */
  --scrim:          rgba(0, 0, 0, 0.5);  /* velo sotto i modali: fill Figma 000000 al 50% */
  --shade:          rgba(0, 0, 0, 0.2);  /* velo leggero dell'intro: 000000 al 20% */
  /* "Background blur" del Figma. Il raggio di Figma vale il doppio di quello CSS,
     e le misure sono su un frame da 1920: 20 / 2 su 1920 fa 0,52vw, a qualunque
     larghezza. */
  --glass-blur-20:  blur(clamp(4px, 0.52vw, 20px));
  /* Risultati bloccati nella versione web: le cifre devono restare illeggibili
     anche a 50 px di corpo, cioè la cifra grande della card aperta. */
  --lock-blur:      blur(clamp(8px, 0.8vw, 30px));
  --radius-card:    20px;
  --radius-field:   6px;
  --radius-badge:   5px;  /* etichetta del formato sulle card di scelta */
  --radius-pill:    999px;
  --gap:            clamp(0.75rem, 1.4vw, 1.75rem);
  --pad-screen:     clamp(1.1rem, 2vw, 2.75rem);
}

/* Il design è disegnato a 3840 px: invece di scalare misure a mano, scala la
   radice e tutto il resto è in rem. Regge da 360 px a 3840 px. */
html {
  font-size: clamp(14px, 0.52vw + 10px, 30px);
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  /* Il fondale vero sta sulle schermate (vedi .screen): qui resta solo il nero
     sotto, che si vede se una schermata non arriva a coprire il viewport. */
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }
.sprite { position: absolute; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Struttura ---------- */

/* height, non min-height: senza un'altezza definita qui il `min-height: 100%`
   dell'intro non ha su cosa risolversi e il suo fondale si fermerebbe a metà
   schermo. Le schermate più alte del viewport sbordano e scrollano su body. */
.app { height: 100%; }

/* Il fondale è lo stesso export su tutte le schermate: cambia solo il velo che
   ci sta sopra. Nel Figma era nero al 60%, il committente lo vuole al 30% —
   qui è --screen-veil, così l'intro può sostituirlo col suo senza duplicare il
   resto. --screen-spot è un'ombra locale sopra il velo, per la schermata che ne
   vuole una (il form).
   Il .webp lo prende chi sa leggere image-set(), gli altri il .jpg: il fondale è
   fotografico e senza trasparenza, il ripiego .png delle bottiglie ritagliate
   qui peserebbe una ventina di volte tanto. Il file scartato non si scarica. */
.screen {
  display: none;
  --screen-spot: none;
  --screen-veil: linear-gradient(rgba(10, 10, 10, 0.3), rgba(10, 10, 10, 0.3));
  background-image: var(--screen-spot), var(--screen-veil), url('assets/img/background.jpg');
  background-size: cover;
  background-position: center;
}
@supports (background-image: image-set(url('assets/img/background.webp') type('image/webp'))) {
  .screen {
    background-image: var(--screen-spot), var(--screen-veil),
      image-set(url('assets/img/background.webp') type('image/webp'));
  }
}

.screen--active {
  display: block;
  /* Sotto il 100% il fondale finirebbe a metà schermo con un taglio netto. */
  min-height: 100%;
  padding: var(--pad-screen);
}

/* Le schermate che devono stare dentro l'altezza senza scrollare (form e
   risultati) hanno una loro radice: la larghezza da sola non basta a decidere
   le misure, 1280×720 e 1280×1024 hanno la stessa radice e non lo stesso
   spazio. Dentro, tutto è in em e scende insieme. Sopra 1080 px di viewport il
   termine si ferma a 1rem e restano le proporzioni del Figma. */
.screen--fit { font-size: min(1rem, 1.8vh); }

/* Anche l'intestazione segue quel ritmo. A 1920×1080 vale 48 px come prima —
   è la distanza del Figma fra sottotitolo e primo contenuto. */
.screen--fit .screen__header { margin-bottom: 2.5em; }

/* Quando a comandare è l'altezza (viewport larghi e bassi) scende anche il
   titolo, altrimenti si mangia lo spazio del contenuto e la pagina torna a
   scrollare. Il termine in rem è quello delle altre schermate: a 1920×1080 i
   due coincidono e il titolo resta identico. */
.screen--fit .screen__title { font-size: min(clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem), 2.3em); }
.screen--fit .screen__subtitle { font-size: min(0.95rem, 0.95em); }

.screen__header {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.2vw, 1.5rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 3rem);
}

.screen__heading { min-width: 0; }

.screen__title {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.screen__subtitle {
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---------- Componenti ---------- */

.button {
  border: 0;
  border-radius: var(--radius-field);
  /* In em: nel form la radice del testo scende con l'altezza della schermata e
     i bottoni devono scendere con lei. Altrove il contesto è 1rem, invariato. */
  padding: 0.9em 1.6em;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.button--primary { background: var(--accent); color: var(--text); }
.button--primary:hover:not(:disabled) { background: var(--accent-hover); }

.button--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-soft);
}
.button--ghost:hover { background: var(--veil); }

.button:disabled { opacity: 0.45; cursor: not-allowed; }

.icon-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--text);
  cursor: pointer;
}
.icon-button--close { border-radius: var(--radius-pill); }
.icon-button--expand {
  width: 2.2rem;
  height: 2.2rem;
  background: transparent;
  color: var(--accent);
}

.icon { width: 1.35rem; height: 1.35rem; }

.badge {
  align-self: flex-start;
  border-radius: var(--radius-badge);
  background: var(--text);
  color: var(--text-on-light);
  padding: 0.35rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.badge--angle {
  align-self: center;
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-weight: 700;
}

.card {
  background: var(--surface);
  border: 1px solid var(--veil);
  border-radius: var(--radius-card);
  padding: clamp(0.9rem, 1.2vw, 1.5rem);
}

/* Card a velo: il fondale della schermata ci passa attraverso sfocato — il
   "background blur" del Figma. Lo portano le card della scelta
   formato e quelle dei risultati; quelle del modale shape no, lì il fondo è un
   pannello e le vuole piene. */
.card--glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--glass-blur-20);
  backdrop-filter: var(--glass-blur-20);
}

.card--pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card--pick:hover, .card--pick:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* La bottiglia cresce dalla base: le tre restano appoggiate alla stessa linea
   anche sotto il puntatore. */
.card--pick .bottle {
  transform-origin: bottom center;
  transition: transform 0.15s ease;
}
.card--pick:hover .bottle, .card--pick:focus-visible .bottle { transform: scale(1.05); }

.grid { display: grid; gap: var(--gap); }
.grid--pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--shapes { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* Flex e non griglia: la card aperta si prende più larghezza (570 contro 492 px
   nello screen del committente), e le altre due restano centrate sulla sua altezza. */
.grid--results { display: flex; align-items: center; }
.grid--results > .card { flex: 1 1 0; min-width: 0; }
.grid--results > .card--expanded { flex-grow: 1.16; }

/* Le bottiglie hanno larghezze diverse: fisso l'altezza e lascio libera la larghezza. */
.bottle { display: block; }
.bottle img { display: block; width: auto; height: 100%; }
/* Negli step dopo la scelta la bottiglia non è un'immagine dentro un contenitore
   ma il <video> stesso: l'altezza gliela dà la schermata, la larghezza va rimessa
   ad auto perché gli attributi width/height valgono come regola d'autore e gliela
   fisserebbero, ignorando le proporzioni. */
video.bottle { width: auto; }

.card--pick .bottle {
  /* --rel tiene i tre formati in proporzione fra loro (lo imposta il render). */
  height: calc(var(--rel, 1) * var(--bottle-size, 17rem));
}

/* ---------- 1 · Intro ---------- */

/* L'intro ha un velo più leggero delle altre schermate (nero al 20% invece del
   30%): il fondale deve restare quasi pieno dietro la bottiglia. Il Figma ha
   anche una sfocatura dietro il testo, che il committente ha fatto togliere. */
.screen--intro {
  --screen-veil: linear-gradient(var(--shade), var(--shade));
}

.screen--active.screen--intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
}

/* Testo e bottiglia condividono la riga: il testo sta nella prima colonna, la
   bottiglia la attraversa tutta per restare centrata sulla pagina (Figma).
   Logo e testo occupano la stessa cella: il logo è ancorato in alto a sinistra,
   il testo si centra sull'altezza piena della schermata. Centrarlo su quella
   che avanza sotto il logo lo spingeva sotto la metà della pagina. */
.screen--intro > .logo,
.intro__content { z-index: 1; }

.screen--intro > .logo {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
}

.intro__content {
  grid-area: 1 / 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.4vw, 1.6rem);
  /* Larghezza della colonna di testo del Figma: lì il titolo arriva a 574 px su
     un frame da 1920, cioè 29rem alla radice di quella misura. La percentuale
     resta il limite che conta sotto i 1450 px, dove la bottiglia si avvicina. */
  max-width: min(29rem, 40vw);
  /* Card e CTA condividono la larghezza: nel Figma sono 508 px su un frame da
     1920, più strette del titolo che le sovrasta (574). */
  --plus-width: min(100%, 25.5rem);
}

.logo { display: block; }
.logo img { width: auto; height: clamp(2.2rem, 3vw, 3.4rem); }

/* Il tetto tiene "optimisation tool" su una riga sola dentro la colonna: più
   grande di così il titolo va a capo tre volte sui viewport larghi. */
.intro__title {
  font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.intro__title strong { font-weight: 700; }

.plus-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: var(--plus-width);
}

.plus {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  /* Non --surface: nel Figma la card è un velo, il fondale sfocato si vede
     attraverso (misurato: alza di 8 punti di luminanza un fondo quasi nero,
     un riempimento pieno lo porterebbe a 28). */
  background: var(--surface-glass);
  border: 1px solid var(--veil);
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  font-weight: 700;
}

.plus__icon, .tile__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--accent);
}

.intro__subtitle { color: var(--text-muted); }

/* Nel Figma la CTA dell'intro è più bassa e col testo più piccolo delle azioni
   del form: la misura resta locale, gli altri bottoni non cambiano. */
.intro__cta {
  width: var(--plus-width);
  padding: 0.75rem 1.5rem;
  font-size: 0.8rem;
}

.intro__stage {
  grid-area: 1 / 1 / 2 / -1;
  /* Sotto logo e testo: la bottiglia attraversa la riga e non deve coprire la CTA. */
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Nel Figma la bottiglia occupa l'81% dell'altezza del frame: il tetto è in vh
   perché è quella la misura che il Figma fissa, il termine in vw la rimpicciolisce
   quando il viewport è più stretto che alto. */
.bottle--intro { height: clamp(16rem, 46vw, 81vh); }

/* ---------- 2 · Formato ---------- */

/* Nel Figma le card arrivano a fondo schermata: la loro altezza è quella che
   avanza sotto il titolo, non quella della bottiglia più alta. */
.screen--active.screen--pick {
  display: flex;
  flex-direction: column;
}

.screen--pick .grid--pick {
  flex: 1;
  min-height: 0;
  /* Altezza della bottiglia più alta: le altre due restano in proporzione
     (--rel). In vh e non in percentuale della card, che sarebbe circolare —
     la card si dimensiona sul contenuto e il contenuto sulla card.
     66vh è la misura del Figma (715 px su 1080). Il secondo termine toglie
     quello che la bottiglia non può occupare — padding, header, tag — che è in
     rem e quindi cresce con la radice: senza, sui viewport molto larghi e
     bassi (3840×1080) la card sfonda il fondo della schermata. */
  --bottle-size: min(66vh, 100vh - 18rem);
}

/* Tag in alto, bottiglia appoggiata in fondo — nel Figma le tre bottiglie
   condividono la stessa base. */
.screen--pick .card--pick { justify-content: space-between; }

/* ---------- 4 · Form ---------- */

/* La schermata non deve scrollare, e la larghezza da sola non basta a deciderne
   le misure: 1280×720 e 1280×1024 hanno la stessa radice e non lo stesso spazio.
   Il form quindi si dimensiona anche sull'altezza e le sue misure sono in em,
   così scendono tutte insieme. Sopra 1080 px di viewport il termine si ferma a
   1rem e restano le proporzioni del Figma. */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: start;
}

/* Sotto la bottiglia le scie chiare del fondale si mangiano il suo riflesso: il
   committente vuole il fondale scurito lì, e solo lì. A una colonna la bottiglia
   sta in cima e in basso a destra ci sono i campi, quindi l'ombra non serve. */
@media (min-width: 901px) {
  .screen--form {
    --screen-spot: radial-gradient(ellipse 30% 32% at 78% 92%,
      rgba(10, 10, 10, 0.92), rgba(10, 10, 10, 0.6) 55%, transparent);
  }
}

/* Il committente ha tolto il velo sfocato sotto i campi: resta il padding, che
   porta i campi in linea col titolo — largo quanto tasto indietro più gap
   dell'intestazione. 40em sono le due colonne di campi del Figma, 350 px l'una
   più 40 di gap. */
.form-panel {
  --panel-pad: calc(2.6rem + clamp(0.75rem, 1.2vw, 1.5rem));
  max-width: calc(40em + 2 * var(--panel-pad));
  padding: 1.5em var(--panel-pad) 2.5em;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6em 2.1em;
}

/* Colonna 1 forzata: è così che il Figma lascia vuota la cella accanto. */
.field--new-row { grid-column: 1; }

.field { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }

.field__label { color: var(--text); font-size: 0.85em; }

/* Il campo calcolato è grigio: lo è anche la sua etichetta, altrimenti sembra
   compilabile come gli altri. */
.field--derived .field__label { color: var(--text-muted); }

.field__control {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  background: var(--surface-input);
  /* 45 px di altezza sul frame da 1920 del Figma. */
  padding: 0.5em 1em;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  line-height: 1.35;
}

.field__control--select {
  appearance: none;
  cursor: pointer;
  /* Il chevron è un data-uri: nessuna richiesta di rete, funziona da file://. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E64B00' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
  padding-right: 2.6rem;
  /* La tendina la disegna il sistema: senza, su Windows è bianca e le opzioni
     ereditano il testo bianco del campo. */
  color-scheme: dark;
}
.field__control--select option { background-color: var(--surface-input); color: var(--text); }

/* Chrome ed Edge recenti lasciano disegnare la tendina: stessa superficie dei
   campi e accento arancio. Gli altri restano sulla tendina scura di sistema. */
@supports (appearance: base-select) {
  .field__control--select,
  .field__control--select::picker(select) { appearance: base-select; }
  .field__control--select::picker-icon,
  .field__control--select option::checkmark { display: none; }
  .field__control--select::picker(select) {
    margin-top: 0.3rem;
    /* Così ci sta quasi sempre sotto il campo e non sale a coprire il titolo. */
    max-height: min(20rem, 40dvh);
    border: 1px solid var(--veil-strong);
    border-radius: var(--radius-field);
    background: var(--surface-input);
    color: var(--text);
    font: inherit;
    font-weight: 500;
  }
  .field__control--select option { padding: 0.5em 1em; background: none; }
  /* Il segnaposto del campo vuoto: in tendina sarebbe una riga bianca. */
  .field__control--select option[value=""] { display: none; }
  .field__control--select option:hover,
  .field__control--select option:focus-visible { outline: none; background: var(--accent-wash); }
  .field__control--select option:checked { color: var(--accent); }
}

/* Nel Figma il valore calcolato non ha campo: niente fondo, e il testo parte
   allineato alla sua etichetta. Resta l'altezza del campo, così le righe della
   griglia non cambiano. */
.field__control--readonly {
  display: block;
  background: none;
  border-inline-width: 0;
  padding-inline: 0;
  color: var(--text-muted);
  min-height: 2.35em;
}

.field__control--invalid { border-color: var(--accent); }

/* Lo spazio dell'errore è riservato anche quando errore non c'è: se comparisse
   spingendo in basso il resto, la schermata comincerebbe a scrollare proprio
   mentre stai correggendo. */
.field__error {
  min-height: 0.9em;
  color: var(--accent);
  font-size: 0.75em;
  line-height: 1.2;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-top: 1.6em;
}
.form__actions .button--primary { flex: 1 1 18em; }

.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
  gap: 0.8em;
}

/* Il termine in em lega la bottiglia al resto della schermata, che scende con
   l'altezza disponibile: senza, sui viewport larghi e bassi restava alta come
   su un 4K e spingeva la pagina a scrollare. Ricavarla dall'altezza della riga
   non si può: la riga si dimensiona sul contenuto, e il contenuto sarebbe lei.
   44em restano sotto l'altezza dei campi (circa 52em), quindi la riga non
   cresce; `end` sulla preview porta la base all'altezza dei tasti. */
.preview__bottle { height: min(42vw, 44em); }
.preview__bottle .bottle { height: 100%; }

/* ---------- 5 · Risultati ---------- */

/* La card dei risultati è alta circa 45 volte il corpo del testo, e quello che
   resta per lei è l'altezza meno padding di schermata e intestazione: una
   dozzina di rem, che crescono con la larghezza. Da qui il secondo termine —
   senza, a 2560×1080 e 3840×1080 la card sfondava il fondo. A 1920×1080 vale
   18,9 px contro i 19,2 della radice: la card resta quella del Figma. */
.screen--results { font-size: min(1rem, calc((100vh - 12rem) / 45)); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-input);
  padding: 0.4rem 0.8rem;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.switch__track {
  position: relative;
  width: 2.6rem;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--veil-strong);
  transition: background-color 0.15s ease;
}

/* Sui dollari la pista si accende: nel Figma è l'arancio del marchio, misurato
   [230,76,0] contro il #E64B00 del token. */
.switch--on .switch__track { background: var(--accent); }

.switch__knob {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--text);
  transition: transform 0.15s ease;
}
.switch--on .switch__knob { transform: translateX(1.2rem); }
.switch__symbol { color: var(--text-muted); }

/* Misure del Figma su un frame da 1920×1080, in em perché la card deve stare
   dentro l'altezza della schermata: card alta 863, padding 26, distanza fra i
   riquadri 17, bottiglia 342. */
.card--result {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 1.35em;
  transition: flex-grow 0.25s ease, border-color 0.15s ease;
}

/* Le card chiuse mostrano solo il costo, con bottiglia e numero più piccoli:
   nello screen del committente 290 px di bottiglia contro 350, e 32 px di cifra
   contro 50. Un tocco le apre (expandResultCard in results.js). */
.card--result:not(.card--expanded) { cursor: pointer; }
.card--result:not(.card--expanded):hover,
.card--result:not(.card--expanded):focus-visible { border-color: var(--border-soft); }
.card--result:not(.card--expanded) .tile--material,
.card--result:not(.card--expanded) .tile--co2,
.card--result:not(.card--expanded) .icon-button--expand { display: none; }
.card--result:not(.card--expanded) .tile--cost .tile__value { font-size: 1.7em; }
.card--result:not(.card--expanded) { --bottle-scale: 0.83; }

.card--expanded { border: 2px solid var(--accent); }

.card__bottle {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1.2em 0;
}
/* Il pavimento serve a una colonna: lì 18vw sono settanta pixel e la bottiglia
   sparirebbe. Sul desktop non entra mai in gioco. */
.card__bottle .bottle {
  height: calc(var(--bottle-scale, 1) * max(11rem, min(18vw, 17em)));
  transition: height 0.25s ease;
}

.icon-button--expand { position: absolute; right: 0; bottom: 0; }

.tile {
  display: flex;
  align-items: center;
  gap: 0.8em;
  border-radius: 12px;
  background: var(--surface-tile);
  padding: 0.8em 1em;
}

/* Costi: etichetta e numero centrati sulla card, non allineati a destra come
   negli altri due riquadri. */
.tile--cost {
  flex-direction: column;
  gap: 0.2em;
  padding: 1.15em 1em;
}
.tile--cost .tile__label { color: var(--text-muted); font-size: 0.9em; }
.tile--cost .tile__amount { margin-left: 0; text-align: center; }
.tile--cost .tile__value {
  color: var(--positive);
  font-size: 2.6em;
  font-weight: 700;
  /* L'interlinea del corpo (1.45) su un numero di 50 px lascia venti pixel di
     aria sopra e sotto che nel Figma non ci sono, e la card non entra più. */
  line-height: 1.1;
  white-space: nowrap;
}

/* I due riquadri in fondo non sono alti uguale: nel Figma il materiale misura
   118 px e la CO₂ 68. Cambiano icona e respiro, non la forma. */
.tile--material { padding: 1.5em 1em; }
.tile--material .tile__icon { width: 3em; height: 3em; }
.tile--co2 { padding: 0.7em 1em; }
.tile--co2 .tile__icon { width: 2em; height: 2em; }

.tile__label { font-weight: 700; }
.tile--co2 .tile__label { font-size: 0.85em; }

.tile__amount { margin-left: auto; text-align: right; }
.tile__value { font-size: 1.7em; font-weight: 700; line-height: 1.15; }
.tile--co2 .tile__value { font-size: 1.4em; }
.tile__unit { display: block; color: var(--text-muted); font-size: 0.72em; }

/* Versione web: le card restano al loro posto, sfocate, e sopra c'è l'invito a
   compilare il form. Stessa altezza della pagina sbloccata, niente salto. */
.results-stage { position: relative; }
.results-stage--locked .grid--results {
  filter: var(--lock-blur);
  user-select: none;
}

.unlock {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3em;
  padding: var(--gap);
  border-radius: var(--radius-card);
  background: var(--scrim);
  text-align: center;
}
.unlock[hidden] { display: none; }
.unlock__title { color: var(--accent); font-size: 2.6em; font-weight: 700; line-height: 1.1; }
.unlock__text { max-width: 24em; font-size: 1.15em; }

/* ---------- 7 · Contatti (solo web) ---------- */

/* Il riferimento è il form del sito Sidel: campi a riga, etichetta dentro il
   campo che sale quando c'è un valore. Colori del tool. Il pannello è lo stesso
   del form dati (.form-panel): a sinistra, in linea col titolo, due colonne. */
.screen--lead .screen__header {
  padding-bottom: clamp(1rem, 2vw, 2rem);
  border-bottom: 1px solid var(--veil-strong);
}

.lead__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 2rem;
}

.field--line { position: relative; padding-top: 1.2rem; }
.field--line .field__control {
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background-color: transparent;
  padding: 0.6rem 0;
}
/* L'altezza minima è quella di una riga piena: la tendina disegnata (base-select)
   misura il campo sull'opzione scelta, e quella iniziale è vuota. */
.field--line .field__control--select { padding-right: 2.6rem; min-height: calc(1lh + 1.2rem + 1px); }
.field--line .field__control:focus { outline: none; border-bottom-color: var(--accent); }
.field--line .field__control--invalid { border-bottom-color: var(--accent); }

.field--line .field__label {
  position: absolute;
  top: 1.8rem;
  left: 0;
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease;
}
.field--line.field--filled .field__label,
.field--line:focus-within .field__label { top: 0; font-size: 0.75rem; }

.field__required { margin-left: 0.2em; color: var(--accent); }

.lead__checks { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }

/* Testo come le etichette dei campi; il quadrato è in em, così scala con lui. */
.check { display: flex; align-items: flex-start; gap: 0.8em; font-size: 0.85rem; cursor: pointer; }
.check a, .lead__recaptcha a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.check a:hover, .lead__recaptcha a:hover { color: var(--accent); }
.check input {
  flex: none;
  appearance: none;
  width: 1.15em;
  height: 1.15em;
  margin: 0.15em 0 0;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  cursor: pointer;
}
/* Come il chevron delle select: data-uri, nessuna richiesta di rete. */
.check input:checked {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.lead__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.lead__status { flex: 1; color: var(--accent); }

.lead__recaptcha { margin-top: 1.5rem; font-size: 0.75rem; color: var(--text-muted); }
/* Coprirebbe l'angolo della schermata: al suo posto c'è .lead__recaptcha. */
.grecaptcha-badge { visibility: hidden; }

/* ---------- 3 e 6 · Modali ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-screen);
  /* Velo scuro e schermata sottostante sfocata: vale per il modale shape e per
     il lightbox, nel Figma sono lo stesso fondo. */
  background: var(--scrim);
  -webkit-backdrop-filter: var(--glass-blur-20);
  backdrop-filter: var(--glass-blur-20);
}
.modal[hidden] { display: none; }

.modal__panel { width: 100%; max-width: 110rem; max-height: 100%; overflow-y: auto; }

.modal__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 2.5rem);
}
.modal__header .icon-button { margin-left: auto; }

/* Il modale shape è un pannello ancorato al fondo: la schermata di scelta
   formato resta visibile sopra, scurita dal velo e sfocata. Misurato sul
   Figma e riportato a un frame da 1920×1080: pannello a 74 px dai lati,
   alto 663 px, padding interno 50 px. */
.modal--shape {
  align-items: flex-end;
  padding: 0 calc(var(--pad-screen) * 2);
}

.modal--shape .modal__panel {
  max-width: none;
  background: var(--surface-glass);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: clamp(1.1rem, 2.6vw, 3.5rem);
}

/* Card più alte della loro bottiglia, che ci sta dentro centrata: nel Figma
   sono 506 px su 1080 con la bottiglia a 342. In vh perché è l'altezza della
   schermata a decidere quanto il pannello può crescere. */
.card--shape {
  justify-content: center;
  min-height: 47vh;
  background: var(--surface-tile);
}
.grid--shapes { --bottle-size: 32vh; }

/* Altezza percentuale, non 100vh: dentro un iframe il viewport non è la finestra. */
.lightbox__bottle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.lightbox__bottle picture.bottle { display: flex; align-items: center; height: 100%; }
.lightbox__bottle img,
.lightbox__bottle video.bottle { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.modal--lightbox .icon-button--close {
  position: absolute;
  top: var(--pad-screen);
  right: var(--pad-screen);
}

/* ---------- Sotto i 900 px il kiosk diventa una colonna ---------- */

@media (max-width: 900px) {
  .screen--active.screen--intro,
  .form-layout,
  .form__grid,
  .lead__grid,
  .grid--pick {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid--results { flex-direction: column; align-items: stretch; }
  .grid--results > .card { flex: none; }
  /* In colonna il formato scelto va in cima: centerSelected lo mette sempre
     secondo, al centro della riga. */
  .grid--results > .card:nth-child(2) { order: -1; }

  .field--new-row { grid-column: auto; }

  /* A una colonna il testo sta sotto la bottiglia, sopra il fondale pieno: il
     velo si scurisce verso il basso, dove il testo va letto. */
  .screen--intro {
    --screen-veil: linear-gradient(rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0.88));
  }

  /* Le celle tornano impilate: senza questo si sovrapporrebbero. L'ordine è
     logo, bottiglia, testo — il logo resta in alto a sinistra, sopra tutto. */
  .screen--intro > .logo { grid-area: auto; order: -2; }
  /* A una colonna il logo non divide più la riga con la bottiglia: ha davanti
     tutta la larghezza dello schermo e a 2.2rem restava un francobollo.
     Sotto i 770 px la radice è ferma a 14 px, quindi qui i rem sono px fissi. */
  .logo img { height: 3.3rem; }
  .intro__content { grid-area: auto; max-width: none; }
  .intro__stage { grid-area: auto; order: -1; }
  .bottle--intro { height: clamp(12rem, 45vw, 20rem); }

  /* Le tre card impilate non possono essere alte quanto la schermata: tornano
     alte quanto la loro bottiglia, che riprende una misura fissa. Stessa cosa
     per le quattro shape del modale, che qui stanno in colonna. */
  /* Impilate, le tre card si dimensionerebbero ognuna sulla propria bottiglia, e
     le bottiglie sono alte in proporzione al formato (--rel): in colonna si
     vedrebbero tre card di tre altezze diverse. `1fr` sulle righe le pareggia
     tutte alla più alta senza toccare la proporzione fra le bottiglie. */
  .screen--pick .grid--pick { flex: none; --bottle-size: 14rem; grid-auto-rows: 1fr; }
  /* Stesso motivo del `1fr` qui sopra: anche le shape di uno stesso formato sono
     alte diverse, e impilate darebbero card di altezze diverse. */
  .grid--shapes { --bottle-size: 11rem; grid-auto-rows: 1fr; }
  .card--shape { min-height: 0; }

  /* La preview della bottiglia sale fra intestazione e form: a una colonna
     l'altezza la decide la larghezza dello schermo, non quella della riga. */
  .preview { order: -1; }
  .preview__bottle { height: clamp(12rem, 45vw, 20rem); }
  /* A 390 px il padding che allinea i campi al titolo si mangerebbe metà
     colonna: qui vince lo spazio dei campi. */
  .form-panel { --panel-pad: 1rem; }

  /* Risultati: tasti e valuta sulla prima riga, titolo e testo sotto a tutta
     larghezza — stretti fra i tasti e lo switch andavano a capo ogni due parole. */
  .screen--results .screen__header { flex-wrap: wrap; }
  .screen--results .screen__heading { order: 1; flex-basis: 100%; }
  .form__actions .button { flex: 1 1 100%; }

  /* Le card impilate sono più alte di uno schermo: centrato, l'invito finirebbe
     a metà della seconda. Sta sulla prima, quella del formato scelto. */
  .unlock { justify-content: flex-start; padding-top: 4rem; }
  .lead__actions { flex-direction: column-reverse; align-items: stretch; }
}

/* La bottiglia dell'intro resta fuori da questa regola: è un video e deve girare
   sempre, è una richiesta esplicita del committente (vedi AGENTS.md). */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}