/* ==========================================================================
   Reibanq — Componenti
   Ogni blocco qui ha una controparte prevista in Divi 5. Dove serve, il
   commento dice quale modulo/preset lo rimpiazzera'.
   ========================================================================== */

/* ==========================================================================
   1. BOTTONI            Divi: preset "Reibanq CTA Primary / Secondary"
   ========================================================================== */
.rb-btn {
  /* DECISO da Zoran il 28/08: i bottoni restano cosi' come sono, cioe' al
     #c8410f (--rb-orange-deep) con testo bianco a 16px in peso 600. La
     questione e' chiusa, non c'e' piu' niente in attesa.
     Il perche', per chi arrivasse dopo: il #e9531d del manuale (decisione D3
     del 27/08) con testo bianco fa 3,67:1, sotto il 4,5:1 che WCAG AA chiede
     al testo di dimensione normale; solo sopra i 18,66px in peso 700 la
     soglia scende a 3:1. Portare qui il #e9531d obbligherebbe quindi a
     portare anche i 19px/700, e Zoran ha giudicato quei bottoni troppo
     grandi. Il #c8410f fa 4,98:1 a qualunque corpo. Colore e tipografia sono
     un blocco solo: non si tocca l'uno senza l'altro. D3 vale sul resto del
     marchio, non sul riempimento dei bottoni. */
  --rb-btn-bg: var(--rb-orange-deep);
  --rb-btn-fg: #fff;
  --rb-btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--rb-font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rb-btn-fg);
  background: var(--rb-btn-bg);
  border: 2px solid var(--rb-btn-bd);
  border-radius: var(--rb-r-pill);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--rb-t) var(--rb-ease),
              box-shadow var(--rb-t) var(--rb-ease),
              background-color var(--rb-t) var(--rb-ease),
              color var(--rb-t) var(--rb-ease),
              border-color var(--rb-t) var(--rb-ease);
}
.rb-btn svg { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--rb-t) var(--rb-ease); }
.rb-btn:hover { transform: translateY(-2px); }
.rb-btn:active { transform: translateY(0); }
.rb-btn:hover svg:last-child { transform: translateX(3px); }

/* Riflesso che attraversa il bottone: e' un ::after, non un secondo elemento,
   cosi' il modulo Divi resta un modulo Bottone e basta. */
.rb-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 720ms var(--rb-ease);
}
.rb-btn:hover::after { transform: translateX(120%); }

.rb-btn--primary { box-shadow: var(--rb-shadow-orange); }
.rb-btn--primary:hover { --rb-btn-bg: #ad3809; box-shadow: 0 18px 36px -12px rgba(200,65,15,0.55); }

.rb-btn--secondary {
  --rb-btn-bg: transparent;
  --rb-btn-fg: var(--rb-ink);
  --rb-btn-bd: var(--rb-line-strong);
}
.rb-btn--secondary:hover { --rb-btn-bd: var(--rb-navy); --rb-btn-bg: var(--rb-navy); --rb-btn-fg: #fff; }

.rb-theme-dark .rb-btn--secondary,
.rb-section--dark .rb-btn--secondary { --rb-btn-fg: #fff; --rb-btn-bd: rgba(255,255,255,0.34); }
.rb-theme-dark .rb-btn--secondary:hover,
.rb-section--dark .rb-btn--secondary:hover { --rb-btn-bg: #fff; --rb-btn-fg: var(--rb-navy); --rb-btn-bd: #fff; }

/* Il bottone di una card che porta a un link non ha cornice, ne' a riposo
   ne' al passaggio del mouse: il riempimento navy basta a segnalarlo, e la
   cornice raddoppierebbe il bordo della card. Regola del 29/08/2026, vale
   per tutte le card e le celle con link. */
.rb-card .rb-btn--secondary,
.rb-card .rb-btn--secondary:hover { --rb-btn-bd: transparent; }

.rb-btn--ghost { --rb-btn-bg: transparent; --rb-btn-fg: var(--rb-ink); --rb-btn-bd: transparent; padding-inline: 0.5rem; }
.rb-btn--ghost:hover { --rb-btn-fg: var(--rb-orange-deep); }

.rb-btn--sm { padding: 0.6rem 1.15rem; font-size: 0.9375rem; }
.rb-btn--lg { padding: 1.05rem 2rem; font-size: 1.0625rem; }
.rb-btn--block { display: flex; width: 100%; }

/* Link di testo con freccia — usatissimo nelle card */
.rb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--rb-font-text);
  font-weight: 600;
  color: var(--rb-orange-deep);
  transition: gap var(--rb-t) var(--rb-ease), color var(--rb-t) var(--rb-ease);
}
.rb-link svg { width: 1.05em; height: 1.05em; }
.rb-link:hover { gap: 0.8rem; color: #ad3809; }
.rb-theme-dark .rb-link, .rb-section--dark .rb-link { color: var(--rb-orange-light); }
.rb-theme-dark .rb-link:hover, .rb-section--dark .rb-link:hover { color: #ffa77f; }

/* ==========================================================================
   2. PILL / BADGE       Divi: modulo Testo con preset "Reibanq Pill"
   ========================================================================== */
.rb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.65rem;
  font-family: var(--rb-font-text);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rb-navy);
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-pill);
  box-shadow: var(--rb-shadow-xs);
}
.rb-pill svg { width: 1.1em; height: 1.1em; color: var(--rb-orange); }
.rb-pill--accent { background: var(--rb-orange-soft); border-color: rgba(233,83,29,0.22); color: #9a3208; }
.rb-pill--people { background: var(--rb-people-soft); border-color: rgba(108,75,182,0.2); color: #4c3287; }
.rb-pill--business { background: var(--rb-business-soft); border-color: rgba(14,140,140,0.2); color: #0a6767; }
.rb-theme-dark .rb-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(8px); }

/* ==========================================================================
   3. CARD               Divi: colonna con classe .rb-card (gia' sul sito)
   ========================================================================== */
.rb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r);
  transition: transform var(--rb-t) var(--rb-ease),
              box-shadow var(--rb-t) var(--rb-ease),
              border-color var(--rb-t) var(--rb-ease);
  overflow: hidden;
}
.rb-card:hover { transform: translateY(-4px); box-shadow: var(--rb-shadow); border-color: transparent; }

.rb-card h3, .rb-card h4 { margin-bottom: 0; }
/* Il titolo della card sta su `--rb-h3-card`, non su `--rb-h3`: vedi il
   commento del token. Le celle del bento che vogliono una taglia loro la
   ridichiarano piu' sotto, con una specificita' piu' alta. */
.rb-card h3 { font-size: var(--rb-h3-card); }
.rb-card p { color: var(--rb-body); }

/* Bento, rifatto sul modello 21st.dev "Bento Product Features": raggio piu'
   largo (--rb-r-lg, gia' nei token) e ombra di riposo leggera invece di
   bordo nudo, cosi' le celle si leggono come un blocco solo anche prima
   dell'hover. In hover la cella si allarga (scale) invece di sollevarsi
   (translateY): il sollevamento con 3 righe affiancate crea uno scalino
   visibile fra le celle vicine, lo scale no. */
.rb-grid--bento > .rb-card {
  border-radius: var(--rb-r-lg);
  box-shadow: var(--rb-shadow-xs);
}
.rb-grid--bento > .rb-card:hover {
  transform: scale(1.015);
}

/* La prima card e' il punto di forza, ma nel modello nuovo e' una colonna
   stretta e alta (una cella di larghezza, tre di altezza), non piu' un
   blocco largo: il titolo enorme di prima (fino a 5rem) qui andrebbe a capo
   in continuazione. Resta piu' marcata delle altre cinque, ma con una scala
   che sta dentro a una colonna, e il testo si centra in verticale perche' la
   colonna e' molto piu' alta di quanto il titolo+paragrafo riempiano. */
.rb-grid--bento > .rb-card:first-child {
  padding: clamp(1.9rem, 1.5rem + 1.4vw, 2.75rem);
  justify-content: flex-start;
  border-color: transparent;
  /* Due livelli, dal piu' vicino al piu' lontano: un velo navy che scurisce
     verso l'alto, dove sta il testo, e l'illustrazione astratta del caveau
     generata con Higgsfield (in fondo, a tutta cella). Niente icona di
     vetro: sull'illustrazione, gia' astratta, un'altra icona sopra faceva
     rumore invece di aggiungere lettura. Le due liste di posizione/misura
     restano allineate per indice alla lista delle immagini. */
  background-image:
    linear-gradient(to bottom, rgba(9, 20, 36, 0.88) 0%, rgba(9, 20, 36, 0.5) 42%, rgba(9, 20, 36, 0.12) 100%),
    url('../img/fig/bento-vault-bg.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}
/* La cella grande e' la piu' alta delle sei, non la piu' larga: misurata a
   1440px vale 384x730, cioe' la stessa larghezza delle quattro piccole. Il
   titolo a 40px ci dava 14 caratteri per riga, il valore peggiore del sito;
   a 30px ne da' 20, resta il piu' marcato dei sei e non cambia numero di
   righe. La larghezza che aveva in mente il clamp vecchio era quella della
   cella 2x2 di prima del 29/08, che non esiste piu'.

   La pendenza e' piu' dolce di quella di un titolo di sezione perche' la cella
   non si allarga come la pagina: il bento tiene tre colonne fino a 980px, e a
   1120 la cella vale 330px contro i 384 del desktop pieno. Con la pendenza
   consueta il titolo restava a 29px in quella fascia e scendeva a 16 caratteri
   per riga; cosi' ne fa 18 a 1120 e 18 a 1440, misurati. */
.rb-grid--bento > .rb-card:first-child h3 {
  font-size: clamp(1.5rem, 0.606rem + 1.41vw, 1.875rem);
  color: #fff;
}
.rb-grid--bento > .rb-card:first-child p {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.86);
}
/* Le cinque celle non-prime (b, c, d, e, f): testo ingrandito e icona
   rimpicciolita, per compattare l'altezza. L'icona di vetro a min(28%,132px)
   ereditata da `.rb-card--fig` riservava 138px di spazio sotto al testo
   (`--rb-fig - 8px + 14px`); qui scende a min(20%, 88px), che riserva 94px:
   e' la stessa icona ma piu' piccola in basso a destra, non un'altra
   posizione — la riduzione dello spazio riservato e' quello che abbassa la
   cella, non lo spostamento dell'icona, che era gia' in basso a destra. */
.rb-grid--bento > .rb-card:not(:first-child) {
  --rb-fig: min(20%, 88px);
}
/* Le quattro cellette piccole (b, c, d, e) restano sotto al titolo della
   prima, ma piu' grandi di prima: il salto di peso della prima si vede
   comunque perche' resta la piu' marcata delle sei. L'ultima (f) resta
   fuori da questa regola: e' larga quanto due celle, non stretta come le
   altre quattro, e vuole una taglia sua.

   Il titolo di queste quattro non e' piu' scritto qui: il valore che avevano
   -- clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem) -- e' diventato `--rb-h3-card` e
   vale per ogni card del sito. Ripeterlo qui voleva dire due posti da
   cambiare per la stessa cosa. */
.rb-grid--bento > .rb-card:not(:first-child):not(:last-child) p {
  font-size: 1rem;
}
/* L'ultima card chiude la griglia su due colonne (§ modello 21st.dev,
   slot "shortcuts"): bassa e larga invece che quadrata, quindi il titolo
   resta piu' grande delle quattro piccole. */
.rb-grid--bento > .rb-card:last-child h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem);
}
.rb-grid--bento > .rb-card:last-child p {
  font-size: 1.0625rem;
}
.rb-grid--bento > .rb-card:first-child > * {
  position: relative;
  z-index: 1;
}
.rb-card > .rb-link { margin-top: auto; padding-top: 0.35rem; }

