/* Le pagine di Take Care. Nessun carattere scaricato da fuori, nessuno
   script di terzi, nessun contatore: una pagina che parla di privacy e che
   intanto chiama sei domini sarebbe la prima cosa a non tornare.

   Il carattere e' Geist, come nell'app, ma il FILE sta qui (fonti/): la sua
   licenza (SIL OFL 1.1) permette di servirlo dal proprio sito, e chiederlo a
   Google Fonts direbbe a Google chi apre la pagina. Se il file non arriva si
   ricade sul carattere di sistema, e la pagina si legge lo stesso. */
@font-face {
  font-family: "Geist";
  src: url("fonti/Geist-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --fondo: #eef0fa;
  --testo: #12222b;
  --tenue: #55646e;
  --filo: #d3d8e8;
  --tessera: #ffffff;
  --marchio: #0e1c3f;
  --attenzione: #8a4b00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --testo: #e8eef2;
    --tenue: #9aa9b2;
    --filo: #23303a;
    --tessera: #0e1519;
    --marchio: #9dbbf3;
    --attenzione: #e0a86a;
  }
  /* Al buio la meta' blu comincia dal blu acceso, come nell'app: il blu
     notte sul nero rende 1,2 a 1 e si vedrebbe mezza capsula. */
  .segno stop:first-child { stop-color: #4f7fe0; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 17px/1.65 "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 43rem; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
header { border-bottom: 1px solid var(--filo); margin-bottom: 2rem; }
.marchio {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; color: var(--marchio); text-decoration: none;
  font-size: 1.05rem; padding: 1.25rem 0;
}
/* Il marchio e' un disegno vero, con i numeri di lib/nucleo/marchio.dart, e
   una prova li confronta (regola 5): qui era stato un rettangolo a due colori
   con gli angoli tondi, un marchio diverso da quello dell'app e del PDF.
   Dal 1.10.2026 e' la capsula a contorno del prototipo, due «U» che si
   toccano al centro, girata di 45 gradi verso l'alto a destra come in ogni
   posto in cui il prototipo la mostra. Girata con la CSS, come la' (40 x 20,
   la misura della Home): lo SVG resta la tela 48 x 24 dei numeri. */
.segno { width: 40px; height: 20px; flex: none; transform: rotate(-45deg); }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 1.5rem 0 .5rem; }
h2 { font-size: 1.2rem; margin: 2.5rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.75rem 0 .35rem; }
.data { color: var(--tenue); font-size: .92rem; margin: 0 0 2rem; }
a { color: var(--marchio); }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .94rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--filo); vertical-align: top; }
th { font-weight: 600; }
code { background: var(--tessera); padding: .1rem .3rem; border-radius: 4px; font-size: .9em; }
.manca {
  background: var(--tessera); border: 1px solid var(--attenzione);
  border-radius: 10px; padding: .85rem 1rem; margin: 1rem 0;
  color: var(--attenzione); font-size: .95rem;
}
.lingue { display: flex; gap: .5rem; padding: 0 0 1.25rem; }
.lingue a {
  border: 1px solid var(--filo); border-radius: 999px;
  padding: .3rem .85rem; font-size: .88rem; text-decoration: none; color: var(--tenue);
}
.lingue a.qui { border-color: var(--marchio); color: var(--marchio); font-weight: 600; }
footer { border-top: 1px solid var(--filo); margin-top: 3.5rem; padding-top: 1.25rem;
  color: var(--tenue); font-size: .9rem; }
footer a { margin-right: 1rem; }
[hidden] { display: none !important; }

/* Accessibilita'. Il fuoco si vede sempre (3 punti, nel colore del marchio:
   4,5 a 1 almeno su entrambi gli sfondi); il «Salta al contenuto» sta fuori
   schermo finche' la tastiera non lo raggiunge. */
:focus-visible { outline: 3px solid var(--marchio); outline-offset: 3px; border-radius: 4px; }
.salta {
  position: absolute; left: .75rem; top: -4rem; z-index: 10;
  background: var(--marchio); color: var(--fondo);
  padding: .6rem 1rem; border-radius: 8px; text-decoration: none; font-weight: 600;
}
.salta:focus { top: .75rem; }

/* La pagina d'ingresso: piu' larga delle altre, perche' ha le schede. */
.ingresso { max-width: 62rem; }
.ingresso h1 { font-size: 2.4rem; line-height: 1.15; margin: 1rem 0 .75rem; letter-spacing: -.01em; }
.ingresso .sotto { font-size: 1.2rem; color: var(--tenue); max-width: 38rem; margin: 0 0 1.5rem; line-height: 1.5; }
.ingresso .a-breve { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 .5rem; }
/* Non sono bottoni e non portano da nessuna parte: l'app non e' ancora negli
   store, e un collegamento finto sarebbe una promessa. Per questo sono
   <span>, senza bordo da pulsante e senza cursore. */
.negozio {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--filo); background: var(--tessera); color: var(--testo);
  border-radius: 14px; padding: .65rem 1.1rem; font-size: .95rem; line-height: 1.25;
}
.negozio small { display: block; color: var(--tenue); font-size: .75rem; }
.schede { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.schede li {
  background: var(--tessera); border: 1px solid var(--filo);
  border-radius: 16px; padding: 1.15rem 1.25rem;
}
.schede strong { display: block; margin-bottom: .25rem; color: var(--marchio); }
.schede span { color: var(--tenue); font-size: .95rem; line-height: 1.5; display: block; }
.avviso {
  border-left: 4px solid var(--marchio); background: var(--tessera);
  border-radius: 0 12px 12px 0; padding: .9rem 1.1rem; margin: 2rem 0 0; font-size: .95rem;
}
@media (min-width: 40rem) {
  .schede { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .ingresso h1 { font-size: 3.1rem; }
  .schede { grid-template-columns: repeat(3, 1fr); }
}
/* Nessun movimento da togliere: la pagina non ne ha. Solo il salto verso
   un'ancora resta istantaneo per chi ha chiesto meno movimento. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, .schede li { transition: color .15s, border-color .15s; }
}