@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-display: swap; src: url('/caratteri/plus-jakarta-sans-latin-wght-normal.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: 'Plus Jakarta Sans'; font-weight: 200 800; font-display: swap; src: url('/caratteri/plus-jakarta-sans-latin-ext-wght-normal.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: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/caratteri/inter-latin-wght-normal.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: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/caratteri/inter-latin-ext-wght-normal.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: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url('/caratteri/IBMPlexSansArabic_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url('/caratteri/IBMPlexSansArabic_700Bold.ttf') format('truetype'); }

:root {
  --blu: #006fee;
  --blu-vivo: #007aff;
  --nero: #09090b;
  --bianco: #ffffff;
  --grigio: #f2f2f7;
  --riquadro: #f4f4f5;
  --bordo: #e4e4e7;
  --tenue: #52525b;
  --tenue-su-nero: #a1a1aa;
  --sistema: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --titoli: 'Plus Jakarta Sans', var(--sistema);
  --corpo: Inter, var(--sistema);
  --margine: clamp(16px, 5vw, 72px);
  --uscita: cubic-bezier(0.23, 1, 0.32, 1);
  --morbido: cubic-bezier(0.77, 0, 0.175, 1);
  --scuro: #191c1f;
  color-scheme: light;
}
html:lang(zh-Hans), html:lang(zh-Hant), html:lang(ja), html:lang(ko) {
  --titoli: 'Plus Jakarta Sans', 'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo', 'Noto Sans CJK SC', 'Microsoft YaHei', var(--sistema);
  --corpo: Inter, 'PingFang SC', 'Hiragino Sans', 'Apple SD Gothic Neo', 'Noto Sans CJK SC', 'Microsoft YaHei', var(--sistema);
}
html:lang(ar) {
  --titoli: 'IBM Plex Sans Arabic', var(--sistema);
  --corpo: 'IBM Plex Sans Arabic', var(--sistema);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-color: var(--blu) var(--grigio); }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
p, h1, h2, h3, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: inherit; }
::selection { background: var(--blu); color: var(--bianco); }
[data-tema='blu'] ::selection, [data-tema='nero'] ::selection { background: var(--bianco); color: var(--blu); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.icona { width: 1.15em; height: 1.15em; flex: none; }
html[dir='rtl'] .freccia { transform: scaleX(-1); }
.salta, .solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta:focus { width: auto; height: auto; clip-path: none; inset-inline-start: 16px; top: 16px; z-index: 100; background: var(--bianco); color: var(--nero); padding: 10px 16px; border-radius: 999px; }
.contenitore { width: min(100%, 1152px); margin-inline: auto; }

/* Ogni sezione ha il suo colore pieno. */
[data-tema='blu'] { background: var(--blu); color: var(--bianco); }
[data-tema='nero'] { background: var(--nero); color: var(--bianco); --tenue: var(--tenue-su-nero); }
[data-tema='bianco'] { background: var(--bianco); color: var(--nero); }
[data-tema='grigio'] { background: var(--grigio); color: var(--nero); }

/* I titoli come su Revolut: un peso solo, pieno, stretto. */
.titolo { font-family: var(--titoli); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: break-word; }
.titolo.grande { font-size: clamp(44px, 6.2vw, 88px); }
html:lang(ar) .titolo { letter-spacing: 0; line-height: 1.25; }
html:lang(zh-Hans) .titolo, html:lang(zh-Hant) .titolo, html:lang(ja) .titolo, html:lang(ko) .titolo { letter-spacing: 0; line-height: 1.2; }

/* I bottoni: pillole piene, come quelle di Revolut. */
.pillola, .bottone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  font: 700 16px var(--titoli);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.pillola { background: var(--bianco); color: var(--blu); }
/* La pillola "In arrivo" in alcune lingue e' piu' larga del telefono: li'
   va a capo in due righe pari invece di uscire dallo schermo. */
.pillola { max-width: 100%; white-space: normal; text-wrap: balance; line-height: 1.25; }
.bottone { background: var(--nero); color: var(--bianco); transition: transform 160ms var(--uscita), background-color 0.2s; }
.bottone:active { transform: scale(0.97); }
.freccia { transition: transform 0.3s var(--uscita); }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--nero); text-decoration: underline; text-decoration-color: var(--blu); text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: var(--blu); }
  .bottone:hover .freccia, .link:hover .freccia, .righe a:hover .freccia { transform: translateX(3px); }
  html[dir='rtl'] .bottone:hover .freccia, html[dir='rtl'] .link:hover .freccia, html[dir='rtl'] .righe a:hover .freccia { transform: scaleX(-1) translateX(3px); }
}

/* I titoli delle sezioni della home. */
.titolo-rev { font: 600 clamp(34px, 3.7vw, 54px) / 1.04 var(--titoli); letter-spacing: -0.032em; text-wrap: balance; overflow-wrap: break-word; }
html:lang(ar) .titolo-rev { letter-spacing: 0; line-height: 1.25; }
html:is(:lang(zh-Hans), :lang(zh-Hant), :lang(ja), :lang(ko)) .titolo-rev { letter-spacing: 0; line-height: 1.2; }
.pillola-nera { background: var(--scuro); color: var(--bianco); }
.bottone { background: var(--scuro); min-height: 48px; padding: 10px 22px; font-size: 15px; }
[data-tema='scuro'] { background: var(--scuro); color: var(--bianco); --tenue: var(--tenue-su-nero); }

/* La testata: ferma in cima. Sulla prima schermata e' trasparente;
   scorrendo diventa bianca, se ne va quando si scende e torna quando si sale. */
.testata {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: max(14px, env(safe-area-inset-top)) var(--margine) 14px;
  color: var(--scuro);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.35s var(--uscita);
}
.js .testata { position: fixed; }
/* Come quella di Revolut: chiara ma trasparente e sfocata, cosi' sopra il
   nero sembra grigia e sopra il bianco bianca. */
