:root{--fondo:#0E0F11;--inchiostro:#E9EDF2;--tenue:#9AA3AE;--accento:#E8FF3A;--su-accento:#0E0F11;--campo:#24272D;--ok:#22C55E;--testo:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
/* Pagina del link in bio. I token (:root) li scrive genera.mjs dal tema di officina/temi/. Prima il telefono (390 px). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--inchiostro);font:400 1.125rem/1.5 var(--testo);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,p,ul,blockquote{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--accento);outline-offset:3px}
::selection{background:var(--accento);color:var(--su-accento)}

/* misure */
:root{--margine:16px;--larghezza:1200px;--stacco:72px}
@media (min-width:720px){:root{--margine:32px;--stacco:120px}}
.barra,main>section,.coppia,.piede{width:min(100% - 2*var(--margine),var(--larghezza));margin-inline:auto}

/* il segno P./T. con il timbro verde, come grafica-provato.mjs */
.segno{position:relative;display:inline-block;font-weight:800;font-size:2.5rem;line-height:1;letter-spacing:-.06em;padding-right:.2em}
.punto{color:var(--accento)}
.timbro{position:absolute;right:-.12em;top:-.08em;width:.38em;height:.38em;border-radius:50%;background:var(--ok);display:grid;place-items:center}
.spunta{width:62%;height:62%;fill:none;stroke:var(--fondo);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* barra */
.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px 8px}
.marchio{display:inline-flex;align-items:center;gap:14px;text-decoration:none;min-height:48px}
.handle{font-weight:500;font-size:1rem}
.lingua{display:inline-flex;align-items:center;min-height:48px;padding-inline:16px;background:var(--campo);font-weight:500;font-size:1rem;text-decoration:none;transition:background-color .2s}
.lingua:hover{background:#30343b}

/* apertura */
.apertura{padding-block:40px 40px}
h1{font-weight:800;font-size:clamp(2.75rem,11.5vw,7.5rem);line-height:.95;letter-spacing:-.05em;text-wrap:balance}
.sotto{margin-top:24px;font-size:1.25rem;line-height:1.45;max-width:34ch}

h2{font-weight:800;font-size:clamp(2rem,7vw,3rem);line-height:1;letter-spacing:-.04em;text-wrap:balance}

/* bottoni: piatti, angoli vivi, alti per il pollice */
.bottone{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 24px;border:0;border-radius:0;font:700 1.125rem/1.2 var(--testo);text-decoration:none;cursor:pointer;transition:transform .12s ease,background-color .2s}
.bottone:active{transform:scale(.98)}
.bottone-accento{background:var(--accento);color:var(--su-accento)}
.bottone-accento:hover{background:#f1ff7a}
.bottone-scuro{background:var(--fondo);color:var(--inchiostro)}
.bottone-scuro:hover{background:#24272d}
.bottone-scuro:focus-visible{outline-color:var(--fondo)}

/* risorsa */
.coppia{display:grid;gap:var(--stacco)}
.risorsa{background:var(--campo);padding:28px 20px 24px;margin-inline:calc(-1*var(--margine) + 0px)}
.risorsa h2{margin-bottom:16px}
.intro{max-width:40ch}
.frase{margin:20px 0 0;font-weight:700;font-size:1.5rem;line-height:1.3;letter-spacing:-.015em}
.frase p::before{content:"\201C"}
.frase p::after{content:"\201D"}
.copia{margin-top:28px;display:grid;gap:10px}
.copia[hidden]{display:none}
.copia-etichetta{font-size:1rem;font-weight:500}
.copia-campo{width:100%;min-height:80px;padding:14px 16px;background:var(--fondo);color:var(--inchiostro);border:2px solid transparent;border-radius:0;font:400 1.125rem/1.4 var(--testo);resize:vertical}
.copia-campo::placeholder{color:var(--tenue)}
.copia-campo:focus{outline:0;border-color:var(--accento)}
.copia-bottone{width:100%;margin-top:6px}
.copia-bottone.fatto{background:var(--ok);color:var(--fondo)}
.copia-stato{min-height:1.5em;font-size:1rem}
.esito{margin-top:24px;display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:1rem;line-height:1.5}
.esito-spunta{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--ok);fill:none;stroke:var(--fondo);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* ultime prove */
.ultime h2{margin-bottom:24px}
.prove{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px}
.prova-link{display:grid;gap:12px;text-decoration:none}
.prova-img{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--campo);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.prova-link:hover .prova-img{transform:scale(1.02)}
.prova-testo{display:grid;gap:10px}
.prova-titolo{font-weight:700;font-size:1.125rem;line-height:1.3;letter-spacing:-.01em}
.prova-piede{display:grid;gap:2px;font-size:1rem}
.prova-piede time{color:var(--tenue)}
.prova-vai{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--accento)}

/* DM: il campo giallo, una volta sola */
main>.dm{width:auto;margin:var(--stacco) 0 0;background:var(--accento);color:var(--su-accento);padding:56px max(var(--margine),(100% - var(--larghezza))/2) 64px}
.dm p{margin-top:16px;max-width:36ch;font-size:1.25rem;line-height:1.4}
.dm .bottone{margin-top:28px;width:100%}

/* sezioni da config (newsletter, prodotto) */
main>.newsletter,main>.prodotto{margin-top:var(--stacco)}
.newsletter p,.prodotto p{margin-top:16px;max-width:40ch}
.newsletter .bottone,.prodotto .bottone{margin-top:24px;width:100%}

/* piede */
.piede{padding-block:56px 40px}
.piede-nome{font-weight:800;font-size:clamp(3.5rem,21vw,15rem);line-height:.85;letter-spacing:-.06em;white-space:nowrap}
.piede-nome.lungo{font-size:clamp(2.6rem,12.4vw,10rem)}
.piede-righe{margin-top:32px;display:grid;gap:14px;font-size:1rem;max-width:60ch}
.piede-link{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px}
.piede-link a{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;background:var(--campo);text-decoration:none;font-weight:500}
.piede-link a:hover{background:#30343b}

/* da 720 px in su */
@media (min-width:720px){
  .apertura{padding-block:64px 72px}
  .sotto{font-size:1.5rem;max-width:38ch}
  .risorsa{margin-inline:0;padding:40px}
  .copia-bottone,.dm .bottone,.newsletter .bottone,.prodotto .bottone{width:auto}
  .dm p{font-size:1.375rem}
}
@media (min-width:1000px){
  .segno{font-size:3rem}
  .coppia{grid-template-columns:7fr 5fr;gap:48px;align-items:start}
  .frase{font-size:1.875rem}
  .dm{display:grid;grid-template-columns:1fr auto;column-gap:48px;align-items:end}
  .dm h2{grid-column:1;font-size:4.5rem}
  .dm p{grid-column:1}
  .dm .bottone{grid-column:2;grid-row:1 / span 2;align-self:end}
  .piede-righe{grid-template-columns:1fr 1fr;max-width:none;column-gap:48px}
  .piede-link{grid-column:1 / -1}
}

/* movimento: entrata breve all'apertura, nessun contenuto nascosto senza CSS */
@media (prefers-reduced-motion:no-preference){
  .barra,.apertura h1,.apertura .sotto,.risorsa,.ultime{animation:sale .6s cubic-bezier(.2,.7,.2,1) both}
  .apertura h1{animation-delay:.06s}
  .apertura .sotto{animation-delay:.14s}
  .risorsa{animation-delay:.22s}
  .ultime{animation-delay:.3s}
}
@keyframes sale{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}