/* I font del sito, ospitati da noi (07/10/2026): prima arrivavano da Google Fonts,
   che riceveva l'IP di ogni visitatore. Solo latin e latin-ext (inglese, francese,
   italiano). Scaricati da Google Fonts, licenza SIL OFL. */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("font/inter-italic-latin-ext.woff2?v=985883cf") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("font/inter-italic-latin.woff2?v=d531507d") 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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("font/inter-normal-latin-ext.woff2?v=34b9c504") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("font/inter-normal-latin.woff2?v=3100e775") 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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("font/inter-normal-latin-ext.woff2?v=34b9c504") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("font/inter-normal-latin.woff2?v=3100e775") 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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("font/inter-normal-latin-ext.woff2?v=34b9c504") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("font/inter-normal-latin.woff2?v=3100e775") 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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("font/inter-normal-latin-ext.woff2?v=34b9c504") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("font/inter-normal-latin.woff2?v=3100e775") 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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("font/newsreader-italic-latin-ext.woff2?v=591373ce") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("font/newsreader-italic-latin.woff2?v=2bf0dbb1") 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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font/newsreader-normal-latin-ext.woff2?v=45683de0") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font/newsreader-normal-latin.woff2?v=6e4f2958") 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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("font/newsreader-normal-latin-ext.woff2?v=45683de0") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("font/newsreader-normal-latin.woff2?v=6e4f2958") 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;
}

/* Carspotter Daily Monaco - front di collaborazione
   Palette: rosso e bianco della bandiera di Monaco, blu notte del marchio,
   fondo calcare freddo (le facciate di Monte Carlo all'ombra).
   Display: Inter Black Italic, cioe' il lettering del logo.
   Testo: Newsreader, per far leggere il media kit come un documento vero. */

:root {
  color-scheme: light;

  --ink:      #0A1220;
  --ink-2:    #16233A;
  --paper:    #E7EAEF;
  --white:    #FFFFFF;
  --red:      #E8121A;
  --steel:    #464C59;
  --rule:     #C8CFDA;

  --display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;

  --s0: 1rem;
  --s1: 1.333rem;
  --s2: 1.777rem;
  --s3: 2.369rem;
  --s4: 3.157rem;
  --s5: 4.209rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: hidden;
}

@media (min-width: 40rem) { body { font-size: 1.125rem; } }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.028em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: inherit; }

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

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: var(--gutter); top: 1rem; z-index: 10;
  background: var(--red); color: var(--white);
  padding: .6rem 1rem; border-radius: 2px;
  font-family: var(--display); font-style: normal; font-weight: 700;
}

/* ---------- fascia scura ---------- */

