/* Omissify — home. Scritto a mano, sopra tokens.css (importato per primo nell'HTML).
   Nessun valore di colore hardcoded: solo le variabili di tokens.css. */

/* ---- Font: Inter 4.1, sottoinsieme latino, licenza SIL Open Font License 1.1.
   File in website/fonts/, licenza completa in website/fonts/LICENSE-Inter.txt.
   Serviti in locale: nessuna chiamata a Google Fonts o ad altri CDN. ---- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-semibold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }   /* niente parola sola sull'ultima riga dei titoli */
p, li, dd { text-wrap: pretty; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.lead { font-size: var(--text-body); color: var(--color-text-muted); max-width: 46ch; margin-top: var(--space-3); }

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: var(--space-3); top: var(--space-3); transform: translateY(-200%);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  z-index: 100; transition: transform var(--duration) var(--ease);
  text-decoration: none; font-weight: 500;
}
.skip-link:focus { transform: none; }

/* ---- Header ----
   Non resta fisso in alto: così il pulsante primario dell'header e quello
   della pagina non stanno sulla stessa schermata (BRANDBOOK.md §7). */
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-paper); }
.site-header__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding-block: var(--space-3);
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo-img { height: 30px; width: auto; }
.site-header__nav ul {
  display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0;
}
.site-header__nav a {
  white-space: nowrap; font-size: var(--text-small); font-weight: 500; color: var(--color-text);
  text-decoration-thickness: 1px; text-underline-offset: var(--space-2);
}
.site-header__nav a:hover { color: var(--color-ink); }
.site-header__nav a[aria-current="page"] { color: var(--color-ink); text-decoration-thickness: 2px; }  /* la pagina in cui sei */
/* Menu a tendina sotto "Il prodotto": si apre al passaggio del mouse e con la
   tastiera (focus-within). Il link principale porta comunque alla pagina.
   Nessuna freccia: i menu usano parole (BRANDBOOK.md §7). */
