/* ==========================================================================
   Rift — sito ufficiale
   Un solo foglio di stile. I token in testa sono quelli del prodotto
   (reference/product/brand/design-system.md §18, web/styles/tokens.css):
   angoli vivi, fili da 1px, niente ombre sulla pagina, l'arancio solo per
   l'azione. Fuori dai token non si scrivono colori a mano.
   Composizione e ritmo seguono reference/inspiration/DESIGN.md (Fey).
   ========================================================================== */

/* ── Caratteri (licenza OFL accanto ai file) ─────────────────────────────── */
@font-face {
  font-family: "Antonio";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/fonts/antonio-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Antonio";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/fonts/antonio-latin-ext.woff2") 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tema: il sito è solo scuro ───────────────────────────────────────────── */
:root { color-scheme: dark; }

/* ── Token del prodotto ──────────────────────────────────────────────────── */
:root {
  --fondo: #141414;
  --superficie: #1d1d1e;
  --superficie-2: #252526;
  --superficie-scelta: color-mix(in srgb, var(--inchiostro) 7%, var(--superficie));
  --inchiostro: #f0efec;
  /* Il marchio (la «S» e «Rift»): bianco pieno, ovunque (2026-10-29). */
  --marchio: #ffffff;
  --inchiostro-2: #cfcdc8;
  --muto: #a09f9b;
  --filo: #2e2e2e;
  --filo-forte: #48484b;
  --filo-comando: #77777b;

  --accento: var(--rail-accento);
  --su-accento: #17181a;
  --accento-testo: #ff8a3d;
  --accento-tenue: color-mix(in srgb, var(--accento) 12%, var(--superficie));
  --accento-aperto: color-mix(in srgb, var(--accento) 30%, var(--filo));

  --allarme: #ff5a75;
  --attenzione: #f5c518;
  --ok: #4cc38a;
  --nota: #9a9da2;

  /* La colonna scura, un tono sotto il fondo */
  --rail-fondo: #0e0e0f;
  --rail-testo: #bdbbb6;
  --rail-testo-forte: #f0efec;
  --rail-filo: #242426;
  --rail-passaggio: color-mix(in srgb, var(--rail-filo) 50%, var(--rail-fondo));
  --rail-traccia: color-mix(in srgb, var(--rail-testo) 30%, var(--rail-fondo));
  --rail-segno: color-mix(in srgb, var(--rail-testo) 40%, var(--rail-fondo));
  --rail-testo-tenue: color-mix(in srgb, var(--rail-testo) 55%, var(--rail-fondo));
  --rail-accento: #ff7417;
  --rail-attenzione: #f5c518;

  /* Etichette di dominio (solo dentro le anteprime dell'interfaccia) */
  --et-indaco: #8b90ff;
  --et-grigio: #9a9da2;

  --font-titolo: "Antonio", "Arial Narrow", sans-serif;
  --font-testo: "Figtree", system-ui, -apple-system, sans-serif;

  --t-micro: 11px;
  --t-minimo: 12px;
  --t-piccolo: 13px;
  --t-corpo: 14px;
  --t-medio: 16px;
  --t-titoletto: 18px;
  --t-sezione: 24px;
  --t-titolo: 32px;
  --t-cifra: 40px;
  --t-enorme: 56px;

  --p-normale: 400;
  --p-medio: 500;
  --p-forte: 600;
  --p-titolo: 700;

  --i-enorme: 0.95;
  --i-piena: 1;
  --i-stretta: 1.05;
  --i-media: 1.3;
  --i-corpo: 1.45;
  --spaziatura-maiuscolo: 0.04em;
  --spaziatura-titolo: 0.01em;
  --spaziatura-marchio: 0.02em;

  --sp-mezzo: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r: 3px;
  --r-piccolo: 2px;
  --r-tondo: 50%;
  --bordo: 1px solid var(--filo);
  --bordo-forte: 1px solid var(--filo-forte);
  --bordo-tratteggio: 1px dashed var(--filo-forte);
  --ombra-sopra: 0 10px 30px rgb(0 0 0 / 0.5);
  --lato-tocco: 44px;

  --m-breve: 120ms;
  --m-medio: 200ms;
  --m-ingresso: 600ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --passo-ingresso: 40ms;
  --sfocatura-ingresso: 8px;

  /* ── Misure del sito (il prodotto non ha pagine di racconto) ── */
  /* Il sito si allarga con lo schermo: la colonna arriva a 1920px, i margini crescono
     con la finestra e i titoli con lei (su un 1920 il contenuto è largo circa 1730px) */
  --contenitore: 1920px;
  --scena: 2048px;
  --margine: clamp(32px, 5vw, 128px);
  --stacco-sezione: clamp(88px, 10vw, 192px);
  --t-hero: clamp(42px, 5.6vw, 128px);
  --t-grande: clamp(38px, 4.8vw, 104px);
  --t-lead: clamp(17px, 1.2vw, 22px);
  /* Una misura sola per gli screenshot: le finestre della scrivania arrivano a --quadro,
     i telefoni stanno fra 220 e --telefono. Così nessuna sezione ha l'immagine più grossa delle altre */
  --quadro: 1080px;
  --telefono: 300px;
  /* I blocchi larghi (tabelle, coppie di carte, griglie) non vanno oltre --largo, al centro */
  --largo: 1440px;

  /* ── Sfondo della pagina: griglia e luci (vedi «Sfondo») ── */
  --passo-griglia: 56px;
  --sfondo-riga: color-mix(in srgb, var(--inchiostro) 5%, transparent);
  --sfondo-riga-accesa: color-mix(in srgb, var(--inchiostro) 10%, transparent);
  --sfondo-luce: color-mix(in srgb, var(--accento) 9%, transparent);
  --sfondo-luce-fredda: color-mix(in srgb, var(--inchiostro) 4%, transparent);
}
@media (max-width: 1100px) { :root { --margine: 24px; } }
@media (max-width: 700px) { :root { --margine: 16px; } }

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: var(--t-medio);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accento-tenue); color: var(--inchiostro); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
/* Le file che scorrono vanno da bordo a bordo dello schermo: il contorno sta dentro, o non si vede */
[data-scorre]:focus-visible { outline-offset: -2px; }
html { scrollbar-color: var(--filo-forte) transparent; }
[hidden] { display: none !important; }
:target { scroll-margin-top: 24px; }

.solo-lettori {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: 60;
  padding: var(--sp-2) var(--sp-4);
  background: var(--inchiostro); color: var(--fondo);
  font-weight: var(--p-forte); text-decoration: none; border-radius: var(--r);
  translate: 0 -200%;
}
.salta:focus-visible { translate: 0; }

/* Un contesto scuro dentro la pagina (testata, bande): i token si
   risolvono al buio, come la colonna del prodotto. */
.scuro { color-scheme: dark; color: var(--inchiostro); }

/* ── Tipografia ──────────────────────────────────────────────────────────── */
.titolo, h1, h2 {
  font-family: var(--font-titolo);
  font-weight: var(--p-titolo);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-titolo);
  line-height: 1.18; /* a 1.12 l'accento di «GIÀ» toccava la riga sopra */
  text-wrap: balance;
}
.titolo-hero { font-size: var(--t-hero); line-height: 0.98; }
.titolo-grande { font-size: var(--t-grande); }
.titolo-carta { font-size: var(--t-sezione); line-height: var(--i-stretta); }
h3 { font-family: var(--font-testo); font-weight: var(--p-forte); font-size: var(--t-titoletto); line-height: var(--i-media); text-wrap: balance; }
.acc { color: var(--accento-testo); font-style: normal; }
.occhiello {
  font-size: var(--t-minimo);
  font-weight: var(--p-forte);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-maiuscolo);
  color: var(--muto);
  line-height: var(--i-media);
}
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--inchiostro-2); max-width: 46ch; text-wrap: pretty; }
.testo { color: var(--inchiostro-2); max-width: 60ch; text-wrap: pretty; }
.muto { color: var(--muto); }
.cifre { font-variant-numeric: tabular-nums; }
/* Il marchio è il lockup «Onda S» + «Rift» del PDF di costruzione: alto 1em */
.marchio { display: inline-flex; font-size: 32px; line-height: 1; color: var(--inchiostro); text-decoration: none; }
.marchio svg { height: 1em; width: auto; }

/* ── Impaginato ──────────────────────────────────────────────────────────── */
.contenitore { width: min(100% - 2 * var(--margine), var(--contenitore)); margin-inline: auto; }

/* ── Sfondo ───────────────────────────────────────────────────────────────
   Sotto tutta la pagina, fermo mentre scorri: la griglia dell'officina, che
   si vede ai lati e sfuma al centro dove si legge, e due luci che si spostano
   piano. Le bande scure e la testata la coprono. site.js aggiunge il resto
   (.sfondo): la griglia si accende dove passa il puntatore. Con «riduci
   movimento» resta ferma. */
body::before, body::after, .sfondo {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
body::before, .sfondo::before {
  background:
    linear-gradient(to right, var(--riga) 1px, transparent 1px) calc(50% + var(--passo-griglia) / 2) 0 / var(--passo-griglia) var(--passo-griglia),
    linear-gradient(to bottom, var(--riga) 1px, transparent 1px) 0 0 / var(--passo-griglia) var(--passo-griglia);
}
body::before {
  --riga: var(--sfondo-riga);
  --orlo: max(0px, calc(50% - var(--largo) / 2));
  -webkit-mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.5) calc(var(--orlo) + 24px), transparent calc(var(--orlo) + 220px), transparent calc(100% - var(--orlo) - 220px), rgb(0 0 0 / 0.5) calc(100% - var(--orlo) - 24px), #000);
  mask-image: linear-gradient(to right, #000, rgb(0 0 0 / 0.5) calc(var(--orlo) + 24px), transparent calc(var(--orlo) + 220px), transparent calc(100% - var(--orlo) - 220px), rgb(0 0 0 / 0.5) calc(100% - var(--orlo) - 24px), #000);
}
body::after {
  inset: -25%;
  background:
    radial-gradient(closest-side, var(--sfondo-luce), transparent) 12% 22% / 70vmax 70vmax no-repeat,
    radial-gradient(closest-side, var(--sfondo-luce-fredda), transparent) 88% 70% / 80vmax 80vmax no-repeat,
    radial-gradient(closest-side, var(--sfondo-luce), transparent) 80% 8% / 50vmax 50vmax no-repeat;
}
.sfondo { overflow: hidden; }
.sfondo::before {
  content: ""; position: absolute; inset: 0;
  --riga: var(--sfondo-riga-accesa);
  -webkit-mask-image: radial-gradient(circle 260px at var(--px, -600px) var(--py, -600px), #000, transparent);
  mask-image: radial-gradient(circle 260px at var(--px, -600px) var(--py, -600px), #000, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: sfondo-luci 40s var(--curva) infinite alternate; }
}
@keyframes sfondo-luci {
  50% { translate: 7% -5%; }
  100% { translate: -5% 6%; }
}

.sezione { padding-block: var(--stacco-sezione); }
.sezione + .sezione { padding-top: 0; }
.sezione-testa { display: grid; gap: var(--sp-4); margin-bottom: clamp(36px, 5vw, 64px); }
.sezione-testa .lead { margin-top: var(--sp-3); }
.banda {
  background: var(--rail-fondo);
  padding-block: var(--stacco-sezione);
  position: relative;
  overflow: clip;
}
.banda + .sezione { padding-top: var(--stacco-sezione); }

/* ── Icone ───────────────────────────────────────────────────────────────── */
.ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Tasti ───────────────────────────────────────────────────────────────── */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--filo-forte);
  border-radius: var(--r);
  background: var(--superficie);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: var(--t-corpo);
  font-weight: var(--p-forte);
  line-height: var(--i-media);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--m-breve) var(--curva), border-color var(--m-breve) var(--curva), color var(--m-breve) var(--curva), translate var(--m-breve) var(--curva);
}
@media (hover: hover) { .tasto:hover { background: var(--superficie-2); border-color: var(--inchiostro-2); } }
.tasto:active { translate: 0 1px; }
.tasto .ico { width: 16px; height: 16px; transition: translate var(--m-medio) var(--curva); }
@media (hover: hover) { .tasto:hover .ico-avanti { translate: 3px 0; } }
.tasto.pieno {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--su-accento);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-maiuscolo);
  padding-inline: 22px;
}
@media (hover: hover) { .tasto.pieno:hover { background: color-mix(in srgb, var(--accento) 88%, var(--inchiostro)); border-color: color-mix(in srgb, var(--accento) 88%, var(--inchiostro)); } }
.tasto.muto { background: transparent; border-color: transparent; color: var(--inchiostro-2); }
@media (hover: hover) { .tasto.muto:hover { background: var(--superficie-2); color: var(--inchiostro); } }
.tasto.grande { min-height: 52px; padding-inline: 24px; font-size: var(--t-medio); }
.tasto.pieno.grande { padding-inline: 28px; font-size: var(--t-corpo); }
.tasto.quadrato { width: 44px; padding: 0; }
/* Spento: opacità a metà e nessuna reazione; il pieno spento torna un contorno (regola del prodotto).
   Una CTA senza href è spenta anche se site.js non arriva. */
