@charset "UTF-8";
/* ============================================================================
   RIDERADAR — SISTEMA DI DESIGN DEL SITO (foglio di stile unico)
   ---------------------------------------------------------------------------
   Regole non negoziabili applicate qui dentro:
   • Due soli colori identitari: bianco #FFFFFF e blu #0A66FF.
     Azzurri di supporto: #EAF1FF e #3D9BFF. Tutto il resto e' grigio neutro.
   • Ombre SOLO grigie. Nessun neon, bagliore, ombra colorata, gradiente
     arcobaleno. I gradienti ammessi mescolano due soli colori di marca.
   • Si animano SOLO transform e opacity. Mai width/height/top/left/margin.
   • Entrata: cubic-bezier(.16,1,.3,1) — Uscita: cubic-bezier(.4,0,.2,1).
   • Zero risorse esterne: font di sistema, nessun CDN, nessuna libreria.
   • prefers-reduced-motion: reduce annulla tutto (in fondo al file).
   • Mobile-first, mai scorrimento orizzontale.
   Prefisso di tutte le classi: .rr-
   ========================================================================= */

/* ==========================================================================
   1. TOKEN
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Colori di marca ---------------------------------------------------
     blu            #0A66FF  contrasto su bianco 4.83:1  -> testo OK (AA)
     blu-dark       #0A4FCC  contrasto su bianco 7.02:1  -> hover/link lunghi
     blu-light      #3D9BFF  contrasto basso -> SOLO decorazione, mai testo
     blu-pale       #EAF1FF  fondi tenui, superfici secondarie             */
  --rr-white: #FFFFFF;
  --rr-blue: #0A66FF;
  --rr-blue-dark: #0A4FCC;
  --rr-blue-light: #3D9BFF;
  --rr-blue-pale: #EAF1FF;

  /* Inchiostro neutro: usato SOLO per il velo sul video, il telaio del
     telefono e il piè di pagina. Non è un terzo colore di marca:
     non usarlo per bordi, testi decorativi o accenti. */
  --rr-ink: #0B1220;

  /* --- Grigi (testo, bordi, superfici) --- */
  --rr-grey-900: #111827; /* 16.1:1 su bianco */
  --rr-grey-800: #1F2937;
  --rr-grey-700: #374151; /* 10.3:1 — testo corrente */
  --rr-grey-600: #4B5563; /*  7.5:1 — testo secondario */
  --rr-grey-500: #6B7280; /*  4.8:1 — minimo consentito per testo */
  --rr-grey-400: #9CA3AF; /* solo icone decorative */
  --rr-grey-300: #D1D5DB;
  --rr-grey-200: #E5E7EB;
  --rr-grey-100: #F3F4F6;
  --rr-grey-050: #F8FAFC;

  --rr-text: var(--rr-grey-900);
  --rr-text-soft: var(--rr-grey-600);
  --rr-line: #E4E8EF;
  --rr-line-strong: var(--rr-grey-300);

  /* --- Colore dei collegamenti ------------------------------------------
     Non è un colore fisso ma una variabile, e il motivo è aritmetico:
         #0A66FF su bianco    = 4,83:1  passa
         #0A66FF su #EAF1FF   = 4,25:1  BOCCIATO
         #0A66FF su #F8FAFC   = 4,61:1  al pelo
     Metà del sito ha il fondo tenue (sezioni pallide, riquadri nota, indice
     dei documenti, testa di pagina, fondo sfumato delle schede in evidenza):
     lì un collegamento blu chiaro non arriva alla soglia AA. Invece di
     rincorrere il problema selettore per selettore — e di ricrearlo alla
     prima sezione nuova — la superficie dichiara il proprio colore di
     collegamento e l'eredità lo porta ovunque dentro.
     #0A4FCC è lo stesso blu, solo più scuro: nessun colore nuovo. */
  --rr-link: var(--rr-blue);
  --rr-link-strong: var(--rr-blue-dark);

  /* --- Spaziature: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 --- */
  --rr-space-4: 0.25rem;
  --rr-space-8: 0.5rem;
  --rr-space-12: 0.75rem;
  --rr-space-16: 1rem;
  --rr-space-24: 1.5rem;
  --rr-space-32: 2rem;
  --rr-space-48: 3rem;
  --rr-space-64: 4rem;
  --rr-space-96: 6rem;

  /* --- Raggi --- */
  --rr-radius-sm: 10px;
  --rr-radius-md: 14px;
  --rr-radius-lg: 18px;
  --rr-radius-xl: 22px;  /* raggio delle schede */
  --rr-radius-2xl: 28px;
  --rr-radius-pill: 999px;

  /* --- Ombre: solo grigio neutro, mai blu --- */
  --rr-shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --rr-shadow-2: 0 2px 4px rgba(16, 24, 40, .04), 0 8px 20px rgba(16, 24, 40, .07);
  --rr-shadow-3: 0 4px 8px rgba(16, 24, 40, .04), 0 18px 40px rgba(16, 24, 40, .10);
  --rr-shadow-4: 0 8px 16px rgba(16, 24, 40, .05), 0 34px 68px rgba(16, 24, 40, .14);

  /* --- Tipografia: font di sistema, nessun download --- */
  --rr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Scala fluida: nessuna media query serve per il testo */
  --rr-fs-100: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);   /* micro */
  --rr-fs-200: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);  /* piccolo */
  --rr-fs-300: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);      /* corpo */
  --rr-fs-400: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);      /* occhiello/lead */
  --rr-fs-500: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* titolo scheda */
  --rr-fs-600: clamp(1.5rem, 1.3rem + 1vw, 2rem);             /* h3 */
  --rr-fs-700: clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);      /* h2 */
  --rr-fs-800: clamp(2.25rem, 1.75rem + 2.4vw, 3.5rem);       /* h1 pagina */
  --rr-fs-900: clamp(2.4rem, 1.5rem + 4.4vw, 5rem);           /* display hero */

  --rr-lh-tight: 1.06;
  --rr-lh-snug: 1.2;
  --rr-lh-base: 1.65;
  --rr-tracking-tight: -0.022em;

  /* --- Movimento --- */
  --rr-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --rr-ease-exit: cubic-bezier(.4, 0, .2, 1);
  --rr-dur-1: 180ms;  /* micro interazioni */
  --rr-dur-2: 320ms;  /* cambi di stato */
  --rr-dur-3: 620ms;  /* rivelazioni */
  --rr-dur-4: 900ms;  /* hero */
  --rr-stagger-step: 70ms;

  /* --- La strada: segno grafico ricorrente (vedi paragrafo 22) -----------
     Una mezzeria tratteggiata: 7px di segno, 7px di vuoto.
     Le misure non sono a caso — sono ESATTAMENTE la meta' del tratteggio
     grande con cui la home apre le sue tappe (14/14, nel blocco <style> di
     index.html). Stessa cadenza, un'ottava sotto: il segno grande apre un
     capitolo, questo piccolo marca un'etichetta, e i due si leggono come la
     stessa strada vista da due distanze diverse. Se un giorno quel tratteggio
     grande sale in rr.css, queste due variabili sono il posto da cui derivarlo.

     Il colore NON e' scritto qui dentro: i due gradienti usano currentColor,
     cosi' la stessa riga funziona blu su bianco, grigia fra due paragrafi e
     azzurra sul fondo inchiostro, senza duplicare niente. */
  --rr-dash-len: 7px;
  --rr-dash-gap: 7px;
  --rr-dash-w: 2px;
  --rr-road-line: repeating-linear-gradient(90deg,
      currentColor 0, currentColor var(--rr-dash-len),
      transparent var(--rr-dash-len), transparent calc(var(--rr-dash-len) + var(--rr-dash-gap)));
  --rr-road-line-v: repeating-linear-gradient(180deg,
      currentColor 0, currentColor var(--rr-dash-len),
      transparent var(--rr-dash-len), transparent calc(var(--rr-dash-len) + var(--rr-dash-gap)));

  /* --- La piega ----------------------------------------------------------
     Quanto si inclina una scheda quando le passi sopra. Sotto il mezzo grado
     non si sente, sopra il grado sembra storta: 0,55 e' il punto in cui si
     legge come un gesto e non come un difetto di allineamento.
     rr.js riscrive questo valore sulla singola scheda per decidere DA CHE
     PARTE piega (dal lato da cui sei entrato). Senza JavaScript resta questo. */
  --rr-lean: -0.55deg;

  /* --- Struttura --- */
  --rr-header-h: clamp(64px, 7vw, 76px);
  --rr-header-squeeze: .82;   /* quanto si condensa l'intestazione */
  --rr-gutter: clamp(1rem, 4vw, 2rem);
  --rr-maxw: 1160px;
  --rr-measure: 68ch;         /* lunghezza di riga leggibile */
  --rr-z-header: 100;
  --rr-z-progress: 120;
  --rr-z-intro: 200;
}

/* ==========================================================================
   2. RESET MODERNO
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

body {
  min-height: 100svh;
  font-family: var(--rr-font);
  font-size: var(--rr-fs-300);
  line-height: var(--rr-lh-base);
  color: var(--rr-text);
  background-color: var(--rr-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;              /* mai scorrimento orizzontale */
  overflow-wrap: break-word;
  padding-top: var(--rr-header-h); /* compensa l'intestazione fissa */
}

