/* La palette dell'app: accento #6C5CE7 (Tema.swift, Accento.colorset) e i
   colori scuri di sistema di iOS, fondo nero e superfici #1C1C1E. Sovrascrive
   le variabili del design system, che resta intatto. La scala dell'accento
   tiene la luminosità OKLCH dei gradini originali, così ogni tinta pesa come
   prima e cambia solo il colore. */
:root{
  --color-bg:#000000;
  --color-surface:#1C1C1E;
  --color-text:#FFFFFF;
  --color-accent:#6C5CE7;
  --color-accent-2:#6C5CE7;
  --color-divider:color-mix(in srgb, #545458 60%, transparent);
  --color-neutral-100:#F2F2F7;--color-neutral-200:#E5E5EA;--color-neutral-300:#C7C7CC;
  --color-neutral-400:#AEAEB2;--color-neutral-500:#8E8E93;--color-neutral-600:#636366;
  --color-neutral-700:#48484A;--color-neutral-800:#3A3A3C;--color-neutral-900:#2C2C2E;
  --color-accent-100:#F0F1FE;--color-accent-200:#DBDDFE;--color-accent-300:#BDBFFE;
  --color-accent-400:#9390FE;--color-accent-500:#6C5CE7;--color-accent-600:#5741CA;
  --color-accent-700:#41309D;--color-accent-800:#2D2170;--color-accent-900:#1C1842;
  --color-accent-2-100:#F0F1FE;--color-accent-2-200:#DBDDFE;--color-accent-2-300:#BDBFFE;
  --color-accent-2-400:#9390FE;--color-accent-2-500:#6C5CE7;--color-accent-2-600:#5741CA;
  --color-accent-2-700:#41309D;--color-accent-2-800:#2D2170;--color-accent-2-900:#1C1842;
  --color-section:#2D2170;--color-section-glow:#41309D;--color-section-ghost:#5741CA;
}
/* L'accento pieno sul nero arriva a 4,3: sotto il 4,5 che serve al testo
   piccolo. Le etichette in maiuscoletto usano il gradino più chiaro. */
body .kicker{color:var(--color-accent-400)}

/* Il logo dell'app accanto al nome, in barra e nel piede. */
.brand-logo{width:28px;height:28px;border-radius:6px;vertical-align:middle;margin-right:var(--space-2)}
.nav-brand{display:inline-flex;align-items:center}

/* Classi che sostituiscono gli stili scritti nelle pagine: la CSP del sito
   (style-src 'self') non ammette né <style> né attributi style. */
.mt-4{margin-top:var(--space-4)}
.mb-2{margin-bottom:var(--space-2)}
.row-wrap{display:flex;gap:var(--space-3);flex-wrap:wrap}
.footer-tag{font-size:14px;max-width:34ch;color:color-mix(in srgb, var(--color-text) 70%, transparent)}
a.langbtn{text-decoration:none;display:inline-block}
pre.copy{white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}

/* Barra e piede sono uguali in ogni pagina: stanno qui, non ripetuti nei
   fogli delle singole pagine. */
.nav{padding-inline:max(var(--edge),calc((100% - 1200px) / 2 + var(--edge)));display:flex;align-items:center;gap:var(--space-4)}
.nav a{white-space:nowrap}
.nav-spacer{flex:1}
.langbtn{border:1px solid var(--color-neutral-700);background:transparent;color:var(--color-text);font-family:var(--font-body);font-size:12px;letter-spacing:0.04em;border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer}
.langbtn:hover{border-color:var(--color-accent);color:var(--color-accent)}
footer{padding:calc(2*var(--leading)) 0;border-top:1px solid var(--color-divider)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:var(--leading)}
.fcol .fcol-title{color:color-mix(in srgb, var(--color-text) 55%, transparent);margin-bottom:var(--space-3);font-size:13px;letter-spacing:0.08em;text-transform:uppercase}
.fcol a{display:block;color:var(--color-text);opacity:0.82;text-decoration:none;font-size:14px;margin-bottom:var(--space-2)}
.fcol a:hover{color:var(--color-accent);opacity:1}
.fbottom{font-size:13px;color:color-mix(in srgb, var(--color-text) 55%, transparent);margin-top:var(--leading)}
.nav a{color:var(--color-text);text-decoration:none}
.nav a:hover{color:var(--color-accent)}
.nav-brand{color:var(--color-text);text-decoration:none;font-weight:600}
@media (max-width:640px){.nav a:not(.nav-brand):not(.langbtn):not(.nav-cta){display:none}}
@media (max-width:640px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}

/* Le catture hanno già la barra di stato dell'iPhone: la cornice segue
   l'immagine, senza proporzioni imposte che la taglierebbero. */
.slot-img{display:block;width:100%;height:auto}

/* Senza uno sfondo su html, quello di body si ripete sul resto della finestra
   e sotto una pagina corta si vede la giunzione delle sfumature. */
html{background:var(--color-bg)}
body{min-height:100vh}

/* Il percorso del traffico, dall'iPhone al server. Decide la forma dallo
   spazio che ha, non dalla finestra: in home vive in mezza colonna, in Come
   funziona a tutta larghezza. In fila quando ci sta, altrimenti in colonna. Le
   frecce le disegna il CSS, così l'elenco resta un elenco anche letto da un
   lettore di schermo. */
.flow-wrap{container-type:inline-size}
.flow{list-style:none;margin:var(--leading) 0;padding:0;display:grid;gap:28px;max-width:440px}
.flow li{position:relative;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--color-neutral-700);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-4);text-align:center;font-size:13px;line-height:1.4}
.flow li b{display:block;font-size:14px;margin-bottom:2px;color:var(--color-text)}
.flow li span{color:color-mix(in srgb, var(--color-text) 65%, transparent)}
.flow li:not(:last-child)::after{content:"\2193";position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);color:var(--color-accent-400);font-size:16px;line-height:20px}
/* In fila solo se ogni passaggio ha almeno ~150 px: più stretto, il testo
   andrebbe a capo parola per parola. */
@container (min-width:860px){
  .flow{max-width:none;grid-auto-flow:column;grid-auto-columns:1fr}
  .flow li:not(:last-child)::after{content:"\2192";left:auto;right:-22px;bottom:auto;top:50%;transform:translateY(-50%)}
}