.tasto[aria-disabled="true"], .tasto[data-cta]:not([href]), .tasto:disabled { opacity: 0.5; cursor: not-allowed; translate: none; }
.tasto.pieno[aria-disabled="true"], .tasto.pieno[data-cta]:not([href]), .tasto.pieno:disabled { background: var(--superficie); border-color: var(--filo-forte); color: var(--inchiostro); }
@media (hover: hover) { .tasto:is([aria-disabled="true"], [data-cta]:not([href]), :disabled):not(.muto):hover { background: var(--superficie); border-color: var(--filo-forte); } }
@media (hover: hover) { .tasto.muto:is([aria-disabled="true"], [data-cta]:not([href])):hover { background: transparent; color: var(--inchiostro-2); } }
.tasto:is([aria-disabled="true"], [data-cta]:not([href]), :disabled) .ico-avanti { translate: none; }
.tasti { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* ── Risposta al tocco ──────────────────────────────────────────────────────
   Il riquadro grigio che il telefono mette su ogni cosa toccata è spento: ogni elemento
   risponde da sé. Dove non c'è il mouse lo stato premuto prende l'aspetto del passaggio
   del mouse, più il pixel verso il basso dei tasti. Se si aggiunge qualcosa di toccabile
   va aggiunto qui. Per l'iPhone serve anche il touchstart in cima a site.js. */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  :is(.filtro, .voce-coda button, .domanda summary, .nav-principale a, .menu-pannello nav > a, .piede ul a, .marchio, .collegamento, .indice a, .modo-tasto, .cadenza label, .scelte-voci .scelta, .giorno, .piano-annuale):active { translate: 0 1px; }
  .tasto:not(.pieno, .muto, [aria-disabled="true"], [data-cta]:not([href]), :disabled):active { background: var(--superficie-2); border-color: var(--inchiostro-2); }
  .tasto.pieno:not([aria-disabled="true"], [data-cta]:not([href]), :disabled):active { background: color-mix(in srgb, var(--accento) 88%, var(--inchiostro)); border-color: color-mix(in srgb, var(--accento) 88%, var(--inchiostro)); }
  .tasto.muto:not([aria-disabled="true"], [data-cta]:not([href]), :disabled):active { background: var(--superficie-2); color: var(--inchiostro); }
  .filtro:not([aria-pressed="true"]):active { background: var(--superficie-2); }
  .voce-coda button:active { background: var(--superficie-scelta); }
  .nav-principale a:active { color: var(--rail-testo-forte); background: var(--rail-passaggio); }
  :is(.domanda summary, .piede ul a, .collegamento):active { color: var(--inchiostro); }
  .indice a:active { border-color: var(--inchiostro); color: var(--inchiostro); }
  :is(.modi-scelta .modo, .scelte-voci .scelta, .giorno):active { border-color: var(--filo-forte); }
  .cadenza label:not(:has(:checked)):active { color: var(--inchiostro); }
  .piano-annuale:active { border-color: var(--accento); background: color-mix(in srgb, var(--accento) 20%, transparent); }
}

/* ── Pastiglie e segni (lo stato si dice anche con la parola) ─────────────── */
.pastiglia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--r);
  color: var(--nota);
  font-size: var(--t-minimo);
  font-weight: var(--p-forte);
  line-height: 1.45;
  white-space: nowrap;
  justify-self: start;
  align-self: start;
}
.pastiglia[data-tono="allarme"] { color: var(--allarme); }
.pastiglia[data-tono="attenzione"] { color: var(--attenzione); }
.pastiglia[data-tono="ok"] { color: var(--ok); }
.pastiglia[data-tono="accento"] { color: var(--accento-testo); }
.pastiglia[data-tono="inchiostro"] { color: var(--inchiostro-2); }
.segno { width: 8px; height: 8px; border-radius: var(--r-piccolo); flex: none; }
[data-tono="allarme"] > .segno { background: currentColor; }
[data-tono="attenzione"] > .segno { border: 2px solid currentColor; }
.puntino { width: 8px; height: 8px; border-radius: var(--r-tondo); background: var(--accento); flex: none; }

/* ── Carta, volti ────────────────────────────────────────────────────────── */
.carta { background: var(--superficie); border: var(--bordo); border-radius: var(--r); padding: var(--sp-4); }
.faccia {
  display: inline-block;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-tondo);
  background: var(--superficie-2);
  border: var(--bordo);
}
.faccia.grande { width: 48px; height: 48px; }
.faccia, .app-faccia, .app-chi i:has(img) { overflow: hidden; }
.faccia img, .app-faccia img, .app-chi i img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Cornici dei dispositivi (unica eccezione agli angoli vivi) ──────────── */
.browser {
  background: var(--rail-fondo);
  border: 1px solid color-mix(in srgb, var(--filo-forte) 70%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.browser-barra {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  height: 38px; padding-inline: 14px;
  background: var(--rail-fondo);
  border-bottom: 1px solid var(--rail-filo);
}
.browser-luci { display: flex; gap: 7px; }
.browser-luci i { width: 10px; height: 10px; border-radius: var(--r-tondo); background: var(--rail-filo); }
.browser-indirizzo {
  justify-self: center;
  min-width: min(320px, 60%);
  padding: 3px 12px;
  border-radius: 6px;
  background: var(--rail-passaggio);
  color: var(--rail-testo);
  font-size: var(--t-micro);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-schermo { position: relative; background: var(--fondo); }
.browser-schermo img { width: 100%; }

.telefono {
  --lato: 300px;
  position: relative;
  width: var(--lato);
  padding: calc(var(--lato) * 0.03);
  border-radius: calc(var(--lato) * 0.16);
  background: #0b0b0c;
  box-shadow: inset 0 0 0 1px #3a3a3d, inset 0 0 0 3px #161618;
  flex: none;
}
.telefono::before { /* l'isola in cima */
  content: "";
  position: absolute; z-index: 3;
  top: calc(var(--lato) * 0.058);
  left: 50%; translate: -50% 0;
  width: calc(var(--lato) * 0.29);
  height: calc(var(--lato) * 0.085);
  border-radius: 999px;
  background: #0b0b0c;
}
.telefono-schermo {
  position: relative;
  aspect-ratio: 402 / 874;
  border-radius: calc(var(--lato) * 0.13);
  overflow: hidden;
  background: var(--fondo);
  container-type: inline-size;
}
.telefono-schermo > img { width: 100%; height: 100%; object-fit: cover; }
/* Le catture della scrivania dal telefono non hanno la barra di stato: gliela si lascia libera */
.telefono-schermo.web { padding-top: calc(var(--lato) * 0.135); background: var(--fondo); }
.telefono-schermo.web::before { content: "9:41"; position: absolute; top: calc(var(--lato) * 0.052); left: calc(var(--lato) * 0.12); font-size: calc(var(--lato) * 0.045); font-weight: var(--p-forte); color: var(--inchiostro); }
.telefono-schermo.web > img { height: auto; object-fit: initial; }

/* La parte bassa delle schermate sfuma nel fondo: è una maschera, non un alone */
.sfuma { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); }
.nota-anteprima { font-size: var(--t-minimo); color: var(--muto); }

/* ==========================================================================
   Testata (non appiccicata, come in Fey; scura come la colonna di Rift)
   ========================================================================== */
.testata { background: var(--rail-fondo); position: relative; z-index: 20; }
.testata-riga {
  display: flex; align-items: center; gap: var(--sp-5);
  height: 76px;
}
.testata .marchio { font-size: 32px; color: var(--rail-testo-forte); }
/* Col dito il logo risponde su tutta l'altezza di un tocco; il margine negativo lo lascia dov'è */
@media (pointer: coarse) { .testata .marchio { padding-block: 8px; margin-block: -8px; } }
.nav-principale { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-3); }
.nav-principale a {
  position: relative;
  padding: 10px 12px;
  color: var(--rail-testo);
  font-size: var(--t-corpo); font-weight: var(--p-medio);
  text-decoration: none;
  border-radius: var(--r);
  transition: color var(--m-breve) var(--curva), background-color var(--m-breve) var(--curva);
}
@media (hover: hover) { .nav-principale a:hover { color: var(--rail-testo-forte); background: var(--rail-passaggio); } }
.nav-principale a[aria-current="page"] { color: var(--rail-testo-forte); }
.nav-principale a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; background: var(--rail-testo-forte);
}
.testata-azioni { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.testata .tasto { min-height: 40px; }
.testata .tasto.quadrato { width: 40px; }
@media (pointer: coarse) {
  .testata .tasto { min-height: var(--lato-tocco); }
  .testata .tasto.quadrato { width: var(--lato-tocco); }
  .nav-principale a { padding-block: 11px; }
}
.menu-apri { display: none; }
.menu-pannello {
  inset: 76px 0 auto 0;
  width: 100%; max-width: none; max-height: calc(100dvh - 76px);
  margin: 0; padding: var(--sp-3) var(--margine) var(--sp-6);
  border: 0; border-top: 1px solid var(--rail-filo);
  background: var(--rail-fondo);
  overflow: auto;
}
.menu-pannello::backdrop { background: color-mix(in srgb, #000 55%, transparent); }
.menu-pannello nav > a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--rail-filo);
  color: var(--rail-testo-forte);
  font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: 28px;
  text-transform: uppercase; letter-spacing: var(--spaziatura-titolo);
  text-decoration: none;
}
.menu-pannello nav > a[aria-current="page"] { color: var(--rail-accento); }
.menu-pannello .tasti { margin-top: var(--sp-5); }
@media (prefers-reduced-motion: no-preference) {
  .menu-pannello:popover-open { animation: menu-apre var(--m-medio) var(--curva); }
}
@keyframes menu-apre { from { opacity: 0; translate: 0 -8px; } }

@media (max-width: 1000px) {
  .nav-principale, .testata-azioni .solo-largo { display: none; }
  .menu-apri { display: inline-flex; }
}
@media (max-width: 700px) {
  .testata-riga { height: 64px; gap: var(--sp-3); }
  .testata .marchio { font-size: 28px; }
  .menu-pannello { inset-block-start: 64px; max-height: calc(100dvh - 64px); }
  .testata .tasto { min-height: 44px; height: 44px; }
  .testata .tasto.quadrato { width: 44px; }
}

/* ==========================================================================
   Hero — la scena prima, il titolo sotto (come Fey); pezzi di Rift
   ========================================================================== */
.hero { position: relative; padding-top: clamp(24px, 2.6vw, 40px); overflow: clip; }
.hero-scena {
  /* Alta quanto basta perché i tasti sotto il titolo entrino nel primo schermo: 287px e 13,3vw
     sono testata, titolo, frase e tasti, misurati. Sugli schermi più bassi si ferma ai 280px */
  --alto: clamp(280px, min(max(38vw, 420px), calc(100vh - 287px - 13.3vw)), 660px);
  position: relative;
  width: min(100% - 2 * var(--margine), var(--scena));
  margin-inline: auto;
  height: var(--alto);
}
.hero-anelli {
  position: absolute; z-index: 0;
  top: 0; right: 0;
  width: clamp(360px, 36vw, 640px);
  pointer-events: none;
}
.hero-browser {
  position: absolute; z-index: 1;
  left: 0; right: 0; margin-inline: auto;
  top: 0;
  width: min(100% - 2 * clamp(0px, 6vw, 160px), 1280px);
}
.hero-browser .browser-schermo { aspect-ratio: 1440 / 900; overflow: hidden; }
/* Il telefono è intero e pieno, sopra la schermata e davanti agli anelli: è alto
   quanto la scena meno 110px, così finisce prima del titolo (2,06 = altezza / lato).
   Se la scena è bassa non si rimpicciolisce oltre: scende accanto al titolo, nella
   fascia libera a destra, che è larga 9,5vw */
.hero-telefono {
  position: absolute; z-index: 3;
  right: clamp(0px, 2vw, 40px);
  top: 24px;
  --lato: max(calc((var(--alto) - 110px) / 2.06), min(9.5vw, calc((var(--alto) - 30px) / 2.06)));
}
.hero-carta {
  position: absolute; z-index: 2;
  left: clamp(-8px, 0.5vw, 16px);
  top: min(clamp(130px, 11.5vw, 190px), calc(var(--alto) - 160px - 5vw)); /* sale con la scena, per non finire sul titolo */
  width: clamp(280px, 30vw, 380px);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: none;
}
.hero-carta .occhiello { margin-bottom: var(--sp-2); }
.riga-coda {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-3);
}
.riga-coda strong { display: block; font-size: var(--t-corpo); font-weight: var(--p-forte); }
.riga-coda span { display: block; font-size: var(--t-piccolo); color: var(--muto); }
.hero-carta .riga-coda + .riga-coda { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--bordo); }
/* Solo la schermata sfuma verso il titolo (dal 44% all'86% della scena, contato
   dalla sua cima, --su); la carta «Adesso» e il telefono restano pieni */
.hero-sfuma > .hero-browser {
  --sfuma: linear-gradient(to bottom, #000 calc(var(--alto) * 0.44 - var(--su, 0px)), transparent calc(var(--alto) * 0.86 - var(--su, 0px)));
  -webkit-mask-image: var(--sfuma); mask-image: var(--sfuma);
}

.hero-testo { position: relative; z-index: 4; margin-top: clamp(-76px, -4.6vw, -24px); padding-bottom: 0; }
.hero-testo h1 > span { display: block; }
.hero-sotto {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-5) var(--sp-7);
  margin-top: clamp(20px, 2.4vw, 32px);
}
.hero-sotto .tasti { justify-content: flex-end; }
.stato { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); color: var(--muto); font-size: var(--t-piccolo); }