/* Pagine che iniziano con l'hero a tutto schermo (solo la home). */
body.rr-body--flush { padding-top: 0; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

/* [hidden] deve vincere SEMPRE. Senza questa riga qualunque componente con
   un display dichiarato (per esempio .rr-row, che è flex) resterebbe a
   schermo anche con l'attributo hidden addosso: il filtro delle domande
   frequenti nasconde proprio elementi di quel tipo. */
[hidden] { display: none !important; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { padding: 0; list-style: none; }

a { color: var(--rr-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rr-link-strong); }

/* Le superfici tenui chiedono il blu scuro. Vale per tutto quello che ci sta
   dentro, schede comprese: una scheda bianca dentro una sezione pallida è
   comunque una zona in cui il blu chiaro sarebbe fuori norma appena il testo
   tocca il fondo colorato (succede nelle schede in evidenza, che sfumano in
   #EAF1FF proprio dove sta il piede con i collegamenti). */
.rr-pagehead,
.rr-section--pale,
.rr-section--grey,
.rr-note,
.rr-toc,
.rr-card--featured {
  --rr-link: var(--rr-blue-dark);
  --rr-link-strong: var(--rr-blue-dark);
}

/* Sul fondo inchiostro serve l'opposto: il blu chiaro (6,53:1 su #0B1220). */
.rr-section--ink,
.rr-hero--ink { --rr-link: var(--rr-blue-light); --rr-link-strong: #fff; }
.rr-card--invert { --rr-link: #fff; --rr-link-strong: #fff; }

/* Il separatore e' una mezzeria, non un filo. Vedi paragrafo 22. */
hr {
  border: 0;
  height: var(--rr-dash-w);
  color: var(--rr-line-strong);
  background-image: var(--rr-road-line);
  margin-block: var(--rr-space-48);
}

/* Ancore: non finire mai sotto l'intestazione fissa */
[id] { scroll-margin-top: calc(var(--rr-header-h) + var(--rr-space-24)); }

/* Focus da tastiera sempre visibile, mai rimosso */
:focus-visible {
  outline: 3px solid var(--rr-blue);
  outline-offset: 3px;
  border-radius: var(--rr-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--rr-blue); color: #fff; }

/* Senza JavaScript il sito resta leggibile: intestazione nel flusso. */
html:not(.rr-js) body { padding-top: 0; }
html:not(.rr-js) .rr-header { position: static; height: auto; pointer-events: auto; }
html:not(.rr-js) .rr-header__glass { position: absolute; }
html:not(.rr-js) .rr-header__bar { flex-wrap: wrap; padding-block: var(--rr-space-12); }
html:not(.rr-js) .rr-burger { display: none !important; }
html:not(.rr-js) .rr-hero { padding-top: var(--rr-space-48); }
html:not(.rr-js) .rr-intro { display: none; }
/* .is-over serve solo quando l'intestazione galleggia sull'hero scuro:
   senza JS torna vetro bianco con testo scuro, sempre leggibile. */
html:not(.rr-js) .rr-header.is-over .rr-header__glass { opacity: 1; }
html:not(.rr-js) .rr-header--light.is-over .rr-logo__word { color: var(--rr-grey-900); }
html:not(.rr-js) .rr-header--light.is-over .rr-nav__link { color: var(--rr-grey-700); }
html:not(.rr-js) .rr-header--light.is-over .rr-burger__box span { background: var(--rr-grey-900); }

/* Comandi che hanno senso solo con il JavaScript acceso — per esempio il campo
   che filtra le domande frequenti. Senza JS non filtrerebbero niente: meglio
   non mostrarli affatto che offrire un comando morto. Il contenuto che
   governano resta comunque tutto in pagina. */
html:not(.rr-js) .rr-jsonly { display: none; }

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: var(--rr-lh-tight);
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-grey-900);
  text-wrap: balance;
}
h5, h6 { font-weight: 700; line-height: var(--rr-lh-snug); }

h1 { font-size: var(--rr-fs-800); }
h2 { font-size: var(--rr-fs-700); }
h3 { font-size: var(--rr-fs-600); line-height: var(--rr-lh-snug); }
h4 { font-size: var(--rr-fs-500); line-height: var(--rr-lh-snug); font-weight: 700; }

strong, b { font-weight: 700; color: var(--rr-grey-900); }
small { font-size: var(--rr-fs-200); }

.rr-display {
  font-size: var(--rr-fs-900);
  font-weight: 800;
  line-height: var(--rr-lh-tight);
  letter-spacing: -0.03em;
}

/* Occhiello — MISURATO, non a occhio.
   Il blu #0A66FF su bianco fa 4,83:1 e passa. Ma l'occhiello vive quasi
   sempre in cima a una sezione, e le sezioni tenui hanno il fondo colorato:
       #0A66FF su #EAF1FF (.rr-section--pale) = 4,25:1  -> BOCCIATO
       #0A66FF su #F8FAFC (.rr-section--grey) = 4,61:1  -> al pelo
   E' testo di 12px: la soglia AA e' 4,5:1 secca. Con #0A4FCC — che e' lo
   stesso blu di marca, solo piu' scuro, gia' in tavolozza — diventa
   6,17:1 sul pallido e 6,99:1 sul bianco. Nessun colore nuovo entra. */
.rr-eyebrow {
  display: inline-block;
  font-size: var(--rr-fs-100);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rr-blue-dark);
  margin-bottom: var(--rr-space-12);
}

.rr-lead {
  font-size: var(--rr-fs-400);
  line-height: 1.55;
  color: var(--rr-grey-600);
  max-width: 60ch;
}

.rr-text-soft { color: var(--rr-text-soft); }
.rr-measure { max-width: var(--rr-measure); }
.rr-center { text-align: center; }
.rr-center .rr-lead,
.rr-center .rr-measure { margin-inline: auto; }
.rr-nowrap { white-space: nowrap; }

/* Testo visibile solo agli screen reader */
.rr-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salta al contenuto */
.rr-skip {
  position: fixed;
  top: var(--rr-space-8);
  left: var(--rr-space-8);
  z-index: 300;
  padding: var(--rr-space-12) var(--rr-space-16);
  background: var(--rr-blue);
  color: #fff;
  font-weight: 600;
  border-radius: var(--rr-radius-md);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--rr-space-16)));
  transition: transform var(--rr-dur-2) var(--rr-ease-enter);
}
.rr-skip:focus-visible { transform: none; color: #fff; }

/* ==========================================================================
   4. LAYOUT: CONTENITORI E SEZIONI
   ========================================================================== */
.rr-container {
  width: min(100% - (var(--rr-gutter) * 2), var(--rr-maxw));
  margin-inline: auto;
}
.rr-container--narrow { --rr-maxw: 46rem; }
.rr-container--wide { --rr-maxw: 1320px; }

.rr-section { padding-block: clamp(3rem, 7vw, 6rem); }
.rr-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.rr-section--pale { background: var(--rr-blue-pale); }
.rr-section--grey { background: var(--rr-grey-050); }
.rr-section--ink { background: var(--rr-ink); color: #fff; }
.rr-section--ink h1, .rr-section--ink h2,
.rr-section--ink h3, .rr-section--ink h4 { color: #fff; }
.rr-section--ink .rr-lead { color: rgba(255, 255, 255, .78); }
.rr-section--ink .rr-eyebrow { color: var(--rr-blue-light); }

.rr-section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.rr-section__head p { margin-top: var(--rr-space-16); }

/* Pila verticale con passo costante */
.rr-stack > * + * { margin-top: var(--rr-space-16); }
.rr-stack--lg > * + * { margin-top: var(--rr-space-32); }
.rr-stack--sm > * + * { margin-top: var(--rr-space-8); }

/* Fila che va a capo da sola */
.rr-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-12);
  align-items: center;
}
.rr-row--center { justify-content: center; }

/* ==========================================================================
   5. GRIGLIA RESPONSIVE — senza una sola media query
   ========================================================================== */
.rr-grid {
  display: grid;
  gap: var(--rr-gap, var(--rr-space-24));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rr-col, 17.5rem)), 1fr));
}
.rr-grid > * { min-width: 0; }        /* impedisce lo sfondamento orizzontale */
.rr-grid--wide { --rr-col: 26rem; }   /* 2 colonne su desktop */
.rr-grid--tight { --rr-col: 13rem; }  /* 4-5 colonne su desktop */

/* Testo + immagine affiancati */
.rr-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.rr-split > * { min-width: 0; }

@media (min-width: 56rem) {
  .rr-split--reverse > :first-child { order: 2; }
}

/* ==========================================================================
   6. INTESTAZIONE CON EFFETTO VETRO CHE SI CONDENSA
   --------------------------------------------------------------------------
   La condensazione usa SOLO transform: il pannello di vetro si comprime
   (scaleY) e il contenuto si alza della metà della compressione. L'altezza
   occupata non cambia mai: zero reflow, zero scatti.
   ========================================================================== */
.rr-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--rr-header-h);
  z-index: var(--rr-z-header);
  pointer-events: none;         /* i figli riattivano il puntatore */
}

.rr-header__glass {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 -1px 0 var(--rr-line);
  transition: transform var(--rr-dur-2) var(--rr-ease-enter),
              opacity var(--rr-dur-2) var(--rr-ease-exit);
}

.rr-header__bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--rr-space-16);
  pointer-events: auto;
  transition: transform var(--rr-dur-2) var(--rr-ease-enter);
}

/* Stato: pagina scorsa -> il vetro si condensa */
.rr-header.is-scrolled .rr-header__glass {
  transform: scaleY(var(--rr-header-squeeze));
  box-shadow: inset 0 -1px 0 var(--rr-line), var(--rr-shadow-2);
}
.rr-header.is-scrolled .rr-header__bar {
  transform: translateY(calc((var(--rr-header-squeeze) - 1) * var(--rr-header-h) / 2));
}
.rr-header.is-scrolled .rr-logo__mark { transform: scale(.92); }