/* --------------------------------------------------------------------------
   Card cliccabile per intero
   Prima il collegamento era una riga di testo alta una ventina di pixel in
   fondo alla card: tutta la superficie si sollevava al passaggio del mouse ma
   solo quella riga portava da qualche parte, quindi l'effetto prometteva una
   cosa che il clic non manteneva. Dove la card ha una destinazione sola,
   l'elemento e' un <a> e il bersaglio e' l'intera card.
   Il `.rb-link` dentro resta come segnale visivo, ma diventa uno <span>: due
   <a> annidati non sono HTML valido e lo screen reader leggerebbe due volte.
   -------------------------------------------------------------------------- */
a.rb-card {
  color: inherit;
  text-decoration: none;
}

/* Il fuoco da tastiera deve vedersi: senza, la card cliccabile e'
   raggiungibile col tabulatore ma non si capisce dove si e' arrivati. */
a.rb-card:focus-visible {
  outline: 3px solid var(--rb-orange-deep);
  outline-offset: 3px;
}

/* La freccia si allunga quando il mouse e' sulla card, non solo sul testo. */
a.rb-card:hover .rb-link { gap: 0.8rem; color: #ad3809; }
.rb-theme-dark a.rb-card:hover .rb-link,
.rb-section--dark a.rb-card:hover .rb-link { color: #ffa77f; }

/* --------------------------------------------------------------------------
   La prova in cifre
   Una card che dice "Accounts / hold balances in many currencies" non afferma
   niente di verificabile. Il dato la ancora. Finom mette il numero dentro una
   pastiglia colorata; qui sta nel flusso, in cifre tabellari, sotto "la linea"
   arancione che e' gia' la firma ricorrente del sito.
   Va usato SOLO con dati gia' affermati altrove nelle pagine o nelle FAQ, mai
   con cifre nuove: le FAQ sono la fonte, e un numero che le contraddice e' un
   difetto, non una variante.
   -------------------------------------------------------------------------- */
.rb-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 3px solid var(--rb-orange);
  align-self: flex-start;
}

.rb-card__stat b {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  line-height: 1;
  /* Cifre di larghezza fissa: due dati incolonnati in card affiancate devono
     stare sulla stessa verticale. */
  font-variant-numeric: tabular-nums;
  color: var(--rb-navy);
}

.rb-theme-dark .rb-card__stat b,
.rb-section--dark .rb-card__stat b { color: #fff; }

.rb-card__stat span {
  font-family: var(--rb-font-text);
  font-size: var(--rb-small);
  line-height: var(--rb-lh-body);
  color: var(--rb-muted);
}

/* Card con illustrazione 3D: testo in alto, oggetto in basso a destra. E' la
   forma del riferimento Finom.
   Le illustrazioni sono WebP **con canale alfa**: il fondo del render e' stato
   tolto. Serviva davvero — il fondo generato non e' piatto, ha una
   vignettatura, e appiattirlo sul colore della card lasciava comunque un
   riquadro visibile attorno all'oggetto (si vedeva a 375px). Con l'alfa la
   stessa immagine sta su qualunque superficie, chiara o scura. */
.rb-card--illus { padding-bottom: 0; }
/* Il collegamento non deve piu' prendersi lo spazio libero: lo prende la
   figura, ed e' lei che va spinta in fondo. */
.rb-card--illus > .rb-link { margin-top: 0; }
.rb-card__fig {
  display: block;
  width: min(52%, 260px);
  height: auto;
  margin-top: auto;
  margin-inline-start: auto;
  margin-inline-end: calc(clamp(1.5rem, 1.2rem + 1vw, 2.25rem) * -0.5);
  margin-bottom: calc(clamp(1.5rem, 1.2rem + 1vw, 2.25rem) * -0.4);
  pointer-events: none;
}
/* Su una riga sola l'illustrazione puo' respirare di piu'. */
@media (max-width: 700px) {
  .rb-card__fig { width: min(48%, 170px); }
}

/* ==========================================================================
   Card con illustrazione di sfondo (nuova forma, bassa)
   ========================================================================== */
/* La base. Dal 04/09/2026 la usa solo la famiglia di vetro: nelle 47 pagine
   `rb-card--fig` compare 131 volte e sempre accanto a `rb-card--fig3d`, mai da
   sola. Di quello che dichiara qui sotto restano quindi in piedi due righe --
   `background-repeat` e `background-size`, che leggono `--rb-fig` -- mentre le
   altre tre le riscrive `.rb-card--fig3d`. Sono lasciate perche' sono la forma
   di partenza del meccanismo e il calcolo della fascia in fondo si legge qui:
   l'immagine piatta era quadrata di lato `min(28%, 132px)` e sporgeva di 8px
   dall'angolo, quindi saliva `lato - 8px` sopra il bordo inferiore, piu' i 14px
   di fascia che Zoran ha chiesto. Con un valore fisso il testo delle card piu'
   piene finiva SOPRA l'oggetto -- misurato su 7 pagine, 16 card su ~44.

   Le 62 regole `.rb-card--fig-<nome>` della famiglia piatta -- neutra, viola,
   verde e i tre numeri dei passi -- stavano qui e sono state tolte il
   04/09/2026, con le loro 62 immagini (932 KB) spostate in
   `assets/img/_sostituite-20260904/`. Il deploy salta le cartelle che
   cominciano per `_`, quindi quel peso non va piu' online. Nessuna pagina le
   usava piu' da quando il passaggio al vetro si e' chiuso, 131 card su 131.
   Per riprenderle: le regole stanno nel commit che le toglie, le immagini
   nella cartella. */
.rb-card--fig {
  --rb-fig: min(28%, 132px);
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) calc(100% + 2px);
  background-size: var(--rb-fig);
  padding-bottom: calc(var(--rb-fig) - 8px + 14px);
}

/* ---- Prova: icone 3D in vetro (metodo Higgsfield + tools/icona_riquadro.py) ----
   Qui il margine di 16px dal bordo destro e da quello inferiore e' gia' dentro
   l'immagine, calcolato in aritmetica dallo script. Quindi la regola non deve
   aggiungerlo una seconda volta: l'ancoraggio torna a `100% 100%` e sparisce
   la sporgenza di 8px, che era una correzione ottica sulle figure vecchie.
   Lo spazio in fondo si ricalcola di conseguenza: l'oggetto arriva al massimo
   a `--rb-fig - 16px` dal bordo, piu' i 14px di fascia che Zoran ha chiesto. */
.rb-card--fig3d {
  /* Il tetto di 132px della famiglia neutra qui non si raggiungeva mai: nella
     card da 382px il 28% vale 107px e l'oggetto, che occupa 200/264 del quadro,
     ne legge 81. A quella misura la rifrazione del vetro sparisce e l'icona
     diventa una macchia scura. La percentuale e' salita quindi a 46%, scelta
     perche' portava a 132px veri sia la card da 382px della griglia a tre
     colonne sia quella da 281px della griglia a quattro.

     Il 30/08 il quadro degli oggetti e' passato da 264 a 320 per fare posto
     alla fascia dell'ombra, come era gia' successo ai numeri: l'oggetto dentro
     il quadro non occupa piu' 200/264 ma 200/320. Perche' a schermo resti alto
     100px come prima, e come le cifre dei numeri, la misura del quadro va
     scalata dello stesso rapporto: il tetto da 132 a 160px (132 x 320/264) e la
     percentuale da 46 a 56 (46 x 320/264). Con questi due numeri l'oggetto
     misura esattamente quanto misurava prima su ogni larghezza di card: 100px
     sulla card da 382px, 98px su quella da 281px. Il tetto continua a far
     rimpicciolire la figura da sola sulle card piu' strette.

     Il 04/09 il quadro e' passato da 320x320 a **340x320**, e i due numeri si
     sono riscalati un'altra volta con lo stesso conto: tetto 170 (160 x
     340/320) e percentuale 59,5 (56 x 340/320). L'altezza a schermo non
     cambia di un pixel -- resta `--rb-fig x 200/340`, cioe' 100px sulla card
     da 382 -- ed e' facile verificarlo: i due fattori si annullano.

     Perche' il quadro si allarga. Dal 04/09 la figura e' normalizzata
     sull'ALTEZZA: 200px per tutte e ventidue, che e' quello che l'occhio
     confronta fra un'icona e l'altra. Prima entrava nella casella il lato
     lungo, e per una figura larga e bassa quel lato era la larghezza: la
     stretta di mano usciva alta 149 invece di 200, cioe' 75px a schermo contro
     i 100 di tutte le altre, sulla stessa pagina. Normalizzata sull'altezza
     pero' e' larga 292, e con 32 di margine non sta nei 320. Il quadro si
     allarga quindi a 340 **per tutte**, non solo per lei: la misura si da' con
     `background-size: var(--rb-fig)`, che vale per la LARGHEZZA, quindi due
     immagini larghe diversamente darebbero due altezze di figura diverse a
     schermo. Larghezza unica dell'immagine e altezza unica della figura sono
     la stessa regola scritta due volte; l'una senza l'altra non serve. */
  --rb-fig: min(59.5%, 170px);
  background-position: 100% 100%;
  /* IL CASO NORMALE E' QUESTO: l'oggetto sta nella fascia in fondo e il testo
     corre per tutta la larghezza della card, sopra di lui.

     Fino al 30/08 il caso normale era l'opposto -- testo a sinistra, oggetto
     nella colonna di destra -- e l'affiancamento si spegneva solo sotto i
     700px di finestra. Ma la larghezza che conta e' quella della CARD, non
     quella della finestra, e le due non vanno insieme: a 1440px la stessa
     pagina tiene card da 384px nella griglia a tre colonne e card da 904px in
     una riga. Sulle prime la colonna di testo affiancata valeva 220px, cioe'
     13 caratteri per riga sul titolo e 23 sul corpo -- misurato, non stimato --
     e il titolo andava a capo quattro volte. Nessuna media query sulla
     finestra puo' separare quei due casi, perche' convivono nella stessa
     finestra.

     Quindi il default e' la disposizione che non ha bisogno di larghezza, e
     l'affiancamento torna solo nei due contesti dove la card e' larga davvero:
     la griglia a due colonne sopra i 1000px e la riga libera.

     Censimento del 04/09, a passaggio al vetro finito: le card di vetro sono
     **tutte** quelle con un'illustrazione, 131, di cui 81 in `rb-grid--3` (7
     sono numeri), 42 in `rb-grid--2`, 6 in `rb-grid--bento` e 2 in `rb-row`.
     Le larghe restano quindi i due contesti di sempre; il bento e' l'unico
     nuovo, e ha una regola sua piu' sotto perche' li' l'icona va
     rimpicciolita. (Il censimento precedente, del 30/08, contava 32 card: 20,
     10 e 2. Le altre 99 erano ancora sulle figure piatte del 21/08.)

     Dal fondo del quadro alla cima della figura ci sono 288: l'altezza del
     quadro, 320, meno i 32 di margine sopra. Il denominatore pero' e' 340,
     cioe' la LARGHEZZA, perche' e' li' che `--rb-fig` si misura. Piu' i 14px
     di gronda. */
  padding-bottom: calc(var(--rb-fig) * 288 / 340 + 14px);
}

/* L'affiancamento: il testo si ferma prima della figura e le lascia la colonna
   di destra, cosi' la fascia vuota sotto un testo di due righe sparisce e la
   card e' alta quanto il piu' alto fra il testo e l'oggetto.

   Quanto si ferma prima si legge dentro il quadro: la figura sta a 32 dal
   bordo destro, quindi il suo fianco sinistro dista `32 + larghezza` dei 340
   del quadro. Da qui `--rb-fig x riserva/340`, piu' una gronda di 12px. La
   riserva sta in `--rb-fig-riserva`, ed e' scritta una per icona piu' sotto
   perche' dal 04/09 la larghezza della figura non e' piu' la stessa per
   tutte.

   `min-height` e' scritto in pixel e non con `var(--rb-fig)` perche' li' dentro
   c'e' una percentuale, e una percentuale in `min-height` si misura
   sull'altezza del contenitore, non sulla larghezza: la regola diventava un
   no-op silenzioso. 160px e' l'altezza del quadro della figura, margini e
   fascia dell'ombra compresi: sotto quella misura una card di una riga sola
   taglierebbe l'oggetto ancorato in fondo.

   La soglia dei 1000px per la griglia a due non e' tonda per comodita': e'
   dove la colonna affiancata smette di strozzare il testo. Misurata su
   people-accounts: a 1000px la card vale 450px e la colonna 293, cioe' 24
   caratteri per riga sul titolo e due righe; a 860px la card scende a 382 e la
   colonna a 227, cioe' 19 caratteri e tre righe; a 760px siamo a 187 e 16.

   I numeri sono esclusi per nome. La loro regola, piu' sotto, tiene gia' il
   testo a tutta larghezza per due motivi che valgono a ogni larghezza di card:
   la stringa e' larga fino a 196px e sfonderebbe la colonna riservata, e sono
   proprio le card di cui Zoran aveva chiesto di allargare il testo. Quella
   regola pero' vale una classe sola, mentre queste due ne contano due, quindi
   senza l'esclusione l'affiancamento le riprenderebbe il giorno che un numero
   finisse in una griglia a due. Oggi non ce n'e' nessuno: censite tutte e
   cinque le classi su tutte le pagine. */
/* `:not(.rb-grid--split)` esclude la griglia a due annidata dentro una colonna
   di split: li' la card non vale 450px ma 272, e la colonna di testo affiancata
   scenderebbe a 116px, cioe' nove caratteri per riga -- misurato su
   people-cards. La finestra e' larga 1440 lo stesso, quindi la media query da
   sola non sa distinguere i due casi: quello che cambia e' il contenitore. */
@media (min-width: 1000px) {
  :not(.rb-grid--split) > .rb-grid--2 > .rb-card--fig3d:not([class*="--fig3d-num"]) {
    padding-right: calc(var(--rb-fig) * var(--rb-fig-riserva, 324) / 340 + 12px);
    padding-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    min-height: 170px;
  }
}
/* La riga libera non divide in colonne: la card ci sta larga quanto il
   contenitore, quindi la colonna affiancata e' comoda gia' molto prima. */
@media (min-width: 700px) {
  .rb-row > .rb-card--fig3d:not([class*="--fig3d-num"]) {
    padding-right: calc(var(--rb-fig) * var(--rb-fig-riserva, 324) / 340 + 12px);
    padding-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    min-height: 170px;
  }
}
.rb-card--fig3d-shield { background-image: url('../img/fig/v3-scudo.webp'); }
.rb-card--fig3d-receipt { background-image: url('../img/fig/v3-scontrino.webp'); }
.rb-card--fig3d-swap { background-image: url('../img/fig/v3-scambio.webp'); }
.rb-card--fig3d-card { background-image: url('../img/fig/v3-carta.webp'); }
.rb-card--fig3d-vault { background-image: url('../img/fig/v3-caveau.webp'); }
.rb-card--fig3d-lock { background-image: url('../img/fig/v3-lucchetto.webp'); }
.rb-card--fig3d-radar { background-image: url('../img/fig/v3-radar.webp'); }
.rb-card--fig3d-file { background-image: url('../img/fig/v3-documento.webp'); }
.rb-card--fig3d-users { background-image: url('../img/fig/v3-persone.webp'); }
.rb-card--fig3d-history { background-image: url('../img/fig/v3-storico.webp'); }
.rb-card--fig3d-support { background-image: url('../img/fig/v3-cuffie.webp'); }
/* Aggiunte il 29/08 perche' nel set di vetro non c'erano: le due card di
   local-payments che le usano parlano di un fornitore pagato e di un cliente
   che paga, e nessuno degli oggetti gia' disegnati diceva quella cosa. */
.rb-card--fig3d-building { background-image: url('../img/fig/v3-edificio.webp'); }
.rb-card--fig3d-wallet { background-image: url('../img/fig/v3-portafoglio.webp'); }
/* I nove del 04/09, che chiudono il passaggio al vetro: erano gli unici oggetti
   per cui il set non aveva una resa, e finche' mancavano 34 card restavano con
   le figure piatte del 21/08. Un foglio solo, 3x3, generato con il foglio A
   come riferimento — non di nuovo la prova di stile — perche' due rese
   vorrebbero dire due materiali possibili. */
.rb-card--fig3d-trending { background-image: url('../img/fig/v3-tendenza.webp'); }
.rb-card--fig3d-globe { background-image: url('../img/fig/v3-globo.webp'); }
.rb-card--fig3d-layers { background-image: url('../img/fig/v3-livelli.webp'); }
.rb-card--fig3d-check { background-image: url('../img/fig/v3-spunta.webp'); }
.rb-card--fig3d-handshake { background-image: url('../img/fig/v3-stretta.webp'); }
.rb-card--fig3d-zap { background-image: url('../img/fig/v3-fulmine.webp'); }
.rb-card--fig3d-x { background-image: url('../img/fig/v3-croce.webp'); }
.rb-card--fig3d-phone { background-image: url('../img/fig/v3-telefono.webp'); }
.rb-card--fig3d-clock { background-image: url('../img/fig/v3-orologio.webp'); }

/* La riserva a destra, una per icona.

   Quando il testo si affianca alla figura deve fermarsi prima del suo fianco
   sinistro, e quel punto si legge dentro il quadro: 32 di margine piu' la
   larghezza della figura, in trecentoquarantesimi. Fino al 04/09 era un numero
   solo, 232, perche' la figura entrava nella casella col LATO LUNGO e quindi
   nessuna era piu' larga di 200. Adesso a valere 200 e' l'altezza, la
   larghezza segue la forma e va da 109 (il telefono) a 292 (la stretta di
   mano): un numero solo o riserverebbe troppo poco alla piu' larga -- e il
   testo le finirebbe sopra -- o troppo a tutte le altre, buttando via 60px di
   riga sulle card strette.

   I valori li stampa `tools/oggetti_vetro.py` in coda a ogni foglio: non si
   ricavano a mano, si copiano da li'. Il default di 324 e' il caso peggiore,
   e serve solo se un giorno una classe restasse senza la sua riga. */
.rb-card--fig3d-shield { --rb-fig-riserva: 189; }
.rb-card--fig3d-receipt { --rb-fig-riserva: 177; }
.rb-card--fig3d-swap { --rb-fig-riserva: 199; }
.rb-card--fig3d-card { --rb-fig-riserva: 189; }
.rb-card--fig3d-vault { --rb-fig-riserva: 218; }
.rb-card--fig3d-lock { --rb-fig-riserva: 158; }
.rb-card--fig3d-radar { --rb-fig-riserva: 213; }
.rb-card--fig3d-file { --rb-fig-riserva: 161; }
.rb-card--fig3d-users { --rb-fig-riserva: 238; }
.rb-card--fig3d-history { --rb-fig-riserva: 213; }
.rb-card--fig3d-support { --rb-fig-riserva: 207; }
.rb-card--fig3d-building { --rb-fig-riserva: 194; }
.rb-card--fig3d-wallet { --rb-fig-riserva: 216; }
.rb-card--fig3d-trending { --rb-fig-riserva: 251; }
.rb-card--fig3d-globe { --rb-fig-riserva: 226; }
.rb-card--fig3d-layers { --rb-fig-riserva: 240; }
.rb-card--fig3d-check { --rb-fig-riserva: 256; }
.rb-card--fig3d-handshake { --rb-fig-riserva: 324; }
.rb-card--fig3d-zap { --rb-fig-riserva: 142; }
.rb-card--fig3d-x { --rb-fig-riserva: 200; }
.rb-card--fig3d-phone { --rb-fig-riserva: 131; }
.rb-card--fig3d-clock { --rb-fig-riserva: 212; }

/* Le celle del bento vogliono l'icona piu' piccola, e la loro regola
   (`--rb-fig: min(20%, 88px)`) e' scritta sulla famiglia neutra, dove
   l'immagine E' l'oggetto. Nel vetro l'oggetto occupa 200 dei 320 del quadro,
   quindi con quel valore usciva alto 48px invece di 77 e diventava la macchia
   scura di cui parla il commento della regola comune: piu' piccolo, l'oggetto
   perde la rifrazione e non si legge piu'.

   Il fattore e' 320/200, cioe' 1,6, applicato a tutte e due le misure: 20% ->
   32%, 88px -> 141px. Su una cella da 384px il quadro vale 123px e l'oggetto
   77px, esattamente l'altezza che aveva l'icona neutra. Il `padding-bottom`
   si rifa' da solo, perche' e' scritto sulla variabile.

   Serve dal 04/09, quando le sei celle del bento della home sono passate al
   vetro: prima nessuna card di vetro stava dentro un bento. */
.rb-grid--bento > .rb-card--fig3d:not(:first-child) {
  --rb-fig: min(34%, 150px);
}

/* I numeri. Stanno nella famiglia di vetro come tutto il resto del set: stesso
   materiale, stessa vista frontale, stessa misura sulla card. Non hanno
   variante d'area, un numero e' lo stesso su People e su Business.

   Sono normalizzati sull'ALTEZZA DEI CARATTERI e non sulla larghezza del
   quadro: la cifra e' alta 200px in tutte e cinque, e la stringa piu' lunga
   cresce in larghezza invece di rimpicciolire. Normalizzando sulla larghezza,
   "180" e "1 day" uscivano con le aste piu' sottili di "23".
   Dove ci sono lettere, le lettere sono piu' basse delle cifre.

   I 200px sono la misura che leggono anche gli oggetti di vetro dentro il loro
   quadro: cosi' la cifra arriva alla stessa altezza del documento, dello scudo e
   di tutti gli altri, che e' quello che Zoran ha chiesto il 29/08 guardando la
   2.2 accanto alla 2.4 di people-accounts. Prima la cifra era alta 111 e
   accanto a un oggetto sembrava un'altra famiglia.

   Il quadro quindi non e' quadrato: alto 320 come quello degli oggetti, largo
   quanto serve alla stringa. Da qui le due regole qui sotto. */
.rb-card--fig3d-num23 { background-image: url('../img/fig/v3-num-23.webp'); }
.rb-card--fig3d-num38 { background-image: url('../img/fig/v3-num-38.webp'); }
.rb-card--fig3d-num180 { background-image: url('../img/fig/v3-num-180.webp'); }
.rb-card--fig3d-num24h { background-image: url('../img/fig/v3-num-24h.webp'); }
.rb-card--fig3d-num1day { background-image: url('../img/fig/v3-num-1day.webp'); }

/* La larghezza del quadro di ciascun numero, che alla regola qui sotto serve
   per misurare sull'asse giusto. Non e' la stessa per tutti, ed e' il motivo
   per cui questa riga esiste: le cifre sono alte 200 e la stringa cresce in
   larghezza, quindi il quadro va da 266 ("38") a 409 ("1 day"). Sono le
   larghezze vere dei file, non stimate. */
.rb-card--fig3d-num23 { --rb-fig-largh: 272; }
.rb-card--fig3d-num38 { --rb-fig-largh: 266; }
.rb-card--fig3d-num180 { --rb-fig-largh: 325; }
.rb-card--fig3d-num24h { --rb-fig-largh: 328; }
.rb-card--fig3d-num1day { --rb-fig-largh: 409; }

/* 1. I numeri leggono `--rb-fig` sullo STESSO ASSE degli oggetti, la
      larghezza, e da questa riga in giu' non hanno piu' un valore loro.
      Fino al 04/09 la misura si prendeva sull'altezza -- `background-size:
      auto var(--rb-fig)` -- perche' il quadro di un numero e' alto 320 come
      quello di un oggetto ma largo quanto la stringa, da 266 ("38") a 409
      ("1 day"), e con la regola comune "1 day" sarebbe uscito alto 47.

      Prendere la misura sull'altezza pero' vuol dire che la percentuale
      dentro `--rb-fig` si risolve sull'ALTEZZA della card, mentre per gli
      oggetti si risolve sulla larghezza: sono due grandezze diverse, e
      combaciano solo quando tutte e due arrivano al loro tetto. Sotto i 700px
      su una card da 334 l'oggetto stava sotto il tetto (170,3 di 176) e il
      numero al suo (166): uscivano 99,6px contro 103,8, il 4% di scarto, con
      le card una sull'altra e il confronto immediato.

      La cura e' misurare anche i numeri sulla larghezza, riportando ciascuno
      al quadro da 340 degli oggetti: `--rb-fig x larghezza / 340`. Il fattore
      di scala che ne esce e' `--rb-fig / 340`, cioe' esattamente quello degli
      oggetti, per costruzione e a ogni larghezza di card -- non solo ai
      tetti. Da qui in avanti la cifra e' alta quanto l'oggetto ovunque:
      griglia a tre, a quattro, bento, sotto i 700px. Le due regole che
      davano ai numeri un `--rb-fig` tutto loro -- quella del bento e quella
      stretta -- sono state tolte: adesso ereditano e basta.
   2. Il testo torna a tutta larghezza e l'icona si prende la fascia in fondo,
      come nella griglia stretta. La colonna riservata a destra dalla regola
      comune vale 132px, e una stringa larga fino a 196px l'avrebbe sfondata;
      soprattutto, il testo di quelle card e' quello che Zoran ha chiesto di
      allargare.
   3. Il quadro e' alto 320 come quello degli oggetti, per la stessa fascia
      d'ombra sfumata e per la coda della `y` di "1 day", che scende 48px
      sotto la linea di base.
   4. Le cifre cominciano a 20 dei 320 del quadro, cioe' a un sedicesimo
      dall'alto. La fascia da riservare in fondo e' quindi il quadro meno quel
      sedicesimo -- `--rb-fig x 320/340 x 15/16`, che si semplifica in
      `--rb-fig x 300/340` -- piu' i 14px di gronda. E' la stessa forma del
      `288/340` degli oggetti, dove a mancare sono i 32 di margine sopra. */
.rb-card--fig3d-num23,
.rb-card--fig3d-num38,
.rb-card--fig3d-num180,
.rb-card--fig3d-num24h,
.rb-card--fig3d-num1day {
  background-size: calc(var(--rb-fig) * var(--rb-fig-largh) / 340) auto;
  padding-right: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  padding-bottom: calc(var(--rb-fig) * 300 / 340 + 14px);
  min-height: 0;
}

/* Correzione mia al punto 4 del briefing, che il costruttore aveva mancato.
   La fascia da 44px basta finche' la card e' larga: a 375px l'oggetto e' alto
   127px, quindi 83px di lui stanno accanto al testo, e l'ultima riga del
   paragrafo gli finiva sopra fino a 76px. Misurato, non dedotto.
   Cura: sotto i 700px l'oggetto si rimpicciolisce e l'ultimo blocco di testo
   si tiene una riserva a destra larga quanto lui. */
/* La misura si scrive dentro `--rb-fig` e non dentro `background-size`, che la
   legge da li'. Scritta due volte, le due si erano separate: nelle celle del
   bento `--rb-fig` vale min(20%, 88px) dal 29/08, ma `background-size` diceva
   104px per conto suo, quindi l'icona veniva disegnata piu' grande dello spazio
   che il `padding-bottom` -- calcolato su `--rb-fig` -- le riservava. A 390px
   cinque celle della home avevano l'ultima riga di testo sopra l'icona, di 50px.
   Difetto vecchio, trovato misurando il giro sui testi del 30/08.

   Passando dalla variabile ogni conto torna allineato da solo, e le celle del
   bento tengono i loro 88px perche' la loro regola e' piu' specifica di questa
   -- che e' quello che si vuole: sono gia' piu' piccole. */
@media (max-width: 700px) {
  .rb-card--fig { --rb-fig: min(30%, 104px); }
  .rb-card--fig > *:last-child { padding-right: var(--rb-fig); }
  /* Stessa conversione del bento, stesso fattore 320/200: 30% -> 48%,
     104px -> 166px, e l'oggetto resta alto quanto era. Dal 04/09 i due valori
     si riscalano ancora di 340/320, col quadro: 51% e 176px. La riserva a
     destra dell'ultimo blocco invece non e' tutto il quadro: la figura sta a
     32 dal bordo e occupa `riserva/340`, il resto e' aria trasparente.
     Riservare il quadro intero toglierebbe al testo fino a 100px di niente su
     una card larga 375. */
  /* Questa riga prende anche i numeri, ed e' giusto cosi' dal 04/09: da
     quando misurano sulla larghezza come gli oggetti, `--rb-fig` vuol dire la
     stessa cosa per tutti e due e un valore solo basta. Fino a quel giorno i
     numeri avevano qui una riga loro, min(48%, 166px), perche' leggevano la
     variabile sull'altezza; era una pezza che teneva ai tetti e cedeva sotto,
     ed e' il 4% di scarto raccontato nel commento della loro regola. */
  .rb-card--fig3d { --rb-fig: min(51%, 176px); }
  .rb-card--fig3d > *:last-child { padding-right: calc(var(--rb-fig) * var(--rb-fig-riserva, 324) / 340); }
}

/* ---- Stampa: niente illustrazioni ---- */
@media print {
  .rb-card--fig {
    background-image: none;
  }
}

/* Aggiunta mia: il briefing chiedeva anche il comportamento su sezione scura e
   il costruttore l'ha saltato. Le illustrazioni sono navy e arancio su fondo
   trasparente: su una sezione scura il navy sparisce, quindi si schiariscono
   alzando la luminosita' senza toccare la tinta — mai un filtro di colore. */
.rb-theme-dark .rb-card--fig,
.rb-section--dark .rb-card--fig { background-blend-mode: normal; }
.rb-theme-dark .rb-card--fig::after,
.rb-section--dark .rb-card--fig::after { content: none; }

.rb-card--flat { border-color: var(--rb-line); }
.rb-card--flat:hover { transform: none; box-shadow: var(--rb-shadow-sm); }
.rb-card--alt { background-color: var(--rb-surface-alt); border-color: transparent; }
.rb-card--dark { background: rgba(255,255,255,0.05); border-color: var(--rb-on-dark-line); color: var(--rb-on-dark-soft); }
.rb-card--dark h3, .rb-card--dark h4 { color: #fff; }
.rb-card--dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }

/* Card grande d'ingresso a una sezione (People / Business in home) */
.rb-card-lead {
  --rb-lead: var(--rb-navy);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--rb-r-lg);
  background: #fff;
  border: 1px solid var(--rb-line);
  overflow: hidden;
  transition: transform var(--rb-t) var(--rb-ease), box-shadow var(--rb-t) var(--rb-ease);
}
.rb-card-lead:hover { transform: translateY(-6px); box-shadow: var(--rb-shadow-lg); }
.rb-card-lead__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rb-surface-alt); }
/* `:not(.rb-card-lead__card)` e' obbligatorio: dentro la media ci sono DUE
   immagini, la fotografia e il mockup della carta. Senza l'esclusione anche
   la carta prendeva `height: 100%` + `object-fit: cover`, veniva stirata
   all'altezza del riquadro e ritagliata — sembrava un problema di overflow
   e non lo era. */