/* Il fondo chiaro e sfocato sta su uno strato sotto la testata, non sulla
   testata: un vetro dentro un altro vetro sfocherebbe solo la testata, e il
   pannello del menu non vedrebbe la pagina dietro. */
.testata::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.testata.su-bianco { color: var(--scuro); }
.testata.su-bianco::before { opacity: 1; }
.testata.nascosta { transform: translateY(-100%); }
.marchio { display: inline-flex; align-items: center; gap: 10px; font: 800 22px var(--titoli); letter-spacing: -0.03em; text-decoration: none; }
html:lang(ar) .marchio { font-family: var(--sistema); }
.marchio img { width: 48px; height: 48px; margin: -6px -8px -6px -6px; }
/* Le voci come su Revolut: passandoci sopra compare una pillola chiara
   dietro la scritta. */
.voci { display: none; align-items: center; gap: 4px; margin-inline-start: -14px; }
.voci > a, .voce-menu > a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font: 600 15px var(--titoli); letter-spacing: -0.005em; text-decoration: none; transition: background-color 0.2s ease; }
.voce-giro { width: 14px; height: 14px; transition: transform 0.25s var(--uscita); }
@media (hover: hover) and (pointer: fine) {
  .voci > a:hover, .voce-menu:hover > a { background: rgba(255, 255, 255, 0.18); }
  .su-bianco .voci > a:hover, .su-bianco .voce-menu:hover > a { background: rgba(25, 28, 31, 0.07); }
  .voce-menu:hover .voce-giro { transform: rotate(180deg); }
}
.voce-menu:focus-within > a { background: rgba(255, 255, 255, 0.18); }
.su-bianco .voce-menu:focus-within > a { background: rgba(25, 28, 31, 0.07); }
@media (min-width: 900px) { .voci { display: flex; } }

/* Il pannello di vetro scuro sotto "Assistenza", come quelli di Revolut. Si
   apre passandoci sopra o arrivandoci con la tastiera; cliccando la voce si
   va comunque alla pagina. Lo spazio sopra il vetro fa da ponte, perche'
   scendendo col mouse il pannello non si chiuda. */
.voce-menu { position: relative; }
.pannello { position: absolute; top: 100%; inset-inline-start: 0; padding-top: 14px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top left; transition: opacity 0.18s ease-out, transform 0.22s var(--uscita), visibility 0s 0.22s; }
[dir='rtl'] .pannello { transform-origin: top right; }
.voce-menu:hover .pannello, .voce-menu:focus-within .pannello { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s ease-out, transform 0.22s var(--uscita), visibility 0s; }
.pannello-vetro { width: max-content; min-width: 420px; max-width: calc(100vw - 2 * var(--margine)); padding: 26px 28px 28px; border-radius: 24px; background: rgba(25, 28, 31, 0.62); -webkit-backdrop-filter: blur(32px) saturate(1.5); backdrop-filter: blur(32px) saturate(1.5); color: var(--bianco); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); }
.pannello-titolo { display: inline-flex; align-items: center; gap: 10px; font: 600 17px var(--titoli); text-decoration: none; }
.pannello-gruppi { display: grid; grid-template-columns: repeat(2, minmax(160px, auto)); gap: 32px 56px; margin-top: 24px; }
.pannello-gruppi div { display: grid; align-content: start; gap: 12px; }
.pannello-gruppi h2 { font: 500 14px var(--titoli); color: rgba(255, 255, 255, 0.55); margin-bottom: 2px; }
.pannello-gruppi a { font: 500 16px var(--titoli); text-decoration: none; }
.pannello a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }

/* "Registrati" in fondo a destra, come "Sign up" di Revolut: bianco sul blu,
   scuro quando la testata e' chiara. */
.registrati { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: var(--bianco); color: var(--scuro); font: 600 15px var(--titoli); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease, transform 160ms var(--uscita); }
.su-bianco .registrati, body:not(.pagina-home) .registrati { background: var(--scuro); color: var(--bianco); }
.registrati:active { transform: scale(0.97); }
@media (max-width: 899px) { .registrati { min-height: 40px; padding: 8px 18px; font-size: 14px; } }
/* Arrivando da "Registrati", la pillola "In arrivo" si fa notare una volta. */
@media (prefers-reduced-motion: no-preference) {
  #arrivo.richiamo { animation: richiamo 0.9s var(--uscita); }
}
@keyframes richiamo { 40% { transform: scale(1.06); } }
body:not(.pagina-home) { background: var(--bianco); }
body:not(.pagina-home) .testata { position: sticky; top: 0; color: var(--scuro); }
html:has(body:not(.pagina-home)) { scroll-padding-top: 96px; }

/* La prima schermata, come su Revolut: la carta di mezzo della fila grande
   quanto la pagina. Il blu della carta al posto della loro foto, il titolo
   bianco a sinistra e il contorno della carta con dentro la stessa carta;
   l'omino ne esce come la ragazza della loro foto. Sul telefono il contorno
   viene sotto il testo, largo quanto la pagina, e la pagina scorre e basta,
   come su Revolut dal telefono. */
.scena {
  position: relative;
  overflow: hidden;
  /* Il browser non deve poterla far scorrere dentro di se' (lo fa per
     arrivare a #arrivo): clip la taglia e basta. */
  overflow: clip;
  isolation: isolate;
  padding: clamp(104px, 15svh, 140px) var(--margine) var(--margine);
  transform-origin: 0 0;
}
/* La colonna e' minmax(0, 1fr): senza, una riga che non va a capo (la
   pillola) la allargava oltre lo schermo e il titolo ci andava dietro. */
