/* ═══════════════════════════════════════════════════════════════════════════
   LO STILE DEL SITO VETRINA, in un file solo.

   Era dentro index.html, ed è uscito il 18/09/2026 quando le pagine sono
   diventate quattro: tre copie dello stesso foglio di stile sono tre fogli di
   stile diversi al primo ritocco, e la pagina che nessuno guarda è quella che
   resta indietro.

   Stessa identità del prodotto (vedi src/app/tema.css): niente bianco, niente
   cartoline che galleggiano, numeri da strumentazione.
   ══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   IL SITO VETRINA. Stessa identità del prodotto (vedi src/app/tema.css):
   niente bianco, niente cartoline che galleggiano, numeri da strumentazione.
   Un file solo, nessun JavaScript: è una pagina che deve aprirsi in fretta dal
   telefono di un ristoratore, non un'applicazione.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --smalto:oklch(0.968 0.008 85); --smalto-scuro:oklch(0.935 0.011 85);
  --filetto:oklch(0.86 0.012 85); --filetto-forte:oklch(0.72 0.015 85);
  --inchiostro:oklch(0.235 0.012 75); --inchiostro-2:oklch(0.50 0.012 75);
  --inchiostro-3:oklch(0.63 0.010 75);
  --acciaio:oklch(0.215 0.018 155); --acciaio-2:oklch(0.275 0.020 155);
  --verde:oklch(0.76 0.175 148); --ambra:oklch(0.80 0.155 74);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --smalto:oklch(0.185 0.012 75); --smalto-scuro:oklch(0.225 0.013 75);
    --filetto:oklch(0.31 0.014 75); --filetto-forte:oklch(0.42 0.016 75);
    --inchiostro:oklch(0.94 0.008 85); --inchiostro-2:oklch(0.74 0.010 85);
    --inchiostro-3:oklch(0.60 0.010 85);
    --acciaio:oklch(0.155 0.016 155); --acciaio-2:oklch(0.215 0.018 155);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--smalto); color:var(--inchiostro);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
/* ── LA GRIGLIA DEL SITO ───────────────────────────────────────────────────
   `.dentro` è la larghezza del SITO (72rem), non quella di una schermata di
   telefono. Fino al 18/09/2026 erano 46rem: su un portatile il risultato era
   l'applicazione ingrandita, con un filo di testo in mezzo a due deserti.
   `.testo` è la larghezza della LETTURA (38rem): un paragrafo largo 72rem non
   lo legge nessuno, l'occhio perde la riga. Due misure diverse perché fanno
   due mestieri diversi. */
.dentro{max-width:72rem;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.testo{max-width:38rem}

/* Il corpo del testo cresce con lo schermo, ma smette di crescere: oltre una
   certa misura un carattere grande non è più leggibile, è solo grande. */
body{font-size:clamp(16px,0.55vw + 15px,18px)}
.etichetta{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}
.quadrante{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-variant-numeric:tabular-nums}
.pannello{border:1px solid var(--filetto);background:var(--smalto-scuro);border-radius:2px}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;font-weight:600}


/* ═══════════════════════════════════════════════════════════════════════════
   IL LAYOUT DEL SITO
   Riscritto il 18/09/2026: prima era una colonna sola, uguale all'app. Un sito
   e un'applicazione hanno due lavori diversi — uno convince, l'altra si usa —
   e la stessa identità si può portare in tutti e due senza copiare la forma.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Testata ──────────────────────────────────────────────────────────────
   Sta attaccata in alto: su una pagina lunga il modo di tornare indietro o di
   entrare non deve costare uno scorrimento fino in cima. */
header.cima{
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--filetto);
  background:color-mix(in oklab,var(--smalto) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
}
header.cima .dentro{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px}
.marchio{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:600; letter-spacing:-.02em; font-size:18px;
}
.entra{
  display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
  border:1px solid var(--filetto-forte);color:var(--inchiostro-2);text-decoration:none;
}
.entra:hover{color:var(--inchiostro);border-color:var(--inchiostro-3)}

/* ── Ritmo verticale ──────────────────────────────────────────────────────
   Le sezioni respirano più del doppio che nell'app: lì lo spazio è tempo
   perso, qui è ciò che fa capire dove finisce un discorso e ne comincia un
   altro. */