.rb-card-lead__media > img:not(.rb-card-lead__card) {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--rb-ease);
}
.rb-card-lead:hover .rb-card-lead__media > img:not(.rb-card-lead__card) { transform: scale(1.05); }
.rb-card-lead__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--rb-lead) 72%, transparent), transparent 62%);
}
/* La carta sta INTERAMENTE dentro il riquadro della foto: prima sporgeva
   sotto (`bottom: -14%`) e il ritaglio della media la tagliava a meta'.
   Sta in basso a sinistra, dove nelle due fotografie c'e' sfondo e non il
   soggetto, e sopra la sfumatura scura che il ::after disegna gia' li'. */
.rb-card-lead__card {
  position: absolute;
  left: 5%;
  bottom: 6%;
  width: 34%;
  max-width: 168px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(15,32,56,0.45));
  transform: rotate(-6deg);
  transition: transform 620ms var(--rb-ease);
  z-index: 2;
}
.rb-card-lead:hover .rb-card-lead__card { transform: rotate(-3deg) translateY(-6px); }
.rb-card-lead__body { padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
/* `align-self` serve: il corpo della card e' un flex in colonna, e senza
   questo il logo si stira per tutta la larghezza invece di stare a sinistra
   con la sua larghezza vera. */
.rb-card-lead__logo { height: 36px; width: auto; align-self: flex-start; margin-bottom: 0.35rem; }
.rb-card-lead--people { --rb-lead: var(--rb-people); }
.rb-card-lead--business { --rb-lead: var(--rb-business); }

/* ==========================================================================
   4. LISTA A SPUNTE     Divi: modulo Blurb ripetuto, o Testo con lista
   ========================================================================== */
.rb-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.rb-checks li {
  position: relative;
  margin: 0;
  padding-left: 2.25rem;
  line-height: 1.5;
}
/* La spunta e' il segno e basta: niente pastiglia tonda dietro. */
.rb-checks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.15em;
  width: 1.35rem; height: 1.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8410f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rb-theme-dark .rb-checks li::before,
.rb-section--dark .rb-checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a5c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.rb-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2rem; }
@media (max-width: 620px) { .rb-checks--2 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   5. BLURB CON ICONA    Divi: modulo Blurb
   ========================================================================== */
.rb-blurb { display: flex; flex-direction: column; gap: 0.7rem; }
/* Icona nuda: niente riquadro di sfondo, il segno occupa tutto lo spazio che
   prima occupava il riquadro (52px invece di 26). Resta il colore, che e'
   quello che distingue People, Business e le sezioni scure. */
.rb-blurb__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  color: var(--rb-orange-deep);
  transition: transform var(--rb-t) var(--rb-ease), color var(--rb-t) var(--rb-ease);
}
.rb-blurb__icon svg { width: 52px; height: 52px; }
.rb-blurb:hover .rb-blurb__icon { transform: translateY(-3px) rotate(-4deg); }
.rb-blurb h4 { margin-bottom: 0; }
.rb-blurb p { margin-bottom: 0; }
.rb-theme-dark .rb-blurb__icon,
.rb-section--dark .rb-blurb__icon { color: var(--rb-orange-light); }
.rb-blurb--people .rb-blurb__icon { color: var(--rb-people); }
.rb-blurb--business .rb-blurb__icon { color: var(--rb-business); }
.rb-blurb--inline { flex-direction: row; align-items: flex-start; gap: 1rem; }
.rb-blurb--inline .rb-blurb__icon { flex: none; width: 44px; height: 44px; }
.rb-blurb--inline .rb-blurb__icon svg { width: 44px; height: 44px; }