.nav-drop { position: relative; }
.site-header__nav .nav-drop__menu {
  display: none; position: absolute; top: 100%; left: calc(-1 * var(--space-4)); z-index: 60;
  flex-direction: column; gap: 0; width: max-content; margin: 0; padding: var(--space-2) 0;
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu { display: flex; }
.site-header__nav .nav-drop__menu a { display: block; padding: var(--space-2) var(--space-4); }
.site-header__nav .nav-drop__menu a:hover { background: var(--color-surface); }
.site-header__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.site-header__actions .btn { padding: 0.6em 1em; font-size: var(--text-small); }
/* Login: disabilitato finché non esistono le licenze (BRANDBOOK.md §7). */
.btn[aria-disabled="true"] {
  color: var(--color-text-muted); border-color: var(--color-text-muted); background: var(--color-surface);
  cursor: not-allowed; pointer-events: none;
}

/* Logo, link e i due pulsanti (Provalo, Login) stanno su una riga fino ai
   tablet. Sotto i 720px i pulsanti spariscono e i link restano accanto al logo; solo sotto i
   540px scendono su una seconda riga, sempre visibili e senza scorrimento
   orizzontale. */
@media (max-width: 860px) {
  .site-header__nav ul { gap: var(--space-5); }
}
@media (max-width: 720px) {
  .site-header__actions { display: none; }
  .site-header__nav ul { gap: var(--space-4); }
}
@media (max-width: 540px) {
  .site-header__row { flex-wrap: wrap; row-gap: 0; }
  .site-header__nav { order: 3; flex-basis: 100%; padding-bottom: var(--space-2); }
  .site-header__nav ul { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
}

/* ---- Il prodotto ---- */
.section--ruled { border-top: 1px solid var(--color-border); }
.prose { margin-top: var(--space-5); }
.prose p { margin: 0 0 var(--space-4); max-width: 65ch; }
.prose p:first-child { margin-top: 0; }

/* ---- Hero ---- */
.hero { padding-top: var(--space-8); }
.hero__title { max-width: 26ch; }
.hero__title .tape { font-size: 1em; }
.hero__problem { margin-top: var(--space-6); max-width: 65ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }

/* ---- Sezioni ---- */
.section--surface { background: var(--color-surface); }
/* Sezione con il nome a margine, come le parti di un atto: il nome della
   sezione sta nella colonna di sinistra (3 su 12), titolo e testo nelle altre
   nove. Niente etichetta sopra il titolo (BRANDBOOK.md §5). Sotto gli 860px
   la colonna sparisce e il nome sale sopra il titolo. */
.labelled {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter); align-items: baseline;
}
.labelled + .labelled { margin-top: var(--space-9); }
.labelled__name { grid-column: 1 / 4; margin: 0; font-size: var(--text-small); font-weight: 500; color: var(--color-text-muted); }
.labelled__body { grid-column: 4 / -1; min-width: 0; }
.labelled__wide { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .labelled { display: block; }
  .labelled__name { margin-bottom: var(--space-3); }
}
.section-cta { margin: var(--space-7) 0 0; }

/* ---- Come funziona: schede con anteprima ---- */
.features {
  list-style: none; margin: var(--space-7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
@media (max-width: 860px) { .features { grid-template-columns: 1fr; gap: var(--space-7); } }
/* Ogni scheda occupa tre righe della griglia comune (subgrid): così le tre
   anteprime hanno la stessa altezza, quella della più alta.
   L'anteprima è una sola card, senza ombra e senza riquadro intorno (BRANDBOOK.md §7);
   quella dell'IA ha il bordo nero: è il lato della chat. */
.feature { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.feature__visual {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-paper); padding: var(--space-5);
}
.feature__visual--ai { border-color: var(--color-ink); }
.feature__title { margin: var(--space-5) 0 var(--space-2); }
.feature > p:last-child { margin: 0; color: var(--color-text-muted); }

/* Il testo delle anteprime resta a 17 px: i segnaposti sono a 0,92 em, e su un
   testo da 14 px scenderebbero sotto il minimo (BRANDBOOK.md §5). */
.mock__label { margin: 0 0 var(--space-3); font-size: var(--text-small); font-weight: 500; color: var(--color-text-muted); }
.mock__text { margin: 0; line-height: 1.8; }
/* Nomi ripristinati: evidenziazione tenue, come nell'estensione (BRANDBOOK.md §10). */
.restored { background: var(--color-surface); padding: 0 0.15em; }
/* Il nastro dei segnaposti ha la stessa forma del nastro nel logo: i punti del
   bordo strappato sono quelli del logo, in proporzione all'altezza del nastro
   (--h), ma dritti, senza l'inclinazione del logo. --tape-clip di tokens.css usa
   invece misure fisse in pixel, pensate per il nastro grande del titolo: su un
   nastro alto 16 px diventerebbero una sega. */
.tip-tape {
  --h: 1.6em;
  display: inline-block; height: var(--h); line-height: var(--h); padding: 0 0.25em;
  background: var(--color-ink); color: var(--color-paper);
  clip-path: polygon(
    calc(100% - 0.0457*var(--h)) 0%, calc(100%) 9.4%, calc(100% - 0.0467*var(--h)) 18%,
    calc(100% - 0.0137*var(--h)) 27.7%, calc(100% - 0.049*var(--h)) 36.4%, calc(100% - 0.0155*var(--h)) 46.9%,
    calc(100% - 0.0389*var(--h)) 53.6%, calc(100% - 0.0043*var(--h)) 65.2%, calc(100% - 0.0555*var(--h)) 70.4%,
    calc(100% - 0.005*var(--h)) 84.1%, calc(100% - 0.0403*var(--h)) 91.5%, calc(100% - 0.017*var(--h)) 100%,
    calc(0.037*var(--h)) 100%, calc(0.0103*var(--h)) 89.6%, calc(0.0416*var(--h)) 82.9%,
    0 75.2%, calc(0.0542*var(--h)) 62.5%, calc(0.007*var(--h)) 55.4%,
    calc(0.045*var(--h)) 46.2%, calc(0.006*var(--h)) 38.1%, calc(0.0438*var(--h)) 27.1%,
    calc(0.0151*var(--h)) 16.9%, calc(0.0392*var(--h)) 6.9%, calc(0.0057*var(--h)) 0%
  );
}

/* ---- Numeri ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--space-8) 0 0; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; gap: var(--space-6); } }
.stats__item { padding: 0 var(--space-6); border-left: 1px solid var(--color-border); }
.stats__item:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 760px) { .stats__item { border-left: 0; border-top: 1px solid var(--color-border); padding: var(--space-5) 0 0; } }
/* Le cifre alla misura dell'H1: eccezione approvata da Stefano il 1° ottobre 2026 (BRANDBOOK.md §5, Numeri). */
.stats__value { font-size: var(--text-h1); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-ink); }
.stats dd { margin: var(--space-3) 0 0; color: var(--color-text-muted); max-width: 28ch; }

/* ---- Cosa sostituisce / cosa lascia: elenchi a filetti, come "Cosa non fa" ---- */
.data-list {
  list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid var(--color-border);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); column-gap: var(--grid-gutter);
}
.data-list li { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; font-weight: 500; color: var(--color-ink); }
.split__note { margin-top: var(--space-5); color: var(--color-text-muted); max-width: 65ch; }

/* ---- Punti con titolo (Perché, Privacy): filetto sopra, nessuna icona (BRANDBOOK.md §7) ---- */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-8); margin-top: var(--space-8); }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; gap: var(--space-6); } }
.facts__item { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.facts__title { font-size: var(--text-h3); letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var(--space-3); }
.facts__item p:last-child { margin: 0; color: var(--color-text-muted); max-width: 46ch; }
.security-quote {
  margin: var(--space-8) 0 var(--space-5); max-width: 60ch;
  font-weight: 500; font-size: 1.125rem; line-height: 1.5;
  border-left: 2px solid var(--color-ink); padding-left: var(--space-4);
}
.manifest summary { cursor: pointer; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.manifest[open] summary { margin-bottom: var(--space-3); }
.code-block {
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-5); margin: 0; max-width: var(--container-narrow);
}
/* pre-wrap: la riga della content_security_policy è lunga e deve andare a capo nel riquadro. */
.code-block code {
  font-family: var(--font-mono); font-size: var(--text-small); line-height: 1.6; color: var(--color-text);
  white-space: pre-wrap; overflow-wrap: break-word;
}
.security-caption { font-size: var(--text-small); color: var(--color-text-muted); margin-top: var(--space-3); max-width: var(--container-narrow); }


/* ---- Prezzo e contatto ---- */
.contact__link { margin: var(--space-5) 0; }

/* ---- FAQ: "+" e "−" come testo, non come icona (BRANDBOOK.md §12) ---- */
.faq-list { margin-top: var(--space-6); }
.faq-item { border-top: 1px solid var(--color-border); padding: var(--space-4) 0; }
.faq-item:last-child { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  cursor: pointer; font-weight: 500; font-size: var(--text-body); color: var(--color-ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; font-weight: 400; font-size: var(--text-h3); line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--color-text-muted); margin: var(--space-3) 0 0; max-width: 65ch; }

/* ---- Footer: solo la riga legale, su fondo bianco ---- */
.site-footer { padding-block: var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-paper); }
/* Sotto la lettera il footer prende il grigio della scena, senza filetto. */
body:has(.omissis:not([hidden])) .site-footer { background: var(--color-surface); border-top: 0; }
.site-footer__fine { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }

/* ---- Registrazione alla fase pilota (modulo: BRANDBOOK.md §12) ---- */
.signup { margin-top: var(--space-7); display: grid; gap: var(--space-5); max-width: var(--container-narrow); }
.signup__field { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.signup label, .signup legend { font-weight: 500; font-size: var(--text-small); color: var(--color-ink); padding: 0; }
.signup__optional { font-weight: 400; color: var(--color-text-muted); }
.signup input[type="text"], .signup input[type="email"], .signup select {
  font: 400 var(--text-body)/1.4 var(--font-sans); color: var(--color-text);
  background: var(--color-paper); border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm); padding: 0.65em 0.8em; min-height: 44px; width: 100%;
  transition: border-color var(--duration) var(--ease);
}
.signup input:focus, .signup select:focus { border-color: var(--color-ink); }
/* Errore: bordo da 2 px, con un pixel di imbottitura in meno perché il campo non si muova. */
.signup [aria-invalid="true"]:is(input[type="text"], input[type="email"], select) {
  border: 2px solid var(--color-ink); padding: calc(0.65em - 1px) calc(0.8em - 1px);
}
.signup__error { color: var(--color-error); font-size: var(--text-small); }
.signup__consent + .signup__error { margin-top: calc(var(--space-2) - var(--space-5)); }  /* vicino alla casella, non al passo della griglia */
.signup .signup__check { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; font-size: var(--text-body); color: var(--color-text); min-height: var(--space-6); }
.signup__check input { font-size: inherit; width: 1em; height: 1em; accent-color: var(--color-ink); margin: 0; flex: none; }
.signup__check input[aria-invalid="true"] { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.signup__consent { align-items: flex-start; }
.signup__consent input { margin-top: 0.3em; }
.signup p { margin: 0; }
.signup__note { font-size: var(--text-small); color: var(--color-text-muted); max-width: 65ch; }
.signup__done { font-weight: 500; }

/* ---- Apertura della home: la lettera che viene oscurata ----
   La sezione è alta quattro schermate; dentro, la scena resta ferma (sticky)
   mentre lo scorrimento cambia fase (data-fase, impostata dallo script):
   0 lettera leggibile · 1 dati trovati, frase a sinistra · 2 nastro su ogni dato
   · 3 il foglio si sposta a sinistra e a destra compare la missione.
   Il foglio è un A4 (210 × 297) e il testo è in proporzione alla sua larghezza. */
.omissis { position: relative; height: 400vh; background: var(--color-surface); }
.omissis__stage {
  --bar: 4.25rem;   /* altezza della barra con logo e pulsanti */
  --w: min(540px, calc((100svh - var(--bar) - 2 * var(--space-5)) / 1.4142));
  --m: max(var(--space-5), (100vw - var(--container)) / 2);
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
.omissis__sheet {
  position: absolute; top: calc(50% + var(--bar) / 2); left: 50%; width: var(--w); aspect-ratio: 210 / 297; margin: 0;
  transform: translate(-50%, -50%);
  background: var(--color-paper); border: 1px solid var(--color-border);
  container-type: inline-size; overflow: hidden;
  transition: transform 600ms var(--ease), opacity 400ms var(--ease);
}
.lettera { padding: 11cqw 10cqw; font: 400 2.9cqw/1.5 "Times New Roman", Times, "Liberation Serif", Tinos, serif; color: var(--color-text); }  /* in proporzione al foglio: circa 15,5 px su un foglio largo 540. Times New Roman come in un documento Word; è un font di sistema, non lo serviamo noi */
.lettera p { margin: 0 0 1.1em; }
.lettera .lettera__mittente { font-weight: 600; color: var(--color-ink); margin-bottom: 2.2em; }
.lettera .lettera__destinatario { margin-left: 50%; margin-bottom: 2.2em; }
.lettera .lettera__oggetto { font-weight: 600; color: var(--color-ink); margin-bottom: 1.8em; }
.lettera .lettera__firma { margin-top: 2em; }
/* Sorpresa: "missi" nell'intestazione non è un dato, quindi non si accende alla
   fase 1; alla fase 2 il nastro lo copre per ultimo, inclinato come nel logo. */

/* Il dato: prima trovato (fondo grigio), poi coperto dal nastro, uno dopo l'altro. */
.dato { position: relative; white-space: nowrap; transition: background-color var(--duration) var(--ease); transition-delay: calc(var(--i) * 60ms); }
.dato::after {
  --h: 1.5em;
  content: ""; position: absolute; left: -0.15em; right: -0.15em; top: 50%; height: var(--h); margin-top: calc(var(--h) / -2);
  background: var(--color-ink); transform: scaleX(0); transform-origin: left center;
  transition: transform 260ms var(--ease); transition-delay: calc(var(--i) * 70ms);
  clip-path: polygon(
    calc(100% - 0.0457*var(--h)) 0%, 100% 9.4%, calc(100% - 0.0467*var(--h)) 18%, calc(100% - 0.0137*var(--h)) 27.7%,
    calc(100% - 0.049*var(--h)) 36.4%, calc(100% - 0.0155*var(--h)) 46.9%, calc(100% - 0.0389*var(--h)) 53.6%,
    calc(100% - 0.0043*var(--h)) 65.2%, calc(100% - 0.0555*var(--h)) 70.4%, calc(100% - 0.005*var(--h)) 84.1%,
    calc(100% - 0.0403*var(--h)) 91.5%, calc(100% - 0.017*var(--h)) 100%,
    calc(0.037*var(--h)) 100%, calc(0.0103*var(--h)) 89.6%, calc(0.0416*var(--h)) 82.9%, 0 75.2%,
    calc(0.0542*var(--h)) 62.5%, calc(0.007*var(--h)) 55.4%, calc(0.045*var(--h)) 46.2%, calc(0.006*var(--h)) 38.1%,
    calc(0.0438*var(--h)) 27.1%, calc(0.0151*var(--h)) 16.9%, calc(0.0392*var(--h)) 6.9%, calc(0.0057*var(--h)) 0%
  );
}
.omissis[data-fase="1"] .dato { background: var(--color-border); }
.omissis:is([data-fase="2"], [data-fase="3"]) .dato::after { transform: none; }

/* La frase a sinistra del foglio e la missione a destra. */
.omissis__hook, .omissis__mission {
  position: absolute; top: calc(50% + var(--bar) / 2); transform: translateY(-50%);
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease), visibility 0s linear 400ms;
}
.omissis__hook { left: var(--m); right: calc(50% + var(--w) / 2 + var(--space-7)); }
.omissis__hook p { color: var(--color-text-muted); }
.omissis__hook .omissis__big { margin-bottom: var(--space-4); font-size: var(--text-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-ink); }
.omissis__mission { left: calc(var(--m) + var(--w) + var(--space-8)); right: var(--m); }
.omissis__title { font-size: var(--text-h1); max-width: 16ch; }
.nowrap { white-space: nowrap; }  /* "di" resta sulla riga del nastro */
.omissis__mission > p { margin-top: var(--space-5); max-width: 52ch; }
.omissis__mission .hero__actions { margin-top: var(--space-6); }
.omissis[data-fase="1"] .omissis__hook--prima,
.omissis[data-fase="2"] .omissis__hook--dopo,
.omissis[data-fase="3"] .omissis__mission { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease) 150ms, visibility 0s; }
/* Fase 3: il foglio scivola a sinistra, al posto della frase. */
.omissis[data-fase="3"] .omissis__sheet { transform: translate(calc(-50vw + var(--m)), -50%); }