/* L'accesso anticipato, subito sotto il titolo di home, Atleti, Funzioni, Piani e
   Domande (dal 2026-11-03): la prima frase che si legge. Solo pezzi del sito: la
   pastiglia e il fondo col filo d'accento della colonna di Rift nel confronto.
   Le date sono scritte a mano: vedi «Accesso anticipato» nel README. */
/* L'accesso anticipato, sotto il titolo di ogni pagina: la pastiglia e la
   riga forte sulla stessa riga, la nota piccola sotto. Niente riquadro. */
.accesso-anticipato {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: var(--sp-4); row-gap: var(--sp-2);
  max-width: min(100%, 64ch);
  margin: var(--sp-5) auto 0;
  color: var(--muto);
  font-size: var(--t-piccolo);
  line-height: var(--i-media);
  text-align: center;
}
.accesso-anticipato .pastiglia { align-self: center; }
.accesso-anticipato b { color: var(--inchiostro); font-weight: var(--p-forte); font-size: var(--t-lead); }
.accesso-anticipato small { flex-basis: 100%; font-size: var(--t-corpo); text-wrap: balance; }

@media (max-width: 480px) {
  .hero .tasti .tasto, .chiusura .tasti .tasto { flex: 1 1 100%; }
}
@media (max-width: 360px) {
  .tasto.grande { white-space: normal; text-align: center; padding-inline: 16px; }
}
@media (max-width: 1000px) {
  .hero-sotto { grid-template-columns: 1fr; }
  .hero-sotto .tasti { justify-content: flex-start; }
}
/* Telefono: la scena si ricompone, non si rimpicciolisce */
@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; padding-top: var(--sp-6); }
  .hero-testo { order: -1; margin-top: 0; padding-bottom: var(--sp-6); }
  .hero-scena { --alto: 560px; width: 100%; }
  .hero-browser { --su: 40px; left: var(--margine); right: auto; margin: 0; width: 720px; top: 40px; }
  .hero-browser .browser-schermo { aspect-ratio: 1440 / 900; }
  .hero-telefono { --lato: min(64vw, 270px); right: auto; left: calc(50% - var(--lato) * 0.42); top: 0; }
  /* Piena, la carta sta davanti al telefono (come sul computer sta davanti alla schermata) */
  .hero-carta { z-index: 4; left: var(--margine); right: var(--margine); width: auto; top: 330px; max-width: 360px; }
  .hero-anelli { width: 340px; top: auto; bottom: 260px; }
}

/* ==========================================================================
   Tre pagine, una sotto l'altra: lo screenshot grande, il testo accanto,
   a lati alterni. Affiancate erano troppo piccole per leggerle.
   ========================================================================== */
.pista {
  width: min(100% - 2 * var(--margine), var(--contenitore)); margin-inline: auto;
  display: grid; row-gap: clamp(56px, 8vw, 120px);
}
.pista .vetrina { display: grid; grid-template-columns: minmax(0, min(var(--quadro), 68%)) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 80px); }
.pista .vetrina:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--quadro), 68%)); }
.pista .vetrina:nth-child(even) .vetrina-quadro { order: 2; }
/* Ogni screenshot tiene il suo formato: la cornice si adatta, non si taglia niente */
.pista .vetrina-quadro { aspect-ratio: auto; }
.pista .vetrina-quadro img { height: auto; }
.pista .vetrina figcaption { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: 0; }
.pista .vetrina figcaption .num { grid-row: auto; font-size: var(--t-enorme); line-height: var(--i-enorme); }
.pista .vetrina figcaption h3 { font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: clamp(26px, 2.3vw, 34px); line-height: var(--i-stretta); letter-spacing: var(--spaziatura-titolo); text-wrap: balance; }
.pista .vetrina figcaption p { font-size: var(--t-medio); line-height: var(--i-corpo); color: var(--inchiostro-2); max-width: 40ch; }
@media (max-width: 900px) {
  .pista .vetrina, .pista .vetrina:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .pista .vetrina:nth-child(even) .vetrina-quadro { order: 0; }
  .pista .vetrina figcaption .num { font-size: var(--t-cifra); }
}

/* ==========================================================================
   Confronto con le altre app: solo le differenze, la colonna di Rift accesa.
   Le fonti stanno in un pannello che si apre a richiesta (popover).
   ========================================================================== */
.confronto { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.confronto th, .confronto td { padding: 18px var(--sp-3); border-bottom: var(--bordo); text-align: center; vertical-align: middle; }
.confronto thead th { padding-block: var(--sp-4); border-bottom-color: var(--filo-forte); font-size: var(--t-piccolo); font-weight: var(--p-medio); color: var(--muto); }
.confronto thead th:first-child { width: 30%; }
.confronto tbody th { text-align: left; font-size: var(--t-medio); font-weight: var(--p-medio); line-height: var(--i-media); color: var(--inchiostro); text-wrap: balance; }
.confronto tbody tr:last-child > * { border-bottom: 0; }
@media (hover: hover) { .confronto tbody tr:hover > :not(.c-rift) { background: var(--superficie); } }
/* La colonna di Rift: una striscia accesa dall'intestazione all'ultima riga */
.confronto .c-rift { background: var(--accento-tenue); border-inline: 1px solid var(--accento-aperto); }
.confronto thead .c-rift { border-top: 2px solid var(--accento); border-radius: var(--r) var(--r) 0 0; color: var(--accento-testo); }
.confronto thead .c-rift svg { display: block; height: 26px; width: auto; margin-inline: auto; }
.confronto tbody tr:last-child .c-rift { border-bottom: 1px solid var(--accento-aperto); border-radius: 0 0 var(--r) var(--r); }
/* Le caselle dicono solo sì, in parte o no; il perché di «in parte» sta nel pannello */
.voto { display: inline-flex; vertical-align: middle; flex-direction: column; align-items: center; gap: 4px; font-size: var(--t-piccolo); line-height: var(--i-media); color: var(--muto); }
.voto small { font-size: var(--t-minimo); color: var(--muto); text-wrap: balance; }
.voto .ico { width: 20px; height: 20px; stroke-width: 2; color: var(--inchiostro-2); }
.voto[data-v="parziale"]::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--muto); border-radius: 50%; background: linear-gradient(90deg, var(--muto) 50%, transparent 50%); }
.voto[data-v="no"]::before { content: ""; width: 14px; height: 2px; margin-block: 7.5px; background: var(--filo-forte); }
.voto[title] { cursor: help; }
/* Rift: la spunta dentro un anello, più grande delle altre */
.c-rift .voto .ico { box-sizing: content-box; width: 20px; height: 20px; padding: 7px; border: 1px solid var(--accento-aperto); border-radius: 50%; background: color-mix(in srgb, var(--accento) 16%, transparent); color: var(--accento-testo); stroke-width: 2.4; }
.confronto thead .c-rift small { display: block; margin-top: 6px; font-size: var(--t-micro); font-weight: var(--p-forte); letter-spacing: var(--spaziatura-maiuscolo); text-transform: uppercase; color: var(--accento-testo); }
/* Le altre app: la loro icona dell'App Store sopra il nome, con la sua forma (non è roba nostra) */
.app-altra { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--inchiostro-2); }
.app-altra img, .fonti-app img { border: var(--bordo); border-radius: 22.5%; background: var(--superficie); }
.app-altra img { width: 40px; height: 40px; }
.fonti-app { display: flex; align-items: center; gap: var(--sp-2); }
.fonti-app img { width: 20px; height: 20px; }

/* La legenda sta a metà altezza della nota, anche quando la nota va su due righe
   (sulla linea di base le icone, che non hanno testo, la alzavano) */
.confronto-piede { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-5); }
.legenda { display: flex; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--t-minimo); color: var(--inchiostro-2); }
.legenda li { display: inline-flex; align-items: center; gap: 6px; min-height: 1lh; }
.legenda .voto .ico { width: 16px; height: 16px; }
.legenda .voto[data-v="parziale"]::before { width: 11px; height: 11px; }
.legenda .voto[data-v="no"]::before { width: 11px; margin-block: 0; }
.confronto-nota { flex: 1 1 40ch; margin: 0; font-size: var(--t-minimo); color: var(--muto); max-width: 100ch; text-wrap: pretty; }
.confronto-nota a, .collegamento { color: var(--inchiostro-2); }
.collegamento { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (pointer: coarse) { .collegamento { display: inline-block; padding-block: 13px; margin-block: -13px; } }
@media (hover: hover) { .collegamento:hover, .confronto-nota a:hover { color: var(--inchiostro); } }

.fonti { width: min(720px, 100% - 2 * var(--margine)); max-height: min(80vh, 720px); margin: auto; padding: 0; border: var(--bordo); border-radius: var(--r); background: var(--superficie); color: var(--inchiostro); overflow: hidden; }
.fonti:popover-open { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.fonti::backdrop { background: color-mix(in srgb, #000 60%, transparent); }
.fonti-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5); border-bottom: var(--bordo); }
.fonti-testa h3 { font-size: var(--t-medio); }
.fonti-corpo { overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-5); overscroll-behavior: contain; }
.fonti-corpo h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--t-corpo); font-weight: var(--p-forte); }
.fonti-corpo h4:first-child { margin-top: 0; }
.fonti-corpo ul { display: grid; gap: 4px; padding: 0; list-style: none; font-size: var(--t-piccolo); }
.fonti-corpo a { color: var(--muto); overflow-wrap: anywhere; }
@media (hover: hover) { .fonti-corpo a:hover { color: var(--inchiostro); } }
.fonti-corpo .fonti-dettagli { gap: var(--sp-2); font-size: var(--t-corpo); color: var(--inchiostro-2); line-height: var(--i-corpo); }
.fonti-dettagli b { font-weight: var(--p-forte); color: var(--inchiostro); }
.fonti-corpo .fonti-dettagli + ul { margin-top: var(--sp-3); }
.fonti-data { margin-top: var(--sp-3); font-size: var(--t-piccolo); color: var(--muto); }

/* ==========================================================================
   La settimana con e senza Rift: due carte affiancate, «Rincorri» e «Alleni».
   È una tabella (ogni riga è una coppia): lo spazio fra le colonne le stacca.
   ========================================================================== */
.due-lati-cornice {
  --tra: clamp(12px, 2vw, 24px);
  --dentro: clamp(20px, 2.8vw, 40px);
  --segno-si: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --segno-no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9'/%3E%3C/svg%3E");
}
.due-lati { width: calc(100% + 2 * var(--tra)); margin-inline: calc(-1 * var(--tra)); border-collapse: separate; border-spacing: var(--tra) 0; table-layout: fixed; }
.due-lati th, .due-lati td { padding: 0 var(--dentro); text-align: left; vertical-align: top; }
.due-lati .dl-senza { border-inline: var(--bordo); color: var(--muto); }
.due-lati .dl-con { border-inline: 1px solid var(--accento-aperto); background: color-mix(in srgb, var(--accento) 8%, var(--superficie)); color: var(--inchiostro); }

.due-lati thead th { padding-top: var(--dentro); padding-bottom: var(--sp-3); font-weight: var(--p-normale); }
.due-lati thead .dl-senza { border-top: var(--bordo); border-radius: var(--r) var(--r) 0 0; }
.due-lati thead .dl-con { border-top: 2px solid var(--accento); border-radius: var(--r) var(--r) 0 0; }
.dl-chi { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-corpo); font-weight: var(--p-medio); }
.dl-con .dl-chi { color: var(--accento-testo); }
.dl-chi svg { height: 17px; width: auto; }
.dl-verbo {
  display: block; margin-top: var(--sp-2);
  font-family: var(--font-titolo); font-weight: var(--p-titolo);
  font-size: clamp(48px, 6vw, 88px); line-height: var(--i-enorme);
  letter-spacing: var(--spaziatura-titolo); text-transform: uppercase;
}
.dl-senza .dl-verbo { color: var(--filo-comando); }
.dl-con .dl-verbo { color: var(--inchiostro); }

.dl-gruppo td { padding-top: var(--sp-6); padding-bottom: var(--sp-2); font-size: var(--t-micro); font-weight: var(--p-forte); letter-spacing: var(--spaziatura-maiuscolo); text-transform: uppercase; }
.dl-gruppo .dl-con { color: var(--accento-testo); }

.dl-voce { display: flex; gap: var(--sp-3); padding-block: 14px; border-top: var(--bordo); font-size: var(--t-titoletto); line-height: var(--i-media); text-wrap: pretty; }
.dl-con .dl-voce { border-top-color: var(--accento-aperto); }
.dl-voce::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; mask: var(--segno-no) center / contain no-repeat; background: var(--filo-comando); }
.dl-con .dl-voce::before { mask-image: var(--segno-si); background: var(--accento-testo); }

.due-lati tbody:last-child tr:last-child td { padding-bottom: calc(var(--dentro) - 14px); }
.due-lati tbody:last-child tr:last-child .dl-senza { border-bottom: var(--bordo); border-radius: 0 0 var(--r) var(--r); }
.due-lati tbody:last-child tr:last-child .dl-con { border-bottom: 1px solid var(--accento-aperto); border-radius: 0 0 var(--r) var(--r); }