/* ==========================================================================
   6. NUMERI / STAT      Divi: modulo Number Counter
   ========================================================================== */
.rb-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--rb-gap-lg); }
@media (max-width: 780px) { .rb-stats { grid-template-columns: minmax(0,1fr); gap: var(--rb-gap); } }
.rb-stat { position: relative; padding-left: 1.75rem; }
.rb-stat::before {
  content: '';
  position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--rb-orange), rgba(233,83,29,0.15));
}
.rb-stat__num {
  display: block;
  font-family: var(--rb-font-display);
  font-size: clamp(3rem, 2.2rem + 3.4vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--rb-ink);
  font-variant-numeric: tabular-nums;
}
.rb-stat p { margin: 0.7rem 0 0; font-size: 1rem; color: var(--rb-body); max-width: 30ch; }

/* ==========================================================================
   7. ACCORDION          Divi: modulo Accordion + preset "Reibanq FAQ Item"
   ========================================================================== */
.rb-acc { display: grid; gap: 0.85rem; }
.rb-acc__item {
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r);
  overflow: hidden;
  transition: border-color var(--rb-t) var(--rb-ease), box-shadow var(--rb-t) var(--rb-ease);
}
.rb-acc__item[open] { border-color: rgba(233,83,29,0.35); box-shadow: var(--rb-shadow-sm); }
.rb-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  font-family: var(--rb-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--rb-navy);
  cursor: pointer;
  list-style: none;
  transition: color var(--rb-t) var(--rb-ease);
}
.rb-acc__q::-webkit-details-marker { display: none; }
.rb-acc__q:hover { color: var(--rb-orange-deep); }
.rb-acc__item[open] .rb-acc__q { color: var(--rb-orange-deep); }
.rb-acc__q::after {
  content: '';
  flex: none;
  width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8410f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--rb-t) var(--rb-ease);
}
.rb-acc__item[open] .rb-acc__q::after { transform: rotate(135deg); }
.rb-acc__a { padding: 0 1.5rem 1.35rem; color: var(--rb-body); }
.rb-acc__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   8. TABELLA PREZZI     Divi: modulo Pricing Table
   ========================================================================== */