.scena-testo { --colonna: calc(100vw - 2 * var(--margine)); position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; max-width: var(--colonna); }
.scena-titolo { max-width: 100%; font: 600 clamp(34px, 9vw, 52px) / 1.04 var(--titoli); letter-spacing: -0.038em; overflow-wrap: break-word; }
html:lang(ar) .scena-titolo { letter-spacing: 0; line-height: 1.25; }
html:is(:lang(zh-Hans), :lang(zh-Hant), :lang(ja), :lang(ko)) .scena-titolo { letter-spacing: 0; line-height: 1.18; }
.eroe-frase { display: block; }
.scena-sotto { margin: 24px 0 32px; max-width: 30ch; text-wrap: balance; font: 500 clamp(17px, 1.3vw, 19px) / 1.45 var(--titoli); letter-spacing: -0.01em; }
/* Sopra il blu la testata e' bianca, come quella di Revolut sulla foto. */
.pagina-home .testata:not(.su-bianco) { color: var(--bianco); }
/* Il riquadro ha la forma della carta (10 / 15) ed e' il contenitore delle
   misure in cqw, come la carta della fila: stringendolo alla sua larghezza,
   tutto quello che c'e' dentro combacia. Niente translate per metterlo a
   posto: lo script lo misura con offsetLeft, che non lo vede. */
.scena-carta { position: relative; z-index: 1; width: min(100%, 440px); aspect-ratio: 10 / 15; margin: 40px auto 0; container-type: inline-size; }
.scena-carta .buddo-carta { overflow: visible; background: none; border-radius: 0; }
.scena-carta::after { content: ''; position: absolute; z-index: 2; inset: 0; border: 1.5px solid rgba(255, 255, 255, 0.72); border-radius: 6cqw; pointer-events: none; transition: opacity 0.3s ease-out; }
@media (min-width: 1024px) {
  /* Il contorno arriva in fondo alla schermata e ne esce appena, come su
     Revolut: l'avviso dello stipendio si legge senza scorrere. */
  /* --lato e' la larghezza del riquadro: la colonna del testo finisce prima,
     cosi' i titoli piu' larghi (l'arabo) non ci passano sopra. */
  .scena { --lato: min(57svh, 36vw); height: 100svh; min-height: 640px; padding: 0; }
  .scena-titolo { font-size: clamp(44px, 4.2vw, 68px); }
  .unito { white-space: nowrap; }
  .scena-testo { --colonna: min(860px, 100vw - var(--lato) - 2 * var(--margine) - 2vw - 40px); position: absolute; top: clamp(120px, 18svh, 168px); inset-inline-start: var(--margine); }
  .scena-carta { position: absolute; top: calc(102% - var(--lato) * 1.5); inset-inline-end: calc(var(--margine) + 2vw); width: var(--lato); margin: 0; }
}
/* La transizione di revolut.com: con lo script la prima schermata sta sopra
   la fila di carte e, al primo colpo di scorrimento, si stringe dentro il
   contorno fino alla carta di mezzo; risalendo in cima torna grande. Le carte
   ai lati arrivano e il contorno sparisce, perche' le carte della fila non ce
   l'hanno. La curva e' quella "dentro e fuori" per cio' che si muove sullo
   schermo. Il ritaglio parte da tutta la schermata, scritto nella stessa
   forma di quello d'arrivo: da "nessun ritaglio" il browser salterebbe. */
.con-scena .scena { position: absolute; inset: 0 0 auto; z-index: 20; clip-path: inset(0px 0px 0px 0px round 0px); transition: transform 0.8s var(--morbido), clip-path 0.8s var(--morbido); }
.con-scena .scena-testo { transition: opacity 0.3s ease-out; }
.scena-chiusa .scena-testo, .scena-chiusa .scena-carta::after { opacity: 0; }
.scena-subito .scena, .scena-subito .scena-testo, .scena-subito .scena-carta::after, .scena-subito .lato, .scena-subito .carte-testa { transition: none !important; }
.scena-ferma .scena { visibility: hidden; }
.con-scena:not(.scena-ferma) .fila .centro { visibility: hidden; }

/* Le parole che girano sotto la frase, come nella prima pagina dell'app:
   ogni lettera sale da sotto la riga, dall'ultima alla prima; dopo 2,2
   secondi escono verso l'alto e arriva la parola dopo. La grandezza si
   stringe quanto serve perche' la parola piu' lunga stia nella colonna. */
.parole { display: flex; white-space: nowrap; column-gap: 0.26em; min-height: 1.2em; font-size: min(1em, calc(var(--colonna) / (var(--lunga, 12) * 0.62))); }
.parola { display: inline-flex; overflow: hidden; padding-block: 0.04em 0.16em; }
.lettera { display: inline-block; white-space: pre; transform: translateY(110%); opacity: 0; transition: transform 0.55s cubic-bezier(0.34, 1.36, 0.64, 1), opacity 0.3s ease-out; transition-delay: calc(var(--k) * 25ms); }
.parole.dentro .lettera { transform: none; opacity: 1; }
.parole.fuori .lettera { transform: translateY(-120%); opacity: 0; transition-duration: 0.4s, 0.3s; transition-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4), ease-in; }

/* La carta di Buddo, uguale nella sagoma e nella fila: tutte le misure in
   cqw, la larghezza della carta. L'omino occupa la parte centrale del logo
   (x 25-75%, y 17-84%): largo 230cqw, la figura e' poco piu' larga della carta. */
.buddo-carta { position: absolute; inset: 0; overflow: hidden; border-radius: 6cqw; background: var(--blu); color: var(--bianco); }
.buddo-omino { position: absolute; width: 230cqw; max-width: none; height: auto; top: 18cqw; left: 50%; translate: -50% 0; }
.buddo-cifre { position: absolute; inset: 11cqw 6cqw auto; display: grid; justify-items: center; text-align: center; }
.buddo-cifre span { font: 500 5cqw / 1.3 var(--titoli); opacity: 0.88; }
.buddo-cifre b { font: 700 17cqw / 1.08 var(--titoli); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
html:lang(ar) .buddo-cifre b { letter-spacing: 0; }
.buddo-avviso { position: absolute; inset: auto 4cqw 4cqw; display: flex; align-items: center; gap: 3.2cqw; padding: 3.4cqw 4cqw; border-radius: 4.4cqw; background: var(--bianco); color: var(--scuro); font: 600 4.4cqw / 1.25 var(--titoli); box-shadow: 0 2cqw 6cqw rgba(25, 28, 31, 0.18); }
.buddo-avviso-icona { display: grid; place-items: center; flex: none; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--blu); color: var(--bianco); }
.buddo-avviso-icona .icona { width: 5.4cqw; height: 5.4cqw; }

