/* =========================================================================
   Sito di Scudo. Stessa carta e stesso inchiostro dell'app: chi arriva qui e
   poi apre Scudo non deve sentire il salto.

   La regola che governa tutto e' la stessa dell'app: il colore significa solo
   il verdetto. Qui dentro non c'e' niente di colorato per bellezza. Il rosso
   compare in una schermata sola, ed e' una schermata vera in cui qualcuno sta
   per essere truffato.
   ========================================================================= */

/* Atkinson Hyperlegible, disegnato dal Braille Institute per chi ci vede poco.
   Copiato dentro il sito e non chiamato da Google: la pagina dichiara di non
   contattare nessuno, e deve essere vero anche per il carattere. */
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/Atkinson-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/Atkinson-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/Atkinson-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/Atkinson-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ground:#f1eee7; --surface:#fffdf8; --surface-2:#e9e5dc;
  --ink:#0b1a1c; --ink-soft:#4c5b5d; --line:#c9c3b6; --linea-forte:#0b1a1c;
  --accent:#0b1a1c; --accent-scuro:#000; --accent-ink:#fffdf8;
  --bad:#991812;
  --raggio:14px; --raggio-piccolo:8px;
  --misura:min(100% - 2.5rem, 68rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  /* 19px come nell'app: il pubblico e' lo stesso, e non ci vede benissimo. */
  font-size:19px; line-height:1.55; overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }

.dentro { width:var(--misura); margin-inline:auto; }

/* ---------- testa ---------- */
.testa { border-bottom:1.5px solid var(--line); }
.testa .dentro { display:flex; align-items:center; gap:1rem; min-height:68px; }
.marchio { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.marchio svg { width:26px; height:26px; flex:none; }
.testa nav { margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.testa nav a {
  text-decoration:none; padding:.6rem .85rem; border-radius:var(--raggio-piccolo);
  font-size:.92rem; color:var(--ink-soft); white-space:nowrap;
}
.testa nav a:hover { color:var(--ink); background:var(--surface-2); }
.testa nav a[aria-current] { color:var(--ink); font-weight:700; }

/* ---------- bottoni ---------- */
.bottone {
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:60px; padding:1rem 2rem; border-radius:var(--raggio-piccolo);
  background:var(--accent); color:var(--accent-ink); border:2px solid var(--accent);
  font-family:inherit; font-size:1.12rem; font-weight:700; text-decoration:none;
  transition:background .18s ease, transform .1s ease;
}
.bottone:hover { background:var(--accent-scuro); border-color:var(--accent-scuro); }
/* Il bottone porta fuori, in una scheda nuova: la freccetta lo dice prima del clic. */
.bottone[target]::after { content:"\2197"; margin-left:.5rem; font-size:.9em; }
.bottone:active { transform:translateY(1px); }
:focus-visible { outline:3px solid var(--linea-forte); outline-offset:3px; }

/* ---------- ritmo delle sezioni ---------- */
section { padding-block:clamp(3.5rem, 8vw, 6rem); }
section + section { border-top:1.5px solid var(--line); }
h1, h2, h3 { margin:0; line-height:1.12; letter-spacing:-.02em; text-wrap:balance; }
h1 { font-size:clamp(2.1rem, 6.4vw, 3.4rem); }
h2 { font-size:clamp(1.65rem, 4.4vw, 2.35rem); }
h3 { font-size:1.22rem; line-height:1.25; }
p { margin:0; max-width:60ch; }
.occhiello { font-size:.85rem; font-weight:700; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }
.soffio { color:var(--ink-soft); }

/* ---------- apertura ---------- */
.apertura { padding-top:clamp(2.5rem, 5vw, 4rem); }
.apertura .dentro { display:grid; gap:clamp(2rem, 5vw, 4rem); align-items:center; }
@media (min-width: 900px) { .apertura .dentro { grid-template-columns:1.15fr .85fr; } }
.apertura .parole { display:flex; flex-direction:column; align-items:flex-start; gap:1.35rem; }
.apertura p { font-size:1.2rem; }
/* Il sito e' sempre chiaro, per scelta di Sula del 31-08-2026, quindi le schermate
   sono quelle chiare dell'app e basta. L'app invece i due temi ce li ha e li tiene. */
.telefono {
  display:block; width:min(100%, 300px); margin-inline:auto; border-radius:var(--raggio);
  border:1.5px solid var(--line); overflow:hidden;
}
.telefono img { width:100%; display:block; }
@media (min-width: 900px) { .telefono { margin-inline:0 auto; } }

/* ---------- che cosa controlla: un blocco forte e un elenco rigato,
     come la home dell'app. Non tre schede uguali. ---------- */
.controlla .dentro { display:grid; gap:clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .controlla .dentro { grid-template-columns:1fr 300px; align-items:start; } }
.controlla h2 { margin-bottom:2rem; }
/* Era pieno di inchiostro e con l'ombra: nell'app quella veste ce l'ha un bottone
   vero, qui e' testo, e prometteva un tocco che non esiste. Resta il primo dei tre,
   ma per dimensione e aria. L'unica cosa piena di inchiostro nella pagina e' il
   bottone che apre Scudo: cosi' si vede da lontano qual e' l'azione. */
.urgente {
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--raggio);
  padding:1.75rem; margin-bottom:1.5rem;
}
.urgente h3 { font-size:1.6rem; margin-bottom:.6rem; }
.urgente p { max-width:48ch; }
.riga { padding-block:1.35rem; border-top:1.5px solid var(--line); }
.riga:last-child { border-bottom:1.5px solid var(--line); }
.riga h3 { margin-bottom:.35rem; }
.riga p { color:var(--ink-soft); font-size:.98rem; }

/* ---------- i numeri ---------- */
.numeri h2 { margin-bottom:.6rem; }
.numeri .intro { margin-bottom:2.5rem; }
.griglia-numeri { display:grid; gap:1.25rem; margin-bottom:2.5rem; }
@media (min-width: 620px) { .griglia-numeri { grid-template-columns:1fr 1fr; } }
.numero {
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--raggio); padding:1.5rem;
}
.numero b { display:block; font-size:clamp(2.4rem, 7vw, 3.2rem); line-height:1; letter-spacing:-.03em; }
.numero .cosa { display:block; font-weight:700; margin-block:.5rem .45rem; }
.numero p { color:var(--ink-soft); font-size:.94rem; }
.onesta {
  font-size:1.15rem; font-weight:700; max-width:52ch;
  border-left:4px solid var(--linea-forte); padding-left:1.15rem; margin-bottom:2.5rem;
}
details.rimisura { border-top:1.5px solid var(--line); padding-top:1.25rem; }
details.rimisura summary { font-weight:700; cursor:pointer; padding:.35rem 0; }
details.rimisura > *:not(summary) { margin-top:1rem; }
/* Ogni comando e' una riga con sotto, piu' in basso, cosa misura. Prima era una
   griglia allineata che sui telefoni stretti scorreva di lato senza dirlo. */