main section{padding:clamp(40px,7vw,78px) 0;border-top:1px solid var(--filetto)}
main section:first-of-type{border-top:none}
h1{font-size:clamp(30px,5.2vw,52px);line-height:1.08}
h2{font-size:clamp(23px,2.6vw,32px);line-height:1.18;margin-bottom:12px}
h3{font-size:17px;margin-bottom:6px}
p+p{margin-top:12px}
.guida{color:var(--inchiostro-2);font-size:clamp(16px,1.1vw,19px);max-width:66ch}

/* ── L'apertura ───────────────────────────────────────────────────────────
   Su schermo largo il titolo e la macchina stanno affiancati: è la prima cosa
   che si vede, e vedere il prodotto accanto alla promessa vale più di
   qualsiasi frase in più. Sotto i 900px si impilano, titolo sopra. */
.apertura{padding:clamp(44px,7vw,86px) 0 0}
.apertura h1{max-width:20ch}
.apertura .sotto{margin-top:16px;color:var(--inchiostro-2);font-size:clamp(17px,1.3vw,21px);max-width:34rem}
.apertura .azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.primo{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,52px);align-items:center}
@media (min-width:900px){
  .primo{grid-template-columns:1.05fr .95fr}
  .apertura{padding-bottom:clamp(44px,7vw,86px)}
}

/* ── La macchina: la fascia che il ristoratore vede ogni mattina ──────────
   Non è una decorazione: è il prodotto, e sta nell'apertura per quello. */
.macchina{
  background:var(--acciaio);color:oklch(0.93 0.01 150);
  border:1px solid var(--acciaio-2);border-radius:3px;overflow:hidden;
}
.macchina .riga1{
  display:flex;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--acciaio-2);color:oklch(0.72 0.02 150);
}
.macchina .corpo{display:flex;align-items:center;gap:18px;padding:22px 16px}
.macchina .numero{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;
  font-size:clamp(46px,6vw,62px);line-height:1;color:var(--verde);
}
.macchina .corpo p{color:oklch(0.86 0.012 150);line-height:1.4}
.macchina .spie{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0 16px 18px;color:oklch(0.70 0.02 150)}
.spia{display:inline-flex;align-items:center;gap:7px}
.spia i{width:7px;height:7px;border-radius:50%;background:var(--verde);display:inline-block}
.spia.attesa{opacity:.55}
.spia.attesa i{background:oklch(0.55 0.02 150)}

/* ── Tasti ────────────────────────────────────────────────────────────────
   44px di altezza: la misura di un dito, non una scelta grafica. */
.pieno,.vuoto{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;text-decoration:none;border-radius:2px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}
.pieno{background:var(--inchiostro);color:var(--smalto)}
.vuoto{border:1px solid var(--filetto-forte);color:var(--inchiostro-2)}
.vuoto:hover{color:var(--inchiostro);border-color:var(--inchiostro-3)}

/* ── I quattro passi ──────────────────────────────────────────────────────
   Una griglia che si riempie da sola: quattro colonne su un portatile, due su
   un tablet, una sul telefono — senza tre soglie scritte a mano che prima o
   poi qualcuno dimentica di aggiornare. */
.passi{display:grid;gap:12px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.passo{padding:18px 16px 20px;display:flex;flex-direction:column;gap:2px}
.passo .n{color:var(--inchiostro-3)}
.passo h3{margin-top:8px}
.passo p{color:var(--inchiostro-2);font-size:15px;line-height:1.5}

/* ── La citazione ─────────────────────────────────────────────────────────*/
.citazione{
  margin-top:26px;padding:22px clamp(18px,3vw,30px);
  border-inline-start:2px solid var(--filetto-forte);
  font-size:clamp(18px,1.7vw,24px);line-height:1.35;max-width:44rem;
}
.citazione span{display:block;margin-top:10px;color:var(--inchiostro-3);font-size:14px;line-height:1.5}

/* ── Il patto ─────────────────────────────────────────────────────────────*/
.patto{list-style:none;margin-top:22px;padding:6px 0}
.patto li{
  padding:14px clamp(16px,2.5vw,22px);color:var(--inchiostro-2);
  border-top:1px solid var(--filetto);line-height:1.5;
}
.patto li:first-child{border-top:none}
.patto strong{color:var(--inchiostro)}

/* ── Le due colonne dei blocchi di testo lunghi ───────────────────────────
   Solo da 820px in su: sotto, due colonne sono due colonne strette. */
.due{display:grid;gap:clamp(18px,3vw,34px);grid-template-columns:1fr}
@media (min-width:820px){ .due{grid-template-columns:1fr 1fr} }
.due p{color:var(--inchiostro-2)}

.contatto{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ── I link che portano altrove ───────────────────────────────────────────
   Un collegamento dentro un paragrafo è alto quanto la riga: 19 pixel, cioè
   un bersaglio che su un telefono si manca. Escono dal paragrafo e prendono
   l'altezza di un dito. */
.oltre{margin-top:14px}
.oltre a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--inchiostro-2);text-decoration:underline;text-underline-offset:3px;
}
.oltre a:hover{color:var(--inchiostro)}