/* La barra della home: solo logo, "Scopri di più" e Login, dentro la scena,
   così resta in vista per tutta la sequenza e se ne va con lei. */
.mini-bar {
  position: absolute; z-index: 5; top: 0; left: var(--m); right: var(--m); height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.mini-bar__logo { display: inline-flex; }
.mini-bar__logo img { height: 30px; width: auto; }
.mini-bar__actions { display: flex; gap: var(--space-2); }
.mini-bar .btn { padding: 0.6em 1em; font-size: var(--text-small); }

.omissis__cue {
  position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); margin: 0;
  font-size: var(--text-small); color: var(--color-text-muted); transition: opacity var(--duration) var(--ease);
}
.omissis:not([data-fase="0"]) .omissis__cue { opacity: 0; }

/* Sotto i 1200 px non c'è spazio ai lati del foglio: il foglio sta in alto, la
   frase sotto; alla fase 3 il foglio si dissolve e la missione prende la scena. */
@media (max-width: 1199px) {
  .omissis__stage { --w: min(100vw - 2 * var(--space-5), (100svh - var(--bar)) * 0.6 / 1.4142); }
  .omissis__sheet { top: var(--bar); transform: translateX(-50%); }
  .omissis[data-fase="3"] .omissis__sheet { transform: translateX(-50%) scale(0.96); opacity: 0; }
  .omissis__hook { top: calc(var(--bar) + var(--w) * 1.4142 + var(--space-5)); transform: none; left: var(--space-5); right: var(--space-5); }
  .omissis__hook .omissis__big { font-size: var(--text-h3); }
  .omissis__mission { left: var(--space-5); right: var(--space-5); }
}

/* Transizione di "Scopri di più" (script in fondo a index.html). */
::view-transition-old(root) { animation: esce 380ms var(--ease) both; }
::view-transition-new(root) { animation: entra 520ms var(--ease) 80ms both; }
@keyframes esce { to { opacity: 0; transform: translateY(-6%); } }
@keyframes entra { from { opacity: 0; transform: translateY(8%); } }
/* La sezione di arrivo riceve il focus (per lettori di schermo e tastiera):
   niente anello attorno a un'intera sezione. */
.scopri section:focus { outline: none; }
.scopri__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4.25rem; }
.scopri__bar .btn { padding: 0.6em 1em; font-size: var(--text-small); }