/* Stile delle pagine di guida del sito (fuori dall'app): sobrio, leggibile,
   chiaro o scuro secondo le preferenze del dispositivo. */
:root { color-scheme: light dark; }
body {
  margin: 0 auto; padding: 28px 20px 60px; max-width: 720px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7; color: #16204a; background: #f5f6fb;
}
h1 { font-size: 27px; line-height: 1.25; margin: 0 0 10px; }
h2 { font-size: 19px; margin: 34px 0 8px; color: #2b3f8f; }
h3 { font-size: 15.5px; margin: 22px 0 6px; }
.occhiello { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #7c86ad; font-weight: 700; margin: 0 0 4px; }
.occhiello a { text-decoration: none; color: inherit; }
.guida { font-size: 17px; font-weight: 500; }
a { color: #2b3f8f; }
.apri {
  display: inline-block; margin: 26px 0 8px; padding: 13px 22px; border-radius: 14px;
  background: #2b3f8f; color: #fff; text-decoration: none; font-weight: 700;
}
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }
/* Citazioni dai messaggi e dai diari dei santi. */
blockquote {
  margin: 14px 0; padding: 2px 0 2px 16px; border-left: 3px solid #d8cbaa;
}
blockquote p { margin: 0; font-size: 15px; }
.fonte { display: block; margin-top: 4px; font-size: 12.5px; opacity: .7; font-style: italic; }
footer { margin-top: 44px; font-size: 13px; color: #6b7495; border-top: 1px solid #dfe3f0; padding-top: 16px; }
@media (prefers-color-scheme: dark) {
  body { background: #101632; color: #e7eaf6; }
  h2 { color: #a9b9ff; } a { color: #a9b9ff; }
  .apri { background: #e0b24a; color: #101632; }
  footer { color: #99a1c4; border-color: #263166; }
  blockquote { border-color: #3a4680; }
}


/* Riquadro "come averla sul telefono", in fondo a ogni guida. */
.installa { margin: 26px 0 8px; padding: 18px; border-radius: 16px; background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); }
.installa h2 { margin-top: 0; }
.installa ol { padding-left: 20px; margin: 8px 0 0; }
@media (prefers-color-scheme: dark) {
  .installa { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
}

/* I due distintivi degli store, in fondo a ogni guida. Quello di Google è il
   suo file ufficiale; quello dell'iPhone è disegnato sulla stessa griglia.
   Il distintivo È il bottone: niente cornice nostra attorno, ce l'hanno già. */
.store-riga { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.store-btn { flex: 1 1 148px; max-width: 200px; min-width: 0; display: block; line-height: 0; }
.store-btn > img, .store-btn > svg { width: 100%; height: auto; display: block; }
.store-btn:active { transform: translateY(1px); }
.store-nota { font-size: 14.5px; opacity: .85; margin: 6px 0 0; }