.comandi { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.comandi li {
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--raggio-piccolo);
  padding:.9rem 1.1rem;
}
.comandi code {
  display:block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92rem; font-weight:700; overflow-wrap:anywhere;
}
.comandi span { display:block; color:var(--ink-soft); font-size:.9rem; margin-top:.2rem; }

/* ---------- privacy ---------- */
.privacy .dentro { display:grid; gap:clamp(2rem, 5vw, 4rem); align-items:center; }
@media (min-width: 900px) { .privacy .dentro { grid-template-columns:.85fr 1.15fr; } }
@media (min-width: 900px) { .privacy .telefono { order:-1; margin-inline:0; } }
.privacy h2 { margin-bottom:1.25rem; }
.privacy .capofila { font-size:1.15rem; margin-bottom:1.75rem; }
.punti { list-style:none; margin:0 0 1.75rem; padding:0; display:grid; gap:1rem; }
.punti li { padding-left:1.6rem; position:relative; color:var(--ink-soft); }
.punti li::before {
  content:""; position:absolute; left:0; top:.62em; width:.7rem; height:2px; background:var(--linea-forte);
}
.nota { font-size:.94rem; color:var(--ink-soft); border-top:1.5px solid var(--line); padding-top:1.25rem; }

/* ---------- quello che non e' provato: colonna stretta, voce piu' bassa ---------- */
.aperto .dentro { max-width:44rem; margin-inline:auto; }
.aperto h2 { margin-bottom:1.5rem; }
.aperto p + p { margin-top:1.25rem; }

/* ---------- installare ---------- */
.installa h2 { margin-bottom:.75rem; }
.installa .intro { margin-bottom:2.5rem; }
.due { display:grid; gap:2rem; }
@media (min-width: 700px) { .due { grid-template-columns:1fr 1fr; gap:3rem; } }
.due h3 { padding-bottom:.85rem; border-bottom:1.5px solid var(--line); margin-bottom:1.25rem; }
.due ol { margin:0; padding-left:1.4rem; display:grid; gap:.85rem; }
.due li { padding-left:.3rem; }

/* ---------- chiusura ---------- */
.chiusura { text-align:center; }
.chiusura .dentro { display:flex; flex-direction:column; align-items:center; gap:1.75rem; }
.chiusura p { max-width:34ch; }

/* ---------- piede ---------- */
.piede { border-top:1.5px solid var(--line); padding-block:3rem; font-size:.9rem; color:var(--ink-soft); }
.piede .dentro { display:grid; gap:1.5rem; }
@media (min-width: 700px) { .piede .dentro { grid-template-columns:1fr auto; align-items:start; } }
.piede p { max-width:56ch; }
.piede .societa { display:grid; gap:.2rem; }
.piede a { text-underline-offset:3px; }