/* Sul telefono: le due testate affiancate, poi ogni coppia in una scheda */
@media (max-width: 760px) {
  .due-lati, .due-lati thead, .due-lati tbody, .due-lati tr, .due-lati th, .due-lati td { display: block; }
  .due-lati { width: 100%; margin-inline: 0; }
  .due-lati thead tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .due-lati thead th { padding: var(--sp-4); border: var(--bordo); border-radius: var(--r); }
  .due-lati thead .dl-con { border: 1px solid var(--accento-aperto); border-top: 2px solid var(--accento); }
  .dl-verbo { font-size: clamp(36px, 11vw, 48px); }
  .dl-gruppo .dl-senza { display: none; }
  .due-lati .dl-gruppo td { padding: var(--sp-5) 0 var(--sp-2); border: 0; background: none; }
  .due-lati tbody tr:not(.dl-gruppo) { margin-top: var(--sp-2); border: var(--bordo); border-radius: var(--r); overflow: hidden; }
  .due-lati tbody tr:not(.dl-gruppo) td, .due-lati tbody:last-child tr:last-child td { padding: 0 var(--sp-4); border: 0; border-radius: 0; }
  .due-lati tbody .dl-senza .dl-voce { padding-block: var(--sp-3) var(--sp-2); border: 0; font-size: var(--t-corpo); }
  .due-lati tbody .dl-con .dl-voce { padding-block: var(--sp-3); border-top: 0; font-size: var(--t-medio); }
}

/* Sul telefono resta una tabella vera: la colonna di Rift accesa dall'alto in fondo */
/* Sul telefono, con cinque app, ogni riga mette il nome della cosa sopra e le cinque
   caselle sotto, ognuna larga un quinto: le intestazioni (icona e nome) ci stanno */
@media (max-width: 760px) {
  .confronto, .confronto thead, .confronto tbody { display: block; }
  .confronto tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .confronto thead th:first-child { display: none; }
  .confronto tbody th { grid-column: 1 / -1; padding: var(--sp-4) 0 var(--sp-1) !important; border-bottom: 0; font-size: var(--t-corpo) !important; text-wrap: pretty; }
  .confronto tbody td { padding: var(--sp-2) 2px var(--sp-3); }
  .confronto tbody tr:last-child .c-rift { border-radius: 0 0 var(--r) var(--r); }
  /* I loghi restano in cima mentre scorrono le righe, così si sa sempre di chi è ogni colonna */
  .confronto thead { position: sticky; top: 0; z-index: 1; background: var(--fondo); }
  .app-altra { font-size: 12px; }
}
@media (max-width: 760px) {
  .confronto th, .confronto td { padding: var(--sp-3) 2px; }
  .confronto thead th { padding-block: var(--sp-3); font-size: 11px; }
  .confronto thead th:first-child { width: 33%; }
  .confronto thead .c-rift svg { height: 18px; }
  .confronto thead .c-rift small { display: none; }
  .app-altra { gap: 6px; }
  .app-altra img { width: 28px; height: 28px; }
  .confronto tbody th { padding-inline: 0 var(--sp-2); font-size: var(--t-piccolo); line-height: var(--i-media); }
  .c-rift .voto .ico { width: 14px; height: 14px; padding: 5px; }
  .voto .ico { width: 16px; height: 16px; }
  .voto small { font-size: 12px; }
}
.vetrina-quadro {
  position: relative;
  aspect-ratio: 241 / 150;
  border: var(--bordo);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--superficie);
}
.vetrina-quadro { transition: scale var(--m-medio) var(--curva), border-color var(--m-medio) var(--curva); }
.vetrina-quadro img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Al passaggio cresce la cornice intera, bordo compreso: l'immagine resta tutta visibile */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vetrina:hover .vetrina-quadro, .coppia figure:hover .vetrina-quadro { scale: 1.035; z-index: 2; border-color: var(--filo-forte); }
}
.vetrina figcaption { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-3); margin-top: var(--sp-4); }
.vetrina figcaption .num { grid-row: span 2; font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: var(--t-sezione); line-height: 1; color: var(--accento-testo); font-variant-numeric: tabular-nums; }
.vetrina figcaption h3 { font-size: var(--t-titoletto); }
.vetrina figcaption p { color: var(--muto); font-size: var(--t-corpo); max-width: 52ch; }

/* ==========================================================================
   Banda scura: il «dock» della scrivania con le note, sopra il disegno
   ========================================================================== */
.banda .sezione-testa { max-width: 640px; }
.disegno-anelli { position: absolute; top: -40px; right: -60px; width: clamp(360px, 42vw, 620px); pointer-events: none; }
.banda:has(.disegno-settimana) { padding-bottom: 0; }
/* Il disegno è largo 1200 × 180: fino a 2800px di schermo l'altezza (15vw) tiene intere tutte le righe */
.disegno-settimana { position: relative; height: clamp(180px, 15vw, 420px); margin-top: clamp(24px, 4vw, 56px); pointer-events: none; }
.disegno-settimana svg { width: 100%; height: 100%; }
.banda .contenitore { position: relative; z-index: 1; }

.dock-scena { padding-block: 132px 140px; display: grid; justify-items: center; }
.dock {
  display: flex; align-items: stretch; gap: 2px;
  padding: 6px;
  background: var(--rail-fondo);
  border: 1px solid var(--rail-filo);
  border-radius: var(--r);
}
.dock-voce {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 6px;
  min-width: 92px;
  padding: 12px 10px 10px;
  border-radius: var(--r);
  color: var(--rail-testo);
  font-size: var(--t-piccolo); font-weight: var(--p-medio);
  transition: background-color var(--m-medio) var(--curva), color var(--m-medio) var(--curva);
}
.dock-voce .ico { width: 20px; height: 20px; }
.dock-voce.attiva { background: var(--rail-filo); color: var(--rail-testo-forte); font-weight: var(--p-forte); }
.dock-voce.attiva .ico { color: var(--rail-accento); }
.dock-sep { width: 1px; margin: 8px 4px; background: var(--rail-filo); }
.dock-cerca { display: grid; place-items: center; width: 52px; color: var(--rail-testo); }
.dock-nota {
  position: absolute; left: 50%; translate: -50% 0;
  width: 210px;
  text-align: center;
  font-size: var(--t-piccolo); font-weight: var(--p-normale); line-height: 1.4;
  color: var(--inchiostro-2);
}
.dock-nota b { display: block; color: var(--inchiostro); font-weight: var(--p-forte); margin-bottom: 2px; }
.dock-nota::after { /* la linea di richiamo tratteggiata */
  content: ""; position: absolute; left: 50%;
  width: 0; height: 52px;
  border-left: 1px dashed var(--filo-forte);
  transform-origin: top; transition: scale 700ms var(--curva) 200ms;
}
.dock-nota.su { bottom: calc(100% + 64px); }
.dock-nota.su::after { top: calc(100% + 8px); }
.dock-nota.giu { top: calc(100% + 64px); }
.dock-nota.giu::after { bottom: calc(100% + 8px); transform-origin: bottom; }
.js .dock-scena:not(.in) .dock-nota::after { scale: 1 0; }
/* Sugli schermi larghi lo schema cresce con la pagina, invece di restare un francobollo al centro */
@media (min-width: 1700px) { .dock-scena { zoom: 1.15; } }
@media (min-width: 2300px) { .dock-scena { zoom: 1.3; } }

@media (max-width: 1100px) {
  .dock-scena { padding-block: 0; justify-items: stretch; }
  .dock { flex-direction: column; gap: 0; padding: 0; background: transparent; border: 0; }
  .dock-voce {
    grid-template-columns: 28px auto 1fr; justify-items: start; align-items: center; gap: var(--sp-3);
    padding: 14px var(--sp-3);
    border-bottom: 1px solid var(--rail-filo);
    border-radius: 0;
    font-size: var(--t-medio);
  }
  .dock-voce.attiva { border-radius: var(--r); }
  .dock-sep, .dock-cerca { display: none; }
  .dock-nota { position: static; translate: none; width: auto; text-align: left; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t-piccolo); }
  .dock-nota b { display: none; }
  .dock-nota::before { content: ""; width: 24px; flex: none; border-top: 1px dashed var(--filo-forte); }
  .dock-nota::after { display: none; }
}

/* ==========================================================================
   «Chi ha bisogno di te» — anteprima del modulo di Oggi
   ========================================================================== */
.coda-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.coda-griglia .sezione-testa { position: sticky; top: 32px; margin: 0; }
.punti { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); padding: 0; list-style: none; }
.punti li { display: grid; grid-template-columns: 16px 1fr; gap: var(--sp-3); color: var(--inchiostro-2); }
.punti li::before { content: ""; width: 8px; height: 8px; margin-top: 9px; background: var(--accento); border-radius: var(--r-piccolo); }

.modulo { background: var(--superficie); border: var(--bordo); border-radius: var(--r); overflow: hidden; }
.modulo-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: var(--bordo); }
.modulo-testa h3 { font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: var(--t-sezione); line-height: 1; letter-spacing: var(--spaziatura-titolo); }
.filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--filo-forte); border-radius: var(--r);
  background: var(--superficie); color: var(--inchiostro);
  font-size: var(--t-piccolo); font-weight: var(--p-forte);
  cursor: pointer;
  transition: background-color var(--m-breve) var(--curva), color var(--m-breve) var(--curva), border-color var(--m-breve) var(--curva);
}
@media (pointer: coarse) { .filtro { min-height: var(--lato-tocco); } }
.filtro .cifre { opacity: 0.75; }
@media (hover: hover) { .filtro:hover { background: var(--superficie-2); } }
.filtro[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--fondo); }

.primo { padding: var(--sp-5); border-bottom: var(--bordo); min-height: 236px; }
.primo .occhiello { margin-bottom: var(--sp-4); }
.primo-chi { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.primo-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.primo-nome strong { font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: var(--t-titolo); line-height: 1; letter-spacing: var(--spaziatura-titolo); }
.primo-dettagli { font-size: var(--t-piccolo); color: var(--muto); margin-top: 4px; }
.primo-perche { margin-top: var(--sp-4); padding-left: var(--sp-4); border-left: 3px solid var(--filo-forte); color: var(--inchiostro-2); max-width: 54ch; }
.primo-cambia { transition: opacity var(--m-medio) var(--curva), translate var(--m-medio) var(--curva), filter var(--m-medio) var(--curva); }
.primo-cambia.esce { opacity: 0; translate: 0 6px; filter: blur(4px); }

.gruppo-coda { padding: var(--sp-3) var(--sp-5) 0; }
.gruppo-coda .occhiello { padding-block: var(--sp-2); }
.voci-coda { list-style: none; margin: 0; padding: 0; }
.voce-coda button {
  display: grid; grid-template-columns: auto minmax(8rem, 12rem) 1fr auto; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 56px;
  padding: 10px var(--sp-5);
  background: transparent; border: 0; border-top: var(--bordo);
  text-align: left; cursor: pointer;
  transition: background-color var(--m-breve) var(--curva);
}
@media (hover: hover) { .voce-coda button:hover { background: var(--superficie-scelta); } }
.voce-coda button[aria-pressed="true"] { background: var(--superficie-scelta); box-shadow: inset 2px 0 0 var(--inchiostro); }
.voce-coda .nome { font-weight: var(--p-forte); font-size: var(--t-corpo); }
.voce-coda .motivo { color: var(--inchiostro-2); font-size: var(--t-corpo); }
.voce-coda .quando { color: var(--muto); font-size: var(--t-piccolo); }
.modulo-piede { padding: var(--sp-3) var(--sp-5); border-top: var(--bordo); }
@media (max-width: 1000px) {
  .coda-griglia { grid-template-columns: minmax(0, 1fr); }
  .primo-chi { grid-template-columns: auto minmax(0, 1fr); }
  .coda-griglia .sezione-testa { position: static; }
}
@media (max-width: 600px) {
  .primo .pastiglia, .primo .pastiglia span { white-space: normal; }
  .voce-coda button { grid-template-columns: auto 1fr; padding-inline: var(--sp-4); }
  .voce-coda .motivo { grid-column: 2; }
  .voce-coda .quando { display: none; }
  .voce-coda .faccia { grid-row: span 2; }
  .primo, .gruppo-coda, .modulo-testa, .modulo-piede { padding-inline: var(--sp-4); }
  .primo-nome strong { font-size: var(--t-sezione); }
}

/* ==========================================================================
   Il collegamento: app — codice — scrivania
   ========================================================================== */
.ponte { display: grid; grid-template-columns: auto minmax(140px, 180px) minmax(0, var(--quadro)); justify-content: center; align-items: center; gap: 0; }
.ponte .telefono { --lato: clamp(220px, 20vw, var(--telefono)); }
.ponte-filo { position: relative; align-self: center; height: 1px; z-index: 2; }
.ponte-filo::before {
  content: ""; position: absolute; inset: 0;
  border-top: 1px dashed var(--accento);
  transform-origin: left; transition: scale 900ms var(--curva) 300ms;
}
.js .ponte:not(.in) .ponte-filo::before { scale: 0 1; }
.ponte-codice {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; justify-items: center; gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--fondo);
  white-space: nowrap;
}
.ponte-codice .occhiello { color: var(--accento-testo); }
.ponte-codice span:last-child { font-size: var(--t-piccolo); color: var(--muto); }
.ponte .browser { min-width: 0; }
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin-top: clamp(40px, 5vw, 64px); padding: 0; list-style: none; counter-reset: passo; }
.passi li { border-top: 1px solid var(--inchiostro); padding-top: var(--sp-4); counter-increment: passo; display: grid; gap: var(--sp-2); align-content: start; }
.passi li::before { content: counter(passo, decimal-leading-zero); font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: var(--t-titolo); line-height: 1; font-variant-numeric: tabular-nums; }
.passi p { color: var(--inchiostro-2); }
.consensi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
@media (max-width: 1000px) {
  .ponte { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .ponte-filo { width: 1px; height: 140px; }
  .ponte-filo::before { border-top: 0; border-left: 1px dashed var(--accento); transform-origin: top; }
  .js .ponte:not(.in) .ponte-filo::before { scale: 1 0; }
  .ponte .browser { width: 100%; }
  .passi { grid-template-columns: 1fr; }
}

/* ==========================================================================
   L'IA propone, decidi tu
   ========================================================================== */
.ia-scena { position: relative; max-width: calc(var(--quadro) + clamp(0px, 14vw, 200px)); margin-inline: auto; padding-right: clamp(0px, 14vw, 200px); }
.ia-scena .telefono { --lato: clamp(220px, 18vw, var(--telefono)); position: absolute; right: 0; bottom: -40px; z-index: 2; }
.ia-scena .browser-schermo { overflow: hidden; }
.ia-scena .browser-schermo img { object-fit: cover; object-position: left top; height: 100%; }
.livelli { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(72px, 9vw, 120px); border: var(--bordo); border-radius: var(--r); background: var(--superficie); }
.livello { padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.livello + .livello { border-left: var(--bordo); }
.livello p { color: var(--inchiostro-2); font-size: var(--t-corpo); }
.confini { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start; margin-top: var(--sp-5); padding: var(--sp-5); border: var(--bordo-tratteggio); border-radius: var(--r); }
.confini ul { display: grid; gap: var(--sp-2); padding: 0; list-style: none; color: var(--inchiostro-2); }
.confini li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-2); }
.confini li .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--muto); }
@media (max-width: 1000px) {
  .ia-scena { padding-right: 0; padding-bottom: 260px; }
  .ia-scena .telefono { right: auto; left: var(--sp-4); bottom: 0; --lato: 220px; }
  .livelli { grid-auto-flow: row; }
  .livello + .livello { border-left: 0; border-top: var(--bordo); }
  .confini { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Registro e andamento; dal telefono
   ========================================================================== */
.coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.coppia figure { display: grid; gap: var(--sp-4); align-content: start; }
.coppia .vetrina-quadro { aspect-ratio: 241 / 160; }
.coppia figcaption h3 { margin-bottom: var(--sp-2); }
.coppia figcaption p { color: var(--inchiostro-2); max-width: 52ch; }
.coppia .pastiglia { margin-bottom: var(--sp-3); }
@media (max-width: 800px) { .coppia { grid-template-columns: 1fr; } }

.tre-telefoni { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 3.4vw, 48px); margin-top: var(--sp-6); }
.tre-telefoni .telefono { --lato: clamp(150px, 17vw, calc(var(--telefono) - 30px)); }
.tre-telefoni .telefono:nth-child(2) { --lato: clamp(170px, 19vw, var(--telefono)); }
@media (max-width: 600px) {
  .tre-telefoni { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--margine); margin-inline: calc(-1 * var(--margine)); scrollbar-width: none; }
  .tre-telefoni .telefono, .tre-telefoni .telefono:nth-child(2) { --lato: 230px; scroll-snap-align: center; }
}