.night {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

/* ⚠️ 01/10/2026: si torna al marchio VECCHIO (deciso da Gio e da lei
   all'incontro), quindi qui torna l'auto di PROFILO, `brand/icona-auto-rossa.svg`,
   lunga e bassa (990:210). Il ragionamento qui sotto sull'auto di fronte e'
   storia: la misura in percentuale della fascia resta buona per tutte e due.

   La sagoma di sfondo, cioe' l'auto del marchio in filigrana dietro le fasce
   scure. C'era l'auto di PROFILO del badge tondo (`brand/icona-auto-rossa.svg`)
   e usciva su ogni fascia. Col marchio nuovo quella e' la forma di
   un'identita' scartata: e' stata tolta il 05/09, e lo stesso giorno Gio ha
   chiesto di **rimetterla con l'auto nuova**, non di lasciare le fasce nude.

   L'auto nuova e' vista DI FRONTE, quindi e' un'altra forma e vuole un altro
   trattamento. La vecchia era lunga e bassa (piu' o meno 3:1): riempiva una
   fascia orizzontale distesa, e la si poteva tagliare sul bordo perche' un
   profilo tagliato si legge lo stesso. Questa e' larga 1,37 volte la sua
   altezza e **simmetrica**: tagliata a meta' diventa un mezzo muso storto, e
   allargata a nastro esce dalla fascia. Quindi qui sta **intera**, misurata in
   altezza sulla fascia che la ospita, e appoggiata a destra.

   L'opacita' cambia col fondo e non e' un capriccio: sul blu piatto .12 e'
   gia' visibile, sopra la fotografia serve meno perche' sotto c'e' gia' un
   disegno. */

.night::after {
  content: "";
  position: absolute;
  right: clamp(1rem, 4vw, 5rem);
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 990 / 210;
  background: url("brand/icona-auto-rossa.svg?v=4a1603ff") center / contain no-repeat;
  opacity: .12;
  pointer-events: none;

  /* ⚠️ La misura si prende dalla FASCIA, non dallo schermo. Con una misura
     fissa (era `clamp(6rem, 14vw, 13rem)`) le fasce basse non la contenevano:
     sul piede di `collaborate`, alto circa 150 px, un'auto da 208 px usciva
     sotto e veniva tagliata a meta' da `overflow: hidden`. Segnalato da Gio
     il 05/09.
     `height` in percentuale su un elemento posizionato si misura sulla fascia
     che lo contiene, quindi ogni fascia ha la sua auto in proporzione. I due
     tetti servono agli estremi: senza il massimo, la fascia alta di
     `collaborate` ne avrebbe una da mezzo schermo; senza `max-width` su una
     fascia stretta arriverebbe a coprire il testo. */
  height: 70%;
  max-height: 13rem;
  min-height: 4.5rem;
  max-width: 45%;
}

/* Sulla fascia con la FOTOGRAFIA, no. Provata il 05/09 in basso a destra,
   spenta al 10%: cade comunque sopra la macchina fotografata, e due auto una
   sull'altra non si leggono ne' l'una ne' l'altra, si legge solo che c'e'
   del disordine. Sulla fotografia il segno grafico c'e' gia' ed e' lo scatto.
   Resta su tutte le altre fasce scure, che sono blu piatto e la sanno reggere.
   Per rimetterla: si cancellano queste tre righe. */
.night.foto::after { display: none; }

/* La testata di `home-logo`, la versione della home senza fotografia. Quella
   pagina esiste apposta per avere un segno grafico grande al posto dello
   scatto: qui l'auto non e' una filigrana, e' il pezzo che regge mezza pagina.
   Sotto i 64rem non compare affatto, perche' il titolo arriva fin li' e l'auto
   gli passa attraverso le lettere (visto a 560 e a 700 px). */
.night.hub:not(.foto):not(.sotto)::after { display: none; }

@media (min-width: 64rem) {
  .night.hub:not(.foto):not(.sotto)::after {
    display: block;
    top: 22%;
    transform: none;
    right: 5rem;
    height: clamp(11rem, 20vw, 20rem);
    opacity: .2;
  }
}

.night .wrap { position: relative; z-index: 1; }

.night a { color: var(--white); }
.night a.door { color: var(--ink); }

/* ---------- testata ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
}

/* Il marchio si misura in ALTEZZA, non in larghezza. Il badge tondo era quasi
   quadrato, quindi dargli una larghezza equivaleva a dargli un'altezza; il
   marchio orizzontale e' 4,35:1, e la stessa larghezza lo rendeva alto un
   quarto, cioe' una strisciolina. Fissata l'altezza, la larghezza segue da
   sola e la presenza non dipende piu' dalla forma del file.
   `max-width: 100%` e' la rete: un lockup cosi' largo, sul telefono stretto,
   uscirebbe dalla colonna invece di rimpicciolirsi. */
.masthead img { display: block; height: 4.5rem; width: auto; max-width: 100%; }

/* hub: il marchio non e' una firma d'angolo, e' l'unica immagine che abbiamo */
.masthead.solo { padding-block: 2.5rem 0; align-items: flex-start; }
.masthead.solo img { height: clamp(4.5rem, 10vw, 7.5rem); }

.masthead nav {
  display: flex;
  gap: 1.5rem;
  font-family: var(--display);
  font-style: normal;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: 0;
}

/* La porta dei marchi. E' contornata di proposito: sta sopra la fotografia,
   dove il fondo cambia da un ritaglio all'altro, e una scritta liscia sparisce
   sul chiaro. Contorno sottile e non rosso, cosi' si legge come navigazione e
   non fa concorrenza al tasto del negozio. */
.masthead nav a {
  text-decoration: none;
  padding: .5rem .9rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 2px;
  background: rgba(10,18,32,.45);
  backdrop-filter: blur(4px);
  letter-spacing: .01em;
  font-size: .875rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.masthead nav a:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

/* ---------- riga dell'avvistamento ---------- */

.spot {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.75rem;
  padding: .9rem 0;
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
  font-family: var(--display);
  font-style: normal;
  font-size: .9375rem;
  letter-spacing: -0.01em;
}

.spot b { font-weight: 700; }

/* l'ultimo video del canale (dal 03/10/2026, al posto dell'auto scritta a mano) */
.spot.video { align-items: center; }
.spot.video a {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.spot.video a:hover b { text-decoration: underline; text-underline-offset: .2em; }
.spot.video img {
  width: 64px; height: 36px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
}

.spot .tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: #A9B4C6;
}

.spot .tag::before {
  content: "";
  width: .5rem; height: .5rem;
  background: var(--red);
  border-radius: 50%;
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3rem, 8vw, 5.5rem); }

.hero h1 {
  font-size: clamp(2.6rem, 8.5vw, var(--s5));
  max-width: 16ch;
  margin-bottom: 1.5rem;
}

.hero .actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.lede {
  font-size: clamp(1.125rem, 2.4vw, var(--s1));
  color: #C6CEDC;
  max-width: 38rem;
  margin-bottom: 2rem;
}

/* ---------- bottoni ---------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-style: normal;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 2px solid var(--red);
  background: var(--red);
  color: var(--white);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.btn:hover { background: #C60E15; border-color: #C60E15; }

.btn.ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn.ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ---------- sezioni chiare ---------- */

.section { padding-block: clamp(3rem, 7vw, 5rem); }

.section > .wrap > h2 {
  font-size: clamp(1.9rem, 4.6vw, var(--s3));
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.section .intro { color: var(--steel); max-width: 44rem; font-size: 1.0625rem; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------- tabella della portata ---------- */

.scroller { overflow-x: auto; margin-top: 2rem; }

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}

th, td { padding: 1rem 1.25rem 1rem 0; vertical-align: baseline; }

thead th {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: .875rem;
  color: var(--steel);
  border-bottom: 2px solid var(--ink);
  padding-bottom: .6rem;
}

tbody tr { border-bottom: 1px solid var(--rule); }

td.platform {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--s1);
  white-space: nowrap;
}

td.platform a { text-decoration: none; border-bottom: 2px solid transparent; }
td.platform a:hover { border-bottom-color: var(--red); }

td.count {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: var(--s1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

td.what { color: var(--steel); font-size: .9875rem; max-width: 26rem; }

tfoot td {
  border-top: 2px solid var(--ink);
  font-family: var(--display);
  font-style: normal;
  font-weight: 800;
  padding-top: 1rem;
}

.caveat { color: var(--steel); font-size: .9375rem; margin-top: 1.25rem; max-width: 44rem; }

/* ---------- listino ---------- */

.packages { margin-top: 2.5rem; display: grid; gap: 0; }

.pack {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 2rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}

.pack:last-child { border-bottom: 1px solid var(--rule); }

.pack h3 { font-size: var(--s1); font-style: italic; }

.pack p { grid-column: 1 / -1; margin: 0; color: var(--steel); font-size: 1rem; max-width: 46rem; }

.pack .price {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-align: right;
  border-top: 3px solid var(--red);
  padding-top: .5rem;
  min-width: 11rem;
}

.pack .price span { display: block; font-size: .8125rem; font-weight: 500; color: var(--steel); letter-spacing: 0; }

/* ---------- prove ---------- */

.proof {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: 2.25rem;
}

.proof div { border-top: 3px solid var(--red); padding-top: .9rem; }

.proof .n {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, var(--s4));
  line-height: 1;
  letter-spacing: -0.04em;
}

.proof small { color: var(--steel); font-size: .9375rem; display: block; margin-top: .4rem; }

/* ---------- luoghi ---------- */

.places { margin: 2rem 0 0; padding: 0; list-style: none; columns: 2; column-gap: 2.5rem; max-width: 40rem; }
.places li { break-inside: avoid; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-family: var(--display); font-style: normal; font-weight: 600; font-size: 1rem; }

@media (max-width: 30rem) { .places { columns: 1; } }

/* ---------- modulo ---------- */

.form-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; max-width: 44rem; }

@media (max-width: 38rem) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field.wide { grid-column: 1 / -1; }
.field.wide .btn { align-self: start; width: auto; }

label {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: .875rem;
}

input, select, textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .75rem .85rem;
  width: 100%;
}