/* La fila di tre carte, sotto il titolo: in mezzo quella di Buddo, ai lati
   due voci del conto. Arrivano dai lati quando la prima schermata si stringe. */
.carte { padding: clamp(96px, 12svh, 128px) 0 clamp(56px, 8vw, 96px); text-align: center; }
.carte-testa { display: grid; justify-items: center; gap: 16px; padding: 0 var(--margine); }
.carte-testa p { max-width: 52ch; font: 500 clamp(17px, 1.3vw, 19px) / 1.45 var(--titoli); letter-spacing: -0.01em; text-wrap: pretty; }
.fila { display: flex; gap: 12px; margin-top: 40px; padding: 8px var(--margine) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fila::-webkit-scrollbar { display: none; }
.carta-fila { position: relative; container-type: inline-size; flex: none; width: min(72vw, 300px); aspect-ratio: 10 / 15; scroll-snap-align: center; }
.centro { order: -1; }
/* Sul telefono, con lo script, le carte girano come su Revolut: la carta
   scelta a sinistra e piu' grande, la prossima che spunta a destra un po'
   piu' piccola e centrata in altezza; si trascinano col dito e dopo l'ultima
   torna la prima. Lo script mette ogni carta al suo posto; senza, la fila
   scorre e basta. Sotto, i pallini. */
.carosello { position: relative; display: block; height: calc(var(--larga) * var(--rapporto, 1.5) + 16px); padding: 0; overflow: hidden; overflow: clip; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* Due classi, perche' vincano sulle misure delle carte di ogni fila. */
.fila.carosello > * { position: absolute; top: 8px; left: 0; width: var(--larga); will-change: transform; }
[dir='rtl'] .fila.carosello > * { left: auto; right: 0; }
.fila { --larga: min(64vw, 300px); }
/* Le carte di "Affari tuoi" sono un po' meno alte (10 / 14) e piu' larghe:
   il testo e' lungo e sotto c'e' il disegno. */
.protetto-fila { --rapporto: 1.4; --larga: min(76vw, 300px); }
.fila.carosello > .carta-p { aspect-ratio: 10 / 14; }
@media (hover: hover) and (pointer: fine) {
  .carosello { cursor: grab; }
  .carosello.presa { cursor: grabbing; }
}
.carosello img { -webkit-user-drag: none; pointer-events: none; }
.pallini { display: flex; justify-content: center; margin-top: 12px; }
.pallini[hidden] { display: none; }
.pallini button { width: 24px; height: 24px; padding: 8px; border: 0; border-radius: 50%; background: #d4d4d8; background-clip: content-box; cursor: pointer; transition: background-color 0.2s ease; }
.pallini button[aria-current='true'] { background-color: #71717a; }
.lato .buddo-cifre { inset: auto 6cqw auto; top: 50%; translate: 0 -50%; }
/* Le foto sotto le carte ai lati, con un velo che fa leggere il bianco. */
.con-foto { background: #111; }
.carta-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.con-foto::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 70%); }
.con-foto .buddo-cifre, .con-foto .buddo-avviso { z-index: 1; }
.buddo-avviso b { margin-inline-start: auto; font-weight: 700; white-space: nowrap; }
.buddo-avviso-testo { display: grid; min-width: 0; text-align: start; }
.buddo-avviso-testo small { font: 500 3.6cqw / 1.25 var(--titoli); color: #71717a; }
@media (min-width: 1024px) {
  /* Il titolo resta in vista anche dopo il primo colpo di rotella, che
     sposta la pagina di un centinaio di punti mentre le carte arrivano. */
  .carte { padding-top: clamp(160px, 26svh, 260px); }
  .fila { justify-content: center; align-items: center; gap: 16px; overflow: visible; margin-top: clamp(32px, 5svh, 48px); }
  .carta-fila { width: clamp(220px, 17vw, 270px); }
  .lato { width: clamp(196px, 15vw, 240px); }
  .centro { order: 0; }
  .con-scena .lato { opacity: 0; transform: translateX(-36%) scale(0.92); transition: transform 0.7s var(--uscita) 0.28s, opacity 0.45s ease-out 0.28s; }
  .con-scena .lato:last-child { transform: translateX(36%) scale(0.92); }
  .con-scena .carte-testa { opacity: 0; transform: translateY(20px); transition: transform 0.7s var(--uscita) 0.36s, opacity 0.45s ease-out 0.36s; }
  .scena-chiusa .lato, .scena-chiusa .lato:last-child, .scena-chiusa .carte-testa { opacity: 1; transform: none; }
}


/* "Come ragiona", come le sezioni dei video di Revolut: nera, larga quanto
   la pagina, il titolo e la frase in cima e sotto il video da bordo a bordo.
   La frase si accende parola per parola scorrendo. */
.ragiona { padding: clamp(88px, 10vw, 136px) 0 clamp(24px, 4vw, 56px); text-align: center; overflow: hidden; }
.ragiona-testa { display: grid; justify-items: center; gap: 20px; max-width: 820px; margin: 0 auto; padding: 0 var(--margine); }
.frase { font: 500 clamp(19px, 1.7vw, 24px) / 1.42 var(--titoli); letter-spacing: -0.012em; max-width: 34em; text-wrap: pretty; }
.frase .leggera { color: var(--tenue); }
html:lang(ar) .frase { letter-spacing: 0; line-height: 1.6; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .frase > span { animation: accendi linear both; animation-timeline: view(); animation-range: cover 12% cover 42%; }
  }
}
@keyframes accendi { from { opacity: 0.18; } }

/* Il video dei giorni. La scena e' larga quanto la pagina: una luce blu
   dietro, gli oggetti girati appena nello spazio e il loro riflesso sul
   pavimento nero. A sinistra l'anello del Saldo conto, a destra la carta di
   Buddo; le misure in cqw sono della carta. */
.film { position: relative; width: 100%; height: clamp(560px, 50vw, 780px); margin-top: clamp(24px, 3vw, 48px); perspective: 1800px; perspective-origin: 50% 30%; overflow: hidden; }
.film::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 52% at 58% 44%, rgba(0, 111, 238, 0.34), rgba(0, 111, 238, 0) 70%), radial-gradient(ellipse 30% 40% at 30% 46%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%); }
/* Il pavimento: una riga di luce all'orizzonte che sfuma nel nero. */
.film::after { content: ''; position: absolute; inset: 72% 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.film-camera { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding-bottom: 4%; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-14deg); will-change: transform; }
.film-mondo { display: flex; align-items: center; gap: clamp(48px, 7vw, 128px); transform-style: preserve-3d; transition: opacity 0.45s ease-out; }
/* Il taglio fra un giro e l'altro. */
.film-buio .film-mondo { opacity: 0; transition: opacity 0.3s ease-in; }

/* L'anello del Saldo conto, come nella Home dell'app: le cifre a sinistra,
   gli anelli a destra. Sul nero l'anello degli impegni e' bianco invece che
   nero. */
.film-saldo-gruppo { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); text-align: start; transform: translateZ(-80px); }
/* Le cifre contano mentre cambiano: su uno strato loro si ridipinge solo il
   numero, non tutto il gruppo con gli anelli. */