/* ==========================================================================
   Domande (riquadri che si aprono)
   ========================================================================== */
.domande { border-top: 1px solid var(--inchiostro); }
.domanda { border-bottom: var(--bordo); }
.domanda summary {
  display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: var(--sp-4);
  min-height: 64px; padding-block: var(--sp-4);
  font-size: var(--t-titoletto); font-weight: var(--p-forte); line-height: var(--i-media);
  cursor: pointer; list-style: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary .ico { width: 20px; height: 20px; transition: rotate var(--m-medio) var(--curva); color: var(--muto); }
.domanda[open] summary .ico { rotate: 45deg; color: var(--inchiostro); }
@media (hover: hover) { .domanda summary:hover { color: var(--inchiostro); } }
.domanda .risposta { padding: 0 48px var(--sp-5) 0; color: var(--inchiostro-2); max-width: 70ch; display: grid; gap: var(--sp-3); }
@supports (interpolate-size: allow-keywords) {
  .domande { interpolate-size: allow-keywords; }
  .domanda::details-content { height: 0; overflow: clip; transition: height var(--m-medio) var(--curva), content-visibility var(--m-medio) allow-discrete; }
  .domanda[open]::details-content { height: auto; }
}
.faq-griglia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-griglia .sezione-testa { margin: 0; }
@media (max-width: 900px) { .faq-griglia { grid-template-columns: 1fr; } }

/* ==========================================================================
   Chiusura e nastro della giornata
   ========================================================================== */
.chiusura { position: relative; text-align: left; }
.chiusura h2 { font-size: clamp(56px, 10vw, 152px); line-height: 0.96; }
@media (max-width: 359px) { .chiusura h2 { font-size: 52px; } }
.chiusura .tasti { margin-top: var(--sp-6); }
.chiusura .lead { margin-top: var(--sp-5); }
/* Il nastro della giornata (08–21), come in «Oggi»: sotto 620px scorre di lato */
.nastro { margin-top: clamp(56px, 8vw, 112px); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4); }
.nastro::-webkit-scrollbar { display: none; }
.nastro-scorre { min-width: 620px; padding-top: 44px; }
.nastro-pista { position: relative; height: 34px; }
.nastro-traccia { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: var(--r); background: var(--filo); overflow: hidden; }
.nastro-traccia i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accento-aperto); transition: width 1600ms var(--curva) 300ms; }
.js .nastro:not(.in) .nastro-traccia i { width: 0 !important; }
.fermata, .adesso { position: absolute; left: var(--x); top: 0; translate: -50% 0; }
.fermata { width: 14px; height: 14px; top: 10px; border-radius: var(--r-tondo); background: var(--superficie); border: 3px solid var(--inchiostro-2); box-sizing: content-box; translate: -50% 0; }
.fermata b { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; font-size: var(--t-minimo); font-weight: var(--p-medio); color: var(--muto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fermata.fatta { background: var(--inchiostro-2); }
.fermata.prossima { border-color: var(--accento); }
.adesso { width: 2px; height: 46px; top: -6px; background: var(--accento); transition: left 1600ms var(--curva) 300ms; }
.js .nastro:not(.in) .adesso { left: 0; }
.adesso b { position: absolute; bottom: calc(100% + 4px); left: 6px; font-size: var(--t-minimo); font-weight: var(--p-forte); color: var(--accento-testo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adesso.fine b { left: auto; right: 6px; }
.nastro-ore { position: relative; height: 24px; margin: 6px 0 0; padding: 0; list-style: none; }
.nastro-ore li { position: absolute; left: var(--x); translate: -50% 0; font-size: var(--t-minimo); color: var(--muto); font-variant-numeric: tabular-nums; }
.nastro-ore li:first-child { translate: 0 0; }
.nastro-ore li:last-child { translate: -100% 0; }

/* ==========================================================================
   Piede
   ========================================================================== */
.piede { border-top: var(--bordo); padding-block: var(--sp-7) var(--sp-6); font-size: var(--t-corpo); }
.piede-griglia { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.piede .marchio { font-size: 40px; }
.piede-firma { margin-top: var(--sp-3); color: var(--muto); max-width: 34ch; }
.piede h2 { font-family: var(--font-testo); font-size: var(--t-minimo); font-weight: var(--p-forte); letter-spacing: var(--spaziatura-maiuscolo); color: var(--muto); margin-bottom: var(--sp-3); line-height: var(--i-media); }
.piede ul { display: grid; gap: var(--sp-1); padding: 0; list-style: none; }
.piede ul a { display: inline-block; padding-block: 6px; text-decoration: none; color: var(--inchiostro-2); }
@media (max-width: 700px), (pointer: coarse) { .piede ul a { padding-block: 11px; min-height: var(--lato-tocco); } }
@media (hover: hover) { .piede ul a:hover { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; } }
.piede-fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: var(--bordo); color: var(--muto); font-size: var(--t-piccolo); }
.piede-fondo p { max-width: 80ch; }
@media (max-width: 800px) {
  .piede-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede-griglia > :first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   Anteprime dell'app (ricostruzioni HTML/CSS, non catture)
   Misure in punti dell'iPhone di riferimento (402pt di larghezza): --u.
   ========================================================================== */
.app {
  --u: calc(100cqw / 402);
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: calc(15 * var(--u));
  line-height: 1.35;
  overflow: hidden;
  text-align: left;
}
.app-stato { display: flex; justify-content: space-between; align-items: center; height: calc(54 * var(--u)); padding: calc(16 * var(--u)) calc(34 * var(--u)) 0 calc(44 * var(--u)); font-size: calc(17 * var(--u)); font-weight: var(--p-forte); flex: none; }
.app-stato .icone-stato { display: flex; gap: calc(6 * var(--u)); align-items: center; }
.app-stato .icone-stato i { display: block; background: currentColor; border-radius: calc(2 * var(--u)); }
.app-stato .seg { width: calc(17 * var(--u)); height: calc(11 * var(--u)); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.app-stato .bat { width: calc(25 * var(--u)); height: calc(12 * var(--u)); background: transparent !important; border: calc(1.5 * var(--u)) solid currentColor; border-radius: calc(4 * var(--u)) !important; position: relative; opacity: 0.9; }
.app-stato .bat::after { content: ""; position: absolute; inset: calc(1.5 * var(--u)); right: calc(5 * var(--u)); background: currentColor; border-radius: calc(1.5 * var(--u)); }
.app-corpo { flex: 1; min-height: 0; padding: calc(10 * var(--u)) calc(22 * var(--u)) 0; display: flex; flex-direction: column; }
.app-occhiello { font-size: calc(11 * var(--u)); font-weight: var(--p-forte); letter-spacing: calc(1.5 * var(--u)); text-transform: uppercase; color: var(--muto); }
.app-testa { display: flex; justify-content: space-between; align-items: flex-start; }
.app-titolo { font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: calc(48 * var(--u)); line-height: 1; letter-spacing: 0.01em; margin-top: calc(6 * var(--u)); }
.app-faccia { display: block; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; border: 1px solid var(--filo-forte); flex: none; }
.app-contatori { display: flex; gap: calc(30 * var(--u)); margin-top: calc(22 * var(--u)); }
.app-contatori span { display: block; font-size: calc(10 * var(--u)); font-weight: var(--p-forte); letter-spacing: calc(1 * var(--u)); color: var(--muto); text-transform: uppercase; }
.app-contatori b { display: block; font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: calc(44 * var(--u)); line-height: 1; margin-top: calc(4 * var(--u)); }
.app-settimana { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: calc(20 * var(--u)); text-align: center; }
.app-settimana span { display: grid; justify-items: center; gap: calc(8 * var(--u)); font-size: calc(10 * var(--u)); font-weight: var(--p-forte); letter-spacing: calc(1 * var(--u)); color: var(--muto); }
.app-settimana i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--filo); box-sizing: content-box; }
.app-settimana .previsto i { background: var(--muto); }
.app-settimana .guardato { color: var(--inchiostro); }
.app-settimana .guardato i { background: var(--accento); outline: calc(2 * var(--u)) solid var(--accento); outline-offset: calc(2 * var(--u)); }
.app-fasi { margin-top: calc(18 * var(--u)); }
.app-fase { display: grid; grid-template-columns: calc(118 * var(--u)) 1fr auto; align-items: center; gap: calc(8 * var(--u)); padding-block: calc(11 * var(--u)); border-bottom: 1px solid var(--filo); font-size: calc(14 * var(--u)); }
.app-fase:first-child { font-weight: var(--p-forte); }
.app-fase .pallini { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.app-fase .pallini i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; border: 1px solid var(--muto); }
.app-fase .conto { font-size: calc(11 * var(--u)); color: var(--muto); font-variant-numeric: tabular-nums; }
.app-esercizi { list-style: none; margin: calc(8 * var(--u)) 0 0; padding: 0; }
.app-esercizi li { display: grid; grid-template-columns: calc(26 * var(--u)) 1fr auto; align-items: center; padding-block: calc(7.5 * var(--u)); font-size: calc(14 * var(--u)); }
.app-esercizi li::before { content: ""; width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; border: calc(1.3 * var(--u)) solid var(--muto); }
.app-esercizi li.testa { font-size: calc(11 * var(--u)); font-weight: var(--p-forte); letter-spacing: calc(1.5 * var(--u)); text-transform: uppercase; }
.app-esercizi li.corrente::before { border-color: var(--inchiostro); border-width: calc(1.8 * var(--u)); }
.app-esercizi small { font-size: calc(11 * var(--u)); color: var(--muto); font-variant-numeric: tabular-nums; text-transform: uppercase; }

.app-tab { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: calc(10 * var(--u)) calc(4 * var(--u)) calc(30 * var(--u)); background: var(--rail-fondo); border-top: 1px solid var(--rail-filo); color: var(--rail-testo); }
.app-tab span { display: grid; justify-items: center; gap: calc(4 * var(--u)); font-size: calc(11 * var(--u)); font-weight: var(--p-forte); letter-spacing: calc(0.2 * var(--u)); }
.app-tab .ico { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 1.6; }
.app-tab .attiva { color: var(--rail-testo-forte); }
.app-tab .attiva .ico { color: var(--rail-accento); }

/* chat */
.app-linguette { display: flex; align-items: center; gap: calc(16 * var(--u)); font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: calc(20 * var(--u)); color: var(--muto); }
.app-linguette .attiva { color: var(--inchiostro); }
.app-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding-top: calc(14 * var(--u)); overflow: hidden; }
.app-giorno { text-align: center; font-size: calc(10 * var(--u)); font-weight: var(--p-forte); letter-spacing: calc(1.5 * var(--u)); color: var(--muto); text-transform: uppercase; }
.app-mia { align-self: flex-end; max-width: 78%; padding: calc(9 * var(--u)) calc(13 * var(--u)); background: var(--rail-accento); color: #17181a; border-radius: calc(3 * var(--u)); font-size: calc(14 * var(--u)); }
.app-mia small { opacity: 0.7; font-size: calc(10 * var(--u)); margin-left: calc(6 * var(--u)); }
.app-chi { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); color: var(--muto); }
.app-chi i { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; border: 1px solid var(--filo-forte); font-style: normal; font-size: calc(10 * var(--u)); color: var(--inchiostro-2); }
.app-sua { align-self: flex-start; max-width: 86%; padding: calc(11 * var(--u)) calc(13 * var(--u)); background: var(--superficie); border: 1px solid var(--filo); border-radius: calc(3 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.42; color: var(--inchiostro); }
.app-sua b { font-weight: var(--p-forte); }
.app-check { display: grid; grid-template-columns: auto 1fr auto; gap: calc(10 * var(--u)); align-items: center; padding: calc(12 * var(--u)); background: var(--superficie-2); border: 1px solid var(--filo); border-radius: calc(3 * var(--u)); }
.app-check .ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--inchiostro-2); }
.app-check strong { display: block; font-size: calc(14 * var(--u)); font-weight: var(--p-medio); }
.app-check small { display: block; font-size: calc(11.5 * var(--u)); color: var(--muto); }
.app-scrivi { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(10 * var(--u)); margin: calc(10 * var(--u)) 0 calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border: 1px solid var(--filo); border-radius: calc(3 * var(--u)); background: var(--superficie); color: var(--muto); font-size: calc(14 * var(--u)); }
.app-scrivi .ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--inchiostro-2); }