.rb-plans { display: grid; gap: var(--rb-gap); align-items: start; }
.rb-plans--2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 860px; margin-inline: auto; }
.rb-plans--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px) { .rb-plans--3 { grid-template-columns: minmax(0,1fr); max-width: 520px; margin-inline: auto; } }
@media (max-width: 620px) { .rb-plans--2 { grid-template-columns: minmax(0,1fr); max-width: 460px; } }

.rb-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-lg);
  transition: transform var(--rb-t) var(--rb-ease), box-shadow var(--rb-t) var(--rb-ease);
}
.rb-plan:hover { transform: translateY(-4px); box-shadow: var(--rb-shadow); }
.rb-plan--featured {
  border-color: transparent;
  box-shadow: var(--rb-shadow-lg);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, var(--rb-orange), var(--rb-navy)) border-box;
  border: 2px solid transparent;
}
.rb-plan__flag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.9rem;
  font-family: var(--rb-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rb-orange-deep);
  border-radius: var(--rb-r-pill);
  white-space: nowrap;
}
.rb-plan__name { margin-bottom: 0.15rem; }
.rb-plan__who { font-size: var(--rb-small); color: var(--rb-muted); margin-bottom: 1.1rem; }
.rb-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--rb-font-display);
  color: var(--rb-ink);
  margin-bottom: 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--rb-line);
}
.rb-plan__cur { font-size: 1.5rem; font-weight: 600; }
.rb-plan__amt { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.rb-plan__per { font-size: 1rem; font-weight: 400; color: var(--rb-muted); font-family: var(--rb-font-text); }
.rb-plan__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.55rem; font-size: 1rem; }
.rb-plan__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--rb-line);
}
.rb-plan__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.rb-plan__list b { font-family: var(--rb-font-display); white-space: nowrap; }
.rb-plan__list .rb-free { color: #0a6767; }
.rb-plan .rb-btn { margin-top: auto; }

/* ==========================================================================
   9. TICKER VALUTE      Divi: modulo Code (decorazione, nessun testo di prodotto)
   ========================================================================== */
.rb-ticker { position: relative; overflow: hidden; padding-block: 1.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* 0.85rem e non 3rem: le pastiglie hanno gia' il loro padding, e a 3rem la
   riga si sfilaccia in oggetti isolati invece di leggersi come un nastro. */
.rb-ticker__track { display: flex; gap: 0.85rem; width: max-content; animation: rb-marquee 42s linear infinite; }
.rb-ticker:hover .rb-ticker__track { animation-play-state: paused; }
/* Ogni valuta e' una pastiglia, non due parole grigie in fila.
   Le bandierine emoji che stavano qui NON si vedono su Windows: il sistema non
   ha il glifo composito, quindi disegna le due lettere dell'indicatore
   regionale ("US", "CH") e la riga diventa un elenco di sigle doppie senza
   senso. Il codice ISO come pastiglia tipografica e' voluto, non un ripiego:
   si vede uguale su ogni sistema e non serve nessun file. */
.rb-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  border: 1px solid var(--rb-line);
  border-radius: 999px;
  background: var(--rb-surface);
  box-shadow: 0 1px 2px rgba(24, 49, 83, 0.05);
  white-space: nowrap;
  transition: transform var(--rb-t) var(--rb-ease),
              box-shadow var(--rb-t) var(--rb-ease);
}
.rb-ticker:hover .rb-ticker__item { box-shadow: 0 6px 18px rgba(24, 49, 83, 0.09); }

/* Bandiere vere, in SVG locale: `assets/flags/<iso>.svg`, disegnate a 60x40.
   Il ritaglio circolare lo fa il contenitore, cosi' i file restano rettangoli
   normali e si possono sostituire con un set ufficiale senza toccare il CSS.
   `overflow: hidden` sul cerchio e `object-fit: cover` sull'immagine: il
   rapporto 3:2 dentro un cerchio va riempito, non rimpicciolito. */
.rb-ticker__flag {
  display: block;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rb-surface-alt);
  /* il filo scuro stacca il bianco della bandiera dal bianco della pastiglia:
     senza, Giappone e Polonia sembrano cerchi vuoti */
  box-shadow: inset 0 0 0 1px rgba(24, 49, 83, 0.14);
}
.rb-ticker__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rb-ticker__code {
  font-family: var(--rb-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rb-ink);
  letter-spacing: 0.01em;
}
.rb-ticker__name {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--rb-muted);
}
/* Sotto i 640px il nome esteso raddoppia la larghezza di ogni pastiglia e il
   giro diventa lentissimo da leggere: restano cerchio e codice. */