/* Stato: sopra l'hero -> il vetro sparisce, l'hero arriva fino in cima.
   I testi restano scuri perché l'hero standard è CHIARO. */
.rr-header.is-over .rr-header__glass { opacity: 0; }

/* Solo in coppia con .rr-hero--ink: testi chiari sopra un hero scuro. */
.rr-header--light.is-over .rr-logo__word,
.rr-header--light.is-over .rr-nav__link { color: #fff; }
.rr-header--light.is-over .rr-nav__link::after { background: #fff; }
.rr-header--light.is-over .rr-burger__box span { background: #fff; }

/* Logo — non si modifica, non si ricolora, non si deforma.
   min-height: 48px perché è il collegamento alla home ed è il primo bersaglio
   della pagina: sotto i 400px di larghezza il marchio si rimpicciolisce a
   34px e senza questo il bersaglio scendeva a 42px. Il marchio resta identico,
   cresce solo l'area toccabile. */
.rr-logo {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  gap: var(--rr-space-12);
  text-decoration: none;
  color: var(--rr-grey-900);
  padding: var(--rr-space-4);
  margin-inline-start: calc(var(--rr-space-4) * -1);
  border-radius: var(--rr-radius-md);
}
.rr-logo__mark {
  width: clamp(34px, 3.2vw, 40px);
  height: auto;
  border-radius: 22%;
  transform-origin: center;
  transition: transform var(--rr-dur-2) var(--rr-ease-enter);
}
.rr-logo__word {
  font-size: var(--rr-fs-400);
  font-weight: 800;
  letter-spacing: -0.03em;
  transition: color var(--rr-dur-2) var(--rr-ease-exit);
}

/* Navigazione */
.rr-nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--rr-space-24);
}
.rr-nav__list {
  display: flex;
  align-items: center;
  gap: var(--rr-space-24);
}
.rr-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--rr-space-8);
  font-size: var(--rr-fs-200);
  font-weight: 600;
  color: var(--rr-grey-700);
  text-decoration: none;
  transition: color var(--rr-dur-1) var(--rr-ease-exit);
}
.rr-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--rr-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rr-dur-2) var(--rr-ease-enter);
}
.rr-nav__link:hover { color: var(--rr-blue); }
.rr-nav__link:hover::after,
.rr-nav__link:focus-visible::after,
.rr-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.rr-nav__link[aria-current="page"] { color: var(--rr-blue); }

/* Pulsante hamburger */
.rr-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-inline-end: calc(var(--rr-space-8) * -1);
  background: transparent;
  border: 0;
  border-radius: var(--rr-radius-md);
  cursor: pointer;
}
.rr-burger__box {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.rr-burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--rr-grey-900);
  transition: transform var(--rr-dur-2) var(--rr-ease-enter),
              opacity var(--rr-dur-1) var(--rr-ease-exit),
              background-color var(--rr-dur-2) var(--rr-ease-exit);
}
.rr-burger__box span:nth-child(1) { top: 0; }
.rr-burger__box span:nth-child(2) { top: 7px; }
.rr-burger__box span:nth-child(3) { top: 14px; }
.rr-burger[aria-expanded="true"] .rr-burger__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rr-burger[aria-expanded="true"] .rr-burger__box span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.rr-burger[aria-expanded="true"] .rr-burger__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Pannello mobile */
@media (max-width: 56.25rem) {
  html.rr-js .rr-burger { display: inline-flex; }

  html.rr-js .rr-nav {
    position: fixed;
    inset: var(--rr-header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rr-space-4);
    max-height: calc(100dvh - var(--rr-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--rr-space-12) var(--rr-gutter) var(--rr-space-24);
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: var(--rr-shadow-3);
    border-bottom: 1px solid var(--rr-line);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -14px, 0);
    transition: opacity var(--rr-dur-2) var(--rr-ease-exit),
                transform var(--rr-dur-2) var(--rr-ease-exit),
                visibility 0s linear var(--rr-dur-2);
  }
  html.rr-js .rr-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--rr-dur-2) var(--rr-ease-enter),
                transform var(--rr-dur-2) var(--rr-ease-enter),
                visibility 0s;
  }
  html.rr-js .rr-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  html.rr-js .rr-nav__link {
    display: block;
    padding: var(--rr-space-16) var(--rr-space-8);
    font-size: var(--rr-fs-300);
    color: var(--rr-grey-900);
    border-bottom: 1px solid var(--rr-line);
    min-height: 48px;
  }
  html.rr-js .rr-nav__link::after { display: none; }
  html.rr-js .rr-nav__cta { margin-top: var(--rr-space-16); width: 100%; }
  /* Sopra l'hero il pannello aperto resta bianco: testo scuro leggibile */
  html.rr-js .rr-header.is-over .rr-nav__link { color: var(--rr-grey-900); }
}

/* Barra di avanzamento della lettura (opzionale, solo transform) */
.rr-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: var(--rr-z-progress);
  background: var(--rr-blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ==========================================================================
   7. PULSANTI — bersaglio minimo 48px
   ========================================================================== */
.rr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rr-space-8);
  min-height: 48px;
  padding-inline: var(--rr-space-24);
  border: 1px solid transparent;
  border-radius: var(--rr-radius-pill);
  font-size: var(--rr-fs-300);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--rr-dur-2) var(--rr-ease-enter),
              background-color var(--rr-dur-1) var(--rr-ease-exit),
              border-color var(--rr-dur-1) var(--rr-ease-exit),
              color var(--rr-dur-1) var(--rr-ease-exit),
              box-shadow var(--rr-dur-2) var(--rr-ease-exit);
}
.rr-btn:active { transform: translateY(0) scale(.98); }

/* Primario.
   L'ombra interna in basso e' l'unico dettaglio "meccanico" del pulsante:
   un filo scuro sul bordo inferiore gli da' spessore, come il fianco di un
   tasto vero. E' grigio neutro (16,24,40), non blu: nessuna ombra colorata. */
.rr-btn--primary {
  background: var(--rr-blue);
  color: #fff;
  box-shadow: var(--rr-shadow-2), inset 0 -1.5px 0 rgba(16, 24, 40, .22);
}
.rr-btn--primary:hover { background: var(--rr-blue-dark); color: #fff; }

/* Secondario (contorno) */
.rr-btn--outline {
  background: var(--rr-white);
  color: var(--rr-grey-900);
  border-color: var(--rr-line-strong);
}
.rr-btn--outline:hover {
  color: var(--rr-blue-dark);
  border-color: var(--rr-blue);
  background: var(--rr-blue-pale);
}

/* Terziario (testo) — segue il colore di collegamento della superficie:
   è a tutti gli effetti un link, e sulle sezioni tenui il blu chiaro
   non arriverebbe alla soglia AA. */
.rr-btn--text {
  background: transparent;
  color: var(--rr-link);
  padding-inline: var(--rr-space-12);
  box-shadow: none;
}
.rr-btn--text:hover { color: var(--rr-blue-dark); background: var(--rr-blue-pale); }

/* Su fondo scuro / hero */
.rr-btn--ghost {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.rr-btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }

/* Misure e larghezze */
.rr-btn--lg { min-height: 56px; padding-inline: var(--rr-space-32); font-size: var(--rr-fs-400); }
.rr-btn--block { width: 100%; }

/* Stato "non ancora disponibile" — onesto, non finge un link.
   NIENTE opacity: un pulsante blu al 55% diventa testo bianco su lavanda,
   2,2:1 — illeggibile. Lo spegnimento si fa con i colori veri, che restano
   in tavolozza e restano leggibili (grigio 700 su grigio 100 = 9,4:1). */
.rr-btn[aria-disabled="true"] {
  pointer-events: none;
  background: var(--rr-grey-100);
  color: var(--rr-grey-700);
  border-color: var(--rr-line);
  box-shadow: none;
}

@media (hover: hover) {
  .rr-btn--primary:hover,
  .rr-btn--outline:hover,
  .rr-btn--ghost:hover { transform: translateY(-2px); }
  /* Il filo interno resta: se qui si scrivesse la sola ombra esterna, al
     passaggio del mouse il pulsante perderebbe lo spessore e si appiattirebbe. */
  .rr-btn--primary:hover { box-shadow: var(--rr-shadow-3), inset 0 -1.5px 0 rgba(16, 24, 40, .22); }
}

/* Pulsante store (testuale: non usiamo badge ufficiali che non possediamo) */
.rr-store {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-12);
}
.rr-store-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: var(--rr-space-8) var(--rr-space-24);
  border-radius: var(--rr-radius-md);
  background: var(--rr-ink);
  color: #fff;
  text-decoration: none;
  /* Filo chiaro sul bordo superiore: su un fondo inchiostro e' il modo in cui
     si legge un pezzo di metallo lavorato. Bianco trasparente, non un colore. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform var(--rr-dur-2) var(--rr-ease-enter),
              box-shadow var(--rr-dur-2) var(--rr-ease-exit);
}
.rr-store-btn small {
  display: block;
  font-size: var(--rr-fs-100);
  font-weight: 500;
  opacity: .72;
  line-height: 1.3;
}
.rr-store-btn strong { color: #fff; font-size: var(--rr-fs-300); line-height: 1.25; }

/* "Presto su App Store / Google Play" — non e' ancora un link.
   Era opacity: .5 sull'intero elemento: il browser compone TUTTO il gruppo
   sopra la pagina bianca, quindi il testo bianco diventava bianco davvero
   e il fondo scuro diventava grigio medio. Misurato: 3,53:1 sul nome dello
   store e 2,62:1 sul "Presto su". Sotto la soglia AA su entrambi, proprio
   nel punto della pagina che la gente guarda per primo.
   Adesso lo stato spento e' una pillola grigia con testo grigio scuro:
   9,4:1 e 6,9:1, e si legge a colpo d'occhio che lo store non c'e' ancora. */