/* dieta, posto vuoto */
.app-vuoto { margin-top: calc(26 * var(--u)); padding: calc(28 * var(--u)) calc(20 * var(--u)); border: 1px dashed var(--filo-forte); border-radius: calc(3 * var(--u)); display: grid; justify-items: center; gap: calc(10 * var(--u)); text-align: center; }
.app-vuoto .piu { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: var(--superficie-2); border-radius: calc(3 * var(--u)); color: var(--accento); }
.app-vuoto .piu .ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.app-vuoto strong { font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: calc(22 * var(--u)); line-height: 1.2; }
.app-vuoto small { font-size: calc(13 * var(--u)); color: var(--muto); }
.app-afilo { width: 100%; padding: calc(11 * var(--u)); border: 1px solid var(--filo-forte); border-radius: calc(3 * var(--u)); font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: calc(16 * var(--u)); letter-spacing: calc(0.4 * var(--u)); }

/* statistiche */
.app-sotto-ling { display: flex; gap: calc(18 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); color: var(--muto); }
.app-sotto-ling .attiva { color: var(--inchiostro); box-shadow: 0 calc(3 * var(--u)) 0 var(--accento); }
.app-periodi { display: flex; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); }
.app-periodi button { padding: calc(6 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--filo); border-radius: calc(3 * var(--u)); background: transparent; color: var(--muto); font-size: calc(12 * var(--u)); font-weight: var(--p-forte); cursor: pointer; transition: background-color var(--m-breve) var(--curva), color var(--m-breve) var(--curva); }
.app-periodi button[aria-pressed="true"] { background: var(--superficie-2); color: var(--inchiostro); border-color: var(--filo-forte); }
.app-carta { margin-top: calc(14 * var(--u)); padding: calc(14 * var(--u)); border: 1px solid var(--filo); border-radius: calc(3 * var(--u)); background: var(--superficie); }
.app-carta-testa { display: flex; justify-content: space-between; font-size: calc(10 * var(--u)); font-weight: var(--p-forte); letter-spacing: calc(1.2 * var(--u)); color: var(--muto); text-transform: uppercase; }
.app-grafico { margin-top: calc(12 * var(--u)); }
.app-grafico svg { width: 100%; height: auto; overflow: visible; }
.app-grafico .griglia { stroke: var(--filo); stroke-width: 1; }
.app-grafico .linea { fill: none; stroke: var(--accento); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: d var(--m-ingresso) var(--curva); }
.app-grafico .area { fill: var(--accento); fill-opacity: 0.1; stroke: none; transition: d var(--m-ingresso) var(--curva); }
.app-righe { margin-top: calc(10 * var(--u)); }
.app-righe div { display: flex; justify-content: space-between; padding-block: calc(8 * var(--u)); border-top: 1px solid var(--filo); font-size: calc(13 * var(--u)); }
.app-righe span:last-child { font-variant-numeric: tabular-nums; color: var(--inchiostro-2); }

/* protocollo infortunio */
.app-zone { display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); overflow: hidden; }
.app-zone span { flex: none; padding: calc(9 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--filo-forte); border-radius: calc(3 * var(--u)); font-size: calc(14 * var(--u)); }
.app-zone .scelta { border-color: var(--accento); color: var(--accento-testo); background: var(--accento-tenue); }
.app-sez { margin-top: calc(22 * var(--u)); display: flex; justify-content: space-between; font-size: calc(11 * var(--u)); font-weight: var(--p-forte); letter-spacing: calc(1.5 * var(--u)); color: var(--muto); text-transform: uppercase; }
.app-sez b { font-size: calc(14 * var(--u)); letter-spacing: 0; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.app-intensita { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(5 * var(--u)); margin-top: calc(14 * var(--u)); }
.app-intensita i { height: calc(13 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--superficie-2); border: 1px solid var(--filo); }
.app-intensita i.su { background: var(--attenzione); border-color: var(--attenzione); }
.app-scala { display: flex; justify-content: space-between; margin-top: calc(10 * var(--u)); font-size: calc(10 * var(--u)); color: var(--muto); letter-spacing: calc(0.8 * var(--u)); }
.app-anteprima { margin-top: calc(24 * var(--u)); padding: calc(12 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--filo); border-radius: calc(3 * var(--u)); background: var(--superficie); font-size: calc(13.5 * var(--u)); line-height: 1.45; }
.app-anteprima b { display: block; font-size: calc(11 * var(--u)); letter-spacing: calc(1 * var(--u)); color: var(--attenzione); text-transform: uppercase; margin-bottom: calc(4 * var(--u)); }

/* ==========================================================================
   Pagina atleti
   ========================================================================== */

.mostra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 8vw, 128px); align-items: center; }
.mostra .telefono { --lato: clamp(260px, 25vw, 330px); }
@media (max-width: 860px) {
  .mostra { grid-template-columns: 1fr; justify-items: center; }
  .mostra .telefono { --lato: min(76vw, 300px); }
}

.costanza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--inchiostro); }
.costanza div { padding: var(--sp-5) var(--sp-5) 0 0; display: grid; gap: var(--sp-2); align-content: start; }
.costanza div + div { padding-left: var(--sp-5); border-left: var(--bordo); }
.costanza p { color: var(--inchiostro-2); font-size: var(--t-corpo); }
@media (max-width: 800px) {
  .costanza { grid-template-columns: 1fr; }
  .costanza div + div { padding-left: 0; border-left: 0; border-top: var(--bordo); }
  .costanza div { padding-bottom: var(--sp-4); }
}

.condividi-esito { min-height: 1.5em; margin-top: var(--sp-3); font-size: var(--t-piccolo); color: var(--muto); }
.condividi-campo { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); max-width: 460px; }
.condividi-campo input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--filo-comando); border-radius: var(--r); background: var(--superficie); color: var(--inchiostro); font: inherit; font-size: var(--t-corpo); }

/* ==========================================================================
   Pagine di testo: domande, note legali
   ========================================================================== */