@media (max-width: 640px) {
  .rb-ticker__name { display: none; }
  .rb-ticker__item { padding-right: 0.85rem; }
}
@keyframes rb-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rb-ticker__track { animation: none; } }

/* ==========================================================================
   10. RIGA DI FIDUCIA
   ========================================================================== */
.rb-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.rb-trust__item { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--rb-small); font-weight: 600; color: var(--rb-muted); }
.rb-trust__item svg { width: 1.15rem; height: 1.15rem; color: var(--rb-orange); }

/* ==========================================================================
   11. NOTA LEGALE
   ========================================================================== */
.rb-legal {
  padding: 1.25rem 1.5rem;
  font-size: var(--rb-small);
  line-height: 1.55;
  color: var(--rb-muted);
  background: var(--rb-surface-alt);
  border-left: 3px solid var(--rb-line-strong);
  border-radius: 0 var(--rb-r-sm) var(--rb-r-sm) 0;
}
.rb-theme-dark .rb-legal, .rb-section--dark .rb-legal { background: rgba(255,255,255,0.04); border-left-color: rgba(255,255,255,0.22); color: var(--rb-on-dark-soft); }

/* ==========================================================================
   12. BLURB IN RIGA CON IL MARCHIO
   Al posto del modello a passi numerati, tolto il 29/08/2026 su richiesta di
   Zoran: niente pallino col numero, niente filo verticale. Restano tre blurb
   uguali fra loro, con il marchio Reibanq in vetro a sinistra del testo.
   ========================================================================== */
.rb-blurbs { display: grid; gap: var(--rb-gap); }
/* Il marchio e' un'immagine, non un segno del set SVG: ha il suo riquadro
   trasparente e non prende il colore dal testo, quindi qui non vale nessuna
   delle regole di `.rb-blurb__icon`. La misura e' la stessa del riquadro
   inline, 44px, cosi' le due forme restano intercambiabili. */
.rb-blurb__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  transition: transform var(--rb-t) var(--rb-ease);
}
.rb-blurb__mark img { width: 100%; height: 100%; object-fit: contain; }
.rb-blurb:hover .rb-blurb__mark { transform: translateY(-3px); }
.rb-blurb__body { display: flex; flex-direction: column; gap: 0.4rem; }
.rb-blurb__body h3 { margin-bottom: 0; }
.rb-blurb__body p { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .rb-blurb:hover .rb-blurb__mark { transform: none; } }

/* ==========================================================================
   13. CARD DI ARTICOLO   l'elenco delle notizie
   La copertina sta in cima e arriva ai bordi, quindi la card non puo' avere il
   suo `padding`: lo porta il corpo, e la card lo azzera. `overflow: hidden` ce
   l'ha gia' .rb-card, ed e' quello che tiene l'immagine dentro gli angoli
   arrotondati.
   ========================================================================== */
.rb-post { padding: 0; gap: 0; }
.rb-post__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--rb-surface-alt);
}
.rb-post__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  padding: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
}
.rb-post__body h3 { margin: 0; }
/* Il bottone in fondo: `margin-top:auto` lo incolla alla base, cosi' i bottoni
   di card con testi di lunghezza diversa restano allineati fra loro. */
.rb-post__body .rb-btn { margin-top: auto; align-self: flex-start; }
/* La data e il tempo di lettura. Vale anche nell'eroe dell'articolo, dove il
   tema scuro cambia --rb-muted da solo. */
.rb-post__meta { font-size: var(--rb-small); color: var(--rb-muted); margin: 0; }

/* ==========================================================================
   14. HEADER            Divi: Theme Builder, layout header 250
   Richiesta esplicita: PRIMA dello sticky il fondo e' BIANCO (non
   trasparente), i testi scuri e il logo a colori — cioe' identico allo
   stato sticky. Cambia solo l'altezza e l'ombra.
   ========================================================================== */
.rb-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--rb-z-header);
  background: #fff;
  border-bottom: 1px solid var(--rb-line);
  transition: background-color var(--rb-t) var(--rb-ease), border-color var(--rb-t) var(--rb-ease),
              padding-top var(--rb-spring-t) var(--rb-spring), box-shadow var(--rb-t) var(--rb-ease);
}
.rb-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1.6vw, 2.25rem);
  height: var(--rb-header-h);
  transition: height var(--rb-spring-t) var(--rb-spring),
              max-width var(--rb-spring-t) var(--rb-spring),
              background-color var(--rb-t) var(--rb-ease),
              border-radius var(--rb-spring-t) var(--rb-spring),
              box-shadow var(--rb-t) var(--rb-ease);
}

/* Barra che si restringe (modello Aceternity "Resizable Navbar").
   Oltre i 100px di scroll l'header smette di essere una fascia attaccata al
   bordo e diventa una pastiglia piu' stretta, staccata dall'alto, in vetro.
   Il fondo bianco pieno resta lo stato di partenza, come chiesto: cambia solo
   quando si scorre. Sotto i 980px non succede: su schermo stretto una
   pastiglia che si accorcia toglierebbe spazio senza dare niente in cambio. */
/* Sotto i 980px la pastiglia non c'e', quindi l'header stuck resta la fascia
   bianca di sempre, con l'ombra: togliere il fondo li' lascerebbe i testi
   scuri sopra la pagina che scorre. */
.rb-header.is-stuck { box-shadow: 0 6px 24px -12px rgba(24,49,83,0.28); border-bottom-color: transparent; }
.rb-header.is-stuck .rb-header__inner { height: var(--rb-header-h-sticky); }

@media (min-width: 981px) {
  .rb-header.is-stuck { background: transparent; box-shadow: none; padding-top: var(--rb-header-float); }
  .rb-header.is-stuck .rb-header__inner {
    max-width: var(--rb-header-w-sticky);
    /* Il restringimento orizzontale: il contenuto rientra verso il centro
       mentre la barra diventa pastiglia. `.rb-container` non usa padding ma
       larghezza, quindi questo e' rientro pieno: 20px per lato da 1440px in
       su, calante fino a zero a 1200px, dove le sei voci e i due bottoni
       hanno gia' poco spazio e stringere ancora li farebbe toccare. */
    padding-inline: clamp(0rem, -6.25rem + 8.333vw, 1.25rem);
    background: rgba(255,255,255,0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    /* Sei strati morbidi invece di un'ombra sola: l'ultimo e' un inset bianco,
       ed e' quello che disegna il filo di luce sul bordo alto. */
    box-shadow:
      0 0 24px rgba(34,42,53,0.06),
      0 1px 1px rgba(0,0,0,0.05),
      0 0 0 1px rgba(34,42,53,0.04),
      0 0 4px rgba(34,42,53,0.08),
      0 16px 68px rgba(47,48,55,0.05),
      inset 0 0 0 1px rgba(255,255,255,0.10);
  }
}

.rb-header__logo { flex: none; display: block; }
/* Il logo non rimpicciolisce da stuck: sarebbe l'unica cosa che si muove
   mentre la barra diventa pastiglia. */
.rb-header__logo img { height: clamp(28px, 2.4vw, 34px); width: auto; }

/* Barra di avanzamento della lettura, filo arancio sul bordo basso.
   La quota letta e' la larghezza del fondo, non dell'elemento: cosi' la barra
   puo' restringersi con la pastiglia senza che il riempimento se ne accorga. */
.rb-header__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background-image: linear-gradient(90deg, var(--rb-orange), var(--rb-orange-light));
  background-repeat: no-repeat;
  background-size: calc(var(--rb-progress, 0) * 1%) 100%;
  transition: background-size 90ms linear, opacity var(--rb-t) var(--rb-ease);
  pointer-events: none;
}
@media (min-width: 981px) {
  /* Da stuck la riga sparisce: la pastiglia ha gli angoli tondi e una riga
     dritta appoggiata al bordo curvo sporge agli estremi. Qui c'era il filo
     arancio che ricalcava il perimetro della pastiglia — .rb-header__ring —
     e non funzionava: e' stato tolto, markup, stile e JS. Sotto i 980px la
     pastiglia non c'e' e la riga resta. */
  .rb-header.is-stuck .rb-header__progress { opacity: 0; }
}