.film-numeri { display: grid; will-change: transform; }
.film-numeri span { font: 500 clamp(13px, 1.05vw, 16px) / 1.3 var(--titoli); color: var(--tenue); }
.film-numeri span:not(:first-child) { margin-top: clamp(10px, 1.1vw, 16px); }
.film-numeri b { font: 700 clamp(26px, 2.6vw, 40px) / 1.1 var(--titoli); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.film-numeri .film-saldo { font-size: clamp(36px, 3.8vw, 58px); }
.film-numeri .film-spendibile { color: #3d8fff; }
html:lang(ar) .film-numeri b { letter-spacing: 0; }
/* Il riflesso solo sugli oggetti: le scritte capovolte sul pavimento si
   leggerebbero al contrario. */
.film-anelli { width: clamp(180px, 19vw, 290px); height: auto; overflow: visible; }
/* La luce blu dietro gli anelli: un alone fermo, disegnato una volta sola.
   Un filtro sull'anello si rifaceva a ogni passo mentre si riempie. */
.film-saldo-gruppo { position: relative; }
.film-saldo-gruppo::after { content: ''; position: absolute; z-index: -1; inset-inline-end: -12%; top: 50%; width: clamp(240px, 26vw, 400px); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 122, 255, 0.32), rgba(0, 122, 255, 0) 100%); pointer-events: none; }
[dir='rtl'] .film-saldo-gruppo::after { inset-inline-end: auto; inset-inline-start: -12%; }
.film-pista, .film-giro { fill: none; stroke-width: 22; }
.film-pista.esterno { stroke: rgba(0, 122, 255, 0.24); }
.film-pista.interno { stroke: rgba(255, 255, 255, 0.16); }
.film-giro { stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dashoffset 1.1s var(--uscita), opacity 0.2s; }
.film-giro.esterno { stroke: #007aff; }
.film-giro.interno { stroke: var(--bianco); }
.film-giro.vuoto { opacity: 0; }

/* La carta di Buddo, con le notifiche che le arrivano davanti. */
.film-posto { position: relative; width: clamp(240px, 23vw, 330px); aspect-ratio: 5 / 7; container-type: inline-size; transform-style: preserve-3d; transform: translateZ(40px); }
.film-carta { position: absolute; inset: 0; overflow: hidden; border-radius: 9cqw / 6.4cqw; color: var(--bianco); text-align: start; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.film-carta.blu { background: linear-gradient(165deg, #4d97ff 0%, #006fee 42%, #2a3fd6 100%); }
.film-etichetta { position: absolute; inset: 9cqw 8cqw auto; font: 600 5.6cqw / 1.2 var(--titoli); opacity: 0.88; }
.film-cifra { position: absolute; inset: 16cqw 8cqw auto; overflow: clip; font: 700 21cqw / 1.12 var(--titoli); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.film-cifra span { display: inline-block; }
html:lang(ar) .film-cifra { letter-spacing: 0; }
.film-barra { position: absolute; inset: 44cqw 8cqw auto; height: 2.8cqw; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
.film-barra i { position: absolute; inset: 0; border-radius: inherit; background: var(--bianco); transform: scaleX(var(--pieno, 0)); transform-origin: left; transition: transform 0.8s var(--uscita), background-color 0.25s ease; }
[dir='rtl'] .film-barra i { transform-origin: right; }
.film-resto { position: absolute; top: 52cqw; inset-inline-start: 8cqw; padding: 1.8cqw 4.4cqw; border-radius: 999px; background: var(--bianco); color: var(--scuro); font: 600 4.6cqw / 1.2 var(--titoli); white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; }
.oltre .film-barra i { background: #fb7185; }
.oltre .film-resto { background: #e11d48; color: var(--bianco); }
.film-omino { position: absolute; width: 110cqw; max-width: none; height: auto; inset-inline-end: -32cqw; bottom: -4cqw; }
.film-luce { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent); transform: translateX(-100%); pointer-events: none; }
.film-notifica { position: absolute; top: 26%; inset-inline-end: -34%; display: flex; align-items: center; gap: 3.4cqw; padding: 3cqw; padding-inline-end: 6cqw; border-radius: 6cqw; background: rgba(255, 255, 255, 0.94); color: var(--scuro); font: 700 6.6cqw / 1 var(--titoli); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); opacity: 0; transform: translate3d(0, -40%, 110px) scale(0.94); transition: opacity 0.3s ease-out, transform 0.5s var(--uscita); }
.film-notifica.vista { opacity: 1; transform: translate3d(0, 0, 110px); }
.film-notifica-icona { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 3.4cqw; background: var(--blu); color: var(--bianco); }
.film-notifica.impegno .film-notifica-icona { background: var(--scuro); }
.film-notifica-icona .icona { width: 6.4cqw; height: 6.4cqw; }
.film-subito *, .film-subito .film-mondo { transition: none !important; }

/* I due video di "Come ragiona" stanno uno sopra l'altro nello stesso posto;
   le pillole sotto scelgono quale si vede, come sotto i video di Revolut.
   Senza JavaScript si vede solo il primo. */
.video-due { display: grid; }
.video-scena { grid-area: 1 / 1; min-width: 0; }
.video-scena + .video-scena { display: none; }
.con-video .video-scena { display: block; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-out, visibility 0s 0.4s; }
.con-video .video-scena.scelta { opacity: 1; visibility: visible; transition: opacity 0.4s ease-out, visibility 0s; }
.schede { display: none; }
.con-video .schede { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(8px, 1.5vw, 20px); }
.schede button { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.1); color: var(--bianco); font: 600 14px var(--titoli); white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 160ms var(--uscita); }
.schede button[aria-selected='true'] { background: var(--bianco); color: var(--scuro); }
.schede button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .schede button[aria-selected='false']:hover { background: rgba(255, 255, 255, 0.2); } }

/* "Posso permettermelo?": la scheda del prezzo come nell'app, bianca. */
.posso-prezzo { display: grid; justify-items: center; gap: 16px; width: clamp(280px, 28vw, 400px); padding: 24px 24px 22px; border-radius: 28px; background: var(--bianco); color: var(--scuro); transform: translateZ(-60px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.posso-titolo { justify-self: start; font: 600 15px var(--titoli); color: #71717a; }
.posso-importo { will-change: transform; font: 700 clamp(48px, 5vw, 76px) / 1 var(--titoli); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
html:lang(ar) .posso-importo { letter-spacing: 0; }
.posso-cursore { position: relative; width: 100%; height: 6px; margin: 8px 0; border-radius: 999px; background: #e4e4e7; }
.posso-cursore::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 0) * 100%); border-radius: inherit; background: var(--blu-vivo); }
[dir='rtl'] .posso-cursore::before { inset: 0 0 0 auto; }
.posso-cursore i { position: absolute; top: 50%; inset-inline-start: calc(var(--k, 0) * 100%); width: 24px; height: 24px; margin-inline-start: -12px; translate: 0 -50%; border-radius: 50%; background: var(--bianco); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.posso-cursore::before, .posso-cursore i { transition: width 0.7s var(--uscita), inset-inline-start 0.7s var(--uscita); }
.posso-rapidi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.posso-rapidi span { display: grid; place-items: center; height: 36px; border-radius: 8px; background: #f4f4f5; font: 600 14px var(--titoli); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--uscita); }
.posso-rapidi span.premuto { background: var(--scuro); color: var(--bianco); }
.posso-rapidi span.tocco { transform: scale(0.94); }
.posso-rapidi .azzera { background: none; color: #71717a; }
/* La risposta dell'app sotto il prezzo: l'icona colorata e le parole del
   suo esito. Il posto c'e' sempre, cosi' la scheda non cambia altezza. */
.posso-esito { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; background: #f4f4f5; font: 600 15px / 1.25 var(--titoli); text-align: start; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease-out, transform 0.5s var(--uscita); }
.posso-esito.vista { opacity: 1; transform: none; }
.esito-icona, .posso-parole { display: none; }
.esito-icona { place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: var(--bianco); }
.esito-icona .icona { width: 18px; height: 18px; }
.posso-esito[data-esito='sicuro'] .esito-sicuro, .posso-esito[data-esito='attenzione'] .esito-attenzione, .posso-esito[data-esito='pericolo'] .esito-pericolo { display: grid; }
.esito-sicuro.esito-icona { background: #16a34a; }
.esito-attenzione.esito-icona { background: #f59e0b; }
.esito-pericolo.esito-icona { background: #e11d48; }
/* Lo spendibile sotto il prezzo: il numero con cui il prezzo si confronta
   (sulla carta finiva sopra l'omino bianco e non si leggeva). */
.posso-spendibile { margin-top: -6px; font: 500 15px var(--titoli); color: #71717a; white-space: nowrap; }
.posso-spendibile b { font-weight: 700; color: var(--scuro); font-variant-numeric: tabular-nums; }

/* Sul telefono gli oggetti stanno uno sopra l'altro: prima l'anello, poi la
   carta. Niente riflessi, che allungherebbero la scena. */
@media (max-width: 760px) {
  .film { height: auto; padding: 24px 0 64px; }
  .film::after { display: none; }
  .film::before { background: radial-gradient(ellipse 80% 40% at 50% 66%, rgba(0, 111, 238, 0.34), rgba(0, 111, 238, 0) 70%); }
  .film-camera { position: relative; transform: rotateX(4deg) rotateY(-8deg); padding: 0; }
  .film-mondo { flex-direction: column; gap: 48px; }
  .film-saldo-gruppo { transform: none; gap: 24px; }
  .film-anelli { width: 140px; }
  .film-numeri .film-saldo { font-size: 34px; }
  .film-numeri b { font-size: 24px; }
  .film-posto { width: min(66vw, 280px); }
  .posso-prezzo { width: min(80vw, 320px); transform: none; }
  .film-notifica { inset-inline-end: -12%; }
}
/* La telecamera arriva la prima volta in 4 secondi, poi gira piano avanti e
   indietro finche' la scena resta in vista. */
@media (prefers-reduced-motion: no-preference) {
  .film.gira .film-camera { animation: film-arriva 4s var(--uscita) both; }
  .film.gira .film-mondo { animation: film-deriva 16s ease-in-out 4s infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  .film-notifica, .film-notifica.vista { transform: translateZ(110px); }
}
@keyframes film-arriva { from { transform: translateY(10%) scale(0.84) rotateX(20deg) rotateY(-34deg) rotateZ(4deg); opacity: 0.2; } 18% { opacity: 1; } }
@keyframes film-deriva { to { transform: rotateY(10deg) translateZ(-40px); } }

/* I dati, come "Il tuo denaro e' protetto" di Revolut: titolo e riga al
   centro, poi tre carte, quella di mezzo piu' alta. Ferme. */
.protetto { padding: clamp(88px, 11vw, 150px) 0; text-align: center; }
.protetto-testa { display: grid; justify-items: center; gap: 20px; padding: 0 var(--margine); }
.protetto-testa p { max-width: 40ch; color: var(--tenue); font: 500 clamp(17px, 1.4vw, 20px) / 1.45 var(--titoli); letter-spacing: -0.01em; }
.protetto-fila { margin-top: clamp(40px, 5vw, 64px); }
.carta-p { position: relative; flex: none; width: min(78vw, 300px); aspect-ratio: 10 / 14; padding: 26px; border-radius: 28px; overflow: hidden; background: #000; color: var(--bianco); text-align: start; scroll-snap-align: center; }
.carta-p h3 { position: relative; z-index: 2; font: 600 20px / 1.25 var(--titoli); letter-spacing: -0.015em; text-wrap: pretty; }
html:lang(ar) .carta-p h3 { letter-spacing: 0; line-height: 1.5; }
.carta-p.con-foto::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 45%); }
.fumetto { position: absolute; inset-inline-start: 22px; bottom: 26px; z-index: 2; display: flex; align-items: flex-end; gap: 8px; }
.fumetto-faccia { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bianco); color: var(--scuro); }
.fumetto-faccia .icona { width: 16px; height: 16px; }
.fumetto-testo { display: grid; gap: 2px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--bianco); color: var(--scuro); font: 500 14px / 1.3 var(--titoli); }
html[dir='rtl'] .fumetto-testo { border-radius: 16px 16px 4px 16px; }
.fumetto-testo small { font-size: 12px; font-weight: 600; color: var(--blu); }
.carta-p-centro::after { content: ''; position: absolute; inset: 40% -20% -30%; background: radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%); }
.vetro { position: absolute; left: 10%; right: 10%; bottom: 17%; z-index: 2; aspect-ratio: 1.58; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.4); background: linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.vetro b { font: 700 16px var(--titoli); letter-spacing: -0.02em; }
.vetro small { position: absolute; top: 14px; inset-inline-end: 14px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: var(--scuro); font: 600 11px var(--titoli); }
.vetro img { position: absolute; width: 130px; height: auto; max-width: none; inset-inline-end: -34px; bottom: -48px; }
.conferma { position: absolute; inset: auto 20px 24px; z-index: 2; display: grid; gap: 14px; padding: 18px 16px 16px; border-radius: 20px; background: #1c1c1e; text-align: center; }
.conferma b { font: 600 15px / 1.3 var(--titoli); }
.conferma-tasti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.conferma-tasti span { display: grid; place-items: center; min-height: 40px; padding: 4px 8px; border-radius: 12px; background: #2c2c2e; font: 600 13px / 1.2 var(--titoli); }
.conferma-tasti .rosso { background: #ff3b30; }
@media (min-width: 1024px) {
  .protetto-fila { justify-content: center; align-items: center; gap: 24px; overflow: visible; }
  .carta-p { width: clamp(260px, 21vw, 300px); }
  .carta-p-centro { width: clamp(290px, 23vw, 330px); aspect-ratio: 10 / 14.6; }
}

/* Le domande, in schede nere sul fondo scuro, come i piani di Revolut. */
.domande { padding: clamp(88px, 10vw, 128px) var(--margine) clamp(56px, 7vw, 88px); }
.domande .titolo-rev { text-align: center; margin-bottom: clamp(32px, 4vw, 48px); }
/* Una colonna sola, larga quanto un testo da leggere: aprendo una domanda
   la risposta compare sotto e le altre scendono, senza buchi fra le schede
   come in una griglia. */
.elenco-domande { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.domanda { border-radius: 20px; background: #000; }
/* La domanda e la freccia sulla stessa riga: ogni scheda e' alta quanto il
   suo testo. */
.domanda summary { list-style: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 18px 18px 18px 22px; border-radius: inherit; cursor: pointer; font: 600 17px / 1.3 var(--titoli); letter-spacing: -0.01em; }
html[dir='rtl'] .domanda summary { padding: 18px 22px 18px 18px; }
html:lang(ar) .domanda summary { letter-spacing: 0; }
.domanda summary:focus-visible { outline-offset: 0; }
.domanda summary::-webkit-details-marker { display: none; }
.tondo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bianco); color: var(--scuro); transition: transform 160ms var(--uscita); }
.tondo .icona { width: 16px; height: 16px; transition: transform 0.3s var(--uscita); }
html[dir='rtl'] .tondo .icona { transform: scaleX(-1); }
.domanda[open] .tondo .icona { transform: rotate(90deg); }
.domanda summary:active .tondo { transform: scale(0.94); }
.risposta { padding: 0 22px 22px; color: var(--tenue); display: grid; gap: 12px; font-size: 15px; }
.risposta a { color: var(--bianco); }
.risposta .link { color: var(--bianco); text-decoration-color: var(--bianco); }
.risposta dl { display: grid; gap: 8px; }
.risposta dt { font-weight: 700; color: var(--bianco); }

/* Il piede, sullo stesso scuro, come quello di Revolut: le colonne, il
   marchio, la lingua e le righe piccole. */
.piede { padding: clamp(56px, 7vw, 88px) var(--margine) 40px; font-size: 14px; }
.pagina-home .piede { padding-top: 24px; }
.piede-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.piede-gruppo h3 { font: 700 14px var(--titoli); margin-bottom: 14px; }
.piede-gruppo ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.piede-gruppo a { color: var(--tenue); text-decoration: none; }
.piede-gruppo a:hover { color: var(--bianco); }
.piede-marchio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(40px, 5vw, 64px); padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.piede-marchio a:not(.marchio) { color: var(--tenue); text-decoration: none; }
.piede-marchio a:not(.marchio):hover { color: var(--bianco); }
.piede-fondo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 20px; color: var(--tenue); }
.piede-testo { margin-top: 24px; max-width: 64ch; color: var(--tenue); }
@media (min-width: 860px) { .piede-colonne { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* La lingua: la scritta e il bottone con la lingua di adesso; l'elenco si
   apre sopra, dal bottone. */
.lingue { position: relative; }
.lingue summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary:focus-visible { outline: none; }
.lingue summary:focus-visible .lingue-ora { outline: 2px solid var(--bianco); outline-offset: 3px; }
.lingue-scegli { font: 600 14px var(--titoli); color: var(--bianco); }
.lingue-ora { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--bianco); color: var(--scuro); font: 600 14px var(--titoli); white-space: nowrap; transition: transform 160ms var(--uscita); }
.lingue summary:active .lingue-ora { transform: scale(0.97); }
.lingue-giro { width: 14px; height: 14px; transition: transform 0.25s var(--uscita); }
.lingue[open] .lingue-giro { transform: rotate(180deg); }
.lingue-elenco {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(100% + 14px);
  z-index: 5;
  width: max-content;
  min-width: 220px;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--bianco);
  color: var(--scuro);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  transform-origin: bottom left;
}
html[dir='rtl'] .lingue-elenco { transform-origin: bottom right; }
.lingue-elenco a, .lingue-elenco [aria-current] { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 14px; border-radius: 14px; font: 600 15px var(--titoli); text-decoration: none; }
.lingue-elenco [aria-current] { background: var(--grigio); }
.lingue-elenco [aria-current] .icona { color: var(--blu); }
@media (hover: hover) and (pointer: fine) { .lingue-elenco a:hover { background: var(--grigio); } }
@media (prefers-reduced-motion: no-preference) {
  .lingue[open] .lingue-elenco { animation: lingue-apri 220ms var(--uscita); }
}
@keyframes lingue-apri { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@media (prefers-reduced-motion: no-preference) {
  .scena-testo > * { animation: entra 0.9s var(--uscita) both; animation-delay: calc(var(--i, 0) * 80ms); }
  .scena-sotto { --i: 1; }
  .scena-testo .pillola { --i: 2; }
}
@keyframes entra { from { opacity: 0; transform: translateY(24px); } }

/* Le pagine interne: la testata bianca e il titolo grande. */
.testa-pagina { padding: clamp(64px, 9vw, 104px) var(--margine) clamp(40px, 5vw, 64px); }
.testa-pagina h1 { font-size: clamp(44px, 7.2vw, 104px); line-height: 1; letter-spacing: -0.045em; max-width: 12em; }
html:lang(ar) .testa-pagina h1 { letter-spacing: 0; line-height: 1.2; }
.testa-pagina p { margin-top: 24px; font: 500 clamp(18px, 1.6vw, 21px) / 1.4 var(--titoli); letter-spacing: -0.01em; color: var(--tenue); max-width: 40ch; }
.pagina-chiara { padding: clamp(16px, 2vw, 32px) var(--margine) clamp(96px, 11vw, 168px); }
.documento { display: grid; gap: 48px; }
.indice ol { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--nero); }
.indice a { display: block; padding: 10px 0; border-bottom: 1px solid var(--bordo); text-decoration: none; color: var(--tenue); font: 500 15px var(--titoli); transition: color 0.2s; }
.indice a:hover { color: var(--blu); }
@media (min-width: 1024px) { .documento { grid-template-columns: 280px minmax(0, 1fr); gap: 88px; } .indice { position: sticky; top: 104px; align-self: start; } }
.testo-legale { max-width: 70ch; display: grid; gap: 14px; font-size: 17px; line-height: 1.65; }
.testo-legale section { display: grid; gap: 12px; padding-bottom: 40px; margin-bottom: 8px; border-bottom: 1px solid var(--bordo); overflow-wrap: anywhere; }
.testo-legale section:last-child { border-bottom: 0; }
.testo-legale h2 { font: 600 clamp(22px, 2vw, 28px) / 1.2 var(--titoli); letter-spacing: -0.02em; margin-bottom: 4px; }
html:lang(ar) .testo-legale h2 { letter-spacing: 0; }
.testo-legale a { text-decoration-color: var(--blu); }
.email-grande { display: inline-block; margin: 24px 0 8px; font: 700 clamp(26px, 5vw, 60px) / 1.1 var(--titoli); letter-spacing: -0.035em; text-decoration: underline; text-decoration-color: var(--blu); text-decoration-thickness: 0.08em; overflow-wrap: anywhere; }
.assistenza { display: grid; gap: 56px; }
.righe { display: flex; flex-direction: column; border-top: 1px solid var(--nero); max-width: 720px; }
.righe a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--bordo); text-decoration: none; font: 400 clamp(20px, 2vw, 26px) var(--titoli); letter-spacing: -0.015em; }

/* Le pagine senza lingua, che smistano. */
.pagina-smistamento { padding-bottom: 0; }
.smistamento { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 32px; padding: 32px 16px; background: var(--blu); }
.smistamento ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 560px; }
.smistamento a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--bianco); color: var(--blu); text-decoration: none; font: 600 15px var(--titoli); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}