.rr-store-btn[aria-disabled="true"] {
  pointer-events: none;
  background: var(--rr-grey-100);
  border: 1px solid var(--rr-line);
  color: var(--rr-grey-600);
  box-shadow: none;
}
.rr-store-btn[aria-disabled="true"] strong { color: var(--rr-grey-700); }
.rr-store-btn[aria-disabled="true"] small { color: var(--rr-grey-600); opacity: 1; }

@media (hover: hover) {
  .rr-store-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--rr-shadow-3), inset 0 1px 0 rgba(255, 255, 255, .12);
    color: #fff;
  }
}

/* ==========================================================================
   8. ETICHETTE, PILLOLE, NOTE
   ========================================================================== */
.rr-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-space-8);
  padding: var(--rr-space-8) var(--rr-space-16);
  border-radius: var(--rr-radius-pill);
  background: var(--rr-blue-pale);
  color: var(--rr-blue-dark);
  font-size: var(--rr-fs-200);
  font-weight: 600;
  line-height: 1.2;
}
.rr-pill--outline { background: transparent; border: 1px solid var(--rr-line-strong); color: var(--rr-grey-700); }
.rr-pill--solid { background: var(--rr-blue); color: #fff; }
.rr-pill--light { background: rgba(255, 255, 255, .16); color: #fff; }

.rr-note {
  padding: var(--rr-space-24);
  border-radius: var(--rr-radius-lg);
  background: var(--rr-blue-pale);
  border-left: 3px solid var(--rr-blue);
  color: var(--rr-grey-700);
}
.rr-note strong { color: var(--rr-grey-900); }

/* Elenco con spunta disegnata in CSS (nessuna icona esterna) */
.rr-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--rr-grey-700);
}
.rr-list li + li { margin-top: var(--rr-space-12); }
.rr-list li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.5em;
  width: 0.42rem;
  height: 0.78rem;
  border: solid var(--rr-blue);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rr-list--muted li::before { border-color: var(--rr-grey-400); }

/* ==========================================================================
   9. LA SCHEDA — tre varianti (base / con immagine / in evidenza)
   --------------------------------------------------------------------------
   Presenza fisica: bordo sottile, ombra grigia morbida, angoli generosi.
   L'ombra al passaggio del mouse vive su ::after e si accende in opacity:
   niente animazione di box-shadow, niente scatti.
   ========================================================================== */
.rr-card {
  position: relative;
  isolation: isolate;                     /* tiene ::after dentro la scheda */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--rr-white);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius-xl);
  box-shadow: var(--rr-shadow-1);
  color: var(--rr-grey-700);
  /* Il perno della piega sta in BASSO, non al centro: e' la differenza fra
     una moto che si corica sull'appoggio e un quadro appeso storto. Con
     l'origine al centro lo stesso mezzo grado sembra un errore di
     allineamento; con l'origine sul bordo inferiore diventa un gesto. */
  transform-origin: 50% 100%;
  transition: transform var(--rr-dur-3) var(--rr-ease-enter);
}
.rr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--rr-shadow-3), inset 0 0 0 1px rgba(10, 102, 255, .30);
  opacity: 0;
  transition: opacity var(--rr-dur-3) var(--rr-ease-enter);
}

.rr-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--rr-space-16);
  border-radius: var(--rr-radius-md);
  background: var(--rr-blue-pale);
  color: var(--rr-blue);
  flex: 0 0 auto;
}
.rr-card__icon svg { width: 24px; height: 24px; }

/* Stesso blu scuro di .rr-eyebrow: i due occhielli si vedono spesso nella
   stessa schermata (uno sulla sezione, uno sulla scheda) e devono essere
   lo stesso colore. */
.rr-card__eyebrow {
  font-size: var(--rr-fs-100);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rr-blue-dark);
  margin-bottom: var(--rr-space-8);
}
.rr-card__title {
  font-size: var(--rr-fs-500);
  font-weight: 700;
  line-height: var(--rr-lh-snug);
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-grey-900);
  margin-bottom: var(--rr-space-12);
}
.rr-card__text { color: var(--rr-grey-600); }
.rr-card__text + .rr-card__text { margin-top: var(--rr-space-12); }
.rr-card__foot {
  margin-top: auto;
  padding-top: var(--rr-space-24);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rr-space-12);
}

/* --- 9.b Variante CON IMMAGINE --------------------------------------------
   Il ritaglio vive su .rr-card__media (non sulla scheda), così l'ombra al
   passaggio del mouse non viene tagliata.                                   */
.rr-card--media { padding: 0; }
.rr-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--rr-media-ratio, 16 / 10);
  background: var(--rr-blue-pale);
  border-radius: calc(var(--rr-radius-xl) - 1px) calc(var(--rr-radius-xl) - 1px) 0 0;
}
.rr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rr-media-pos, center);
  transform: scale(1.001);          /* evita bordi seghettati durante lo zoom */
  transition: transform 700ms var(--rr-ease-enter);
}
.rr-card__media--contain img { object-fit: contain; }
.rr-card__media--tall { --rr-media-ratio: 4 / 5; }
.rr-card__media--phone { --rr-media-ratio: 460 / 1024; }
.rr-card__media--top { --rr-media-pos: top center; }
.rr-card__body { padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; flex: 1; }

/* --- 9.c Variante IN EVIDENZA --------------------------------------------- */
.rr-card--featured {
  border-color: rgba(10, 102, 255, .28);
  box-shadow: var(--rr-shadow-2);
  background: linear-gradient(180deg, var(--rr-white) 0%, var(--rr-white) 58%, var(--rr-blue-pale) 100%);
}
.rr-card--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--rr-blue);
  border-radius: var(--rr-radius-xl) var(--rr-radius-xl) 0 0;
}
.rr-card--featured .rr-card__title { color: var(--rr-blue-dark); }
.rr-card__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--rr-space-4) var(--rr-space-16);
  border-radius: var(--rr-radius-pill);
  background: var(--rr-blue);
  color: #fff;
  font-size: var(--rr-fs-100);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: var(--rr-shadow-2);
}

/* --- 9.d Superficie invertita (pannelli invito all'azione) ----------------
   Il testo qui è BIANCO PIENO, non bianco al esempio 84%: su #0A66FF il
   bianco pieno fa 4,83:1 ed è già il minimo sindacale; al 84% scende a
   3,84:1 e sotto la soglia AA. Su fondo scuro l'abitudine di smorzare il
   testo secondario con l'opacità non regge, perché il fondo non è scuro
   abbastanza — è un blu di media luminosità. */
.rr-card--invert {
  background: var(--rr-blue);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--rr-shadow-3);
}
.rr-card--invert .rr-card__title,
.rr-card--invert .rr-card__eyebrow,
.rr-card--invert .rr-card__text { color: #fff; }
.rr-card--invert::after { box-shadow: var(--rr-shadow-4), inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* --- 9.e Scheda cliccabile ------------------------------------------------ */
.rr-card--link { text-decoration: none; color: inherit; }
.rr-card--link:hover { color: inherit; }

/* --- 9.f Reazione al puntatore: la piega -------------------------------
   Sollevamento di 6px E inclinazione di poco piu' di mezzo grado, insieme,
   sui 620ms della curva d'entrata: la scheda si corica e si assesta, come
   una moto che entra in curva. Non e' un effetto in piu' appiccicato sopra
   il sollevamento — e' lo stesso movimento.

   DA CHE PARTE piega lo decide rr.js: dal lato da cui il puntatore e'
   entrato, perche' e' li' che stai guardando. Senza JavaScript --rr-lean
   resta il valore di riposo dichiarato nei token e la piega c'e' lo stesso,
   sempre nella stessa direzione: nessuna scheda resta piatta.

   Il perno e' sul bordo inferiore (vedi .rr-card, paragrafo 9). */
@media (hover: hover) {
  .rr-card:hover { transform: translate3d(0, -6px, 0) rotate(var(--rr-lean)); }
  .rr-card:hover::after { opacity: 1; }
  .rr-card--media:hover .rr-card__media img { transform: scale(1.05); }
}
/* Da tastiera la piega e' quella di riposo: non c'e' un puntatore da cui
   dedurre il lato, e inventarne uno diverso a ogni Tab sarebbe rumore. */
.rr-card:focus-within { transform: translate3d(0, -6px, 0) rotate(var(--rr-lean)); }
.rr-card:focus-within::after { opacity: 1; }

/* ==========================================================================
   10. MEDIA: telefono, screenshot, figure
   ========================================================================== */
.rr-phone {
  width: min(100%, var(--rr-phone-w, 17rem));
  margin-inline: auto;
  padding: .5rem;
  background: var(--rr-ink);
  border-radius: 2.25rem;
  box-shadow: var(--rr-shadow-3);
}
.rr-phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 1.85rem;
  background: #000;
  aspect-ratio: 460 / 1024;
}
.rr-phone__screen img { width: 100%; height: 100%; object-fit: cover; }
.rr-phone--wide { --rr-phone-w: 34rem; }
.rr-phone--wide .rr-phone__screen { aspect-ratio: 1024 / 460; }

.rr-shot {
  border-radius: var(--rr-radius-xl);
  overflow: hidden;
  box-shadow: var(--rr-shadow-3);
  background: var(--rr-grey-100);
}
.rr-shot img { width: 100%; }

.rr-figure { margin: 0; }
.rr-figure figcaption {
  margin-top: var(--rr-space-12);
  font-size: var(--rr-fs-200);
  color: var(--rr-grey-500);
}

/* --- Duotone di marca -----------------------------------------------------
   Riporta dentro la palette una fotografia che fuori palette non ci sta
   (per esempio la ruota viola/verde acqua). Grigi + un solo blu #0A66FF:
   nessun colore nuovo entra nel sito.
   Uso: <div class="rr-card__media rr-duotone"> ... </div>              */
.rr-duotone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.rr-duotone img,
.rr-duotone video { filter: grayscale(1) contrast(1.06) brightness(1.02); }
.rr-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--rr-blue);
  mix-blend-mode: color;
  opacity: .6;
}
.rr-duotone--soft::after { opacity: .34; }
.rr-duotone--grey::after { display: none; }
.rr-duotone--grey img,
.rr-duotone--grey video { filter: grayscale(1) contrast(1.04); }