/* Gap stretto: il respiro fra le voci lo da' gia' il padding dei link, che
   e' anche la larghezza del riquadro di hover. */
.rb-nav { position: relative; display: flex; align-items: center; gap: clamp(0rem, -0.3rem + 0.55vw, 0.375rem); margin-left: auto; }
/* Il riquadro di hover e' uno solo e scivola da un link all'altro: posizione e
   larghezza le mette il JS leggendo il link sotto il cursore. Un :hover per
   link darebbe sei riquadri che si accendono e si spengono, non un movimento. */
.rb-nav__pill {
  position: absolute;
  left: 0; top: 50%;
  width: 0;
  height: 36px;
  border-radius: 999px;
  background: var(--rb-surface-alt);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  transition: transform 300ms var(--rb-spring), width 300ms var(--rb-spring), opacity 180ms var(--rb-ease);
}
.rb-nav.is-hovered .rb-nav__pill { opacity: 1; }
.rb-nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  font-family: var(--rb-font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rb-navy);
  white-space: nowrap;
  transition: color var(--rb-t) var(--rb-ease);
}
.rb-nav__link::after {
  content: '';
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.15rem;
  height: 2px;
  background: var(--rb-orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--rb-t) var(--rb-ease);
}
.rb-nav__link:hover, .rb-nav__link[aria-expanded="true"], .rb-nav__link.is-current { color: var(--rb-orange-deep); }
.rb-nav__link[aria-expanded="true"]::after, .rb-nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }
.rb-nav__link svg { width: 1rem; height: 1rem; transition: transform var(--rb-t) var(--rb-ease); }
.rb-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .rb-header, .rb-header__inner, .rb-nav__pill { transition: none; }
}

.rb-header__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.rb-burger {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  color: var(--rb-navy);
  transition: background-color var(--rb-t) var(--rb-ease);
}
.rb-burger:hover { background: var(--rb-surface-alt); }
.rb-burger svg { width: 26px; height: 26px; }

/* ---- Selettore della lingua ----
   Una sola icona nell'header: il mappamondo con la sigla della lingua in
   corso. Il pannello e' un elenco, non un mega: sei voci corte non meritano
   la larghezza dell'header. Le lingue senza traduzione sono aria-disabled,
   quindi si vedono ma non si scelgono: nascondere le voci future sarebbe
   peggio, perche' non si capirebbe che il sito le prevede. */
.rb-lang { position: relative; flex: none; }
.rb-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 38px;
  padding: 0 0.6rem;
  border-radius: 999px;
  font-family: var(--rb-font-text);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rb-navy);
  transition: background-color var(--rb-t) var(--rb-ease), color var(--rb-t) var(--rb-ease);
}
.rb-lang__btn:hover, .rb-lang__btn[aria-expanded="true"] { background: var(--rb-surface-alt); color: var(--rb-orange-deep); }
.rb-lang__btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.rb-lang__caret { width: 0.875rem !important; height: 0.875rem !important; transition: transform var(--rb-t) var(--rb-ease); }
.rb-lang__btn[aria-expanded="true"] .rb-lang__caret { transform: rotate(180deg); }
.rb-lang__code { letter-spacing: 0.04em; }

.rb-lang__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: var(--rb-z-mega);
  min-width: 200px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r);
  box-shadow: var(--rb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--rb-t) var(--rb-ease), transform var(--rb-t) var(--rb-ease), visibility var(--rb-t);
}
.rb-lang__menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.rb-lang__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: var(--rb-r-sm);
  font-family: var(--rb-font-text);
  font-size: 0.9375rem;
  color: var(--rb-body);
  text-align: left;
  transition: background-color var(--rb-t) var(--rb-ease), color var(--rb-t) var(--rb-ease);
}
.rb-lang__tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--rb-muted); }
.rb-lang__item[aria-current="true"] { color: var(--rb-navy); font-weight: 600; background: var(--rb-surface-alt); }
.rb-lang__item[aria-current="true"] .rb-lang__tag { color: var(--rb-orange-deep); }
.rb-lang__item[aria-disabled="true"] { color: var(--rb-muted); cursor: default; }
.rb-lang__item:not([aria-disabled="true"]):hover { background: var(--rb-orange-soft); color: var(--rb-orange-deep); }

/* Nel cassetto le stesse voci senza il riquadro: il pannello lo fa gia' lui */
.rb-drawer__panel--lang .rb-lang__item { padding: 0.6rem 0 0.6rem 1rem; border-left: 2px solid var(--rb-line); border-radius: 0; }
.rb-drawer__panel--lang .rb-lang__item[aria-current="true"] { background: none; border-left-color: var(--rb-orange); }

/* ---- Mega menu (impianto Wise, movimento Aceternity "Navbar Menu") ----
   Il riquadro e' uno solo, condiviso fra People e Business: passando da una
   voce all'altra non si chiude e si riapre, cambia altezza. L'altezza in pixel
   la scrive il JS, perche' i due pannelli hanno un numero di link diverso e
   `height: auto` non si anima.
   Il vuoto fra la barra e il riquadro e' il padding-top del guscio, non un
   margine: se fosse vuoto vero il mouse che lo attraversa uscirebbe
   dall'header e il menu si chiuderebbe a meta' strada. */
.rb-mega-shell {
  position: absolute;
  top: 100%; left: 50%;
  width: min(100% - (var(--rb-gutter) * 2), var(--rb-container));
  padding-top: 10px;
  z-index: var(--rb-z-mega);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px) scale(0.97);
  transform-origin: top center;
  transition: opacity 200ms var(--rb-ease), transform 260ms var(--rb-spring), visibility 260ms, width var(--rb-spring-t) var(--rb-spring);
}
/* Da stretta il riquadro segue la pastiglia: un pannello largo 1200 sotto una
   barra da 1040 sembrerebbe appeso storto. */
@media (min-width: 981px) {
  .rb-header.is-stuck .rb-mega-shell { width: var(--rb-header-w-sticky); }
}
.rb-mega-shell.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.rb-mega-shell__box {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(24,49,83,0.10);
  border-radius: var(--rb-r-lg);
  box-shadow: var(--rb-shadow-lg);
  transition: height 260ms var(--rb-spring);
}
.rb-mega {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--rb-ease);
}
.rb-mega.is-open { opacity: 1; pointer-events: auto; }
.rb-mega__grid { display: grid; grid-template-columns: 0.9fr 1fr 1fr; gap: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); }
.rb-mega__promo {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.15rem;
  background: var(--rb-surface-alt);
  border-radius: var(--rb-r);
  transition: background-color var(--rb-t) var(--rb-ease);
}
.rb-mega__promo:hover { background: var(--rb-orange-soft); }
.rb-mega__promo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--rb-r-sm); }
/* Era un <h4>, ma il megamenu sta nel guscio e quindi precede l'<h1> di ogni
   pagina: la sequenza dei titoli partiva 4 4 1 su tutte e 46 (SEO-004). Ora e'
   un <p> e la resa si rifa' qui. Il selettore prende due classi perche' la
   regola dei paragrafi qui sotto e' piu' specifica di una classe sola. */
.rb-mega__promo .rb-mega__promo-t {
  margin: 0;
  font-family: var(--rb-font-display);
  color: var(--rb-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.rb-mega__promo p { margin: 0; font-size: var(--rb-small); color: var(--rb-muted); }
.rb-mega__col { display: flex; flex-direction: column; gap: 0.2rem; }
.rb-mega__title {
  font-family: var(--rb-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rb-muted);
  margin-bottom: 0.7rem;
}
.rb-mega__link {
  display: block;
  padding: 0.6rem 0.75rem;
  margin-inline: -0.75rem;
  border-radius: var(--rb-r-sm);
  transition: background-color var(--rb-t) var(--rb-ease);
}
.rb-mega__link:hover { background: var(--rb-surface-alt); }
.rb-mega__link strong { display: block; font-family: var(--rb-font-display); font-size: 1rem; font-weight: 600; color: var(--rb-navy); }
.rb-mega__link span { display: block; font-size: 0.875rem; line-height: 1.45; color: var(--rb-muted); }
.rb-mega__link:hover strong { color: var(--rb-orange-deep); }
@media (prefers-reduced-motion: reduce) {
  .rb-mega-shell, .rb-mega-shell__box, .rb-mega { transition: none; }
}

/* ---- Cassetto mobile ---- */
.rb-drawer {
  position: fixed;
  inset: var(--rb-header-h-sticky) 0 0;
  z-index: var(--rb-z-drawer);
  background: #fff;
  overflow-y: auto;
  padding: 1.5rem var(--rb-gutter) 3rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rb-t) var(--rb-ease), transform var(--rb-t) var(--rb-ease), visibility var(--rb-t);
  overscroll-behavior: contain;
}
.rb-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.rb-drawer__group { border-bottom: 1px solid var(--rb-line); }
.rb-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  font-family: var(--rb-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--rb-navy);
  text-align: left;
}
.rb-drawer__toggle svg { width: 22px; height: 22px; transition: transform var(--rb-t) var(--rb-ease); flex: none; }
.rb-drawer__toggle[aria-expanded="true"] { color: var(--rb-orange-deep); }
.rb-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.rb-drawer__panel { display: none; padding-bottom: 0.75rem; }
.rb-drawer__panel.is-open { display: block; }
.rb-drawer__panel a { display: block; padding: 0.6rem 0 0.6rem 1rem; border-left: 2px solid var(--rb-line); color: var(--rb-body); }
.rb-drawer__panel a:hover { color: var(--rb-orange-deep); border-left-color: var(--rb-orange); }
.rb-drawer__actions { display: grid; gap: 0.75rem; margin-top: 1.75rem; }