.pagina-testa { padding-block: clamp(48px, 7vw, 104px) clamp(32px, 4vw, 56px); border-bottom: var(--bordo); }
.pagina-testa .lead { margin-top: var(--sp-4); }
.indice { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.gruppo-domande { padding-top: clamp(48px, 6vw, 80px); }
.gruppo-domande > h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: var(--sp-4); }
.bozza {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  margin-top: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--attenzione); border-radius: var(--r);
  color: var(--inchiostro-2); font-size: var(--t-corpo);
}
.bozza .segno { margin-top: 6px; border: 2px solid var(--attenzione); }
.bozza strong { color: var(--attenzione); }
.prosa { max-width: 72ch; padding-block: clamp(40px, 5vw, 72px) var(--stacco-sezione); color: var(--inchiostro-2); }
.prosa h2 { font-size: clamp(24px, 2.4vw, 32px); color: var(--inchiostro); margin: var(--sp-7) 0 var(--sp-3); }
.prosa h2:first-child { margin-top: 0; }
.prosa p, .prosa ul { margin-bottom: var(--sp-4); }
.prosa ul { padding-left: 1.2em; }
.prosa li + li { margin-top: var(--sp-2); }
.prosa a { color: var(--accento-testo); text-underline-offset: 3px; }
.prosa strong { color: var(--inchiostro); }
.da-completare { padding: 1px 6px; border: 1px dashed var(--attenzione); border-radius: var(--r); color: var(--attenzione); font-weight: var(--p-forte); font-size: 0.92em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.aggiornato { color: var(--muto); font-size: var(--t-piccolo); }

/* ==========================================================================
   Scrivici: il modulo (nella sua pagina e nella finestra)
   Campi come quelli del prodotto: filo che regge 3:1, errori in cremisi con la
   parola, scelte a carte; il pieno spento torna un contorno.
   ========================================================================== */
.scrivici { max-width: 640px; padding-block: clamp(32px, 4vw, 56px) var(--stacco-sezione); }
.scrivici-modulo { display: grid; gap: var(--sp-5); }
.scrivici-coppia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5) var(--sp-4); }
.campo { display: grid; gap: 6px; align-content: start; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.campo > label, .campo > legend { padding: 0; font-size: var(--t-piccolo); font-weight: var(--p-medio); color: var(--inchiostro-2); }
.campo > legend { margin-bottom: 6px; }
.facoltativo { color: var(--muto); font-weight: var(--p-normale); }
.campo input:not([type="radio"]), .campo textarea {
  width: 100%; min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--filo-comando); border-radius: var(--r);
  background: var(--superficie); color: var(--inchiostro);
  font: inherit; font-size: var(--t-medio); line-height: var(--i-corpo);
  transition: border-color var(--m-breve) var(--curva);
}
.campo textarea { min-height: 136px; resize: vertical; }
@media (hover: hover) { .campo input:not([type="radio"]):hover, .campo textarea:hover { border-color: var(--inchiostro-2); } }
.campo input:not([type="radio"]):focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--accento); outline-offset: 0; border-color: var(--accento); }
.campo input[aria-invalid="true"]:not([type="radio"]), .campo textarea[aria-invalid="true"] { border-color: var(--allarme); }
.campo-aiuto { font-size: var(--t-minimo); color: var(--muto); }
.campo-errore { font-size: var(--t-minimo); font-weight: var(--p-medio); color: var(--allarme); }
.campo-aiuto:empty, .campo-errore:empty { display: none; }
.scelte-voci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 560px) { .scelte-voci { grid-template-columns: 1fr; } }
.scelte-voci .scelta {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px; padding: 12px;
  border: var(--bordo); border-radius: var(--r);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--m-breve) var(--curva), background-color var(--m-breve) var(--curva), box-shadow var(--m-breve) var(--curva);
}
@media (hover: hover) { .scelte-voci .scelta:hover { border-color: var(--filo-forte); } }
.scelte-voci .scelta:has(:checked) { background: var(--superficie-scelta); border-color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--inchiostro); }
.scelte-voci .scelta:has(:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }
.scelte-voci .scelta input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--inchiostro); }
.scelte-voci .scelta input:focus-visible { outline: none; }
.scelte-voci .scelta b { display: block; font-size: var(--t-corpo); font-weight: var(--p-forte); color: var(--inchiostro); }
.scelte-voci .scelta small { display: block; margin-top: 2px; font-size: var(--t-minimo); color: var(--muto); }
fieldset[aria-invalid="true"] .scelte-voci .scelta { border-color: var(--allarme); }
/* Scelte corte (messaggio o chiamata; mattina, pomeriggio, sera): affiancate anche sul telefono */
.scelte-voci.due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scelte-voci.brevi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 374px) { .scelte-voci.brevi { grid-template-columns: 1fr; } }
/* I campi della chiamata: numero, giorni, momento della giornata */
.scrivici-chiamata { display: grid; gap: var(--sp-5); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.giorni { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.giorno {
  position: relative; display: inline-grid; place-items: center;
  min-width: 56px; min-height: var(--lato-tocco); padding: 0 var(--sp-3);
  border: var(--bordo); border-radius: var(--r);
  background: var(--superficie); color: var(--inchiostro-2);
  font-size: var(--t-corpo); font-weight: var(--p-forte);
  cursor: pointer;
  transition: border-color var(--m-breve) var(--curva), background-color var(--m-breve) var(--curva), color var(--m-breve) var(--curva);
}
.giorno input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@media (hover: hover) { .giorno:hover { border-color: var(--filo-forte); color: var(--inchiostro); } }
.giorno:has(:checked) { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--fondo); }
.giorno:has(:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }
@media (max-width: 600px) {
  /* Sul telefono i sei giorni in una riga, e le tre fasce senza toccare il bordo */
  .giorni { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .giorno { min-width: 0; padding: 0; }
  .scelte-voci.brevi .scelta { gap: 8px; padding-inline: 10px; }
}
/* «Se ti blocchi, fissa una chiamata»: una riga sotto i tasti delle chiusure */
.chiusura-aiuto { max-width: 58ch; margin: var(--sp-4) auto 0; font-size: var(--t-corpo); color: var(--inchiostro-2); text-wrap: balance; }
.chiusura-aiuto a { color: var(--inchiostro); font-weight: var(--p-forte); text-underline-offset: 3px; }
@media (hover: hover) { .chiusura-aiuto a:hover { text-decoration-thickness: 2px; } }
@media (pointer: coarse) { .chiusura-aiuto a { display: inline-block; padding-block: 11px; margin-block: -11px; } }
.scrivici-privacy { font-size: var(--t-piccolo); color: var(--muto); }
.scrivici-privacy a { color: var(--accento-testo); text-underline-offset: 3px; }
.scrivici-stato { font-size: var(--t-piccolo); color: var(--inchiostro-2); max-width: 60ch; }
.scrivici-stato[data-tono="errore"] { padding: var(--sp-3); border: 1px solid var(--allarme); border-radius: var(--r); }
.scrivici-noscript { margin-top: clamp(32px, 4vw, 56px); padding: var(--sp-3); border: 1px dashed var(--filo-forte); border-radius: var(--r); }
.scrivici-ricevuto { display: grid; gap: var(--sp-4); justify-items: start; padding-block: var(--sp-5) var(--sp-2); }
.ricevuto-segno { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accento); color: var(--su-accento); }
.ricevuto-segno .ico { width: 28px; height: 28px; }
.ricevuto-testo { font-size: var(--t-lead); color: var(--inchiostro-2); }
.ricevuto-testo b { color: var(--inchiostro); }
/* Dopo l'invio la frase «Ti rispondiamo all'email che lasci qui sotto» non ha più senso */
.finestra:has([data-ricevuto]:not([hidden])) > .lead, main:has([data-ricevuto]:not([hidden])) .pagina-testa .lead { display: none; }
.scrivici-ricevuto:focus { outline: none; }

/* La finestra: sta sopra la pagina, quindi è l'unica cosa con l'ombra */
.finestra {
  width: min(640px, 100vw - 32px); max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0 var(--sp-5) var(--sp-5);
  border: var(--bordo); border-radius: var(--r);
  background: var(--superficie); color: var(--inchiostro);
  box-shadow: var(--ombra-sopra);
  overflow: auto; overscroll-behavior: contain;
  scroll-padding-top: 96px;
}
.finestra::backdrop { background: color-mix(in srgb, var(--fondo, #f2f2f0) 70%, transparent); }
.finestra-testa {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) 0 var(--sp-3);
  background: var(--superficie);
}
.finestra-testa h2 { font-size: var(--t-titolo); }
.finestra-testa h2:focus { outline: none; }
.finestra > .lead { font-size: var(--t-medio); margin-bottom: var(--sp-5); }
.finestra .scrivici { max-width: none; padding: 0; }
/* scroll-padding-top tiene libera la testata; questo porta su anche l'etichetta (o la legenda) sopra il campo */
.finestra .campo :is(input, textarea) { scroll-margin-top: var(--sp-7); }
html:has(.finestra[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .finestra[open] { animation: sopra-apre var(--m-medio) var(--curva); }
  .finestra[open]::backdrop { animation: velo-apre var(--m-medio) var(--curva); }
}
@keyframes sopra-apre { from { opacity: 0; translate: 0 8px; } }
@keyframes velo-apre { from { opacity: 0; } }
@media (max-width: 600px) {
  .finestra {
    width: 100%; height: 100dvh; max-height: none; margin: 0;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0 var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  }
  .scrivici .tasti .tasto { flex: 1 1 100%; }
}

.pagina-404 { min-height: 70vh; display: grid; align-content: center; gap: var(--sp-5); padding-block: var(--sp-8); }
.pagina-404 h1 { font-size: clamp(64px, 12vw, 180px); line-height: 1.18; }

/* ==========================================================================
   «Parti da quello che usi già»: tutto entra in Rift, niente esce.
   Una griglia: tre voci a sinistra, tre a destra, Rift al centro. Le linee
   sono fili da 1px dentro le celle fra le colonne: arrivano a metà di ogni
   riga, perché le tre righe sono alte uguali (1fr) e senza spazio fra loro;
   Rift sta su tutte e tre, al centro, quindi il filo di mezzo entra a metà. Si disegnano una volta entrando, poi restano ferme.
   ========================================================================== */
.flusso {
  display: grid;
  grid-template-columns: minmax(200px, 310px) minmax(48px, 1fr) minmax(200px, 260px) minmax(48px, 1fr) minmax(200px, 310px);
  grid-template-rows: repeat(3, minmax(96px, 1fr));
  grid-template-areas:
    "excel sx rift dx whatsapp"
    "pdf   sx rift dx calendario"
    "foto  sx rift dx quaderno";
  max-width: 1160px;
  margin-inline: auto;
}
.strumento {
  position: relative; z-index: 1;
  align-self: stretch; margin-block: var(--sp-2);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--superficie);
  border: var(--bordo);
  border-radius: var(--r);
}
.strumento-segno {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: var(--bordo); border-radius: var(--r);
  background: var(--fondo);
  color: var(--inchiostro-2);
}
.strumento-segno img { width: 28px; height: 28px; }
.strumento-nome { display: grid; gap: 2px; font-size: var(--t-piccolo); line-height: var(--i-media); color: var(--muto); text-wrap: pretty; }
.strumento-nome b { font-size: var(--t-medio); font-weight: var(--p-forte); color: var(--inchiostro); }
[data-strumento="excel"] { grid-area: excel; }
[data-strumento="pdf"] { grid-area: pdf; }
[data-strumento="foto"] { grid-area: foto; }
[data-strumento="whatsapp"] { grid-area: whatsapp; }
[data-strumento="calendario"] { grid-area: calendario; }
[data-strumento="quaderno"] { grid-area: quaderno; }

/* Rift al centro, acceso come la sua colonna nel confronto */
.flusso-rift {
  grid-area: rift;
  position: relative; z-index: 1;
  align-self: center;
  display: grid; justify-items: center; align-content: center;
  padding: var(--sp-6) var(--sp-4);
  border: 1px solid var(--accento-aperto);
  border-top: 2px solid var(--accento);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accento) 8%, var(--superficie));
}
.flusso-rift > svg { height: 48px; width: auto; color: var(--inchiostro); }

/* I fili: in ogni cella fra le colonne, un ramo per ogni voce, l'asse che li
   raccoglie e il filo di mezzo che entra in Rift con la punta */
.giunto { position: relative; }
.giunto[data-lato="sx"] { grid-area: sx; }
.giunto[data-lato="dx"] { grid-area: dx; }
.giunto i { position: absolute; display: block; background: var(--filo-forte); }
.giunto-ramo { top: var(--y); width: 50%; height: 1px; }
.giunto[data-lato="sx"] .giunto-ramo { left: 0; }
.giunto[data-lato="dx"] .giunto-ramo { right: 0; }
.giunto-asse { left: 50%; top: 16.667%; bottom: 16.667%; width: 1px; }
.giunto-centro { top: 50%; width: 50%; height: 1px; }
.giunto[data-lato="sx"] .giunto-centro { left: 50%; }
.giunto[data-lato="dx"] .giunto-centro { right: 50%; }
.giunto-punta { position: absolute; width: 16px; height: 16px; color: var(--inchiostro-2); stroke-width: 2; }
.giunto .giunto-punta { top: 50%; translate: 0 -50%; }
.giunto[data-lato="sx"] .giunto-punta { right: -3px; }
.giunto[data-lato="dx"] .giunto-punta { left: -3px; }
/* Sul telefono: dalle voci, i fili si uniscono e scendono in Rift */
.giunto-giu { position: relative; display: none; grid-area: entra; min-height: 56px; }
.giunto-giu::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 16px; border: 1px solid var(--filo-forte); border-top: 0; }
.giunto-giu i { position: absolute; left: 50%; top: 16px; bottom: 0; width: 1px; translate: -50% 0; background: var(--filo-forte); }
.giunto-giu .giunto-punta { left: 50%; bottom: -3px; translate: -50% 0; rotate: 90deg; }

.nota-marchi { margin-top: var(--sp-5); font-size: var(--t-minimo); color: var(--muto); text-align: center; text-wrap: balance; }
.livelli.flusso-punti { margin-top: clamp(40px, 5vw, 64px); }

@media (prefers-reduced-motion: no-preference) {
  .giunto i, .giunto-giu i, .giunto-giu::before { transition: scale 700ms var(--curva) 300ms; }
  .giunto-punta { transition: opacity 400ms var(--curva) 1300ms; }
  .giunto[data-lato="sx"] i { transform-origin: left center; }
  .giunto[data-lato="dx"] i { transform-origin: right center; }
  .giunto-giu i, .giunto-giu::before { transform-origin: center top; }
  .giunto .giunto-asse { transition-delay: 650ms; }
  .giunto .giunto-centro { transition-delay: 950ms; }
  .giunto-giu i { transition-delay: 600ms; }
  .js .flusso:not(.in) :is(.giunto-ramo, .giunto-centro) { scale: 0 1; }
  .js .flusso:not(.in) :is(.giunto-asse, .giunto-giu i, .giunto-giu::before) { scale: 1 0; }
  .js .flusso:not(.in) .giunto-punta { opacity: 0; }
}

/* Sul telefono si legge dall'alto: le sei voci in due colonne, poi Rift */
@media (max-width: 900px) {
  .flusso {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "excel whatsapp"
      "pdf   calendario"
      "foto  quaderno"
      "entra entra"
      "rift  rift";
    column-gap: var(--sp-2);
    max-width: 640px;
  }
  .strumento { align-self: stretch; margin-block: 0; }
  .strumento:not([data-strumento="foto"], [data-strumento="quaderno"]) { margin-bottom: var(--sp-2); }
  .giunto { display: none; }
  .giunto-giu { display: block; }
  .flusso-rift { justify-self: center; width: min(100%, 340px); padding-block: var(--sp-5); }
}
@media (max-width: 600px) {
  /* Due colonne strette: l'icona sopra e il testo sotto, così le righe lunghe respirano */
  .strumento { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-2); padding: var(--sp-3); }
  .strumento-segno { width: 36px; height: 36px; }
  .strumento-segno img { width: 24px; height: 24px; }
  .strumento-nome { font-size: var(--t-minimo); }
  .strumento-nome b { font-size: var(--t-corpo); }
}

/* ==========================================================================
   «Per come lavori tu»: tre carte, una per modo di lavorare.
   Le intestazioni si allineano fra le carte (subgrid), così i punti partono
   alla stessa altezza anche quando un titolo va a capo.
   ========================================================================== */
.modi {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px);
  max-width: var(--largo); margin-inline: auto;
}
.modo {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--sp-3); align-content: start;
  padding: clamp(24px, 2.4vw, 36px);
  background: var(--superficie); border: var(--bordo); border-radius: var(--r);
}
.modo .num { font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: var(--t-cifra); line-height: 1; color: var(--accento-testo); font-variant-numeric: tabular-nums; }
.modo h3 { align-self: start; font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: clamp(26px, 2.2vw, 32px); line-height: var(--i-stretta); letter-spacing: var(--spaziatura-titolo); }
.modo ul { display: grid; align-content: start; margin-top: var(--sp-2); }
.modo li { display: grid; gap: var(--sp-1); padding-block: var(--sp-4); border-top: var(--bordo); }
.modo li:last-child { padding-bottom: 0; }
.modo h4 { font-size: var(--t-medio); font-weight: var(--p-forte); line-height: var(--i-media); text-wrap: balance; }
.modo li p { font-size: var(--t-corpo); line-height: var(--i-corpo); color: var(--inchiostro-2); text-wrap: pretty; }
@media (max-width: 1000px) {
  .modi { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .modo { grid-row: auto; grid-template-rows: none; }
}

/* ==========================================================================
   «Sul telefono dei tuoi clienti»: tre telefoni dritti, della stessa misura,
   ognuno sopra il suo punto. Sul telefono scorrono in fila dentro la sezione
   (come i tre telefoni del preparatore), senza allargare la pagina.
   ========================================================================== */
.tre-app {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px);
  max-width: var(--largo); margin: 0 auto; padding: 0; list-style: none;
}
.tre-app li { display: grid; justify-items: center; align-content: start; gap: var(--sp-3); text-align: center; }
.tre-app .telefono { --lato: clamp(220px, 18vw, 280px); margin-bottom: var(--sp-4); }
.tre-app p { max-width: 36ch; color: var(--inchiostro-2); text-wrap: pretty; }
@media (max-width: 760px) {
  ul.tre-app {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(76vw, 300px);
    justify-content: start; gap: var(--sp-5);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine) ; scroll-padding-inline: var(--margine);
    scrollbar-width: none;
  }
  .tre-app::-webkit-scrollbar { display: none; }
  .tre-app li { scroll-snap-align: start; }
  .tre-app .telefono { --lato: min(64vw, 240px); }
}

/* ==========================================================================
   «Dal tuo file alla prima scheda»: tre passaggi su una linea ferma,
   il numero nel cerchio sulla linea. Sul telefono la linea scende a sinistra.
   ========================================================================== */