/* ==========================================================================
   11. HERO E INTRO (solo home)
   ========================================================================== */
/* L'hero è CHIARO: il video di sfondo è una ripresa in studio su fondo
   bianco. Testi scuri su velo bianco = contrasto garantito sempre, anche
   nell'attimo prima che il video parta. */
.rr-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: center;
  min-height: min(92vh, 900px);
  min-height: min(92svh, 900px);
  padding-block: calc(var(--rr-header-h) + clamp(3rem, 8vw, 6rem)) clamp(3rem, 8vw, 5rem);
  background: var(--rr-white);
}
.rr-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--rr-grey-100);
}
.rr-hero__media > img,
.rr-hero__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rr-hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--rr-dur-4) var(--rr-ease-enter);
}
.rr-hero__video.is-ready { opacity: 1; }

/* Velo bianco: schiarisce da sinistra (dove passa la ruota) verso destra. */
.rr-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .80) 44%, rgba(255, 255, 255, .42) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .60) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .55) 100%);
}
.rr-hero__title { max-width: 16ch; margin-bottom: clamp(1rem, 2.4vw, 1.5rem); }
.rr-hero__lead { max-width: 46ch; font-size: var(--rr-fs-400); color: var(--rr-grey-600); }
.rr-hero__actions { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.rr-hero__meta {
  margin-top: clamp(2rem, 6vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-12) var(--rr-space-24);
  font-size: var(--rr-fs-200);
  color: var(--rr-grey-600);
}

/* Variante scura, se un giorno servisse un hero su fondo inchiostro.
   Va sempre in coppia con <header class="rr-header rr-header--light"> */
.rr-hero--ink { background: var(--rr-ink); }
.rr-hero--ink h1, .rr-hero--ink h2 { color: #fff; }
.rr-hero--ink .rr-hero__lead,
.rr-hero--ink .rr-hero__meta,
.rr-hero--ink p { color: rgba(255, 255, 255, .82); }
.rr-hero--ink .rr-hero__scrim {
  background: linear-gradient(180deg, rgba(11, 18, 32, .78) 0%, rgba(11, 18, 32, .52) 45%, rgba(11, 18, 32, .88) 100%);
}

/* Righe del titolo che salgono da sotto una maschera */
.rr-lift { display: block; overflow: hidden; }
.rr-lift > span { display: block; }
html.rr-js .rr-lift > span {
  transform: translateY(105%);
  animation: rr-lift-in var(--rr-dur-4) var(--rr-ease-enter) forwards;
  animation-delay: calc(var(--rr-intro-delay, .45s) + var(--i, 0) * 90ms);
}
@keyframes rr-lift-in { to { transform: translateY(0); } }

/* Entrata generica al caricamento (sopra la piega, senza scroll) */
html.rr-js .rr-enter {
  opacity: 0;
  animation: rr-enter-up var(--rr-dur-4) var(--rr-ease-enter) forwards;
  animation-delay: calc(var(--rr-intro-delay, .45s) + var(--i, 0) * 90ms);
}
@keyframes rr-enter-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}

/* Sipario iniziale: brevissimo, solo home. Sparisce da solo anche senza JS. */
.rr-intro {
  position: fixed;
  inset: 0;
  z-index: var(--rr-z-intro);
  display: grid;
  place-items: center;
  background: var(--rr-white);
  animation: rr-intro-out 700ms var(--rr-ease-exit) 620ms forwards;
}
.rr-intro__mark {
  width: clamp(84px, 18vw, 120px);
  height: auto;
  border-radius: 22%;
  box-shadow: var(--rr-shadow-3);
  animation: rr-intro-mark 900ms var(--rr-ease-enter) both;
}
@keyframes rr-intro-mark {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rr-intro-out {
  to { opacity: 0; transform: scale(1.04); visibility: hidden; }
}

/* Indicatore di scorrimento */
.rr-scrollcue {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  width: 26px;
  height: 42px;
  border: 2px solid var(--rr-grey-300);
  border-radius: var(--rr-radius-pill);
  transform: translateX(-50%);
}
.rr-scrollcue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--rr-blue);
  animation: rr-scrollcue 1.9s var(--rr-ease-exit) infinite;
}
.rr-hero--ink .rr-scrollcue { border-color: rgba(255, 255, 255, .55); }
.rr-hero--ink .rr-scrollcue::after { background: #fff; }
@keyframes rr-scrollcue {
  0% { transform: translateY(0); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* ==========================================================================
   12. TESTA DI PAGINA (pagine interne)
   ========================================================================== */
.rr-pagehead {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
  background: linear-gradient(180deg, var(--rr-blue-pale) 0%, var(--rr-white) 100%);
  border-bottom: 1px solid var(--rr-line);
}
.rr-pagehead h1 { max-width: 20ch; }
.rr-pagehead .rr-lead { margin-top: var(--rr-space-16); }

/* Briciole di pane.
   Il colore era --rr-grey-500: su bianco fa 4,83:1, ma qui il fondo NON e'
   bianco — la testa di pagina parte da #EAF1FF, e li' scende a 4,26:1.
   Con --rr-grey-600 fa 6,67:1 sul pallido. Il "/" resta piu' chiaro:
   e' un separatore, non testo da leggere.
   L'altezza: erano 23px di bersaglio. Con 6px sopra e sotto arrivano a 35px,
   che su una briciola secondaria e' la misura giusta — 48px qui farebbero
   una barra di navigazione, non una briciola. */
.rr-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rr-space-8);
  font-size: var(--rr-fs-200);
  color: var(--rr-grey-600);
  margin-bottom: var(--rr-space-12);
}
.rr-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--rr-space-4);
  margin-inline-start: calc(var(--rr-space-4) * -1);
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.rr-crumbs a:hover { text-decoration: underline; }
.rr-crumbs li + li::before { content: "/"; margin-right: var(--rr-space-8); color: var(--rr-grey-400); }
.rr-crumbs li { display: flex; align-items: center; min-height: 32px; }

/* ==========================================================================
   13. PASSI NUMERATI (tutorial / istruzioni)
   ========================================================================== */
.rr-step { display: flex; gap: var(--rr-space-16); }
.rr-step__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rr-radius-pill);
  background: var(--rr-blue);
  color: #fff;
  font-weight: 800;
  font-size: var(--rr-fs-200);
  line-height: 1;
}
.rr-step__body h3 { font-size: var(--rr-fs-500); margin-bottom: var(--rr-space-8); }
.rr-step__body p { color: var(--rr-grey-600); }

/* ==========================================================================
   14. DOMANDE FREQUENTI — <details>, funziona anche senza JavaScript
   ========================================================================== */
.rr-faq { display: grid; gap: var(--rr-space-12); }
.rr-faq__item {
  background: var(--rr-white);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius-lg);
  box-shadow: var(--rr-shadow-1);
  overflow: hidden;
}
.rr-faq__item[open] { border-color: rgba(10, 102, 255, .3); }
.rr-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rr-space-16);
  min-height: 56px;
  padding: var(--rr-space-16) var(--rr-space-24);
  font-weight: 700;
  color: var(--rr-grey-900);
  cursor: pointer;
  list-style: none;
}
.rr-faq__q::-webkit-details-marker { display: none; }
.rr-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  border: solid var(--rr-blue);
  border-width: 0 2px 2px 0;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--rr-dur-2) var(--rr-ease-enter);
}
.rr-faq__item[open] .rr-faq__q::after { transform: translateY(10%) rotate(-135deg); }
.rr-faq__a { padding: 0 var(--rr-space-24) var(--rr-space-24); color: var(--rr-grey-600); }
.rr-faq__item[open] .rr-faq__a { animation: rr-enter-up var(--rr-dur-3) var(--rr-ease-enter) both; }

/* ==========================================================================
   15. TESTI LEGALI (privacy, termini) — pensati anche per la stampa
   ========================================================================== */