/* ── Piede ────────────────────────────────────────────────────────────────*/
footer{border-top:1px solid var(--filetto);padding:34px 0 46px;margin-top:20px}
footer .righe{display:flex;flex-wrap:wrap;gap:4px 22px;margin-bottom:18px}
footer a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--inchiostro-2);text-decoration:none;
}
footer a:hover{color:var(--inchiostro);text-decoration:underline;text-underline-offset:3px}
footer p{color:var(--inchiostro-3);font-size:13.5px;line-height:1.6}

/* ── Le pagine di testo (informativa, condizioni, chi siamo) ──────────────*/
.legale section{border-top:1px solid var(--filetto);padding:26px 0}
.legale h2{font-size:clamp(19px,1.8vw,23px);margin-bottom:10px}
.legale p{color:var(--inchiostro-2);max-width:68ch}
.legale code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88em;word-break:break-all}
.legale a{color:var(--inchiostro);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   LE SUPERFICI CHE NON HO DISEGNATO IO
   Selezione, cursore, anello del fuoco, barra di scorrimento: arrivano con i
   valori predefiniti del browser, che non appartengono a nessun progetto. Un
   sito dove selezioni una frase e diventa blu di sistema è un sito assemblato,
   non costruito.
   ══════════════════════════════════════════════════════════════════════════ */
::selection{ background:oklch(0.76 0.175 148 / .28); color:var(--inchiostro) }
:root{ accent-color:var(--verde); caret-color:var(--verde) }
:focus-visible{
  outline:2px solid var(--verde); outline-offset:3px; border-radius:1px;
}
@supports (scrollbar-color: auto) {
  :root{ scrollbar-color:var(--filetto-forte) transparent; scrollbar-width:thin }
}

/* ── LA SEQUENZA DEI PASSI ────────────────────────────────────────────────
   Erano quattro cartoline identiche in fila — il contenitore pigro, quello
   che si usa quando non si è deciso che forma ha il contenuto. Ma questi
   quattro passi sono una cosa che accade NEL TEMPO, uno dopo l'altro, e il
   tempo si disegna come una linea, non come una griglia.
   La riga verticale è la stessa fascia della macchina, girata. */
.sequenza{ margin-top:30px; border-inline-start:1px solid var(--filetto-forte); padding-inline-start:clamp(18px,3vw,30px) }
.passaggio{ position:relative; padding-block:clamp(16px,2.4vw,26px) }
.passaggio:first-child{ padding-block-start:0 }
.passaggio::before{
  content:""; position:absolute; inset-inline-start:calc(-1 * clamp(18px,3vw,30px) - 4px);
  inset-block-start:calc(clamp(16px,2.4vw,26px) + .55em); width:7px; height:7px;
  border-radius:50%; background:var(--filetto-forte);
}
.passaggio:first-child::before{ inset-block-start:.55em; background:var(--verde) }
.passaggio h3{ font-size:clamp(17px,1.5vw,20px) }
.passaggio p{ color:var(--inchiostro-2); margin-top:4px; max-width:34rem }

/* ── LA FRASE CHE PORTA IL PESO ───────────────────────────────────────────
   Una sola per pagina, e più grande di qualunque titolo tranne il primo:
   è il punto di vista del prodotto, non un ornamento. */
.perno{
  margin-top:26px; font-size:clamp(21px,2.9vw,34px); line-height:1.22;
  letter-spacing:-.02em; max-width:22ch; text-wrap:balance;
}
.perno em{ font-style:normal; color:var(--verde) }