/* Keep Zero: sistema dell'outro. Solo tipografia Barlow su antracite, kraft come accento.
   Valori da docs/identita-visiva.md. */

@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2")}

:root{
  --ink:#282726;
  --ink-2:#33312E;
  --chalk:#F3EFE9;
  --chalk-2:#C9C2B8;
  --chalk-3:#A39C93;
  --kraft:#B69979;
  --ok:#A9C29A;
  --ko:#E59A7F;
  --line:rgba(243,239,233,.14);
  --line-2:rgba(243,239,233,.28);
  --font:Barlow,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--ink);color:var(--chalk)}
body{font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
b,strong{font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--kraft);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* logotipo: sempre dal vettoriale in /brand, colorato con currentColor */
.wordmark{display:block;aspect-ratio:352/200;background:currentColor;
  -webkit-mask:url(/brand/keepzero-wordmark.svg) center/contain no-repeat;
  mask:url(/brand/keepzero-wordmark.svg) center/contain no-repeat}

/* testi */
.eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-3)}
.display{margin:14px 0 0;font-weight:500;font-size:clamp(46px,13vw,84px);line-height:.96;letter-spacing:-.035em;text-wrap:balance}
.title{margin:10px 0 0;font-weight:500;font-size:clamp(32px,9vw,40px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.lead{margin:18px 0 0;font-size:18px;line-height:1.5;color:var(--chalk-2);text-wrap:pretty;max-width:36ch}
.small{font-size:14px;line-height:1.45;color:var(--chalk-3)}
.k{color:var(--kraft)}
.num{font-variant-numeric:tabular-nums}

/* bottoni */
.btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 24px;border-radius:16px;border:0;font-size:18px;font-weight:600;text-decoration:none;transition:transform .15s var(--ease),opacity .2s}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;flex:0 0 20px}
.btn-primary{background:var(--kraft);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--chalk);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* moduli */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field>label,.field>legend{padding:0;font-size:15px;font-weight:600;color:var(--chalk-2)}
.field em{font-style:normal;font-weight:400;color:var(--chalk-3)}
.field input[type=text],.field input[type=email],.field input[type=tel]{width:100%;height:56px;padding:0 16px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--ink-2);font-size:17px;color:var(--chalk)}
.field input::placeholder{color:var(--chalk-3);opacity:1}
.field input:focus{outline:none;border-color:var(--kraft)}
.field.err input{border-color:var(--ko)}
.msg{margin:0;font-size:14px;line-height:1.4;color:var(--ko)}
.check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;min-height:44px;font-size:15px;line-height:1.45;color:var(--chalk-2)}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--kraft)}
.check.err{color:var(--ko)}

/* scelta a pillole (radio veri, etichetta come bersaglio) */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pill{position:relative}
.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-2);font-size:17px;font-weight:500}
.pill input:checked+span{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.pill input:focus-visible+span{outline:2px solid var(--kraft);outline-offset:3px}
.field.err .pill span{border-color:var(--ko)}

/* campo trappola per i bot: fuori schermo, non raggiungibile */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* parole che salgono (lo stato nascosto si applica solo quando lo script parte) */
.rise-ready .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em 0 .12em;margin:-.06em 0 -.12em}
.rise-ready .wi{display:inline-block;transform:translateY(112%)}
.rise-ready.risen .wi{transform:none;transition:transform .8s var(--ease);transition-delay:calc(var(--i) * 75ms + var(--d, 0ms))}
.fade-ready{opacity:0;transform:translateY(10px)}
.fade-ready.risen{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d, 280ms)}
.d2{--d:380ms}
.d3{--d:480ms}

/* segnaposto dei dati mancanti, ben visibili nelle bozze */
mark{background:rgba(182,153,121,.22);color:var(--chalk);padding:0 4px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise-ready .wi{transform:none!important}
  .fade-ready{opacity:1!important;transform:none!important}
}