.rr-legal {
  max-width: 46rem;
  margin-inline: auto;
  color: var(--rr-grey-700);
  font-size: var(--rr-fs-300);
  line-height: 1.75;
}
.rr-legal h2 {
  font-size: var(--rr-fs-600);
  margin-top: var(--rr-space-48);
  margin-bottom: var(--rr-space-16);
  scroll-margin-top: calc(var(--rr-header-h) + var(--rr-space-24));
}
.rr-legal h3 {
  font-size: var(--rr-fs-500);
  margin-top: var(--rr-space-32);
  margin-bottom: var(--rr-space-12);
}
.rr-legal p + p,
.rr-legal ul, .rr-legal ol { margin-top: var(--rr-space-16); }
.rr-legal ul li,
.rr-legal ol li { position: relative; padding-left: 1.5rem; }
.rr-legal ul li + li,
.rr-legal ol li + li { margin-top: var(--rr-space-8); }
.rr-legal ul li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .72em;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--rr-blue);
}
.rr-legal ol { counter-reset: rr-ol; }
.rr-legal ol li { counter-increment: rr-ol; }
.rr-legal ol li::before {
  content: counter(rr-ol) ".";
  position: absolute;
  left: 0;
  color: var(--rr-blue);
  font-weight: 700;
}
.rr-legal__updated {
  display: inline-block;
  margin-bottom: var(--rr-space-32);
  padding: var(--rr-space-8) var(--rr-space-16);
  border-radius: var(--rr-radius-pill);
  background: var(--rr-grey-100);
  border: 1px solid var(--rr-line);
  font-size: var(--rr-fs-200);
  font-weight: 600;
  color: var(--rr-grey-600);
}

/* Indice interno del documento */
.rr-toc {
  padding: var(--rr-space-24);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius-lg);
  background: var(--rr-grey-050);
}
.rr-toc h2 { font-size: var(--rr-fs-400); margin: 0 0 var(--rr-space-12); }
.rr-toc li + li { margin-top: var(--rr-space-8); }
.rr-toc a { font-weight: 600; text-decoration: none; }
.rr-toc a:hover { text-decoration: underline; }

/* --- Documento a due colonne: indice appiccicoso + testo -------------------
   Sotto i 62rem l'indice torna un normale blocco sopra al testo: su un
   telefono una colonna laterale appiccicosa ruberebbe solo schermo.
   L'indice funziona anche senza JavaScript: sono collegamenti ad ancora.  */
.rr-doc { display: block; }
.rr-doc__aside { margin-bottom: var(--rr-space-32); }

/* Misura di riga 65-75 caratteri: piu' stretta del massimo di .rr-legal.
   Due classi (0,2,0) cosi' vince sull'ordine del foglio, non per posizione. */
.rr-legal.rr-doc__body { max-width: 70ch; }

@media (min-width: 62rem) {
  /* a fianco dell'indice il testo parte da sinistra, non centrato */
  .rr-legal.rr-doc__body { margin-inline: 0; }
  .rr-doc {
    display: grid;
    grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .rr-doc__aside {
    position: sticky;
    top: calc(var(--rr-header-h) + var(--rr-space-24));
    margin-bottom: 0;
    max-height: calc(100svh - var(--rr-header-h) - var(--rr-space-48));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .rr-toc__link { padding: var(--rr-space-8); }
}

/* Voci dell'indice: il binario e' una mezzeria verticale — la strada del
   documento — e il segnalino blu, pieno, dice a che punto sei.
   Tratteggiato quello che devi ancora leggere, continuo dove sei adesso:
   e' la stessa distinzione che fa la segnaletica vera.
   Il segnalino si accende in transform+opacity, mai in misure. */
.rr-toc__list { position: relative; padding-left: var(--rr-space-16); }
.rr-toc__list::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3rem;
  bottom: .3rem;
  width: var(--rr-dash-w);
  color: var(--rr-line-strong);
  background-image: var(--rr-road-line-v);
}
.rr-toc__item { position: relative; }
.rr-toc__item + .rr-toc__item { margin-top: var(--rr-space-4); }
.rr-toc__link {
  display: block;
  /* Fuori dal desktop l'indice e' un blocco e si tocca col dito:
     bersaglio alto ~46px. Sul desktop torna denso (vedi query sotto). */
  padding: var(--rr-space-12) var(--rr-space-8);
  border-radius: var(--rr-radius-sm);
  color: var(--rr-grey-600);
  font-size: var(--rr-fs-200);
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--rr-dur-2) var(--rr-ease-exit);
}
.rr-toc__link:hover { color: var(--rr-grey-900); text-decoration: none; }
.rr-toc__link::before {
  content: "";
  position: absolute;
  left: calc(var(--rr-space-16) * -1);
  top: .2rem;
  bottom: .2rem;
  width: 2px;
  border-radius: 2px;
  background: var(--rr-blue);
  opacity: 0;
  transform: scaleY(.15);
  transition: transform var(--rr-dur-3) var(--rr-ease-enter),
              opacity var(--rr-dur-2) var(--rr-ease-exit);
}
.rr-toc__link[aria-current] { color: var(--rr-blue-dark); }
.rr-toc__link[aria-current]::before { opacity: 1; transform: scaleY(1); }

/* ==========================================================================
   16. CAMPI MODULO (disponibili se in futuro arriva un backend)
   ========================================================================== */
.rr-field { display: block; }
.rr-field + .rr-field { margin-top: var(--rr-space-16); }
.rr-label {
  display: block;
  margin-bottom: var(--rr-space-8);
  font-weight: 600;
  font-size: var(--rr-fs-200);
  color: var(--rr-grey-800);
}
.rr-input,
.rr-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--rr-space-12) var(--rr-space-16);
  background: var(--rr-white);
  border: 1.5px solid var(--rr-line-strong);
  border-radius: var(--rr-radius-md);
  color: var(--rr-grey-900);
  transition: border-color var(--rr-dur-1) var(--rr-ease-exit),
              box-shadow var(--rr-dur-1) var(--rr-ease-exit);
}
.rr-textarea { min-height: 8.5rem; resize: vertical; }
.rr-input:focus,
.rr-textarea:focus {
  outline: none;
  border-color: var(--rr-blue);
  box-shadow: 0 0 0 3px rgba(10, 102, 255, .18);
}
.rr-help { margin-top: var(--rr-space-8); font-size: var(--rr-fs-200); color: var(--rr-grey-500); }

/* ==========================================================================
   17. PIÈ DI PAGINA
   ========================================================================== */
.rr-footer {
  background: var(--rr-ink);
  color: rgba(255, 255, 255, .72);
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--rr-space-24);
  margin-top: auto;
}
.rr-footer__grid {
  display: grid;
  gap: var(--rr-space-32);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: var(--rr-space-32);
}
.rr-footer__brand { max-width: 30ch; }
.rr-footer__brand .rr-logo { color: #fff; }
.rr-footer__brand p { margin-top: var(--rr-space-12); font-size: var(--rr-fs-200); }
.rr-footer h2,
.rr-footer h3 {
  color: #fff;
  font-size: var(--rr-fs-200);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--rr-space-16);
}
/* I collegamenti del piè di pagina sono una colonna di navigazione, non
   collegamenti dentro un discorso: col dito vanno presi al primo colpo.
   Erano alti 24px con 12px di spazio = 36px di passo. Adesso, dove si tocca,
   sono 44px alti con 4px di spazio: 48px di passo esatti.
   Col mouse tornano compatti: 48px di riga in un piè di pagina da scrivania
   sarebbero un elenco spaziato, non un piè di pagina. */
.rr-footer__links li + li { margin-top: var(--rr-space-4); }
.rr-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  font-size: var(--rr-fs-200);
  transition: color var(--rr-dur-1) var(--rr-ease-exit);
}
.rr-footer__links a:hover { color: #fff; text-decoration: underline; }

@media (hover: hover) and (pointer: fine) {
  .rr-footer__links li + li { margin-top: var(--rr-space-12); }
  .rr-footer__links a { min-height: 24px; }
}
.rr-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-12) var(--rr-space-24);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--rr-space-24);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--rr-fs-100);
  color: rgba(255, 255, 255, .6);
}
.rr-footer__bottom a { color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   18. RIVELAZIONE ALLO SCORRIMENTO
   --------------------------------------------------------------------------
   Le classi nascondono SOLO se il JavaScript è partito (html.rr-js): senza
   JS il contenuto resta visibile. rr.js aggiunge .is-visible e imposta --i
   sui figli di .rr-stagger per la cascata.
   ========================================================================== */
/* IMPORTANTE — perché lo stato nascosto usa :not(.is-visible)
   Se la classe rivelata imponesse "transform: none", vincerebbe per
   specificità su .rr-card:hover e le schede non si alzerebbero più al
   passaggio del mouse. Mettendo transform SOLO nello stato nascosto, a
   rivelazione avvenuta l'elemento non ha alcuna trasformazione imposta e
   ogni componente torna padrone del proprio hover. */
html.rr-js .rr-reveal,
html.rr-js .rr-stagger > * {
  /* Stesso perno delle schede: quello che entra si RADDRIZZA, non ruota su
     se stesso. E' la coda del movimento di una moto che esce dalla curva. */
  transform-origin: 50% 100%;
}
html.rr-js .rr-reveal {
  transition: opacity var(--rr-dur-3) var(--rr-ease-enter),
              transform var(--rr-dur-3) var(--rr-ease-enter);
}
html.rr-js .rr-reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 24px, 0) rotate(var(--rr-bank, -.4deg));
  will-change: opacity, transform;
}
/* --- Rivelazioni laterali: SOLO dove c'è davvero un affiancamento ---------
   .rr-split diventa una colonna sola sotto i 48rem di finestra. In colonna
   singola il blocco occupa tutta la larghezza utile: farlo entrare da destra
   significa farlo partire 28px FUORI dal bordo. Non produce scorrimento
   (overflow-x: clip lo impedisce) ma per tutta la durata dell'animazione il
   blocco arriva tagliato — misurato a 320px: 12px di immagine oltre il bordo.
   Sotto la soglia, quindi, entrano dal basso come tutto il resto: stesso
   movimento, stessa curva, nessun taglio.
   (Era già stato notato su contatti.html e aggirato a mano su quella sola
   pagina; il posto giusto per risolverlo è qui, una volta per tutte.) */