textarea { min-height: 7rem; resize: vertical; }

input:focus, select:focus, textarea:focus { border-color: var(--ink); }

.night input, .night select, .night textarea { background: var(--white); }

.form-note { color: var(--steel); font-size: .9375rem; margin-top: 1rem; }

.night .form-note { color: #A9B4C6; }

.sent { display: none; border-left: 4px solid var(--red); padding: 1.25rem 0 1.25rem 1.25rem; max-width: 44rem; margin-top: 2rem; }
.sent h3 { font-size: var(--s2); margin-bottom: .5rem; }
.sent p { margin-bottom: 0; }
.sent .preview-flag { color: #A9B4C6; font-size: .875rem; margin-top: .75rem; }

.ship {
  margin-top: 1rem;
  max-width: 30rem;
  font-size: .9375rem;
  color: #A9B4C6;
}

/* ---------- porte (pagina hub) ---------- */

.doors { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 3rem; }

.door {
  display: block;
  text-decoration: none;
  background: var(--white);
  color: var(--ink);
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 2px;
  border-bottom: 4px solid var(--red);
}

.door h2 { font-size: var(--s2); margin-bottom: .5rem; }
.door p { color: var(--steel); font-size: 1rem; margin: 0; }
.door:hover { background: #F6F8FB; }

.channels { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.22); font-family: var(--display); font-style: normal; font-weight: 600; }
.channels a { text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .15rem; }
.channels a:hover { border-bottom-color: var(--red); }
.channels .n { color: #8E9AAE; font-weight: 500; }

/* ---------- piede ---------- */

footer { padding-block: 3rem; font-size: .9375rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; justify-content: space-between; }
footer a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
footer p { margin: 0; color: #8E9AAE; }

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

/* ---------- telefono ---------- */

@media (max-width: 34rem) {
  .masthead { flex-wrap: wrap; gap: .75rem 1rem; }
  /* Anche qui in altezza. A 3rem il marchio viene largo 209 px: da solo sta
     in riga col tasto "For brands" fino a circa 400 px di schermo, sotto il
     tasto va a capo da solo grazie al flex-wrap qui sopra invece di sfondare.
     (Era 2,5rem: alzato insieme al desktop, il marchio nuovo e' un lockup
     disteso e a quella misura si leggeva "DAILY MONACO" a fatica.) */
  .masthead img { height: 3.25rem; }
  .masthead.solo img { height: 4rem; }
  .masthead nav { gap: 1rem; font-size: .875rem; }

  .pack { grid-template-columns: 1fr; gap: .5rem; }
  .pack .price { text-align: left; min-width: 0; }

  .btn { width: 100%; text-align: center; }
  .hero .actions .btn { width: auto; flex: 1 1 12rem; }

  .proof { gap: 1.75rem; }
}

/* ---------- fascia con la fotografia (home e shop) ----------
   La foto sta nel ::before, il velo in un elemento suo: cosi' l'immagine
   si adatta da sola a qualsiasi larghezza e il soggetto si sposta
   ritagliando il file, non toccando il CSS. */

.foto { position: relative; }

/* dove c'e' la fotografia, l'auto del logo in filigrana non serve */

.foto::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url("foto/hero-monaco-pc.jpg?v=de989390") right center / cover no-repeat;
}


.foto .velo {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(100deg, rgba(10,18,32,.96) 0%, rgba(10,18,32,.88) 38%, rgba(10,18,32,.42) 68%, rgba(10,18,32,.25) 100%),
    linear-gradient(to bottom, rgba(10,18,32,.85) 0%, rgba(10,18,32,0) 20%, rgba(10,18,32,0) 48%, rgba(10,18,32,.72) 82%, rgba(10,18,32,1) 100%);
}

.foto .wrap { position: relative; z-index: 2; }

/* Sul telefono l'auto accanto al titolo, come sul computer (Gio, 05/10/2026): una
   fascia di foto da bordo a bordo dietro il titolo, la stessa immagine del computer
   (auto a destra, lato sinistro scuro sotto le lettere). Sta DENTRO il titolo
   (h1::before), cosi' lo segue su qualsiasi telefono; in alto e in basso sfuma nel
   blu con una maschera, quindi nessun bordo netto. */
@media (max-width: 40rem) {
  .foto::before { background: #0A1220; }
  .foto .velo { display: none; }
  .foto h1 { position: relative; text-shadow: 0 2px 14px rgba(10,18,32,.85); }
  .foto h1::before {
    content: ""; position: absolute; z-index: -1;
    /* larga quanto lo schermo, non quanto il titolo (che ha max-width: 12ch) */
    left: calc(-1 * var(--gutter)); width: 100vw;
    top: -2.5rem; bottom: -2.5rem;
    background: url("foto/hero-monaco.jpg?v=a6705c04") right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  }
}

/* fascia sotto la foto, sul fondo pieno */
.sotto .channels { margin-top: 0; border-top: 0; padding-top: 0; }
.sotto .wrap { padding-block: 2.5rem 0; }

/* Qui sotto c'e' il contatore, e la sagoma dell'auto gli passava in mezzo alla
   riga di spiegazione rendendola illeggibile. Nella fascia bassa l'auto resta
   quindi confinata a destra e piu' scarica: e' uno sfondo, non un disegno da
   guardare. */

/* riga di stato al posto dell'avvistamento */
.spot.attesa .tag::before { background: #E8B21A; }

/* ---------- il contatore delle visualizzazioni ----------
   Tabellone d'aeroporto: ogni cifra e' una finestrella con dentro una striscia
   di dieci numeri che scorre. Il numero e' vero, il ritmo e' misurato: dettagli
   in stats.json. */

.contatore { margin: 0 0 2.5rem; }

/* Dal 03/10/2026 il contatore sta nella testata, dentro la striscia fra le due
   righe, a destra dell'ultimo video: si vede appena si apre la home, e la
   striscia gli fa da cornice (richiesta di Gio). Sul telefono va a capo, sempre
   dentro le righe. */
.striscia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding: .9rem 0;
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.striscia .spot { border: 0; padding: 0; margin: 0; }
.striscia .contatore { margin: 0; display: flex; align-items: center; gap: .75rem; }
.striscia .cifre { font-size: clamp(1.35rem, 5.5vw, 1.75rem); }
.striscia .cont-eti { margin: 0; font-size: .9375rem; font-weight: 600; color: #A9B4C6; }
@media (max-width: 30rem) {
  .striscia .spot { gap: .5rem 1rem; }
}

.cifre {
  display: flex;
  align-items: stretch;
  gap: .07em;
  font-family: var(--display);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(2rem, 7.5vw, 4rem);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.cifra {
  position: relative;
  width: .66em;
  height: 1em;
  overflow: hidden;
  border-radius: .04em;
  background: linear-gradient(to bottom, #1B2941 0%, #131F33 49%, #0E1728 51%, #16233A 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}

/* la fessura in mezzo alla paletta */
.cifra::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0,0,0,.55);
  z-index: 2;
}

.nastro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: transform .22s cubic-bezier(.3,.9,.3,1);
}

.nastro span {
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.sep {
  display: flex;
  align-items: flex-end;
  padding-bottom: .06em;
  color: #6D7A90;
  font-weight: 700;
}

.cont-eti {
  margin: .85rem 0 0;
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
  max-width: none;
}

.annuncio { color: #A9B4C6; font-size: .9375rem; max-width: 34rem; margin: 0 0 1.5rem; }

/* ---------- selettore di lingua ---------- */

.lingue {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  align-items: baseline;
  font-family: var(--display);
  font-style: normal;
  font-weight: 600;
  font-size: .9375rem;
  color: #8E9AAE;
}

.lingue a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.lingue a:hover { border-bottom-color: var(--red); }
.lingue .ora { color: var(--white); border-bottom: 2px solid var(--red); padding-bottom: .1rem; }

@media (max-width: 34rem) {
  .cifra { width: .68em; }
}

/* ---------- credito di chi ha fatto il sito ----------
   "Voren" con la V maiuscola e ".dev" tutto nel verde accento di voren.dev
   (#CBF24A), come il logo della pagina Facebook di voren (03/10/2026; prima
   era verde solo il punto). Il resto resta spento:
   e' una firma, non un annuncio. */

.credito { margin: 0; max-width: none; font-family: var(--display); font-style: normal; font-size: .875rem; }

.credito .da { font-weight: 500; color: #5C6779; }

.credito a {
  font-family: var(--display);
  font-style: normal;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: -0.01em;
  color: #6D7A90;
  text-decoration: none;
  border-bottom: 0;
  transition: color .15s ease;
}

.credito a:hover, .credito a:hover .punto { color: var(--white); }
.credito .punto { color: #CBF24A; }

/* Le schede dei prodotti sulla pagina shop, solo col negozio aperto
   (`NEGOZIO` in testi.py). Tutta la scheda e' il link al negozio. */
.prodotti { max-width: 64rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; margin: 0 0 1.5rem; }
.btn.tutti { align-self: start; margin-bottom: 1rem; }
.prodotto { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; }
.prodotto img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #fff; margin-bottom: .5rem; transition: transform .2s; }
.prodotto:hover img { transform: translateY(-3px); }
.prodotto b { font-family: var(--display); font-weight: 700; font-size: 1.125rem; }
.prodotto span { color: #A9B4C6; font-size: .9375rem; }
/* Sul telefono due per riga, tutti e quattro insieme (Gio, 05/10/2026): prima era
   una fila da scorrere di lato con una scheda e mezza in vista, e gli altri
   prodotti non li vedeva nessuno. Foto piu' basse e testi piu' piccoli. */
@media (max-width: 40rem) {
  .prodotti { grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; }
  .prodotto { gap: .2rem; }
  .prodotto img { aspect-ratio: 4 / 5; margin-bottom: .35rem; }
  .prodotto b { font-size: .95rem; }
  .prodotto span { font-size: .8rem; line-height: 1.35; }
}

/* Modulo vero (05/10/2026): il campo trappola per i bot resta fuori schermo, non `display:none`,
   che alcuni bot riconoscono e saltano. L'errore compare solo se l'invio fallisce. */
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-errore { color: #FFB3B6; margin-top: 1rem; max-width: 44rem; }

/* La lista email in home (05/10/2026), sotto i prodotti. */
.iscriviti { max-width: 44rem; margin: 3rem 0 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); }
.iscriviti h2 { color: var(--white); font-size: var(--s3); margin-bottom: .5rem; }
.iscriviti p { color: #C6CEDC; margin-bottom: 1rem; }
.iscriviti .riga { display: flex; gap: .75rem; flex-wrap: wrap; }
.iscriviti input[type=email] { flex: 1 1 16rem; min-width: 0; }
.iscriviti .btn { flex: 0 0 auto; width: auto; }
.iscriviti .nota { font-size: .875rem; color: #A9B4C6; margin: .75rem 0 0; }
.iscriviti .ok { color: var(--white); font-family: var(--display); font-weight: 700; }
.iscriviti .err { color: #FFB3B6; margin-top: .75rem; }
@media (max-width: 40rem) { .iscriviti .btn { width: 100%; } }