.tappe {
  --cerchio: 48px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6);
  max-width: var(--largo); margin: 0 auto; padding: 0; list-style: none;
}
.tappe li { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--sp-3); text-align: center; }
.tappa-numero {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--cerchio); height: var(--cerchio);
  margin-bottom: var(--sp-2);
  border: 1px solid var(--filo-forte); border-radius: var(--r-tondo);
  background: var(--fondo);
  font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: var(--t-sezione); line-height: 1; font-variant-numeric: tabular-nums;
}
.tappe .pastiglia { justify-self: center; }
.tappe p { max-width: 38ch; color: var(--inchiostro-2); text-wrap: pretty; }
.tappe li:not(:last-child)::after {
  content: ""; position: absolute;
  top: calc(var(--cerchio) / 2);
  left: calc(50% + var(--cerchio) / 2);
  width: calc(100% + var(--sp-6) - var(--cerchio));
  height: 1px;
  background: var(--filo-forte);
  transform-origin: left center;
}
.tappe-nota { margin-top: clamp(32px, 4vw, 56px); text-align: center; color: var(--inchiostro-2); }
@media (max-width: 760px) {
  .tappe { --cerchio: 40px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tappe li { grid-template-columns: var(--cerchio) minmax(0, 1fr); justify-items: start; column-gap: var(--sp-4); row-gap: var(--sp-2); padding-bottom: var(--sp-6); text-align: left; }
  .tappe li:last-child { padding-bottom: 0; }
  .tappa-numero { grid-row: span 3; align-self: start; margin: 0; font-size: var(--t-titoletto); }
  .tappe .pastiglia { justify-self: start; }
  .tappe li:not(:last-child)::after { top: var(--cerchio); bottom: 0; left: calc(var(--cerchio) / 2); width: 1px; height: auto; transform-origin: center top; }
}
@media (prefers-reduced-motion: no-preference) {
  .tappe li::after { transition: scale 900ms var(--curva) 400ms; }
  .tappe li:nth-child(2)::after { transition-delay: 800ms; }
  .js .tappe:not(.in) li::after { scale: 0 1; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .js .tappe:not(.in) li::after { scale: 1 0; }
}

/* ==========================================================================
   Chiusura della home: sotto i tasti le condizioni della prova
   ========================================================================== */
.chiusura-condizioni { margin-top: var(--sp-3); font-size: var(--t-piccolo); color: var(--muto); text-wrap: balance; }

/* ==========================================================================
   Movimento: breve, una curva sola, ingresso «fuori fuoco».
   Senza JS (niente .js su <html>) tutto resta visibile.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-entra] {
    opacity: 0;
    translate: 0 14px;
    filter: blur(var(--sfocatura-ingresso));
  }
  .js [data-entra="scala"] { translate: 0 28px; scale: 0.985; filter: none; }
  .js [data-entra="destra"], .js [data-entra="sinistra"] { translate: 0 24px; filter: none; }
  @media (min-width: 1280px) {
    .js [data-entra="destra"] { translate: 32px 0; }
    .js [data-entra="sinistra"] { translate: -32px 0; }
  }
  .js [data-entra].in {
    opacity: 1; translate: 0 0; scale: 1; filter: none;
    transition:
      opacity var(--m-ingresso) var(--curva),
      translate calc(var(--m-ingresso) * 1.4) var(--curva),
      scale calc(var(--m-ingresso) * 1.4) var(--curva),
      filter var(--m-ingresso) var(--curva);
    transition-delay: min(calc(var(--i, 0) * 70ms), 560ms);
  }
  /* Le parole dei titoli salgono di mezza riga, a cascata */
  .js .parola { display: inline-block; opacity: 0; translate: 0 0.45em; filter: blur(6px); }
  .js .in .parola, .js .parola.in {
    opacity: 1; translate: 0 0; filter: none;
    transition: opacity var(--m-ingresso) var(--curva), translate var(--m-ingresso) var(--curva), filter var(--m-ingresso) var(--curva);
    transition-delay: min(calc(var(--p, 0) * 45ms + var(--ritardo, 0ms)), 900ms);
  }
  /* Sui dispositivi a tocco le entrate restano senza sfocatura: mentre si scorre col dito
     se ne accendono decine insieme (131 sulla home del telefono), ed è il filtro che costa
     di più alle GPU di telefoni e tablet. Movimento e dissolvenza restano uguali. */
  @media (hover: none) {
    .js [data-entra], .js .parola { filter: none; }
  }
  /* Le linee si disegnano */
  .js .disegna { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .in .disegna, .js .disegna.in { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--curva); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .arco { stroke-dasharray: 0 1; }
  .js .in .arco { stroke-dasharray: var(--arco) 1; transition: stroke-dasharray 1600ms var(--curva); transition-delay: calc(var(--i, 0) * 120ms + 200ms); }
  .js .compare { opacity: 0; }
  .js .in .compare { opacity: 1; transition: opacity 500ms var(--curva); transition-delay: calc(var(--i, 0) * 50ms + 300ms); }

  .hero-scena .hero-telefono { transition: translate 120ms linear; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.arco { stroke-dasharray: var(--arco) 1; }

/* ==========================================================================
   Piani e prezzi: il listino come un tabellone (Fey «ticker») nella banda scura.
   Mese/anno con due radio, senza JavaScript; il conto dei clienti lo aggiunge site.js.
   ========================================================================== */
/* Il fondo della banda si risolve col tema della pagina, non con quello scuro dei figli:
   il tabellone copre gli anelli col colore esatto della banda. --n è il numero del conto. */
@property --banda-fondo { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --n { syntax: "<number>"; inherits: true; initial-value: 0; }
@media (prefers-reduced-motion: no-preference) {
  @starting-style { .pagina-piani [data-vista] { opacity: 0; } }
}

/* La testa: titolo a sinistra, mese/anno a destra */

/* Il tabellone; in cima il conto: quanti clienti, quale piano, quanto */
.listino { border: var(--bordo-forte); border-radius: var(--r); background: var(--banda-fondo); overflow: clip; }
/* Il cursore: pista arancio fino al numero, maniglia d'inchiostro */
.chiusura .lead b { color: var(--inchiostro); font-weight: var(--p-forte); }

/* I tre prezzi */ /* in inglese l’euro va prima */
/* 60 tacche, una per cliente: piene fino al numero del conto, poi i posti liberi del piano;
   gialle quelle pagate a parte. La linea arancio è il numero del conto, nello stesso punto nei tre piani. */
/* Il piano scelto dal conto si dice con l'inchiostro; l'arancio pieno resta alla prova lassù */
.pagine { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.pagine li { display: grid; justify-items: center; gap: 6px; padding: 10px 2px 8px; font-size: var(--t-minimo); font-weight: var(--p-medio); line-height: 1.2; text-align: center; color: var(--inchiostro-2); }
.pagine .ico { width: 20px; height: 20px; color: var(--inchiostro); }

/* Cosa c'è in ogni piano: tre anteprime (ricostruzioni, non catture), poi la scheda tecnica */
.gruppi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-7) clamp(20px, 2.4vw, 32px); margin-top: clamp(56px, 7vw, 96px); }
.gruppo h3 { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--inchiostro); font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: var(--t-sezione); line-height: 1; text-transform: uppercase; letter-spacing: var(--spaziatura-titolo); }
.gruppo dl > div { padding-block: var(--sp-4); border-bottom: var(--bordo); }
.gruppo dt { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--p-forte); line-height: var(--i-media); }
.gruppo dt .ico { color: var(--inchiostro-2); }
.gruppo dd { margin: var(--sp-1) 0 0 calc(18px + var(--sp-3)); font-size: var(--t-corpo); line-height: 1.5; color: var(--inchiostro-2); text-wrap: pretty; }

/* Le differenze con le altre app: la colonna di Rift si segna con un filo d'inchiostro */
.differenze { width: 100%; border-collapse: collapse; table-layout: fixed; border-block: 1px solid var(--inchiostro); }
.differenze th, .differenze td { padding: var(--sp-4); border-top: var(--bordo); text-align: left; vertical-align: top; }
.differenze thead th { border-top: 0; padding-block: var(--sp-5) var(--sp-3); font-size: var(--t-corpo); font-weight: var(--p-forte); color: var(--muto); vertical-align: bottom; }
.differenze thead th:first-child { width: 22%; }
.differenze thead th:first-child, .differenze tbody th { padding-left: 0; }
.differenze thead .c-rift svg { height: 22px; width: auto; color: var(--inchiostro); }
.differenze tbody th { font-size: var(--t-medio); font-weight: var(--p-forte); line-height: var(--i-media); }
.differenze td { font-size: var(--t-corpo); line-height: 1.5; color: var(--inchiostro-2); text-wrap: pretty; }
.differenze .c-rift { box-shadow: inset 2px 0 0 var(--inchiostro); color: var(--inchiostro); }
.differenze b { font-weight: var(--p-forte); }

/* Per chi si allena: 0 € accanto a Rift Pro */
.gratis { display: grid; gap: var(--sp-4); justify-items: start; }
.gratis h3 { color: var(--inchiostro-2); }
.gratis > p:not([class]) { max-width: 52ch; color: var(--inchiostro-2); text-wrap: pretty; } /* la virgola di Antonio scende sotto la riga */

/* Chiusura: il conto in una riga, accanto il listino */
.riepilogo { display: grid; border-top: 1px solid var(--inchiostro); }
.riepilogo > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: var(--bordo); }
.riepilogo dt { font-weight: var(--p-forte); }
.riepilogo dd { margin: 0; font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: var(--t-titolo); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.riepilogo small { margin-left: var(--sp-2); font-family: var(--font-testo); font-size: var(--t-piccolo); font-weight: var(--p-normale); color: var(--muto); }

@media (max-width: 1100px) { .pagine { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .gruppi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sul telefono ogni riga delle differenze diventa una scheda */
@media (max-width: 760px) {
  .differenze, .differenze tbody, .differenze tr, .differenze th, .differenze td { display: block; }
  .differenze thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .differenze tbody tr { padding-block: var(--sp-4); border-top: var(--bordo); }
  .differenze tbody tr:first-child { border-top: 0; }
  .differenze tbody th { padding: 0 0 var(--sp-3); border: 0; }
  .differenze td { padding: var(--sp-3); border: 0; }
  .differenze td::before { content: attr(data-chi); display: block; margin-bottom: 2px; font-size: var(--t-minimo); font-weight: var(--p-forte); color: var(--muto); }
}
@media (max-width: 640px) {
  .gruppi { grid-template-columns: 1fr; }
  .pagine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Stampa: niente testata, niente movimento
   ========================================================================== */
@media print {
  .testata, .menu-pannello { display: none !important; }
  .js [data-entra], .js .parola { opacity: 1 !important; translate: none !important; filter: none !important; }
}

/* ==========================================================================
   Impaginato centrato: la pagina è larga, ma tutto sta sull'asse centrale.
   Le testate hanno il titolo e sotto la frase, al centro; i blocchi larghi
   si fermano a --largo; le composizioni a due colonne (Oggi, consenso)
   restano su due colonne ma centrate anche loro.
   ========================================================================== */
.contenitore:not(.coda-griglia, .consenso-griglia) > .sezione-testa,
.pagina-testa, .faq-griglia > h2 {
  justify-items: center; max-width: none; margin-inline: auto; text-align: center;
}
.contenitore:not(.coda-griglia, .consenso-griglia) > .sezione-testa .lead,
.contenitore:not(.coda-griglia, .consenso-griglia) > .sezione-testa .testo,
.pagina-testa .lead { max-width: 58ch; margin-inline: auto; }
.pagina-testa .indice { justify-content: center; }

/* La prima pagina: titolo, frase e tasti al centro sotto la scena */
.hero-testo { text-align: center; }
.hero-testo h1 { text-wrap: balance; }
.hero-sotto { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hero-sotto .lead { max-width: 58ch; }
.hero-sotto .tasti { justify-content: center; }
.hero-testo .stato { justify-content: center; flex-wrap: wrap; text-align: center; }

/* Domande: la testata sopra, l'elenco sotto, al centro */
.faq-griglia { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: var(--sp-6); }
.gruppo-domande > h2 { margin-bottom: 0; }
.faq-griglia > .sezione-testa { margin-bottom: var(--sp-4); }
.faq-griglia > .domande { width: min(100%, var(--quadro)); }

/* La chiusura: titolo, frase e tasti al centro */
.chiusura { text-align: center; }
.chiusura .lead { max-width: 58ch; margin-inline: auto; }
.chiusura .tasti { justify-content: center; }

/* I blocchi larghi si fermano a --largo */
.due-lati-cornice, .confronto-cornice, .confronto-piede, .coppia, .passi, .livelli, .coda-griglia {
  max-width: var(--largo); margin-inline: auto;
}
.confronto-piede { justify-content: center; }
.confronto-nota { flex: 0 1 auto; }
/* Le tre pagine: l'immagine e accanto la didascalia, la coppia centrata */
.pista .vetrina, .pista .vetrina:nth-child(even) { justify-content: center; }
.pista .vetrina { grid-template-columns: minmax(0, var(--quadro)) minmax(240px, 400px); }
.pista .vetrina:nth-child(even) { grid-template-columns: minmax(240px, 400px) minmax(0, var(--quadro)); }
.scrivici { margin-inline: auto; }
@media (max-width: 900px) {
  .pista .vetrina, .pista .vetrina:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
}

/* Il marchio è sempre bianco, anche dove la cella intorno è arancione
   (confronto, «Con Rift»): una regola sola per tutte le pagine. */
:root svg:has(> use[href$="#marchio"]) { color: var(--marchio); }