html.rr-js .rr-reveal--left:not(.is-visible),
html.rr-js .rr-reveal--right:not(.is-visible) { transform: translate3d(0, 24px, 0) rotate(var(--rr-bank, -.4deg)); }

@media (min-width: 48rem) {
  html.rr-js .rr-reveal--left:not(.is-visible) { transform: translate3d(-28px, 0, 0) rotate(-.4deg); }
  html.rr-js .rr-reveal--right:not(.is-visible) { transform: translate3d(28px, 0, 0) rotate(.4deg); }
}

html.rr-js .rr-reveal--scale:not(.is-visible) { transform: translate3d(0, 18px, 0) scale(.96); }
html.rr-js .rr-reveal--fade:not(.is-visible) { transform: none; }

/* --- Il ritmo: le sezioni non entrano tutte allo stesso modo -------------
   Una pagina in cui ogni blocco sale dritto dal basso e' una pagina che
   scorre, non un percorso. Qui le sezioni si alternano — una banca a
   sinistra, la successiva a destra — come i tornanti di una salita.

   --rr-bank e' l'inclinazione d'ingresso della sezione. La ereditano le
   rivelazioni semplici e le cascate .rr-stagger. NON la usano, sopra i 48rem,
   --left e --right: quelli hanno gia' una direzione loro e bancano con
   QUELLA, perche' un blocco che arriva da sinistra e si inclina a destra e'
   un movimento che si contraddice. Sotto i 48rem la deriva laterale non c'e'
   piu' (vedi sopra), quindi anche loro tornano a seguire il ritmo della
   sezione: e' esattamente quello che fa il var(--rr-bank, ...) qui sopra.

   La deriva laterale (14px) c'e' solo sopra i 48rem, come per --left e
   --right e per lo stesso identico motivo scritto qui sopra: in colonna
   singola il blocco e' largo quanto lo schermo e partirebbe fuori dal bordo.
   La rotazione invece resta sempre: su un blocco alto 800px mezzo grado
   sposta gli angoli di meno di 3px, dentro il margine a qualsiasi larghezza. */
html.rr-js .rr-section:nth-of-type(even) { --rr-bank: .4deg; }
html.rr-js .rr-section:nth-of-type(odd) { --rr-bank: -.4deg; }

@media (min-width: 48rem) {
  html.rr-js .rr-section:nth-of-type(even) .rr-reveal:not(.rr-reveal--left):not(.rr-reveal--right):not(.rr-reveal--scale):not(.rr-reveal--fade):not(.is-visible) {
    transform: translate3d(14px, 24px, 0) rotate(.4deg);
  }
  html.rr-js .rr-section:nth-of-type(odd) .rr-reveal:not(.rr-reveal--left):not(.rr-reveal--right):not(.rr-reveal--scale):not(.rr-reveal--fade):not(.is-visible) {
    transform: translate3d(-14px, 24px, 0) rotate(-.4deg);
  }
}

/* La cascata: rr.js scrive --i su ogni figlio e lo rimuove a rivelazione
   finita, così l'attesa non si trascina dietro sugli hover successivi. */
html.rr-js .rr-stagger > * {
  transition: opacity var(--rr-dur-3) var(--rr-ease-enter) calc(var(--i, 0) * var(--rr-stagger-step)),
              transform var(--rr-dur-3) var(--rr-ease-enter) calc(var(--i, 0) * var(--rr-stagger-step));
}
html.rr-js .rr-stagger:not(.is-visible) > * {
  opacity: 0;
  /* Le schede arrivano gia' coricate e si raddrizzano una dopo l'altra:
     e' lo stesso gesto della piega al passaggio del mouse, visto in coda.
     A rivelazione avvenuta la trasformazione sparisce del tutto (vedi la
     nota in cima al paragrafo) e la scheda torna padrona del proprio hover. */
  transform: translate3d(0, 24px, 0) rotate(var(--rr-bank, -.4deg));
}

/* ==========================================================================
   19. MOVIMENTO RIDOTTO — annulla tutto, senza eccezioni
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }

  html.rr-js .rr-reveal,
  html.rr-js .rr-reveal:not(.is-visible),
  html.rr-js .rr-stagger > *,
  html.rr-js .rr-stagger:not(.is-visible) > *,
  html.rr-js .rr-enter,
  html.rr-js .rr-lift > span {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .rr-intro { display: none !important; }
  .rr-hero__video { display: none !important; }
  .rr-scrollcue::after { animation: none !important; }
  /* Niente piega: qui la scheda non si corica e non si alza. */
  .rr-card:hover,
  .rr-card:focus-within,
  .rr-btn:hover,
  .rr-store-btn:hover { transform: none !important; }
  .rr-card--media:hover .rr-card__media img { transform: none !important; }
  .rr-header.is-scrolled .rr-header__glass,
  .rr-header.is-scrolled .rr-header__bar { transition: none !important; }
}

/* ==========================================================================
   20. STAMPA — la privacy policy la gente la stampa davvero
   ========================================================================== */