@media (max-width: 1080px) {
  .rb-nav__link { font-size: 0.875rem; padding-inline: 0.5rem; }
}
@media (max-width: 980px) {
  .rb-nav, .rb-mega-shell, .rb-lang, .rb-header__actions .rb-btn--secondary { display: none; }
  .rb-burger { display: grid; }
  /* Il gruppo dei comandi va spinto al bordo destro. Sopra i 980px lo faceva
     la barra di navigazione, che occupa il centro e cresce; qui e' nascosta,
     e senza questo margine automatico l'hamburger restava appiccicato al
     logo con mezzo schermo vuoto alla sua destra. */
  .rb-header__actions { margin-left: auto; }
  .rb-header__inner { height: var(--rb-header-h-sticky); }
}
@media (max-width: 520px) {
  .rb-header__actions .rb-btn { display: none; }
}

/* Spaziatore: il body non finisce sotto l'header fisso */
.rb-header-space { height: var(--rb-header-h); }
@media (max-width: 980px) { .rb-header-space { height: var(--rb-header-h-sticky); } }

/* ==========================================================================
   15. FOOTER            Divi: layout footer 251
   ========================================================================== */
.rb-footer { background: var(--rb-navy-900); color: var(--rb-on-dark-soft); padding-block: clamp(3rem, 2rem + 3.5vw, 5rem) 2rem; }
.rb-footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--rb-gap-lg); padding-bottom: 3rem; border-bottom: 1px solid var(--rb-on-dark-line); }
@media (max-width: 980px) { .rb-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rb-footer__top { grid-template-columns: 1fr; gap: var(--rb-gap); } }
.rb-footer__brand img { height: 34px; width: auto; margin-bottom: 1rem; }
.rb-footer__brand p { font-size: var(--rb-small); max-width: 32ch; }
/* I recapiti nel pie' di pagina: stessi dati di contact.html e help.html,
   ripetuti qui perche' chi cerca un numero non deve cambiare pagina. */
.rb-footer__contact { margin-top: 1rem; line-height: 1.7; }
.rb-footer__contact a { color: var(--rb-on-dark-soft); transition: color var(--rb-t) var(--rb-ease); }
.rb-footer__contact a:hover { color: var(--rb-orange); }
.rb-footer__title { font-family: var(--rb-font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.rb-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rb-footer__list li { margin: 0; }
.rb-footer__list a { font-size: 0.9375rem; color: var(--rb-on-dark-soft); transition: color var(--rb-t) var(--rb-ease); }
.rb-footer__list a:hover { color: var(--rb-orange); }
/* I banchi delle app. I due badge arrivano da Apple e da Google e non si
   ridisegnano: si allineano soltanto alla stessa altezza di 40 px, che e'
   la misura nativa di quello Apple. Larghezze diverse (120 e 134 px) perche'
   le proporzioni ufficiali dei due badge non coincidono. */
.rb-footer__nota { margin-top: 0.85rem; font-size: 0.8125rem; line-height: 1.5; color: rgba(255,255,255,0.52); max-width: 30ch; }
.rb-footer__apps { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; }
.rb-store { display: inline-flex; border-radius: 8px; transition: opacity var(--rb-t) var(--rb-ease); }
.rb-store img { height: 40px; width: auto; display: block; }
.rb-store:hover { opacity: 0.82; }
.rb-store:focus-visible { outline: 2px solid var(--rb-orange); outline-offset: 3px; }

.rb-footer__legal { padding-top: 2rem; display: grid; gap: 1rem; font-size: 0.8125rem; line-height: 1.6; color: rgba(255,255,255,0.52); }
/* Larghezza piena: il testo legale usa tutta la colonna, non una misura
   di lettura. Sono note di conformita', non prosa da leggere di seguito. */
.rb-footer__legal p { margin: 0; max-width: none; }

/* ==========================================================================
   RISALITA RAPIDA
   Quadrato ad angoli smussati in basso a destra, arancio dei bottoni e
   freccia bianca. Prende --rb-orange-deep come `.rb-btn`, e con esso lo stesso
   scurimento sull'hover e la stessa ombra: sta accanto ai bottoni della pagina
   e un arancio diverso si vedrebbe. Il #e9531d gli basterebbe da solo, perche'
   dentro non c'e' testo ma un simbolo e agli elementi non testuali WCAG chiede
   3:1, ma l'uniformita' viene prima.
   Entra e esce con opacita' e uno scatto di 10 px: `hidden` da solo togliera'
   l'elemento di colpo, quindi il ritiro passa dalla classe.
   ========================================================================== */
.rb-top {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 60;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--rb-orange-deep);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--rb-shadow-orange);
  opacity: 0;
  transform: translateY(10px);
  /* Ritirato non e' solo trasparente: `visibility` lo toglie anche al
     puntatore e al giro di tabulazione, e transisce a scatto, quindi
     l'uscita si vede lo stesso. Il JavaScript toglie `hidden` una volta
     sola: da li' in poi il va e vieni e' tutto di questa classe. */
  visibility: hidden;
  transition: opacity var(--rb-t) var(--rb-ease),
              transform var(--rb-t) var(--rb-ease),
              background-color var(--rb-t) var(--rb-ease),
              box-shadow var(--rb-t) var(--rb-ease),
              visibility 0s linear var(--rb-t);
}
/* `display: inline-flex` batte la regola d'autore `[hidden] { display: none }`
   dell'agente utente: senza questa riga il bottone nasce presente, cliccabile
   e sotto le dita di chi naviga da tastiera, solo trasparente. */
.rb-top[hidden] { display: none; }
.rb-top.is-on { opacity: 1; transform: translateY(0); visibility: visible; transition-delay: 0s; }
.rb-top:hover { background: #ad3809; box-shadow: 0 18px 36px -12px rgba(200,65,15,0.55); }
.rb-top:focus-visible { outline: 2px solid var(--rb-navy); outline-offset: 3px; }
.rb-top svg { width: 24px; height: 24px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .rb-top { transition: opacity var(--rb-t) var(--rb-ease); transform: none; }
  .rb-top.is-on { transform: none; }
}

/* ==========================================================================
   MODULO DI CONTATTO — Divi: modulo Contact Form, preset "Reibanq Form"
   Etichette sempre visibili, mai il solo placeholder: un campo compilato
   senza etichetta lascia chi rilegge senza sapere che cosa ha scritto.
   ========================================================================== */
.rb-form { display: grid; gap: var(--rb-gap); }
.rb-form__field { display: grid; gap: 0.4rem; }
.rb-form__field label {
  font-family: var(--rb-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-muted);
}
.rb-form__field input,
.rb-form__field select,
.rb-form__field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--rb-font-text);
  font-size: var(--rb-body-size);
  color: var(--rb-ink);
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r);
  transition: border-color var(--rb-t) var(--rb-ease), box-shadow var(--rb-t) var(--rb-ease);
}
.rb-form__field textarea { min-height: 9rem; resize: vertical; line-height: var(--rb-lh-body); }
.rb-form__field select { cursor: pointer; }
/* :focus e non :focus-within: qui il bordo appartiene al campo stesso, e
   :focus-visible su un input di testo non scatta quando ci si clicca dentro. */
.rb-form__field input:focus,
.rb-form__field select:focus,
.rb-form__field textarea:focus {
  outline: none;
  border-color: var(--rb-orange);
  box-shadow: 0 0 0 3px var(--rb-orange-soft);
}
@media (prefers-reduced-motion: reduce) {
  .rb-form__field input,
  .rb-form__field select,
  .rb-form__field textarea { transition: none; }
}

/* --- Segnaposto delle pagine legali -------------------------------------
   Deve *sembrare* un buco, non un testo: se somigliasse a prosa vera,
   qualcuno la pubblicherebbe. Su Divi resta un modulo Testo da sostituire. */
.rb-placeholder {
  padding: 0.85rem 1rem;
  border-left: 3px dashed var(--rb-line-strong);
  background: var(--rb-surface-alt);
  color: var(--rb-muted);
  font-style: italic;
}

/* ==========================================================================
   SCHEDE DELLA FAQ — Divi: i blurb `blrb_tab` piu' i sei accordion
   Sei bottoni e non sei link: cambiano quello che si vede nella stessa
   pagina. Chi arriva col Tab li attraversa con le frecce, non con sei Tab.
   ========================================================================== */
.rb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--rb-gap-lg);
}
.rb-tabs__tab {
  flex: 1 1 auto;
  min-width: 9rem;
  padding: 0.8rem 1.1rem;
  font-family: var(--rb-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rb-navy);
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-pill);
  cursor: pointer;
  transition: border-color var(--rb-t) var(--rb-ease),
              background-color var(--rb-t) var(--rb-ease),
              color var(--rb-t) var(--rb-ease);
}
.rb-tabs__tab:hover { border-color: var(--rb-orange); }
.rb-tabs__tab.is-current {
  color: #fff;
  background: var(--rb-orange-deep);
  border-color: var(--rb-orange-deep);
}
.rb-tabs__panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .rb-tabs__tab { transition: none; }
}

/* ----------------------------------------------------------------------------
   Briciola di pane (SCH-001)
   Le pagine dichiaravano un BreadcrumbList nei dati strutturati senza nessuna
   briciola visibile, e Google chiede di non marcare contenuto che il lettore
   non vede. Sta sotto l'eroe e non sopra: ogni pagina apre con un blocco scuro
   a tutta larghezza, e una striscia chiara infilata fra header ed eroe
   spezzerebbe la pagina. Il testo lo scrive build.py leggendo lo stesso albero
   dei dati strutturati, quindi le due non possono divergere.
   -------------------------------------------------------------------------- */
.rb-breadcrumb {
  border-bottom: 1px solid var(--rb-line);
  font-size: var(--rb-small);
}
.rb-breadcrumb .rb-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.75rem;
}
.rb-breadcrumb a {
  color: var(--rb-muted);
  text-decoration: none;
  transition: color var(--rb-t) var(--rb-ease);
}
.rb-breadcrumb a:hover { color: var(--rb-ink); text-decoration: underline; }
.rb-breadcrumb [aria-current="page"] { color: var(--rb-ink); font-weight: 600; }
/* Il separatore e' decorazione: sta in un ::before e non nel testo, cosi' un
   lettore di schermo legge le voci e non una fila di barre. */
.rb-breadcrumb .rb-container > * + *::before {
  content: "/";
  margin-right: 0.35rem;
  color: var(--rb-line-strong);
}
@media (prefers-reduced-motion: reduce) {
  .rb-breadcrumb a { transition: none; }
}