/* ==========================================================================
   LAYOUT: struttura della pagina (colonne, spaziature, adattamento a mobile)
   ========================================================================== */

:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink)}

.wrap{max-width:1440px;margin:0 auto;padding:20px clamp(12px,3vw,32px) 40px}

header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin-bottom:16px}
h1{font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.02em;line-height:1.1;margin:0}
header p{margin:0;color:var(--muted);max-width:60ch}
h2{font-size:1.15rem;margin:0 0 10px}

/* Due colonne: check list a sinistra, oscilloscopio a destra */
.layout{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:20px;align-items:start}
.stage{display:grid;gap:20px;min-width:0}
/* Sotto l'oscilloscopio: carico e formule affiancati */
.lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}

@media (max-width:1100px){ .lower{grid-template-columns:1fr} }
/* Su schermi stretti l'oscilloscopio va in alto e la check list sotto */
@media (max-width:920px){ .layout{grid-template-columns:1fr} .stage{order:-1} }