@media print {
  @page { margin: 16mm 14mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.5;
    padding-top: 0 !important;
  }

  .rr-header,
  .rr-nav,
  .rr-burger,
  .rr-progress,
  .rr-intro,
  .rr-skip,
  .rr-scrollcue,
  .rr-hero__media,
  .rr-hero__scrim,
  .rr-btn,
  .rr-store,
  .rr-footer__grid,
  video,
  [data-rr-video],
  .rr-doc__aside,
  .rr-toc,
  .rr-crumbs,
  .rr-no-print { display: none !important; }

  /* Il documento legale torna a colonna unica su carta. */
  .rr-doc { display: block !important; }

  .rr-hero,
  .rr-pagehead,
  .rr-section--ink,
  .rr-section--pale,
  .rr-section--grey {
    background: none !important;
    color: #000 !important;
    min-height: 0 !important;
    padding-block: 0 0 12pt !important;
    border: 0 !important;
  }
  .rr-hero h1, .rr-hero p,
  .rr-section--ink h2, .rr-section--ink h3 { color: #000 !important; }

  .rr-card {
    box-shadow: none !important;
    border: 1px solid #bbb !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .rr-card::after { display: none !important; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #000 !important; }
  p, li, blockquote { orphans: 3; widows: 3; }

  .rr-legal { max-width: none; color: #000; }
  .rr-legal a { color: #000; text-decoration: underline; }
  .rr-legal a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }
  .rr-faq__item { border: 1px solid #bbb !important; box-shadow: none !important; }
  .rr-faq__a { display: block !important; }

  .rr-footer {
    background: none !important;
    color: #000 !important;
    border-top: 1px solid #bbb;
    padding-block: 8pt 0;
  }
  .rr-footer__bottom { color: #000 !important; border: 0; }
  .rr-footer__bottom a { color: #000 !important; }

  .rr-reveal,
  .rr-stagger > *,
  .rr-enter,
  .rr-lift > span {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Il segno della strada e' un fondo, e i fondi in stampa non escono quasi
     mai: invece di lasciarne uscire meta' su qualche stampante, si toglie.
     Su carta il ritmo lo fanno gia' i margini. */
  .rr-eyebrow::before,
  .rr-card__eyebrow::before,
  .rr-step::before,
  .rr-footer::before,
  .rr-appshot::before,
  .rr-card__media::before,
  .rr-shot::before { display: none !important; }
  hr { height: 0 !important; border-top: 1px solid #bbb !important; background: none !important; }
}

/* ==========================================================================
   21. PAGINA DI CONFERMA EMAIL (auth/conferma.html)
   --------------------------------------------------------------------------
   Le email di conferma piu' recenti contengono un CODICE a 6 cifre da
   scrivere nell'app; quelle partite prima contenevano un LINK. Chi apre un
   vecchio link atterra su auth/conferma.html, che deve mostrare UNO di tre
   casi in base a cosa Supabase scrive nell'indirizzo:
       ok       conferma riuscita
       scaduto  link scaduto o gia' usato (parametri error* nel frammento #)
       neutro   pagina aperta senza parametri
   Lo stato lo decide rr.js scrivendo data-rr-state sul contenitore .rr-auth.

   Perche' queste regole stanno QUI e non dentro la pagina:
   1. senza JavaScript il caso neutro (le istruzioni) deve essere gia'
      visibile al primo disegno;
   2. con JavaScript non deve MAI lampeggiare per un istante il messaggio
      sbagliato.
   Servono quindi al primo paint, insieme all'HTML: un blocco in fondo alla
   pagina arriverebbe troppo tardi.
   ========================================================================== */

/* Senza JavaScript: si vede solo il caso neutro, quello che spiega cosa fare. */
.rr-auth__case[data-rr-case="ok"],
.rr-auth__case[data-rr-case="scaduto"] { display: none; }

/* Con JavaScript, finche' rr.js non ha letto l'indirizzo: nessun caso.
   Dura una frazione di frame (rr.js e' sincrono nel <head>). */
html.rr-js .rr-auth:not([data-rr-state]) > .rr-auth__case { display: none; }

/* Stato deciso: resta solo il caso che corrisponde. */
.rr-auth[data-rr-state] > .rr-auth__case { display: none; }
.rr-auth[data-rr-state="ok"] > [data-rr-case="ok"],
.rr-auth[data-rr-state="scaduto"] > [data-rr-case="scaduto"],
.rr-auth[data-rr-state="neutro"] > [data-rr-case="neutro"] { display: block; }

/* Intestazione del riquadro: distintivo, titolo e frase, centrati. */
.rr-auth__head { text-align: center; margin-bottom: var(--rr-space-32); }
.rr-auth__head .rr-card__text { max-width: 46ch; margin-inline: auto; }

/* Il distintivo. Spunta BLU per la conferma riuscita; per il link scaduto
   un distintivo grigio neutro: la palette ha due soli colori e il rosso non
   esiste, ne' serve — un link scaduto non e' un errore della persona. */
.rr-auth__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  margin-bottom: var(--rr-space-24);
  border-radius: var(--rr-radius-pill);
  background: var(--rr-blue-pale);
  color: var(--rr-blue);
  box-shadow: inset 0 0 0 2px rgba(10, 102, 255, .22);
}
.rr-auth__badge svg { width: 2.5rem; height: 2.5rem; }
.rr-auth__badge--quiet {
  background: var(--rr-grey-100);
  color: var(--rr-grey-600);
  box-shadow: inset 0 0 0 2px var(--rr-line);
}

/* Entrata: solo transform e opacity, e solo con JavaScript attivo (senza JS
   il riquadro dev'essere leggibile subito, non animato). Il blocco 19
   (movimento ridotto) la annulla gia' con !important. */
html.rr-js .rr-auth__badge {
  animation: rr-auth-badge var(--rr-dur-3) var(--rr-ease-enter) both;
}
@keyframes rr-auth-badge {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   22. ANIMA MOTOCICLISTICA
   --------------------------------------------------------------------------
   Il sito era pulito e anonimo: poteva essere di qualunque applicazione.
   Questo paragrafo gli mette addosso la moto — dentro il sistema, non dentro
   le pagine, cosi' ogni schermata lo eredita senza riscrivere una riga.

   Tre cose sole, ripetute ovunque:

     1. LA MEZZERIA. Un tratteggio che richiama la segnaletica orizzontale.
        E' il segno ricorrente del sito: apre ogni occhiello, separa, unisce
        i passi numerati, chiude la pagina in fondo al pie'.
     2. LA PIEGA. Le schede si inclinano appena — mezzo grado — col perno sul
        bordo inferiore. Sta nel paragrafo 9, dove vivono le schede.
     3. IL RITMO. Le sezioni entrano alternate, come i tornanti di una salita.
        Sta nel paragrafo 18, dove vivono le rivelazioni.

   E tre cose che NON ci sono, e non ci devono entrare mai:
   niente che suggerisca velocita', corse, record o sfide (regola di prodotto,
   vale per il sito come per l'app); niente neon, cromature o fiamme; nessun
   colore fuori dai due di marca — qui dentro non compare un solo esadecimale
   che non sia gia' in tavolozza o un grigio neutro con trasparenza.

   Tutto quello che segue e' disegno fermo: nessuna animazione infinita,
   nessun battito, nessuna barra che scorre da sola. Il movimento del sito
   sta tutto nelle mani di chi legge — scorre la pagina o passa sopra una
   scheda — e si spegne da solo con prefers-reduced-motion (paragrafo 19).
   ========================================================================== */

/* --- 22.a Il segno: la mezzeria -------------------------------------------
   Ogni occhiello parte con un tratto di mezzeria. E' il posto giusto perche'
   l'occhiello e' l'unica cosa che sta in cima a OGNI sezione e in cima a ogni
   scheda: un segno messo li' si ripete per tutto il sito da solo, senza che
   nessuno debba ricordarsi di aggiungerlo.
   Gerarchia: due tratti per la sezione, uno solo per la scheda.
   Il colore e' currentColor, quindi segue gia' l'occhiello ovunque vada —
   blu scuro sul chiaro, azzurro sul fondo inchiostro. */
.rr-eyebrow::before,
.rr-card__eyebrow::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: var(--rr-dash-w);
  margin-inline-end: .55rem;
  background-image: var(--rr-road-line);
}
.rr-eyebrow::before { width: calc(var(--rr-dash-len) * 2 + var(--rr-dash-gap)); }
.rr-card__eyebrow::before { width: var(--rr-dash-len); }

/* Il pie' di pagina e' la fine del percorso: una mezzeria intera lo chiude.
   Azzurro su inchiostro — decorazione pura, mai testo (vedi paragrafo 2). */
.rr-footer { position: relative; }
.rr-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--rr-dash-w);
  color: var(--rr-blue-light);
  background-image: var(--rr-road-line);
  pointer-events: none;
}

/* --- 22.b I passi sono punti di un percorso -------------------------------
   Nelle istruzioni e nei tutorial i numeri erano pallini blu sospesi nel
   vuoto. Uniti da una mezzeria verticale diventano quello che sono davvero:
   tappe in fila su una strada.

   :has(+ .rr-step) invece di :not(:last-child) perche' in qualche pagina
   dopo l'ultimo passo c'e' dell'altro (una nota, un pulsante): li' il
   collegamento non deve partire. Se un browser non conosce :has() la regola
   cade tutta intera e restano i numeri come prima — che e' esattamente il
   comportamento giusto quando un abbellimento non si puo' disegnare.

   Le misure: il numero e' alto 2,5rem e largo altrettanto, quindi la linea
   scende dal suo centro (1,25rem) e parte 0,4rem sotto. Lo spazio fra un
   passo e l'altro lo mette .rr-stack, che pero' ha due passi diversi: la
   linea deve sapere quale, o si ferma a meta' strada. */
.rr-step { position: relative; --rr-step-gap: var(--rr-space-16); }
.rr-stack--lg > .rr-step { --rr-step-gap: var(--rr-space-32); }
.rr-step:has(+ .rr-step)::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.9rem;
  bottom: calc(.4rem - var(--rr-step-gap));
  width: var(--rr-dash-w);
  margin-left: calc(var(--rr-dash-w) / -2);
  /* Lo stesso azzurro delle strade che aprono le tappe della home: la tratta
     fra due passi e la tratta fra due capitoli sono la stessa strada. */
  color: var(--rr-blue-light);
  background-image: var(--rr-road-line-v);
  pointer-events: none;
}

/* --- 22.c Le schermate dell'app: un trattamento solo ----------------------
   Le immagini del sito sono di due specie e vanno trattate in due modi:

   • le SCHERMATE dell'app sono gia' bianche e blu — sono l'app vera. Non si
     colorano: si incorniciano. Un filo grigio interno, uguale ovunque, le
     stacca dal fondo su cui appoggiano (bianco, azzurro tenue, grigio) e
     tiene insieme schede, riquadri e telaio del telefono come se fossero
     una cosa sola. La classe da usare su un contenitore nuovo e'
     .rr-appshot; .rr-card__media e .rr-shot la ereditano gia', quindi le
     pagine esistenti non vanno toccate.

   • le FOTOGRAFIE fuori palette (la ruota viola/verde acqua) passano dal
     duotone del paragrafo 10. Verificato riga per riga: l'unica in tutto il
     sito e' quella, ed e' gia' avvolta in .rr-duotone dove compare.
     La regola su [src] qui sotto e' la rete di sicurezza per il giorno in
     cui qualcuno la incolla in una pagina nuova scordandosi il contenitore:
     resta in bianco e nero invece di portare due colori vietati in pagina.
     Sta dentro :where() apposta — peso zero — cosi' se il duotone c'e' vince
     lui e questa regola non si accorge nemmeno di esistere.

   Il filo sta su ::before e non su ::after perche' ::after e' gia' occupato
   dal velo del duotone: due regole sullo stesso pseudo-elemento si
   cancellerebbero a vicenda, e a perderci sarebbe il duotone. */
.rr-appshot {
  position: relative;
  overflow: hidden;
  border-radius: var(--rr-radius-xl);
  background: var(--rr-blue-pale);
}
.rr-shot { position: relative; }
.rr-appshot::before,
.rr-card__media::before,
.rr-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .08);
  pointer-events: none;
}
:where(img[src*="immagine%20ruota"], img[src*="immagine ruota"]) {
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}

/* --- 22.d Dettagli meccanici ----------------------------------------------
   Piccoli, sobri, sotto la soglia dell'attenzione: si sentono al tatto piu'
   che a occhio. Il pulsante primario e quello degli store hanno gia' il loro
   filo di spessore nel paragrafo 7. Qui restano due cose.

   1. La piastrina dell'icona nelle schede: un anello blu appena accennato,
      come la ghiera fresata di uno strumento di bordo.
   2. Il sottolineato della navigazione. Da fermo, sulla voce in cui ti trovi,
      e' una linea PIENA: sei li'. Al passaggio del mouse su un'altra voce
      diventa tratteggiata: e' la strada che devi ancora fare.
      Il tratteggio si accende cambiando il fondo, non la misura: lo
      scorrimento da sinistra resta il transform: scaleX di prima, intatto. */
.rr-card__icon { box-shadow: inset 0 0 0 1px rgba(10, 102, 255, .16); }

.rr-nav__link:hover::after,
.rr-nav__link:focus-visible::after {
  background-color: transparent;
  background-image: var(--rr-road-line);
}
/* Sulla voce corrente vince sempre la linea piena, anche mentre ci passi
   sopra: e' l'unico segnale che dice dove sei. */
.rr-nav__link[aria-current="page"]:hover::after,
.rr-nav__link[aria-current="page"]:focus-visible::after {
  background-color: var(--rr-blue);
  background-image: none;
}