/* Colori presi dall'icona (blu #1E3A8A → viola #7C3AED); tema chiaro e scuro secondo il sistema. */
:root {
  --fondo: #ffffff;
  --fondo-riquadro: #f4f3fb;
  --testo: #1b1b2a;
  --testo-tenue: #55556a;
  --bordo: #dddbe8;
  --accento: #5b34d6;
  --accento-testo: #ffffff;
  --avviso: #fff6e0;
  --avviso-bordo: #e8b64c;
  --sfumatura: linear-gradient(135deg, #1e3a8a, #7c3aed);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12121c;
    --fondo-riquadro: #1d1c2b;
    --testo: #ececf4;
    --testo-tenue: #a6a5bb;
    --bordo: #33324a;
    --accento: #a58bff;
    --accento-testo: #12121c;
    --avviso: #2d2615;
    --avviso-bordo: #8a6a22;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.pagina {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

a { color: var(--accento); }

header.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--testo);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
}

.marchio img { width: 36px; height: 36px; }

nav.menu { display: flex; gap: 16px; font-size: 0.95rem; }

/* Sul telefono i link vanno su una riga loro, sotto il nome. */
@media (max-width: 520px) {
  header.testata { flex-wrap: wrap; row-gap: 8px; padding-bottom: 12px; }
  nav.menu { width: 100%; gap: 20px; padding-top: 10px; border-top: 1px solid var(--bordo); }
}
nav.menu a[aria-current="page"] { color: var(--testo); font-weight: 600; text-decoration: none; }

/* La home è più larga: apertura su due colonne, passi e schede affiancati. */
.pagina.larga { max-width: 1040px; }

.apertura {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  padding: 32px 0 8px;
}

.illustrazione { width: 100%; max-width: 480px; height: auto; justify-self: center; }

@media (min-width: 820px) {
  .apertura { grid-template-columns: 1.1fr 1fr; gap: 40px; padding-top: 48px; }
}

/* Come funziona: tre passi numerati. */
ol.passi {
  list-style: none;
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 0;
}

ol.passi li {
  counter-increment: passo;
  margin: 0;
  padding: 20px;
  border-radius: 12px;
  background: var(--fondo-riquadro);
}

ol.passi li::before {
  content: counter(passo);
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sfumatura);
  color: #fff;
  font-weight: 700;
}

ol.passi h3, ul.schede h3, .scaricamento h3 { margin: 12px 0 4px; font-size: 1.05rem; }
ol.passi p, ul.schede p { margin: 0; color: var(--testo-tenue); }

/* Cosa fa: schede con un'icona a tratto. */
ul.schede {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 16px;
  padding: 0;
}

ul.schede li {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--bordo);
  border-radius: 12px;
}

ul.schede svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accento);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

ul.schede svg .pieno { fill: var(--accento); stroke: none; }

/* Scarica: Windows e iPhone affiancati. */
.scaricamento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.scaricamento > div {
  padding: 4px 20px;
  border: 1px solid var(--bordo);
  border-radius: 12px;
}

.scaricamento h3 { margin-top: 16px; }
.scaricamento .pulsanti { margin: 12px 0; }

h2[id="download"], h2[id="scarica"] { scroll-margin-top: 16px; }

h1 {
  margin: 32px 0 12px;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.15;
}

.apertura h1 { margin-top: 0; }

.sottotitolo {
  margin: 0;
  color: var(--testo-tenue);
  font-size: 1.15rem;
}

/* Indice della guida. */
nav.indice {
  margin: 24px 0;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--fondo-riquadro);
}

nav.indice ol { margin: 0; padding-left: 1.4em; }
nav.indice li { margin: 4px 0; }

/* Le ancore non finiscono attaccate al bordo della finestra. */
h2[id] { scroll-margin-top: 16px; }

/* Tabelle strette: sul telefono scorrono dentro il loro riquadro, non la pagina. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.95rem;
}

th, td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--bordo);
  text-align: left;
  vertical-align: top;
}

th { color: var(--testo-tenue); font-weight: 600; }

td:first-child { white-space: nowrap; }

@media (max-width: 520px) {
  table { font-size: 0.88rem; }
  th, td { padding: 8px 6px; }
}

kbd, code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88em;
}

kbd {
  padding: 1px 6px;
  border: 1px solid var(--bordo);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--fondo-riquadro);
}

code { overflow-wrap: anywhere; }

.avviso {
  margin: 24px 0;
  padding: 14px 16px;
  border: 1px solid var(--avviso-bordo);
  border-radius: 10px;
  background: var(--avviso);
}

.pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.pulsante {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--sfumatura);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.pulsante.secondario {
  background: none;
  border: 1px solid var(--bordo);
  color: var(--testo);
}

/* Badge ufficiale di Apple: va usato com'è, alto almeno 40 px, con uno spazio libero
   di un quarto della sua altezza intorno (Apple, "Marketing Resources and Identity Guidelines"):
   con 48 px sono 12 px, garantiti dai margini di .pulsanti. */
/* Badge ufficiali di Apple e Microsoft, ospitati nel sito e mai modificati: solo l'altezza, con le
   proporzioni originali (regole di tutte e due). */
.badge-app-store, .badge-microsoft-store { display: inline-block; line-height: 0; }

.badge-app-store img, .badge-microsoft-store img { height: 48px; width: auto; }

h2 { margin: 40px 0 12px; font-size: 1.45rem; }

ul { padding-left: 1.2em; }
li { margin: 6px 0; }

.nota { color: var(--testo-tenue); font-size: 0.95rem; }

/* Riquadri nel testo: consigli (colore dell'icona) e avvertenze (giallo, come l'avviso della home). */
.riquadro {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid;
  border-radius: 8px;
}

.riquadro.consiglio { border-color: var(--accento); background: var(--fondo-riquadro); }
.riquadro.attenzione { border-color: var(--avviso-bordo); background: var(--avviso); }

/* Istruzioni numerate (guida): il numero in un cerchietto con i colori dell'icona. */
main > ol:not(.passi) {
  list-style: none;
  counter-reset: istruzione;
  padding-left: 0;
}

main > ol:not(.passi) > li {
  counter-increment: istruzione;
  position: relative;
  margin: 10px 0;
  padding-left: 38px;
}

main > ol:not(.passi) > li::before {
  content: counter(istruzione);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sfumatura);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

footer.piede {
  margin: 56px 0 0;
  padding: 20px 0 32px;
  border-top: 1px solid var(--bordo);
  color: var(--testo-tenue);
  font-size: 0.9rem;
}

h3 { margin: 28px 0 8px; font-size: 1.1rem; }
h3[id] { scroll-margin-top: 16px; }