/* Le pagine pubbliche (fase 13 di PIANO-APP-STORE.md): presentazione,
   informativa, assistenza. Si leggono senza accesso e senza l'app dietro, quindi
   hanno il loro stile, con i colori di index.html («Colore»). Il tema segue il
   dispositivo: qui la scelta fatta nell'app non arriva. */
@font-face { font-family: "Figtree"; src: url("/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --sfondo: #F6F2EC; --superficie: #FFFFFF; --testo: #1D1B2E; --soffuso: #5F5A6E; --linea: #E7E1D8;
  --indaco: #262461; --indaco-testo: #CFCDF3; --accento: #3F3CB8; --accento-fondo: #E4E2FA; --corallo: #EB5A38;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #13121C; --superficie: #1E1C2B; --testo: #F3EFE8; --soffuso: #A7A2B6; --linea: #2E2B3E;
    --indaco: #2B2878; --indaco-testo: #D3D1F7; --accento: #ABA8FF; --accento-fondo: #2A2852; --corallo: #F0643F;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; padding: 24px 16px 48px; background: var(--sfondo); color: var(--testo);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15.5px; line-height: 1.6;
  padding-top: max(24px, env(safe-area-inset-top)); }
main { max-width: 680px; margin: 0 auto; }
.foglio { background: var(--superficie); border-radius: 26px; padding: 26px 22px; }
.foglio + .foglio { margin-top: 14px; }
h1, h2 { font-family: "Bricolage Grotesque", "Figtree", sans-serif; line-height: 1.25; }
h1 { font-size: 28px; margin: 0 0 4px; text-wrap: balance; }
p { text-wrap: pretty; }
h2 { font-size: 19px; margin: 28px 0 6px; }
.foglio > h2:first-child { margin-top: 0; }
p, li, td { color: var(--soffuso); }
strong, th { color: var(--testo); }
a { color: var(--accento); font-weight: 600; }
ul, ol { margin: 8px 0; padding-left: 20px; } li { margin-bottom: 6px; }
.data { font-size: 13.5px; margin: 0 0 18px; }

/* La testata: logo e nome, come sull'icona dell'app. */
.testata { display: flex; align-items: center; gap: 12px; margin: 0 auto 18px; max-width: 680px; text-decoration: none; color: var(--testo); }
.testata img { width: 44px; height: 44px; border-radius: 11px; }
.testata span { font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: 21px; font-weight: 700; }

/* Il riquadro indaco: la cosa da non perdere. */
.evidenza { background: var(--indaco); color: var(--indaco-testo); border-radius: 22px; padding: 18px 20px; margin: 0 0 14px; }
.evidenza p, .evidenza li { color: var(--indaco-testo); }
.evidenza strong { color: #FFFFFF; }
.evidenza p:first-child { margin-top: 0; } .evidenza p:last-child { margin-bottom: 0; }

/* Tabelle che su un telefono diventano schede: niente scorrimento di lato. */
table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
@media (max-width: 560px) {
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { border-bottom: 1px solid var(--linea); padding: 8px 0; }
  td { border: 0; padding: 2px 0; }
  td:first-child { color: var(--testo); }
  /* Senza intestazioni, l'ultima colonna dice da sola cos'è. */
  .t-vedo td:last-child::before { content: "Cosa vedo io: "; font-weight: 700; color: var(--testo); }
  .t-arriva td:last-child::before { content: "Cosa gli arriva: "; font-weight: 700; color: var(--testo); }
}

/* Domande che si aprono una alla volta (assistenza). */
details { border-bottom: 1px solid var(--linea); padding: 12px 0; }
details:last-of-type { border-bottom: 0; }
summary { cursor: pointer; font-weight: 700; color: var(--testo); }
details p { margin: 8px 0 0; }
/* Gli screenshot di Comandi nella guida di Apple Pay (gli stessi dell'app, img/guida/). */
.guida-foto { display: block; width: 100%; max-width: 300px; height: auto; margin: 8px 0 4px; border-radius: 14px; border: 1px solid var(--linea); background: #F2F2F7; }

/* Le schermate dell'app, affiancate come due telefoni. */
.schermate { display: flex; justify-content: center; gap: 14px; margin: 14px 0; }
.schermate img { flex: 1 1 0; min-width: 0; max-width: 250px; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--linea); }

/* Pulsanti a pillola, come nell'app. */
.pulsanti { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 4px; }
.pulsante { display: inline-block; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 700; }
/* Corallo un po' più scuro dell'app: col bianco sopra arriva al contrasto minimo (4,5:1). */
.pulsante-pieno { background: #C9461F; color: #FFFFFF; }
.pulsante-tenue { background: var(--accento-fondo); color: var(--accento); }
/* Una notizia, non un pulsante: niente pillola, che inviterebbe a toccare. */
.in-arrivo { margin: 0; font-size: 14.5px; color: var(--soffuso); }

.piede { max-width: 680px; margin: 22px auto 0; text-align: center; font-size: 13.5px; color: var(--soffuso); }
.piede a { margin: 0 8px; }